@indigina/ui-kit 1.1.333 → 1.1.334
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.
|
@@ -10081,6 +10081,7 @@ class KitCardDetailsComponent {
|
|
|
10081
10081
|
} : {};
|
|
10082
10082
|
}, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : []));
|
|
10083
10083
|
this.shouldAppendFetchedData = true;
|
|
10084
|
+
this.showDetails = false;
|
|
10084
10085
|
}
|
|
10085
10086
|
ngOnInit() {
|
|
10086
10087
|
this.dataState.update(state => ({
|
|
@@ -10122,25 +10123,41 @@ class KitCardDetailsComponent {
|
|
|
10122
10123
|
this.total.set(this.total() + 1);
|
|
10123
10124
|
if (navigateToCard) {
|
|
10124
10125
|
this.onCardClick(card);
|
|
10126
|
+
this.showDetails = true;
|
|
10125
10127
|
}
|
|
10126
10128
|
}
|
|
10127
10129
|
deleteCard(cardId) {
|
|
10128
10130
|
this.isLoading.set(true);
|
|
10129
10131
|
const normalizedId = this.normalizeCardId(cardId);
|
|
10132
|
+
const deletedIndex = this.cardData().findIndex(card => this.normalizeCardId(card.id) === normalizedId);
|
|
10130
10133
|
this.cardData.set(this.cardData().filter(card => this.normalizeCardId(card.id) !== normalizedId));
|
|
10131
10134
|
this.total.set(this.total() - 1);
|
|
10135
|
+
const remainingCards = this.cardData();
|
|
10136
|
+
const nextCard = remainingCards.length ? remainingCards[deletedIndex] ?? remainingCards[deletedIndex - 1] : null;
|
|
10132
10137
|
if (this.newCreatedCards().some(card => this.normalizeCardId(card.id) === normalizedId)) {
|
|
10133
10138
|
this.removeFromNewCreatedCards(normalizedId);
|
|
10134
10139
|
this.isLoading.set(false);
|
|
10140
|
+
if (nextCard) {
|
|
10141
|
+
this.onCardClick(nextCard);
|
|
10142
|
+
}
|
|
10135
10143
|
return;
|
|
10136
10144
|
}
|
|
10137
10145
|
const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
|
|
10138
10146
|
if (loadedCards >= this.total()) {
|
|
10139
10147
|
this.isLoading.set(false);
|
|
10148
|
+
if (nextCard) {
|
|
10149
|
+
this.onCardClick(nextCard);
|
|
10150
|
+
}
|
|
10140
10151
|
return;
|
|
10141
10152
|
}
|
|
10153
|
+
this.showDetails = false;
|
|
10142
10154
|
this.shouldAppendFetchedData = true;
|
|
10143
|
-
this.dataStateChanged.emit({
|
|
10155
|
+
this.dataStateChanged.emit({
|
|
10156
|
+
skip: loadedCards,
|
|
10157
|
+
take: 1,
|
|
10158
|
+
filters: this.skipNewCreatedCardFilter(),
|
|
10159
|
+
search: this.dataState().search,
|
|
10160
|
+
});
|
|
10144
10161
|
}
|
|
10145
10162
|
updateSpecificCardData(cardData) {
|
|
10146
10163
|
this.cardData.set(this.cardData().map(card => this.normalizeCardId(card.id) === this.normalizeCardId(cardData.id) ? cardData : card));
|
|
@@ -10156,6 +10173,7 @@ class KitCardDetailsComponent {
|
|
|
10156
10173
|
this.newCreatedCards.set([]);
|
|
10157
10174
|
this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined, activeId: undefined });
|
|
10158
10175
|
this.shouldAppendFetchedData = true;
|
|
10176
|
+
this.showDetails = false;
|
|
10159
10177
|
this.updateData();
|
|
10160
10178
|
});
|
|
10161
10179
|
}
|
|
@@ -10181,7 +10199,7 @@ class KitCardDetailsComponent {
|
|
|
10181
10199
|
this.updateData();
|
|
10182
10200
|
}
|
|
10183
10201
|
initCardDataSubscription() {
|
|
10184
|
-
this.getStateFromUrl();
|
|
10202
|
+
const { activeId } = this.getStateFromUrl();
|
|
10185
10203
|
this.cardData$().pipe(takeUntilDestroyed(this.destroyRef), filter(({ loading }) => !loading)).subscribe(data => {
|
|
10186
10204
|
if (this.shouldAppendFetchedData) {
|
|
10187
10205
|
this.cardData.set([
|
|
@@ -10190,6 +10208,16 @@ class KitCardDetailsComponent {
|
|
|
10190
10208
|
]);
|
|
10191
10209
|
this.total.set(data.results.total + this.newCreatedCards().length);
|
|
10192
10210
|
this.shouldAppendFetchedData = false;
|
|
10211
|
+
if (activeId && !this.dataState().activeId) {
|
|
10212
|
+
const activeCard = this.cardData().find(item => this.normalizeCardId(item.id) === activeId);
|
|
10213
|
+
if (activeCard) {
|
|
10214
|
+
this.selectNewLoadedCard(activeCard);
|
|
10215
|
+
return;
|
|
10216
|
+
}
|
|
10217
|
+
}
|
|
10218
|
+
if (!this.showDetails && data.results.data.length) {
|
|
10219
|
+
this.selectNewLoadedCard(data.results.data[0]);
|
|
10220
|
+
}
|
|
10193
10221
|
}
|
|
10194
10222
|
this.isLoading.set(false);
|
|
10195
10223
|
});
|
|
@@ -10222,7 +10250,7 @@ class KitCardDetailsComponent {
|
|
|
10222
10250
|
setQueryParamsToUrl(state) {
|
|
10223
10251
|
const queryParams = Object.keys(state).reduce((acc, key) => {
|
|
10224
10252
|
const val = state[key];
|
|
10225
|
-
if (val !== undefined && key !== 'filters' && key !== 'activeId') {
|
|
10253
|
+
if (val !== undefined && val !== '' && key !== 'filters' && key !== 'activeId') {
|
|
10226
10254
|
acc[key] = val;
|
|
10227
10255
|
}
|
|
10228
10256
|
return acc;
|
|
@@ -10230,7 +10258,7 @@ class KitCardDetailsComponent {
|
|
|
10230
10258
|
this.router.navigate([], {
|
|
10231
10259
|
relativeTo: this.activatedRoute,
|
|
10232
10260
|
queryParams,
|
|
10233
|
-
queryParamsHandling: '
|
|
10261
|
+
queryParamsHandling: 'replace',
|
|
10234
10262
|
});
|
|
10235
10263
|
}
|
|
10236
10264
|
navigateToCard(id) {
|
|
@@ -10239,8 +10267,16 @@ class KitCardDetailsComponent {
|
|
|
10239
10267
|
queryParamsHandling: 'preserve',
|
|
10240
10268
|
});
|
|
10241
10269
|
}
|
|
10270
|
+
selectNewLoadedCard(card) {
|
|
10271
|
+
this.isLoading.set(false);
|
|
10272
|
+
this.showDetails = true;
|
|
10273
|
+
this.onCardClick(card);
|
|
10274
|
+
requestAnimationFrame(() => {
|
|
10275
|
+
this.scrollToCardById(card.id.toString());
|
|
10276
|
+
});
|
|
10277
|
+
}
|
|
10242
10278
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10243
|
-
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 (
|
|
10279
|
+
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 (cardData().length === 0 && newCreatedCards().length === 0) {\n <kit-empty-section [text]=\"'kit.common.noData' | translate\"/>\n } @else {\n @for (card of cardData(); track $index) {\n <div class=\"card\"\n [attr.data-card-id]=\"card.id\"\n [class.active]=\"dataState().activeId === (card.id).toString()\"\n (click)=\"onCardClick(card)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (total() > cardData().length) {\n <kit-button class=\"load-more-btn\"\n [label]=\"'kit.common.loadMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isLoading()\"\n (clicked)=\"loadMoreData()\" />\n }\n }\n }\n }\n </div>\n </div>\n\n <div class=\"details\">\n @if (showDetails) {\n <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n }\n </div>\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10244
10280
|
}
|
|
10245
10281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
|
|
10246
10282
|
type: Component,
|
|
@@ -10253,7 +10289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
10253
10289
|
KitTextboxComponent,
|
|
10254
10290
|
NgTemplateOutlet,
|
|
10255
10291
|
KitEntityTitleComponent,
|
|
10256
|
-
], 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 (
|
|
10292
|
+
], 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 (cardData().length === 0 && newCreatedCards().length === 0) {\n <kit-empty-section [text]=\"'kit.common.noData' | translate\"/>\n } @else {\n @for (card of cardData(); track $index) {\n <div class=\"card\"\n [attr.data-card-id]=\"card.id\"\n [class.active]=\"dataState().activeId === (card.id).toString()\"\n (click)=\"onCardClick(card)\">\n <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n </div>\n }\n\n @if (total() > cardData().length) {\n <kit-button class=\"load-more-btn\"\n [label]=\"'kit.common.loadMore' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"isLoading()\"\n (clicked)=\"loadMoreData()\" />\n }\n }\n }\n }\n </div>\n </div>\n\n <div class=\"details\">\n @if (showDetails) {\n <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n }\n </div>\n </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"] }]
|
|
10257
10293
|
}], 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 }] }] } });
|
|
10258
10294
|
|
|
10259
10295
|
class KitListComponent {
|