@indigina/ui-kit 1.1.330 → 1.1.331

package/fesm2022/indigina-ui-kit.mjs

@@ -10031,6 +10031,7 @@ class KitCardDetailsComponent {
         this.kitTextboxComponent = viewChild.required(KitTextboxComponent);
         this.cardElement = contentChild('cardElement', ...(ngDevMode ? [{ debugName: "cardElement" }] : []));
         this.headerActions = contentChild('headerActions', ...(ngDevMode ? [{ debugName: "headerActions" }] : []));
+        this.details = contentChild('details', ...(ngDevMode ? [{ debugName: "details" }] : []));
         this.kitSvgIcon = KitSvgIcon;
         this.kitButtonType = KitButtonType;
         this.kitButtonKind = KitButtonKind;
@@ -10044,6 +10045,16 @@ class KitCardDetailsComponent {
             take: 0,
         }, ...(ngDevMode ? [{ debugName: "dataState" }] : []));
         this.newCreatedCards = signal([], ...(ngDevMode ? [{ debugName: "newCreatedCards" }] : []));
+        this.skipNewCreatedCardFilter = computed(() => {
+            return this.newCreatedCards().length ? {
+                logic: KitFilterLogic.AND,
+                filters: this.newCreatedCards().map(card => ({
+                    field: 'id',
+                    operator: KitFilterOperator.NEQ,
+                    value: card.id,
+                })),
+            } : {};
+        }, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : []));
         this.shouldAppendFetchedData = true;
     }
     ngOnInit() {
@@ -10055,16 +10066,6 @@ class KitCardDetailsComponent {
         this.initSearchSubscription();
         this.initStateFromUrl();
     }
-    get skipNewCreatedCardFilter() {
-        return this.newCreatedCards().length ? {
-            logic: KitFilterLogic.AND,
-            filters: this.newCreatedCards().map(card => ({
-                field: 'id',
-                operator: KitFilterOperator.NEQ,
-                value: card.id,
-            })),
-        } : {};
-    }
     loadMoreData() {
         this.shouldAppendFetchedData = true;
         this.dataState.update(state => ({
@@ -10074,54 +10075,50 @@ class KitCardDetailsComponent {
         }));
         this.updateData();
     }
-    onCardClick(id) {
-        this.dataState.update(state => ({ ...state, activeId: id.toString() }));
-        this.setStateToUrl(this.dataState());
-        this.cardClicked.emit({ id: id.toString() });
+    onCardClick(card) {
+        const normalizedId = this.normalizeCardId(card.id);
+        this.dataState.update(state => ({ ...state, activeId: normalizedId }));
+        this.navigateToCard(normalizedId);
+        this.cardClicked.emit({ ...card, id: normalizedId });
     }
-    appendCards(cards) {
+    appendCard(card, navigateToCard = true) {
         this.cardData.set([
             ...this.cardData(),
-            ...cards,
+            card,
         ]);
         this.newCreatedCards.set([
             ...this.newCreatedCards(),
-            ...cards,
+            card,
         ]);
         this.dataState.update(state => ({
             ...state,
-            filters: this.skipNewCreatedCardFilter,
+            filters: this.skipNewCreatedCardFilter(),
         }));
-        this.total.set(this.total() + cards.length);
+        this.total.set(this.total() + 1);
+        if (navigateToCard) {
+            this.onCardClick(card);
+        }
     }
     deleteCard(cardId) {
         this.isLoading.set(true);
-        this.cardData.set(this.cardData().filter(card => card.id.toString() !== cardId.toString()));
+        const normalizedId = this.normalizeCardId(cardId);
+        this.cardData.set(this.cardData().filter(card => this.normalizeCardId(card.id) !== normalizedId));
         this.total.set(this.total() - 1);
-        const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
-        if (this.newCreatedCards().some(card => card.id.toString() === cardId.toString())) {
-            this.newCreatedCards.set(this.newCreatedCards().filter(card => card.id.toString() !== cardId.toString()));
-            this.dataState.update(state => ({
-                ...state,
-                filters: this.skipNewCreatedCardFilter,
-            }));
+        if (this.newCreatedCards().some(card => this.normalizeCardId(card.id) === normalizedId)) {
+            this.removeFromNewCreatedCards(normalizedId);
             this.isLoading.set(false);
             return;
         }
+        const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
         if (loadedCards >= this.total()) {
             this.isLoading.set(false);
             return;
         }
         this.shouldAppendFetchedData = true;
-        this.dataStateChanged.emit({ skip: loadedCards, take: 1, filters: this.skipNewCreatedCardFilter, search: this.dataState().search });
+        this.dataStateChanged.emit({ skip: loadedCards, take: 1, filters: this.skipNewCreatedCardFilter(), search: this.dataState().search });
     }
     updateSpecificCardData(cardData) {
-        this.cardData.set(this.cardData().map(card => {
-            if (card.id.toString() === cardData.id.toString()) {
-                return cardData;
-            }
-            return card;
-        }));
+        this.cardData.set(this.cardData().map(card => this.normalizeCardId(card.id) === this.normalizeCardId(cardData.id) ? cardData : card));
     }
     scrollToCardById(id) {
         const cardsEl = this.host.nativeElement.querySelector('.kit-card-details .cards');
@@ -10159,7 +10156,7 @@ class KitCardDetailsComponent {
         this.updateData();
     }
     initCardDataSubscription() {
-        let { activeId } = this.getStateFromUrl();
+        this.getStateFromUrl();
         this.cardData$().pipe(takeUntilDestroyed(this.destroyRef), filter(({ loading }) => !loading)).subscribe(data => {
             if (this.shouldAppendFetchedData) {
                 this.cardData.set([
@@ -10169,44 +10166,38 @@ class KitCardDetailsComponent {
                 this.total.set(data.results.total + this.newCreatedCards().length);
                 this.shouldAppendFetchedData = false;
             }
-            if (!activeId && this.cardData()?.[0]) {
-                activeId = this.cardData()[0].id.toString();
-            }
-            if (activeId) {
-                if (!this.dataState().activeId && this.cardData().length) {
-                    activeId = this.cardData().some(item => item.id.toString() === activeId)
-                        ? activeId : this.cardData()[0].id.toString();
-                    this.onCardClick(activeId);
-                    this.isLoading.set(false);
-                    requestAnimationFrame(() => {
-                        activeId && this.scrollToCardById(activeId);
-                    });
-                }
-                else {
-                    activeId = this.dataState().activeId;
-                }
-            }
             this.isLoading.set(false);
         });
     }
     updateData() {
         this.isLoading.set(true);
-        this.setStateToUrl(this.dataState());
+        this.setQueryParamsToUrl(this.dataState());
         this.dataStateChanged.emit(this.dataState());
     }
+    normalizeCardId(id) {
+        return id.toString();
+    }
+    removeFromNewCreatedCards(cardId) {
+        this.newCreatedCards.set(this.newCreatedCards().filter(card => this.normalizeCardId(card.id) !== cardId));
+        this.dataState.update(state => ({
+            ...state,
+            filters: this.skipNewCreatedCardFilter(),
+        }));
+    }
     getStateFromUrl() {
-        const params = this.activatedRoute.snapshot.queryParams;
+        const queryParams = this.activatedRoute.snapshot.queryParams;
+        const routeParams = this.activatedRoute.snapshot.firstChild?.params ?? this.activatedRoute.snapshot.params;
         return {
-            skip: params?.skip && Number(params.skip),
-            take: params?.take && Number(params.take),
-            search: params?.search && String(params.search),
-            activeId: params?.activeId && String(params.activeId),
+            skip: queryParams?.skip && Number(queryParams.skip),
+            take: queryParams?.take && Number(queryParams.take),
+            search: queryParams?.search && String(queryParams.search),
+            activeId: routeParams?.id && String(routeParams.id),
         };
     }
-    setStateToUrl(state) {
+    setQueryParamsToUrl(state) {
         const queryParams = Object.keys(state).reduce((acc, key) => {
             const val = state[key];
-            if (val !== undefined && key !== 'filters') {
+            if (val !== undefined && key !== 'filters' && key !== 'activeId') {
                 acc[key] = val;
             }
             return acc;
@@ -10214,11 +10205,17 @@ class KitCardDetailsComponent {
         this.router.navigate([], {
             relativeTo: this.activatedRoute,
             queryParams,
-            queryParamsHandling: 'replace',
+            queryParamsHandling: 'merge',
+        });
+    }
+    navigateToCard(id) {
+        this.router.navigate([id], {
+            relativeTo: this.activatedRoute,
+            queryParamsHandling: 'preserve',
         });
     }
     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 }], 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                    [disabled]=\"isLoading()\"\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 (cards.results.data?.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.id)\">\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      <ng-content select=\"[details]\"/>\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:30%}.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 .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}\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"], 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                    [disabled]=\"isLoading()\"\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 (cards.results.data?.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      <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\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"], 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,
@@ -10231,8 +10228,8 @@ 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                    [disabled]=\"isLoading()\"\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 (cards.results.data?.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.id)\">\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      <ng-content select=\"[details]\"/>\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:30%}.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 .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}\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 }] }] } });
+                    ], 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                    [disabled]=\"isLoading()\"\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 (cards.results.data?.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      <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\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 {
     constructor() {