@indigina/ui-kit 1.1.97 → 1.1.98
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.
|
@@ -125,11 +125,11 @@ export class KitGridComponent {
|
|
|
125
125
|
this.expandedRows = [];
|
|
126
126
|
}
|
|
127
127
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
128
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], 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 [(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 @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>\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 [(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 @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>\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 }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.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:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .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-12);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: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-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.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:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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", "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.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i2.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], 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 [(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 @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>\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 [(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 @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>\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 }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.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:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .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: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-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.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", "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.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i2.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
129
129
|
}
|
|
130
130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, decorators: [{
|
|
131
131
|
type: Component,
|
|
132
|
-
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, 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 [(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 @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>\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 [(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 @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>\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 }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.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:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .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-12);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: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-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.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:.6}\n"] }]
|
|
132
|
+
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, 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 [(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 @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>\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 [(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 @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>\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 }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.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:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .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: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-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.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}\n"] }]
|
|
133
133
|
}], propDecorators: { data: [{
|
|
134
134
|
type: Input
|
|
135
135
|
}], gridDataBinding: [{
|
|
@@ -5111,11 +5111,11 @@ class KitGridComponent {
|
|
|
5111
5111
|
this.expandedRows = [];
|
|
5112
5112
|
}
|
|
5113
5113
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5114
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], 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 [(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 @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>\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 [(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 @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>\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 }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.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:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .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-12);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: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-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.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:.6}\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", "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: "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: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], 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 [(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 @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>\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 [(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 @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>\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 }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.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:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .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: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-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.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}\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", "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: "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: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5115
5115
|
}
|
|
5116
5116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, decorators: [{
|
|
5117
5117
|
type: Component,
|
|
5118
|
-
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, 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 [(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 @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>\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 [(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 @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>\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 }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.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:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .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-12);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: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-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.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:.6}\n"] }]
|
|
5118
|
+
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, 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 [(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 @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>\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 [(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 @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>\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 }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.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:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .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: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-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.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}\n"] }]
|
|
5119
5119
|
}], propDecorators: { data: [{
|
|
5120
5120
|
type: Input
|
|
5121
5121
|
}], gridDataBinding: [{
|