@indigina/ui-kit 1.1.276 → 1.1.278
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.
|
@@ -9309,6 +9309,7 @@ class KitCardDetailsComponent {
|
|
|
9309
9309
|
skip: 0,
|
|
9310
9310
|
take: 0,
|
|
9311
9311
|
}, ...(ngDevMode ? [{ debugName: "dataState" }] : []));
|
|
9312
|
+
this.newCreatedCards = signal([], ...(ngDevMode ? [{ debugName: "newCreatedCards" }] : []));
|
|
9312
9313
|
this.shouldAppendFetchedData = true;
|
|
9313
9314
|
}
|
|
9314
9315
|
ngOnInit() {
|
|
@@ -9320,6 +9321,16 @@ class KitCardDetailsComponent {
|
|
|
9320
9321
|
this.initSearchSubscription();
|
|
9321
9322
|
this.initStateFromUrl();
|
|
9322
9323
|
}
|
|
9324
|
+
get skipNewCreatedCardFilter() {
|
|
9325
|
+
return this.newCreatedCards().length ? {
|
|
9326
|
+
logic: KitFilterLogic.AND,
|
|
9327
|
+
filters: this.newCreatedCards().map(card => ({
|
|
9328
|
+
field: 'id',
|
|
9329
|
+
operator: KitFilterOperator.NEQ,
|
|
9330
|
+
value: card.id,
|
|
9331
|
+
})),
|
|
9332
|
+
} : {};
|
|
9333
|
+
}
|
|
9323
9334
|
loadMoreData() {
|
|
9324
9335
|
this.shouldAppendFetchedData = true;
|
|
9325
9336
|
this.dataState.update(state => ({
|
|
@@ -9340,18 +9351,36 @@ class KitCardDetailsComponent {
|
|
|
9340
9351
|
...this.cardData(),
|
|
9341
9352
|
...cards,
|
|
9342
9353
|
]);
|
|
9343
|
-
this.
|
|
9354
|
+
this.newCreatedCards.set([
|
|
9355
|
+
...this.newCreatedCards(),
|
|
9356
|
+
...cards,
|
|
9357
|
+
]);
|
|
9358
|
+
this.dataState.update(state => ({
|
|
9359
|
+
...state,
|
|
9360
|
+
filters: this.skipNewCreatedCardFilter,
|
|
9361
|
+
}));
|
|
9362
|
+
this.total.set(this.total() + cards.length);
|
|
9344
9363
|
}
|
|
9345
9364
|
deleteCard(cardId) {
|
|
9346
9365
|
this.isLoading.set(true);
|
|
9347
9366
|
this.cardData.set(this.cardData().filter(card => card.id.toString() !== cardId.toString()));
|
|
9348
9367
|
this.total.set(this.total() - 1);
|
|
9349
9368
|
const skip = (this.dataState().skip ?? 0) + 1;
|
|
9369
|
+
if (this.newCreatedCards().some(card => card.id.toString() === cardId.toString())) {
|
|
9370
|
+
this.newCreatedCards.set(this.newCreatedCards().filter(card => card.id.toString() !== cardId.toString()));
|
|
9371
|
+
this.dataState.update(state => ({
|
|
9372
|
+
...state,
|
|
9373
|
+
filters: this.skipNewCreatedCardFilter,
|
|
9374
|
+
}));
|
|
9375
|
+
this.isLoading.set(false);
|
|
9376
|
+
return;
|
|
9377
|
+
}
|
|
9350
9378
|
if (skip >= this.total()) {
|
|
9379
|
+
this.isLoading.set(false);
|
|
9351
9380
|
return;
|
|
9352
9381
|
}
|
|
9353
9382
|
this.shouldAppendFetchedData = true;
|
|
9354
|
-
this.dataStateChanged.emit({ skip, take: 1 });
|
|
9383
|
+
this.dataStateChanged.emit({ skip, take: 1, filters: this.skipNewCreatedCardFilter, search: this.dataState().search });
|
|
9355
9384
|
}
|
|
9356
9385
|
updateSpecificCardData(cardData) {
|
|
9357
9386
|
this.cardData.set(this.cardData().map(card => {
|
|
@@ -9362,8 +9391,9 @@ class KitCardDetailsComponent {
|
|
|
9362
9391
|
}));
|
|
9363
9392
|
}
|
|
9364
9393
|
initSearchSubscription() {
|
|
9365
|
-
this.kitTextboxComponent().changed.pipe(filter(() => !this.isLoading()), debounceTime(500), takeUntilDestroyed(this.destroyRef)).subscribe(searchValue => {
|
|
9394
|
+
this.kitTextboxComponent().changed.pipe(filter(() => !this.isLoading()), debounceTime(500), takeUntilDestroyed(this.destroyRef), map(value => value.trim())).subscribe(searchValue => {
|
|
9366
9395
|
this.cardData.set([]);
|
|
9396
|
+
this.newCreatedCards.set([]);
|
|
9367
9397
|
this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined });
|
|
9368
9398
|
this.shouldAppendFetchedData = true;
|
|
9369
9399
|
this.updateData();
|
|
@@ -9399,7 +9429,7 @@ class KitCardDetailsComponent {
|
|
|
9399
9429
|
...this.cardData(),
|
|
9400
9430
|
...data.results.data,
|
|
9401
9431
|
]);
|
|
9402
|
-
this.total.set(data.results.total);
|
|
9432
|
+
this.total.set(data.results.total + this.newCreatedCards().length);
|
|
9403
9433
|
this.shouldAppendFetchedData = false;
|
|
9404
9434
|
}
|
|
9405
9435
|
if (!handledInitialActiveId
|
|
@@ -9437,7 +9467,7 @@ class KitCardDetailsComponent {
|
|
|
9437
9467
|
setStateToUrl(state) {
|
|
9438
9468
|
const queryParams = Object.keys(state).reduce((acc, key) => {
|
|
9439
9469
|
const val = state[key];
|
|
9440
|
-
if (val !== undefined) {
|
|
9470
|
+
if (val !== undefined && key !== 'filters') {
|
|
9441
9471
|
acc[key] = val;
|
|
9442
9472
|
}
|
|
9443
9473
|
return acc;
|
|
@@ -9557,14 +9587,14 @@ class KitSplitContainerComponent {
|
|
|
9557
9587
|
this.isSidebarCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isSidebarCollapsed" }] : []));
|
|
9558
9588
|
}
|
|
9559
9589
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitSplitContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9560
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitSplitContainerComponent, isStandalone: true, selector: "kit-split-container", inputs: { contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, sidebarTemplateRef: { classPropertyName: "sidebarTemplateRef", publicName: "sidebarTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, sidebarTitle: { classPropertyName: "sidebarTitle", publicName: "sidebarTitle", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplateRef: { classPropertyName: "actionsTemplateRef", publicName: "actionsTemplateRef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-split-container\">\n <div class=\"kit-split-container-content\">\n <ng-container *ngTemplateOutlet=\"contentTemplateRef()\" />\n </div>\n\n @if (sidebarTemplateRef()) {\n <div class=\"kit-split-container-sidebar\"\n [class.collapsed]=\"isSidebarCollapsed()\">\n <div class=\"kit-split-container-sidebar-actions\">\n <kit-button class=\"kit-split-container-collapsed-btn\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"isSidebarCollapsed() && kitSvgIcon.CHEVRON_LEFT || kitSvgIcon.CHEVRON_RIGHT\"\n (clicked)=\"isSidebarCollapsed.set(!isSidebarCollapsed())\"\n ></kit-button>\n \n @if (actionsTemplateRef()) {\n <div class=\"kit-split-container-sidebar-custom-actions\">\n <ng-container *ngTemplateOutlet=\"actionsTemplateRef()\" />\n </div>\n }\n </div>\n \n <div class=\"kit-split-container-sidebar-content\">\n <ng-container *ngTemplateOutlet=\"sidebarTemplateRef()\" />\n </div>\n \n <div class=\"kit-split-container-sidebar-title\"\n (click)=\"isSidebarCollapsed.set(false)\">\n {{ sidebarTitle() }}\n </div>\n </div>\n }\n</div>", styles: [":host{display:block;height:100
|
|
9590
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitSplitContainerComponent, isStandalone: true, selector: "kit-split-container", inputs: { contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, sidebarTemplateRef: { classPropertyName: "sidebarTemplateRef", publicName: "sidebarTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, sidebarTitle: { classPropertyName: "sidebarTitle", publicName: "sidebarTitle", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplateRef: { classPropertyName: "actionsTemplateRef", publicName: "actionsTemplateRef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-split-container\">\n <div class=\"kit-split-container-content\">\n <ng-container *ngTemplateOutlet=\"contentTemplateRef()\" />\n </div>\n\n @if (sidebarTemplateRef()) {\n <div class=\"kit-split-container-sidebar\"\n [class.collapsed]=\"isSidebarCollapsed()\">\n <div class=\"kit-split-container-sidebar-actions\">\n <kit-button class=\"kit-split-container-collapsed-btn\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"isSidebarCollapsed() && kitSvgIcon.CHEVRON_LEFT || kitSvgIcon.CHEVRON_RIGHT\"\n (clicked)=\"isSidebarCollapsed.set(!isSidebarCollapsed())\"\n ></kit-button>\n \n @if (actionsTemplateRef()) {\n <div class=\"kit-split-container-sidebar-custom-actions\">\n <ng-container *ngTemplateOutlet=\"actionsTemplateRef()\" />\n </div>\n }\n </div>\n \n <div class=\"kit-split-container-sidebar-content\">\n <ng-container *ngTemplateOutlet=\"sidebarTemplateRef()\" />\n </div>\n \n <div class=\"kit-split-container-sidebar-title\"\n (click)=\"isSidebarCollapsed.set(false)\">\n {{ sidebarTitle() }}\n </div>\n </div>\n }\n</div>", styles: [":host{display:block;height:100%;min-height:0}.kit-split-container{width:100%;height:100%;box-sizing:border-box;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:100%;overflow:hidden}.kit-split-container-content{width:100%;height:100%;padding:20px;border-right:1px solid var(--ui-kit-color-grey-11);box-sizing:border-box;overflow:auto}.kit-split-container-content::-webkit-scrollbar{height:8px;width:8px}.kit-split-container-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-split-container-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-split-container-sidebar{height:100%;padding:20px;box-sizing:border-box;width:360px;transition:.3s width;display:flex;flex-direction:column;gap:35px;align-items:center}.kit-split-container-sidebar-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}.kit-split-container-sidebar-title{display:none;cursor:pointer;font-size:18px;line-height:24px;font-weight:500;writing-mode:vertical-rl;color:var(--ui-kit-color-grey-12)}.kit-split-container-sidebar-content{width:100%;height:calc(100% - 67px)}.kit-split-container-sidebar.collapsed{width:86px;gap:15px}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-actions{width:max-content}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-custom-actions,.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-content{display:none}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-title{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9561
9591
|
}
|
|
9562
9592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitSplitContainerComponent, decorators: [{
|
|
9563
9593
|
type: Component,
|
|
9564
9594
|
args: [{ selector: 'kit-split-container', imports: [
|
|
9565
9595
|
CommonModule,
|
|
9566
9596
|
KitButtonComponent,
|
|
9567
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-split-container\">\n <div class=\"kit-split-container-content\">\n <ng-container *ngTemplateOutlet=\"contentTemplateRef()\" />\n </div>\n\n @if (sidebarTemplateRef()) {\n <div class=\"kit-split-container-sidebar\"\n [class.collapsed]=\"isSidebarCollapsed()\">\n <div class=\"kit-split-container-sidebar-actions\">\n <kit-button class=\"kit-split-container-collapsed-btn\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"isSidebarCollapsed() && kitSvgIcon.CHEVRON_LEFT || kitSvgIcon.CHEVRON_RIGHT\"\n (clicked)=\"isSidebarCollapsed.set(!isSidebarCollapsed())\"\n ></kit-button>\n \n @if (actionsTemplateRef()) {\n <div class=\"kit-split-container-sidebar-custom-actions\">\n <ng-container *ngTemplateOutlet=\"actionsTemplateRef()\" />\n </div>\n }\n </div>\n \n <div class=\"kit-split-container-sidebar-content\">\n <ng-container *ngTemplateOutlet=\"sidebarTemplateRef()\" />\n </div>\n \n <div class=\"kit-split-container-sidebar-title\"\n (click)=\"isSidebarCollapsed.set(false)\">\n {{ sidebarTitle() }}\n </div>\n </div>\n }\n</div>", styles: [":host{display:block;height:100
|
|
9597
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-split-container\">\n <div class=\"kit-split-container-content\">\n <ng-container *ngTemplateOutlet=\"contentTemplateRef()\" />\n </div>\n\n @if (sidebarTemplateRef()) {\n <div class=\"kit-split-container-sidebar\"\n [class.collapsed]=\"isSidebarCollapsed()\">\n <div class=\"kit-split-container-sidebar-actions\">\n <kit-button class=\"kit-split-container-collapsed-btn\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"isSidebarCollapsed() && kitSvgIcon.CHEVRON_LEFT || kitSvgIcon.CHEVRON_RIGHT\"\n (clicked)=\"isSidebarCollapsed.set(!isSidebarCollapsed())\"\n ></kit-button>\n \n @if (actionsTemplateRef()) {\n <div class=\"kit-split-container-sidebar-custom-actions\">\n <ng-container *ngTemplateOutlet=\"actionsTemplateRef()\" />\n </div>\n }\n </div>\n \n <div class=\"kit-split-container-sidebar-content\">\n <ng-container *ngTemplateOutlet=\"sidebarTemplateRef()\" />\n </div>\n \n <div class=\"kit-split-container-sidebar-title\"\n (click)=\"isSidebarCollapsed.set(false)\">\n {{ sidebarTitle() }}\n </div>\n </div>\n }\n</div>", styles: [":host{display:block;height:100%;min-height:0}.kit-split-container{width:100%;height:100%;box-sizing:border-box;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:100%;overflow:hidden}.kit-split-container-content{width:100%;height:100%;padding:20px;border-right:1px solid var(--ui-kit-color-grey-11);box-sizing:border-box;overflow:auto}.kit-split-container-content::-webkit-scrollbar{height:8px;width:8px}.kit-split-container-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-split-container-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-split-container-sidebar{height:100%;padding:20px;box-sizing:border-box;width:360px;transition:.3s width;display:flex;flex-direction:column;gap:35px;align-items:center}.kit-split-container-sidebar-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}.kit-split-container-sidebar-title{display:none;cursor:pointer;font-size:18px;line-height:24px;font-weight:500;writing-mode:vertical-rl;color:var(--ui-kit-color-grey-12)}.kit-split-container-sidebar-content{width:100%;height:calc(100% - 67px)}.kit-split-container-sidebar.collapsed{width:86px;gap:15px}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-actions{width:max-content}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-custom-actions,.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-content{display:none}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-title{display:block}\n"] }]
|
|
9568
9598
|
}] });
|
|
9569
9599
|
|
|
9570
9600
|
// KitButton
|