@indigina/ui-kit 1.1.160 → 1.1.162
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 +198 -31
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/components/kit-breadcrumbs/kit-breadcrumbs.service.d.ts +21 -0
- package/lib/components/kit-entity-grid/kit-entity-grid.component.d.ts +71 -0
- package/lib/components/kit-grid/kit-grid.component.d.ts +9 -5
- package/lib/widgets/kit-skeleton/kit-skeleton-grid/kit-skeleton-grid.component.d.ts +9 -0
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
|
@@ -40,12 +40,12 @@ import * as i1$a from '@ngx-translate/core';
|
|
|
40
40
|
import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
|
|
41
41
|
import * as i2$2 from '@progress/kendo-angular-layout';
|
|
42
42
|
import { LayoutModule, TileLayoutModule } from '@progress/kendo-angular-layout';
|
|
43
|
-
import * as
|
|
43
|
+
import * as i3 from '@progress/kendo-angular-grid';
|
|
44
44
|
import { GridComponent, GridModule, ExcelModule, PDFModule } from '@progress/kendo-angular-grid';
|
|
45
|
-
import * as
|
|
45
|
+
import * as i4 from '@progress/kendo-angular-pager';
|
|
46
46
|
import { PagerContextService, PagerNavigationService } from '@progress/kendo-angular-pager';
|
|
47
47
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
48
|
-
import * as i2$
|
|
48
|
+
import * as i2$3 from '@progress/kendo-angular-sortable';
|
|
49
49
|
import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
|
|
50
50
|
import { toODataString } from '@progress/kendo-data-query';
|
|
51
51
|
import { __decorate } from 'tslib';
|
|
@@ -5243,6 +5243,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5243
5243
|
}]
|
|
5244
5244
|
}] });
|
|
5245
5245
|
|
|
5246
|
+
class KitBreadcrumbsService {
|
|
5247
|
+
constructor(router, translateService) {
|
|
5248
|
+
this.router = router;
|
|
5249
|
+
this.translateService = translateService;
|
|
5250
|
+
this.breadcrumbs = signal([]);
|
|
5251
|
+
this.dataHandlers = {};
|
|
5252
|
+
this.initializeBreadcrumbs();
|
|
5253
|
+
}
|
|
5254
|
+
initializeBreadcrumbs() {
|
|
5255
|
+
this.updateBreadcrumbs();
|
|
5256
|
+
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => this.updateBreadcrumbs());
|
|
5257
|
+
}
|
|
5258
|
+
registerHandler(type, key, handler) {
|
|
5259
|
+
this.dataHandlers[type] = { handler, key };
|
|
5260
|
+
this.updateBreadcrumbs();
|
|
5261
|
+
}
|
|
5262
|
+
updateBreadcrumbs() {
|
|
5263
|
+
const breadcrumbs = this.collectBreadcrumbs(this.router.routerState.snapshot.root);
|
|
5264
|
+
this.breadcrumbs.set(breadcrumbs);
|
|
5265
|
+
}
|
|
5266
|
+
collectBreadcrumbs(route) {
|
|
5267
|
+
const breadcrumbData = route.data['breadcrumb'] ?? [];
|
|
5268
|
+
const breadcrumbs = breadcrumbData.map(crumb => ({
|
|
5269
|
+
text: this.isDynamicBreadcrumb(crumb.text)
|
|
5270
|
+
&& this.getDynamicBreadcrumbText(crumb.text, route.params)
|
|
5271
|
+
|| this.translateService.instant(crumb.text),
|
|
5272
|
+
url: this.replaceRouteParams(crumb.url, route.params),
|
|
5273
|
+
}));
|
|
5274
|
+
return route.firstChild && [
|
|
5275
|
+
...breadcrumbs,
|
|
5276
|
+
...this.collectBreadcrumbs(route.firstChild),
|
|
5277
|
+
] || breadcrumbs;
|
|
5278
|
+
}
|
|
5279
|
+
replaceRouteParams(url, params) {
|
|
5280
|
+
return Object.keys(params).reduce((acc, paramKey) => acc.replace(`:${paramKey}`, params[paramKey]), url);
|
|
5281
|
+
}
|
|
5282
|
+
isDynamicBreadcrumb(label) {
|
|
5283
|
+
return !!this.dataHandlers[label];
|
|
5284
|
+
}
|
|
5285
|
+
getDynamicBreadcrumbText(label, params) {
|
|
5286
|
+
const dataHandler = this.dataHandlers[label];
|
|
5287
|
+
const { handler, key } = dataHandler;
|
|
5288
|
+
if (!dataHandler || !params[key]) {
|
|
5289
|
+
return this.translateService.instant(label);
|
|
5290
|
+
}
|
|
5291
|
+
return handler(params[key]);
|
|
5292
|
+
}
|
|
5293
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitBreadcrumbsService, deps: [{ token: i1$7.Router }, { token: i1$a.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5294
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitBreadcrumbsService }); }
|
|
5295
|
+
}
|
|
5296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitBreadcrumbsService, decorators: [{
|
|
5297
|
+
type: Injectable
|
|
5298
|
+
}], ctorParameters: () => [{ type: i1$7.Router }, { type: i1$a.TranslateService }] });
|
|
5299
|
+
|
|
5246
5300
|
class KitGridCellTemplateDirective {
|
|
5247
5301
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5248
5302
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: KitGridCellTemplateDirective, isStandalone: true, selector: "[kitGridCellTemplate]", ngImport: i0 }); }
|
|
@@ -5308,18 +5362,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5308
5362
|
args: [KitGridCellTemplateDirective, { read: TemplateRef }]
|
|
5309
5363
|
}] } });
|
|
5310
5364
|
|
|
5311
|
-
class KitGridDetailTemplateDirective {
|
|
5312
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5313
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: KitGridDetailTemplateDirective, isStandalone: true, selector: "[kitGridDetailTemplate]", ngImport: i0 }); }
|
|
5314
|
-
}
|
|
5315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridDetailTemplateDirective, decorators: [{
|
|
5316
|
-
type: Directive,
|
|
5317
|
-
args: [{
|
|
5318
|
-
selector: '[kitGridDetailTemplate]',
|
|
5319
|
-
standalone: true,
|
|
5320
|
-
}]
|
|
5321
|
-
}] });
|
|
5322
|
-
|
|
5323
5365
|
var KitSortDirection;
|
|
5324
5366
|
(function (KitSortDirection) {
|
|
5325
5367
|
KitSortDirection["ASC"] = "asc";
|
|
@@ -5349,7 +5391,8 @@ var KitFilterOperator;
|
|
|
5349
5391
|
})(KitFilterOperator || (KitFilterOperator = {}));
|
|
5350
5392
|
|
|
5351
5393
|
class KitGridComponent {
|
|
5352
|
-
constructor() {
|
|
5394
|
+
constructor(translateService) {
|
|
5395
|
+
this.translateService = translateService;
|
|
5353
5396
|
/**
|
|
5354
5397
|
* Enables the sorting of the grid columns
|
|
5355
5398
|
*/
|
|
@@ -5388,9 +5431,10 @@ class KitGridComponent {
|
|
|
5388
5431
|
this.footerTitle = '';
|
|
5389
5432
|
this.pdfOptions = {};
|
|
5390
5433
|
this.pagerButtonCount = 5;
|
|
5391
|
-
this.pagerInfoText = 'items';
|
|
5392
5434
|
this.showPageSize = false;
|
|
5435
|
+
this.pagerInfoText = input(this.translateService.instant('kit.grid.pagerItemsText'));
|
|
5393
5436
|
this.resizable = input(true);
|
|
5437
|
+
this.gridDetailTemplate = input();
|
|
5394
5438
|
/**
|
|
5395
5439
|
* An action which is emitted when the page of the grid is changed
|
|
5396
5440
|
*/
|
|
@@ -5417,11 +5461,11 @@ class KitGridComponent {
|
|
|
5417
5461
|
this.cellClicked = new EventEmitter();
|
|
5418
5462
|
this.excelExport = new EventEmitter();
|
|
5419
5463
|
this.pdfExport = new EventEmitter();
|
|
5420
|
-
this.kitGridDetailTemplate = null;
|
|
5421
5464
|
this.gridComponent = null;
|
|
5422
|
-
this.
|
|
5465
|
+
this.columnsContent = contentChildren(KitGridColumnComponent);
|
|
5423
5466
|
this.kitSvgIcon = KitSvgIcon;
|
|
5424
5467
|
this.kitSortDirection = KitSortDirection;
|
|
5468
|
+
this.columns = signal([]);
|
|
5425
5469
|
this.expandedRows = [];
|
|
5426
5470
|
this.getCssRowClass = (context) => {
|
|
5427
5471
|
const expanded = this.expandedRows.includes(context.dataItem);
|
|
@@ -5431,6 +5475,9 @@ class KitGridComponent {
|
|
|
5431
5475
|
'expand-disabled': expandDisabled,
|
|
5432
5476
|
};
|
|
5433
5477
|
};
|
|
5478
|
+
effect(() => {
|
|
5479
|
+
this.columns.set(this.columnsContent());
|
|
5480
|
+
});
|
|
5434
5481
|
}
|
|
5435
5482
|
onDataStateChange(event) {
|
|
5436
5483
|
this.skip = event.skip;
|
|
@@ -5480,13 +5527,13 @@ class KitGridComponent {
|
|
|
5480
5527
|
collapseAllRows() {
|
|
5481
5528
|
this.expandedRows = [];
|
|
5482
5529
|
}
|
|
5483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridComponent, isStandalone: false, selector: "kit-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, gridDataBinding: { classPropertyName: "gridDataBinding", publicName: "gridDataBinding", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: false, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, detailTemplateShowIf: { classPropertyName: "detailTemplateShowIf", publicName: "detailTemplateShowIf", isSignal: false, isRequired: false, transformFunction: null }, detailTemplateExpandDisableIf: { classPropertyName: "detailTemplateExpandDisableIf", publicName: "detailTemplateExpandDisableIf", isSignal: false, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: false, isRequired: false, transformFunction: null }, footerTitle: { classPropertyName: "footerTitle", publicName: "footerTitle", isSignal: false, isRequired: false, transformFunction: null }, footerData: { classPropertyName: "footerData", publicName: "footerData", isSignal: false, isRequired: false, transformFunction: null }, pdfOptions: { classPropertyName: "pdfOptions", publicName: "pdfOptions", isSignal: false, isRequired: false, transformFunction: null }, pagerButtonCount: { classPropertyName: "pagerButtonCount", publicName: "pagerButtonCount", isSignal: false, isRequired: false, transformFunction: null }, pagerInfoText: { classPropertyName: "pagerInfoText", publicName: "pagerInfoText", isSignal: false, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: false, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked", excelExport: "excelExport", pdfExport: "pdfExport" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [resizable]=\"resizable()\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\"\n (excelExport)=\"excelExport.emit($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n [allPages]=\"pdfOptions.allPages\"\n [paperSize]=\"pdfOptions.paperSize\"\n [scale]=\"pdfOptions.scale\"\n [landscape]=\"pdfOptions.landscape\"\n [repeatHeaders]=\"true\" />\n\n <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n <kendo-grid-messages [pagerItems]=\"pagerInfoText\"\n [pagerOf]=\"'of'\">\n </kendo-grid-messages>\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [resizable]=\"resizable()\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\"\n (excelExport)=\"excelExport.emit($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n [allPages]=\"pdfOptions.allPages\"\n [paperSize]=\"pdfOptions.paperSize\"\n [scale]=\"pdfOptions.scale\"\n [landscape]=\"pdfOptions.landscape\"\n [repeatHeaders]=\"true\" />\n\n <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n <kendo-grid-messages pagerOf=\"of\"\n [pagerItems]=\"pagerInfoText\">\n </kendo-grid-messages>\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n } @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n\n<ng-template #pagerTemplate\n kendoPagerTemplate\n let-totalPages=\"totalPages\"\n let-currentPage=\"currentPage\">\n <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n <kendo-pager-next-buttons></kendo-pager-next-buttons>\n <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{border:none;background:none;max-height:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:2px 0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}.kit-grid ::ng-deep .k-picker{height:32px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-picker:hover{border-color:var(--ui-kit-color-hover)}.kit-grid ::ng-deep .k-picker.k-focus{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-picker[aria-expanded=true] .k-svg-i-caret-alt-down:before{transform:rotate(180deg)}.kit-grid ::ng-deep .k-picker .k-svg-i-caret-alt-down:before{content:\"\\e015\";color:var(--ui-kit-color-grey-12);font-family:WebComponentsIcons,sans-serif}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}::ng-deep .k-animation-container .k-list-item.k-selected{background-color:var(--ui-kit-color-main)}::ng-deep .k-animation-container .k-list-item:hover:not(.k-selected){color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$3.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "component", type: i2$3.CustomMessagesComponent, selector: "kendo-grid-messages" }, { kind: "directive", type: i2$3.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2$3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$3.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2$3.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i3.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i3.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i3.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i3.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i2$3.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { kind: "component", type: i2$3.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5530
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridComponent, deps: [{ token: i1$a.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5531
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridComponent, isStandalone: false, selector: "kit-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, gridDataBinding: { classPropertyName: "gridDataBinding", publicName: "gridDataBinding", isSignal: false, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: false, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: false, isRequired: false, transformFunction: null }, pageable: { classPropertyName: "pageable", publicName: "pageable", isSignal: false, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, detailTemplateShowIf: { classPropertyName: "detailTemplateShowIf", publicName: "detailTemplateShowIf", isSignal: false, isRequired: false, transformFunction: null }, detailTemplateExpandDisableIf: { classPropertyName: "detailTemplateExpandDisableIf", publicName: "detailTemplateExpandDisableIf", isSignal: false, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: false, isRequired: false, transformFunction: null }, footerTitle: { classPropertyName: "footerTitle", publicName: "footerTitle", isSignal: false, isRequired: false, transformFunction: null }, footerData: { classPropertyName: "footerData", publicName: "footerData", isSignal: false, isRequired: false, transformFunction: null }, pdfOptions: { classPropertyName: "pdfOptions", publicName: "pdfOptions", isSignal: false, isRequired: false, transformFunction: null }, pagerButtonCount: { classPropertyName: "pagerButtonCount", publicName: "pagerButtonCount", isSignal: false, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: false, isRequired: false, transformFunction: null }, pagerInfoText: { classPropertyName: "pagerInfoText", publicName: "pagerInfoText", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, gridDetailTemplate: { classPropertyName: "gridDetailTemplate", publicName: "gridDetailTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked", excelExport: "excelExport", pdfExport: "pdfExport" }, queries: [{ propertyName: "columnsContent", predicate: KitGridColumnComponent, isSignal: true }], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [resizable]=\"resizable()\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\"\n (excelExport)=\"excelExport.emit($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (gridDetailTemplate()) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n [allPages]=\"pdfOptions.allPages\"\n [paperSize]=\"pdfOptions.paperSize\"\n [scale]=\"pdfOptions.scale\"\n [landscape]=\"pdfOptions.landscape\"\n [repeatHeaders]=\"true\" />\n\n <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n <kendo-grid-messages [pagerItems]=\"pagerInfoText()\"\n [pagerOf]=\"'of'\">\n </kendo-grid-messages>\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [resizable]=\"resizable()\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\"\n (excelExport)=\"excelExport.emit($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (gridDetailTemplate()) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n [allPages]=\"pdfOptions.allPages\"\n [paperSize]=\"pdfOptions.paperSize\"\n [scale]=\"pdfOptions.scale\"\n [landscape]=\"pdfOptions.landscape\"\n [repeatHeaders]=\"true\" />\n\n <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n <kendo-grid-messages pagerOf=\"of\"\n [pagerItems]=\"pagerInfoText()\">\n </kendo-grid-messages>\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns(); as columns) {\n @if (footerTitle && column === columns[0]) {\n {{ footerTitle }}\n } @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n\n<ng-template #pagerTemplate\n kendoPagerTemplate>\n <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n <kendo-pager-next-buttons></kendo-pager-next-buttons>\n <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{border:none;background:none;max-height:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:2px 0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}.kit-grid ::ng-deep .k-picker{height:32px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-picker:hover{border-color:var(--ui-kit-color-hover)}.kit-grid ::ng-deep .k-picker.k-focus{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-picker[aria-expanded=true] .k-svg-i-caret-alt-down:before{transform:rotate(180deg)}.kit-grid ::ng-deep .k-picker .k-svg-i-caret-alt-down:before{content:\"\\e015\";color:var(--ui-kit-color-grey-12);font-family:WebComponentsIcons,sans-serif}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}::ng-deep .k-animation-container .k-list-item.k-selected{background-color:var(--ui-kit-color-main)}::ng-deep .k-animation-container .k-list-item:hover:not(.k-selected){color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i3.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "component", type: i3.CustomMessagesComponent, selector: "kendo-grid-messages" }, { kind: "directive", type: i3.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i3.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i3.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i4.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i4.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i4.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i4.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i4.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i3.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { kind: "component", type: i3.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5485
5532
|
}
|
|
5486
5533
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridComponent, decorators: [{
|
|
5487
5534
|
type: Component,
|
|
5488
|
-
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [resizable]=\"resizable()\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\"\n (excelExport)=\"excelExport.emit($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n [allPages]=\"pdfOptions.allPages\"\n [paperSize]=\"pdfOptions.paperSize\"\n [scale]=\"pdfOptions.scale\"\n [landscape]=\"pdfOptions.landscape\"\n [repeatHeaders]=\"true\" />\n\n <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n <kendo-grid-messages [pagerItems]=\"pagerInfoText\"\n [pagerOf]=\"'of'\">\n </kendo-grid-messages>\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [resizable]=\"resizable()\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\"\n (excelExport)=\"excelExport.emit($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n [allPages]=\"pdfOptions.allPages\"\n [paperSize]=\"pdfOptions.paperSize\"\n [scale]=\"pdfOptions.scale\"\n [landscape]=\"pdfOptions.landscape\"\n [repeatHeaders]=\"true\" />\n\n <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n <kendo-grid-messages pagerOf=\"of\"\n [pagerItems]=\"pagerInfoText\">\n </kendo-grid-messages>\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n } @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n\n<ng-template #pagerTemplate\n kendoPagerTemplate\n let-totalPages=\"totalPages\"\n let-currentPage=\"currentPage\">\n <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n <kendo-pager-next-buttons></kendo-pager-next-buttons>\n <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{border:none;background:none;max-height:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:2px 0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}.kit-grid ::ng-deep .k-picker{height:32px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-picker:hover{border-color:var(--ui-kit-color-hover)}.kit-grid ::ng-deep .k-picker.k-focus{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-picker[aria-expanded=true] .k-svg-i-caret-alt-down:before{transform:rotate(180deg)}.kit-grid ::ng-deep .k-picker .k-svg-i-caret-alt-down:before{content:\"\\e015\";color:var(--ui-kit-color-grey-12);font-family:WebComponentsIcons,sans-serif}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}::ng-deep .k-animation-container .k-list-item.k-selected{background-color:var(--ui-kit-color-main)}::ng-deep .k-animation-container .k-list-item:hover:not(.k-selected){color:var(--ui-kit-color-main)}\n"] }]
|
|
5489
|
-
}], propDecorators: { data: [{
|
|
5535
|
+
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [resizable]=\"resizable()\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\"\n (excelExport)=\"excelExport.emit($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (gridDetailTemplate()) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n [allPages]=\"pdfOptions.allPages\"\n [paperSize]=\"pdfOptions.paperSize\"\n [scale]=\"pdfOptions.scale\"\n [landscape]=\"pdfOptions.landscape\"\n [repeatHeaders]=\"true\" />\n\n <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n <kendo-grid-messages [pagerItems]=\"pagerInfoText()\"\n [pagerOf]=\"'of'\">\n </kendo-grid-messages>\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [resizable]=\"resizable()\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\"\n (excelExport)=\"excelExport.emit($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (gridDetailTemplate()) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n [allPages]=\"pdfOptions.allPages\"\n [paperSize]=\"pdfOptions.paperSize\"\n [scale]=\"pdfOptions.scale\"\n [landscape]=\"pdfOptions.landscape\"\n [repeatHeaders]=\"true\" />\n\n <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n <kendo-grid-messages pagerOf=\"of\"\n [pagerItems]=\"pagerInfoText()\">\n </kendo-grid-messages>\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns(); as columns) {\n @if (footerTitle && column === columns[0]) {\n {{ footerTitle }}\n } @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n\n<ng-template #pagerTemplate\n kendoPagerTemplate>\n <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n <kendo-pager-next-buttons></kendo-pager-next-buttons>\n <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{border:none;background:none;max-height:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:2px 0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}.kit-grid ::ng-deep .k-picker{height:32px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-picker:hover{border-color:var(--ui-kit-color-hover)}.kit-grid ::ng-deep .k-picker.k-focus{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-picker[aria-expanded=true] .k-svg-i-caret-alt-down:before{transform:rotate(180deg)}.kit-grid ::ng-deep .k-picker .k-svg-i-caret-alt-down:before{content:\"\\e015\";color:var(--ui-kit-color-grey-12);font-family:WebComponentsIcons,sans-serif}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}::ng-deep .k-animation-container .k-list-item.k-selected{background-color:var(--ui-kit-color-main)}::ng-deep .k-animation-container .k-list-item:hover:not(.k-selected){color:var(--ui-kit-color-main)}\n"] }]
|
|
5536
|
+
}], ctorParameters: () => [{ type: i1$a.TranslateService }], propDecorators: { data: [{
|
|
5490
5537
|
type: Input
|
|
5491
5538
|
}], gridDataBinding: [{
|
|
5492
5539
|
type: Input
|
|
@@ -5516,8 +5563,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5516
5563
|
type: Input
|
|
5517
5564
|
}], pagerButtonCount: [{
|
|
5518
5565
|
type: Input
|
|
5519
|
-
}], pagerInfoText: [{
|
|
5520
|
-
type: Input
|
|
5521
5566
|
}], showPageSize: [{
|
|
5522
5567
|
type: Input
|
|
5523
5568
|
}], pageChanged: [{
|
|
@@ -5536,14 +5581,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
5536
5581
|
type: Output
|
|
5537
5582
|
}], pdfExport: [{
|
|
5538
5583
|
type: Output
|
|
5539
|
-
}], kitGridDetailTemplate: [{
|
|
5540
|
-
type: ContentChild,
|
|
5541
|
-
args: [KitGridDetailTemplateDirective, { read: TemplateRef }]
|
|
5542
5584
|
}], gridComponent: [{
|
|
5543
5585
|
type: ViewChild,
|
|
5544
5586
|
args: [GridComponent]
|
|
5545
5587
|
}] } });
|
|
5546
5588
|
|
|
5589
|
+
class KitGridDetailTemplateDirective {
|
|
5590
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5591
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: KitGridDetailTemplateDirective, isStandalone: true, selector: "[kitGridDetailTemplate]", ngImport: i0 }); }
|
|
5592
|
+
}
|
|
5593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridDetailTemplateDirective, decorators: [{
|
|
5594
|
+
type: Directive,
|
|
5595
|
+
args: [{
|
|
5596
|
+
selector: '[kitGridDetailTemplate]',
|
|
5597
|
+
standalone: true,
|
|
5598
|
+
}]
|
|
5599
|
+
}] });
|
|
5600
|
+
|
|
5547
5601
|
class KitGridModule {
|
|
5548
5602
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5549
5603
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: KitGridModule, declarations: [KitGridComponent,
|
|
@@ -6486,7 +6540,7 @@ class KitSortableComponent {
|
|
|
6486
6540
|
return this.columnCount ?? null;
|
|
6487
6541
|
}
|
|
6488
6542
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSortableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6489
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitSortableComponent, isStandalone: true, selector: "kit-sortable", inputs: { items: "items", columnCount: "columnCount", itemClass: "itemClass", activeItemClass: "activeItemClass" }, outputs: { onDragEnd: "onDragEnd" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-sortable class=\"kit-sortable\"\n [style.column-count]=\"columnsCount\"\n [kendoSortableBinding]=\"items\"\n [itemClass]=\"itemClass\"\n [activeItemClass]=\"activeItemClass\"\n [animation]=\"true\"\n (dragEnd)=\"onDragEnd.emit($event)\">\n <ng-template let-item=\"item\">\n @if (itemTemplate()) {\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n ></ng-container>\n } @else {\n {{ item }}\n }\n </ng-template>\n</kendo-sortable>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$
|
|
6543
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitSortableComponent, isStandalone: true, selector: "kit-sortable", inputs: { items: "items", columnCount: "columnCount", itemClass: "itemClass", activeItemClass: "activeItemClass" }, outputs: { onDragEnd: "onDragEnd" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-sortable class=\"kit-sortable\"\n [style.column-count]=\"columnsCount\"\n [kendoSortableBinding]=\"items\"\n [itemClass]=\"itemClass\"\n [activeItemClass]=\"activeItemClass\"\n [animation]=\"true\"\n (dragEnd)=\"onDragEnd.emit($event)\">\n <ng-template let-item=\"item\">\n @if (itemTemplate()) {\n <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n ></ng-container>\n } @else {\n {{ item }}\n }\n </ng-template>\n</kendo-sortable>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.SortableComponent, selector: "kendo-sortable", inputs: ["tabIndex", "data", "navigable", "navigatable", "animation", "disabledIndexes", "zone", "acceptZones", "itemStyle", "emptyItemStyle", "activeItemStyle", "disabledItemStyle", "itemClass", "activeItemClass", "emptyItemClass", "disabledItemClass", "emptyText", "activeIndex"], outputs: ["dragStart", "dragEnd", "dragOver", "dragLeave", "dataMove", "dataAdd", "dataRemove", "navigate"], exportAs: ["kendoSortable"] }, { kind: "directive", type: i2$3.SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: ["kendoSortableBinding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6490
6544
|
}
|
|
6491
6545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSortableComponent, decorators: [{
|
|
6492
6546
|
type: Component,
|
|
@@ -6595,6 +6649,9 @@ const kitTranslations = {
|
|
|
6595
6649
|
multiselect: {
|
|
6596
6650
|
all: 'All',
|
|
6597
6651
|
},
|
|
6652
|
+
grid: {
|
|
6653
|
+
pagerItemsText: 'items',
|
|
6654
|
+
},
|
|
6598
6655
|
},
|
|
6599
6656
|
},
|
|
6600
6657
|
};
|
|
@@ -6808,7 +6865,6 @@ class KitGridUrlStateService {
|
|
|
6808
6865
|
relativeTo: this.activatedRoute,
|
|
6809
6866
|
queryParams,
|
|
6810
6867
|
queryParamsHandling: 'merge',
|
|
6811
|
-
replaceUrl: true,
|
|
6812
6868
|
});
|
|
6813
6869
|
}
|
|
6814
6870
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridUrlStateService, deps: [{ token: i1$7.ActivatedRoute }, { token: i1$7.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
@@ -8552,11 +8608,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
8552
8608
|
], template: "<kit-button [label]=\"'kit.columns.title' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.COLUMNS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n <div class=\"kit-grid-columns-dialog\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"3\"\n [items]=\"updatedColumns()\"\n (onDragEnd)=\"checkChanges()\">\n <ng-template let-item>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">{{ item.title | translate }}</div>\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n </ng-template>\n </kit-sortable>\n </div>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'common.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'common.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px}.kit-grid-columns-dialog ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-columns-dialog ::ng-deep .item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-columns-dialog ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-columns-dialog ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-columns-dialog ::ng-deep .item-icon-menu{width:12px;height:12px;fill:var(--ui-kit-color-grey-10)}.kit-grid-columns-dialog ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-columns-dialog ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog-content{padding:0}\n"] }]
|
|
8553
8609
|
}], ctorParameters: () => [{ type: KitDialogService }, { type: i1$d.Store }, { type: i1$a.TranslateService }, { type: i0.ViewContainerRef }] });
|
|
8554
8610
|
|
|
8611
|
+
class KitSkeletonGridComponent {
|
|
8612
|
+
constructor() {
|
|
8613
|
+
this.itemsCount = input(10);
|
|
8614
|
+
this.childItems = Array(4);
|
|
8615
|
+
}
|
|
8616
|
+
get items() {
|
|
8617
|
+
return Array(this.itemsCount());
|
|
8618
|
+
}
|
|
8619
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSkeletonGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8620
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitSkeletonGridComponent, isStandalone: true, selector: "kit-skeleton-grid", inputs: { itemsCount: { classPropertyName: "itemsCount", publicName: "itemsCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-skeleton-grid\">\n <kit-skeleton [height]=\"39\"\n ></kit-skeleton>\n\n @for (item of items; track item) {\n <div class=\"kit-skeleton-grid-items\">\n @for (child of childItems; track child) {\n <kit-skeleton class=\"kit-skeleton-grid-item\"\n [height]=\"44\"\n ></kit-skeleton>\n }\n </div>\n }\n</div>\n", styles: [".kit-skeleton-grid{display:flex;flex-direction:column;gap:1px}.kit-skeleton-grid-items{display:flex;justify-content:space-between;gap:1px}.kit-skeleton-grid-item{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: KitSkeletonModule }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8621
|
+
}
|
|
8622
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSkeletonGridComponent, decorators: [{
|
|
8623
|
+
type: Component,
|
|
8624
|
+
args: [{ selector: 'kit-skeleton-grid', imports: [
|
|
8625
|
+
KitSkeletonModule,
|
|
8626
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-skeleton-grid\">\n <kit-skeleton [height]=\"39\"\n ></kit-skeleton>\n\n @for (item of items; track item) {\n <div class=\"kit-skeleton-grid-items\">\n @for (child of childItems; track child) {\n <kit-skeleton class=\"kit-skeleton-grid-item\"\n [height]=\"44\"\n ></kit-skeleton>\n }\n </div>\n }\n</div>\n", styles: [".kit-skeleton-grid{display:flex;flex-direction:column;gap:1px}.kit-skeleton-grid-items{display:flex;justify-content:space-between;gap:1px}.kit-skeleton-grid-item{flex:1}\n"] }]
|
|
8627
|
+
}] });
|
|
8628
|
+
|
|
8629
|
+
class KitEntityGridComponent {
|
|
8630
|
+
constructor(store, kitBreadcrumbsService, kitGridUrlStateService) {
|
|
8631
|
+
this.store = store;
|
|
8632
|
+
this.kitBreadcrumbsService = kitBreadcrumbsService;
|
|
8633
|
+
this.kitGridUrlStateService = kitGridUrlStateService;
|
|
8634
|
+
this.gridData = input.required();
|
|
8635
|
+
this.title = input.required();
|
|
8636
|
+
this.gridColumns = input.required();
|
|
8637
|
+
this.defaultViewName = input.required();
|
|
8638
|
+
this.viewGroup = input.required();
|
|
8639
|
+
this.viewGroupConfig = input.required();
|
|
8640
|
+
this.pdfOptions = input.required();
|
|
8641
|
+
this.getExportedData = input.required();
|
|
8642
|
+
this.defaultSorting = input([]);
|
|
8643
|
+
this.filterExcludedColumns = input([]);
|
|
8644
|
+
this.systemViews = input([]);
|
|
8645
|
+
this.translationMap = input({});
|
|
8646
|
+
this.isDetailTemplateVisible = input(() => false);
|
|
8647
|
+
this.detailTemplateExpandDisableIf = input(() => false);
|
|
8648
|
+
this.gridHasData = input(false);
|
|
8649
|
+
this.isLoading = input(false);
|
|
8650
|
+
this.pagerInfoText = input('');
|
|
8651
|
+
this.gridViewChanged = output();
|
|
8652
|
+
this.kitGridComponent = viewChild((KitGridComponent));
|
|
8653
|
+
this.gridExportComponent = viewChild(KitGridExportComponent);
|
|
8654
|
+
this.columns = contentChildren(KitGridColumnComponent);
|
|
8655
|
+
this.gridDetailTemplate = contentChild(KitGridDetailTemplateDirective, {
|
|
8656
|
+
read: TemplateRef,
|
|
8657
|
+
});
|
|
8658
|
+
this.drawPdf = computed(() => this.kitGridComponent()?.gridComponent?.drawPDF.bind(this.kitGridComponent()?.gridComponent));
|
|
8659
|
+
this.filters$ = this.store.select(KIT_GRID_STATE_TOKEN).pipe(map(gridData => gridData.filter));
|
|
8660
|
+
this.gridState$ = this.store.select(KIT_GRID_STATE_TOKEN);
|
|
8661
|
+
this.pageSize = 10;
|
|
8662
|
+
this.sortable = {
|
|
8663
|
+
mode: KitGridSortSettingsMode.MULTIPLE,
|
|
8664
|
+
};
|
|
8665
|
+
this.breadcrumbs = this.kitBreadcrumbsService.breadcrumbs;
|
|
8666
|
+
this.filtersVisible = signal(false);
|
|
8667
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
8668
|
+
this.kitButtonType = KitButtonType;
|
|
8669
|
+
this.kitButtonKind = KitButtonKind;
|
|
8670
|
+
this.kitButtonIconPosition = KitButtonIconPosition;
|
|
8671
|
+
this.kitBadgeTheme = KitBadgeTheme;
|
|
8672
|
+
this.isExporting = signal(false);
|
|
8673
|
+
effect(() => {
|
|
8674
|
+
this.isExporting.set(!!this.gridExportComponent()?.isGridExporting());
|
|
8675
|
+
this.kitGridComponent()?.columns.set(this.columns());
|
|
8676
|
+
});
|
|
8677
|
+
}
|
|
8678
|
+
onPageSizeChanged(event) {
|
|
8679
|
+
this.store.dispatch(new SetGridSkip(event.skip));
|
|
8680
|
+
this.pageSize = event.take;
|
|
8681
|
+
}
|
|
8682
|
+
onFiltersToggle() {
|
|
8683
|
+
this.filtersVisible.update(() => !this.filtersVisible());
|
|
8684
|
+
}
|
|
8685
|
+
onGridViewChange() {
|
|
8686
|
+
this.gridViewChanged.emit();
|
|
8687
|
+
}
|
|
8688
|
+
onDataStateChange(event) {
|
|
8689
|
+
this.store.dispatch([
|
|
8690
|
+
new SetGridSkip(event.skip),
|
|
8691
|
+
new SetGridTake(event.take),
|
|
8692
|
+
new SetGridSort(event.sort ?? []),
|
|
8693
|
+
]).subscribe(() => this.kitGridUrlStateService.setGridStateToUrl(this.store.selectSnapshot(KIT_GRID_STATE_TOKEN)));
|
|
8694
|
+
}
|
|
8695
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitEntityGridComponent, deps: [{ token: i1$d.Store }, { token: KitBreadcrumbsService }, { token: KitGridUrlStateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitEntityGridComponent, isStandalone: true, selector: "kit-entity-grid", inputs: { gridData: { classPropertyName: "gridData", publicName: "gridData", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, gridColumns: { classPropertyName: "gridColumns", publicName: "gridColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null }, viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewGroupConfig: { classPropertyName: "viewGroupConfig", publicName: "viewGroupConfig", isSignal: true, isRequired: true, transformFunction: null }, pdfOptions: { classPropertyName: "pdfOptions", publicName: "pdfOptions", isSignal: true, isRequired: true, transformFunction: null }, getExportedData: { classPropertyName: "getExportedData", publicName: "getExportedData", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: false, transformFunction: null }, filterExcludedColumns: { classPropertyName: "filterExcludedColumns", publicName: "filterExcludedColumns", isSignal: true, isRequired: false, transformFunction: null }, systemViews: { classPropertyName: "systemViews", publicName: "systemViews", isSignal: true, isRequired: false, transformFunction: null }, translationMap: { classPropertyName: "translationMap", publicName: "translationMap", isSignal: true, isRequired: false, transformFunction: null }, isDetailTemplateVisible: { classPropertyName: "isDetailTemplateVisible", publicName: "isDetailTemplateVisible", isSignal: true, isRequired: false, transformFunction: null }, detailTemplateExpandDisableIf: { classPropertyName: "detailTemplateExpandDisableIf", publicName: "detailTemplateExpandDisableIf", isSignal: true, isRequired: false, transformFunction: null }, gridHasData: { classPropertyName: "gridHasData", publicName: "gridHasData", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, pagerInfoText: { classPropertyName: "pagerInfoText", publicName: "pagerInfoText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gridViewChanged: "gridViewChanged" }, providers: [
|
|
8697
|
+
KitBreadcrumbsService,
|
|
8698
|
+
KitGridUrlStateService,
|
|
8699
|
+
], queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "gridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "kitGridComponent", first: true, predicate: (KitGridComponent), descendants: true, isSignal: true }, { propertyName: "gridExportComponent", first: true, predicate: KitGridExportComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-entity-grid\">\n <kit-breadcrumbs [items]=\"breadcrumbs()\"></kit-breadcrumbs>\n <kit-entity-title>{{ title() }}</kit-entity-title>\n <div class=\"grid-header\">\n <div class=\"grid-header-top\">\n <kit-grid-views class=\"grid-header-views\"\n [viewGroup]=\"viewGroup()\"\n [viewConfigGroup]=\"viewGroupConfig()\"\n [systemViews]=\"systemViews()\"\n [defaultColumns]=\"gridColumns()\"\n [defaultViewName]=\"defaultViewName()\"\n [defaultSorting]=\"defaultSorting()\"\n (viewChanged)=\"onGridViewChange()\"\n ></kit-grid-views>\n <div class=\"grid-header-actions\">\n <div class=\"grid-header-actions-group\">\n <kit-grid-export [gridHasData]=\"gridHasData()\"\n [exportedFileName]=\"pdfOptions().fileName ?? ''\"\n [getExportedData]=\"getExportedData()\"\n [translationMap]=\"translationMap()\"\n [drawPdf]=\"drawPdf()\" />\n </div>\n <div class=\"grid-header-actions-group\">\n @if (filters$ | async; as filters) {\n <kit-button kitBadge\n [kitBadgeText]=\"filters.length\"\n [kitBadgeTheme]=\"kitBadgeTheme.DANGER\"\n [kitBadgeVisible]=\"filters.length > 0\"\n [label]=\"'filters.title' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.FILTER\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [active]=\"filtersVisible()\"\n (clicked)=\"onFiltersToggle()\"\n ></kit-button>\n }\n <kit-grid-column-manager />\n </div>\n </div>\n <div class=\"grid-header-search\">\n <kit-grid-search />\n </div>\n </div>\n @if (filtersVisible()) {\n <ng-content select=\"[filters]\"></ng-content>\n }\n </div>\n @if (gridData(); as data) {\n @if (!data.loading) {\n <kit-grid class=\"grid\"\n [data]=\"data.results\"\n [pageable]=\"true\"\n [pageSize]=\"(gridState$ | async)?.take ?? pageSize\"\n [sort]=\"(gridState$ | async)?.sort ?? defaultSorting()\"\n [sortable]=\"sortable\"\n [detailTemplateShowIf]=\"isDetailTemplateVisible()\"\n [detailTemplateExpandDisableIf]=\"detailTemplateExpandDisableIf()\"\n [pdfOptions]=\"pdfOptions()\"\n [loading]=\"isExporting() || isLoading()\"\n [skip]=\"(gridState$ | async)?.skip ?? 0\"\n [pagerInfoText]=\"pagerInfoText()\"\n [showPageSize]=\"true\"\n [gridDetailTemplate]=\"gridDetailTemplate()\"\n (pageChanged)=\"onPageSizeChanged($event)\"\n (dataStateChanged)=\"onDataStateChange($event)\"\n ></kit-grid>\n } @else {\n <kit-skeleton-grid\n ></kit-skeleton-grid>\n }\n }\n</div>\n\n", styles: [".kit-entity-grid{display:flex;flex-direction:column;gap:25px;height:calc(100vh - var(--ui-kit-header-height) - 40px)}.kit-entity-grid .grid{flex:1;overflow:auto}.grid-header{display:flex;flex-direction:column;gap:15px;container-type:inline-size}.grid-header-top{width:100%;display:flex}@container (max-width: 780px){.grid-header-top{display:grid;gap:10px;grid-template-areas:\"views .\" \"actions search\";grid-template-columns:repeat(2,1fr)}}.grid-header-views{min-width:0;flex:1;grid-area:views;grid-column:1/3}.grid-header:has(.search-textbox) .grid-header-views,.grid-header:has(.search-textbox) .grid-header-actions{display:none}.grid-header:has(.search-textbox) .grid-header-search{padding:0;width:100%;border:none}@container (max-width: 780px){.grid-header:has(.search-textbox) .grid-header-search{grid-column-start:1;display:block}}.grid-header-actions{display:flex;margin-left:30px;border-left:1px solid var(--ui-kit-color-grey-11);grid-area:actions}.grid-header-actions-group{display:flex;align-items:center;gap:15px;border-right:1px solid var(--ui-kit-color-grey-11);padding:0 30px}.grid-header-actions-group:last-child{border:none}@container (max-width: 780px){.grid-header-actions-group:first-child{padding-left:0}}@container (max-width: 780px){.grid-header-actions{border:none;margin-left:0}}.grid-header-search{padding-left:30px;border-left:1px solid var(--ui-kit-color-grey-11);grid-area:search}@container (max-width: 780px){.grid-header-search{border:none;padding:0;display:flex;justify-content:flex-end}}.grid-header-filters{width:100%}::ng-deep .k-loading-pdf-mask{display:none}::ng-deep .k-pdf-export colgroup>col:nth-child(-n+2){width:0!important}::ng-deep .k-pdf-export tbody>tr>td>a{display:none}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitBreadcrumbsModule }, { kind: "component", type: KitBreadcrumbsComponent, selector: "kit-breadcrumbs", inputs: ["items"] }, { kind: "ngmodule", type: KitEntityTitleModule }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "component", type: KitGridViewsComponent, selector: "kit-grid-views", inputs: ["viewGroup", "viewConfigGroup", "defaultColumns", "defaultViewName", "defaultSorting", "systemViews"], outputs: ["viewChanged"] }, { kind: "component", type: KitGridExportComponent, selector: "kit-grid-export", inputs: ["getExportedData", "translationMap", "exportedFileName", "drawPdf", "gridHasData", "visibleColumns"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: KitBadgeDirective, selector: "[kitBadge]", inputs: ["kitBadgeText", "kitBadgeTheme", "kitBadgeVisible"] }, { kind: "component", type: KitGridColumnManagerComponent, selector: "kit-grid-column-manager" }, { kind: "component", type: KitGridSearchComponent, selector: "kit-grid-search" }, { kind: "ngmodule", type: KitGridModule }, { kind: "component", type: KitGridComponent, selector: "kit-grid", inputs: ["data", "gridDataBinding", "sortable", "sort", "pageable", "pageSize", "skip", "loading", "detailTemplateShowIf", "detailTemplateExpandDisableIf", "showFooter", "footerTitle", "footerData", "pdfOptions", "pagerButtonCount", "showPageSize", "pagerInfoText", "resizable", "gridDetailTemplate"], outputs: ["pageChanged", "sortChanged", "dataStateChanged", "detailExpanded", "detailCollapsed", "cellClicked", "excelExport", "pdfExport"] }, { kind: "component", type: KitSkeletonGridComponent, selector: "kit-skeleton-grid", inputs: ["itemsCount"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8700
|
+
}
|
|
8701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitEntityGridComponent, decorators: [{
|
|
8702
|
+
type: Component,
|
|
8703
|
+
args: [{ selector: 'kit-entity-grid', imports: [
|
|
8704
|
+
TranslatePipe,
|
|
8705
|
+
KitBreadcrumbsModule,
|
|
8706
|
+
KitEntityTitleModule,
|
|
8707
|
+
KitGridViewsComponent,
|
|
8708
|
+
KitGridExportComponent,
|
|
8709
|
+
AsyncPipe,
|
|
8710
|
+
KitButtonModule,
|
|
8711
|
+
KitBadgeDirective,
|
|
8712
|
+
KitGridColumnManagerComponent,
|
|
8713
|
+
KitGridSearchComponent,
|
|
8714
|
+
KitGridModule,
|
|
8715
|
+
KitSkeletonGridComponent,
|
|
8716
|
+
], providers: [
|
|
8717
|
+
KitBreadcrumbsService,
|
|
8718
|
+
KitGridUrlStateService,
|
|
8719
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-entity-grid\">\n <kit-breadcrumbs [items]=\"breadcrumbs()\"></kit-breadcrumbs>\n <kit-entity-title>{{ title() }}</kit-entity-title>\n <div class=\"grid-header\">\n <div class=\"grid-header-top\">\n <kit-grid-views class=\"grid-header-views\"\n [viewGroup]=\"viewGroup()\"\n [viewConfigGroup]=\"viewGroupConfig()\"\n [systemViews]=\"systemViews()\"\n [defaultColumns]=\"gridColumns()\"\n [defaultViewName]=\"defaultViewName()\"\n [defaultSorting]=\"defaultSorting()\"\n (viewChanged)=\"onGridViewChange()\"\n ></kit-grid-views>\n <div class=\"grid-header-actions\">\n <div class=\"grid-header-actions-group\">\n <kit-grid-export [gridHasData]=\"gridHasData()\"\n [exportedFileName]=\"pdfOptions().fileName ?? ''\"\n [getExportedData]=\"getExportedData()\"\n [translationMap]=\"translationMap()\"\n [drawPdf]=\"drawPdf()\" />\n </div>\n <div class=\"grid-header-actions-group\">\n @if (filters$ | async; as filters) {\n <kit-button kitBadge\n [kitBadgeText]=\"filters.length\"\n [kitBadgeTheme]=\"kitBadgeTheme.DANGER\"\n [kitBadgeVisible]=\"filters.length > 0\"\n [label]=\"'filters.title' | translate\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.FILTER\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [active]=\"filtersVisible()\"\n (clicked)=\"onFiltersToggle()\"\n ></kit-button>\n }\n <kit-grid-column-manager />\n </div>\n </div>\n <div class=\"grid-header-search\">\n <kit-grid-search />\n </div>\n </div>\n @if (filtersVisible()) {\n <ng-content select=\"[filters]\"></ng-content>\n }\n </div>\n @if (gridData(); as data) {\n @if (!data.loading) {\n <kit-grid class=\"grid\"\n [data]=\"data.results\"\n [pageable]=\"true\"\n [pageSize]=\"(gridState$ | async)?.take ?? pageSize\"\n [sort]=\"(gridState$ | async)?.sort ?? defaultSorting()\"\n [sortable]=\"sortable\"\n [detailTemplateShowIf]=\"isDetailTemplateVisible()\"\n [detailTemplateExpandDisableIf]=\"detailTemplateExpandDisableIf()\"\n [pdfOptions]=\"pdfOptions()\"\n [loading]=\"isExporting() || isLoading()\"\n [skip]=\"(gridState$ | async)?.skip ?? 0\"\n [pagerInfoText]=\"pagerInfoText()\"\n [showPageSize]=\"true\"\n [gridDetailTemplate]=\"gridDetailTemplate()\"\n (pageChanged)=\"onPageSizeChanged($event)\"\n (dataStateChanged)=\"onDataStateChange($event)\"\n ></kit-grid>\n } @else {\n <kit-skeleton-grid\n ></kit-skeleton-grid>\n }\n }\n</div>\n\n", styles: [".kit-entity-grid{display:flex;flex-direction:column;gap:25px;height:calc(100vh - var(--ui-kit-header-height) - 40px)}.kit-entity-grid .grid{flex:1;overflow:auto}.grid-header{display:flex;flex-direction:column;gap:15px;container-type:inline-size}.grid-header-top{width:100%;display:flex}@container (max-width: 780px){.grid-header-top{display:grid;gap:10px;grid-template-areas:\"views .\" \"actions search\";grid-template-columns:repeat(2,1fr)}}.grid-header-views{min-width:0;flex:1;grid-area:views;grid-column:1/3}.grid-header:has(.search-textbox) .grid-header-views,.grid-header:has(.search-textbox) .grid-header-actions{display:none}.grid-header:has(.search-textbox) .grid-header-search{padding:0;width:100%;border:none}@container (max-width: 780px){.grid-header:has(.search-textbox) .grid-header-search{grid-column-start:1;display:block}}.grid-header-actions{display:flex;margin-left:30px;border-left:1px solid var(--ui-kit-color-grey-11);grid-area:actions}.grid-header-actions-group{display:flex;align-items:center;gap:15px;border-right:1px solid var(--ui-kit-color-grey-11);padding:0 30px}.grid-header-actions-group:last-child{border:none}@container (max-width: 780px){.grid-header-actions-group:first-child{padding-left:0}}@container (max-width: 780px){.grid-header-actions{border:none;margin-left:0}}.grid-header-search{padding-left:30px;border-left:1px solid var(--ui-kit-color-grey-11);grid-area:search}@container (max-width: 780px){.grid-header-search{border:none;padding:0;display:flex;justify-content:flex-end}}.grid-header-filters{width:100%}::ng-deep .k-loading-pdf-mask{display:none}::ng-deep .k-pdf-export colgroup>col:nth-child(-n+2){width:0!important}::ng-deep .k-pdf-export tbody>tr>td>a{display:none}\n"] }]
|
|
8720
|
+
}], ctorParameters: () => [{ type: i1$d.Store }, { type: KitBreadcrumbsService }, { type: KitGridUrlStateService }] });
|
|
8721
|
+
|
|
8555
8722
|
// KitButton
|
|
8556
8723
|
|
|
8557
8724
|
/**
|
|
8558
8725
|
* Generated bundle index. Do not edit.
|
|
8559
8726
|
*/
|
|
8560
8727
|
|
|
8561
|
-
export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, UpdateGridFilter, buildRandomUUID, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl };
|
|
8728
|
+
export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, UpdateGridFilter, buildRandomUUID, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl };
|
|
8562
8729
|
//# sourceMappingURL=indigina-ui-kit.mjs.map
|