@indigina/ui-kit 1.1.506 → 1.1.507

package/fesm2022/indigina-ui-kit.mjs

@@ -7688,192 +7688,187 @@ class KitCardDetailsComponent {
         this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
         this.cardData = signal([], ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
         this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
-        this.dataState = signal({
-            skip: 0,
-            take: 0,
-        }, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+        this.dataState = signal({ skip: 0, take: 0 }, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
         this.newCreatedCards = signal([], ...(ngDevMode ? [{ debugName: "newCreatedCards" }] : /* istanbul ignore next */ []));
-        this.skipNewCreatedCardFilter = computed(() => {
-            return this.newCreatedCards().length ? {
+        this.showDetails = signal(false, ...(ngDevMode ? [{ debugName: "showDetails" }] : /* istanbul ignore next */ []));
+        this.skipNewCreatedCardFilter = computed(() => this.newCreatedCards().length
+            ? {
                 logic: KitFilterLogic.AND,
                 filters: this.newCreatedCards().map(card => ({
                     field: 'id',
                     operator: KitFilterOperator.NEQ,
                     value: card.id,
                 })),
-            } : {};
-        }, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : /* istanbul ignore next */ []));
-        this.shouldAppendFetchedData = true;
-        this.showDetails = false;
+            }
+            : {}, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : /* istanbul ignore next */ []));
+        this.shouldProcessNextData = false;
     }
     ngOnInit() {
-        this.dataState.update(state => ({
-            ...state,
-            take: this.pageSize(),
-        }));
-        this.initCardDataSubscription();
-        this.initSearchSubscription();
-        this.initStateFromUrl();
+        this.dataState.update(state => ({ ...state, take: this.pageSize() }));
+        this.initRouteListener();
+        this.initDataListener();
+        this.initSearchListener();
+        this.restoreStateFromUrl();
     }
     loadMoreData() {
-        this.shouldAppendFetchedData = true;
-        this.dataState.update(state => ({
-            ...state,
-            skip: (this.dataState()?.skip ?? 0) + this.pageSize(),
-            take: this.pageSize(),
-        }));
-        this.updateData();
+        this.dataState.update(state => ({ ...state, skip: (state.skip ?? 0) + this.pageSize(), take: this.pageSize() }));
+        this.fetchData();
     }
     onCardClick(card) {
-        const normalizedId = this.normalizeCardId(card.id);
-        this.dataState.update(state => ({ ...state, activeId: normalizedId }));
-        this.navigateToCard(normalizedId);
-        this.cardClicked.emit({ ...card, id: normalizedId });
+        this.selectCard(card, true);
     }
     appendCard(card, navigateToCard = true) {
-        this.cardData.set([
-            ...this.cardData(),
+        this.cardData.update(cards => [
+            ...cards,
             card,
         ]);
-        this.newCreatedCards.set([
-            ...this.newCreatedCards(),
+        this.newCreatedCards.update(cards => [
+            ...cards,
             card,
         ]);
-        this.dataState.update(state => ({
-            ...state,
-            filters: this.skipNewCreatedCardFilter(),
-        }));
-        this.total.set(this.total() + 1);
+        this.dataState.update(state => ({ ...state, filters: this.skipNewCreatedCardFilter() }));
+        this.total.update(total => total + 1);
         if (navigateToCard) {
-            this.onCardClick(card);
-            this.showDetails = true;
+            this.selectCard(card, true);
         }
     }
     deleteCard(cardId) {
         this.isLoading.set(true);
-        const normalizedId = this.normalizeCardId(cardId);
-        const deletedIndex = this.cardData().findIndex(card => this.normalizeCardId(card.id) === normalizedId);
-        this.cardData.set(this.cardData().filter(card => this.normalizeCardId(card.id) !== normalizedId));
-        this.total.set(this.total() - 1);
-        const remainingCards = this.cardData();
-        const nextCard = remainingCards.length ? remainingCards[deletedIndex] ?? remainingCards[deletedIndex - 1] : null;
+        const id = String(cardId);
+        const deletedIndex = this.cardData().findIndex(card => String(card.id) === id);
+        this.cardData.update(cards => cards.filter(card => String(card.id) !== id));
+        this.total.update(total => total - 1);
+        const next = this.cardData()[deletedIndex] ?? this.cardData()[deletedIndex - 1] ?? null;
         if (!this.cardData().length) {
-            this.showDetails = false;
+            this.showDetails.set(false);
         }
-        if (this.newCreatedCards().some(card => this.normalizeCardId(card.id) === normalizedId)) {
-            this.removeFromNewCreatedCards(normalizedId);
+        if (this.newCreatedCards().some(card => String(card.id) === id)) {
+            this.newCreatedCards.update(cards => cards.filter(card => String(card.id) !== id));
+            this.dataState.update(state => ({ ...state, filters: this.skipNewCreatedCardFilter() }));
             this.isLoading.set(false);
-            if (nextCard) {
-                this.onCardClick(nextCard);
+            if (next) {
+                this.selectCard(next, true);
             }
             return;
         }
-        const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
-        if (loadedCards >= this.total()) {
+        const loadedCount = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
+        if (loadedCount >= this.total()) {
             this.isLoading.set(false);
-            if (nextCard) {
-                this.onCardClick(nextCard);
+            if (next) {
+                this.selectCard(next, true);
             }
             return;
         }
-        this.showDetails = false;
-        this.shouldAppendFetchedData = true;
+        this.showDetails.set(false);
+        this.shouldProcessNextData = true;
+        this.navigateToParent();
         this.dataStateChanged.emit({
-            skip: loadedCards,
+            skip: loadedCount,
             take: 1,
             filters: this.skipNewCreatedCardFilter(),
             search: this.dataState().search,
         });
     }
     updateSpecificCardData(cardData) {
-        this.cardData.set(this.cardData().map(card => this.normalizeCardId(card.id) === this.normalizeCardId(cardData.id) ? cardData : card));
+        this.cardData.update(cards => cards.map(card => String(card.id) === String(cardData.id) ? cardData : card));
     }
     scrollToCardById(id) {
-        const cardsEl = this.host.nativeElement.querySelector('.kit-card-details .cards');
-        const el = cardsEl?.querySelector(`[data-card-id="${id}"]`) ?? null;
-        el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+        this.host.nativeElement
+            .querySelector('.kit-card-details .cards')
+            ?.querySelector(`[data-card-id="${id}"]`)
+            ?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+    }
+    initDataListener() {
+        this.cardData$().pipe(filter(({ loading }) => !loading), takeUntilDestroyed(this.destroyRef)).subscribe(({ results }) => {
+            if (!this.shouldProcessNextData) {
+                return;
+            }
+            this.shouldProcessNextData = false;
+            this.cardData.update(cards => [
+                ...cards,
+                ...results.data,
+            ]);
+            this.total.set(results.total + this.newCreatedCards().length);
+            this.isLoading.set(false);
+            const activeId = this.getActiveIdFromRoute();
+            if (!this.selectCardByRouteId(activeId) && !this.showDetails() && results.data.length) {
+                this.selectCard(results.data[0], true);
+                requestAnimationFrame(() => this.scrollToCardById(String(results.data[0].id)));
+            }
+        });
+    }
+    initRouteListener() {
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd), startWith(null), map(() => this.getActiveIdFromRoute()), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(activeId => this.selectCardByRouteId(activeId));
     }
-    initSearchSubscription() {
-        outputToObservable(this.kitTextboxComponent().changed).pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef), map((value) => value.trim())).subscribe((searchValue) => {
+    initSearchListener() {
+        outputToObservable(this.kitTextboxComponent().changed).pipe(debounceTime(500), map(value => value.trim()), takeUntilDestroyed(this.destroyRef)).subscribe(search => {
             this.cardData.set([]);
             this.newCreatedCards.set([]);
-            this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined, activeId: undefined });
-            this.shouldAppendFetchedData = true;
-            this.showDetails = false;
-            this.updateData();
+            this.showDetails.set(false);
+            this.dataState.set({ skip: 0, take: this.pageSize(), search: search || undefined });
+            this.fetchData();
         });
     }
-    initStateFromUrl() {
-        const { skip, search } = this.getStateFromUrl();
+    restoreStateFromUrl() {
+        const params = this.router.routerState.snapshot.root.queryParams;
+        const skip = params.skip ? Number(params.skip) : 0;
+        const search = params.search ? String(params.search) : undefined;
         if (search) {
             this.kitTextboxComponent().writeValue(search);
-            if (skip && skip > 0) {
-                this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize(), search });
-                this.dataState.set({ skip, take: this.pageSize(), search });
-            }
-            else {
-                this.isLoading.set(false);
-                this.kitTextboxComponent().changed.emit(search);
-            }
-            return;
         }
-        if (skip !== undefined) {
-            this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize() });
-            this.dataState.set({ skip, take: this.pageSize() });
+        if (skip > 0 || search) {
+            this.dataState.set({ skip, take: this.pageSize(), search });
+            this.fetchData({ skip: 0, take: skip + this.pageSize(), search }, false);
             return;
         }
-        this.updateData();
-    }
-    initCardDataSubscription() {
-        const { activeId } = this.getStateFromUrl();
-        this.cardData$().pipe(takeUntilDestroyed(this.destroyRef), filter(({ loading }) => !loading)).subscribe(data => {
-            if (this.shouldAppendFetchedData) {
-                this.cardData.set([
-                    ...this.cardData(),
-                    ...data.results.data,
-                ]);
-                this.total.set(data.results.total + this.newCreatedCards().length);
-                this.shouldAppendFetchedData = false;
-                if (activeId && !this.dataState().activeId) {
-                    const activeCard = this.cardData().find(item => this.normalizeCardId(item.id) === activeId);
-                    if (activeCard) {
-                        this.selectNewLoadedCard(activeCard);
-                        return;
-                    }
-                }
-                if (!this.showDetails && data.results.data.length) {
-                    this.selectNewLoadedCard(data.results.data[0]);
-                }
-            }
-            this.isLoading.set(false);
-        });
+        this.fetchData();
     }
-    updateData() {
+    fetchData(emitState, writeToUrl = true) {
         this.isLoading.set(true);
-        this.setQueryParamsToUrl(this.dataState());
-        this.dataStateChanged.emit(this.dataState());
+        this.shouldProcessNextData = true;
+        if (writeToUrl) {
+            this.writeQueryParamsToUrl(this.dataState());
+        }
+        this.dataStateChanged.emit(emitState ?? this.dataState());
     }
-    normalizeCardId(id) {
-        return id.toString();
+    selectCard(card, navigate) {
+        const id = String(card.id);
+        this.isLoading.set(false);
+        this.showDetails.set(true);
+        this.dataState.update(state => ({ ...state, activeId: id }));
+        if (navigate) {
+            this.router.navigate([id], { relativeTo: this.activatedRoute, queryParamsHandling: 'preserve' });
+        }
+        this.cardClicked.emit({ ...card, id });
     }
-    removeFromNewCreatedCards(cardId) {
-        this.newCreatedCards.set(this.newCreatedCards().filter(card => this.normalizeCardId(card.id) !== cardId));
-        this.dataState.update(state => ({
-            ...state,
-            filters: this.skipNewCreatedCardFilter(),
-        }));
+    selectCardByRouteId(activeId) {
+        if (!activeId) {
+            return false;
+        }
+        if (this.dataState().activeId === activeId) {
+            this.showDetails.set(true);
+            return true;
+        }
+        const card = this.cardData().find(card => String(card.id) === activeId);
+        if (!card) {
+            return false;
+        }
+        this.selectCard(card, false);
+        requestAnimationFrame(() => this.scrollToCardById(activeId));
+        return true;
     }
-    getStateFromUrl() {
-        const queryParams = this.activatedRoute.snapshot.queryParams;
-        const routeParams = this.activatedRoute.snapshot.firstChild?.params ?? this.activatedRoute.snapshot.params;
-        return {
-            skip: queryParams?.skip && Number(queryParams.skip),
-            take: queryParams?.take && Number(queryParams.take),
-            search: queryParams?.search && String(queryParams.search),
-            activeId: routeParams?.id && String(routeParams.id),
-        };
+    getActiveIdFromRoute() {
+        let snapshot = this.activatedRoute.snapshot;
+        let activeId;
+        while (snapshot) {
+            if (snapshot.params.id !== undefined) {
+                activeId = String(snapshot.params.id);
+            }
+            snapshot = snapshot.firstChild;
+        }
+        return activeId;
     }
-    setQueryParamsToUrl(state) {
+    writeQueryParamsToUrl(state) {
         const queryParams = Object.keys(state).reduce((acc, key) => {
             const val = state[key];
             if (val !== undefined && val !== '' && key !== 'filters' && key !== 'activeId') {
@@ -7881,41 +7876,25 @@ class KitCardDetailsComponent {
             }
             return acc;
         }, {});
-        this.router.navigate([], {
-            relativeTo: this.activatedRoute,
-            queryParams,
-            queryParamsHandling: 'replace',
-        });
-    }
-    navigateToCard(id) {
-        this.router.navigate([id], {
-            relativeTo: this.activatedRoute,
-            queryParamsHandling: 'preserve',
-        });
+        this.router.navigate([], { relativeTo: this.activatedRoute, queryParams, queryParamsHandling: 'replace' });
     }
-    selectNewLoadedCard(card) {
-        this.isLoading.set(false);
-        this.showDetails = true;
-        this.onCardClick(card);
-        requestAnimationFrame(() => {
-            this.scrollToCardById(card.id.toString());
-        });
+    navigateToParent() {
+        this.router.navigate(['./'], { relativeTo: this.activatedRoute, queryParamsHandling: 'preserve' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }, cardSkeletonConfig: { classPropertyName: "cardSkeletonConfig", publicName: "cardSkeletonConfig", 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 (cardSkeletonConfig(); 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 }); }
+    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 }, cardSkeletonConfig: { classPropertyName: "cardSkeletonConfig", publicName: "cardSkeletonConfig", 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 (isLoading() && cardData().length === 0) {\n          @if (cardSkeletonConfig(); as config) {\n            @for (_ of [].constructor(config.itemsCount); track $index) {\n              <kit-skeleton [width]=\"'100%'\"\n                            [height]=\"config.itemHeight\" />\n            }\n          }\n        } @else 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 (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      </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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-card-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
+                        NgTemplateOutlet,
                         KitSkeletonComponent,
                         KitEmptySectionComponent,
                         KitButtonComponent,
                         TranslatePipe,
                         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            @if (cardSkeletonConfig(); 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"] }]
+                    ], 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 (isLoading() && cardData().length === 0) {\n          @if (cardSkeletonConfig(); as config) {\n            @for (_ of [].constructor(config.itemsCount); track $index) {\n              <kit-skeleton [width]=\"'100%'\"\n                            [height]=\"config.itemHeight\" />\n            }\n          }\n        } @else 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 (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      </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"] }]
         }], 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 }] }], cardSkeletonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardSkeletonConfig", 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 }] }] } });
 
 class KitAbstractPayloadAction {