@indigina/ui-kit 1.1.305 → 1.1.306

package/fesm2022/indigina-ui-kit.mjs

@@ -9757,7 +9757,7 @@ class KitCardDetailsComponent {
         this.isLoading.set(true);
         this.cardData.set(this.cardData().filter(card => card.id.toString() !== cardId.toString()));
         this.total.set(this.total() - 1);
-        const skip = (this.dataState().skip ?? 0) + 1;
+        const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0);
         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 => ({
@@ -9767,12 +9767,12 @@ class KitCardDetailsComponent {
             this.isLoading.set(false);
             return;
         }
-        if (skip >= this.total()) {
+        if (loadedCards >= this.total()) {
             this.isLoading.set(false);
             return;
         }
         this.shouldAppendFetchedData = true;
-        this.dataStateChanged.emit({ skip, take: 1, filters: this.skipNewCreatedCardFilter, search: this.dataState().search });
+        this.dataStateChanged.emit({ skip: loadedCards - 1, take: 1, filters: this.skipNewCreatedCardFilter, search: this.dataState().search });
     }
     updateSpecificCardData(cardData) {
         this.cardData.set(this.cardData().map(card => {
@@ -9782,11 +9782,16 @@ class KitCardDetailsComponent {
             return 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' });
+    }
     initSearchSubscription() {
         outputToObservable(this.kitTextboxComponent().changed).pipe(filter(() => !this.isLoading()), debounceTime(500), takeUntilDestroyed(this.destroyRef), map((value) => value.trim())).subscribe((searchValue) => {
             this.cardData.set([]);
             this.newCreatedCards.set([]);
-            this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined });
+            this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined, activeId: undefined });
             this.shouldAppendFetchedData = true;
             this.updateData();
         });
@@ -9813,8 +9818,7 @@ class KitCardDetailsComponent {
         this.updateData();
     }
     initCardDataSubscription() {
-        const { activeId } = this.getStateFromUrl();
-        let handledInitialActiveId = false;
+        let { activeId } = this.getStateFromUrl();
         this.cardData$().pipe(takeUntilDestroyed(this.destroyRef), filter(({ loading }) => !loading)).subscribe(data => {
             if (this.shouldAppendFetchedData) {
                 this.cardData.set([
@@ -9824,15 +9828,22 @@ class KitCardDetailsComponent {
                 this.total.set(data.results.total + this.newCreatedCards().length);
                 this.shouldAppendFetchedData = false;
             }
-            if (!handledInitialActiveId
-                && activeId
-                && !this.dataState().activeId
-                && this.cardData().some(item => item.id.toString() === activeId)) {
-                this.onCardClick(activeId);
-                requestAnimationFrame(() => {
-                    this.scrollToCardById(activeId);
-                    handledInitialActiveId = true;
-                });
+            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);
         });
@@ -9842,11 +9853,6 @@ class KitCardDetailsComponent {
         this.setStateToUrl(this.dataState());
         this.dataStateChanged.emit(this.dataState());
     }
-    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' });
-    }
     getStateFromUrl() {
         const params = this.activatedRoute.snapshot.queryParams;
         return {
@@ -9871,7 +9877,7 @@ class KitCardDetailsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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) {\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.1.3", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
             type: Component,
@@ -9884,7 +9890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         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) {\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"] }]
+                    ], 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"] }]
         }] });
 
 class KitListComponent {