@indigina/ui-kit 1.1.359 → 1.1.361
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.
|
@@ -6429,39 +6429,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6429
6429
|
}], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
6430
6430
|
|
|
6431
6431
|
const kitDataStateToODataString = (state, utcDates = false) => {
|
|
6432
|
-
const
|
|
6433
|
-
|
|
6434
|
-
|
|
6435
|
-
filter: mapFiltersForOData(state.filter),
|
|
6436
|
-
}
|
|
6437
|
-
: state;
|
|
6438
|
-
return decodeURIComponent(toODataString(mappedState, { utcDates }));
|
|
6432
|
+
const base = toODataString({ ...state, filter: undefined }, { utcDates });
|
|
6433
|
+
const filter = state.filter && convertFiltersToOData(state.filter, utcDates);
|
|
6434
|
+
return decodeURIComponent(filter ? `${base}$filter=(${filter})` : base);
|
|
6439
6435
|
};
|
|
6440
6436
|
const kitFilterBy = (data, filter) => filterBy(data, filter);
|
|
6441
|
-
const
|
|
6442
|
-
|
|
6443
|
-
};
|
|
6444
|
-
const mapFiltersForOData = (filter) => ({
|
|
6445
|
-
...filter,
|
|
6446
|
-
filters: filter.filters.map(filter => {
|
|
6437
|
+
const convertFiltersToOData = (filters, utcDates) => {
|
|
6438
|
+
const oDataFilters = filters.filters.map(filter => {
|
|
6447
6439
|
if ('isArray' in filter && filter.isArray) {
|
|
6448
|
-
|
|
6449
|
-
if (!isKitFilterDescriptor(filterData) || !filterData.field) {
|
|
6450
|
-
return filter;
|
|
6451
|
-
}
|
|
6452
|
-
const field = (typeof filterData.field === 'string' ? filterData.field : filterData.field()).replaceAll('.', '/');
|
|
6453
|
-
return {
|
|
6454
|
-
field: `${field}/any(p: p eq '${filterData.value}')`,
|
|
6455
|
-
operator: 'eq',
|
|
6456
|
-
value: true,
|
|
6457
|
-
};
|
|
6440
|
+
return convertArrayFiltersToOData(filter);
|
|
6458
6441
|
}
|
|
6459
|
-
|
|
6460
|
-
return
|
|
6442
|
+
else {
|
|
6443
|
+
return convertStandardFiltersToOData(filter, utcDates);
|
|
6461
6444
|
}
|
|
6462
|
-
|
|
6463
|
-
})
|
|
6464
|
-
}
|
|
6445
|
+
});
|
|
6446
|
+
return oDataFilters.filter(Boolean).join(` ${filters.logic} `);
|
|
6447
|
+
};
|
|
6448
|
+
const convertStandardFiltersToOData = (filter, utcDates) => {
|
|
6449
|
+
return extractFilterExpression(toODataString({
|
|
6450
|
+
filter: isKitFilterDescriptor(filter)
|
|
6451
|
+
? { logic: KitFilterLogic.AND, filters: [filter] }
|
|
6452
|
+
: filter,
|
|
6453
|
+
}, { utcDates }));
|
|
6454
|
+
};
|
|
6455
|
+
const convertArrayFiltersToOData = (filter) => {
|
|
6456
|
+
const filterData = filter.filters[0];
|
|
6457
|
+
if (!isKitFilterDescriptor(filterData) || !filterData.field) {
|
|
6458
|
+
return '';
|
|
6459
|
+
}
|
|
6460
|
+
const field = (typeof filterData.field === 'string' ? filterData.field : filterData.field())?.replaceAll('.', '/');
|
|
6461
|
+
return `${field}/any(p: p eq '${filterData.value}')`;
|
|
6462
|
+
};
|
|
6463
|
+
const isKitFilterDescriptor = (filter) => {
|
|
6464
|
+
return 'field' in filter && 'value' in filter;
|
|
6465
|
+
};
|
|
6466
|
+
const extractFilterExpression = (odata) => {
|
|
6467
|
+
const extractedExpression = odata.replace(/^\$filter=/, '');
|
|
6468
|
+
return extractedExpression.startsWith('(') && extractedExpression.endsWith(')')
|
|
6469
|
+
? extractedExpression.slice(1, -1)
|
|
6470
|
+
: extractedExpression;
|
|
6471
|
+
};
|
|
6465
6472
|
|
|
6466
6473
|
var KitThemes;
|
|
6467
6474
|
(function (KitThemes) {
|
|
@@ -10433,6 +10440,9 @@ class KitCardDetailsComponent {
|
|
|
10433
10440
|
this.total.set(this.total() - 1);
|
|
10434
10441
|
const remainingCards = this.cardData();
|
|
10435
10442
|
const nextCard = remainingCards.length ? remainingCards[deletedIndex] ?? remainingCards[deletedIndex - 1] : null;
|
|
10443
|
+
if (!this.cardData().length) {
|
|
10444
|
+
this.showDetails = false;
|
|
10445
|
+
}
|
|
10436
10446
|
if (this.newCreatedCards().some(card => this.normalizeCardId(card.id) === normalizedId)) {
|
|
10437
10447
|
this.removeFromNewCreatedCards(normalizedId);
|
|
10438
10448
|
this.isLoading.set(false);
|
|
@@ -10575,7 +10585,7 @@ class KitCardDetailsComponent {
|
|
|
10575
10585
|
});
|
|
10576
10586
|
}
|
|
10577
10587
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10578
|
-
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 [clearButton]=\"true\"\n [showStateIcon]=\"false\" />\n </div>\n\n <div class=\"cards\">\n @if (cardData$() | async; as cards) {\n @if (cards.loading) {\n @for (
|
|
10588
|
+
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 [clearButton]=\"true\"\n [showStateIcon]=\"false\" />\n </div>\n\n <div class=\"cards\">\n @if (cardData$() | async; as cards) {\n @if (cards.loading) {\n @for (_ of [1, 2, 3]; track $index) {\n <kit-skeleton [width]=\"'100%'\"\n [height]=\"'200px'\" />\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"], 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 }); }
|
|
10579
10589
|
}
|
|
10580
10590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
|
|
10581
10591
|
type: Component,
|
|
@@ -10588,7 +10598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
10588
10598
|
KitTextboxComponent,
|
|
10589
10599
|
NgTemplateOutlet,
|
|
10590
10600
|
KitEntityTitleComponent,
|
|
10591
|
-
], 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 @for (
|
|
10601
|
+
], 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 @for (_ of [1, 2, 3]; track $index) {\n <kit-skeleton [width]=\"'100%'\"\n [height]=\"'200px'\" />\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"] }]
|
|
10592
10602
|
}], 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 }] }] } });
|
|
10593
10603
|
|
|
10594
10604
|
class KitListComponent {
|