@indigina/ui-kit 1.1.336 → 1.1.338

package/fesm2022/indigina-ui-kit.mjs

@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, InjectionToken, inject, Injectable, effect, ElementRef, NgZone, Renderer2, Directive, model, output, viewChild, forwardRef, ViewChild, signal, HostListener, TemplateRef, ContentChild, computed, NgModule, RendererFactory2, DOCUMENT, ViewContainerRef, DestroyRef, contentChildren, ContentChildren, viewChildren, Pipe, contentChild, Injector, runInInjectionContext } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { map, catchError, EMPTY, forkJoin, BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, combineLatest, tap, debounceTime, distinctUntilChanged, take, switchMap, of } from 'rxjs';
 import * as i1$1 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
@@ -368,7 +368,10 @@ class KitSvgSpriteService {
     }
     loadIconSet(url) {
         const jsonUrl = `${url}/icons.json`;
-        this.httpClient.get(jsonUrl).pipe(map(ids => ids.map(id => `${url}/${id}.svg`)), catchError(err => {
+        const headers = new HttpHeaders({
+            'Cache-Control': 'no-cache',
+        });
+        this.httpClient.get(jsonUrl, { headers }).pipe(map(ids => ids.map(id => `${url}/${id}.svg`)), catchError(err => {
             console.error('Failed to load sprite configuration:', err);
             return EMPTY;
         })).subscribe(urls => urls.length && this.loadIcons(urls));
@@ -878,6 +881,7 @@ class KitTextboxActionsComponent {
         this.formControl = new FormControl('');
         this.validationErrors = signal([], ...(ngDevMode ? [{ debugName: "validationErrors" }] : []));
         this.documentClickListener = null;
+        this.selectListener = null;
         effect(() => {
             const validators = this.validators();
             this.formControl.setValidators(validators);
@@ -891,9 +895,11 @@ class KitTextboxActionsComponent {
             const showActions = this.showActions();
             if (showActions) {
                 this.addDocumentClickListener();
+                this.addSelectListener();
             }
             else {
                 this.removeDocumentClickListener();
+                this.removeSelectListener();
             }
         });
         this.formControl.valueChanges.subscribe(() => {
@@ -905,6 +911,7 @@ class KitTextboxActionsComponent {
     }
     ngOnDestroy() {
         this.removeDocumentClickListener();
+        this.removeSelectListener();
     }
     updateValidationErrors() {
         this.validationErrors.set(this.kitFormErrors.getErrors(this.formControl));
@@ -944,6 +951,37 @@ class KitTextboxActionsComponent {
             this.documentClickListener = null;
         }
     }
+    addSelectListener() {
+        if (this.selectListener) {
+            return;
+        }
+        this.selectListener = (event) => this.onTextSelect(event);
+        const textbox = this.elementRef.nativeElement.querySelector('.textbox');
+        const inputElement = textbox?.querySelector('input');
+        if (inputElement) {
+            inputElement.addEventListener('select', this.selectListener);
+            inputElement.addEventListener('mouseup', this.selectListener);
+        }
+    }
+    removeSelectListener() {
+        if (this.selectListener) {
+            const textbox = this.elementRef.nativeElement.querySelector('.textbox');
+            const inputElement = textbox?.querySelector('input');
+            if (inputElement) {
+                inputElement.removeEventListener('select', this.selectListener);
+                inputElement.removeEventListener('mouseup', this.selectListener);
+            }
+            this.selectListener = null;
+        }
+    }
+    onTextSelect(event) {
+        const inputElement = event.target;
+        const selectedText = inputElement.value.substring(inputElement.selectionStart || 0, inputElement.selectionEnd || 0);
+        if (selectedText.length > 0) {
+            this.isTextboxFocused.set(true);
+            this.formControl.markAsTouched();
+        }
+    }
     documentClick(event) {
         const target = event.target;
         const textbox = this.elementRef.nativeElement.querySelector('.textbox');
@@ -10276,7 +10314,7 @@ class KitCardDetailsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 } }, 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            @for (skeleton of [1, 2, 3]; track $index) {\n              <kit-skeleton [width]=\"'100%'\" [height]=\"'200px'\"/>\n            }\n          } @else {\n            @if (cardData().length === 0 && newCreatedCards().length === 0) {\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 (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    <div class=\"details\">\n      @if (showDetails) {\n        <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n      }\n    </div>\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.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"], 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 } }, 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            @for (skeleton of [1, 2, 3]; track $index) {\n              <kit-skeleton [width]=\"'100%'\" [height]=\"'200px'\"/>\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 (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    <div class=\"details\">\n      @if (showDetails) {\n        <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n      }\n    </div>\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.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"], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
             type: Component,
@@ -10289,7 +10327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         KitTextboxComponent,
                         NgTemplateOutlet,
                         KitEntityTitleComponent,
-                    ], 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            @for (skeleton of [1, 2, 3]; track $index) {\n              <kit-skeleton [width]=\"'100%'\" [height]=\"'200px'\"/>\n            }\n          } @else {\n            @if (cardData().length === 0 && newCreatedCards().length === 0) {\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 (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    <div class=\"details\">\n      @if (showDetails) {\n        <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n      }\n    </div>\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.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"] }]
+                    ], 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            @for (skeleton of [1, 2, 3]; track $index) {\n              <kit-skeleton [width]=\"'100%'\" [height]=\"'200px'\"/>\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 (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    <div class=\"details\">\n      @if (showDetails) {\n        <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n      }\n    </div>\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.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"] }]
         }], 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 }] }], 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 }] }] } });
 
 class KitListComponent {