@indigina/ui-kit 1.1.440 → 1.1.442
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.
- package/fesm2022/indigina-ui-kit.mjs +1871 -1179
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
- package/types/indigina-ui-kit.d.ts +215 -115
|
@@ -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, afterNextRender, 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, QueryList, 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
|
|
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,
|
|
@@ -5828,17 +5829,16 @@ class KitScrollNavigationSectionComponent {
|
|
|
5828
5829
|
this.title = '';
|
|
5829
5830
|
this.propertyChanged = new EventEmitter();
|
|
5830
5831
|
this.sectionTemplate = null;
|
|
5831
|
-
this.sectionContent = null;
|
|
5832
5832
|
}
|
|
5833
5833
|
ngOnChanges() {
|
|
5834
5834
|
this.propertyChanged?.emit();
|
|
5835
5835
|
}
|
|
5836
5836
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5837
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: KitScrollNavigationSectionComponent, isStandalone: true, selector: "kit-scroll-navigation-section", inputs: { title: "title", id: "id", buttonState: "buttonState", buttonIcon: "buttonIcon", tooltipText: "tooltipText", badgeCount: "badgeCount" }, outputs: { propertyChanged: "propertyChanged" }, viewQueries: [{ propertyName: "sectionTemplate", first: true, predicate: ["sectionTemplate"], descendants: true, static: true }
|
|
5837
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: KitScrollNavigationSectionComponent, isStandalone: true, selector: "kit-scroll-navigation-section", inputs: { title: "title", id: "id", buttonState: "buttonState", buttonIcon: "buttonIcon", tooltipText: "tooltipText", badgeCount: "badgeCount" }, outputs: { propertyChanged: "propertyChanged" }, viewQueries: [{ propertyName: "sectionTemplate", first: true, predicate: ["sectionTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #sectionTemplate>\n <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5838
5838
|
}
|
|
5839
5839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationSectionComponent, decorators: [{
|
|
5840
5840
|
type: Component,
|
|
5841
|
-
args: [{ selector: 'kit-scroll-navigation-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #sectionTemplate>\n <
|
|
5841
|
+
args: [{ selector: 'kit-scroll-navigation-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #sectionTemplate>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
5842
5842
|
}], propDecorators: { title: [{
|
|
5843
5843
|
type: Input
|
|
5844
5844
|
}], id: [{
|
|
@@ -5856,9 +5856,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
5856
5856
|
}], sectionTemplate: [{
|
|
5857
5857
|
type: ViewChild,
|
|
5858
5858
|
args: ['sectionTemplate', { static: true }]
|
|
5859
|
-
}], sectionContent: [{
|
|
5860
|
-
type: ViewChild,
|
|
5861
|
-
args: ['sectionContent']
|
|
5862
5859
|
}] } });
|
|
5863
5860
|
|
|
5864
5861
|
class KitScrollNavigationComponent {
|
|
@@ -5867,9 +5864,11 @@ class KitScrollNavigationComponent {
|
|
|
5867
5864
|
}
|
|
5868
5865
|
constructor() {
|
|
5869
5866
|
this.activatedRoute = inject(ActivatedRoute);
|
|
5867
|
+
this.destroyRef = inject(DestroyRef);
|
|
5870
5868
|
this.isNavigationBtnDisabled = input(false, ...(ngDevMode ? [{ debugName: "isNavigationBtnDisabled" }] : /* istanbul ignore next */ []));
|
|
5871
5869
|
this.dropdownDefaultText = input('View More', ...(ngDevMode ? [{ debugName: "dropdownDefaultText" }] : /* istanbul ignore next */ []));
|
|
5872
5870
|
this.sections = null;
|
|
5871
|
+
this.sectionContentRefs = new QueryList();
|
|
5873
5872
|
this.content = null;
|
|
5874
5873
|
this.collapsedList = null;
|
|
5875
5874
|
this.kitButtonType = KitButtonType;
|
|
@@ -5886,8 +5885,8 @@ class KitScrollNavigationComponent {
|
|
|
5886
5885
|
effect(() => {
|
|
5887
5886
|
if (!this.isNavigationBtnDisabled() && !this.hasScrolled && this.firstRenderScrollElementId()) {
|
|
5888
5887
|
requestAnimationFrame(() => {
|
|
5889
|
-
const
|
|
5890
|
-
|
|
5888
|
+
const index = this.sections?.toArray().findIndex(s => s.id === this.firstRenderScrollElementId()) ?? -1;
|
|
5889
|
+
const section = this.sectionContentRefs.toArray()[index]?.nativeElement ?? null;
|
|
5891
5890
|
this.hasScrolled = true;
|
|
5892
5891
|
section?.scrollIntoView({
|
|
5893
5892
|
behavior: 'smooth',
|
|
@@ -5911,17 +5910,24 @@ class KitScrollNavigationComponent {
|
|
|
5911
5910
|
this.setLastSectionMinHeight();
|
|
5912
5911
|
this.updateListItems();
|
|
5913
5912
|
this.handleSectionChanges();
|
|
5913
|
+
this.sections?.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
5914
|
+
this.updateListItems();
|
|
5915
|
+
this.handleSectionChanges();
|
|
5916
|
+
});
|
|
5917
|
+
this.sectionContentRefs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
5918
|
+
this.setLastSectionMinHeight();
|
|
5919
|
+
});
|
|
5914
5920
|
}
|
|
5915
5921
|
onSectionScroll() {
|
|
5916
5922
|
const contentElement = this.content?.nativeElement;
|
|
5917
|
-
if (!contentElement || !this.
|
|
5923
|
+
if (!contentElement || !this.sectionContentRefs.length || this.disableScrollUpdates) {
|
|
5918
5924
|
return;
|
|
5919
5925
|
}
|
|
5920
5926
|
let index = 0;
|
|
5921
5927
|
const contentScrollTop = contentElement.scrollTop + (contentElement.clientHeight / 2);
|
|
5922
5928
|
const scrolledSectionIndexes = new Set();
|
|
5923
|
-
for (const
|
|
5924
|
-
const sectionElement =
|
|
5929
|
+
for (const ref of this.sectionContentRefs.toArray()) {
|
|
5930
|
+
const sectionElement = ref.nativeElement;
|
|
5925
5931
|
const sectionTop = sectionElement.offsetTop;
|
|
5926
5932
|
const sectionHeight = sectionElement.offsetHeight;
|
|
5927
5933
|
const isFullyVisibleOnScreen = sectionTop <= contentScrollTop && ((sectionTop + sectionHeight) >= contentScrollTop);
|
|
@@ -5941,8 +5947,8 @@ class KitScrollNavigationComponent {
|
|
|
5941
5947
|
this.content?.nativeElement.addEventListener('scrollend', () => {
|
|
5942
5948
|
this.disableScrollUpdates = false;
|
|
5943
5949
|
}, { once: true });
|
|
5944
|
-
const
|
|
5945
|
-
|
|
5950
|
+
const index = this.sections?.toArray().findIndex(s => s.title === selectedItem.text) ?? -1;
|
|
5951
|
+
const section = this.sectionContentRefs.toArray()[index]?.nativeElement ?? null;
|
|
5946
5952
|
section?.scrollIntoView({
|
|
5947
5953
|
behavior: 'smooth',
|
|
5948
5954
|
block: 'start',
|
|
@@ -5969,18 +5975,18 @@ class KitScrollNavigationComponent {
|
|
|
5969
5975
|
}
|
|
5970
5976
|
setLastSectionMinHeight() {
|
|
5971
5977
|
const contentHeight = this.content?.nativeElement.clientHeight;
|
|
5972
|
-
if (contentHeight && this.
|
|
5973
|
-
this.calculateLastSectionMinHeight(
|
|
5978
|
+
if (contentHeight && this.sectionContentRefs.length) {
|
|
5979
|
+
this.calculateLastSectionMinHeight(contentHeight);
|
|
5974
5980
|
}
|
|
5975
5981
|
}
|
|
5976
|
-
calculateLastSectionMinHeight(
|
|
5977
|
-
const lastSection =
|
|
5982
|
+
calculateLastSectionMinHeight(contentHeight) {
|
|
5983
|
+
const lastSection = this.sectionContentRefs.toArray().at(-1)?.nativeElement;
|
|
5978
5984
|
if (lastSection && contentHeight > lastSection.clientHeight) {
|
|
5979
5985
|
lastSection.style.minHeight = `${contentHeight}px`;
|
|
5980
5986
|
}
|
|
5981
5987
|
}
|
|
5982
5988
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5983
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitScrollNavigationComponent, isStandalone: true, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultText: { classPropertyName: "dropdownDefaultText", publicName: "dropdownDefaultText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n [gap]=\"18\"\n [itemTemplate]=\"navItem\"\n [disableActions]=\"isNavigationBtnDisabled()\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.END\"\n (selectItem)=\"scrollToSection($event)\" />\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of sections?.toArray(); track item) {\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"
|
|
5989
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitScrollNavigationComponent, isStandalone: true, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultText: { classPropertyName: "dropdownDefaultText", publicName: "dropdownDefaultText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true }, { propertyName: "sectionContentRefs", predicate: ["sectionContent"], descendants: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n [gap]=\"18\"\n [itemTemplate]=\"navItem\"\n [disableActions]=\"isNavigationBtnDisabled()\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.END\"\n (selectItem)=\"scrollToSection($event)\" />\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of sections?.toArray(); track item) {\n <div #sectionContent\n class=\"kit-scroll-navigation-section\">\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template #navItem let-item>\n <div kitBadge\n [kitBadgeVisible]=\"item.badgeCount\"\n [kitBadgeText]=\"item.badgeCount\"\n [kitBadgeTheme]=\"kitBadgeTheme.DANGER\">\n <kit-button kitTooltip\n kitTooltipFilter='.nav-item'\n class=\"nav-item\"\n [active]=\"currentVisibleItem?.value === item.value\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"item.icon\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [state]=\"item.state ?? kitButtonState.DEFAULT\"\n [label]=\"item.text\"\n [title]=\"item.tooltipText\"\n [disabled]=\"isNavigationBtnDisabled()\"\n [kitTooltipVisible]=\"!!item.tooltipText\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;height:100%}.kit-scroll-navigation-items{padding-bottom:27px}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { 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: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: KitBadgeDirective, selector: "[kitBadge]", inputs: ["kitBadgeText", "kitBadgeTheme", "kitBadgeVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5984
5990
|
}
|
|
5985
5991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationComponent, decorators: [{
|
|
5986
5992
|
type: Component,
|
|
@@ -5991,10 +5997,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
5991
5997
|
KitTooltipDirective,
|
|
5992
5998
|
KitBadgeDirective,
|
|
5993
5999
|
NgTemplateOutlet,
|
|
5994
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n [gap]=\"18\"\n [itemTemplate]=\"navItem\"\n [disableActions]=\"isNavigationBtnDisabled()\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.END\"\n (selectItem)=\"scrollToSection($event)\" />\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of sections?.toArray(); track item) {\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"
|
|
6000
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-scroll-navigation\">\n <div class=\"kit-scroll-navigation-items\">\n <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n [gap]=\"18\"\n [itemTemplate]=\"navItem\"\n [disableActions]=\"isNavigationBtnDisabled()\"\n [dropdownAlign]=\"kitCollapsedListDropdownAlign.END\"\n (selectItem)=\"scrollToSection($event)\" />\n </div>\n\n <div #content\n class=\"kit-scroll-navigation-content\"\n (scroll)=\"onSectionScroll()\">\n @for (item of sections?.toArray(); track item) {\n <div #sectionContent\n class=\"kit-scroll-navigation-section\">\n <ng-container *ngTemplateOutlet=\"item.sectionTemplate\" />\n </div>\n }\n </div>\n</div>\n\n<ng-template #navItem let-item>\n <div kitBadge\n [kitBadgeVisible]=\"item.badgeCount\"\n [kitBadgeText]=\"item.badgeCount\"\n [kitBadgeTheme]=\"kitBadgeTheme.DANGER\">\n <kit-button kitTooltip\n kitTooltipFilter='.nav-item'\n class=\"nav-item\"\n [active]=\"currentVisibleItem?.value === item.value\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"item.icon\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [state]=\"item.state ?? kitButtonState.DEFAULT\"\n [label]=\"item.text\"\n [title]=\"item.tooltipText\"\n [disabled]=\"isNavigationBtnDisabled()\"\n [kitTooltipVisible]=\"!!item.tooltipText\"\n ></kit-button>\n </div>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;height:100%}.kit-scroll-navigation-items{padding-bottom:27px}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"] }]
|
|
5995
6001
|
}], ctorParameters: () => [], propDecorators: { isNavigationBtnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationBtnDisabled", required: false }] }], dropdownDefaultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDefaultText", required: false }] }], sections: [{
|
|
5996
6002
|
type: ContentChildren,
|
|
5997
6003
|
args: [KitScrollNavigationSectionComponent]
|
|
6004
|
+
}], sectionContentRefs: [{
|
|
6005
|
+
type: ViewChildren,
|
|
6006
|
+
args: ['sectionContent']
|
|
5998
6007
|
}], content: [{
|
|
5999
6008
|
type: ViewChild,
|
|
6000
6009
|
args: ['content', { static: true }]
|
|
@@ -6450,7 +6459,7 @@ class KitSearchBarComponent {
|
|
|
6450
6459
|
this.closeButtonClick.emit();
|
|
6451
6460
|
}
|
|
6452
6461
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6453
|
-
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 }); }
|
|
6462
|
+
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 }); }
|
|
6454
6463
|
}
|
|
6455
6464
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSearchBarComponent, decorators: [{
|
|
6456
6465
|
type: Component,
|
|
@@ -6973,143 +6982,1405 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
6973
6982
|
type: Input
|
|
6974
6983
|
}], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
6975
6984
|
|
|
6976
|
-
|
|
6977
|
-
const base = toODataString({ ...state, filter: undefined }, { utcDates });
|
|
6978
|
-
const filter = state.filter && convertFiltersToOData(state.filter, utcDates, columns);
|
|
6979
|
-
return decodeURIComponent(filter ? `${base}$filter=${filter}` : base);
|
|
6980
|
-
};
|
|
6981
|
-
const isKitFilterDescriptor = (filter) => {
|
|
6982
|
-
return 'field' in filter && 'value' in filter;
|
|
6983
|
-
};
|
|
6984
|
-
const kitFilterBy = (data, filter) => filterBy(data, filter);
|
|
6985
|
-
const convertFiltersToOData = (filters, utcDates, columns) => {
|
|
6986
|
-
const oDataFilters = filters.filters.map(filter => {
|
|
6987
|
-
if ('isCustomField' in filter && filter.isCustomField) {
|
|
6988
|
-
return convertCustomFiltersToOData(filter, columns);
|
|
6989
|
-
}
|
|
6990
|
-
else {
|
|
6991
|
-
return convertStandardFiltersToOData(filter, utcDates);
|
|
6992
|
-
}
|
|
6993
|
-
});
|
|
6994
|
-
return oDataFilters.filter(Boolean).join(` ${filters.logic} `);
|
|
6995
|
-
};
|
|
6996
|
-
const convertStandardFiltersToOData = (filter, utcDates) => {
|
|
6997
|
-
return toODataString({
|
|
6998
|
-
filter: isKitFilterDescriptor(filter)
|
|
6999
|
-
? { logic: KitFilterLogic.AND, filters: [filter] }
|
|
7000
|
-
: filter,
|
|
7001
|
-
}, { utcDates }).replace(/^\$filter=/, '');
|
|
7002
|
-
};
|
|
7003
|
-
const convertCustomFiltersToOData = (filter, columns) => {
|
|
7004
|
-
const internalFilter = filter.filters[0];
|
|
7005
|
-
if (!isKitFilterDescriptor(internalFilter)) {
|
|
7006
|
-
return '';
|
|
7007
|
-
}
|
|
7008
|
-
const column = columns?.find(col => col.field === internalFilter.field);
|
|
7009
|
-
if (column?.customFieldHandler) {
|
|
7010
|
-
return column.customFieldHandler(filter);
|
|
7011
|
-
}
|
|
7012
|
-
return '';
|
|
7013
|
-
};
|
|
7014
|
-
|
|
7015
|
-
var KitThemes;
|
|
7016
|
-
(function (KitThemes) {
|
|
7017
|
-
KitThemes["Light"] = "light";
|
|
7018
|
-
KitThemes["Dark"] = "dark";
|
|
7019
|
-
})(KitThemes || (KitThemes = {}));
|
|
7020
|
-
|
|
7021
|
-
class KitAbstractPayloadAction {
|
|
7022
|
-
constructor(payload) {
|
|
7023
|
-
this.payload = payload;
|
|
7024
|
-
}
|
|
7025
|
-
}
|
|
7026
|
-
|
|
7027
|
-
class SetSelectedMobileMenuItem extends KitAbstractPayloadAction {
|
|
7028
|
-
static { this.type = '[KitMobileMenu] SetSelectedMobileMenuItem'; }
|
|
7029
|
-
}
|
|
7030
|
-
|
|
7031
|
-
const KIT_MOBILE_MENU_STATE_TOKEN = new StateToken('kitMobileMenu');
|
|
7032
|
-
let KitMobileMenuState = class KitMobileMenuState {
|
|
7033
|
-
static selectedItem(state) {
|
|
7034
|
-
return state?.selectedItem || null;
|
|
7035
|
-
}
|
|
7036
|
-
setSelectedMobileMenuItem(ctx, action) {
|
|
7037
|
-
ctx.patchState({ selectedItem: action.payload });
|
|
7038
|
-
}
|
|
7039
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7040
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState }); }
|
|
7041
|
-
};
|
|
7042
|
-
__decorate([
|
|
7043
|
-
Action(SetSelectedMobileMenuItem)
|
|
7044
|
-
], KitMobileMenuState.prototype, "setSelectedMobileMenuItem", null);
|
|
7045
|
-
__decorate([
|
|
7046
|
-
Selector([KIT_MOBILE_MENU_STATE_TOKEN])
|
|
7047
|
-
], KitMobileMenuState, "selectedItem", null);
|
|
7048
|
-
KitMobileMenuState = __decorate([
|
|
7049
|
-
State({
|
|
7050
|
-
name: KIT_MOBILE_MENU_STATE_TOKEN,
|
|
7051
|
-
defaults: {
|
|
7052
|
-
selectedItem: null,
|
|
7053
|
-
},
|
|
7054
|
-
})
|
|
7055
|
-
], KitMobileMenuState);
|
|
7056
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState, decorators: [{
|
|
7057
|
-
type: Injectable
|
|
7058
|
-
}], propDecorators: { setSelectedMobileMenuItem: [] } });
|
|
7059
|
-
|
|
7060
|
-
class KitMobileHeaderComponent {
|
|
6985
|
+
class KitCardDetailsComponent {
|
|
7061
6986
|
constructor() {
|
|
7062
|
-
this.
|
|
7063
|
-
this.
|
|
6987
|
+
this.router = inject(Router);
|
|
6988
|
+
this.activatedRoute = inject(ActivatedRoute);
|
|
6989
|
+
this.host = inject(ElementRef);
|
|
6990
|
+
this.destroyRef = inject(DestroyRef);
|
|
6991
|
+
this.cardData$ = input.required(...(ngDevMode ? [{ debugName: "cardData$" }] : /* istanbul ignore next */ []));
|
|
6992
|
+
this.pageSize = input.required(...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
6993
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
6994
|
+
this.kitCardSkeletonConfig = input({
|
|
6995
|
+
itemHeight: 200,
|
|
6996
|
+
itemsCount: 3,
|
|
6997
|
+
}, ...(ngDevMode ? [{ debugName: "kitCardSkeletonConfig" }] : /* istanbul ignore next */ []));
|
|
6998
|
+
this.dataStateChanged = output();
|
|
6999
|
+
this.cardClicked = output();
|
|
7000
|
+
this.kitTextboxComponent = viewChild.required(KitTextboxComponent);
|
|
7001
|
+
this.cardElement = contentChild('cardElement', ...(ngDevMode ? [{ debugName: "cardElement" }] : /* istanbul ignore next */ []));
|
|
7002
|
+
this.headerActions = contentChild('headerActions', ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
|
|
7003
|
+
this.details = contentChild('details', ...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
|
|
7064
7004
|
this.kitSvgIcon = KitSvgIcon;
|
|
7065
7005
|
this.kitButtonType = KitButtonType;
|
|
7066
|
-
this.
|
|
7067
|
-
this.
|
|
7068
|
-
this.
|
|
7006
|
+
this.kitButtonKind = KitButtonKind;
|
|
7007
|
+
this.kitButtonIconPosition = KitButtonIconPosition;
|
|
7008
|
+
this.kitTextboxSize = KitTextboxSize;
|
|
7009
|
+
this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
7010
|
+
this.cardData = signal([], ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
|
|
7011
|
+
this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
7012
|
+
this.dataState = signal({
|
|
7013
|
+
skip: 0,
|
|
7014
|
+
take: 0,
|
|
7015
|
+
}, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
|
|
7016
|
+
this.newCreatedCards = signal([], ...(ngDevMode ? [{ debugName: "newCreatedCards" }] : /* istanbul ignore next */ []));
|
|
7017
|
+
this.skipNewCreatedCardFilter = computed(() => {
|
|
7018
|
+
return this.newCreatedCards().length ? {
|
|
7019
|
+
logic: KitFilterLogic.AND,
|
|
7020
|
+
filters: this.newCreatedCards().map(card => ({
|
|
7021
|
+
field: 'id',
|
|
7022
|
+
operator: KitFilterOperator.NEQ,
|
|
7023
|
+
value: card.id,
|
|
7024
|
+
})),
|
|
7025
|
+
} : {};
|
|
7026
|
+
}, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : /* istanbul ignore next */ []));
|
|
7027
|
+
this.shouldAppendFetchedData = true;
|
|
7028
|
+
this.showDetails = false;
|
|
7069
7029
|
}
|
|
7070
|
-
|
|
7071
|
-
this.
|
|
7030
|
+
ngOnInit() {
|
|
7031
|
+
this.dataState.update(state => ({
|
|
7032
|
+
...state,
|
|
7033
|
+
take: this.pageSize(),
|
|
7034
|
+
}));
|
|
7035
|
+
this.initCardDataSubscription();
|
|
7036
|
+
this.initSearchSubscription();
|
|
7037
|
+
this.initStateFromUrl();
|
|
7072
7038
|
}
|
|
7073
|
-
|
|
7074
|
-
|
|
7075
|
-
|
|
7076
|
-
|
|
7077
|
-
|
|
7078
|
-
|
|
7079
|
-
|
|
7080
|
-
|
|
7081
|
-
|
|
7082
|
-
|
|
7083
|
-
|
|
7084
|
-
|
|
7085
|
-
|
|
7086
|
-
|
|
7087
|
-
|
|
7088
|
-
|
|
7089
|
-
this.
|
|
7090
|
-
|
|
7091
|
-
|
|
7092
|
-
|
|
7093
|
-
this.
|
|
7094
|
-
|
|
7095
|
-
|
|
7096
|
-
|
|
7097
|
-
|
|
7098
|
-
|
|
7099
|
-
this.
|
|
7100
|
-
|
|
7039
|
+
loadMoreData() {
|
|
7040
|
+
this.shouldAppendFetchedData = true;
|
|
7041
|
+
this.dataState.update(state => ({
|
|
7042
|
+
...state,
|
|
7043
|
+
skip: (this.dataState()?.skip ?? 0) + this.pageSize(),
|
|
7044
|
+
take: this.pageSize(),
|
|
7045
|
+
}));
|
|
7046
|
+
this.updateData();
|
|
7047
|
+
}
|
|
7048
|
+
onCardClick(card) {
|
|
7049
|
+
const normalizedId = this.normalizeCardId(card.id);
|
|
7050
|
+
this.dataState.update(state => ({ ...state, activeId: normalizedId }));
|
|
7051
|
+
this.navigateToCard(normalizedId);
|
|
7052
|
+
this.cardClicked.emit({ ...card, id: normalizedId });
|
|
7053
|
+
}
|
|
7054
|
+
appendCard(card, navigateToCard = true) {
|
|
7055
|
+
this.cardData.set([
|
|
7056
|
+
...this.cardData(),
|
|
7057
|
+
card,
|
|
7058
|
+
]);
|
|
7059
|
+
this.newCreatedCards.set([
|
|
7060
|
+
...this.newCreatedCards(),
|
|
7061
|
+
card,
|
|
7062
|
+
]);
|
|
7063
|
+
this.dataState.update(state => ({
|
|
7064
|
+
...state,
|
|
7065
|
+
filters: this.skipNewCreatedCardFilter(),
|
|
7066
|
+
}));
|
|
7067
|
+
this.total.set(this.total() + 1);
|
|
7068
|
+
if (navigateToCard) {
|
|
7069
|
+
this.onCardClick(card);
|
|
7070
|
+
this.showDetails = true;
|
|
7071
|
+
}
|
|
7072
|
+
}
|
|
7073
|
+
deleteCard(cardId) {
|
|
7074
|
+
this.isLoading.set(true);
|
|
7075
|
+
const normalizedId = this.normalizeCardId(cardId);
|
|
7076
|
+
const deletedIndex = this.cardData().findIndex(card => this.normalizeCardId(card.id) === normalizedId);
|
|
7077
|
+
this.cardData.set(this.cardData().filter(card => this.normalizeCardId(card.id) !== normalizedId));
|
|
7078
|
+
this.total.set(this.total() - 1);
|
|
7079
|
+
const remainingCards = this.cardData();
|
|
7080
|
+
const nextCard = remainingCards.length ? remainingCards[deletedIndex] ?? remainingCards[deletedIndex - 1] : null;
|
|
7081
|
+
if (!this.cardData().length) {
|
|
7082
|
+
this.showDetails = false;
|
|
7083
|
+
}
|
|
7084
|
+
if (this.newCreatedCards().some(card => this.normalizeCardId(card.id) === normalizedId)) {
|
|
7085
|
+
this.removeFromNewCreatedCards(normalizedId);
|
|
7086
|
+
this.isLoading.set(false);
|
|
7087
|
+
if (nextCard) {
|
|
7088
|
+
this.onCardClick(nextCard);
|
|
7089
|
+
}
|
|
7090
|
+
return;
|
|
7091
|
+
}
|
|
7092
|
+
const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
|
|
7093
|
+
if (loadedCards >= this.total()) {
|
|
7094
|
+
this.isLoading.set(false);
|
|
7095
|
+
if (nextCard) {
|
|
7096
|
+
this.onCardClick(nextCard);
|
|
7097
|
+
}
|
|
7098
|
+
return;
|
|
7099
|
+
}
|
|
7100
|
+
this.showDetails = false;
|
|
7101
|
+
this.shouldAppendFetchedData = true;
|
|
7102
|
+
this.dataStateChanged.emit({
|
|
7103
|
+
skip: loadedCards,
|
|
7104
|
+
take: 1,
|
|
7105
|
+
filters: this.skipNewCreatedCardFilter(),
|
|
7106
|
+
search: this.dataState().search,
|
|
7101
7107
|
});
|
|
7102
7108
|
}
|
|
7103
|
-
|
|
7104
|
-
|
|
7109
|
+
updateSpecificCardData(cardData) {
|
|
7110
|
+
this.cardData.set(this.cardData().map(card => this.normalizeCardId(card.id) === this.normalizeCardId(cardData.id) ? cardData : card));
|
|
7105
7111
|
}
|
|
7106
|
-
|
|
7107
|
-
|
|
7108
|
-
}
|
|
7109
|
-
|
|
7110
|
-
|
|
7111
|
-
|
|
7112
|
-
|
|
7112
|
+
scrollToCardById(id) {
|
|
7113
|
+
const cardsEl = this.host.nativeElement.querySelector('.kit-card-details .cards');
|
|
7114
|
+
const el = cardsEl?.querySelector(`[data-card-id="${id}"]`) ?? null;
|
|
7115
|
+
el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
|
|
7116
|
+
}
|
|
7117
|
+
initSearchSubscription() {
|
|
7118
|
+
outputToObservable(this.kitTextboxComponent().changed).pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef), map((value) => value.trim())).subscribe((searchValue) => {
|
|
7119
|
+
this.cardData.set([]);
|
|
7120
|
+
this.newCreatedCards.set([]);
|
|
7121
|
+
this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined, activeId: undefined });
|
|
7122
|
+
this.shouldAppendFetchedData = true;
|
|
7123
|
+
this.showDetails = false;
|
|
7124
|
+
this.updateData();
|
|
7125
|
+
});
|
|
7126
|
+
}
|
|
7127
|
+
initStateFromUrl() {
|
|
7128
|
+
const { skip, search } = this.getStateFromUrl();
|
|
7129
|
+
if (search) {
|
|
7130
|
+
this.kitTextboxComponent().writeValue(search);
|
|
7131
|
+
if (skip && skip > 0) {
|
|
7132
|
+
this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize(), search });
|
|
7133
|
+
this.dataState.set({ skip, take: this.pageSize(), search });
|
|
7134
|
+
}
|
|
7135
|
+
else {
|
|
7136
|
+
this.isLoading.set(false);
|
|
7137
|
+
this.kitTextboxComponent().changed.emit(search);
|
|
7138
|
+
}
|
|
7139
|
+
return;
|
|
7140
|
+
}
|
|
7141
|
+
if (skip !== undefined) {
|
|
7142
|
+
this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize() });
|
|
7143
|
+
this.dataState.set({ skip, take: this.pageSize() });
|
|
7144
|
+
return;
|
|
7145
|
+
}
|
|
7146
|
+
this.updateData();
|
|
7147
|
+
}
|
|
7148
|
+
initCardDataSubscription() {
|
|
7149
|
+
const { activeId } = this.getStateFromUrl();
|
|
7150
|
+
this.cardData$().pipe(takeUntilDestroyed(this.destroyRef), filter(({ loading }) => !loading)).subscribe(data => {
|
|
7151
|
+
if (this.shouldAppendFetchedData) {
|
|
7152
|
+
this.cardData.set([
|
|
7153
|
+
...this.cardData(),
|
|
7154
|
+
...data.results.data,
|
|
7155
|
+
]);
|
|
7156
|
+
this.total.set(data.results.total + this.newCreatedCards().length);
|
|
7157
|
+
this.shouldAppendFetchedData = false;
|
|
7158
|
+
if (activeId && !this.dataState().activeId) {
|
|
7159
|
+
const activeCard = this.cardData().find(item => this.normalizeCardId(item.id) === activeId);
|
|
7160
|
+
if (activeCard) {
|
|
7161
|
+
this.selectNewLoadedCard(activeCard);
|
|
7162
|
+
return;
|
|
7163
|
+
}
|
|
7164
|
+
}
|
|
7165
|
+
if (!this.showDetails && data.results.data.length) {
|
|
7166
|
+
this.selectNewLoadedCard(data.results.data[0]);
|
|
7167
|
+
}
|
|
7168
|
+
}
|
|
7169
|
+
this.isLoading.set(false);
|
|
7170
|
+
});
|
|
7171
|
+
}
|
|
7172
|
+
updateData() {
|
|
7173
|
+
this.isLoading.set(true);
|
|
7174
|
+
this.setQueryParamsToUrl(this.dataState());
|
|
7175
|
+
this.dataStateChanged.emit(this.dataState());
|
|
7176
|
+
}
|
|
7177
|
+
normalizeCardId(id) {
|
|
7178
|
+
return id.toString();
|
|
7179
|
+
}
|
|
7180
|
+
removeFromNewCreatedCards(cardId) {
|
|
7181
|
+
this.newCreatedCards.set(this.newCreatedCards().filter(card => this.normalizeCardId(card.id) !== cardId));
|
|
7182
|
+
this.dataState.update(state => ({
|
|
7183
|
+
...state,
|
|
7184
|
+
filters: this.skipNewCreatedCardFilter(),
|
|
7185
|
+
}));
|
|
7186
|
+
}
|
|
7187
|
+
getStateFromUrl() {
|
|
7188
|
+
const queryParams = this.activatedRoute.snapshot.queryParams;
|
|
7189
|
+
const routeParams = this.activatedRoute.snapshot.firstChild?.params ?? this.activatedRoute.snapshot.params;
|
|
7190
|
+
return {
|
|
7191
|
+
skip: queryParams?.skip && Number(queryParams.skip),
|
|
7192
|
+
take: queryParams?.take && Number(queryParams.take),
|
|
7193
|
+
search: queryParams?.search && String(queryParams.search),
|
|
7194
|
+
activeId: routeParams?.id && String(routeParams.id),
|
|
7195
|
+
};
|
|
7196
|
+
}
|
|
7197
|
+
setQueryParamsToUrl(state) {
|
|
7198
|
+
const queryParams = Object.keys(state).reduce((acc, key) => {
|
|
7199
|
+
const val = state[key];
|
|
7200
|
+
if (val !== undefined && val !== '' && key !== 'filters' && key !== 'activeId') {
|
|
7201
|
+
acc[key] = val;
|
|
7202
|
+
}
|
|
7203
|
+
return acc;
|
|
7204
|
+
}, {});
|
|
7205
|
+
this.router.navigate([], {
|
|
7206
|
+
relativeTo: this.activatedRoute,
|
|
7207
|
+
queryParams,
|
|
7208
|
+
queryParamsHandling: 'replace',
|
|
7209
|
+
});
|
|
7210
|
+
}
|
|
7211
|
+
navigateToCard(id) {
|
|
7212
|
+
this.router.navigate([id], {
|
|
7213
|
+
relativeTo: this.activatedRoute,
|
|
7214
|
+
queryParamsHandling: 'preserve',
|
|
7215
|
+
});
|
|
7216
|
+
}
|
|
7217
|
+
selectNewLoadedCard(card) {
|
|
7218
|
+
this.isLoading.set(false);
|
|
7219
|
+
this.showDetails = true;
|
|
7220
|
+
this.onCardClick(card);
|
|
7221
|
+
requestAnimationFrame(() => {
|
|
7222
|
+
this.scrollToCardById(card.id.toString());
|
|
7223
|
+
});
|
|
7224
|
+
}
|
|
7225
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7226
|
+
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 }); }
|
|
7227
|
+
}
|
|
7228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
|
|
7229
|
+
type: Component,
|
|
7230
|
+
args: [{ selector: 'kit-card-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
7231
|
+
AsyncPipe,
|
|
7232
|
+
KitSkeletonComponent,
|
|
7233
|
+
KitEmptySectionComponent,
|
|
7234
|
+
KitButtonComponent,
|
|
7235
|
+
TranslatePipe,
|
|
7236
|
+
KitTextboxComponent,
|
|
7237
|
+
NgTemplateOutlet,
|
|
7238
|
+
KitEntityTitleComponent,
|
|
7239
|
+
], 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"] }]
|
|
7240
|
+
}], 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 }] }] } });
|
|
7241
|
+
|
|
7242
|
+
class KitAbstractPayloadAction {
|
|
7243
|
+
constructor(payload) {
|
|
7244
|
+
this.payload = payload;
|
|
7245
|
+
}
|
|
7246
|
+
}
|
|
7247
|
+
|
|
7248
|
+
class SetGridSkip extends KitAbstractPayloadAction {
|
|
7249
|
+
static { this.type = '[Grid] SetSkip'; }
|
|
7250
|
+
}
|
|
7251
|
+
class SetGridTake extends KitAbstractPayloadAction {
|
|
7252
|
+
static { this.type = '[Grid] SetTake'; }
|
|
7253
|
+
}
|
|
7254
|
+
class SetGridSearch extends KitAbstractPayloadAction {
|
|
7255
|
+
static { this.type = '[Grid] SetSearch'; }
|
|
7256
|
+
}
|
|
7257
|
+
class RemoveGridSearch {
|
|
7258
|
+
static { this.type = '[Grid] RemoveSearch'; }
|
|
7259
|
+
}
|
|
7260
|
+
class SetGridSort extends KitAbstractPayloadAction {
|
|
7261
|
+
static { this.type = '[Grid] SetSort'; }
|
|
7262
|
+
}
|
|
7263
|
+
class SetGridColumns extends KitAbstractPayloadAction {
|
|
7264
|
+
static { this.type = '[Grid] SetColumns'; }
|
|
7265
|
+
}
|
|
7266
|
+
class AddGridFilter extends KitAbstractPayloadAction {
|
|
7267
|
+
static { this.type = '[Grid] AddFilter'; }
|
|
7268
|
+
}
|
|
7269
|
+
class RemoveGridFilter extends KitAbstractPayloadAction {
|
|
7270
|
+
static { this.type = '[Grid] RemoveFilter'; }
|
|
7271
|
+
}
|
|
7272
|
+
class UpdateGridFilter extends KitAbstractPayloadAction {
|
|
7273
|
+
static { this.type = '[Grid] UpdateFilter'; }
|
|
7274
|
+
}
|
|
7275
|
+
class SetGridFilters extends KitAbstractPayloadAction {
|
|
7276
|
+
static { this.type = '[Grid] SetFilters'; }
|
|
7277
|
+
}
|
|
7278
|
+
class SetGridArchive extends KitAbstractPayloadAction {
|
|
7279
|
+
static { this.type = '[Grid] SetArchive'; }
|
|
7280
|
+
}
|
|
7281
|
+
|
|
7282
|
+
const KIT_GRID_STATE_TOKEN = new StateToken('grid');
|
|
7283
|
+
let KitGridState = class KitGridState {
|
|
7284
|
+
setGridSkip(ctx, action) {
|
|
7285
|
+
ctx.setState(patch({
|
|
7286
|
+
skip: action.payload,
|
|
7287
|
+
}));
|
|
7288
|
+
}
|
|
7289
|
+
setGridTake(ctx, action) {
|
|
7290
|
+
ctx.setState(patch({
|
|
7291
|
+
take: action.payload,
|
|
7292
|
+
}));
|
|
7293
|
+
}
|
|
7294
|
+
setGridSearch(ctx, action) {
|
|
7295
|
+
ctx.setState(patch({
|
|
7296
|
+
search: action.payload,
|
|
7297
|
+
}));
|
|
7298
|
+
}
|
|
7299
|
+
removeGridSearch(ctx) {
|
|
7300
|
+
const { search, ...rest } = ctx.getState();
|
|
7301
|
+
ctx.setState(rest);
|
|
7302
|
+
}
|
|
7303
|
+
setGridSort(ctx, action) {
|
|
7304
|
+
ctx.setState(patch({
|
|
7305
|
+
sort: action.payload,
|
|
7306
|
+
}));
|
|
7307
|
+
}
|
|
7308
|
+
setGridColumns(ctx, action) {
|
|
7309
|
+
ctx.setState(patch({
|
|
7310
|
+
columns: action.payload,
|
|
7311
|
+
}));
|
|
7312
|
+
}
|
|
7313
|
+
addGridFilter(ctx, action) {
|
|
7314
|
+
const items = ctx.getState().filter;
|
|
7315
|
+
return of(items).pipe(tap(() => ctx.setState(patch({
|
|
7316
|
+
filter: append([action.payload]),
|
|
7317
|
+
}))));
|
|
7318
|
+
}
|
|
7319
|
+
removeGridFilter(ctx, action) {
|
|
7320
|
+
const items = ctx.getState().filter;
|
|
7321
|
+
return of(items).pipe(tap(() => ctx.setState(patch({
|
|
7322
|
+
filter: removeItem(item => item.field === action.payload),
|
|
7323
|
+
}))));
|
|
7324
|
+
}
|
|
7325
|
+
updateGridFilter(ctx, action) {
|
|
7326
|
+
const items = ctx.getState().filter;
|
|
7327
|
+
return of(items).pipe(tap(() => ctx.setState(patch({
|
|
7328
|
+
filter: updateItem(item => item.field === action.payload.field, action.payload),
|
|
7329
|
+
}))));
|
|
7330
|
+
}
|
|
7331
|
+
setGridFilters(ctx, action) {
|
|
7332
|
+
return of(action.payload).pipe(tap(filters => ctx.setState(patch({
|
|
7333
|
+
filter: filters,
|
|
7334
|
+
}))));
|
|
7335
|
+
}
|
|
7336
|
+
setGridArchive(ctx, action) {
|
|
7337
|
+
ctx.setState(patch({
|
|
7338
|
+
archive: action.payload,
|
|
7339
|
+
}));
|
|
7340
|
+
}
|
|
7341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7342
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState }); }
|
|
7343
|
+
};
|
|
7344
|
+
__decorate([
|
|
7345
|
+
Action(SetGridSkip)
|
|
7346
|
+
], KitGridState.prototype, "setGridSkip", null);
|
|
7347
|
+
__decorate([
|
|
7348
|
+
Action(SetGridTake)
|
|
7349
|
+
], KitGridState.prototype, "setGridTake", null);
|
|
7350
|
+
__decorate([
|
|
7351
|
+
Action(SetGridSearch)
|
|
7352
|
+
], KitGridState.prototype, "setGridSearch", null);
|
|
7353
|
+
__decorate([
|
|
7354
|
+
Action(RemoveGridSearch)
|
|
7355
|
+
], KitGridState.prototype, "removeGridSearch", null);
|
|
7356
|
+
__decorate([
|
|
7357
|
+
Action(SetGridSort)
|
|
7358
|
+
], KitGridState.prototype, "setGridSort", null);
|
|
7359
|
+
__decorate([
|
|
7360
|
+
Action(SetGridColumns)
|
|
7361
|
+
], KitGridState.prototype, "setGridColumns", null);
|
|
7362
|
+
__decorate([
|
|
7363
|
+
Action(AddGridFilter)
|
|
7364
|
+
], KitGridState.prototype, "addGridFilter", null);
|
|
7365
|
+
__decorate([
|
|
7366
|
+
Action(RemoveGridFilter)
|
|
7367
|
+
], KitGridState.prototype, "removeGridFilter", null);
|
|
7368
|
+
__decorate([
|
|
7369
|
+
Action(UpdateGridFilter)
|
|
7370
|
+
], KitGridState.prototype, "updateGridFilter", null);
|
|
7371
|
+
__decorate([
|
|
7372
|
+
Action(SetGridFilters)
|
|
7373
|
+
], KitGridState.prototype, "setGridFilters", null);
|
|
7374
|
+
__decorate([
|
|
7375
|
+
Action(SetGridArchive)
|
|
7376
|
+
], KitGridState.prototype, "setGridArchive", null);
|
|
7377
|
+
KitGridState = __decorate([
|
|
7378
|
+
State({
|
|
7379
|
+
name: KIT_GRID_STATE_TOKEN,
|
|
7380
|
+
defaults: {
|
|
7381
|
+
skip: 0,
|
|
7382
|
+
take: 10,
|
|
7383
|
+
sort: [],
|
|
7384
|
+
filter: [],
|
|
7385
|
+
columns: [],
|
|
7386
|
+
},
|
|
7387
|
+
})
|
|
7388
|
+
], KitGridState);
|
|
7389
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState, decorators: [{
|
|
7390
|
+
type: Injectable
|
|
7391
|
+
}], propDecorators: { setGridSkip: [], setGridTake: [], setGridSearch: [], removeGridSearch: [], setGridSort: [], setGridColumns: [], addGridFilter: [], removeGridFilter: [], updateGridFilter: [], setGridFilters: [], setGridArchive: [] } });
|
|
7392
|
+
|
|
7393
|
+
var KitFilterType;
|
|
7394
|
+
(function (KitFilterType) {
|
|
7395
|
+
KitFilterType["CHECKBOX"] = "checkbox";
|
|
7396
|
+
KitFilterType["RADIO"] = "radio";
|
|
7397
|
+
KitFilterType["DATE"] = "date";
|
|
7398
|
+
KitFilterType["TEXT"] = "text";
|
|
7399
|
+
KitFilterType["NUMERIC"] = "numeric";
|
|
7400
|
+
KitFilterType["NULL"] = "null";
|
|
7401
|
+
KitFilterType["GUID"] = "guid";
|
|
7402
|
+
KitFilterType["CUSTOM_INPUT"] = "customInput";
|
|
7403
|
+
})(KitFilterType || (KitFilterType = {}));
|
|
7404
|
+
var KitFilterDateRange;
|
|
7405
|
+
(function (KitFilterDateRange) {
|
|
7406
|
+
KitFilterDateRange["TODAY"] = "today";
|
|
7407
|
+
KitFilterDateRange["LAST_24_HOURS"] = "last24Hours";
|
|
7408
|
+
KitFilterDateRange["LAST_THREE_DAYS"] = "lastThreeDays";
|
|
7409
|
+
KitFilterDateRange["LAST_WEEK"] = "lastWeek";
|
|
7410
|
+
KitFilterDateRange["LAST_MONTH"] = "lastMonth";
|
|
7411
|
+
KitFilterDateRange["CUSTOM_RANGE"] = "customRange";
|
|
7412
|
+
})(KitFilterDateRange || (KitFilterDateRange = {}));
|
|
7413
|
+
|
|
7414
|
+
const textFilterOperators = [
|
|
7415
|
+
KitFilterOperator.CONTAINS,
|
|
7416
|
+
KitFilterOperator.EQ,
|
|
7417
|
+
KitFilterOperator.IS_NOT_NULL,
|
|
7418
|
+
KitFilterOperator.IS_NULL,
|
|
7419
|
+
KitFilterOperator.NEQ,
|
|
7420
|
+
KitFilterOperator.STARTS_WITH,
|
|
7421
|
+
KitFilterOperator.ENDS_WITH,
|
|
7422
|
+
KitFilterOperator.DOES_NOT_CONTAIN,
|
|
7423
|
+
];
|
|
7424
|
+
const numericFilterOperators = [
|
|
7425
|
+
KitFilterOperator.EQ,
|
|
7426
|
+
KitFilterOperator.NEQ,
|
|
7427
|
+
KitFilterOperator.GTE,
|
|
7428
|
+
KitFilterOperator.GT,
|
|
7429
|
+
KitFilterOperator.LTE,
|
|
7430
|
+
KitFilterOperator.LT,
|
|
7431
|
+
KitFilterOperator.IS_NULL,
|
|
7432
|
+
KitFilterOperator.IS_NOT_NULL,
|
|
7433
|
+
];
|
|
7434
|
+
const noValueRequiredFilterOperators = [
|
|
7435
|
+
KitFilterOperator.IS_NOT_NULL,
|
|
7436
|
+
KitFilterOperator.IS_NULL,
|
|
7437
|
+
];
|
|
7438
|
+
|
|
7439
|
+
const kitDataStateToODataString = (state, utcDates = false, columns) => {
|
|
7440
|
+
const base = toODataString({ ...state, filter: undefined }, { utcDates });
|
|
7441
|
+
const filter = state.filter && convertFiltersToOData(state.filter, utcDates, columns);
|
|
7442
|
+
return decodeURIComponent(filter ? `${base}$filter=${filter}` : base);
|
|
7443
|
+
};
|
|
7444
|
+
const isKitFilterDescriptor = (filter) => {
|
|
7445
|
+
return 'field' in filter && 'value' in filter;
|
|
7446
|
+
};
|
|
7447
|
+
const kitFilterBy = (data, filter) => filterBy(data, filter);
|
|
7448
|
+
const convertFiltersToOData = (filters, utcDates, columns) => {
|
|
7449
|
+
const oDataFilters = filters.filters.map(filter => {
|
|
7450
|
+
if ('isCustomField' in filter && filter.isCustomField) {
|
|
7451
|
+
return convertCustomFiltersToOData(filter, columns);
|
|
7452
|
+
}
|
|
7453
|
+
else {
|
|
7454
|
+
return convertStandardFiltersToOData(filter, utcDates);
|
|
7455
|
+
}
|
|
7456
|
+
});
|
|
7457
|
+
return oDataFilters.filter(Boolean).join(` ${filters.logic} `);
|
|
7458
|
+
};
|
|
7459
|
+
const convertStandardFiltersToOData = (filter, utcDates) => {
|
|
7460
|
+
return toODataString({
|
|
7461
|
+
filter: isKitFilterDescriptor(filter)
|
|
7462
|
+
? { logic: KitFilterLogic.AND, filters: [filter] }
|
|
7463
|
+
: filter,
|
|
7464
|
+
}, { utcDates }).replace(/^\$filter=/, '');
|
|
7465
|
+
};
|
|
7466
|
+
const convertCustomFiltersToOData = (filter, columns) => {
|
|
7467
|
+
const internalFilter = filter.filters[0];
|
|
7468
|
+
if (!isKitFilterDescriptor(internalFilter)) {
|
|
7469
|
+
return '';
|
|
7470
|
+
}
|
|
7471
|
+
const column = columns?.find(col => col.field === internalFilter.field);
|
|
7472
|
+
if (column?.customFieldHandler) {
|
|
7473
|
+
return column.customFieldHandler(filter);
|
|
7474
|
+
}
|
|
7475
|
+
return '';
|
|
7476
|
+
};
|
|
7477
|
+
|
|
7478
|
+
const convertFilterStringDate = (filters, columns, userTimeZone) => filters.map(filter => {
|
|
7479
|
+
if (filter.type == KitFilterType.DATE && filter.value) {
|
|
7480
|
+
const column = columns?.find(col => col.field === filter.field);
|
|
7481
|
+
const timeZoneOffset = getTimeZoneOffset(userTimeZone, column);
|
|
7482
|
+
const filters = filter.value.dateRange
|
|
7483
|
+
? getValueFiltersByRange(filter.value.dateRange, timeZoneOffset, filter.field, column?.customRangeHandler)
|
|
7484
|
+
: getValueFilters(filter.value);
|
|
7485
|
+
return {
|
|
7486
|
+
...filter,
|
|
7487
|
+
value: {
|
|
7488
|
+
...filter.value,
|
|
7489
|
+
filters,
|
|
7490
|
+
},
|
|
7491
|
+
};
|
|
7492
|
+
}
|
|
7493
|
+
return filter;
|
|
7494
|
+
});
|
|
7495
|
+
const removeReadonlyPropertyFromFilters = (filters) => filters.map(({ readonly, ...item }) => item);
|
|
7496
|
+
const kitBuildFilterListOptions = (enumObject) => {
|
|
7497
|
+
return Object.values(enumObject).map(item => ({
|
|
7498
|
+
title: item,
|
|
7499
|
+
value: item,
|
|
7500
|
+
checked: false,
|
|
7501
|
+
}));
|
|
7502
|
+
};
|
|
7503
|
+
const kitBuildFilterBooleanOptions = (trueLabelKey, falseLabelKey) => {
|
|
7504
|
+
return [
|
|
7505
|
+
{
|
|
7506
|
+
title: trueLabelKey,
|
|
7507
|
+
value: true,
|
|
7508
|
+
checked: false,
|
|
7509
|
+
},
|
|
7510
|
+
{
|
|
7511
|
+
title: falseLabelKey,
|
|
7512
|
+
value: false,
|
|
7513
|
+
checked: false,
|
|
7514
|
+
},
|
|
7515
|
+
];
|
|
7516
|
+
};
|
|
7517
|
+
const getTimeZoneOffset = (userTimeZone, column) => {
|
|
7518
|
+
let timeZoneOffset = 'UTC';
|
|
7519
|
+
if (column?.type === 'dateZone' || column?.type === 'dateTimeZone') {
|
|
7520
|
+
timeZoneOffset = userTimeZone;
|
|
7521
|
+
}
|
|
7522
|
+
return timeZoneOffset;
|
|
7523
|
+
};
|
|
7524
|
+
const removeFilterPrefix = (value) => value.split('$filter=')[1];
|
|
7525
|
+
const filterEmptyValues = (filters) => ({
|
|
7526
|
+
logic: filters?.logic ?? KitFilterLogic.AND,
|
|
7527
|
+
filters: filters?.filters.filter(item => noValueRequiredFilterOperators.includes(item.operator) || (item.value !== null && item.value !== undefined)) ?? [],
|
|
7528
|
+
});
|
|
7529
|
+
const normalizeGuidFilter = (filter) => {
|
|
7530
|
+
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;
|
|
7531
|
+
return filter.replace(guidFormat, '$1');
|
|
7532
|
+
};
|
|
7533
|
+
const getDatesByRange = (range, timezoneOffset = 'UTC', dateRangeHandler) => {
|
|
7534
|
+
const now = new Date();
|
|
7535
|
+
let endDate = new Date(now.setHours(0, 0, 0, 0));
|
|
7536
|
+
let startDate = new Date();
|
|
7537
|
+
switch (range) {
|
|
7538
|
+
case KitFilterDateRange.LAST_24_HOURS:
|
|
7539
|
+
endDate = new Date(now);
|
|
7540
|
+
startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
|
7541
|
+
return [
|
|
7542
|
+
kitNormalizeDateToUtc(startDate, timezoneOffset),
|
|
7543
|
+
kitNormalizeDateToUtc(endDate, timezoneOffset),
|
|
7544
|
+
];
|
|
7545
|
+
case KitFilterDateRange.LAST_THREE_DAYS:
|
|
7546
|
+
startDate.setDate(now.getDate() - 3);
|
|
7547
|
+
break;
|
|
7548
|
+
case KitFilterDateRange.LAST_WEEK:
|
|
7549
|
+
startDate.setDate(now.getDate() - 7);
|
|
7550
|
+
break;
|
|
7551
|
+
case KitFilterDateRange.LAST_MONTH:
|
|
7552
|
+
startDate.setMonth(now.getMonth() - 1);
|
|
7553
|
+
break;
|
|
7554
|
+
case KitFilterDateRange.CUSTOM_RANGE:
|
|
7555
|
+
if (dateRangeHandler) {
|
|
7556
|
+
return dateRangeHandler();
|
|
7557
|
+
}
|
|
7558
|
+
break;
|
|
7559
|
+
}
|
|
7560
|
+
return [
|
|
7561
|
+
kitNormalizeDateToUtc(startDate, timezoneOffset),
|
|
7562
|
+
kitNormalizeDateToUtc(endDate, timezoneOffset, true),
|
|
7563
|
+
];
|
|
7564
|
+
};
|
|
7565
|
+
const getValueFiltersByRange = (range, timezoneOffset = 'UTC', field, dateRangeHandler) => {
|
|
7566
|
+
const [startDate, endDate,] = getDatesByRange(range, timezoneOffset, dateRangeHandler);
|
|
7567
|
+
return [
|
|
7568
|
+
{
|
|
7569
|
+
operator: KitFilterOperator.GTE,
|
|
7570
|
+
value: startDate,
|
|
7571
|
+
field,
|
|
7572
|
+
},
|
|
7573
|
+
{
|
|
7574
|
+
operator: KitFilterOperator.LTE,
|
|
7575
|
+
value: endDate,
|
|
7576
|
+
field,
|
|
7577
|
+
},
|
|
7578
|
+
];
|
|
7579
|
+
};
|
|
7580
|
+
const getValueFilters = (value) => {
|
|
7581
|
+
return value.filters.map(item => {
|
|
7582
|
+
const value = item.value ? new Date(item.value) : item.value;
|
|
7583
|
+
return {
|
|
7584
|
+
...item,
|
|
7585
|
+
value,
|
|
7586
|
+
};
|
|
7587
|
+
});
|
|
7588
|
+
};
|
|
7589
|
+
const kitBuildOdataFilter = (filter, columns) => removeFilterPrefix(normalizeGuidFilter(kitDataStateToODataString({ filter }, true, columns)));
|
|
7590
|
+
const kitBuildFilters = (filters) => ({
|
|
7591
|
+
logic: KitFilterLogic.AND,
|
|
7592
|
+
filters: filters.map(filter => {
|
|
7593
|
+
const cleanedFilter = filterEmptyValues(filter.value);
|
|
7594
|
+
return {
|
|
7595
|
+
...cleanedFilter,
|
|
7596
|
+
isCustomField: filter.type === KitFilterType.CUSTOM_INPUT,
|
|
7597
|
+
};
|
|
7598
|
+
}),
|
|
7599
|
+
});
|
|
7600
|
+
|
|
7601
|
+
const kitFormatStringForSearch = (inputString) => {
|
|
7602
|
+
return inputString
|
|
7603
|
+
.split(/\s+/)
|
|
7604
|
+
.filter(text => !!text)
|
|
7605
|
+
.map(text => text + '*')
|
|
7606
|
+
.join(' ');
|
|
7607
|
+
};
|
|
7608
|
+
|
|
7609
|
+
const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false, width, filterType, excelFormat, apiField, hiddenInGrid, customFieldHandler, customRangeHandler) => ({
|
|
7610
|
+
field,
|
|
7611
|
+
title,
|
|
7612
|
+
sortable,
|
|
7613
|
+
hidden,
|
|
7614
|
+
width,
|
|
7615
|
+
filterType,
|
|
7616
|
+
type,
|
|
7617
|
+
excelFormat,
|
|
7618
|
+
apiField,
|
|
7619
|
+
hiddenInGrid,
|
|
7620
|
+
customFieldHandler,
|
|
7621
|
+
customRangeHandler,
|
|
7622
|
+
});
|
|
7623
|
+
const kitBuildGridDataResults = (data, loading, total) => ({
|
|
7624
|
+
results: {
|
|
7625
|
+
data,
|
|
7626
|
+
total: total ?? 0,
|
|
7627
|
+
},
|
|
7628
|
+
loading,
|
|
7629
|
+
});
|
|
7630
|
+
const kitBuildSortString = (sort, columns) => {
|
|
7631
|
+
const sortString = sort?.filter(({ dir }) => dir)
|
|
7632
|
+
.map(({ field, dir }) => {
|
|
7633
|
+
const column = columns?.find(col => col.field === field);
|
|
7634
|
+
const targetField = column?.apiField ?? field;
|
|
7635
|
+
return `${targetField.split('.').join('/')} ${dir}`;
|
|
7636
|
+
}).join(', ');
|
|
7637
|
+
return sortString !== '' && sortString || undefined;
|
|
7638
|
+
};
|
|
7639
|
+
const kitFetchGridData = ({ store, destroyRef, isLoading, fetchAction, fetchFromIndexAction, hasArchiveToggle, error, }) => {
|
|
7640
|
+
isLoading.set(true);
|
|
7641
|
+
const { skip, take, sort, filter, search, archive } = store.selectSnapshot(KIT_GRID_STATE_TOKEN);
|
|
7642
|
+
const gridState = {
|
|
7643
|
+
take,
|
|
7644
|
+
skip,
|
|
7645
|
+
sort,
|
|
7646
|
+
filter: kitBuildFilters(filter),
|
|
7647
|
+
};
|
|
7648
|
+
const isArchive = hasArchiveToggle && archive || false;
|
|
7649
|
+
const isSearchMode = hasArchiveToggle && !isArchive || !!search;
|
|
7650
|
+
const searchTerm = search && kitFormatStringForSearch(search) || undefined;
|
|
7651
|
+
const action = isSearchMode && fetchFromIndexAction({ ...gridState, searchTerm }) || fetchAction(gridState);
|
|
7652
|
+
store.dispatch(action).pipe(takeUntilDestroyed(destroyRef), finalize(() => isLoading.set(false))).subscribe({ error });
|
|
7653
|
+
};
|
|
7654
|
+
const kitFetchExportGridData = ({ fetchAction, fetchIndexAction, sort, filter, search, columns, total, hasArchiveToggle = false, archiveModeEnabled = false, }) => {
|
|
7655
|
+
const isArchive = hasArchiveToggle && archiveModeEnabled || false;
|
|
7656
|
+
const isSearchMode = hasArchiveToggle && !isArchive || !!search;
|
|
7657
|
+
if (isSearchMode) {
|
|
7658
|
+
const searchTerm = search && kitFormatStringForSearch(search) || undefined;
|
|
7659
|
+
return fetchIndexAction(0, total, kitBuildSortString(sort, columns), kitBuildOdataFilter(kitBuildFilters(filter)), searchTerm);
|
|
7660
|
+
}
|
|
7661
|
+
return fetchAction(0, total, kitBuildSortString(sort, columns), kitBuildOdataFilter(kitBuildFilters(filter)));
|
|
7662
|
+
};
|
|
7663
|
+
const kitShouldResetGridState = ({ stateColumns, availableColumns, }) => {
|
|
7664
|
+
if (!stateColumns.length) {
|
|
7665
|
+
return true;
|
|
7666
|
+
}
|
|
7667
|
+
const stateTitles = stateColumns.filter(col => !col.hiddenInGrid).map(col => col.title);
|
|
7668
|
+
const availableTitles = new Set(availableColumns.filter(col => !col.hiddenInGrid).map(col => col.title));
|
|
7669
|
+
return !stateTitles.every(field => availableTitles.has(field));
|
|
7670
|
+
};
|
|
7671
|
+
|
|
7672
|
+
var KitUsersSettingsDetailsField;
|
|
7673
|
+
(function (KitUsersSettingsDetailsField) {
|
|
7674
|
+
KitUsersSettingsDetailsField["USER_NAME"] = "userName";
|
|
7675
|
+
KitUsersSettingsDetailsField["FIRST_NAME"] = "firstName";
|
|
7676
|
+
KitUsersSettingsDetailsField["LAST_NAME"] = "lastName";
|
|
7677
|
+
KitUsersSettingsDetailsField["EMAIL"] = "email";
|
|
7678
|
+
KitUsersSettingsDetailsField["PASSWORD"] = "password";
|
|
7679
|
+
KitUsersSettingsDetailsField["MFA"] = "mfaEnabled";
|
|
7680
|
+
KitUsersSettingsDetailsField["FORCE_PASSWORD"] = "forcePassword";
|
|
7681
|
+
})(KitUsersSettingsDetailsField || (KitUsersSettingsDetailsField = {}));
|
|
7682
|
+
|
|
7683
|
+
var KitUsersSettingsServerErrorTitle;
|
|
7684
|
+
(function (KitUsersSettingsServerErrorTitle) {
|
|
7685
|
+
KitUsersSettingsServerErrorTitle["PASSWORD_TOO_WEAK"] = "Your password is too weak.";
|
|
7686
|
+
KitUsersSettingsServerErrorTitle["INVALID_USER_NAME"] = "You have specified invalid UserName.";
|
|
7687
|
+
})(KitUsersSettingsServerErrorTitle || (KitUsersSettingsServerErrorTitle = {}));
|
|
7688
|
+
const kitUsersSettingsErrorTranslationMap = {
|
|
7689
|
+
[KitUsersSettingsServerErrorTitle.PASSWORD_TOO_WEAK]: 'kit.usersSettings.details.passwordTooWeak',
|
|
7690
|
+
[KitUsersSettingsServerErrorTitle.INVALID_USER_NAME]: 'kit.usersSettings.details.userNameInvalid',
|
|
7691
|
+
};
|
|
7692
|
+
|
|
7693
|
+
const kitApiResponseDefaultEntities = () => ({
|
|
7694
|
+
data: [],
|
|
7695
|
+
total: 0,
|
|
7696
|
+
loading: true,
|
|
7697
|
+
});
|
|
7698
|
+
|
|
7699
|
+
class KitFetchUsersSettings extends KitAbstractPayloadAction {
|
|
7700
|
+
static { this.type = '[KitUsersSettings] Fetch Users'; }
|
|
7701
|
+
}
|
|
7702
|
+
class KitFetchUsersSettingsDetails extends KitAbstractPayloadAction {
|
|
7703
|
+
static { this.type = '[KitUsersSettings] Fetch User Details'; }
|
|
7704
|
+
}
|
|
7705
|
+
class KitUpdateUsersSettingsDetails extends KitAbstractPayloadAction {
|
|
7706
|
+
static { this.type = '[KitUsersSettings] Update User Details'; }
|
|
7707
|
+
}
|
|
7708
|
+
class KitCreateUsersSettingsUser extends KitAbstractPayloadAction {
|
|
7709
|
+
static { this.type = '[KitUsersSettings] Create User'; }
|
|
7710
|
+
}
|
|
7711
|
+
class KitDeleteUsersSettingsUser extends KitAbstractPayloadAction {
|
|
7712
|
+
static { this.type = '[KitUsersSettings] Delete User'; }
|
|
7713
|
+
}
|
|
7714
|
+
|
|
7715
|
+
const kitBuildHttpParams = (obj) => {
|
|
7716
|
+
let params = new HttpParams();
|
|
7717
|
+
Object.entries(obj).forEach(([key, value,]) => {
|
|
7718
|
+
if (value === undefined || value === null) {
|
|
7719
|
+
return;
|
|
7720
|
+
}
|
|
7721
|
+
params = params.set(key, String(value));
|
|
7722
|
+
});
|
|
7723
|
+
return params;
|
|
7724
|
+
};
|
|
7725
|
+
|
|
7726
|
+
class KitUsersSettingsService {
|
|
7727
|
+
constructor() {
|
|
7728
|
+
this.httpClient = inject(HttpClient);
|
|
7729
|
+
this.baseUrl = `${trimTrailingSlash(inject(KIT_BASE_PATH))}/`;
|
|
7730
|
+
}
|
|
7731
|
+
fetchUsers(state) {
|
|
7732
|
+
const url = `${this.baseUrl}users`;
|
|
7733
|
+
const { $skip, $top, $orderby, $filter } = this.getRequestParams(state);
|
|
7734
|
+
return this.httpClient.get(url, { params: kitBuildHttpParams({ $skip, $top, $orderby, $filter }) });
|
|
7735
|
+
}
|
|
7736
|
+
fetchUserDetails(id) {
|
|
7737
|
+
const url = `${this.baseUrl}users/${id}`;
|
|
7738
|
+
return this.httpClient.get(url);
|
|
7739
|
+
}
|
|
7740
|
+
updateUserDetails(payload) {
|
|
7741
|
+
const url = `${this.baseUrl}users/${payload.id}`;
|
|
7742
|
+
return this.httpClient.put(url, payload);
|
|
7743
|
+
}
|
|
7744
|
+
createUser(payload) {
|
|
7745
|
+
const url = `${this.baseUrl}users`;
|
|
7746
|
+
return this.httpClient.post(url, payload);
|
|
7747
|
+
}
|
|
7748
|
+
deleteUser(id) {
|
|
7749
|
+
const url = `${this.baseUrl}users/${id}`;
|
|
7750
|
+
return this.httpClient.delete(url);
|
|
7751
|
+
}
|
|
7752
|
+
getRequestParams(state) {
|
|
7753
|
+
const $skip = state.skip && state.skip > 0 ? state.skip : undefined;
|
|
7754
|
+
const $top = state.take;
|
|
7755
|
+
const $orderby = state.sort?.length
|
|
7756
|
+
? state.sort.map(sort => `${sort.field} ${sort.dir ?? KitSortDirection.ASC}`).join(',')
|
|
7757
|
+
: 'name asc';
|
|
7758
|
+
const $filter = state.filter
|
|
7759
|
+
? kitDataStateToODataString({ filter: state.filter }).replace('$filter=', '')
|
|
7760
|
+
: undefined;
|
|
7761
|
+
return {
|
|
7762
|
+
$skip,
|
|
7763
|
+
$top,
|
|
7764
|
+
$orderby,
|
|
7765
|
+
$filter,
|
|
7766
|
+
};
|
|
7767
|
+
}
|
|
7768
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7769
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsService }); }
|
|
7770
|
+
}
|
|
7771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsService, decorators: [{
|
|
7772
|
+
type: Injectable
|
|
7773
|
+
}] });
|
|
7774
|
+
|
|
7775
|
+
const KIT_USERS_SETTINGS_STATE_TOKEN = new StateToken('usersSettings');
|
|
7776
|
+
let KitUsersSettingsState = class KitUsersSettingsState {
|
|
7777
|
+
constructor() {
|
|
7778
|
+
this.kitUsersSettingsService = inject(KitUsersSettingsService);
|
|
7779
|
+
}
|
|
7780
|
+
fetchUsers(ctx, action) {
|
|
7781
|
+
ctx.patchState({
|
|
7782
|
+
users: { ...ctx.getState().users, loading: true },
|
|
7783
|
+
});
|
|
7784
|
+
return this.kitUsersSettingsService.fetchUsers(action.payload).pipe(tap(data => {
|
|
7785
|
+
ctx.patchState({
|
|
7786
|
+
users: {
|
|
7787
|
+
loading: false,
|
|
7788
|
+
data: data.data,
|
|
7789
|
+
total: data.total,
|
|
7790
|
+
},
|
|
7791
|
+
});
|
|
7792
|
+
}), catchError(err => {
|
|
7793
|
+
ctx.patchState({
|
|
7794
|
+
users: {
|
|
7795
|
+
loading: false,
|
|
7796
|
+
data: [],
|
|
7797
|
+
total: 0,
|
|
7798
|
+
},
|
|
7799
|
+
});
|
|
7800
|
+
return throwError(() => err);
|
|
7801
|
+
}));
|
|
7802
|
+
}
|
|
7803
|
+
fetchUserDetails(ctx, action) {
|
|
7804
|
+
ctx.patchState({
|
|
7805
|
+
userDetails: { loading: true, data: null },
|
|
7806
|
+
});
|
|
7807
|
+
return this.kitUsersSettingsService.fetchUserDetails(action.payload).pipe(tap(data => {
|
|
7808
|
+
ctx.patchState({
|
|
7809
|
+
userDetails: {
|
|
7810
|
+
loading: false,
|
|
7811
|
+
data,
|
|
7812
|
+
},
|
|
7813
|
+
});
|
|
7814
|
+
}), catchError(err => {
|
|
7815
|
+
ctx.patchState({
|
|
7816
|
+
userDetails: { loading: false, data: null },
|
|
7817
|
+
});
|
|
7818
|
+
return throwError(() => err);
|
|
7819
|
+
}));
|
|
7820
|
+
}
|
|
7821
|
+
updateUserDetails(ctx, action) {
|
|
7822
|
+
ctx.patchState({
|
|
7823
|
+
userDetails: {
|
|
7824
|
+
...ctx.getState().userDetails,
|
|
7825
|
+
loading: true,
|
|
7826
|
+
},
|
|
7827
|
+
});
|
|
7828
|
+
return this.kitUsersSettingsService.updateUserDetails(action.payload).pipe(tap(data => {
|
|
7829
|
+
const state = ctx.getState();
|
|
7830
|
+
ctx.patchState({
|
|
7831
|
+
users: {
|
|
7832
|
+
...state.users,
|
|
7833
|
+
data: state.users.data.map(user => user.id === data.id ? data : user),
|
|
7834
|
+
},
|
|
7835
|
+
userDetails: {
|
|
7836
|
+
loading: false,
|
|
7837
|
+
data,
|
|
7838
|
+
},
|
|
7839
|
+
});
|
|
7840
|
+
}), catchError(err => {
|
|
7841
|
+
ctx.patchState({
|
|
7842
|
+
userDetails: {
|
|
7843
|
+
...ctx.getState().userDetails,
|
|
7844
|
+
loading: false,
|
|
7845
|
+
},
|
|
7846
|
+
});
|
|
7847
|
+
return throwError(() => err);
|
|
7848
|
+
}));
|
|
7849
|
+
}
|
|
7850
|
+
createUser(ctx, action) {
|
|
7851
|
+
ctx.patchState({
|
|
7852
|
+
users: {
|
|
7853
|
+
...ctx.getState().users,
|
|
7854
|
+
loading: true,
|
|
7855
|
+
},
|
|
7856
|
+
});
|
|
7857
|
+
return this.kitUsersSettingsService.createUser(action.payload).pipe(finalize(() => {
|
|
7858
|
+
ctx.patchState({
|
|
7859
|
+
users: {
|
|
7860
|
+
...ctx.getState().users,
|
|
7861
|
+
loading: false,
|
|
7862
|
+
},
|
|
7863
|
+
});
|
|
7864
|
+
}));
|
|
7865
|
+
}
|
|
7866
|
+
deleteUser(ctx, action) {
|
|
7867
|
+
return this.kitUsersSettingsService.deleteUser(action.payload).pipe(tap(() => {
|
|
7868
|
+
const state = ctx.getState();
|
|
7869
|
+
const usersData = state.users.data ?? [];
|
|
7870
|
+
ctx.patchState({
|
|
7871
|
+
users: {
|
|
7872
|
+
...state.users,
|
|
7873
|
+
data: usersData.filter(user => user.id !== action.payload),
|
|
7874
|
+
total: Math.max((state.users.total ?? usersData.length) - 1, 0),
|
|
7875
|
+
},
|
|
7876
|
+
userDetails: state.userDetails.data?.id === action.payload
|
|
7877
|
+
? { ...state.userDetails, data: null }
|
|
7878
|
+
: state.userDetails,
|
|
7879
|
+
});
|
|
7880
|
+
}));
|
|
7881
|
+
}
|
|
7882
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7883
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsState }); }
|
|
7884
|
+
};
|
|
7885
|
+
__decorate([
|
|
7886
|
+
Action(KitFetchUsersSettings)
|
|
7887
|
+
], KitUsersSettingsState.prototype, "fetchUsers", null);
|
|
7888
|
+
__decorate([
|
|
7889
|
+
Action(KitFetchUsersSettingsDetails)
|
|
7890
|
+
], KitUsersSettingsState.prototype, "fetchUserDetails", null);
|
|
7891
|
+
__decorate([
|
|
7892
|
+
Action(KitUpdateUsersSettingsDetails)
|
|
7893
|
+
], KitUsersSettingsState.prototype, "updateUserDetails", null);
|
|
7894
|
+
__decorate([
|
|
7895
|
+
Action(KitCreateUsersSettingsUser)
|
|
7896
|
+
], KitUsersSettingsState.prototype, "createUser", null);
|
|
7897
|
+
__decorate([
|
|
7898
|
+
Action(KitDeleteUsersSettingsUser)
|
|
7899
|
+
], KitUsersSettingsState.prototype, "deleteUser", null);
|
|
7900
|
+
KitUsersSettingsState = __decorate([
|
|
7901
|
+
State({
|
|
7902
|
+
name: KIT_USERS_SETTINGS_STATE_TOKEN,
|
|
7903
|
+
defaults: {
|
|
7904
|
+
users: kitApiResponseDefaultEntities(),
|
|
7905
|
+
userDetails: kitApiResponseDefaultEntities(),
|
|
7906
|
+
},
|
|
7907
|
+
})
|
|
7908
|
+
], KitUsersSettingsState);
|
|
7909
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsState, decorators: [{
|
|
7910
|
+
type: Injectable
|
|
7911
|
+
}], propDecorators: { fetchUsers: [], fetchUserDetails: [], updateUserDetails: [], createUser: [], deleteUser: [] } });
|
|
7912
|
+
|
|
7913
|
+
const kitUsersSettingsDetailsFormServerErrorFieldMap = {
|
|
7914
|
+
[KitUsersSettingsServerErrorTitle.PASSWORD_TOO_WEAK]: KitUsersSettingsDetailsField.PASSWORD,
|
|
7915
|
+
[KitUsersSettingsServerErrorTitle.INVALID_USER_NAME]: KitUsersSettingsDetailsField.USER_NAME,
|
|
7916
|
+
};
|
|
7917
|
+
|
|
7918
|
+
class KitUsersSettingsDetailsFormComponent {
|
|
7919
|
+
constructor() {
|
|
7920
|
+
this.formBuilder = inject(FormBuilder);
|
|
7921
|
+
this.store = inject(Store);
|
|
7922
|
+
this.kitFormErrors = inject(KitFormErrors);
|
|
7923
|
+
this.destroyRef = inject(DestroyRef);
|
|
7924
|
+
this.isCreatingNewUser = input(false, ...(ngDevMode ? [{ debugName: "isCreatingNewUser" }] : /* istanbul ignore next */ []));
|
|
7925
|
+
this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
|
|
7926
|
+
this.userDetails = computed(() => this.usersSettingsState().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
|
|
7927
|
+
this.kitUsersSettingsDetailsField = KitUsersSettingsDetailsField;
|
|
7928
|
+
this.form = this.formBuilder.group({
|
|
7929
|
+
[KitUsersSettingsDetailsField.USER_NAME]: this.formBuilder.nonNullable.control('', Validators.required),
|
|
7930
|
+
[KitUsersSettingsDetailsField.FIRST_NAME]: this.formBuilder.nonNullable.control('', Validators.required),
|
|
7931
|
+
[KitUsersSettingsDetailsField.LAST_NAME]: this.formBuilder.nonNullable.control('', Validators.required),
|
|
7932
|
+
[KitUsersSettingsDetailsField.EMAIL]: this.formBuilder.nonNullable.control('', [
|
|
7933
|
+
Validators.required,
|
|
7934
|
+
Validators.email,
|
|
7935
|
+
]),
|
|
7936
|
+
[KitUsersSettingsDetailsField.PASSWORD]: this.formBuilder.nonNullable.control(''),
|
|
7937
|
+
[KitUsersSettingsDetailsField.MFA]: this.formBuilder.nonNullable.control(false),
|
|
7938
|
+
[KitUsersSettingsDetailsField.FORCE_PASSWORD]: this.formBuilder.nonNullable.control(false),
|
|
7939
|
+
});
|
|
7940
|
+
effect(() => {
|
|
7941
|
+
if (!this.isCreatingNewUser()) {
|
|
7942
|
+
const { data: userDetails, loading } = this.userDetails();
|
|
7943
|
+
loading ? this.form.disable({ emitEvent: false }) : this.form.enable({ emitEvent: false });
|
|
7944
|
+
if (userDetails) {
|
|
7945
|
+
this.patchForm(userDetails);
|
|
7946
|
+
}
|
|
7947
|
+
}
|
|
7948
|
+
});
|
|
7949
|
+
}
|
|
7950
|
+
ngOnInit() {
|
|
7951
|
+
if (this.isCreatingNewUser()) {
|
|
7952
|
+
this.enablePasswordControl();
|
|
7953
|
+
}
|
|
7954
|
+
}
|
|
7955
|
+
getTextboxState(textboxName) {
|
|
7956
|
+
const control = this.form.get(textboxName);
|
|
7957
|
+
return control?.touched && control?.invalid && control?.dirty
|
|
7958
|
+
? KitTextboxState.ERROR
|
|
7959
|
+
: KitTextboxState.DEFAULT;
|
|
7960
|
+
}
|
|
7961
|
+
getTextboxMessageText(textboxName) {
|
|
7962
|
+
const control = this.form.get(textboxName);
|
|
7963
|
+
if (!control || !(control.touched || control.dirty)) {
|
|
7964
|
+
return undefined;
|
|
7965
|
+
}
|
|
7966
|
+
if (control.errors?.['serverError']) {
|
|
7967
|
+
return control.errors['serverError'];
|
|
7968
|
+
}
|
|
7969
|
+
return this.kitFormErrors.getErrors(control)[0];
|
|
7970
|
+
}
|
|
7971
|
+
submit() {
|
|
7972
|
+
return this.isCreatingNewUser()
|
|
7973
|
+
? this.createUser()
|
|
7974
|
+
: this.updateUser();
|
|
7975
|
+
}
|
|
7976
|
+
createUser() {
|
|
7977
|
+
return this.store.dispatch(new KitCreateUsersSettingsUser(this.form.getRawValue())).pipe(takeUntilDestroyed(this.destroyRef), catchError(error => this.handleSubmitError(error)));
|
|
7978
|
+
}
|
|
7979
|
+
updateUser() {
|
|
7980
|
+
const id = this.userDetails().data?.id;
|
|
7981
|
+
if (!id) {
|
|
7982
|
+
return EMPTY;
|
|
7983
|
+
}
|
|
7984
|
+
const { password, forcePassword, ...userDetails } = this.form.getRawValue();
|
|
7985
|
+
return this.store.dispatch(new KitUpdateUsersSettingsDetails({
|
|
7986
|
+
...userDetails,
|
|
7987
|
+
id,
|
|
7988
|
+
})).pipe(takeUntilDestroyed(this.destroyRef), catchError(error => this.handleSubmitError(error)));
|
|
7989
|
+
}
|
|
7990
|
+
enablePasswordControl() {
|
|
7991
|
+
const passwordControl = this.form.get(KitUsersSettingsDetailsField.PASSWORD);
|
|
7992
|
+
passwordControl?.addValidators(Validators.required);
|
|
7993
|
+
passwordControl?.enable({ emitEvent: false });
|
|
7994
|
+
passwordControl?.updateValueAndValidity({ emitEvent: false });
|
|
7995
|
+
}
|
|
7996
|
+
patchForm(userDetails) {
|
|
7997
|
+
this.form.reset({
|
|
7998
|
+
[KitUsersSettingsDetailsField.USER_NAME]: userDetails.userName,
|
|
7999
|
+
[KitUsersSettingsDetailsField.FIRST_NAME]: userDetails.firstName,
|
|
8000
|
+
[KitUsersSettingsDetailsField.LAST_NAME]: userDetails.lastName,
|
|
8001
|
+
[KitUsersSettingsDetailsField.EMAIL]: userDetails.email,
|
|
8002
|
+
[KitUsersSettingsDetailsField.PASSWORD]: '',
|
|
8003
|
+
[KitUsersSettingsDetailsField.MFA]: userDetails.mfaEnabled,
|
|
8004
|
+
[KitUsersSettingsDetailsField.FORCE_PASSWORD]: false,
|
|
8005
|
+
}, { emitEvent: false });
|
|
8006
|
+
}
|
|
8007
|
+
handleSubmitError(error) {
|
|
8008
|
+
this.applyServerError(error?.error?.title ?? '');
|
|
8009
|
+
return EMPTY;
|
|
8010
|
+
}
|
|
8011
|
+
applyServerError(title) {
|
|
8012
|
+
const field = kitUsersSettingsDetailsFormServerErrorFieldMap[title];
|
|
8013
|
+
const translationKey = kitUsersSettingsErrorTranslationMap[title];
|
|
8014
|
+
const control = this.form.get(field);
|
|
8015
|
+
if (!field || !translationKey || !control) {
|
|
8016
|
+
return;
|
|
8017
|
+
}
|
|
8018
|
+
control.setErrors({ serverError: translationKey });
|
|
8019
|
+
control.markAsTouched();
|
|
8020
|
+
control.markAsDirty();
|
|
8021
|
+
}
|
|
8022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8023
|
+
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 }); }
|
|
8024
|
+
}
|
|
8025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsFormComponent, decorators: [{
|
|
8026
|
+
type: Component,
|
|
8027
|
+
args: [{ selector: 'kit-users-settings-details-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
8028
|
+
TranslatePipe,
|
|
8029
|
+
KitTextboxComponent,
|
|
8030
|
+
ReactiveFormsModule,
|
|
8031
|
+
KitToggleComponent,
|
|
8032
|
+
], 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"] }]
|
|
8033
|
+
}], ctorParameters: () => [], propDecorators: { isCreatingNewUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCreatingNewUser", required: false }] }] } });
|
|
8034
|
+
|
|
8035
|
+
class KitUsersSettingsCreateDialogComponent {
|
|
8036
|
+
constructor() {
|
|
8037
|
+
this.destroyRef = inject(DestroyRef);
|
|
8038
|
+
this.detailsForm = viewChild.required(KitUsersSettingsDetailsFormComponent);
|
|
8039
|
+
this.opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
|
|
8040
|
+
this.kitDialogType = KitDialogType;
|
|
8041
|
+
this.kitButtonKind = KitButtonKind;
|
|
8042
|
+
this.kitButtonType = KitButtonType;
|
|
8043
|
+
}
|
|
8044
|
+
get isFormDisabled() {
|
|
8045
|
+
return this.detailsForm().form.pristine || this.detailsForm().form.invalid;
|
|
8046
|
+
}
|
|
8047
|
+
onConfirm() {
|
|
8048
|
+
this.detailsForm().submit().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
8049
|
+
this.opened.set(false);
|
|
8050
|
+
});
|
|
8051
|
+
}
|
|
8052
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsCreateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8053
|
+
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 }); }
|
|
8054
|
+
}
|
|
8055
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsCreateDialogComponent, decorators: [{
|
|
8056
|
+
type: Component,
|
|
8057
|
+
args: [{ selector: 'kit-users-settings-create-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
8058
|
+
KitDialogComponent,
|
|
8059
|
+
KitDialogTitlebarComponent,
|
|
8060
|
+
KitDialogActionsComponent,
|
|
8061
|
+
KitButtonComponent,
|
|
8062
|
+
TranslatePipe,
|
|
8063
|
+
KitUsersSettingsDetailsFormComponent,
|
|
8064
|
+
], 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"] }]
|
|
8065
|
+
}], 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"] }] } });
|
|
8066
|
+
|
|
8067
|
+
var KitUsersSettingsPasswordDialogField;
|
|
8068
|
+
(function (KitUsersSettingsPasswordDialogField) {
|
|
8069
|
+
KitUsersSettingsPasswordDialogField["PASSWORD"] = "password";
|
|
8070
|
+
KitUsersSettingsPasswordDialogField["REPEAT_PASSWORD"] = "repeatPassword";
|
|
8071
|
+
KitUsersSettingsPasswordDialogField["FORCE_PASSWORD"] = "forcePassword";
|
|
8072
|
+
})(KitUsersSettingsPasswordDialogField || (KitUsersSettingsPasswordDialogField = {}));
|
|
8073
|
+
|
|
8074
|
+
class KitUsersSettingsPasswordDialogComponent {
|
|
8075
|
+
constructor() {
|
|
8076
|
+
this.kitFormErrors = inject(KitFormErrors);
|
|
8077
|
+
this.formBuilder = inject(FormBuilder);
|
|
8078
|
+
this.store = inject(Store);
|
|
8079
|
+
this.destroyRef = inject(DestroyRef);
|
|
8080
|
+
this.opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
|
|
8081
|
+
this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
|
|
8082
|
+
this.userDetails = computed(() => this.usersSettingsState().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
|
|
8083
|
+
this.kitDialogType = KitDialogType;
|
|
8084
|
+
this.kitButtonKind = KitButtonKind;
|
|
8085
|
+
this.kitButtonType = KitButtonType;
|
|
8086
|
+
this.kitUsersSettingsPasswordDialogField = KitUsersSettingsPasswordDialogField;
|
|
8087
|
+
this.form = this.formBuilder.group({
|
|
8088
|
+
[KitUsersSettingsPasswordDialogField.PASSWORD]: this.formBuilder.nonNullable.control('', Validators.required),
|
|
8089
|
+
[KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD]: this.formBuilder.nonNullable.control('', Validators.required),
|
|
8090
|
+
[KitUsersSettingsPasswordDialogField.FORCE_PASSWORD]: this.formBuilder.nonNullable.control(false),
|
|
8091
|
+
}, { validators: this.passwordsMatchValidator });
|
|
8092
|
+
}
|
|
8093
|
+
get isFormDisabled() {
|
|
8094
|
+
return this.form.pristine || this.form.invalid;
|
|
8095
|
+
}
|
|
8096
|
+
getTextboxState(field) {
|
|
8097
|
+
const control = this.form.get(field);
|
|
8098
|
+
const isTouchedAndDirty = !!control?.touched && !!control.dirty;
|
|
8099
|
+
const hasFieldError = isTouchedAndDirty && !!control?.invalid;
|
|
8100
|
+
const hasMatchError = field === KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD
|
|
8101
|
+
&& !!this.form.errors?.['passwordsMismatch']
|
|
8102
|
+
&& isTouchedAndDirty;
|
|
8103
|
+
return hasFieldError || hasMatchError ? KitTextboxState.ERROR : KitTextboxState.DEFAULT;
|
|
8104
|
+
}
|
|
8105
|
+
getTextboxMessageText(field) {
|
|
8106
|
+
const control = this.form.get(field);
|
|
8107
|
+
if (!control || !(control.touched || control.dirty)) {
|
|
8108
|
+
return undefined;
|
|
8109
|
+
}
|
|
8110
|
+
if (field === 'repeatPassword' && this.form.errors?.['passwordsMismatch'] && control.dirty) {
|
|
8111
|
+
return 'kit.usersSettings.passwordDialog.passwordsDoNotMatch';
|
|
8112
|
+
}
|
|
8113
|
+
if (control.errors?.['serverError']) {
|
|
8114
|
+
return control.errors['serverError'];
|
|
8115
|
+
}
|
|
8116
|
+
return this.kitFormErrors.getErrors(control)[0];
|
|
8117
|
+
}
|
|
8118
|
+
onConfirm() {
|
|
8119
|
+
const userDetails = this.userDetails().data;
|
|
8120
|
+
if (!userDetails) {
|
|
8121
|
+
return;
|
|
8122
|
+
}
|
|
8123
|
+
this.store.dispatch(new KitUpdateUsersSettingsDetails({
|
|
8124
|
+
...userDetails,
|
|
8125
|
+
password: this.form.get(KitUsersSettingsPasswordDialogField.PASSWORD)?.value ?? undefined,
|
|
8126
|
+
forcePasswordResetOnNextLogin: this.form.get(KitUsersSettingsPasswordDialogField.FORCE_PASSWORD)?.value ?? false,
|
|
8127
|
+
})).pipe(catchError(error => this.handleSubmitError(error)), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
8128
|
+
this.opened.set(false);
|
|
8129
|
+
});
|
|
8130
|
+
}
|
|
8131
|
+
passwordsMatchValidator(group) {
|
|
8132
|
+
const password = group.get(KitUsersSettingsPasswordDialogField.PASSWORD)?.value ?? '';
|
|
8133
|
+
const repeatPassword = group.get(KitUsersSettingsPasswordDialogField.REPEAT_PASSWORD)?.value ?? '';
|
|
8134
|
+
return password === repeatPassword ? null : { passwordsMismatch: true };
|
|
8135
|
+
}
|
|
8136
|
+
handleSubmitError(error) {
|
|
8137
|
+
this.applyServerError(error?.error?.title ?? '');
|
|
8138
|
+
return EMPTY;
|
|
8139
|
+
}
|
|
8140
|
+
applyServerError(title) {
|
|
8141
|
+
const translationKey = kitUsersSettingsErrorTranslationMap[title];
|
|
8142
|
+
const control = this.form.get(KitUsersSettingsPasswordDialogField.PASSWORD);
|
|
8143
|
+
if (!translationKey || !control) {
|
|
8144
|
+
return;
|
|
8145
|
+
}
|
|
8146
|
+
control.setErrors({ serverError: translationKey });
|
|
8147
|
+
control.markAsTouched();
|
|
8148
|
+
control.markAsDirty();
|
|
8149
|
+
}
|
|
8150
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsPasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8151
|
+
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 }); }
|
|
8152
|
+
}
|
|
8153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsPasswordDialogComponent, decorators: [{
|
|
8154
|
+
type: Component,
|
|
8155
|
+
args: [{ selector: 'kit-users-settings-password-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
8156
|
+
KitDialogComponent,
|
|
8157
|
+
KitDialogTitlebarComponent,
|
|
8158
|
+
KitDialogActionsComponent,
|
|
8159
|
+
KitButtonComponent,
|
|
8160
|
+
TranslatePipe,
|
|
8161
|
+
KitTextboxComponent,
|
|
8162
|
+
ReactiveFormsModule,
|
|
8163
|
+
KitToggleComponent,
|
|
8164
|
+
], 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"] }]
|
|
8165
|
+
}], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }] } });
|
|
8166
|
+
|
|
8167
|
+
class KitUsersSettingsDetailsComponent {
|
|
8168
|
+
constructor() {
|
|
8169
|
+
this.store = inject(Store);
|
|
8170
|
+
this.detailsForm = viewChild.required(KitUsersSettingsDetailsFormComponent);
|
|
8171
|
+
this.usersSettingsState = this.store.selectSignal(KIT_USERS_SETTINGS_STATE_TOKEN);
|
|
8172
|
+
this.userDetails = computed(() => this.usersSettingsState().userDetails, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
|
|
8173
|
+
this.isPasswordDialogOpened = signal(false, ...(ngDevMode ? [{ debugName: "isPasswordDialogOpened" }] : /* istanbul ignore next */ []));
|
|
8174
|
+
this.kitButtonKind = KitButtonKind;
|
|
8175
|
+
this.kitButtonType = KitButtonType;
|
|
8176
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
8177
|
+
this.kitButtonIconPosition = KitButtonIconPosition;
|
|
8178
|
+
}
|
|
8179
|
+
get isFormDisabled() {
|
|
8180
|
+
return this.detailsForm().form.pristine || this.detailsForm().form.invalid;
|
|
8181
|
+
}
|
|
8182
|
+
onSave() {
|
|
8183
|
+
this.detailsForm().submit();
|
|
8184
|
+
}
|
|
8185
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8186
|
+
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 }); }
|
|
8187
|
+
}
|
|
8188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsDetailsComponent, decorators: [{
|
|
8189
|
+
type: Component,
|
|
8190
|
+
args: [{ selector: 'kit-users-settings-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
8191
|
+
KitEntitySectionContainerComponent,
|
|
8192
|
+
KitButtonComponent,
|
|
8193
|
+
TranslatePipe,
|
|
8194
|
+
KitUsersSettingsPasswordDialogComponent,
|
|
8195
|
+
KitUsersSettingsDetailsFormComponent,
|
|
8196
|
+
], 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"] }]
|
|
8197
|
+
}], propDecorators: { detailsForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitUsersSettingsDetailsFormComponent), { isSignal: true }] }] } });
|
|
8198
|
+
|
|
8199
|
+
class KitUsersSettingsComponent {
|
|
8200
|
+
constructor() {
|
|
8201
|
+
this.destroyRef = inject(DestroyRef);
|
|
8202
|
+
this.store = inject(Store);
|
|
8203
|
+
this.kitDialogService = inject(KitDialogService);
|
|
8204
|
+
this.translateService = inject(TranslateService);
|
|
8205
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
8206
|
+
this.cardDetailsComponent = viewChild.required(KitCardDetailsComponent);
|
|
8207
|
+
this.deleteDialogActionsTemplate = viewChild.required('deleteDialogActions', { read: TemplateRef });
|
|
8208
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
8209
|
+
this.currentUserId = this.store.selectSignal((state) => state.user?.data?.id?.toString() ?? null);
|
|
8210
|
+
this.isCreatingNewUser = signal(false, ...(ngDevMode ? [{ debugName: "isCreatingNewUser" }] : /* istanbul ignore next */ []));
|
|
8211
|
+
this.pendingDeleteUser = signal(null, ...(ngDevMode ? [{ debugName: "pendingDeleteUser" }] : /* istanbul ignore next */ []));
|
|
8212
|
+
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)));
|
|
8213
|
+
this.pageSize = 10;
|
|
8214
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
8215
|
+
this.kitButtonIconPosition = KitButtonIconPosition;
|
|
8216
|
+
this.kitButtonKind = KitButtonKind;
|
|
8217
|
+
this.kitButtonType = KitButtonType;
|
|
8218
|
+
this.kitSvgIconType = KitSvgIconType;
|
|
8219
|
+
}
|
|
8220
|
+
onDataStateChanged({ skip, take, search, filters }) {
|
|
8221
|
+
this.store.dispatch(new KitFetchUsersSettings({
|
|
8222
|
+
skip,
|
|
8223
|
+
take,
|
|
8224
|
+
filter: this.buildFilter(search, filters),
|
|
8225
|
+
}));
|
|
8226
|
+
}
|
|
8227
|
+
onCardSelected(card) {
|
|
8228
|
+
this.store.dispatch(new KitFetchUsersSettingsDetails(card.id));
|
|
8229
|
+
}
|
|
8230
|
+
isDeleteDisabled(userId) {
|
|
8231
|
+
return this.currentUserId() === userId.toString();
|
|
8232
|
+
}
|
|
8233
|
+
getUserDisplayName(user) {
|
|
8234
|
+
const fullName = [
|
|
8235
|
+
user.firstName,
|
|
8236
|
+
user.lastName,
|
|
8237
|
+
].filter(Boolean).join(' ').trim();
|
|
8238
|
+
return fullName || user.userName;
|
|
8239
|
+
}
|
|
8240
|
+
onDeleteUser(user) {
|
|
8241
|
+
this.pendingDeleteUser.set(user);
|
|
8242
|
+
this.kitDialogService.openDialog({
|
|
8243
|
+
title: this.translateService.instant('kit.usersSettings.deleteDialog.title'),
|
|
8244
|
+
content: this.translateService.instant('kit.usersSettings.deleteDialog.content', {
|
|
8245
|
+
name: this.getUserDisplayName(user),
|
|
8246
|
+
}),
|
|
8247
|
+
actions: this.deleteDialogActionsTemplate(),
|
|
8248
|
+
appendTo: this.viewContainerRef,
|
|
8249
|
+
});
|
|
8250
|
+
}
|
|
8251
|
+
closeDeleteDialog() {
|
|
8252
|
+
this.kitDialogService.closeDialog();
|
|
8253
|
+
this.pendingDeleteUser.set(null);
|
|
8254
|
+
}
|
|
8255
|
+
confirmDeleteUser() {
|
|
8256
|
+
const user = this.pendingDeleteUser();
|
|
8257
|
+
if (!user) {
|
|
8258
|
+
return;
|
|
8259
|
+
}
|
|
8260
|
+
this.store.dispatch(new KitDeleteUsersSettingsUser(user.id)).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
8261
|
+
this.cardDetailsComponent().deleteCard(user.id);
|
|
8262
|
+
this.closeDeleteDialog();
|
|
8263
|
+
});
|
|
8264
|
+
}
|
|
8265
|
+
buildFilter(search, filters) {
|
|
8266
|
+
if (!search) {
|
|
8267
|
+
return filters;
|
|
8268
|
+
}
|
|
8269
|
+
return {
|
|
8270
|
+
logic: KitFilterLogic.AND,
|
|
8271
|
+
filters: [
|
|
8272
|
+
{ field: 'name', operator: 'contains', value: search },
|
|
8273
|
+
...(filters?.filters ?? []),
|
|
8274
|
+
],
|
|
8275
|
+
};
|
|
8276
|
+
}
|
|
8277
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8278
|
+
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 }); }
|
|
8279
|
+
}
|
|
8280
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUsersSettingsComponent, decorators: [{
|
|
8281
|
+
type: Component,
|
|
8282
|
+
args: [{ selector: 'kit-users-settings', imports: [
|
|
8283
|
+
KitCardDetailsComponent,
|
|
8284
|
+
KitTruncateTextComponent,
|
|
8285
|
+
KitUsersSettingsDetailsComponent,
|
|
8286
|
+
KitButtonComponent,
|
|
8287
|
+
TranslatePipe,
|
|
8288
|
+
KitUsersSettingsCreateDialogComponent,
|
|
8289
|
+
], 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"] }]
|
|
8290
|
+
}], 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 }] }] } });
|
|
8291
|
+
|
|
8292
|
+
var KitThemes;
|
|
8293
|
+
(function (KitThemes) {
|
|
8294
|
+
KitThemes["Light"] = "light";
|
|
8295
|
+
KitThemes["Dark"] = "dark";
|
|
8296
|
+
})(KitThemes || (KitThemes = {}));
|
|
8297
|
+
|
|
8298
|
+
class SetSelectedMobileMenuItem extends KitAbstractPayloadAction {
|
|
8299
|
+
static { this.type = '[KitMobileMenu] SetSelectedMobileMenuItem'; }
|
|
8300
|
+
}
|
|
8301
|
+
|
|
8302
|
+
const KIT_MOBILE_MENU_STATE_TOKEN = new StateToken('kitMobileMenu');
|
|
8303
|
+
let KitMobileMenuState = class KitMobileMenuState {
|
|
8304
|
+
static selectedItem(state) {
|
|
8305
|
+
return state?.selectedItem || null;
|
|
8306
|
+
}
|
|
8307
|
+
setSelectedMobileMenuItem(ctx, action) {
|
|
8308
|
+
ctx.patchState({ selectedItem: action.payload });
|
|
8309
|
+
}
|
|
8310
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8311
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState }); }
|
|
8312
|
+
};
|
|
8313
|
+
__decorate([
|
|
8314
|
+
Action(SetSelectedMobileMenuItem)
|
|
8315
|
+
], KitMobileMenuState.prototype, "setSelectedMobileMenuItem", null);
|
|
8316
|
+
__decorate([
|
|
8317
|
+
Selector([KIT_MOBILE_MENU_STATE_TOKEN])
|
|
8318
|
+
], KitMobileMenuState, "selectedItem", null);
|
|
8319
|
+
KitMobileMenuState = __decorate([
|
|
8320
|
+
State({
|
|
8321
|
+
name: KIT_MOBILE_MENU_STATE_TOKEN,
|
|
8322
|
+
defaults: {
|
|
8323
|
+
selectedItem: null,
|
|
8324
|
+
},
|
|
8325
|
+
})
|
|
8326
|
+
], KitMobileMenuState);
|
|
8327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuState, decorators: [{
|
|
8328
|
+
type: Injectable
|
|
8329
|
+
}], propDecorators: { setSelectedMobileMenuItem: [] } });
|
|
8330
|
+
|
|
8331
|
+
class KitMobileHeaderComponent {
|
|
8332
|
+
constructor() {
|
|
8333
|
+
this.store = inject(Store);
|
|
8334
|
+
this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
8335
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
8336
|
+
this.kitButtonType = KitButtonType;
|
|
8337
|
+
this.kitSvgIconType = KitSvgIconType;
|
|
8338
|
+
this.themes = KitThemes;
|
|
8339
|
+
this.selectedItem = this.store.selectSignal(KitMobileMenuState.selectedItem);
|
|
8340
|
+
}
|
|
8341
|
+
setSelectedItem(item) {
|
|
8342
|
+
this.store.dispatch(new SetSelectedMobileMenuItem(item));
|
|
8343
|
+
}
|
|
8344
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8345
|
+
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 }); }
|
|
8346
|
+
}
|
|
8347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileHeaderComponent, decorators: [{
|
|
8348
|
+
type: Component,
|
|
8349
|
+
args: [{ selector: 'kit-mobile-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
8350
|
+
KitSvgIconComponent,
|
|
8351
|
+
NgClass,
|
|
8352
|
+
RouterLink,
|
|
8353
|
+
], 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"] }]
|
|
8354
|
+
}], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
|
|
8355
|
+
|
|
8356
|
+
class KitPageLayoutComponent {
|
|
8357
|
+
constructor() {
|
|
8358
|
+
this.kitNavigationMenuService = inject(KitNavigationMenuService);
|
|
8359
|
+
this.deviceService = inject(DeviceDetectorService);
|
|
8360
|
+
this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
8361
|
+
this.sidebarContainer = viewChild('sidebarContainer', ...(ngDevMode ? [{ debugName: "sidebarContainer" }] : /* istanbul ignore next */ []));
|
|
8362
|
+
this.topBarContainer = viewChild('topBarContainer', ...(ngDevMode ? [{ debugName: "topBarContainer" }] : /* istanbul ignore next */ []));
|
|
8363
|
+
this.isMenuCollapsed = this.kitNavigationMenuService.getCollapsedState();
|
|
8364
|
+
this.hasMenuSelected = this.kitNavigationMenuService.getSelectedState();
|
|
8365
|
+
this.hasSidebar = signal(false, ...(ngDevMode ? [{ debugName: "hasSidebar" }] : /* istanbul ignore next */ []));
|
|
8366
|
+
this.hasTopBar = signal(false, ...(ngDevMode ? [{ debugName: "hasTopBar" }] : /* istanbul ignore next */ []));
|
|
8367
|
+
effect(() => {
|
|
8368
|
+
const sidebar = this.sidebarContainer()?.nativeElement;
|
|
8369
|
+
const topBar = this.topBarContainer()?.nativeElement;
|
|
8370
|
+
this.hasSidebar.set(!!sidebar?.querySelector('[sidebar]'));
|
|
8371
|
+
this.hasTopBar.set(!!topBar?.querySelector('[topBar]'));
|
|
8372
|
+
});
|
|
8373
|
+
}
|
|
8374
|
+
get isMobile() {
|
|
8375
|
+
return this.deviceService.isMobile();
|
|
8376
|
+
}
|
|
8377
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8378
|
+
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 }); }
|
|
8379
|
+
}
|
|
8380
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPageLayoutComponent, decorators: [{
|
|
8381
|
+
type: Component,
|
|
8382
|
+
args: [{ selector: 'kit-page-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
8383
|
+
KitMobileHeaderComponent,
|
|
7113
8384
|
NgClass,
|
|
7114
8385
|
], 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"] }]
|
|
7115
8386
|
}], 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 }] }] } });
|
|
@@ -7182,6 +8453,46 @@ const kitTranslations = {
|
|
|
7182
8453
|
searchButtonLabel: 'Search',
|
|
7183
8454
|
closeButtonLabel: 'Close',
|
|
7184
8455
|
},
|
|
8456
|
+
usersSettings: {
|
|
8457
|
+
details: {
|
|
8458
|
+
title: 'User Details',
|
|
8459
|
+
loginId: 'Login ID',
|
|
8460
|
+
firstName: 'First Name',
|
|
8461
|
+
lastName: 'Last Name',
|
|
8462
|
+
email: 'Email',
|
|
8463
|
+
forcePassword: 'Force Password Reset',
|
|
8464
|
+
mfa: 'Multi-Factor Authentication',
|
|
8465
|
+
save: 'Save',
|
|
8466
|
+
createNewUser: 'Create New User',
|
|
8467
|
+
changePassword: 'Change Password',
|
|
8468
|
+
password: 'Password',
|
|
8469
|
+
passwordRequired: 'Password is required',
|
|
8470
|
+
passwordTooWeak: 'Your password is too weak.',
|
|
8471
|
+
userNameInvalid: 'You have specified invalid Login ID.',
|
|
8472
|
+
},
|
|
8473
|
+
passwordDialog: {
|
|
8474
|
+
title: 'Change Password',
|
|
8475
|
+
confirm: 'Confirm',
|
|
8476
|
+
cancel: 'Cancel',
|
|
8477
|
+
newPassword: 'New Password',
|
|
8478
|
+
repeatNewPassword: 'Repeat New Password',
|
|
8479
|
+
newPasswordRequired: 'New password is required',
|
|
8480
|
+
repeatNewPasswordRequired: 'Please repeat the new password',
|
|
8481
|
+
passwordsDoNotMatch: 'Passwords do not match',
|
|
8482
|
+
forcePassword: 'Force Password Reset',
|
|
8483
|
+
},
|
|
8484
|
+
createDialog: {
|
|
8485
|
+
title: 'Create New User',
|
|
8486
|
+
confirm: 'Create',
|
|
8487
|
+
cancel: 'Cancel',
|
|
8488
|
+
},
|
|
8489
|
+
deleteDialog: {
|
|
8490
|
+
title: 'Delete User',
|
|
8491
|
+
content: 'Are you sure you want to permanently delete "{{name}}"?',
|
|
8492
|
+
confirm: 'Delete',
|
|
8493
|
+
cancel: 'Cancel',
|
|
8494
|
+
},
|
|
8495
|
+
},
|
|
7185
8496
|
globalSearch: {
|
|
7186
8497
|
placeholder: 'Global Search',
|
|
7187
8498
|
showResults: 'Show Results',
|
|
@@ -7339,508 +8650,163 @@ const kitTranslations = {
|
|
|
7339
8650
|
search: {
|
|
7340
8651
|
placeholder: 'Поиск',
|
|
7341
8652
|
searchButtonLabel: 'Поиск',
|
|
7342
|
-
closeButtonLabel: 'Закрыть',
|
|
7343
|
-
},
|
|
7344
|
-
globalSearch: {
|
|
7345
|
-
placeholder: 'Глобальный поиск',
|
|
7346
|
-
showResults: 'Показать результаты',
|
|
7347
|
-
noData: 'Данные не найдены',
|
|
7348
|
-
showMore: 'Показать больше',
|
|
7349
|
-
showLess: 'Показать меньше',
|
|
7350
|
-
},
|
|
7351
|
-
columns: {
|
|
7352
|
-
columnManager: 'Менеджер колонок',
|
|
7353
|
-
title: 'Колонки',
|
|
7354
|
-
cancel: 'Отмена',
|
|
7355
|
-
apply: 'Применить',
|
|
7356
|
-
reset: 'Сбросить',
|
|
7357
|
-
},
|
|
7358
|
-
multiselect: {
|
|
7359
|
-
all: 'Все',
|
|
7360
|
-
},
|
|
7361
|
-
grid: {
|
|
7362
|
-
pagerItemsText: 'элементов',
|
|
7363
|
-
view: 'Вид',
|
|
7364
|
-
noRecords: 'Нет доступных записей.',
|
|
7365
|
-
actions: {
|
|
7366
|
-
archive: 'Перейти к архиву',
|
|
7367
|
-
refresh: 'Обновить',
|
|
7368
|
-
},
|
|
7369
|
-
},
|
|
7370
|
-
routePath: {
|
|
7371
|
-
tbc: 'Уточняется',
|
|
7372
|
-
by: 'от',
|
|
7373
|
-
},
|
|
7374
|
-
userSettings: {
|
|
7375
|
-
title: 'Настройки пользователя',
|
|
7376
|
-
},
|
|
7377
|
-
common: {
|
|
7378
|
-
noData: 'Нет доступных данных',
|
|
7379
|
-
loading: 'Загрузка...',
|
|
7380
|
-
error: 'Произошла ошибка при загрузке данных',
|
|
7381
|
-
loadMore: 'Загрузить еще',
|
|
7382
|
-
},
|
|
7383
|
-
notFound: {
|
|
7384
|
-
title: '404',
|
|
7385
|
-
subtitle: 'Не найдено',
|
|
7386
|
-
description: 'Страница, которую вы ищете, не найдена.<br><br>' +
|
|
7387
|
-
'Веб-страница, к которой вы пытаетесь получить доступ, могла быть перемещена, удалена или не существует.',
|
|
7388
|
-
},
|
|
7389
|
-
forbidden: {
|
|
7390
|
-
title: '403',
|
|
7391
|
-
subtitle: 'Доступ запрещен',
|
|
7392
|
-
description: 'У вас нет прав для просмотра этой страницы с текущими учетными данными.<br><br>' +
|
|
7393
|
-
'Веб-страница, которую вы пытаетесь просмотреть, имеет ограниченный доступ.<br>' +
|
|
7394
|
-
'Попробуйте войти под другим пользователем или обратитесь в службу поддержки/к администратору за помощью.',
|
|
7395
|
-
logout: 'Выйти',
|
|
7396
|
-
},
|
|
7397
|
-
formControlError: {
|
|
7398
|
-
required: 'Обязательно для заполнения',
|
|
7399
|
-
invalidLength: 'Значение должно быть меньше, чем {{ requiredLength }} символов',
|
|
7400
|
-
invalidEmailFormat: 'Невалидный имэйл',
|
|
7401
|
-
},
|
|
7402
|
-
liveUpdates: {
|
|
7403
|
-
pause: 'Остановить обновление',
|
|
7404
|
-
resume: 'Включить обновление',
|
|
7405
|
-
},
|
|
7406
|
-
scheduler: {
|
|
7407
|
-
week: 'Неделя',
|
|
7408
|
-
month: 'Месяц',
|
|
7409
|
-
},
|
|
7410
|
-
apiTokenMaintenance: {
|
|
7411
|
-
title: 'API Токены',
|
|
7412
|
-
details: 'Информация о Api Токене',
|
|
7413
|
-
export: 'Экспорт',
|
|
7414
|
-
createNew: 'Создать',
|
|
7415
|
-
delete: 'Удалить',
|
|
7416
|
-
cancel: 'Отмена',
|
|
7417
|
-
save: 'Сохранить',
|
|
7418
|
-
createdDate: 'Дата создания',
|
|
7419
|
-
enabled: 'Активен',
|
|
7420
|
-
name: 'Название',
|
|
7421
|
-
token: 'Токен',
|
|
7422
|
-
on: 'Вкл',
|
|
7423
|
-
off: 'Выкл',
|
|
7424
|
-
pleaseCopyToken: 'Пожалуйста, скопируйте токен ниже. Вы не сможете его увидеть позже.',
|
|
7425
|
-
copy: 'Намите, чтобы скопировать в буфер обмена.',
|
|
7426
|
-
copiedToClipboard: 'Скопировано в буфер обмена',
|
|
7427
|
-
failedToCopy: 'Не удалось скопировать',
|
|
7428
|
-
deleteConfirmation: 'Вы уверены, что хотите удалить',
|
|
8653
|
+
closeButtonLabel: 'Закрыть',
|
|
7429
8654
|
},
|
|
7430
|
-
|
|
7431
|
-
|
|
7432
|
-
|
|
7433
|
-
|
|
8655
|
+
usersSettings: {
|
|
8656
|
+
details: {
|
|
8657
|
+
title: 'Детали пользователя',
|
|
8658
|
+
loginId: 'Логин',
|
|
8659
|
+
firstName: 'Имя',
|
|
8660
|
+
lastName: 'Фамилия',
|
|
8661
|
+
email: 'Email',
|
|
8662
|
+
forcePassword: 'Принудительно изменить пароль',
|
|
8663
|
+
mfa: 'Многофакторная аутентификация',
|
|
8664
|
+
save: 'Сохранить',
|
|
8665
|
+
createNewUser: 'Создать нового пользователя',
|
|
8666
|
+
changePassword: 'Изменить пароль',
|
|
8667
|
+
password: 'Пароль',
|
|
8668
|
+
passwordRequired: 'Пароль обязателен',
|
|
8669
|
+
passwordTooWeak: 'Пароль слишком слабый.',
|
|
8670
|
+
userNameInvalid: 'Указан некорректный Логин.',
|
|
8671
|
+
},
|
|
8672
|
+
passwordDialog: {
|
|
8673
|
+
title: 'Изменить пароль',
|
|
8674
|
+
confirm: 'Подтвердить',
|
|
8675
|
+
cancel: 'Отмена',
|
|
8676
|
+
newPassword: 'Новый пароль',
|
|
8677
|
+
repeatNewPassword: 'Повторите новый пароль',
|
|
8678
|
+
newPasswordRequired: 'Новый пароль обязателен',
|
|
8679
|
+
repeatNewPasswordRequired: 'Пожалуйста, повторите новый пароль',
|
|
8680
|
+
passwordsDoNotMatch: 'Пароли не совпадают',
|
|
8681
|
+
forcePassword: 'Принудительно изменить пароль',
|
|
8682
|
+
},
|
|
8683
|
+
createDialog: {
|
|
8684
|
+
title: 'Создать нового пользователя',
|
|
8685
|
+
confirm: 'Создать',
|
|
8686
|
+
cancel: 'Отмена',
|
|
8687
|
+
},
|
|
8688
|
+
deleteDialog: {
|
|
8689
|
+
title: 'Удалить пользователя',
|
|
8690
|
+
content: 'Вы уверены, что хотите удалить пользователя "{{name}}" без возможности восстановления?',
|
|
8691
|
+
confirm: 'Удалить',
|
|
8692
|
+
cancel: 'Отмена',
|
|
8693
|
+
},
|
|
8694
|
+
},
|
|
8695
|
+
globalSearch: {
|
|
8696
|
+
placeholder: 'Глобальный поиск',
|
|
8697
|
+
showResults: 'Показать результаты',
|
|
8698
|
+
noData: 'Данные не найдены',
|
|
8699
|
+
showMore: 'Показать больше',
|
|
8700
|
+
showLess: 'Показать меньше',
|
|
8701
|
+
},
|
|
8702
|
+
columns: {
|
|
8703
|
+
columnManager: 'Менеджер колонок',
|
|
8704
|
+
title: 'Колонки',
|
|
7434
8705
|
cancel: 'Отмена',
|
|
7435
|
-
|
|
8706
|
+
apply: 'Применить',
|
|
8707
|
+
reset: 'Сбросить',
|
|
7436
8708
|
},
|
|
7437
|
-
|
|
7438
|
-
|
|
7439
|
-
}
|
|
7440
|
-
|
|
7441
|
-
|
|
7442
|
-
|
|
7443
|
-
|
|
7444
|
-
|
|
7445
|
-
|
|
7446
|
-
|
|
7447
|
-
|
|
7448
|
-
|
|
7449
|
-
|
|
7450
|
-
|
|
7451
|
-
|
|
7452
|
-
}
|
|
7453
|
-
|
|
7454
|
-
|
|
7455
|
-
|
|
7456
|
-
|
|
7457
|
-
|
|
7458
|
-
|
|
7459
|
-
|
|
7460
|
-
|
|
7461
|
-
|
|
7462
|
-
|
|
7463
|
-
|
|
7464
|
-
|
|
7465
|
-
|
|
7466
|
-
|
|
7467
|
-
|
|
7468
|
-
|
|
7469
|
-
|
|
7470
|
-
|
|
7471
|
-
|
|
7472
|
-
|
|
7473
|
-
|
|
7474
|
-
|
|
7475
|
-
|
|
7476
|
-
|
|
7477
|
-
|
|
7478
|
-
|
|
7479
|
-
|
|
7480
|
-
}
|
|
7481
|
-
|
|
7482
|
-
|
|
7483
|
-
|
|
7484
|
-
|
|
7485
|
-
|
|
7486
|
-
|
|
7487
|
-
|
|
7488
|
-
|
|
7489
|
-
|
|
7490
|
-
|
|
7491
|
-
|
|
7492
|
-
|
|
7493
|
-
|
|
7494
|
-
|
|
7495
|
-
|
|
7496
|
-
|
|
7497
|
-
|
|
7498
|
-
|
|
7499
|
-
|
|
7500
|
-
|
|
7501
|
-
|
|
7502
|
-
|
|
7503
|
-
|
|
7504
|
-
|
|
7505
|
-
|
|
7506
|
-
|
|
7507
|
-
|
|
7508
|
-
|
|
7509
|
-
|
|
7510
|
-
|
|
7511
|
-
|
|
7512
|
-
|
|
7513
|
-
|
|
7514
|
-
|
|
7515
|
-
setGridSort(ctx, action) {
|
|
7516
|
-
ctx.setState(patch({
|
|
7517
|
-
sort: action.payload,
|
|
7518
|
-
}));
|
|
7519
|
-
}
|
|
7520
|
-
setGridColumns(ctx, action) {
|
|
7521
|
-
ctx.setState(patch({
|
|
7522
|
-
columns: action.payload,
|
|
7523
|
-
}));
|
|
7524
|
-
}
|
|
7525
|
-
addGridFilter(ctx, action) {
|
|
7526
|
-
const items = ctx.getState().filter;
|
|
7527
|
-
return of(items).pipe(tap(() => ctx.setState(patch({
|
|
7528
|
-
filter: append([action.payload]),
|
|
7529
|
-
}))));
|
|
7530
|
-
}
|
|
7531
|
-
removeGridFilter(ctx, action) {
|
|
7532
|
-
const items = ctx.getState().filter;
|
|
7533
|
-
return of(items).pipe(tap(() => ctx.setState(patch({
|
|
7534
|
-
filter: removeItem(item => item.field === action.payload),
|
|
7535
|
-
}))));
|
|
7536
|
-
}
|
|
7537
|
-
updateGridFilter(ctx, action) {
|
|
7538
|
-
const items = ctx.getState().filter;
|
|
7539
|
-
return of(items).pipe(tap(() => ctx.setState(patch({
|
|
7540
|
-
filter: updateItem(item => item.field === action.payload.field, action.payload),
|
|
7541
|
-
}))));
|
|
7542
|
-
}
|
|
7543
|
-
setGridFilters(ctx, action) {
|
|
7544
|
-
return of(action.payload).pipe(tap(filters => ctx.setState(patch({
|
|
7545
|
-
filter: filters,
|
|
7546
|
-
}))));
|
|
7547
|
-
}
|
|
7548
|
-
setGridArchive(ctx, action) {
|
|
7549
|
-
ctx.setState(patch({
|
|
7550
|
-
archive: action.payload,
|
|
7551
|
-
}));
|
|
7552
|
-
}
|
|
7553
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7554
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState }); }
|
|
7555
|
-
};
|
|
7556
|
-
__decorate([
|
|
7557
|
-
Action(SetGridSkip)
|
|
7558
|
-
], KitGridState.prototype, "setGridSkip", null);
|
|
7559
|
-
__decorate([
|
|
7560
|
-
Action(SetGridTake)
|
|
7561
|
-
], KitGridState.prototype, "setGridTake", null);
|
|
7562
|
-
__decorate([
|
|
7563
|
-
Action(SetGridSearch)
|
|
7564
|
-
], KitGridState.prototype, "setGridSearch", null);
|
|
7565
|
-
__decorate([
|
|
7566
|
-
Action(RemoveGridSearch)
|
|
7567
|
-
], KitGridState.prototype, "removeGridSearch", null);
|
|
7568
|
-
__decorate([
|
|
7569
|
-
Action(SetGridSort)
|
|
7570
|
-
], KitGridState.prototype, "setGridSort", null);
|
|
7571
|
-
__decorate([
|
|
7572
|
-
Action(SetGridColumns)
|
|
7573
|
-
], KitGridState.prototype, "setGridColumns", null);
|
|
7574
|
-
__decorate([
|
|
7575
|
-
Action(AddGridFilter)
|
|
7576
|
-
], KitGridState.prototype, "addGridFilter", null);
|
|
7577
|
-
__decorate([
|
|
7578
|
-
Action(RemoveGridFilter)
|
|
7579
|
-
], KitGridState.prototype, "removeGridFilter", null);
|
|
7580
|
-
__decorate([
|
|
7581
|
-
Action(UpdateGridFilter)
|
|
7582
|
-
], KitGridState.prototype, "updateGridFilter", null);
|
|
7583
|
-
__decorate([
|
|
7584
|
-
Action(SetGridFilters)
|
|
7585
|
-
], KitGridState.prototype, "setGridFilters", null);
|
|
7586
|
-
__decorate([
|
|
7587
|
-
Action(SetGridArchive)
|
|
7588
|
-
], KitGridState.prototype, "setGridArchive", null);
|
|
7589
|
-
KitGridState = __decorate([
|
|
7590
|
-
State({
|
|
7591
|
-
name: KIT_GRID_STATE_TOKEN,
|
|
7592
|
-
defaults: {
|
|
7593
|
-
skip: 0,
|
|
7594
|
-
take: 10,
|
|
7595
|
-
sort: [],
|
|
7596
|
-
filter: [],
|
|
7597
|
-
columns: [],
|
|
7598
|
-
},
|
|
7599
|
-
})
|
|
7600
|
-
], KitGridState);
|
|
7601
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridState, decorators: [{
|
|
7602
|
-
type: Injectable
|
|
7603
|
-
}], propDecorators: { setGridSkip: [], setGridTake: [], setGridSearch: [], removeGridSearch: [], setGridSort: [], setGridColumns: [], addGridFilter: [], removeGridFilter: [], updateGridFilter: [], setGridFilters: [], setGridArchive: [] } });
|
|
7604
|
-
|
|
7605
|
-
var KitFilterType;
|
|
7606
|
-
(function (KitFilterType) {
|
|
7607
|
-
KitFilterType["CHECKBOX"] = "checkbox";
|
|
7608
|
-
KitFilterType["RADIO"] = "radio";
|
|
7609
|
-
KitFilterType["DATE"] = "date";
|
|
7610
|
-
KitFilterType["TEXT"] = "text";
|
|
7611
|
-
KitFilterType["NUMERIC"] = "numeric";
|
|
7612
|
-
KitFilterType["NULL"] = "null";
|
|
7613
|
-
KitFilterType["GUID"] = "guid";
|
|
7614
|
-
KitFilterType["CUSTOM_INPUT"] = "customInput";
|
|
7615
|
-
})(KitFilterType || (KitFilterType = {}));
|
|
7616
|
-
var KitFilterDateRange;
|
|
7617
|
-
(function (KitFilterDateRange) {
|
|
7618
|
-
KitFilterDateRange["TODAY"] = "today";
|
|
7619
|
-
KitFilterDateRange["LAST_24_HOURS"] = "last24Hours";
|
|
7620
|
-
KitFilterDateRange["LAST_THREE_DAYS"] = "lastThreeDays";
|
|
7621
|
-
KitFilterDateRange["LAST_WEEK"] = "lastWeek";
|
|
7622
|
-
KitFilterDateRange["LAST_MONTH"] = "lastMonth";
|
|
7623
|
-
KitFilterDateRange["CUSTOM_RANGE"] = "customRange";
|
|
7624
|
-
})(KitFilterDateRange || (KitFilterDateRange = {}));
|
|
7625
|
-
|
|
7626
|
-
const textFilterOperators = [
|
|
7627
|
-
KitFilterOperator.CONTAINS,
|
|
7628
|
-
KitFilterOperator.EQ,
|
|
7629
|
-
KitFilterOperator.IS_NOT_NULL,
|
|
7630
|
-
KitFilterOperator.IS_NULL,
|
|
7631
|
-
KitFilterOperator.NEQ,
|
|
7632
|
-
KitFilterOperator.STARTS_WITH,
|
|
7633
|
-
KitFilterOperator.ENDS_WITH,
|
|
7634
|
-
KitFilterOperator.DOES_NOT_CONTAIN,
|
|
7635
|
-
];
|
|
7636
|
-
const numericFilterOperators = [
|
|
7637
|
-
KitFilterOperator.EQ,
|
|
7638
|
-
KitFilterOperator.NEQ,
|
|
7639
|
-
KitFilterOperator.GTE,
|
|
7640
|
-
KitFilterOperator.GT,
|
|
7641
|
-
KitFilterOperator.LTE,
|
|
7642
|
-
KitFilterOperator.LT,
|
|
7643
|
-
KitFilterOperator.IS_NULL,
|
|
7644
|
-
KitFilterOperator.IS_NOT_NULL,
|
|
7645
|
-
];
|
|
7646
|
-
const noValueRequiredFilterOperators = [
|
|
7647
|
-
KitFilterOperator.IS_NOT_NULL,
|
|
7648
|
-
KitFilterOperator.IS_NULL,
|
|
7649
|
-
];
|
|
7650
|
-
|
|
7651
|
-
const convertFilterStringDate = (filters, columns, userTimeZone) => filters.map(filter => {
|
|
7652
|
-
if (filter.type == KitFilterType.DATE && filter.value) {
|
|
7653
|
-
const column = columns?.find(col => col.field === filter.field);
|
|
7654
|
-
const timeZoneOffset = getTimeZoneOffset(userTimeZone, column);
|
|
7655
|
-
const filters = filter.value.dateRange
|
|
7656
|
-
? getValueFiltersByRange(filter.value.dateRange, timeZoneOffset, filter.field, column?.customRangeHandler)
|
|
7657
|
-
: getValueFilters(filter.value);
|
|
7658
|
-
return {
|
|
7659
|
-
...filter,
|
|
7660
|
-
value: {
|
|
7661
|
-
...filter.value,
|
|
7662
|
-
filters,
|
|
8709
|
+
multiselect: {
|
|
8710
|
+
all: 'Все',
|
|
8711
|
+
},
|
|
8712
|
+
grid: {
|
|
8713
|
+
pagerItemsText: 'элементов',
|
|
8714
|
+
view: 'Вид',
|
|
8715
|
+
noRecords: 'Нет доступных записей.',
|
|
8716
|
+
actions: {
|
|
8717
|
+
archive: 'Перейти к архиву',
|
|
8718
|
+
refresh: 'Обновить',
|
|
8719
|
+
},
|
|
8720
|
+
},
|
|
8721
|
+
routePath: {
|
|
8722
|
+
tbc: 'Уточняется',
|
|
8723
|
+
by: 'от',
|
|
8724
|
+
},
|
|
8725
|
+
userSettings: {
|
|
8726
|
+
title: 'Настройки пользователя',
|
|
8727
|
+
},
|
|
8728
|
+
common: {
|
|
8729
|
+
noData: 'Нет доступных данных',
|
|
8730
|
+
loading: 'Загрузка...',
|
|
8731
|
+
error: 'Произошла ошибка при загрузке данных',
|
|
8732
|
+
loadMore: 'Загрузить еще',
|
|
8733
|
+
},
|
|
8734
|
+
notFound: {
|
|
8735
|
+
title: '404',
|
|
8736
|
+
subtitle: 'Не найдено',
|
|
8737
|
+
description: 'Страница, которую вы ищете, не найдена.<br><br>' +
|
|
8738
|
+
'Веб-страница, к которой вы пытаетесь получить доступ, могла быть перемещена, удалена или не существует.',
|
|
8739
|
+
},
|
|
8740
|
+
forbidden: {
|
|
8741
|
+
title: '403',
|
|
8742
|
+
subtitle: 'Доступ запрещен',
|
|
8743
|
+
description: 'У вас нет прав для просмотра этой страницы с текущими учетными данными.<br><br>' +
|
|
8744
|
+
'Веб-страница, которую вы пытаетесь просмотреть, имеет ограниченный доступ.<br>' +
|
|
8745
|
+
'Попробуйте войти под другим пользователем или обратитесь в службу поддержки/к администратору за помощью.',
|
|
8746
|
+
logout: 'Выйти',
|
|
8747
|
+
},
|
|
8748
|
+
formControlError: {
|
|
8749
|
+
required: 'Обязательно для заполнения',
|
|
8750
|
+
invalidLength: 'Значение должно быть меньше, чем {{ requiredLength }} символов',
|
|
8751
|
+
invalidEmailFormat: 'Невалидный имэйл',
|
|
8752
|
+
},
|
|
8753
|
+
liveUpdates: {
|
|
8754
|
+
pause: 'Остановить обновление',
|
|
8755
|
+
resume: 'Включить обновление',
|
|
8756
|
+
},
|
|
8757
|
+
scheduler: {
|
|
8758
|
+
week: 'Неделя',
|
|
8759
|
+
month: 'Месяц',
|
|
8760
|
+
},
|
|
8761
|
+
apiTokenMaintenance: {
|
|
8762
|
+
title: 'API Токены',
|
|
8763
|
+
details: 'Информация о Api Токене',
|
|
8764
|
+
export: 'Экспорт',
|
|
8765
|
+
createNew: 'Создать',
|
|
8766
|
+
delete: 'Удалить',
|
|
8767
|
+
cancel: 'Отмена',
|
|
8768
|
+
save: 'Сохранить',
|
|
8769
|
+
createdDate: 'Дата создания',
|
|
8770
|
+
enabled: 'Активен',
|
|
8771
|
+
name: 'Название',
|
|
8772
|
+
token: 'Токен',
|
|
8773
|
+
on: 'Вкл',
|
|
8774
|
+
off: 'Выкл',
|
|
8775
|
+
pleaseCopyToken: 'Пожалуйста, скопируйте токен ниже. Вы не сможете его увидеть позже.',
|
|
8776
|
+
copy: 'Намите, чтобы скопировать в буфер обмена.',
|
|
8777
|
+
copiedToClipboard: 'Скопировано в буфер обмена',
|
|
8778
|
+
failedToCopy: 'Не удалось скопировать',
|
|
8779
|
+
deleteConfirmation: 'Вы уверены, что хотите удалить',
|
|
8780
|
+
},
|
|
8781
|
+
entitySectionEditable: {
|
|
8782
|
+
add: 'Добавить',
|
|
8783
|
+
edit: 'Редактировать',
|
|
8784
|
+
save: 'Сохранить',
|
|
8785
|
+
cancel: 'Отмена',
|
|
8786
|
+
delete: 'Удалить',
|
|
7663
8787
|
},
|
|
7664
|
-
};
|
|
7665
|
-
}
|
|
7666
|
-
return filter;
|
|
7667
|
-
});
|
|
7668
|
-
const removeReadonlyPropertyFromFilters = (filters) => filters.map(({ readonly, ...item }) => item);
|
|
7669
|
-
const kitBuildFilterListOptions = (enumObject) => {
|
|
7670
|
-
return Object.values(enumObject).map(item => ({
|
|
7671
|
-
title: item,
|
|
7672
|
-
value: item,
|
|
7673
|
-
checked: false,
|
|
7674
|
-
}));
|
|
7675
|
-
};
|
|
7676
|
-
const kitBuildFilterBooleanOptions = (trueLabelKey, falseLabelKey) => {
|
|
7677
|
-
return [
|
|
7678
|
-
{
|
|
7679
|
-
title: trueLabelKey,
|
|
7680
|
-
value: true,
|
|
7681
|
-
checked: false,
|
|
7682
|
-
},
|
|
7683
|
-
{
|
|
7684
|
-
title: falseLabelKey,
|
|
7685
|
-
value: false,
|
|
7686
|
-
checked: false,
|
|
7687
|
-
},
|
|
7688
|
-
];
|
|
7689
|
-
};
|
|
7690
|
-
const getTimeZoneOffset = (userTimeZone, column) => {
|
|
7691
|
-
let timeZoneOffset = 'UTC';
|
|
7692
|
-
if (column?.type === 'dateZone' || column?.type === 'dateTimeZone') {
|
|
7693
|
-
timeZoneOffset = userTimeZone;
|
|
7694
|
-
}
|
|
7695
|
-
return timeZoneOffset;
|
|
7696
|
-
};
|
|
7697
|
-
const removeFilterPrefix = (value) => value.split('$filter=')[1];
|
|
7698
|
-
const filterEmptyValues = (filters) => ({
|
|
7699
|
-
logic: filters?.logic ?? KitFilterLogic.AND,
|
|
7700
|
-
filters: filters?.filters.filter(item => noValueRequiredFilterOperators.includes(item.operator) || (item.value !== null && item.value !== undefined)) ?? [],
|
|
7701
|
-
});
|
|
7702
|
-
const normalizeGuidFilter = (filter) => {
|
|
7703
|
-
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;
|
|
7704
|
-
return filter.replace(guidFormat, '$1');
|
|
7705
|
-
};
|
|
7706
|
-
const getDatesByRange = (range, timezoneOffset = 'UTC', dateRangeHandler) => {
|
|
7707
|
-
const now = new Date();
|
|
7708
|
-
let endDate = new Date(now.setHours(0, 0, 0, 0));
|
|
7709
|
-
let startDate = new Date();
|
|
7710
|
-
switch (range) {
|
|
7711
|
-
case KitFilterDateRange.LAST_24_HOURS:
|
|
7712
|
-
endDate = new Date(now);
|
|
7713
|
-
startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
|
7714
|
-
return [
|
|
7715
|
-
kitNormalizeDateToUtc(startDate, timezoneOffset),
|
|
7716
|
-
kitNormalizeDateToUtc(endDate, timezoneOffset),
|
|
7717
|
-
];
|
|
7718
|
-
case KitFilterDateRange.LAST_THREE_DAYS:
|
|
7719
|
-
startDate.setDate(now.getDate() - 3);
|
|
7720
|
-
break;
|
|
7721
|
-
case KitFilterDateRange.LAST_WEEK:
|
|
7722
|
-
startDate.setDate(now.getDate() - 7);
|
|
7723
|
-
break;
|
|
7724
|
-
case KitFilterDateRange.LAST_MONTH:
|
|
7725
|
-
startDate.setMonth(now.getMonth() - 1);
|
|
7726
|
-
break;
|
|
7727
|
-
case KitFilterDateRange.CUSTOM_RANGE:
|
|
7728
|
-
if (dateRangeHandler) {
|
|
7729
|
-
return dateRangeHandler();
|
|
7730
|
-
}
|
|
7731
|
-
break;
|
|
7732
|
-
}
|
|
7733
|
-
return [
|
|
7734
|
-
kitNormalizeDateToUtc(startDate, timezoneOffset),
|
|
7735
|
-
kitNormalizeDateToUtc(endDate, timezoneOffset, true),
|
|
7736
|
-
];
|
|
7737
|
-
};
|
|
7738
|
-
const getValueFiltersByRange = (range, timezoneOffset = 'UTC', field, dateRangeHandler) => {
|
|
7739
|
-
const [startDate, endDate,] = getDatesByRange(range, timezoneOffset, dateRangeHandler);
|
|
7740
|
-
return [
|
|
7741
|
-
{
|
|
7742
|
-
operator: KitFilterOperator.GTE,
|
|
7743
|
-
value: startDate,
|
|
7744
|
-
field,
|
|
7745
|
-
},
|
|
7746
|
-
{
|
|
7747
|
-
operator: KitFilterOperator.LTE,
|
|
7748
|
-
value: endDate,
|
|
7749
|
-
field,
|
|
7750
8788
|
},
|
|
7751
|
-
];
|
|
7752
|
-
};
|
|
7753
|
-
const getValueFilters = (value) => {
|
|
7754
|
-
return value.filters.map(item => {
|
|
7755
|
-
const value = item.value ? new Date(item.value) : item.value;
|
|
7756
|
-
return {
|
|
7757
|
-
...item,
|
|
7758
|
-
value,
|
|
7759
|
-
};
|
|
7760
|
-
});
|
|
7761
|
-
};
|
|
7762
|
-
const kitBuildOdataFilter = (filter, columns) => removeFilterPrefix(normalizeGuidFilter(kitDataStateToODataString({ filter }, true, columns)));
|
|
7763
|
-
const kitBuildFilters = (filters) => ({
|
|
7764
|
-
logic: KitFilterLogic.AND,
|
|
7765
|
-
filters: filters.map(filter => {
|
|
7766
|
-
const cleanedFilter = filterEmptyValues(filter.value);
|
|
7767
|
-
return {
|
|
7768
|
-
...cleanedFilter,
|
|
7769
|
-
isCustomField: filter.type === KitFilterType.CUSTOM_INPUT,
|
|
7770
|
-
};
|
|
7771
|
-
}),
|
|
7772
|
-
});
|
|
7773
|
-
|
|
7774
|
-
const kitFormatStringForSearch = (inputString) => {
|
|
7775
|
-
return inputString
|
|
7776
|
-
.split(/\s+/)
|
|
7777
|
-
.filter(text => !!text)
|
|
7778
|
-
.map(text => text + '*')
|
|
7779
|
-
.join(' ');
|
|
7780
|
-
};
|
|
7781
|
-
|
|
7782
|
-
const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false, width, filterType, excelFormat, apiField, hiddenInGrid, customFieldHandler, customRangeHandler) => ({
|
|
7783
|
-
field,
|
|
7784
|
-
title,
|
|
7785
|
-
sortable,
|
|
7786
|
-
hidden,
|
|
7787
|
-
width,
|
|
7788
|
-
filterType,
|
|
7789
|
-
type,
|
|
7790
|
-
excelFormat,
|
|
7791
|
-
apiField,
|
|
7792
|
-
hiddenInGrid,
|
|
7793
|
-
customFieldHandler,
|
|
7794
|
-
customRangeHandler,
|
|
7795
|
-
});
|
|
7796
|
-
const kitBuildGridDataResults = (data, loading, total) => ({
|
|
7797
|
-
results: {
|
|
7798
|
-
data,
|
|
7799
|
-
total: total ?? 0,
|
|
7800
8789
|
},
|
|
7801
|
-
loading,
|
|
7802
|
-
});
|
|
7803
|
-
const kitBuildSortString = (sort, columns) => {
|
|
7804
|
-
const sortString = sort?.filter(({ dir }) => dir)
|
|
7805
|
-
.map(({ field, dir }) => {
|
|
7806
|
-
const column = columns?.find(col => col.field === field);
|
|
7807
|
-
const targetField = column?.apiField ?? field;
|
|
7808
|
-
return `${targetField.split('.').join('/')} ${dir}`;
|
|
7809
|
-
}).join(', ');
|
|
7810
|
-
return sortString !== '' && sortString || undefined;
|
|
7811
|
-
};
|
|
7812
|
-
const kitFetchGridData = ({ store, destroyRef, isLoading, fetchAction, fetchFromIndexAction, hasArchiveToggle, error, }) => {
|
|
7813
|
-
isLoading.set(true);
|
|
7814
|
-
const { skip, take, sort, filter, search, archive } = store.selectSnapshot(KIT_GRID_STATE_TOKEN);
|
|
7815
|
-
const gridState = {
|
|
7816
|
-
take,
|
|
7817
|
-
skip,
|
|
7818
|
-
sort,
|
|
7819
|
-
filter: kitBuildFilters(filter),
|
|
7820
|
-
};
|
|
7821
|
-
const isArchive = hasArchiveToggle && archive || false;
|
|
7822
|
-
const isSearchMode = hasArchiveToggle && !isArchive || !!search;
|
|
7823
|
-
const searchTerm = search && kitFormatStringForSearch(search) || undefined;
|
|
7824
|
-
const action = isSearchMode && fetchFromIndexAction({ ...gridState, searchTerm }) || fetchAction(gridState);
|
|
7825
|
-
store.dispatch(action).pipe(takeUntilDestroyed(destroyRef), finalize(() => isLoading.set(false))).subscribe({ error });
|
|
7826
8790
|
};
|
|
7827
|
-
|
|
7828
|
-
|
|
7829
|
-
|
|
7830
|
-
|
|
7831
|
-
const searchTerm = search && kitFormatStringForSearch(search) || undefined;
|
|
7832
|
-
return fetchIndexAction(0, total, kitBuildSortString(sort, columns), kitBuildOdataFilter(kitBuildFilters(filter)), searchTerm);
|
|
8791
|
+
|
|
8792
|
+
class KitTranslateService {
|
|
8793
|
+
constructor() {
|
|
8794
|
+
this.translateService = inject(TranslateService);
|
|
7833
8795
|
}
|
|
7834
|
-
|
|
7835
|
-
|
|
7836
|
-
|
|
7837
|
-
|
|
7838
|
-
return true;
|
|
8796
|
+
registerTranslations() {
|
|
8797
|
+
Object.keys(kitTranslations).forEach(lang => {
|
|
8798
|
+
this.translateService.setTranslation(lang, kitTranslations[lang], true);
|
|
8799
|
+
});
|
|
7839
8800
|
}
|
|
7840
|
-
|
|
7841
|
-
|
|
7842
|
-
|
|
7843
|
-
|
|
8801
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8802
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTranslateService, providedIn: 'root' }); }
|
|
8803
|
+
}
|
|
8804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTranslateService, decorators: [{
|
|
8805
|
+
type: Injectable,
|
|
8806
|
+
args: [{
|
|
8807
|
+
providedIn: 'root',
|
|
8808
|
+
}]
|
|
8809
|
+
}] });
|
|
7844
8810
|
|
|
7845
8811
|
var KitGridViewType;
|
|
7846
8812
|
(function (KitGridViewType) {
|
|
@@ -7981,12 +8947,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
7981
8947
|
}]
|
|
7982
8948
|
}] });
|
|
7983
8949
|
|
|
7984
|
-
const kitApiResponseDefaultEntities = () => ({
|
|
7985
|
-
data: [],
|
|
7986
|
-
total: 0,
|
|
7987
|
-
loading: true,
|
|
7988
|
-
});
|
|
7989
|
-
|
|
7990
8950
|
var KitGridViewsState_1;
|
|
7991
8951
|
const KIT_GRID_VIEWS_STATE_TOKEN = new StateToken('gridViews');
|
|
7992
8952
|
let KitGridViewsState = class KitGridViewsState {
|
|
@@ -8646,7 +9606,7 @@ class KitGridViewsComponent {
|
|
|
8646
9606
|
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: [
|
|
8647
9607
|
TitleCasePipe,
|
|
8648
9608
|
KitGridUrlStateService,
|
|
8649
|
-
], 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 }); }
|
|
9609
|
+
], 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 }); }
|
|
8650
9610
|
}
|
|
8651
9611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridViewsComponent, decorators: [{
|
|
8652
9612
|
type: Component,
|
|
@@ -8898,7 +9858,7 @@ class KitFilterCheckboxComponent {
|
|
|
8898
9858
|
})));
|
|
8899
9859
|
}
|
|
8900
9860
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8901
|
-
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 }); }
|
|
9861
|
+
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 }); }
|
|
8902
9862
|
}
|
|
8903
9863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
|
|
8904
9864
|
type: Component,
|
|
@@ -9236,7 +10196,7 @@ class KitFilterInputComponent {
|
|
|
9236
10196
|
}));
|
|
9237
10197
|
}
|
|
9238
10198
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9239
|
-
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 }); }
|
|
10199
|
+
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 }); }
|
|
9240
10200
|
}
|
|
9241
10201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, decorators: [{
|
|
9242
10202
|
type: Component,
|
|
@@ -9494,7 +10454,7 @@ class KitFilterSelectorComponent {
|
|
|
9494
10454
|
this.popup()?.close();
|
|
9495
10455
|
}
|
|
9496
10456
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9497
|
-
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 }); }
|
|
10457
|
+
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 }); }
|
|
9498
10458
|
}
|
|
9499
10459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterSelectorComponent, decorators: [{
|
|
9500
10460
|
type: Component,
|
|
@@ -9583,7 +10543,7 @@ class KitFilterCustomInputComponent {
|
|
|
9583
10543
|
}
|
|
9584
10544
|
}
|
|
9585
10545
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9586
|
-
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 }); }
|
|
10546
|
+
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 }); }
|
|
9587
10547
|
}
|
|
9588
10548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCustomInputComponent, decorators: [{
|
|
9589
10549
|
type: Component,
|
|
@@ -10815,541 +11775,284 @@ class KitTranslateLoader {
|
|
|
10815
11775
|
result[key] = this.deepMerge(result[key] ?? {}, source[key]);
|
|
10816
11776
|
}
|
|
10817
11777
|
else {
|
|
10818
|
-
result[key] = source[key];
|
|
10819
|
-
}
|
|
10820
|
-
}
|
|
10821
|
-
return result;
|
|
10822
|
-
}
|
|
10823
|
-
}
|
|
10824
|
-
|
|
10825
|
-
class KitTrackingCardComponent {
|
|
10826
|
-
constructor() {
|
|
10827
|
-
this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
10828
|
-
this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
10829
|
-
this.contentIsHighlighted = input(false, ...(ngDevMode ? [{ debugName: "contentIsHighlighted" }] : /* istanbul ignore next */ []));
|
|
10830
|
-
this.firstTabIsActive = signal(true, ...(ngDevMode ? [{ debugName: "firstTabIsActive" }] : /* istanbul ignore next */ []));
|
|
10831
|
-
this.kitButtonType = KitButtonType;
|
|
10832
|
-
}
|
|
10833
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10834
|
-
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 }); }
|
|
10835
|
-
}
|
|
10836
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingCardComponent, decorators: [{
|
|
10837
|
-
type: Component,
|
|
10838
|
-
args: [{ selector: 'kit-tracking-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
10839
|
-
KitButtonComponent,
|
|
10840
|
-
], 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"] }]
|
|
10841
|
-
}], 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 }] }] } });
|
|
10842
|
-
|
|
10843
|
-
class KitTrackingTimelineComponent {
|
|
10844
|
-
constructor() {
|
|
10845
|
-
this.timelineItems = input.required(...(ngDevMode ? [{ debugName: "timelineItems" }] : /* istanbul ignore next */ []));
|
|
10846
|
-
}
|
|
10847
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10848
|
-
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 }); }
|
|
10849
|
-
}
|
|
10850
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingTimelineComponent, decorators: [{
|
|
10851
|
-
type: Component,
|
|
10852
|
-
args: [{ selector: 'kit-tracking-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
10853
|
-
KitTruncateTextComponent,
|
|
10854
|
-
], 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"] }]
|
|
10855
|
-
}], propDecorators: { timelineItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineItems", required: true }] }] } });
|
|
10856
|
-
|
|
10857
|
-
class KitMobileMenuComponent {
|
|
10858
|
-
constructor() {
|
|
10859
|
-
this.store = inject(Store);
|
|
10860
|
-
this.kitMobileMenuItems = input.required(...(ngDevMode ? [{ debugName: "kitMobileMenuItems" }] : /* istanbul ignore next */ []));
|
|
10861
|
-
this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
10862
|
-
this.categoryItem = contentChild.required('categoryItem');
|
|
10863
|
-
this.linkItem = contentChild.required('linkItem');
|
|
10864
|
-
this.navListFooter = contentChild('navListFooter', ...(ngDevMode ? [{ debugName: "navListFooter" }] : /* istanbul ignore next */ []));
|
|
10865
|
-
this.kitSvgIcon = KitSvgIcon;
|
|
10866
|
-
this.selectedItem = this.store.selectSignal(KitMobileMenuState.selectedItem);
|
|
10867
|
-
this.displayedItems = combineLatest([
|
|
10868
|
-
this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN),
|
|
10869
|
-
toObservable(this.kitMobileMenuItems),
|
|
10870
|
-
]).pipe(tap(([permissions]) => !Object.keys(permissions).length && this.store.dispatch(new FetchUserPermissions())), map(([permissions]) => this.filterMenuItemsByPermissions(permissions)));
|
|
10871
|
-
}
|
|
10872
|
-
setSelectedItem(item) {
|
|
10873
|
-
this.store.dispatch(new SetSelectedMobileMenuItem(item));
|
|
10874
|
-
}
|
|
10875
|
-
filterMenuItemsByPermissions(permissions) {
|
|
10876
|
-
if (!Object.keys(permissions).length) {
|
|
10877
|
-
return [];
|
|
10878
|
-
}
|
|
10879
|
-
return this.kitMobileMenuItems()
|
|
10880
|
-
.map(item => ({
|
|
10881
|
-
...item,
|
|
10882
|
-
links: item.links.filter(link => !link.permissions || kitHasPermission(link.permissions, permissions)),
|
|
10883
|
-
}))
|
|
10884
|
-
.filter(item => item.links.length > 0);
|
|
10885
|
-
}
|
|
10886
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10887
|
-
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 }); }
|
|
10888
|
-
}
|
|
10889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuComponent, decorators: [{
|
|
10890
|
-
type: Component,
|
|
10891
|
-
args: [{ selector: 'kit-mobile-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
10892
|
-
NgTemplateOutlet,
|
|
10893
|
-
NgClass,
|
|
10894
|
-
AsyncPipe,
|
|
10895
|
-
], 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"] }]
|
|
10896
|
-
}], 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 }] }] } });
|
|
10897
|
-
|
|
10898
|
-
class KitThemeService {
|
|
10899
|
-
constructor() {
|
|
10900
|
-
this.store = inject(Store);
|
|
10901
|
-
this.useDarkThemeForMobile = this.store.selectSignal(KitUserSettingsState.getSettingByKey(KitUserSettingsKeys.UseDarkThemeForMobile));
|
|
10902
|
-
this.theme = computed(() => {
|
|
10903
|
-
try {
|
|
10904
|
-
return JSON.parse(this.useDarkThemeForMobile()) ? KitThemes.Dark : KitThemes.Light;
|
|
10905
|
-
}
|
|
10906
|
-
catch {
|
|
10907
|
-
return KitThemes.Light;
|
|
10908
|
-
}
|
|
10909
|
-
}, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
10910
|
-
}
|
|
10911
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
10912
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, providedIn: 'root' }); }
|
|
10913
|
-
}
|
|
10914
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, decorators: [{
|
|
10915
|
-
type: Injectable,
|
|
10916
|
-
args: [{ providedIn: 'root' }]
|
|
10917
|
-
}] });
|
|
10918
|
-
|
|
10919
|
-
const kitUserPermissionsGuard = (route) => {
|
|
10920
|
-
const permissionsData = route.data?.permission;
|
|
10921
|
-
const store = inject(Store);
|
|
10922
|
-
const checkPermission = (userPermissions) => {
|
|
10923
|
-
if (permissionsData) {
|
|
10924
|
-
return kitHasPermission(permissionsData, userPermissions);
|
|
10925
|
-
}
|
|
10926
|
-
return true;
|
|
10927
|
-
};
|
|
10928
|
-
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)));
|
|
10929
|
-
};
|
|
10930
|
-
|
|
10931
|
-
var KitUserType;
|
|
10932
|
-
(function (KitUserType) {
|
|
10933
|
-
KitUserType["Admin"] = "Admin";
|
|
10934
|
-
KitUserType["User"] = "User";
|
|
10935
|
-
})(KitUserType || (KitUserType = {}));
|
|
10936
|
-
|
|
10937
|
-
var KitStatusLabelColor;
|
|
10938
|
-
(function (KitStatusLabelColor) {
|
|
10939
|
-
KitStatusLabelColor["WHITE"] = "white";
|
|
10940
|
-
KitStatusLabelColor["PURPLE"] = "purple";
|
|
10941
|
-
KitStatusLabelColor["TEAL"] = "teal";
|
|
10942
|
-
KitStatusLabelColor["GREY"] = "grey";
|
|
10943
|
-
KitStatusLabelColor["ORANGE"] = "orange";
|
|
10944
|
-
KitStatusLabelColor["GREEN"] = "green";
|
|
10945
|
-
KitStatusLabelColor["BLUE"] = "blue";
|
|
10946
|
-
KitStatusLabelColor["PINK"] = "pink";
|
|
10947
|
-
KitStatusLabelColor["RED"] = "red";
|
|
10948
|
-
})(KitStatusLabelColor || (KitStatusLabelColor = {}));
|
|
10949
|
-
var KitStatusLabelSize;
|
|
10950
|
-
(function (KitStatusLabelSize) {
|
|
10951
|
-
KitStatusLabelSize["SMALL"] = "small";
|
|
10952
|
-
KitStatusLabelSize["LARGE"] = "large";
|
|
10953
|
-
})(KitStatusLabelSize || (KitStatusLabelSize = {}));
|
|
10954
|
-
|
|
10955
|
-
class KitStatusLabelComponent {
|
|
10956
|
-
constructor() {
|
|
10957
|
-
this.color = input(KitStatusLabelColor.WHITE, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
10958
|
-
this.size = input(KitStatusLabelSize.SMALL, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
10959
|
-
}
|
|
10960
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10961
|
-
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 }); }
|
|
10962
|
-
}
|
|
10963
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitStatusLabelComponent, decorators: [{
|
|
10964
|
-
type: Component,
|
|
10965
|
-
args: [{ selector: 'kit-status-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
10966
|
-
KitTruncateTextComponent,
|
|
10967
|
-
NgClass,
|
|
10968
|
-
], 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"] }]
|
|
10969
|
-
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
10970
|
-
|
|
10971
|
-
class FetchUserIdentities {
|
|
10972
|
-
static { this.type = '[UserIdentities] Fetch'; }
|
|
10973
|
-
}
|
|
10974
|
-
class SetUserIdentity extends KitAbstractPayloadAction {
|
|
10975
|
-
static { this.type = '[UserIdentity] Set'; }
|
|
10976
|
-
}
|
|
10977
|
-
|
|
10978
|
-
class KitUserIdentitiesApiService {
|
|
10979
|
-
constructor() {
|
|
10980
|
-
this.httpClient = inject(HttpClient);
|
|
10981
|
-
this.basePath = inject(KIT_BASE_PATH);
|
|
10982
|
-
}
|
|
10983
|
-
getUserIdentities() {
|
|
10984
|
-
const url = `${this.basePath}/users/me/identities`;
|
|
10985
|
-
return this.httpClient.get(url);
|
|
10986
|
-
}
|
|
10987
|
-
setCurrentIdentity(id) {
|
|
10988
|
-
const url = `${this.basePath}/users/me/identities/current`;
|
|
10989
|
-
return this.httpClient.put(url, { id });
|
|
10990
|
-
}
|
|
10991
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
10992
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, providedIn: 'root' }); }
|
|
10993
|
-
}
|
|
10994
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, decorators: [{
|
|
10995
|
-
type: Injectable,
|
|
10996
|
-
args: [{
|
|
10997
|
-
providedIn: 'root',
|
|
10998
|
-
}]
|
|
10999
|
-
}] });
|
|
11000
|
-
|
|
11001
|
-
const KIT_USER_IDENTITIES_STATE_TOKEN = new StateToken('userIdentities');
|
|
11002
|
-
let KitUserIdentitiesState = class KitUserIdentitiesState {
|
|
11003
|
-
constructor() {
|
|
11004
|
-
this.kitUserIdentitiesApiService = inject(KitUserIdentitiesApiService);
|
|
11005
|
-
}
|
|
11006
|
-
fetchUserApplications(ctx) {
|
|
11007
|
-
return this.kitUserIdentitiesApiService.getUserIdentities().pipe(tap(userIdentities => ctx.setState(userIdentities)));
|
|
11008
|
-
}
|
|
11009
|
-
setUserIdentity(ctx, action) {
|
|
11010
|
-
return this.kitUserIdentitiesApiService.setCurrentIdentity(action.payload);
|
|
11011
|
-
}
|
|
11012
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
11013
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState }); }
|
|
11014
|
-
};
|
|
11015
|
-
__decorate([
|
|
11016
|
-
Action(FetchUserIdentities)
|
|
11017
|
-
], KitUserIdentitiesState.prototype, "fetchUserApplications", null);
|
|
11018
|
-
__decorate([
|
|
11019
|
-
Action(SetUserIdentity)
|
|
11020
|
-
], KitUserIdentitiesState.prototype, "setUserIdentity", null);
|
|
11021
|
-
KitUserIdentitiesState = __decorate([
|
|
11022
|
-
State({
|
|
11023
|
-
name: KIT_USER_IDENTITIES_STATE_TOKEN,
|
|
11024
|
-
defaults: {
|
|
11025
|
-
data: [],
|
|
11026
|
-
total: 0,
|
|
11027
|
-
},
|
|
11028
|
-
})
|
|
11029
|
-
], KitUserIdentitiesState);
|
|
11030
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState, decorators: [{
|
|
11031
|
-
type: Injectable
|
|
11032
|
-
}], propDecorators: { fetchUserApplications: [], setUserIdentity: [] } });
|
|
11033
|
-
|
|
11034
|
-
class KitUserIdentitiesSelector {
|
|
11035
|
-
constructor() {
|
|
11036
|
-
this.store = inject(Store);
|
|
11037
|
-
this.router = inject(Router);
|
|
11038
|
-
this.window = inject(WINDOW);
|
|
11039
|
-
this.userIdentities = this.store.selectSignal(KIT_USER_IDENTITIES_STATE_TOKEN);
|
|
11040
|
-
this.userIdentitiesDropdownItems = computed(() => this.userIdentities().data.map(item => ({
|
|
11041
|
-
text: item.alias,
|
|
11042
|
-
value: item.id,
|
|
11043
|
-
data: item,
|
|
11044
|
-
})), ...(ngDevMode ? [{ debugName: "userIdentitiesDropdownItems" }] : /* istanbul ignore next */ []));
|
|
11045
|
-
this.user = this.store.selectSignal(KIT_USER_STATE_TOKEN);
|
|
11046
|
-
this.currentIdentity = computed(() => this.userIdentities().data.find(item => item.id === this.user().data?.identityId) ?? null, ...(ngDevMode ? [{ debugName: "currentIdentity" }] : /* istanbul ignore next */ []));
|
|
11047
|
-
this.currentIdentityDropdownItem = computed(() => this.userIdentitiesDropdownItems()?.find(item => item.value === this.currentIdentity()?.id) ?? null, ...(ngDevMode ? [{ debugName: "currentIdentityDropdownItem" }] : /* istanbul ignore next */ []));
|
|
11048
|
-
}
|
|
11049
|
-
ngOnInit() {
|
|
11050
|
-
this.fetchUserIdentities();
|
|
11051
|
-
}
|
|
11052
|
-
onIdentitySelect(item) {
|
|
11053
|
-
const currentIdentityId = this.currentIdentity()?.id;
|
|
11054
|
-
if (!currentIdentityId) {
|
|
11055
|
-
return;
|
|
11056
|
-
}
|
|
11057
|
-
this.store.dispatch(new SetUserIdentity(item.value)).subscribe(() => {
|
|
11058
|
-
if (this.user().data?.type !== item.data?.type) {
|
|
11059
|
-
this.window.location.href = '/';
|
|
11060
|
-
return;
|
|
11778
|
+
result[key] = source[key];
|
|
11061
11779
|
}
|
|
11062
|
-
|
|
11063
|
-
|
|
11064
|
-
});
|
|
11065
|
-
});
|
|
11780
|
+
}
|
|
11781
|
+
return result;
|
|
11066
11782
|
}
|
|
11067
|
-
|
|
11068
|
-
|
|
11783
|
+
}
|
|
11784
|
+
|
|
11785
|
+
class KitTrackingCardComponent {
|
|
11786
|
+
constructor() {
|
|
11787
|
+
this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
11788
|
+
this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
11789
|
+
this.contentIsHighlighted = input(false, ...(ngDevMode ? [{ debugName: "contentIsHighlighted" }] : /* istanbul ignore next */ []));
|
|
11790
|
+
this.firstTabIsActive = signal(true, ...(ngDevMode ? [{ debugName: "firstTabIsActive" }] : /* istanbul ignore next */ []));
|
|
11791
|
+
this.kitButtonType = KitButtonType;
|
|
11069
11792
|
}
|
|
11070
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type:
|
|
11071
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
11793
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11794
|
+
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 }); }
|
|
11072
11795
|
}
|
|
11073
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type:
|
|
11796
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingCardComponent, decorators: [{
|
|
11074
11797
|
type: Component,
|
|
11075
|
-
args: [{ selector: 'kit-
|
|
11076
|
-
|
|
11077
|
-
],
|
|
11078
|
-
}] });
|
|
11798
|
+
args: [{ selector: 'kit-tracking-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
11799
|
+
KitButtonComponent,
|
|
11800
|
+
], 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"] }]
|
|
11801
|
+
}], 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 }] }] } });
|
|
11079
11802
|
|
|
11080
|
-
class
|
|
11803
|
+
class KitTrackingTimelineComponent {
|
|
11081
11804
|
constructor() {
|
|
11082
|
-
this.
|
|
11083
|
-
}
|
|
11084
|
-
intercept(req, next) {
|
|
11085
|
-
const user = this.store.selectSignal(KIT_USER_STATE_TOKEN);
|
|
11086
|
-
if (!user().data?.identityId) {
|
|
11087
|
-
return next.handle(req);
|
|
11088
|
-
}
|
|
11089
|
-
return next.handle(req.clone({
|
|
11090
|
-
setHeaders: {
|
|
11091
|
-
'X-Identity-Id': `${user().data?.identityId}`,
|
|
11092
|
-
},
|
|
11093
|
-
}));
|
|
11805
|
+
this.timelineItems = input.required(...(ngDevMode ? [{ debugName: "timelineItems" }] : /* istanbul ignore next */ []));
|
|
11094
11806
|
}
|
|
11807
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11808
|
+
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 }); }
|
|
11095
11809
|
}
|
|
11810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTrackingTimelineComponent, decorators: [{
|
|
11811
|
+
type: Component,
|
|
11812
|
+
args: [{ selector: 'kit-tracking-timeline', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
11813
|
+
KitTruncateTextComponent,
|
|
11814
|
+
], 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"] }]
|
|
11815
|
+
}], propDecorators: { timelineItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "timelineItems", required: true }] }] } });
|
|
11096
11816
|
|
|
11097
|
-
class
|
|
11817
|
+
class KitMobileMenuComponent {
|
|
11098
11818
|
constructor() {
|
|
11099
|
-
this.
|
|
11100
|
-
this.
|
|
11101
|
-
this.
|
|
11102
|
-
this.
|
|
11103
|
-
this.
|
|
11104
|
-
this.
|
|
11105
|
-
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
11106
|
-
this.kitCardSkeletonConfig = input({
|
|
11107
|
-
itemHeight: 200,
|
|
11108
|
-
itemsCount: 3,
|
|
11109
|
-
}, ...(ngDevMode ? [{ debugName: "kitCardSkeletonConfig" }] : /* istanbul ignore next */ []));
|
|
11110
|
-
this.dataStateChanged = output();
|
|
11111
|
-
this.cardClicked = output();
|
|
11112
|
-
this.kitTextboxComponent = viewChild.required(KitTextboxComponent);
|
|
11113
|
-
this.cardElement = contentChild('cardElement', ...(ngDevMode ? [{ debugName: "cardElement" }] : /* istanbul ignore next */ []));
|
|
11114
|
-
this.headerActions = contentChild('headerActions', ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
|
|
11115
|
-
this.details = contentChild('details', ...(ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []));
|
|
11819
|
+
this.store = inject(Store);
|
|
11820
|
+
this.kitMobileMenuItems = input.required(...(ngDevMode ? [{ debugName: "kitMobileMenuItems" }] : /* istanbul ignore next */ []));
|
|
11821
|
+
this.theme = input(KitThemes.Light, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
11822
|
+
this.categoryItem = contentChild.required('categoryItem');
|
|
11823
|
+
this.linkItem = contentChild.required('linkItem');
|
|
11824
|
+
this.navListFooter = contentChild('navListFooter', ...(ngDevMode ? [{ debugName: "navListFooter" }] : /* istanbul ignore next */ []));
|
|
11116
11825
|
this.kitSvgIcon = KitSvgIcon;
|
|
11117
|
-
this.
|
|
11118
|
-
this.
|
|
11119
|
-
|
|
11120
|
-
|
|
11121
|
-
|
|
11122
|
-
this.cardData = signal([], ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
|
|
11123
|
-
this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
11124
|
-
this.dataState = signal({
|
|
11125
|
-
skip: 0,
|
|
11126
|
-
take: 0,
|
|
11127
|
-
}, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
|
|
11128
|
-
this.newCreatedCards = signal([], ...(ngDevMode ? [{ debugName: "newCreatedCards" }] : /* istanbul ignore next */ []));
|
|
11129
|
-
this.skipNewCreatedCardFilter = computed(() => {
|
|
11130
|
-
return this.newCreatedCards().length ? {
|
|
11131
|
-
logic: KitFilterLogic.AND,
|
|
11132
|
-
filters: this.newCreatedCards().map(card => ({
|
|
11133
|
-
field: 'id',
|
|
11134
|
-
operator: KitFilterOperator.NEQ,
|
|
11135
|
-
value: card.id,
|
|
11136
|
-
})),
|
|
11137
|
-
} : {};
|
|
11138
|
-
}, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : /* istanbul ignore next */ []));
|
|
11139
|
-
this.shouldAppendFetchedData = true;
|
|
11140
|
-
this.showDetails = false;
|
|
11141
|
-
}
|
|
11142
|
-
ngOnInit() {
|
|
11143
|
-
this.dataState.update(state => ({
|
|
11144
|
-
...state,
|
|
11145
|
-
take: this.pageSize(),
|
|
11146
|
-
}));
|
|
11147
|
-
this.initCardDataSubscription();
|
|
11148
|
-
this.initSearchSubscription();
|
|
11149
|
-
this.initStateFromUrl();
|
|
11150
|
-
}
|
|
11151
|
-
loadMoreData() {
|
|
11152
|
-
this.shouldAppendFetchedData = true;
|
|
11153
|
-
this.dataState.update(state => ({
|
|
11154
|
-
...state,
|
|
11155
|
-
skip: (this.dataState()?.skip ?? 0) + this.pageSize(),
|
|
11156
|
-
take: this.pageSize(),
|
|
11157
|
-
}));
|
|
11158
|
-
this.updateData();
|
|
11826
|
+
this.selectedItem = this.store.selectSignal(KitMobileMenuState.selectedItem);
|
|
11827
|
+
this.displayedItems = combineLatest([
|
|
11828
|
+
this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN),
|
|
11829
|
+
toObservable(this.kitMobileMenuItems),
|
|
11830
|
+
]).pipe(tap(([permissions]) => !Object.keys(permissions).length && this.store.dispatch(new FetchUserPermissions())), map(([permissions]) => this.filterMenuItemsByPermissions(permissions)));
|
|
11159
11831
|
}
|
|
11160
|
-
|
|
11161
|
-
|
|
11162
|
-
this.dataState.update(state => ({ ...state, activeId: normalizedId }));
|
|
11163
|
-
this.navigateToCard(normalizedId);
|
|
11164
|
-
this.cardClicked.emit({ ...card, id: normalizedId });
|
|
11832
|
+
setSelectedItem(item) {
|
|
11833
|
+
this.store.dispatch(new SetSelectedMobileMenuItem(item));
|
|
11165
11834
|
}
|
|
11166
|
-
|
|
11167
|
-
|
|
11168
|
-
|
|
11169
|
-
card,
|
|
11170
|
-
]);
|
|
11171
|
-
this.newCreatedCards.set([
|
|
11172
|
-
...this.newCreatedCards(),
|
|
11173
|
-
card,
|
|
11174
|
-
]);
|
|
11175
|
-
this.dataState.update(state => ({
|
|
11176
|
-
...state,
|
|
11177
|
-
filters: this.skipNewCreatedCardFilter(),
|
|
11178
|
-
}));
|
|
11179
|
-
this.total.set(this.total() + 1);
|
|
11180
|
-
if (navigateToCard) {
|
|
11181
|
-
this.onCardClick(card);
|
|
11182
|
-
this.showDetails = true;
|
|
11835
|
+
filterMenuItemsByPermissions(permissions) {
|
|
11836
|
+
if (!Object.keys(permissions).length) {
|
|
11837
|
+
return [];
|
|
11183
11838
|
}
|
|
11839
|
+
return this.kitMobileMenuItems()
|
|
11840
|
+
.map(item => ({
|
|
11841
|
+
...item,
|
|
11842
|
+
links: item.links.filter(link => !link.permissions || kitHasPermission(link.permissions, permissions)),
|
|
11843
|
+
}))
|
|
11844
|
+
.filter(item => item.links.length > 0);
|
|
11184
11845
|
}
|
|
11185
|
-
|
|
11186
|
-
|
|
11187
|
-
|
|
11188
|
-
|
|
11189
|
-
|
|
11190
|
-
|
|
11191
|
-
|
|
11192
|
-
|
|
11193
|
-
|
|
11194
|
-
|
|
11195
|
-
}
|
|
11196
|
-
|
|
11197
|
-
|
|
11198
|
-
|
|
11199
|
-
|
|
11200
|
-
|
|
11846
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11847
|
+
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 }); }
|
|
11848
|
+
}
|
|
11849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMobileMenuComponent, decorators: [{
|
|
11850
|
+
type: Component,
|
|
11851
|
+
args: [{ selector: 'kit-mobile-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
11852
|
+
NgTemplateOutlet,
|
|
11853
|
+
NgClass,
|
|
11854
|
+
AsyncPipe,
|
|
11855
|
+
], 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"] }]
|
|
11856
|
+
}], 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 }] }] } });
|
|
11857
|
+
|
|
11858
|
+
class KitThemeService {
|
|
11859
|
+
constructor() {
|
|
11860
|
+
this.store = inject(Store);
|
|
11861
|
+
this.useDarkThemeForMobile = this.store.selectSignal(KitUserSettingsState.getSettingByKey(KitUserSettingsKeys.UseDarkThemeForMobile));
|
|
11862
|
+
this.theme = computed(() => {
|
|
11863
|
+
try {
|
|
11864
|
+
return JSON.parse(this.useDarkThemeForMobile()) ? KitThemes.Dark : KitThemes.Light;
|
|
11201
11865
|
}
|
|
11202
|
-
|
|
11203
|
-
|
|
11204
|
-
const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
|
|
11205
|
-
if (loadedCards >= this.total()) {
|
|
11206
|
-
this.isLoading.set(false);
|
|
11207
|
-
if (nextCard) {
|
|
11208
|
-
this.onCardClick(nextCard);
|
|
11866
|
+
catch {
|
|
11867
|
+
return KitThemes.Light;
|
|
11209
11868
|
}
|
|
11210
|
-
|
|
11211
|
-
}
|
|
11212
|
-
this.showDetails = false;
|
|
11213
|
-
this.shouldAppendFetchedData = true;
|
|
11214
|
-
this.dataStateChanged.emit({
|
|
11215
|
-
skip: loadedCards,
|
|
11216
|
-
take: 1,
|
|
11217
|
-
filters: this.skipNewCreatedCardFilter(),
|
|
11218
|
-
search: this.dataState().search,
|
|
11219
|
-
});
|
|
11869
|
+
}, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
11220
11870
|
}
|
|
11221
|
-
|
|
11222
|
-
|
|
11871
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
11872
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, providedIn: 'root' }); }
|
|
11873
|
+
}
|
|
11874
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitThemeService, decorators: [{
|
|
11875
|
+
type: Injectable,
|
|
11876
|
+
args: [{ providedIn: 'root' }]
|
|
11877
|
+
}] });
|
|
11878
|
+
|
|
11879
|
+
const kitUserPermissionsGuard = (route) => {
|
|
11880
|
+
const permissionsData = route.data?.permission;
|
|
11881
|
+
const store = inject(Store);
|
|
11882
|
+
const checkPermission = (userPermissions) => {
|
|
11883
|
+
if (permissionsData) {
|
|
11884
|
+
return kitHasPermission(permissionsData, userPermissions);
|
|
11885
|
+
}
|
|
11886
|
+
return true;
|
|
11887
|
+
};
|
|
11888
|
+
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)));
|
|
11889
|
+
};
|
|
11890
|
+
|
|
11891
|
+
var KitUserType;
|
|
11892
|
+
(function (KitUserType) {
|
|
11893
|
+
KitUserType["Admin"] = "Admin";
|
|
11894
|
+
KitUserType["User"] = "User";
|
|
11895
|
+
})(KitUserType || (KitUserType = {}));
|
|
11896
|
+
|
|
11897
|
+
var KitStatusLabelColor;
|
|
11898
|
+
(function (KitStatusLabelColor) {
|
|
11899
|
+
KitStatusLabelColor["WHITE"] = "white";
|
|
11900
|
+
KitStatusLabelColor["PURPLE"] = "purple";
|
|
11901
|
+
KitStatusLabelColor["TEAL"] = "teal";
|
|
11902
|
+
KitStatusLabelColor["GREY"] = "grey";
|
|
11903
|
+
KitStatusLabelColor["ORANGE"] = "orange";
|
|
11904
|
+
KitStatusLabelColor["GREEN"] = "green";
|
|
11905
|
+
KitStatusLabelColor["BLUE"] = "blue";
|
|
11906
|
+
KitStatusLabelColor["PINK"] = "pink";
|
|
11907
|
+
KitStatusLabelColor["RED"] = "red";
|
|
11908
|
+
})(KitStatusLabelColor || (KitStatusLabelColor = {}));
|
|
11909
|
+
var KitStatusLabelSize;
|
|
11910
|
+
(function (KitStatusLabelSize) {
|
|
11911
|
+
KitStatusLabelSize["SMALL"] = "small";
|
|
11912
|
+
KitStatusLabelSize["LARGE"] = "large";
|
|
11913
|
+
})(KitStatusLabelSize || (KitStatusLabelSize = {}));
|
|
11914
|
+
|
|
11915
|
+
class KitStatusLabelComponent {
|
|
11916
|
+
constructor() {
|
|
11917
|
+
this.color = input(KitStatusLabelColor.WHITE, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
11918
|
+
this.size = input(KitStatusLabelSize.SMALL, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
11223
11919
|
}
|
|
11224
|
-
|
|
11225
|
-
|
|
11226
|
-
|
|
11227
|
-
|
|
11920
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11921
|
+
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 }); }
|
|
11922
|
+
}
|
|
11923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitStatusLabelComponent, decorators: [{
|
|
11924
|
+
type: Component,
|
|
11925
|
+
args: [{ selector: 'kit-status-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
11926
|
+
KitTruncateTextComponent,
|
|
11927
|
+
NgClass,
|
|
11928
|
+
], 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"] }]
|
|
11929
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
11930
|
+
|
|
11931
|
+
class FetchUserIdentities {
|
|
11932
|
+
static { this.type = '[UserIdentities] Fetch'; }
|
|
11933
|
+
}
|
|
11934
|
+
class SetUserIdentity extends KitAbstractPayloadAction {
|
|
11935
|
+
static { this.type = '[UserIdentity] Set'; }
|
|
11936
|
+
}
|
|
11937
|
+
|
|
11938
|
+
class KitUserIdentitiesApiService {
|
|
11939
|
+
constructor() {
|
|
11940
|
+
this.httpClient = inject(HttpClient);
|
|
11941
|
+
this.basePath = inject(KIT_BASE_PATH);
|
|
11228
11942
|
}
|
|
11229
|
-
|
|
11230
|
-
|
|
11231
|
-
|
|
11232
|
-
this.newCreatedCards.set([]);
|
|
11233
|
-
this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined, activeId: undefined });
|
|
11234
|
-
this.shouldAppendFetchedData = true;
|
|
11235
|
-
this.showDetails = false;
|
|
11236
|
-
this.updateData();
|
|
11237
|
-
});
|
|
11943
|
+
getUserIdentities() {
|
|
11944
|
+
const url = `${this.basePath}/users/me/identities`;
|
|
11945
|
+
return this.httpClient.get(url);
|
|
11238
11946
|
}
|
|
11239
|
-
|
|
11240
|
-
const
|
|
11241
|
-
|
|
11242
|
-
this.kitTextboxComponent().writeValue(search);
|
|
11243
|
-
if (skip && skip > 0) {
|
|
11244
|
-
this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize(), search });
|
|
11245
|
-
this.dataState.set({ skip, take: this.pageSize(), search });
|
|
11246
|
-
}
|
|
11247
|
-
else {
|
|
11248
|
-
this.isLoading.set(false);
|
|
11249
|
-
this.kitTextboxComponent().changed.emit(search);
|
|
11250
|
-
}
|
|
11251
|
-
return;
|
|
11252
|
-
}
|
|
11253
|
-
if (skip !== undefined) {
|
|
11254
|
-
this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize() });
|
|
11255
|
-
this.dataState.set({ skip, take: this.pageSize() });
|
|
11256
|
-
return;
|
|
11257
|
-
}
|
|
11258
|
-
this.updateData();
|
|
11947
|
+
setCurrentIdentity(id) {
|
|
11948
|
+
const url = `${this.basePath}/users/me/identities/current`;
|
|
11949
|
+
return this.httpClient.put(url, { id });
|
|
11259
11950
|
}
|
|
11260
|
-
|
|
11261
|
-
|
|
11262
|
-
|
|
11263
|
-
|
|
11264
|
-
|
|
11265
|
-
|
|
11266
|
-
|
|
11267
|
-
]
|
|
11268
|
-
|
|
11269
|
-
|
|
11270
|
-
|
|
11271
|
-
|
|
11272
|
-
|
|
11273
|
-
|
|
11274
|
-
return;
|
|
11275
|
-
}
|
|
11276
|
-
}
|
|
11277
|
-
if (!this.showDetails && data.results.data.length) {
|
|
11278
|
-
this.selectNewLoadedCard(data.results.data[0]);
|
|
11279
|
-
}
|
|
11280
|
-
}
|
|
11281
|
-
this.isLoading.set(false);
|
|
11282
|
-
});
|
|
11951
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
11952
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, providedIn: 'root' }); }
|
|
11953
|
+
}
|
|
11954
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesApiService, decorators: [{
|
|
11955
|
+
type: Injectable,
|
|
11956
|
+
args: [{
|
|
11957
|
+
providedIn: 'root',
|
|
11958
|
+
}]
|
|
11959
|
+
}] });
|
|
11960
|
+
|
|
11961
|
+
const KIT_USER_IDENTITIES_STATE_TOKEN = new StateToken('userIdentities');
|
|
11962
|
+
let KitUserIdentitiesState = class KitUserIdentitiesState {
|
|
11963
|
+
constructor() {
|
|
11964
|
+
this.kitUserIdentitiesApiService = inject(KitUserIdentitiesApiService);
|
|
11283
11965
|
}
|
|
11284
|
-
|
|
11285
|
-
this.
|
|
11286
|
-
this.setQueryParamsToUrl(this.dataState());
|
|
11287
|
-
this.dataStateChanged.emit(this.dataState());
|
|
11966
|
+
fetchUserApplications(ctx) {
|
|
11967
|
+
return this.kitUserIdentitiesApiService.getUserIdentities().pipe(tap(userIdentities => ctx.setState(userIdentities)));
|
|
11288
11968
|
}
|
|
11289
|
-
|
|
11290
|
-
return
|
|
11969
|
+
setUserIdentity(ctx, action) {
|
|
11970
|
+
return this.kitUserIdentitiesApiService.setCurrentIdentity(action.payload);
|
|
11291
11971
|
}
|
|
11292
|
-
|
|
11293
|
-
|
|
11294
|
-
|
|
11295
|
-
|
|
11296
|
-
|
|
11297
|
-
|
|
11972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
11973
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState }); }
|
|
11974
|
+
};
|
|
11975
|
+
__decorate([
|
|
11976
|
+
Action(FetchUserIdentities)
|
|
11977
|
+
], KitUserIdentitiesState.prototype, "fetchUserApplications", null);
|
|
11978
|
+
__decorate([
|
|
11979
|
+
Action(SetUserIdentity)
|
|
11980
|
+
], KitUserIdentitiesState.prototype, "setUserIdentity", null);
|
|
11981
|
+
KitUserIdentitiesState = __decorate([
|
|
11982
|
+
State({
|
|
11983
|
+
name: KIT_USER_IDENTITIES_STATE_TOKEN,
|
|
11984
|
+
defaults: {
|
|
11985
|
+
data: [],
|
|
11986
|
+
total: 0,
|
|
11987
|
+
},
|
|
11988
|
+
})
|
|
11989
|
+
], KitUserIdentitiesState);
|
|
11990
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesState, decorators: [{
|
|
11991
|
+
type: Injectable
|
|
11992
|
+
}], propDecorators: { fetchUserApplications: [], setUserIdentity: [] } });
|
|
11993
|
+
|
|
11994
|
+
class KitUserIdentitiesSelector {
|
|
11995
|
+
constructor() {
|
|
11996
|
+
this.store = inject(Store);
|
|
11997
|
+
this.router = inject(Router);
|
|
11998
|
+
this.window = inject(WINDOW);
|
|
11999
|
+
this.userIdentities = this.store.selectSignal(KIT_USER_IDENTITIES_STATE_TOKEN);
|
|
12000
|
+
this.userIdentitiesDropdownItems = computed(() => this.userIdentities().data.map(item => ({
|
|
12001
|
+
text: item.alias,
|
|
12002
|
+
value: item.id,
|
|
12003
|
+
data: item,
|
|
12004
|
+
})), ...(ngDevMode ? [{ debugName: "userIdentitiesDropdownItems" }] : /* istanbul ignore next */ []));
|
|
12005
|
+
this.user = this.store.selectSignal(KIT_USER_STATE_TOKEN);
|
|
12006
|
+
this.currentIdentity = computed(() => this.userIdentities().data.find(item => item.id === this.user().data?.identityId) ?? null, ...(ngDevMode ? [{ debugName: "currentIdentity" }] : /* istanbul ignore next */ []));
|
|
12007
|
+
this.currentIdentityDropdownItem = computed(() => this.userIdentitiesDropdownItems()?.find(item => item.value === this.currentIdentity()?.id) ?? null, ...(ngDevMode ? [{ debugName: "currentIdentityDropdownItem" }] : /* istanbul ignore next */ []));
|
|
11298
12008
|
}
|
|
11299
|
-
|
|
11300
|
-
|
|
11301
|
-
const routeParams = this.activatedRoute.snapshot.firstChild?.params ?? this.activatedRoute.snapshot.params;
|
|
11302
|
-
return {
|
|
11303
|
-
skip: queryParams?.skip && Number(queryParams.skip),
|
|
11304
|
-
take: queryParams?.take && Number(queryParams.take),
|
|
11305
|
-
search: queryParams?.search && String(queryParams.search),
|
|
11306
|
-
activeId: routeParams?.id && String(routeParams.id),
|
|
11307
|
-
};
|
|
12009
|
+
ngOnInit() {
|
|
12010
|
+
this.fetchUserIdentities();
|
|
11308
12011
|
}
|
|
11309
|
-
|
|
11310
|
-
const
|
|
11311
|
-
|
|
11312
|
-
|
|
11313
|
-
|
|
12012
|
+
onIdentitySelect(item) {
|
|
12013
|
+
const currentIdentityId = this.currentIdentity()?.id;
|
|
12014
|
+
if (!currentIdentityId) {
|
|
12015
|
+
return;
|
|
12016
|
+
}
|
|
12017
|
+
this.store.dispatch(new SetUserIdentity(item.value)).subscribe(() => {
|
|
12018
|
+
if (this.user().data?.type !== item.data?.type) {
|
|
12019
|
+
this.window.location.href = '/';
|
|
12020
|
+
return;
|
|
11314
12021
|
}
|
|
11315
|
-
|
|
11316
|
-
|
|
11317
|
-
|
|
11318
|
-
relativeTo: this.activatedRoute,
|
|
11319
|
-
queryParams,
|
|
11320
|
-
queryParamsHandling: 'replace',
|
|
11321
|
-
});
|
|
11322
|
-
}
|
|
11323
|
-
navigateToCard(id) {
|
|
11324
|
-
this.router.navigate([id], {
|
|
11325
|
-
relativeTo: this.activatedRoute,
|
|
11326
|
-
queryParamsHandling: 'preserve',
|
|
12022
|
+
this.router.navigate([], { fragment: '' }).then(() => {
|
|
12023
|
+
this.window.location.reload();
|
|
12024
|
+
});
|
|
11327
12025
|
});
|
|
11328
12026
|
}
|
|
11329
|
-
|
|
11330
|
-
this.
|
|
11331
|
-
this.showDetails = true;
|
|
11332
|
-
this.onCardClick(card);
|
|
11333
|
-
requestAnimationFrame(() => {
|
|
11334
|
-
this.scrollToCardById(card.id.toString());
|
|
11335
|
-
});
|
|
12027
|
+
fetchUserIdentities() {
|
|
12028
|
+
this.store.dispatch(new FetchUserIdentities());
|
|
11336
12029
|
}
|
|
11337
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type:
|
|
11338
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type:
|
|
12030
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12031
|
+
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 }); }
|
|
11339
12032
|
}
|
|
11340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type:
|
|
12033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitUserIdentitiesSelector, decorators: [{
|
|
11341
12034
|
type: Component,
|
|
11342
|
-
args: [{ selector: 'kit-
|
|
11343
|
-
|
|
11344
|
-
|
|
11345
|
-
|
|
11346
|
-
|
|
11347
|
-
|
|
11348
|
-
|
|
11349
|
-
|
|
11350
|
-
|
|
11351
|
-
|
|
11352
|
-
|
|
12035
|
+
args: [{ selector: 'kit-user-identities-selector', imports: [
|
|
12036
|
+
KitDropdownComponent,
|
|
12037
|
+
], 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"] }]
|
|
12038
|
+
}] });
|
|
12039
|
+
|
|
12040
|
+
class KitUserIdentitiesInterceptor {
|
|
12041
|
+
constructor() {
|
|
12042
|
+
this.store = inject(Store);
|
|
12043
|
+
}
|
|
12044
|
+
intercept(req, next) {
|
|
12045
|
+
const user = this.store.selectSignal(KIT_USER_STATE_TOKEN);
|
|
12046
|
+
if (!user().data?.identityId) {
|
|
12047
|
+
return next.handle(req);
|
|
12048
|
+
}
|
|
12049
|
+
return next.handle(req.clone({
|
|
12050
|
+
setHeaders: {
|
|
12051
|
+
'X-Identity-Id': `${user().data?.identityId}`,
|
|
12052
|
+
},
|
|
12053
|
+
}));
|
|
12054
|
+
}
|
|
12055
|
+
}
|
|
11353
12056
|
|
|
11354
12057
|
class KitListComponent {
|
|
11355
12058
|
constructor() {
|
|
@@ -11564,17 +12267,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
11564
12267
|
type: Injectable
|
|
11565
12268
|
}] });
|
|
11566
12269
|
|
|
11567
|
-
const kitBuildHttpParams = (obj) => {
|
|
11568
|
-
let params = new HttpParams();
|
|
11569
|
-
Object.entries(obj).forEach(([key, value,]) => {
|
|
11570
|
-
if (value === undefined || value === null) {
|
|
11571
|
-
return;
|
|
11572
|
-
}
|
|
11573
|
-
params = params.set(key, String(value));
|
|
11574
|
-
});
|
|
11575
|
-
return params;
|
|
11576
|
-
};
|
|
11577
|
-
|
|
11578
12270
|
class KitApiTokenMaintenanceService {
|
|
11579
12271
|
constructor() {
|
|
11580
12272
|
this.httpClient = inject(HttpClient);
|
|
@@ -11797,7 +12489,7 @@ class KitApiTokenMaintenanceFormComponent {
|
|
|
11797
12489
|
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: [
|
|
11798
12490
|
KitFormErrors,
|
|
11799
12491
|
KitClipboardService,
|
|
11800
|
-
], 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 }); }
|
|
12492
|
+
], 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 }); }
|
|
11801
12493
|
}
|
|
11802
12494
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitApiTokenMaintenanceFormComponent, decorators: [{
|
|
11803
12495
|
type: Component,
|
|
@@ -12113,5 +12805,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
12113
12805
|
* Generated bundle index. Do not edit.
|
|
12114
12806
|
*/
|
|
12115
12807
|
|
|
12116
|
-
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 };
|
|
12808
|
+
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 };
|
|
12117
12809
|
//# sourceMappingURL=indigina-ui-kit.mjs.map
|