@indigina/ui-kit 1.1.131 → 1.1.133
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 +796 -27
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/const/date-time.const.d.ts +2 -0
- package/lib/widgets/kit-grid-management/kit-grid-cell/kit-grid-cell.component.d.ts +10 -0
- package/lib/widgets/kit-grid-management/kit-grid-cell/kit-grid-cell.model.d.ts +2 -0
- package/lib/widgets/kit-grid-management/kit-grid-cell/kit-grid-cell.service.d.ts +17 -0
- package/lib/widgets/kit-grid-management/kit-grid-export/kit-grid-export.component.d.ts +50 -0
- package/lib/widgets/kit-grid-management/kit-grid-export/kit-grid-export.const.d.ts +8 -0
- package/lib/widgets/kit-grid-management/kit-grid-export/kit-grid-export.model.d.ts +2 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-filter-checkbox/kit-filter-checkbox.component.d.ts +33 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-filter-checkbox/kit-filter-checkbox.model.d.ts +5 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-filter-date/kit-filter-date.component.d.ts +32 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-filter-date/kit-filter-date.model.d.ts +4 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-filter-selector/kit-filter-selector.component.d.ts +26 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-filter-selector/kit-filter-selector.model.d.ts +7 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-filter-text/kit-filter-text.component.d.ts +50 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-filter-text/kit-filter-text.const.d.ts +2 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-grid-filters.component.d.ts +24 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-grid-filters.model.d.ts +5 -0
- package/lib/widgets/kit-grid-management/kit-grid-filters/kit-grid-filters.util.d.ts +5 -0
- package/lib/widgets/kit-grid-management/kit-grid-management.model.d.ts +5 -0
- package/package.json +2 -1
- package/public-api.d.ts +11 -5
|
@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy, Input, input, EventEmitter, ViewEnc
|
|
|
3
3
|
import * as i1 from '@progress/kendo-angular-buttons';
|
|
4
4
|
import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
6
|
-
import { CommonModule, NgClass, DOCUMENT, NgTemplateOutlet, DatePipe, TitleCasePipe, AsyncPipe } from '@angular/common';
|
|
6
|
+
import { CommonModule, NgClass, DOCUMENT, NgTemplateOutlet, DatePipe, TitleCasePipe, AsyncPipe, SlicePipe, DecimalPipe } from '@angular/common';
|
|
7
7
|
import * as i1$2 from '@progress/kendo-angular-label';
|
|
8
8
|
import { LabelModule } from '@progress/kendo-angular-label';
|
|
9
9
|
import { TooltipDirective, TooltipSettings } from '@progress/kendo-angular-tooltip';
|
|
@@ -32,32 +32,32 @@ import * as i1$9 from '@progress/kendo-angular-indicators';
|
|
|
32
32
|
import { IndicatorsModule } from '@progress/kendo-angular-indicators';
|
|
33
33
|
import * as i2$1 from '@progress/kendo-angular-upload';
|
|
34
34
|
import { UploadModule } from '@progress/kendo-angular-upload';
|
|
35
|
-
import * as i1$
|
|
35
|
+
import * as i1$c from '@angular/common/http';
|
|
36
36
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
37
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
37
|
+
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
38
38
|
import initials from 'initials';
|
|
39
39
|
import * as i2$2 from '@progress/kendo-angular-layout';
|
|
40
40
|
import { LayoutModule, TileLayoutModule } from '@progress/kendo-angular-layout';
|
|
41
41
|
import * as i2$3 from '@progress/kendo-angular-grid';
|
|
42
42
|
import { GridComponent, GridModule, ExcelModule, PDFModule } from '@progress/kendo-angular-grid';
|
|
43
|
-
export { ExcelExportEvent } from '@progress/kendo-angular-grid';
|
|
44
43
|
import * as i3 from '@progress/kendo-angular-pager';
|
|
45
44
|
import { PagerContextService, PagerNavigationService } from '@progress/kendo-angular-pager';
|
|
46
45
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
47
|
-
export { encodeBase64, saveAs } from '@progress/kendo-file-saver';
|
|
48
|
-
export { Workbook } from '@progress/kendo-ooxml';
|
|
49
|
-
export { pdf } from '@progress/kendo-drawing';
|
|
50
46
|
import * as i2$4 from '@progress/kendo-angular-sortable';
|
|
51
47
|
import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
|
|
52
48
|
import { toODataString } from '@progress/kendo-data-query';
|
|
53
|
-
import * as
|
|
49
|
+
import * as i1$b from '@ngx-translate/core';
|
|
54
50
|
import { TranslateModule } from '@ngx-translate/core';
|
|
55
51
|
import { __decorate } from 'tslib';
|
|
56
|
-
import * as i1$
|
|
52
|
+
import * as i1$d from '@ngxs/store';
|
|
57
53
|
import { StateToken, Action, State, createSelector, Selector } from '@ngxs/store';
|
|
58
54
|
import { patch, append, removeItem, updateItem } from '@ngxs/store/operators';
|
|
59
55
|
import { signalSetFn, SIGNAL } from '@angular/core/primitives/signals';
|
|
60
56
|
import { StateReset } from 'ngxs-reset-plugin';
|
|
57
|
+
import { json2csv } from 'json-2-csv';
|
|
58
|
+
import { Workbook } from '@progress/kendo-ooxml';
|
|
59
|
+
import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';
|
|
60
|
+
import { pdf } from '@progress/kendo-drawing';
|
|
61
61
|
|
|
62
62
|
var KitSvgIcon;
|
|
63
63
|
(function (KitSvgIcon) {
|
|
@@ -5358,11 +5358,11 @@ class KitGridComponent {
|
|
|
5358
5358
|
this.expandedRows = [];
|
|
5359
5359
|
}
|
|
5360
5360
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5361
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridComponent, isStandalone: false, 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", pdfOptions: "pdfOptions", pagerButtonCount: "pagerButtonCount", pagerInfoText: "pagerInfoText" }, 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 [(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\n [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 [(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\n [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 }\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}.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: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}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}\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 }); }
|
|
5361
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridComponent, isStandalone: false, 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", pdfOptions: "pdfOptions", pagerButtonCount: "pagerButtonCount", pagerInfoText: "pagerInfoText" }, 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 [(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\n [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 [(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\n [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 }\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: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}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}\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 }); }
|
|
5362
5362
|
}
|
|
5363
5363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridComponent, decorators: [{
|
|
5364
5364
|
type: Component,
|
|
5365
|
-
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 [(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\n [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 [(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\n [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 }\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}.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: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}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}\n"] }]
|
|
5365
|
+
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 [(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\n [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 [(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\n [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 }\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: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}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}\n"] }]
|
|
5366
5366
|
}], propDecorators: { data: [{
|
|
5367
5367
|
type: Input
|
|
5368
5368
|
}], gridDataBinding: [{
|
|
@@ -6365,6 +6365,28 @@ const kitTranslations = {
|
|
|
6365
6365
|
manageViews: 'Manage Views',
|
|
6366
6366
|
views: 'Views',
|
|
6367
6367
|
},
|
|
6368
|
+
filters: {
|
|
6369
|
+
addNewFilter: 'Add New Filter',
|
|
6370
|
+
chooseDateFrom: 'Choose Date From',
|
|
6371
|
+
chooseDateTo: 'Choose Date To',
|
|
6372
|
+
clear: 'Clear',
|
|
6373
|
+
apply: 'Apply',
|
|
6374
|
+
search: 'Search',
|
|
6375
|
+
logic: {
|
|
6376
|
+
or: 'Or',
|
|
6377
|
+
and: 'And',
|
|
6378
|
+
},
|
|
6379
|
+
operator: {
|
|
6380
|
+
contains: 'Contains',
|
|
6381
|
+
eq: 'Is equal to',
|
|
6382
|
+
isnotnull: 'Has value',
|
|
6383
|
+
isnull: 'Has no value',
|
|
6384
|
+
neq: 'Is not equal to',
|
|
6385
|
+
startswith: 'Starts with',
|
|
6386
|
+
endswith: 'Ends with',
|
|
6387
|
+
doesnotcontain: 'Does not contain',
|
|
6388
|
+
},
|
|
6389
|
+
},
|
|
6368
6390
|
},
|
|
6369
6391
|
},
|
|
6370
6392
|
};
|
|
@@ -6378,7 +6400,7 @@ class KitTranslateService {
|
|
|
6378
6400
|
this.translateService.setTranslation(lang, kitTranslations[lang], true);
|
|
6379
6401
|
});
|
|
6380
6402
|
}
|
|
6381
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, deps: [{ token:
|
|
6403
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6382
6404
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, providedIn: 'root' }); }
|
|
6383
6405
|
}
|
|
6384
6406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, decorators: [{
|
|
@@ -6386,7 +6408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
6386
6408
|
args: [{
|
|
6387
6409
|
providedIn: 'root',
|
|
6388
6410
|
}]
|
|
6389
|
-
}], ctorParameters: () => [{ type:
|
|
6411
|
+
}], ctorParameters: () => [{ type: i1$b.TranslateService }] });
|
|
6390
6412
|
|
|
6391
6413
|
class AbstractPayloadAction {
|
|
6392
6414
|
constructor(payload) {
|
|
@@ -6591,7 +6613,7 @@ class KitSettingsApiService {
|
|
|
6591
6613
|
const url = `${this.basePath}/users/me/settings/groups/${group}/${key}`;
|
|
6592
6614
|
return this.httpClient.delete(url);
|
|
6593
6615
|
}
|
|
6594
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, deps: [{ token: i1$
|
|
6616
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, deps: [{ token: i1$c.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6595
6617
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, providedIn: 'root' }); }
|
|
6596
6618
|
}
|
|
6597
6619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, decorators: [{
|
|
@@ -6599,7 +6621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
6599
6621
|
args: [{
|
|
6600
6622
|
providedIn: 'root',
|
|
6601
6623
|
}]
|
|
6602
|
-
}], ctorParameters: () => [{ type: i1$
|
|
6624
|
+
}], ctorParameters: () => [{ type: i1$c.HttpClient }, { type: undefined, decorators: [{
|
|
6603
6625
|
type: Inject,
|
|
6604
6626
|
args: [KIT_BASE_PATH]
|
|
6605
6627
|
}] }] });
|
|
@@ -6798,8 +6820,8 @@ class KitGridViewsManagerComponent extends DialogContentBase {
|
|
|
6798
6820
|
onViewRemove(view) {
|
|
6799
6821
|
this.items.update(items => items.filter(item => item.title !== view.title || item.type === KitGridViewType.SYSTEM));
|
|
6800
6822
|
}
|
|
6801
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$
|
|
6802
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"2\"\n [items]=\"items()\">\n <ng-template let-item>\n <div class=\"item-wrapper\"\n [ngClass]=\"item.type\">\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\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 [ngClass]=\"{ disabled: isSystemView(item) }\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">\n <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n </div>\n @if (isSystemView(item)) {\n <kit-svg-icon class=\"item-icon-system\"\n [icon]=\"kitSvgIcon.GLOBAL\"\n ></kit-svg-icon>\n }\n <kit-button [disabled]=\"isSystemView(item)\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"onViewRemove(item)\"\n ></kit-button>\n </div>\n </ng-template>\n </kit-sortable>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--color-grey-6)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--color-grey-8);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--color-main)}\n"], dependencies: [{ 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: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type:
|
|
6823
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$d.Store }, { token: i1$8.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6824
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"2\"\n [items]=\"items()\">\n <ng-template let-item>\n <div class=\"item-wrapper\"\n [ngClass]=\"item.type\">\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\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 [ngClass]=\"{ disabled: isSystemView(item) }\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">\n <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n </div>\n @if (isSystemView(item)) {\n <kit-svg-icon class=\"item-icon-system\"\n [icon]=\"kitSvgIcon.GLOBAL\"\n ></kit-svg-icon>\n }\n <kit-button [disabled]=\"isSystemView(item)\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"onViewRemove(item)\"\n ></kit-button>\n </div>\n </ng-template>\n </kit-sortable>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--color-grey-6)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--color-grey-8);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--color-main)}\n"], dependencies: [{ 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: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6803
6825
|
}
|
|
6804
6826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, decorators: [{
|
|
6805
6827
|
type: Component,
|
|
@@ -6813,7 +6835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
6813
6835
|
TitleCasePipe,
|
|
6814
6836
|
KitTruncateTextComponent,
|
|
6815
6837
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"2\"\n [items]=\"items()\">\n <ng-template let-item>\n <div class=\"item-wrapper\"\n [ngClass]=\"item.type\">\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\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 [ngClass]=\"{ disabled: isSystemView(item) }\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">\n <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n </div>\n @if (isSystemView(item)) {\n <kit-svg-icon class=\"item-icon-system\"\n [icon]=\"kitSvgIcon.GLOBAL\"\n ></kit-svg-icon>\n }\n <kit-button [disabled]=\"isSystemView(item)\"\n [type]=\"kitButtonType.LINK\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"onViewRemove(item)\"\n ></kit-button>\n </div>\n </ng-template>\n </kit-sortable>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--color-grey-6)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--color-grey-8);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--color-main)}\n"] }]
|
|
6816
|
-
}], ctorParameters: () => [{ type: i1$
|
|
6838
|
+
}], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$8.DialogRef }] });
|
|
6817
6839
|
|
|
6818
6840
|
class KitGridViewsListComponent {
|
|
6819
6841
|
constructor(activatedRoute, router, store, kitDialogService, translateService, viewContainerRef) {
|
|
@@ -6897,8 +6919,8 @@ class KitGridViewsListComponent {
|
|
|
6897
6919
|
? this.store.dispatch(new SetSelectedView(view))
|
|
6898
6920
|
: navigateToView(this.defaultViewName(), this.router, this.activatedRoute);
|
|
6899
6921
|
}
|
|
6900
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsListComponent, deps: [{ token: i1$7.ActivatedRoute }, { token: i1$7.Router }, { token: i1$
|
|
6901
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsListComponent, isStandalone: true, selector: "kit-grid-views-list", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n [label]=\"(selectedView()?.title ?? '') | titlecase\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [active]=\"popup.isPopupOpen\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n popupClass=\"kit-grid-views-list\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n @if (!createViewPopupVisible()) {\n <div class=\"view\">\n <div class=\"views-list\">\n @for (item of views(); track item) {\n @if (!item.hidden) {\n <div class=\"views-item\"\n [ngClass]=\"item.type\"\n [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n (click)=\"onViewSelect(item)\">\n <kit-svg-icon class=\"view-icon\"\n [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n ></kit-svg-icon>\n <div class=\"item-name\">{{ item.title | titlecase }}</div>\n <kit-svg-icon class=\"check-icon\"\n [icon]=\"kitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </div>\n }\n }\n </div>\n <div class=\"popup-action\">\n <kit-button [label]=\"'kit.views.newView' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"newViewToggle(true)\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.manageViews' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"\n ></kit-button>\n </div>\n </div>\n } @else {\n <div class=\"new-view\">\n <kit-textbox [defaultValue]=\"viewName()\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n [messageText]=\"inputMessage\"\n (changed)=\"viewName.set($event)\"\n ></kit-textbox>\n <div class=\"new-view-action\">\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"newViewToggle(false)\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!viewName() || !isViewNameValid\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n </div>\n }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item.system .view-icon{stroke:var(--color-blue-4);fill:none}::ng-deep .kit-grid-views-list .views-item.user{color:var(--color-grey-4)}::ng-deep .kit-grid-views-list .views-item.user .view-icon{fill:var(--color-grey-8);stroke:none}::ng-deep .kit-grid-views-list .views-item.user:hover{color:var(--color-main)}::ng-deep .kit-grid-views-list .views-item.user:hover .view-icon{fill:var(--color-main)}::ng-deep .kit-grid-views-list .views-item:hover{background:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active{background-color:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active .check-icon{display:block}::ng-deep .kit-grid-views-list .views-item.active.system .check-icon{stroke:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-grid-views-list .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--color-main)}::ng-deep .kit-grid-views-list .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-grid-views-list .popup-action{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--color-grey-6)}::ng-deep .kit-grid-views-list .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-grid-views-list .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--color-grey-6)}\n"], dependencies: [{ 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: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type:
|
|
6922
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsListComponent, deps: [{ token: i1$7.ActivatedRoute }, { token: i1$7.Router }, { token: i1$d.Store }, { token: KitDialogService }, { token: i1$b.TranslateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6923
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsListComponent, isStandalone: true, selector: "kit-grid-views-list", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n [label]=\"(selectedView()?.title ?? '') | titlecase\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [active]=\"popup.isPopupOpen\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n popupClass=\"kit-grid-views-list\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n @if (!createViewPopupVisible()) {\n <div class=\"view\">\n <div class=\"views-list\">\n @for (item of views(); track item) {\n @if (!item.hidden) {\n <div class=\"views-item\"\n [ngClass]=\"item.type\"\n [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n (click)=\"onViewSelect(item)\">\n <kit-svg-icon class=\"view-icon\"\n [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n ></kit-svg-icon>\n <div class=\"item-name\">{{ item.title | titlecase }}</div>\n <kit-svg-icon class=\"check-icon\"\n [icon]=\"kitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </div>\n }\n }\n </div>\n <div class=\"popup-action\">\n <kit-button [label]=\"'kit.views.newView' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"newViewToggle(true)\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.manageViews' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"\n ></kit-button>\n </div>\n </div>\n } @else {\n <div class=\"new-view\">\n <kit-textbox [defaultValue]=\"viewName()\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n [messageText]=\"inputMessage\"\n (changed)=\"viewName.set($event)\"\n ></kit-textbox>\n <div class=\"new-view-action\">\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"newViewToggle(false)\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!viewName() || !isViewNameValid\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n </div>\n }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item.system .view-icon{stroke:var(--color-blue-4);fill:none}::ng-deep .kit-grid-views-list .views-item.user{color:var(--color-grey-4)}::ng-deep .kit-grid-views-list .views-item.user .view-icon{fill:var(--color-grey-8);stroke:none}::ng-deep .kit-grid-views-list .views-item.user:hover{color:var(--color-main)}::ng-deep .kit-grid-views-list .views-item.user:hover .view-icon{fill:var(--color-main)}::ng-deep .kit-grid-views-list .views-item:hover{background:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active{background-color:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active .check-icon{display:block}::ng-deep .kit-grid-views-list .views-item.active.system .check-icon{stroke:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-grid-views-list .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--color-main)}::ng-deep .kit-grid-views-list .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-grid-views-list .popup-action{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--color-grey-6)}::ng-deep .kit-grid-views-list .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-grid-views-list .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--color-grey-6)}\n"], dependencies: [{ 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: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6902
6924
|
}
|
|
6903
6925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsListComponent, decorators: [{
|
|
6904
6926
|
type: Component,
|
|
@@ -6911,7 +6933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
6911
6933
|
NgClass,
|
|
6912
6934
|
TitleCasePipe,
|
|
6913
6935
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n [label]=\"(selectedView()?.title ?? '') | titlecase\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n [iconType]=\"kitSvgIconType.STROKE\"\n [active]=\"popup.isPopupOpen\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n popupClass=\"kit-grid-views-list\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n @if (!createViewPopupVisible()) {\n <div class=\"view\">\n <div class=\"views-list\">\n @for (item of views(); track item) {\n @if (!item.hidden) {\n <div class=\"views-item\"\n [ngClass]=\"item.type\"\n [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n (click)=\"onViewSelect(item)\">\n <kit-svg-icon class=\"view-icon\"\n [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n ></kit-svg-icon>\n <div class=\"item-name\">{{ item.title | titlecase }}</div>\n <kit-svg-icon class=\"check-icon\"\n [icon]=\"kitSvgIcon.CHECK\"\n ></kit-svg-icon>\n </div>\n }\n }\n </div>\n <div class=\"popup-action\">\n <kit-button [label]=\"'kit.views.newView' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"newViewToggle(true)\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.manageViews' | translate\"\n [type]=\"kitButtonType.TEXT\"\n [kind]=\"kitButtonKind.SMALL\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"views().length < 2\"\n (clicked)=\"openViewsManagerModal()\"\n ></kit-button>\n </div>\n </div>\n } @else {\n <div class=\"new-view\">\n <kit-textbox [defaultValue]=\"viewName()\"\n [placeholder]=\"'kit.views.enterText' | translate\"\n [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n [messageText]=\"inputMessage\"\n (changed)=\"viewName.set($event)\"\n ></kit-textbox>\n <div class=\"new-view-action\">\n <kit-button [label]=\"'kit.views.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"newViewToggle(false)\"\n ></kit-button>\n <kit-button [label]=\"'kit.views.save' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!viewName() || !isViewNameValid\"\n (clicked)=\"onViewCreate()\"\n ></kit-button>\n </div>\n </div>\n }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item.system .view-icon{stroke:var(--color-blue-4);fill:none}::ng-deep .kit-grid-views-list .views-item.user{color:var(--color-grey-4)}::ng-deep .kit-grid-views-list .views-item.user .view-icon{fill:var(--color-grey-8);stroke:none}::ng-deep .kit-grid-views-list .views-item.user:hover{color:var(--color-main)}::ng-deep .kit-grid-views-list .views-item.user:hover .view-icon{fill:var(--color-main)}::ng-deep .kit-grid-views-list .views-item:hover{background:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active{background-color:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active .check-icon{display:block}::ng-deep .kit-grid-views-list .views-item.active.system .check-icon{stroke:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-grid-views-list .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--color-main)}::ng-deep .kit-grid-views-list .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-grid-views-list .popup-action{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--color-grey-6)}::ng-deep .kit-grid-views-list .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-grid-views-list .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--color-grey-6)}\n"] }]
|
|
6914
|
-
}], ctorParameters: () => [{ type: i1$7.ActivatedRoute }, { type: i1$7.Router }, { type: i1$
|
|
6936
|
+
}], ctorParameters: () => [{ type: i1$7.ActivatedRoute }, { type: i1$7.Router }, { type: i1$d.Store }, { type: KitDialogService }, { type: i1$b.TranslateService }, { type: i0.ViewContainerRef }] });
|
|
6915
6937
|
|
|
6916
6938
|
var KitFilterType;
|
|
6917
6939
|
(function (KitFilterType) {
|
|
@@ -6920,6 +6942,21 @@ var KitFilterType;
|
|
|
6920
6942
|
KitFilterType["TEXT"] = "text";
|
|
6921
6943
|
})(KitFilterType || (KitFilterType = {}));
|
|
6922
6944
|
|
|
6945
|
+
const filterOperators = [
|
|
6946
|
+
KitFilterOperator.CONTAINS,
|
|
6947
|
+
KitFilterOperator.EQ,
|
|
6948
|
+
KitFilterOperator.IS_NOT_NULL,
|
|
6949
|
+
KitFilterOperator.IS_NULL,
|
|
6950
|
+
KitFilterOperator.NEQ,
|
|
6951
|
+
KitFilterOperator.STARTS_WITH,
|
|
6952
|
+
KitFilterOperator.ENDS_WITH,
|
|
6953
|
+
KitFilterOperator.DOES_NOT_CONTAIN,
|
|
6954
|
+
];
|
|
6955
|
+
const kitNoValueRequiredFilterOperators = [
|
|
6956
|
+
KitFilterOperator.IS_NOT_NULL,
|
|
6957
|
+
KitFilterOperator.IS_NULL,
|
|
6958
|
+
];
|
|
6959
|
+
|
|
6923
6960
|
const convertFilterStringDate = (filters) => filters.map(filter => {
|
|
6924
6961
|
return filter.type === KitFilterType.DATE && filter.value?.filters && {
|
|
6925
6962
|
...filter,
|
|
@@ -6933,6 +6970,25 @@ const convertFilterStringDate = (filters) => filters.map(filter => {
|
|
|
6933
6970
|
} || filter;
|
|
6934
6971
|
});
|
|
6935
6972
|
const removeReadonlyPropertyFromFilters = (filters) => filters.map(({ readonly, ...item }) => item);
|
|
6973
|
+
const kitBuildCheckboxFilterItems = (enumObject) => {
|
|
6974
|
+
return Object.keys(enumObject).map(item => ({
|
|
6975
|
+
title: item,
|
|
6976
|
+
value: item,
|
|
6977
|
+
checked: false,
|
|
6978
|
+
}));
|
|
6979
|
+
};
|
|
6980
|
+
const removeFilterPrefix = (value) => value.split('$filter=')[1];
|
|
6981
|
+
const filterEmptyValues = (filters) => ({
|
|
6982
|
+
logic: filters?.logic ?? KitFilterLogic.AND,
|
|
6983
|
+
filters: filters?.filters.filter(item => kitNoValueRequiredFilterOperators.includes(item.operator) || !!item.value) ?? [],
|
|
6984
|
+
});
|
|
6985
|
+
const kitBuildOdataFilter = (filter) => removeFilterPrefix(kitDataStateToODataString({
|
|
6986
|
+
filter,
|
|
6987
|
+
}));
|
|
6988
|
+
const kitBuildFilters = (filters) => ({
|
|
6989
|
+
logic: KitFilterLogic.AND,
|
|
6990
|
+
filters: filters.map(filter => filterEmptyValues(filter.value) ?? []),
|
|
6991
|
+
});
|
|
6936
6992
|
|
|
6937
6993
|
class KitGridViewsSaveComponent {
|
|
6938
6994
|
constructor(store, router, activatedRoute, translateService) {
|
|
@@ -7006,8 +7062,8 @@ class KitGridViewsSaveComponent {
|
|
|
7006
7062
|
}
|
|
7007
7063
|
this.viewName.set(value);
|
|
7008
7064
|
}
|
|
7009
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsSaveComponent, deps: [{ token: i1$
|
|
7010
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n kitTooltip\n class=\"grid-views-save-btn\"\n kitTooltipFilter=\".grid-views-save-btn\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"hasUnsavedChanges() ? '' : ('kit.views.noUnsavedChanges' | translate)\"\n [label]=\"'kit.views.save' | translate\"\n [active]=\"popup.isPopupOpen\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.DISKETTE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n popupClass=\"grid-views-save\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.views.save' | translate\"\n [cancelButtonLabel]=\"'kit.views.cancel' | translate\"\n [isApplyButtonDisabled]=\"!viewName() || !isViewNameValid\"\n (onApply)=\"onViewSave()\">\n</kit-popup>\n\n<ng-template #content>\n <kit-autocomplete [placeholder]=\"'kit.views.enterText' | translate\"\n [allowCustom]=\"true\"\n [items]=\"viewsAutocompleteItems() ?? []\"\n [closePopupIfDataNotFound]=\"true\"\n [invalid]=\"!isViewNameValid\"\n [messageText]=\"inputMessage\"\n (filterChanged)=\"onValueChange($event)\"\n (valueChanged)=\"viewName.set($event)\"\n (selectionChanged)=\"onValueChange($event)\"\n ></kit-autocomplete>\n</ng-template>\n", styles: ["::ng-deep .grid-views-save{display:flex;flex-direction:column;width:344px}::ng-deep .grid-views-save .k-popup .footer{margin-top:30px;padding-top:30px}\n"], dependencies: [{ 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: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitAutocompleteModule }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type:
|
|
7065
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsSaveComponent, deps: [{ token: i1$d.Store }, { token: i1$7.Router }, { token: i1$7.ActivatedRoute }, { token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7066
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n kitTooltip\n class=\"grid-views-save-btn\"\n kitTooltipFilter=\".grid-views-save-btn\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"hasUnsavedChanges() ? '' : ('kit.views.noUnsavedChanges' | translate)\"\n [label]=\"'kit.views.save' | translate\"\n [active]=\"popup.isPopupOpen\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.DISKETTE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n popupClass=\"grid-views-save\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.views.save' | translate\"\n [cancelButtonLabel]=\"'kit.views.cancel' | translate\"\n [isApplyButtonDisabled]=\"!viewName() || !isViewNameValid\"\n (onApply)=\"onViewSave()\">\n</kit-popup>\n\n<ng-template #content>\n <kit-autocomplete [placeholder]=\"'kit.views.enterText' | translate\"\n [allowCustom]=\"true\"\n [items]=\"viewsAutocompleteItems() ?? []\"\n [closePopupIfDataNotFound]=\"true\"\n [invalid]=\"!isViewNameValid\"\n [messageText]=\"inputMessage\"\n (filterChanged)=\"onValueChange($event)\"\n (valueChanged)=\"viewName.set($event)\"\n (selectionChanged)=\"onValueChange($event)\"\n ></kit-autocomplete>\n</ng-template>\n", styles: ["::ng-deep .grid-views-save{display:flex;flex-direction:column;width:344px}::ng-deep .grid-views-save .k-popup .footer{margin-top:30px;padding-top:30px}\n"], dependencies: [{ 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: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitAutocompleteModule }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7011
7067
|
}
|
|
7012
7068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsSaveComponent, decorators: [{
|
|
7013
7069
|
type: Component,
|
|
@@ -7018,7 +7074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
7018
7074
|
TranslateModule,
|
|
7019
7075
|
KitTooltipDirective,
|
|
7020
7076
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n kitTooltip\n class=\"grid-views-save-btn\"\n kitTooltipFilter=\".grid-views-save-btn\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [title]=\"hasUnsavedChanges() ? '' : ('kit.views.noUnsavedChanges' | translate)\"\n [label]=\"'kit.views.save' | translate\"\n [active]=\"popup.isPopupOpen\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.DISKETTE\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n popupClass=\"grid-views-save\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.views.save' | translate\"\n [cancelButtonLabel]=\"'kit.views.cancel' | translate\"\n [isApplyButtonDisabled]=\"!viewName() || !isViewNameValid\"\n (onApply)=\"onViewSave()\">\n</kit-popup>\n\n<ng-template #content>\n <kit-autocomplete [placeholder]=\"'kit.views.enterText' | translate\"\n [allowCustom]=\"true\"\n [items]=\"viewsAutocompleteItems() ?? []\"\n [closePopupIfDataNotFound]=\"true\"\n [invalid]=\"!isViewNameValid\"\n [messageText]=\"inputMessage\"\n (filterChanged)=\"onValueChange($event)\"\n (valueChanged)=\"viewName.set($event)\"\n (selectionChanged)=\"onValueChange($event)\"\n ></kit-autocomplete>\n</ng-template>\n", styles: ["::ng-deep .grid-views-save{display:flex;flex-direction:column;width:344px}::ng-deep .grid-views-save .k-popup .footer{margin-top:30px;padding-top:30px}\n"] }]
|
|
7021
|
-
}], ctorParameters: () => [{ type: i1$
|
|
7077
|
+
}], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$7.Router }, { type: i1$7.ActivatedRoute }, { type: i1$b.TranslateService }] });
|
|
7022
7078
|
|
|
7023
7079
|
class KitGridViewsComponent {
|
|
7024
7080
|
constructor(store, activatedRoute, router, destroyRef, titleCasePipe) {
|
|
@@ -7088,7 +7144,7 @@ class KitGridViewsComponent {
|
|
|
7088
7144
|
new SetGridSkip(0),
|
|
7089
7145
|
]).subscribe(() => this.viewChanged.emit());
|
|
7090
7146
|
}
|
|
7091
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, deps: [{ token: i1$
|
|
7147
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, deps: [{ token: i1$d.Store }, { token: i1$7.ActivatedRoute }, { token: i1$7.Router }, { token: i0.DestroyRef }, { token: i1$1.TitleCasePipe }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7092
7148
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsComponent, isStandalone: true, selector: "kit-grid-views", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, systemViews: { classPropertyName: "systemViews", publicName: "systemViews", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { viewChanged: "viewChanged" }, providers: [
|
|
7093
7149
|
TitleCasePipe,
|
|
7094
7150
|
], ngImport: i0, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n @if (views$ | async; as views) {\n <kit-grid-views-list [viewGroup]=\"viewGroup()\"\n [viewConfigGroup]=\"viewConfigGroup()\"\n [views]=\"views\"\n [defaultColumns]=\"defaultColumns()\"\n [defaultViewName]=\"defaultViewName()\"\n [defaultSorting]=\"defaultSorting()\"\n ></kit-grid-views-list>\n\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n ></kit-grid-views-save>\n }\n } @else {\n <kit-skeleton [width]=\"200\"\n [height]=\"32\"\n ></kit-skeleton>\n }\n }\n</div>\n", styles: [".kit-grid-views{display:flex;align-items:center;gap:16px}.kit-grid-views .popup-content{display:flex;flex-direction:column;width:296px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KitGridViewsListComponent, selector: "kit-grid-views-list", inputs: ["viewGroup", "viewConfigGroup", "views", "defaultColumns", "defaultSorting", "defaultViewName"] }, { kind: "ngmodule", type: KitSkeletonModule }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -7103,15 +7159,728 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
7103
7159
|
], providers: [
|
|
7104
7160
|
TitleCasePipe,
|
|
7105
7161
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n @if (viewsState$ | async; as viewsState) {\n @if (!viewsState.loading) {\n @if (views$ | async; as views) {\n <kit-grid-views-list [viewGroup]=\"viewGroup()\"\n [viewConfigGroup]=\"viewConfigGroup()\"\n [views]=\"views\"\n [defaultColumns]=\"defaultColumns()\"\n [defaultViewName]=\"defaultViewName()\"\n [defaultSorting]=\"defaultSorting()\"\n ></kit-grid-views-list>\n\n <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n [views]=\"views\"\n [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n ></kit-grid-views-save>\n }\n } @else {\n <kit-skeleton [width]=\"200\"\n [height]=\"32\"\n ></kit-skeleton>\n }\n }\n</div>\n", styles: [".kit-grid-views{display:flex;align-items:center;gap:16px}.kit-grid-views .popup-content{display:flex;flex-direction:column;width:296px}\n"] }]
|
|
7106
|
-
}], ctorParameters: () => [{ type: i1$
|
|
7162
|
+
}], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$7.ActivatedRoute }, { type: i1$7.Router }, { type: i0.DestroyRef }, { type: i1$1.TitleCasePipe }], propDecorators: { viewChanged: [{
|
|
7107
7163
|
type: Output
|
|
7108
7164
|
}] } });
|
|
7109
7165
|
|
|
7166
|
+
class KitFilterSelectorComponent {
|
|
7167
|
+
constructor(translateService) {
|
|
7168
|
+
this.translateService = translateService;
|
|
7169
|
+
this.items = input([]);
|
|
7170
|
+
this.itemSelected = output();
|
|
7171
|
+
this.anchor = viewChild.required('toggleButton', { read: ElementRef });
|
|
7172
|
+
this.popup = viewChild('popup', { read: KitPopupComponent });
|
|
7173
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
7174
|
+
this.kitSvgIconType = KitSvgIconType;
|
|
7175
|
+
this.kitTextboxSize = KitTextboxSize;
|
|
7176
|
+
this.kitPillType = KitPillType;
|
|
7177
|
+
this.searchTerm = signal('');
|
|
7178
|
+
this.filterItems = computed(() => this.items()
|
|
7179
|
+
.filter(item => this.translateService.instant(item.title).toLowerCase().startsWith(this.searchTerm())));
|
|
7180
|
+
}
|
|
7181
|
+
onSearchChange(value) {
|
|
7182
|
+
this.searchTerm.set(value);
|
|
7183
|
+
}
|
|
7184
|
+
onItemClick(item) {
|
|
7185
|
+
this.itemSelected.emit(item);
|
|
7186
|
+
this.searchTerm.set('');
|
|
7187
|
+
this.popup()?.close();
|
|
7188
|
+
}
|
|
7189
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterSelectorComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7190
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterSelectorComponent, isStandalone: true, selector: "kit-filter-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-selector\">\n <kit-pill #toggleButton\n [type]=\"kitPillType.DASHED\"\n [selectable]=\"true\"\n [selected]=\"popup.isPopupOpen\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"popup.toggle()\">\n {{ \"kit.filters.addNewFilter\" | translate }}\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-selector-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"filter-search\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"onSearchChange($event)\"\n ></kit-textbox>\n </div>\n <div class=\"filter-items\">\n @for (item of filterItems(); track item.field) {\n <div class=\"filter-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n {{ item.title | translate }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--color-grey-6)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--color-grey-7);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--color-grey-4)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--color-grey-8);pointer-events:none}\n"], dependencies: [{ kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7191
|
+
}
|
|
7192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterSelectorComponent, decorators: [{
|
|
7193
|
+
type: Component,
|
|
7194
|
+
args: [{ selector: 'kit-filter-selector', imports: [
|
|
7195
|
+
KitPopupComponent,
|
|
7196
|
+
TranslateModule,
|
|
7197
|
+
KitTextboxModule,
|
|
7198
|
+
KitPillComponent,
|
|
7199
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-selector\">\n <kit-pill #toggleButton\n [type]=\"kitPillType.DASHED\"\n [selectable]=\"true\"\n [selected]=\"popup.isPopupOpen\"\n [icon]=\"kitSvgIcon.PLUS\"\n [iconType]=\"kitSvgIconType.STROKE\"\n (clicked)=\"popup.toggle()\">\n {{ \"kit.filters.addNewFilter\" | translate }}\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-selector-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"filter-search\">\n <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"searchTerm()\"\n (changed)=\"onSearchChange($event)\"\n ></kit-textbox>\n </div>\n <div class=\"filter-items\">\n @for (item of filterItems(); track item.field) {\n <div class=\"filter-item\"\n [class.disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n {{ item.title | translate }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--color-grey-6)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--color-grey-7);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--color-grey-4)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--color-grey-8);pointer-events:none}\n"] }]
|
|
7200
|
+
}], ctorParameters: () => [{ type: i1$b.TranslateService }] });
|
|
7201
|
+
|
|
7202
|
+
class KitFilterCheckboxComponent {
|
|
7203
|
+
constructor() {
|
|
7204
|
+
this.filter = input.required();
|
|
7205
|
+
this.translateKeyPrefix = input('');
|
|
7206
|
+
this.items = model([]);
|
|
7207
|
+
this.filterRemoved = output();
|
|
7208
|
+
this.filterChanged = output();
|
|
7209
|
+
this.anchor = viewChild.required('toggleButton', { read: ElementRef });
|
|
7210
|
+
this.popup = viewChild('popup', { read: KitPopupComponent });
|
|
7211
|
+
this.kitTooltipPosition = KitTooltipPosition;
|
|
7212
|
+
this.selectedValues = signal([]);
|
|
7213
|
+
this.kitPillTheme = KitPillTheme;
|
|
7214
|
+
}
|
|
7215
|
+
ngOnInit() {
|
|
7216
|
+
this.initializeSelectedValues();
|
|
7217
|
+
this.updateItemsState();
|
|
7218
|
+
this.showPopupOnInit();
|
|
7219
|
+
}
|
|
7220
|
+
removeFilter() {
|
|
7221
|
+
this.popup()?.close();
|
|
7222
|
+
this.filterRemoved.emit();
|
|
7223
|
+
}
|
|
7224
|
+
applyButtonDisabled() {
|
|
7225
|
+
return !this.items().some(item => item.checked);
|
|
7226
|
+
}
|
|
7227
|
+
clearAllFilters() {
|
|
7228
|
+
this.items.update(items => items.map(item => ({
|
|
7229
|
+
...item,
|
|
7230
|
+
checked: false,
|
|
7231
|
+
})));
|
|
7232
|
+
}
|
|
7233
|
+
applyFilter() {
|
|
7234
|
+
const checkedValues = this.items().filter(item => item.checked).map(item => item.value);
|
|
7235
|
+
const checked = {
|
|
7236
|
+
logic: KitFilterLogic.OR,
|
|
7237
|
+
filters: checkedValues.map(value => ({
|
|
7238
|
+
field: this.filter().field,
|
|
7239
|
+
operator: KitFilterOperator.EQ,
|
|
7240
|
+
value,
|
|
7241
|
+
})),
|
|
7242
|
+
};
|
|
7243
|
+
this.filterChanged.emit(checked);
|
|
7244
|
+
this.selectedValues.set(checkedValues);
|
|
7245
|
+
}
|
|
7246
|
+
onPopupToggle() {
|
|
7247
|
+
this.popup()?.toggle();
|
|
7248
|
+
}
|
|
7249
|
+
close() {
|
|
7250
|
+
if (!this.filter().value && !this.selectedValues().length) {
|
|
7251
|
+
this.removeFilter();
|
|
7252
|
+
}
|
|
7253
|
+
else {
|
|
7254
|
+
this.updateItemsState();
|
|
7255
|
+
}
|
|
7256
|
+
}
|
|
7257
|
+
buildTranslateKey(value) {
|
|
7258
|
+
return `${this.translateKeyPrefix()}${value}`;
|
|
7259
|
+
}
|
|
7260
|
+
onChange() {
|
|
7261
|
+
this.items.set([...this.items()]);
|
|
7262
|
+
}
|
|
7263
|
+
initializeSelectedValues() {
|
|
7264
|
+
this.selectedValues.set(this.filter().value?.filters.map(item => item.value) ?? []);
|
|
7265
|
+
}
|
|
7266
|
+
updateItemsState() {
|
|
7267
|
+
this.items.update(items => items.map(item => ({
|
|
7268
|
+
...item,
|
|
7269
|
+
checked: this.selectedValues().includes(item.value) ?? false,
|
|
7270
|
+
})));
|
|
7271
|
+
}
|
|
7272
|
+
showPopupOnInit() {
|
|
7273
|
+
if (!this.selectedValues().length) {
|
|
7274
|
+
requestAnimationFrame(() => this.onPopupToggle());
|
|
7275
|
+
}
|
|
7276
|
+
}
|
|
7277
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7278
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues().length) {\n @if (selectedValues().length > 1) {\n <div class=\"tooltip\"\n kitTooltip\n kitTooltipFilter=\".tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ buildTranslateKey(selectedValues()[0]) | translate }}\n <span class=\"tooltip-count\">+{{ selectedValues().length - 1 }}</span>\n </div>\n } @else {\n {{ buildTranslateKey(selectedValues()[0]) | translate }}\n }\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'common.apply' | translate\"\n [cancelButtonLabel]=\"'common.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n [closePopupOnCancel]=\"false\"\n (onApply)=\"applyFilter()\"\n (onCancel)=\"clearAllFilters()\"\n (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n @for (item of items(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange()\"\n ></kit-checkbox>\n }\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @for (item of selectedValues() | slice: 1; track item) {\n <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--color-main)}.kit-filter-checkbox .tooltip-item{color:var(--color-grey-4);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitCheckboxModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7279
|
+
}
|
|
7280
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
|
|
7281
|
+
type: Component,
|
|
7282
|
+
args: [{ selector: 'kit-filter-checkbox', imports: [
|
|
7283
|
+
KitPillComponent,
|
|
7284
|
+
KitTextboxModule,
|
|
7285
|
+
TranslateModule,
|
|
7286
|
+
KitCheckboxModule,
|
|
7287
|
+
KitTooltipDirective,
|
|
7288
|
+
SlicePipe,
|
|
7289
|
+
FormsModule,
|
|
7290
|
+
KitPopupComponent,
|
|
7291
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues().length) {\n @if (selectedValues().length > 1) {\n <div class=\"tooltip\"\n kitTooltip\n kitTooltipFilter=\".tooltip\"\n [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n [kitTooltipTemplateRef]=\"tooltipTemplate\">\n {{ buildTranslateKey(selectedValues()[0]) | translate }}\n <span class=\"tooltip-count\">+{{ selectedValues().length - 1 }}</span>\n </div>\n } @else {\n {{ buildTranslateKey(selectedValues()[0]) | translate }}\n }\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-checkbox-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'common.apply' | translate\"\n [cancelButtonLabel]=\"'common.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n [closePopupOnCancel]=\"false\"\n (onApply)=\"applyFilter()\"\n (onCancel)=\"clearAllFilters()\"\n (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n @for (item of items(); track $index) {\n <kit-checkbox class=\"checkbox-item\"\n [label]=\"buildTranslateKey(item.title) | translate\"\n [(ngModel)]=\"item.checked\"\n (changed)=\"onChange()\"\n ></kit-checkbox>\n }\n </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n @for (item of selectedValues() | slice: 1; track item) {\n <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--color-main)}.kit-filter-checkbox .tooltip-item{color:var(--color-grey-4);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
|
|
7292
|
+
}] });
|
|
7293
|
+
|
|
7294
|
+
class KitFilterDateComponent {
|
|
7295
|
+
constructor() {
|
|
7296
|
+
this.filter = input.required();
|
|
7297
|
+
this.filterRemoved = output();
|
|
7298
|
+
this.filterChanged = output();
|
|
7299
|
+
this.anchor = viewChild.required('toggleButton', { read: ElementRef });
|
|
7300
|
+
this.popup = viewChild('popup', { read: KitPopupComponent });
|
|
7301
|
+
this.startDate = signal(undefined);
|
|
7302
|
+
this.endDate = signal(undefined);
|
|
7303
|
+
this.selectedValues = signal({});
|
|
7304
|
+
this.pillDateFormat = 'dd/MM/yy';
|
|
7305
|
+
this.kitPillTheme = KitPillTheme;
|
|
7306
|
+
}
|
|
7307
|
+
documentClick(event) {
|
|
7308
|
+
const datePicker = document.querySelector('.kit-datepicker-popup');
|
|
7309
|
+
const popupElement = this.popup()?.popupHTMLElement;
|
|
7310
|
+
const isClickOutsideDatePicker = !datePicker?.contains(event.target) &&
|
|
7311
|
+
!event.target.matches('.k-link') &&
|
|
7312
|
+
!event.target?.parentElement?.parentElement?.matches('.k-calendar-nav');
|
|
7313
|
+
if (!popupElement?.contains(event.target)
|
|
7314
|
+
&& !this.anchor()?.nativeElement.contains(event.target)
|
|
7315
|
+
&& isClickOutsideDatePicker) {
|
|
7316
|
+
this.popup()?.close();
|
|
7317
|
+
}
|
|
7318
|
+
}
|
|
7319
|
+
ngOnInit() {
|
|
7320
|
+
this.initializeSelectedValues();
|
|
7321
|
+
this.showPopupOnInit();
|
|
7322
|
+
}
|
|
7323
|
+
removeFilter() {
|
|
7324
|
+
this.popup()?.close();
|
|
7325
|
+
this.filterRemoved.emit();
|
|
7326
|
+
}
|
|
7327
|
+
onPopupToggle() {
|
|
7328
|
+
this.popup()?.toggle();
|
|
7329
|
+
}
|
|
7330
|
+
close() {
|
|
7331
|
+
if (!this.filter().value && !(this.selectedValues().start || this.selectedValues().end)) {
|
|
7332
|
+
this.removeFilter();
|
|
7333
|
+
}
|
|
7334
|
+
else {
|
|
7335
|
+
const [startFilter, endFilter,] = this.filter().value?.filters || [];
|
|
7336
|
+
this.startDate.set(startFilter?.value);
|
|
7337
|
+
this.endDate.set(endFilter?.value);
|
|
7338
|
+
}
|
|
7339
|
+
}
|
|
7340
|
+
onFromDateChange(date) {
|
|
7341
|
+
this.startDate.set(date);
|
|
7342
|
+
}
|
|
7343
|
+
onToDateChange(date) {
|
|
7344
|
+
this.endDate.set(date);
|
|
7345
|
+
}
|
|
7346
|
+
applyButtonDisabled() {
|
|
7347
|
+
return !this.startDate() && !this.endDate();
|
|
7348
|
+
}
|
|
7349
|
+
clearAllFilters() {
|
|
7350
|
+
this.startDate.set(undefined);
|
|
7351
|
+
this.endDate.set(undefined);
|
|
7352
|
+
}
|
|
7353
|
+
applyFilter() {
|
|
7354
|
+
const dates = {
|
|
7355
|
+
...this.startDate() && { start: this.startDate() },
|
|
7356
|
+
...this.endDate() && { end: this.endDate() },
|
|
7357
|
+
};
|
|
7358
|
+
const filterValue = {
|
|
7359
|
+
logic: KitFilterLogic.AND,
|
|
7360
|
+
filters: [
|
|
7361
|
+
{
|
|
7362
|
+
field: this.filter().field,
|
|
7363
|
+
operator: KitFilterOperator.GTE,
|
|
7364
|
+
value: dates.start,
|
|
7365
|
+
},
|
|
7366
|
+
{
|
|
7367
|
+
field: this.filter().field,
|
|
7368
|
+
operator: KitFilterOperator.LTE,
|
|
7369
|
+
value: dates.end,
|
|
7370
|
+
},
|
|
7371
|
+
],
|
|
7372
|
+
};
|
|
7373
|
+
this.filterChanged.emit(filterValue);
|
|
7374
|
+
this.selectedValues.set(dates);
|
|
7375
|
+
}
|
|
7376
|
+
initializeSelectedValues() {
|
|
7377
|
+
const filterValue = this.filter().value?.filters ?? null;
|
|
7378
|
+
this.selectedValues.set({
|
|
7379
|
+
start: filterValue?.[0]?.value,
|
|
7380
|
+
end: filterValue?.[1]?.value,
|
|
7381
|
+
});
|
|
7382
|
+
this.startDate.set(this.selectedValues()?.start);
|
|
7383
|
+
this.endDate.set(this.selectedValues()?.end);
|
|
7384
|
+
}
|
|
7385
|
+
showPopupOnInit() {
|
|
7386
|
+
if (!this.selectedValues()?.start && !this.selectedValues()?.end) {
|
|
7387
|
+
requestAnimationFrame(() => this.onPopupToggle());
|
|
7388
|
+
}
|
|
7389
|
+
}
|
|
7390
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-date\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues(); as selectedValues) {\n {{ selectedValues?.start | date: pillDateFormat }}\n @if (selectedValues?.start && selectedValues?.end) {\n -\n }\n {{ selectedValues?.end | date: pillDateFormat }}\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-date-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [closeOnOutsideClick]=\"false\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n [closePopupOnCancel]=\"false\"\n (onApply)=\"applyFilter()\"\n (onCancel)=\"clearAllFilters()\"\n (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"date-input\">\n <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n [defaultDate]=\"startDate()\"\n [max]=\"endDate()\"\n (changed)=\"onFromDateChange($event)\"\n ></kit-datepicker>\n <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n [defaultDate]=\"endDate()\"\n [min]=\"startDate()\"\n (changed)=\"onToDateChange($event)\"\n ></kit-datepicker>\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7392
|
+
}
|
|
7393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterDateComponent, decorators: [{
|
|
7394
|
+
type: Component,
|
|
7395
|
+
args: [{ selector: 'kit-filter-date', imports: [
|
|
7396
|
+
KitPillComponent,
|
|
7397
|
+
TranslateModule,
|
|
7398
|
+
KitDatepickerModule,
|
|
7399
|
+
DatePipe,
|
|
7400
|
+
KitPopupComponent,
|
|
7401
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-date\">\n <kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues(); as selectedValues) {\n {{ selectedValues?.start | date: pillDateFormat }}\n @if (selectedValues?.start && selectedValues?.end) {\n -\n }\n {{ selectedValues?.end | date: pillDateFormat }}\n }\n </kit-pill>\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-filter-date-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [closeOnOutsideClick]=\"false\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n [closePopupOnCancel]=\"false\"\n (onApply)=\"applyFilter()\"\n (onCancel)=\"clearAllFilters()\"\n (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n <div class=\"date-input\">\n <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n [defaultDate]=\"startDate()\"\n [max]=\"endDate()\"\n (changed)=\"onFromDateChange($event)\"\n ></kit-datepicker>\n <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n [defaultDate]=\"endDate()\"\n [min]=\"startDate()\"\n (changed)=\"onToDateChange($event)\"\n ></kit-datepicker>\n </div>\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"] }]
|
|
7402
|
+
}], propDecorators: { documentClick: [{
|
|
7403
|
+
type: HostListener,
|
|
7404
|
+
args: ['document:click', ['$event']]
|
|
7405
|
+
}] } });
|
|
7406
|
+
|
|
7407
|
+
class KitFilterTextComponent {
|
|
7408
|
+
constructor(translateService) {
|
|
7409
|
+
this.translateService = translateService;
|
|
7410
|
+
this.filter = input.required();
|
|
7411
|
+
this.filterRemoved = output();
|
|
7412
|
+
this.filterChanged = output();
|
|
7413
|
+
this.anchor = viewChild.required('toggleButton', { read: ElementRef });
|
|
7414
|
+
this.popup = viewChild('popup', { read: KitPopupComponent });
|
|
7415
|
+
this.kitDropdownSize = KitDropdownSize;
|
|
7416
|
+
this.kitTextboxSize = KitTextboxSize;
|
|
7417
|
+
this.filterLogicDropdownItems = Object.values(KitFilterLogic).map(item => ({
|
|
7418
|
+
text: this.translateService.instant(`kit.filters.logic.${item}`),
|
|
7419
|
+
value: item,
|
|
7420
|
+
}));
|
|
7421
|
+
this.filterOperatorDropdownItems = filterOperators.map(item => ({
|
|
7422
|
+
text: this.translateService.instant(`kit.filters.operator.${item}`),
|
|
7423
|
+
value: item,
|
|
7424
|
+
}));
|
|
7425
|
+
this.filterItems = signal({
|
|
7426
|
+
logic: KitFilterLogic.AND,
|
|
7427
|
+
filters: [],
|
|
7428
|
+
});
|
|
7429
|
+
this.selectedValues = signal(null);
|
|
7430
|
+
this.kitPillTheme = KitPillTheme;
|
|
7431
|
+
}
|
|
7432
|
+
ngOnInit() {
|
|
7433
|
+
this.initializeSelectedValues();
|
|
7434
|
+
this.showPopupOnInit();
|
|
7435
|
+
}
|
|
7436
|
+
get applyButtonDisabled() {
|
|
7437
|
+
return !this.hasActiveFilters();
|
|
7438
|
+
}
|
|
7439
|
+
onLogicChange(event) {
|
|
7440
|
+
this.filterItems.update(items => ({
|
|
7441
|
+
...items,
|
|
7442
|
+
logic: event,
|
|
7443
|
+
}));
|
|
7444
|
+
}
|
|
7445
|
+
onOperatorSelect(event, index) {
|
|
7446
|
+
this.updateFilterItem(index, { operator: event });
|
|
7447
|
+
}
|
|
7448
|
+
onValueChange(event, index) {
|
|
7449
|
+
this.updateFilterItem(index, { value: event.trim() });
|
|
7450
|
+
}
|
|
7451
|
+
removeFilter() {
|
|
7452
|
+
this.popup()?.close();
|
|
7453
|
+
this.filterRemoved.emit();
|
|
7454
|
+
}
|
|
7455
|
+
onPopupToggle() {
|
|
7456
|
+
this.popup()?.toggle();
|
|
7457
|
+
}
|
|
7458
|
+
close() {
|
|
7459
|
+
if (!this.hasActiveFilters() || !this.selectedValues()) {
|
|
7460
|
+
this.removeFilter();
|
|
7461
|
+
}
|
|
7462
|
+
}
|
|
7463
|
+
clearAllFilters() {
|
|
7464
|
+
this.resetFiltersItems();
|
|
7465
|
+
}
|
|
7466
|
+
applyFilter() {
|
|
7467
|
+
this.selectedValues.set(this.filterItems());
|
|
7468
|
+
this.filterChanged.emit(this.filterItems());
|
|
7469
|
+
}
|
|
7470
|
+
isFilterValueTextboxDisabled(index) {
|
|
7471
|
+
return this.hasNoValueRequiredOperator(this.filterItems().filters[index].operator);
|
|
7472
|
+
}
|
|
7473
|
+
getSelectedFilterText(filter) {
|
|
7474
|
+
if (this.hasNoValueRequiredOperator(filter.operator)) {
|
|
7475
|
+
return this.translateService.instant(`kit.filters.operator.${filter.operator}`);
|
|
7476
|
+
}
|
|
7477
|
+
return filter.value ?? '';
|
|
7478
|
+
}
|
|
7479
|
+
getSelectedLogicText(selectedValues) {
|
|
7480
|
+
if (!selectedValues) {
|
|
7481
|
+
return null;
|
|
7482
|
+
}
|
|
7483
|
+
const [firstFilter, secondFilter,] = selectedValues.filters;
|
|
7484
|
+
if (this.hasSelectedFilter(firstFilter) && this.hasSelectedFilter(secondFilter)) {
|
|
7485
|
+
return this.translateService.instant(`kit.filters.logic.${selectedValues.logic}`).toLowerCase();
|
|
7486
|
+
}
|
|
7487
|
+
return null;
|
|
7488
|
+
}
|
|
7489
|
+
hasNoValueRequiredOperator(operator) {
|
|
7490
|
+
return kitNoValueRequiredFilterOperators.includes(operator);
|
|
7491
|
+
}
|
|
7492
|
+
initializeSelectedValues() {
|
|
7493
|
+
const filterValue = this.filter().value;
|
|
7494
|
+
if (filterValue) {
|
|
7495
|
+
this.selectedValues.set(filterValue);
|
|
7496
|
+
this.filterItems.set(filterValue);
|
|
7497
|
+
}
|
|
7498
|
+
else {
|
|
7499
|
+
this.resetFiltersItems();
|
|
7500
|
+
}
|
|
7501
|
+
}
|
|
7502
|
+
resetFiltersItems() {
|
|
7503
|
+
const field = this.filter().field;
|
|
7504
|
+
this.filterItems.update(() => ({
|
|
7505
|
+
logic: KitFilterLogic.AND,
|
|
7506
|
+
filters: [
|
|
7507
|
+
this.createFilterItem(field),
|
|
7508
|
+
this.createFilterItem(field),
|
|
7509
|
+
],
|
|
7510
|
+
}));
|
|
7511
|
+
}
|
|
7512
|
+
showPopupOnInit() {
|
|
7513
|
+
if (!this.hasActiveFilters()) {
|
|
7514
|
+
requestAnimationFrame(() => this.onPopupToggle());
|
|
7515
|
+
}
|
|
7516
|
+
}
|
|
7517
|
+
createFilterItem(field) {
|
|
7518
|
+
return {
|
|
7519
|
+
field,
|
|
7520
|
+
value: '',
|
|
7521
|
+
operator: KitFilterOperator.CONTAINS,
|
|
7522
|
+
};
|
|
7523
|
+
}
|
|
7524
|
+
updateFilterItem(index, update) {
|
|
7525
|
+
this.filterItems.update(items => ({
|
|
7526
|
+
...items,
|
|
7527
|
+
filters: items.filters.map((item, i) => (i === index && { ...item, ...update } || item)),
|
|
7528
|
+
}));
|
|
7529
|
+
}
|
|
7530
|
+
hasActiveFilters() {
|
|
7531
|
+
return this.filterItems().filters.some(filter => this.hasSelectedFilter(filter));
|
|
7532
|
+
}
|
|
7533
|
+
hasSelectedFilter(filter) {
|
|
7534
|
+
return this.hasNoValueRequiredOperator(filter.operator) || !!filter.value;
|
|
7535
|
+
}
|
|
7536
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterTextComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7537
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterTextComponent, isStandalone: true, selector: "kit-filter-text", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues()?.filters; as selectedFilters) {\n @for (filter of selectedFilters; track $index) {\n {{ getSelectedFilterText(filter) }}\n\n @if ($index === 0) {\n {{ getSelectedLogicText(selectedValues()) }}\n }\n }\n }\n</kit-pill>\n\n<kit-popup #popup\n popupClass=\"kit-filter-text-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled\"\n [closePopupOnCancel]=\"false\"\n (onApply)=\"applyFilter()\"\n (onCancel)=\"clearAllFilters()\"\n (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n @for (item of filterItems().filters; track $index) {\n <div class=\"filter-item\">\n <kit-dropdown [items]=\"filterOperatorDropdownItems\"\n [size]=\"kitDropdownSize.SMALL\"\n [selectedItem]=\"$any(item.operator)\"\n (selected)=\"onOperatorSelect($event.value, $index)\"\n ></kit-dropdown>\n <div class=\"filter-controls\">\n <kit-textbox class=\"filter-item-value\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n ></kit-textbox>\n @if ($index === 0) {\n <kit-dropdown class=\"logic-selector\"\n [selectedItem]=\"filterItems().logic\"\n [items]=\"filterLogicDropdownItems\"\n [size]=\"kitDropdownSize.SMALL\"\n (selected)=\"onLogicChange($event.value)\"\n ></kit-dropdown>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-text-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-text-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-text-popup .filter-item-value{flex:1}::ng-deep .kit-filter-text-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-text-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "size"], outputs: ["selected"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7538
|
+
}
|
|
7539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterTextComponent, decorators: [{
|
|
7540
|
+
type: Component,
|
|
7541
|
+
args: [{ selector: 'kit-filter-text', imports: [
|
|
7542
|
+
KitDropdownModule,
|
|
7543
|
+
KitTextboxModule,
|
|
7544
|
+
KitPillComponent,
|
|
7545
|
+
TranslateModule,
|
|
7546
|
+
ReactiveFormsModule,
|
|
7547
|
+
KitPopupComponent,
|
|
7548
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n [selectable]=\"!filter().readonly\"\n [selected]=\"popup.isPopupOpen\"\n [removable]=\"!filter().readonly\"\n [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n (removed)=\"removeFilter()\"\n (clicked)=\"onPopupToggle()\">\n {{ filter().title | translate }}:\n @if (selectedValues()?.filters; as selectedFilters) {\n @for (filter of selectedFilters; track $index) {\n {{ getSelectedFilterText(filter) }}\n\n @if ($index === 0) {\n {{ getSelectedLogicText(selectedValues()) }}\n }\n }\n }\n</kit-pill>\n\n<kit-popup #popup\n popupClass=\"kit-filter-text-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\"\n [showFooter]=\"true\"\n [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n [isApplyButtonDisabled]=\"applyButtonDisabled\"\n [closePopupOnCancel]=\"false\"\n (onApply)=\"applyFilter()\"\n (onCancel)=\"clearAllFilters()\"\n (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n <div class=\"popup-content\">\n @for (item of filterItems().filters; track $index) {\n <div class=\"filter-item\">\n <kit-dropdown [items]=\"filterOperatorDropdownItems\"\n [size]=\"kitDropdownSize.SMALL\"\n [selectedItem]=\"$any(item.operator)\"\n (selected)=\"onOperatorSelect($event.value, $index)\"\n ></kit-dropdown>\n <div class=\"filter-controls\">\n <kit-textbox class=\"filter-item-value\"\n [size]=\"kitTextboxSize.SMALL\"\n [defaultValue]=\"item.value\"\n [disabled]=\"isFilterValueTextboxDisabled($index)\"\n (changed)=\"onValueChange($event, $index)\"\n ></kit-textbox>\n @if ($index === 0) {\n <kit-dropdown class=\"logic-selector\"\n [selectedItem]=\"filterItems().logic\"\n [items]=\"filterLogicDropdownItems\"\n [size]=\"kitDropdownSize.SMALL\"\n (selected)=\"onLogicChange($event.value)\"\n ></kit-dropdown>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-text-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-text-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-text-popup .filter-item-value{flex:1}::ng-deep .kit-filter-text-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-text-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
|
|
7549
|
+
}], ctorParameters: () => [{ type: i1$b.TranslateService }] });
|
|
7550
|
+
|
|
7551
|
+
class KitGridFiltersComponent {
|
|
7552
|
+
constructor(store) {
|
|
7553
|
+
this.store = store;
|
|
7554
|
+
this.excludedColumns = input.required();
|
|
7555
|
+
this.columns = input.required();
|
|
7556
|
+
this.checkboxConfig = input.required();
|
|
7557
|
+
this.filterChanged = output();
|
|
7558
|
+
this.kitFilterType = KitFilterType;
|
|
7559
|
+
this.filters = toSignal(this.store.select(KIT_GRID_STATE_TOKEN).pipe(map(gridData => gridData.filter)), { initialValue: [] });
|
|
7560
|
+
this.filterSelectorItems = computed(() => this.columns()
|
|
7561
|
+
.filter(item => !item.hidden)
|
|
7562
|
+
.filter(item => !this.excludedColumns().includes(item.field))
|
|
7563
|
+
.map(item => this.buildFilterSelectorItem(item, this.filters())));
|
|
7564
|
+
}
|
|
7565
|
+
addFilter(item) {
|
|
7566
|
+
this.store.dispatch(new AddGridFilter({
|
|
7567
|
+
title: item.title,
|
|
7568
|
+
field: item.field,
|
|
7569
|
+
type: item.filterType,
|
|
7570
|
+
value: null,
|
|
7571
|
+
}));
|
|
7572
|
+
}
|
|
7573
|
+
removeFilter(field) {
|
|
7574
|
+
this.store.dispatch(new RemoveGridFilter(field));
|
|
7575
|
+
this.filterChanged.emit();
|
|
7576
|
+
}
|
|
7577
|
+
applyFilter(filter, values) {
|
|
7578
|
+
this.store.dispatch([
|
|
7579
|
+
new UpdateGridFilter({
|
|
7580
|
+
...filter,
|
|
7581
|
+
value: values,
|
|
7582
|
+
}),
|
|
7583
|
+
new SetGridSkip(0),
|
|
7584
|
+
]);
|
|
7585
|
+
this.filterChanged.emit();
|
|
7586
|
+
}
|
|
7587
|
+
buildFilterSelectorItem(item, filters) {
|
|
7588
|
+
return {
|
|
7589
|
+
title: item.title,
|
|
7590
|
+
field: item.field,
|
|
7591
|
+
disabled: this.isFilterSelectorItemDisabled(item, filters),
|
|
7592
|
+
filterType: item.filterType,
|
|
7593
|
+
};
|
|
7594
|
+
}
|
|
7595
|
+
;
|
|
7596
|
+
isFilterSelectorItemDisabled(item, filters) {
|
|
7597
|
+
return filters.some(filter => filter.field === item.field);
|
|
7598
|
+
}
|
|
7599
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridFiltersComponent, deps: [{ token: i1$d.Store }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7600
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridFiltersComponent, isStandalone: true, selector: "kit-grid-filters", inputs: { excludedColumns: { classPropertyName: "excludedColumns", publicName: "excludedColumns", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, checkboxConfig: { classPropertyName: "checkboxConfig", publicName: "checkboxConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: "<div class=\"kit-grid-filters\">\n @for (item of filters(); track item) {\n @switch (item.type) {\n @case (kitFilterType.CHECKBOX) {\n <kit-filter-checkbox [filter]=\"item\"\n [items]=\"checkboxConfig()[item.field].items\"\n [translateKeyPrefix]=\"checkboxConfig()[item.field].translateKeyPrefix\"\n (filterRemoved)=\"removeFilter(item.field)\"\n (filterChanged)=\"applyFilter(item, $event)\"\n ></kit-filter-checkbox>\n }\n @case (kitFilterType.DATE) {\n <kit-filter-date [filter]=\"item\"\n (filterRemoved)=\"removeFilter(item.field)\"\n (filterChanged)=\"applyFilter(item, $event)\"\n ></kit-filter-date>\n }\n @case (kitFilterType.TEXT) {\n <kit-filter-text [filter]=\"item\"\n (filterRemoved)=\"removeFilter(item.field)\"\n (filterChanged)=\"applyFilter(item, $event)\"\n ></kit-filter-text>\n }\n }\n }\n\n <kit-filter-selector [items]=\"filterSelectorItems()\"\n (itemSelected)=\"addFilter($event)\"\n ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"], dependencies: [{ kind: "component", type: KitFilterSelectorComponent, selector: "kit-filter-selector", inputs: ["items"], outputs: ["itemSelected"] }, { kind: "component", type: KitFilterCheckboxComponent, selector: "kit-filter-checkbox", inputs: ["filter", "translateKeyPrefix", "items"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterDateComponent, selector: "kit-filter-date", inputs: ["filter"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterTextComponent, selector: "kit-filter-text", inputs: ["filter"], outputs: ["filterRemoved", "filterChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7601
|
+
}
|
|
7602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridFiltersComponent, decorators: [{
|
|
7603
|
+
type: Component,
|
|
7604
|
+
args: [{ selector: 'kit-grid-filters', standalone: true, imports: [
|
|
7605
|
+
KitFilterSelectorComponent,
|
|
7606
|
+
KitFilterCheckboxComponent,
|
|
7607
|
+
KitFilterDateComponent,
|
|
7608
|
+
KitFilterTextComponent,
|
|
7609
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-filters\">\n @for (item of filters(); track item) {\n @switch (item.type) {\n @case (kitFilterType.CHECKBOX) {\n <kit-filter-checkbox [filter]=\"item\"\n [items]=\"checkboxConfig()[item.field].items\"\n [translateKeyPrefix]=\"checkboxConfig()[item.field].translateKeyPrefix\"\n (filterRemoved)=\"removeFilter(item.field)\"\n (filterChanged)=\"applyFilter(item, $event)\"\n ></kit-filter-checkbox>\n }\n @case (kitFilterType.DATE) {\n <kit-filter-date [filter]=\"item\"\n (filterRemoved)=\"removeFilter(item.field)\"\n (filterChanged)=\"applyFilter(item, $event)\"\n ></kit-filter-date>\n }\n @case (kitFilterType.TEXT) {\n <kit-filter-text [filter]=\"item\"\n (filterRemoved)=\"removeFilter(item.field)\"\n (filterChanged)=\"applyFilter(item, $event)\"\n ></kit-filter-text>\n }\n }\n }\n\n <kit-filter-selector [items]=\"filterSelectorItems()\"\n (itemSelected)=\"addFilter($event)\"\n ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"] }]
|
|
7610
|
+
}], ctorParameters: () => [{ type: i1$d.Store }] });
|
|
7611
|
+
|
|
7612
|
+
var GridExportOptions;
|
|
7613
|
+
(function (GridExportOptions) {
|
|
7614
|
+
GridExportOptions["PDF"] = "pdf";
|
|
7615
|
+
GridExportOptions["CSV"] = "csv";
|
|
7616
|
+
GridExportOptions["EXCEL"] = "excel";
|
|
7617
|
+
GridExportOptions["XML"] = "xml";
|
|
7618
|
+
})(GridExportOptions || (GridExportOptions = {}));
|
|
7619
|
+
const gridExportOptions = [
|
|
7620
|
+
{
|
|
7621
|
+
label: 'Excel',
|
|
7622
|
+
checked: false,
|
|
7623
|
+
value: GridExportOptions.EXCEL,
|
|
7624
|
+
icon: KitSvgIcon.EXCEL_FILE,
|
|
7625
|
+
},
|
|
7626
|
+
{
|
|
7627
|
+
label: 'PDF',
|
|
7628
|
+
checked: false,
|
|
7629
|
+
value: GridExportOptions.PDF,
|
|
7630
|
+
icon: KitSvgIcon.PDF_FILE,
|
|
7631
|
+
},
|
|
7632
|
+
{
|
|
7633
|
+
label: 'XML',
|
|
7634
|
+
checked: false,
|
|
7635
|
+
value: GridExportOptions.XML,
|
|
7636
|
+
icon: KitSvgIcon.XML_FILE,
|
|
7637
|
+
},
|
|
7638
|
+
{
|
|
7639
|
+
label: 'CSV',
|
|
7640
|
+
checked: false,
|
|
7641
|
+
value: GridExportOptions.CSV,
|
|
7642
|
+
icon: KitSvgIcon.CSV_FILE,
|
|
7643
|
+
},
|
|
7644
|
+
];
|
|
7645
|
+
|
|
7646
|
+
const KIT_DATE_FORMAT = 'dd MMM yyyy';
|
|
7647
|
+
const KIT_DATETIME_FORMAT_LONG = 'dd MMM yyyy HH:mm:ss';
|
|
7648
|
+
|
|
7649
|
+
class KitGridCellService {
|
|
7650
|
+
constructor(translateService, decimalPipe, datePipe) {
|
|
7651
|
+
this.translateService = translateService;
|
|
7652
|
+
this.decimalPipe = decimalPipe;
|
|
7653
|
+
this.datePipe = datePipe;
|
|
7654
|
+
this.dateFormat = KIT_DATE_FORMAT;
|
|
7655
|
+
this.dateTimeFormat = KIT_DATETIME_FORMAT_LONG;
|
|
7656
|
+
}
|
|
7657
|
+
createCellValue(columnType, columnField, dataItem, translationMap = {}) {
|
|
7658
|
+
let value = dataItem[columnField];
|
|
7659
|
+
if (!value) {
|
|
7660
|
+
value = this.getNestedGridCellValue(dataItem, columnField);
|
|
7661
|
+
}
|
|
7662
|
+
if (typeof value === 'number' || columnType === 'number') {
|
|
7663
|
+
return this.decimalPipe.transform(value) ?? '';
|
|
7664
|
+
}
|
|
7665
|
+
if (columnField in translationMap && value) {
|
|
7666
|
+
value = this.translateService.instant(translationMap[columnField](value));
|
|
7667
|
+
}
|
|
7668
|
+
else if (columnType === 'date') {
|
|
7669
|
+
value = this.datePipe.transform(value, this.dateFormat) ?? '';
|
|
7670
|
+
}
|
|
7671
|
+
else if (columnType === 'dateTime') {
|
|
7672
|
+
value = this.datePipe.transform(value, this.dateTimeFormat) ?? '';
|
|
7673
|
+
}
|
|
7674
|
+
else if (columnType === 'boolean') {
|
|
7675
|
+
value = this.translateService.instant(value ? 'common.yes' : 'common.no');
|
|
7676
|
+
}
|
|
7677
|
+
return value || '';
|
|
7678
|
+
}
|
|
7679
|
+
getNestedGridCellValue(dataItem, field) {
|
|
7680
|
+
return field.split('.').reduce((acc, key) => acc && typeof acc === 'object' && key in acc && acc[key], dataItem) || '';
|
|
7681
|
+
}
|
|
7682
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellService, deps: [{ token: i1$b.TranslateService }, { token: i1$1.DecimalPipe }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7683
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellService }); }
|
|
7684
|
+
}
|
|
7685
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellService, decorators: [{
|
|
7686
|
+
type: Injectable
|
|
7687
|
+
}], ctorParameters: () => [{ type: i1$b.TranslateService }, { type: i1$1.DecimalPipe }, { type: i1$1.DatePipe }] });
|
|
7688
|
+
|
|
7689
|
+
class KitGridExportComponent {
|
|
7690
|
+
get visibleColumns() {
|
|
7691
|
+
return this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns.filter(column => !column.hidden);
|
|
7692
|
+
}
|
|
7693
|
+
constructor(translateService, notificationService, gridCellService, store) {
|
|
7694
|
+
this.translateService = translateService;
|
|
7695
|
+
this.notificationService = notificationService;
|
|
7696
|
+
this.gridCellService = gridCellService;
|
|
7697
|
+
this.store = store;
|
|
7698
|
+
this.getExportedData = input.required();
|
|
7699
|
+
this.translationMap = input.required();
|
|
7700
|
+
this.exportedFileName = input.required();
|
|
7701
|
+
this.drawPdf = input.required();
|
|
7702
|
+
this.gridHasData = input.required();
|
|
7703
|
+
this.popup = viewChild('popup', {
|
|
7704
|
+
read: KitPopupComponent,
|
|
7705
|
+
});
|
|
7706
|
+
this.anchor = viewChild.required('toggleButton', {
|
|
7707
|
+
read: ElementRef,
|
|
7708
|
+
});
|
|
7709
|
+
this.kitSvgIcon = KitSvgIcon;
|
|
7710
|
+
this.kitButtonType = KitButtonType;
|
|
7711
|
+
this.kitButtonKind = KitButtonKind;
|
|
7712
|
+
this.kitRadioButtonType = KitRadioButtonType;
|
|
7713
|
+
this.gridExportOptions = gridExportOptions;
|
|
7714
|
+
this.isGridExporting = signal(false);
|
|
7715
|
+
}
|
|
7716
|
+
onPopupToggle() {
|
|
7717
|
+
this.popup()?.toggle();
|
|
7718
|
+
}
|
|
7719
|
+
async onExport({ value }) {
|
|
7720
|
+
this.isGridExporting.set(true);
|
|
7721
|
+
this.onPopupToggle();
|
|
7722
|
+
this.notificationService.addNotification(KitNotificationType.WARNING, this.translateService.instant('export.notification.start'), true);
|
|
7723
|
+
const exportHandlers = {
|
|
7724
|
+
[GridExportOptions.PDF]: this.onExportPDF.bind(this),
|
|
7725
|
+
[GridExportOptions.EXCEL]: this.onExportExcel.bind(this),
|
|
7726
|
+
[GridExportOptions.CSV]: this.onExportCSV.bind(this),
|
|
7727
|
+
[GridExportOptions.XML]: this.onExportXML.bind(this),
|
|
7728
|
+
};
|
|
7729
|
+
return exportHandlers[value]()
|
|
7730
|
+
.then(() => {
|
|
7731
|
+
this.notificationService.addNotification(KitNotificationType.SUCCESS, this.translateService.instant('export.notification.success'), true, 3000);
|
|
7732
|
+
})
|
|
7733
|
+
.catch(() => {
|
|
7734
|
+
this.notificationService.addNotification(KitNotificationType.ERROR, this.translateService.instant('export.notification.error'), true, 3000);
|
|
7735
|
+
})
|
|
7736
|
+
.finally(() => {
|
|
7737
|
+
this.isGridExporting.set(false);
|
|
7738
|
+
});
|
|
7739
|
+
}
|
|
7740
|
+
onExportPDF() {
|
|
7741
|
+
this.isGridExporting.set(false);
|
|
7742
|
+
return new Promise((resolve, reject) => {
|
|
7743
|
+
this.drawPdf()?.()?.then((exportedPdf) => {
|
|
7744
|
+
if (!this.gridHasData()) {
|
|
7745
|
+
throw new Error();
|
|
7746
|
+
}
|
|
7747
|
+
return pdf.exportPDF(exportedPdf);
|
|
7748
|
+
})
|
|
7749
|
+
.then((dataUri) => {
|
|
7750
|
+
saveAs(dataUri, `${this.exportedFileName()}.pdf`);
|
|
7751
|
+
resolve();
|
|
7752
|
+
})
|
|
7753
|
+
.catch((err) => reject(new Error(err)));
|
|
7754
|
+
});
|
|
7755
|
+
}
|
|
7756
|
+
onExportExcel() {
|
|
7757
|
+
return new Promise((resolve, reject) => this.getExportedData()().subscribe({
|
|
7758
|
+
next: ({ data }) => {
|
|
7759
|
+
const workbook = { sheets: [{ rows: [], columns: [] }] };
|
|
7760
|
+
const columns = this.visibleColumns
|
|
7761
|
+
.map(({ title, field }) => ({
|
|
7762
|
+
value: this.translateService.instant(title || field),
|
|
7763
|
+
background: '#7a7a7a',
|
|
7764
|
+
color: '#fff',
|
|
7765
|
+
width: 170,
|
|
7766
|
+
}));
|
|
7767
|
+
const rows = this.getExportedExcelRows(columns, data, this.visibleColumns);
|
|
7768
|
+
workbook.sheets[0].rows = rows;
|
|
7769
|
+
workbook.sheets[0].columns = columns;
|
|
7770
|
+
new Workbook(workbook).toDataURL()
|
|
7771
|
+
.then((dataUrl) => saveAs(dataUrl, `${this.exportedFileName()}.xlsx`))
|
|
7772
|
+
.finally(resolve);
|
|
7773
|
+
},
|
|
7774
|
+
error: (err) => {
|
|
7775
|
+
reject(new Error(err));
|
|
7776
|
+
},
|
|
7777
|
+
}));
|
|
7778
|
+
}
|
|
7779
|
+
getExportedExcelRows(columns, data, gridColumns) {
|
|
7780
|
+
const rows = [{ cells: columns, type: 'header' }];
|
|
7781
|
+
data.forEach(row => {
|
|
7782
|
+
const rowCells = gridColumns.map((column) => ({ value: this.gridCellService.createCellValue(column.type, column.field, row, this.translationMap()) }));
|
|
7783
|
+
rows.push({ cells: rowCells, type: 'data' });
|
|
7784
|
+
});
|
|
7785
|
+
return rows;
|
|
7786
|
+
}
|
|
7787
|
+
onExportCSV() {
|
|
7788
|
+
return new Promise((resolve, reject) => this.getExportedData()().subscribe({
|
|
7789
|
+
next: ({ data }) => {
|
|
7790
|
+
const transformedData = data.map(row => {
|
|
7791
|
+
const transformedRow = {};
|
|
7792
|
+
for (const col of this.visibleColumns) {
|
|
7793
|
+
const title = this.translateService.instant(col.title);
|
|
7794
|
+
const value = this.gridCellService.createCellValue(col.type, col.field, row, this.translationMap());
|
|
7795
|
+
transformedRow[title] = value;
|
|
7796
|
+
}
|
|
7797
|
+
return transformedRow;
|
|
7798
|
+
});
|
|
7799
|
+
const csv = json2csv(transformedData);
|
|
7800
|
+
const dataURI = `data:text/plain;base64,${encodeBase64(csv)}`;
|
|
7801
|
+
saveAs(dataURI, `${this.exportedFileName()}.csv`);
|
|
7802
|
+
resolve();
|
|
7803
|
+
},
|
|
7804
|
+
error: (err) => {
|
|
7805
|
+
reject(new Error(err));
|
|
7806
|
+
},
|
|
7807
|
+
}));
|
|
7808
|
+
}
|
|
7809
|
+
onExportXML() {
|
|
7810
|
+
return new Promise((resolve, reject) => this.getExportedData()().subscribe({
|
|
7811
|
+
next: ({ data }) => {
|
|
7812
|
+
const xmlContent = this.convertToXML(data, this.visibleColumns);
|
|
7813
|
+
const blob = new Blob([xmlContent], { type: 'application/xml' });
|
|
7814
|
+
saveAs(blob, `${this.exportedFileName()}.xml`);
|
|
7815
|
+
resolve();
|
|
7816
|
+
},
|
|
7817
|
+
error: (err) => {
|
|
7818
|
+
reject(new Error(err));
|
|
7819
|
+
},
|
|
7820
|
+
}));
|
|
7821
|
+
}
|
|
7822
|
+
convertToXML(rows, columns) {
|
|
7823
|
+
const xmlHeader = '<?xml version="1.0" encoding="UTF-8"?>\n';
|
|
7824
|
+
const rootElement = 'Rows';
|
|
7825
|
+
const content = rows.map(row => {
|
|
7826
|
+
const cells = columns.map(column => {
|
|
7827
|
+
const title = this.translateService.instant(column.title).replaceAll(' ', '');
|
|
7828
|
+
const value = this.gridCellService.createCellValue(column.type, column.field, row, this.translationMap());
|
|
7829
|
+
if (value) {
|
|
7830
|
+
return this.wrapWithElement(value, title, 2);
|
|
7831
|
+
}
|
|
7832
|
+
return this.wrapWithElement('', title, 2, true);
|
|
7833
|
+
}).join('\n');
|
|
7834
|
+
return this.wrapWithElement(cells, 'Row', 1);
|
|
7835
|
+
}).join('\n');
|
|
7836
|
+
return `${xmlHeader}${this.wrapWithElement(content, rootElement)}`;
|
|
7837
|
+
}
|
|
7838
|
+
wrapWithElement(content, elementName, indentLevel = 0, isSelfClosing = false) {
|
|
7839
|
+
const indent = ' '.repeat(indentLevel);
|
|
7840
|
+
return isSelfClosing
|
|
7841
|
+
? `${indent}<${elementName}/>`
|
|
7842
|
+
: `${indent}<${elementName}>${content}</${elementName}>`;
|
|
7843
|
+
}
|
|
7844
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridExportComponent, deps: [{ token: i1$b.TranslateService }, { token: KitNotificationService }, { token: KitGridCellService }, { token: i1$d.Store }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7845
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: KitGridExportComponent, isStandalone: true, selector: "kit-grid-export", inputs: { getExportedData: { classPropertyName: "getExportedData", publicName: "getExportedData", isSignal: true, isRequired: true, transformFunction: null }, translationMap: { classPropertyName: "translationMap", publicName: "translationMap", isSignal: true, isRequired: true, transformFunction: null }, exportedFileName: { classPropertyName: "exportedFileName", publicName: "exportedFileName", isSignal: true, isRequired: true, transformFunction: null }, drawPdf: { classPropertyName: "drawPdf", publicName: "drawPdf", isSignal: true, isRequired: true, transformFunction: null }, gridHasData: { classPropertyName: "gridHasData", publicName: "gridHasData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-export\">\n <kit-button #toggleButton\n [disabled]=\"!gridHasData() || isGridExporting()\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-grid-export-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <span class=\"label\">{{ \"export.exportTableData\" | translate }}</span>\n <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n [items]=\"gridExportOptions\" \n (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup .label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitGridModule }, { 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: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitRadioButtonModule }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7846
|
+
}
|
|
7847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridExportComponent, decorators: [{
|
|
7848
|
+
type: Component,
|
|
7849
|
+
args: [{ selector: 'kit-grid-export', imports: [
|
|
7850
|
+
TranslateModule,
|
|
7851
|
+
KitGridModule,
|
|
7852
|
+
KitButtonModule,
|
|
7853
|
+
KitPopupComponent,
|
|
7854
|
+
KitRadioButtonModule,
|
|
7855
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-export\">\n <kit-button #toggleButton\n [disabled]=\"!gridHasData() || isGridExporting()\"\n [icon]=\"kitSvgIcon.DOWNLOAD\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n popupClass=\"kit-grid-export-popup\"\n [anchor]=\"anchor()\"\n [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n <span class=\"label\">{{ \"export.exportTableData\" | translate }}</span>\n <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n [items]=\"gridExportOptions\" \n (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup .label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"] }]
|
|
7856
|
+
}], ctorParameters: () => [{ type: i1$b.TranslateService }, { type: KitNotificationService }, { type: KitGridCellService }, { type: i1$d.Store }] });
|
|
7857
|
+
|
|
7858
|
+
class KitGridCellComponent {
|
|
7859
|
+
constructor() {
|
|
7860
|
+
this.dateformat = KIT_DATE_FORMAT;
|
|
7861
|
+
}
|
|
7862
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7863
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridCellComponent, isStandalone: true, selector: "kit-grid-cell", inputs: { column: "column", dataItem: "dataItem" }, ngImport: i0, template: "@switch (column.type) {\n @case (\"boolean\") {\n {{ dataItem[column.name] && \"common.yes\" || \"common.no\" | translate }}\n }\n @case (\"date\") {\n {{ dataItem[column.name] | date: dateformat }}\n }\n @case (\"number\") {\n {{ dataItem[column.name] | number }}\n }\n @default {\n {{ dataItem[column.name] }}\n }\n}\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitGridModule }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7864
|
+
}
|
|
7865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellComponent, decorators: [{
|
|
7866
|
+
type: Component,
|
|
7867
|
+
args: [{ selector: 'kit-grid-cell', imports: [
|
|
7868
|
+
TranslateModule,
|
|
7869
|
+
KitGridModule,
|
|
7870
|
+
DatePipe,
|
|
7871
|
+
DecimalPipe,
|
|
7872
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (column.type) {\n @case (\"boolean\") {\n {{ dataItem[column.name] && \"common.yes\" || \"common.no\" | translate }}\n }\n @case (\"date\") {\n {{ dataItem[column.name] | date: dateformat }}\n }\n @case (\"number\") {\n {{ dataItem[column.name] | number }}\n }\n @default {\n {{ dataItem[column.name] }}\n }\n}\n" }]
|
|
7873
|
+
}], propDecorators: { column: [{
|
|
7874
|
+
type: Input
|
|
7875
|
+
}], dataItem: [{
|
|
7876
|
+
type: Input
|
|
7877
|
+
}] } });
|
|
7878
|
+
|
|
7110
7879
|
// KitButton
|
|
7111
7880
|
|
|
7112
7881
|
/**
|
|
7113
7882
|
* Generated bundle index. Do not edit.
|
|
7114
7883
|
*/
|
|
7115
7884
|
|
|
7116
|
-
export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, KIT_BASE_PATH, 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, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitFilterType, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridModule, KitGridSortSettingsMode, KitGridState, 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, KitNumericTextboxState, 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, SetGridSkip, SetGridSort, UpdateGridFilter, buildRandomUUID, kitBuildGridColumn, kitDataStateToODataString, kitEncodeViewNameToUrl };
|
|
7885
|
+
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, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitFilterType, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSortSettingsMode, KitGridState, 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, KitNumericTextboxState, 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, SetGridSkip, SetGridSort, UpdateGridFilter, buildRandomUUID, kitBuildCheckboxFilterItems, kitBuildFilters, kitBuildGridColumn, kitBuildOdataFilter, kitDataStateToODataString, kitEncodeViewNameToUrl, kitNoValueRequiredFilterOperators };
|
|
7117
7886
|
//# sourceMappingURL=indigina-ui-kit.mjs.map
|