@indigina/ui-kit 1.1.268 → 1.1.270
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/indigina-ui-kit.mjs +23 -11
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/index.d.ts +5 -4
- package/package.json +1 -1
|
@@ -8412,7 +8412,7 @@ class KitGridSearchComponent {
|
|
|
8412
8412
|
this.gridState$ = this.store.select(KIT_GRID_STATE_TOKEN);
|
|
8413
8413
|
}
|
|
8414
8414
|
ngAfterViewInit() {
|
|
8415
|
-
this.kitSearchBarComponent().changed.pipe(debounceTime(500), switchMap(value => value && this.store.dispatch(new SetGridSearch(value)) || this.store.dispatch(new RemoveGridSearch()))).subscribe(() => {
|
|
8415
|
+
this.kitSearchBarComponent().changed.pipe(debounceTime(500), map(value => value.trim()), switchMap(value => value && this.store.dispatch(new SetGridSearch(value)) || this.store.dispatch(new RemoveGridSearch()))).subscribe(() => {
|
|
8416
8416
|
this.kitGridUrlStateService.setGridStateToUrl(this.store.selectSnapshot(KIT_GRID_STATE_TOKEN));
|
|
8417
8417
|
});
|
|
8418
8418
|
}
|
|
@@ -9262,9 +9262,9 @@ class KitCardDetailsComponent {
|
|
|
9262
9262
|
this.destroyRef = inject(DestroyRef);
|
|
9263
9263
|
this.cardData$ = input.required(...(ngDevMode ? [{ debugName: "cardData$" }] : []));
|
|
9264
9264
|
this.pageSize = input.required(...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
9265
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
9265
9266
|
this.dataStateChanged = output();
|
|
9266
9267
|
this.cardClicked = output();
|
|
9267
|
-
this.searchValueChanged = output();
|
|
9268
9268
|
this.kitTextboxComponent = viewChild.required(KitTextboxComponent);
|
|
9269
9269
|
this.cardElement = contentChild('cardElement', ...(ngDevMode ? [{ debugName: "cardElement" }] : []));
|
|
9270
9270
|
this.kitSvgIcon = KitSvgIcon;
|
|
@@ -9278,6 +9278,7 @@ class KitCardDetailsComponent {
|
|
|
9278
9278
|
skip: 0,
|
|
9279
9279
|
take: 0,
|
|
9280
9280
|
}, ...(ngDevMode ? [{ debugName: "dataState" }] : []));
|
|
9281
|
+
this.isLoadingMore = true;
|
|
9281
9282
|
}
|
|
9282
9283
|
ngOnInit() {
|
|
9283
9284
|
this.dataState.update(state => ({
|
|
@@ -9289,6 +9290,7 @@ class KitCardDetailsComponent {
|
|
|
9289
9290
|
this.initStateFromUrl();
|
|
9290
9291
|
}
|
|
9291
9292
|
loadMoreData() {
|
|
9293
|
+
this.isLoadingMore = true;
|
|
9292
9294
|
this.dataState.update(state => ({
|
|
9293
9295
|
...state,
|
|
9294
9296
|
skip: this.cardData().length,
|
|
@@ -9297,9 +9299,9 @@ class KitCardDetailsComponent {
|
|
|
9297
9299
|
this.updateData();
|
|
9298
9300
|
}
|
|
9299
9301
|
onCardClick(id) {
|
|
9300
|
-
this.dataState.update(state => ({ ...state, activeId: id }));
|
|
9302
|
+
this.dataState.update(state => ({ ...state, activeId: id.toString() }));
|
|
9301
9303
|
this.setStateToUrl(this.dataState());
|
|
9302
|
-
this.cardClicked.emit({ id });
|
|
9304
|
+
this.cardClicked.emit({ id: id.toString() });
|
|
9303
9305
|
}
|
|
9304
9306
|
initSearchSubscription() {
|
|
9305
9307
|
this.kitTextboxComponent().changed.pipe(filter(() => !this.isLoading()), debounceTime(500), takeUntilDestroyed(this.destroyRef)).subscribe(searchValue => {
|
|
@@ -9332,11 +9334,20 @@ class KitCardDetailsComponent {
|
|
|
9332
9334
|
const { activeId } = this.getStateFromUrl();
|
|
9333
9335
|
let handledInitialActiveId = false;
|
|
9334
9336
|
this.cardData$().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
|
|
9335
|
-
this.
|
|
9336
|
-
|
|
9337
|
-
|
|
9338
|
-
|
|
9339
|
-
|
|
9337
|
+
if (this.isLoadingMore) {
|
|
9338
|
+
this.cardData.set([
|
|
9339
|
+
...this.cardData(),
|
|
9340
|
+
...data.results.data,
|
|
9341
|
+
]);
|
|
9342
|
+
this.isLoadingMore = false;
|
|
9343
|
+
}
|
|
9344
|
+
else {
|
|
9345
|
+
this.cardData.set(data.results.data);
|
|
9346
|
+
}
|
|
9347
|
+
if (!handledInitialActiveId
|
|
9348
|
+
&& activeId
|
|
9349
|
+
&& !this.dataState().activeId
|
|
9350
|
+
&& this.cardData().some(item => item.id.toString() === activeId)) {
|
|
9340
9351
|
this.onCardClick(activeId);
|
|
9341
9352
|
requestAnimationFrame(() => {
|
|
9342
9353
|
this.scrollToCardById(activeId);
|
|
@@ -9380,7 +9391,7 @@ class KitCardDetailsComponent {
|
|
|
9380
9391
|
});
|
|
9381
9392
|
}
|
|
9382
9393
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9383
|
-
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 } }, outputs: { dataStateChanged: "dataStateChanged", cardClicked: "cardClicked"
|
|
9394
|
+
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 }], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-card-details\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\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 (cards.results.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 .title{display:block;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 25px)}.kit-card-details .left-panel{width:30%}.kit-card-details .left-panel .textbox-wrapper{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{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: ["blured", "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 }); }
|
|
9384
9395
|
}
|
|
9385
9396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
|
|
9386
9397
|
type: Component,
|
|
@@ -9392,7 +9403,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
9392
9403
|
TranslatePipe,
|
|
9393
9404
|
KitTextboxComponent,
|
|
9394
9405
|
NgTemplateOutlet,
|
|
9395
|
-
|
|
9406
|
+
KitEntityTitleComponent,
|
|
9407
|
+
], template: "<div class=\"kit-card-details\">\n <kit-entity-title class=\"title\">\n {{ title() }}\n </kit-entity-title>\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 (cards.results.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 .title{display:block;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 25px)}.kit-card-details .left-panel{width:30%}.kit-card-details .left-panel .textbox-wrapper{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{flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px}\n"] }]
|
|
9396
9408
|
}] });
|
|
9397
9409
|
|
|
9398
9410
|
// KitButton
|