@indigina/ui-kit 1.1.95 → 1.1.96
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/esm2022/lib/components/kit-grid/kit-grid.component.mjs +2 -2
- package/esm2022/lib/components/kit-switch/kit-switch.component.mjs +2 -2
- package/esm2022/lib/components/kit-text-label/kit-text-label.component.mjs +2 -2
- package/fesm2022/indigina-ui-kit.mjs +6 -6
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/theming.scss +1 -0
|
@@ -125,11 +125,11 @@ export class KitGridComponent {
|
|
|
125
125
|
this.expandedRows = [];
|
|
126
126
|
}
|
|
127
127
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
128
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i2.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i2.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
129
129
|
}
|
|
130
130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, decorators: [{
|
|
131
131
|
type: Component,
|
|
132
|
-
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"] }]
|
|
132
|
+
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"] }]
|
|
133
133
|
}], propDecorators: { data: [{
|
|
134
134
|
type: Input
|
|
135
135
|
}], gridDataBinding: [{
|
|
@@ -69,11 +69,11 @@ export class KitSwitchComponent {
|
|
|
69
69
|
return this.mode === KitSwitchMode.SINGLE;
|
|
70
70
|
}
|
|
71
71
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
72
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i5.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
72
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i4.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i5.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
73
73
|
}
|
|
74
74
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitSwitchComponent, decorators: [{
|
|
75
75
|
type: Component,
|
|
76
|
-
args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
76
|
+
args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
77
77
|
}], propDecorators: { items: [{
|
|
78
78
|
type: Input
|
|
79
79
|
}], mode: [{
|
|
@@ -28,11 +28,11 @@ export class KitTextLabelComponent {
|
|
|
28
28
|
this.state = KitTextLabelState.REGULAR;
|
|
29
29
|
}
|
|
30
30
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
31
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i3.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
31
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: i3.KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
32
32
|
}
|
|
33
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTextLabelComponent, decorators: [{
|
|
34
34
|
type: Component,
|
|
35
|
-
args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
35
|
+
args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
36
36
|
}], propDecorators: { label: [{
|
|
37
37
|
type: Input
|
|
38
38
|
}], value: [{
|
|
@@ -546,11 +546,11 @@ class KitSwitchComponent {
|
|
|
546
546
|
return this.mode === KitSwitchMode.SINGLE;
|
|
547
547
|
}
|
|
548
548
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
549
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
549
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitSwitchComponent, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
550
550
|
}
|
|
551
551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitSwitchComponent, decorators: [{
|
|
552
552
|
type: Component,
|
|
553
|
-
args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
553
|
+
args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-switch {{ state }}\">\n <ng-container *ngIf=\"items.length\">\n @if (label) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n <kendo-buttongroup look=\"outline\" class=\"button-group\"\n [selection]=\"mode\"\n [class.disabled]=\"disabled\">\n <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n [selected]=\"isItemSelected(item)\"\n [togglable]=\"true\"\n [disabled]=\"item.disabled && item.disabled(item)\"\n (selectedChange)=\"onItemSelect($event, item)\">\n <ng-container *ngIf=\"item.title; else icon\">\n {{ item.title }}\n </ng-container>\n\n <ng-template #icon>\n <kit-svg-icon class=\"icon-wrapper\"\n [icon]=\"item.icon\"\n ></kit-svg-icon>\n </ng-template>\n </button>\n </kendo-buttongroup>\n <kit-input-message *ngIf=\"messageText\"\n [icon]=\"messageIcon\"\n [message]=\"messageText\"\n ></kit-input-message>\n </ng-container>\n</div>\n", styles: [":root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
554
554
|
}], propDecorators: { items: [{
|
|
555
555
|
type: Input
|
|
556
556
|
}], mode: [{
|
|
@@ -1411,11 +1411,11 @@ class KitTextLabelComponent {
|
|
|
1411
1411
|
this.state = KitTextLabelState.REGULAR;
|
|
1412
1412
|
}
|
|
1413
1413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1414
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitTextLabelComponent, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1415
1415
|
}
|
|
1416
1416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitTextLabelComponent, decorators: [{
|
|
1417
1417
|
type: Component,
|
|
1418
|
-
args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
1418
|
+
args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n @if (value) {\n <kit-input-label class=\"label\"\n [text]=\"label\"\n ></kit-input-label>\n }\n\n @if (!value) {\n <kit-input-label class=\"label\"\n [text]=\"noValueMessage || label\"\n ></kit-input-label>\n }\n\n <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n <ng-template #htmlModeTemplate>\n <div class=\"value\" [innerHTML]=\"value\"></div>\n </ng-template>\n <kit-input-message *ngIf=\"messageText && value\"\n [message]=\"messageText\"\n ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-color-white: #ffffff;--ui-kit-color-black: #000000;--ui-kit-color-main: #56a2f7;--ui-kit-color-hover: #3678c3;--ui-kit-color-selected: #3678c366;--ui-kit-color-active: #3678c3;--ui-kit-color-focus: #56a2f733;--ui-kit-color-grey-0: #252b30;--ui-kit-color-grey-2: #a7b2c3;--ui-kit-color-grey-3: #c2d1d9;--ui-kit-color-grey-4: #e2e7ed;--ui-kit-color-grey-5: #fafafc;--ui-kit-color-grey-6: #ebebe4;--ui-kit-color-grey-7: #a9a8a8;--ui-kit-color-grey-8: #efefef;--ui-kit-color-grey-9: #969696;--ui-kit-color-grey-10: #2a2b32;--ui-kit-color-grey-11: #e3e4e5;--ui-kit-color-grey-12: #a9aec3;--ui-kit-color-grey-13: #f7f7f8;--ui-kit-color-grey-14: #565963;--ui-kit-color-grey-15: #f0f0f0;--ui-kit-color-grey-16: #ececf8;--ui-kit-color-grey-17: #878787;--ui-kit-color-grey-18: #727684;--ui-kit-color-green: #00b0ad;--ui-kit-color-green-1: #39c237;--ui-kit-color-green-2: #39c23733;--ui-kit-color-green-3: #1cb589;--ui-kit-color-green-4: #e0f2ed;--ui-kit-color-green-5: #e5ffe5;--ui-kit-color-red: #ef3e42;--ui-kit-color-red-20: #f8e0e0;--ui-kit-color-red-1: #f5222d;--ui-kit-color-red-2: #f5222d33;--ui-kit-color-red-3: #f9e9ea;--ui-kit-color-cobalt: #006890;--ui-kit-color-cobalt-darkest: #002a3a;--ui-kit-color-teal: #23afd2;--ui-kit-color-teal-1: #d8edf3;--ui-kit-color-orange: #faad14;--ui-kit-color-orange-1: #faad1433;--ui-kit-color-orange-2: #ff7a00;--ui-kit-color-orange-3: #fbecde;--ui-kit-color-orange-4: #fff6e4;--ui-kit-color-pink: #cd1159;--ui-kit-color-pink-1: #fae7ee;--ui-kit-color-purple: #7673ce;--ui-kit-color-purple-1: #e7e7f6;--ui-kit-color-blue: #1677ff;--ui-kit-color-blue-1: #e4eeff}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
|
|
1419
1419
|
}], propDecorators: { label: [{
|
|
1420
1420
|
type: Input
|
|
1421
1421
|
}], value: [{
|
|
@@ -5102,11 +5102,11 @@ class KitGridComponent {
|
|
|
5102
5102
|
this.expandedRows = [];
|
|
5103
5103
|
}
|
|
5104
5104
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5105
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$3.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i2$3.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2$3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$3.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2$3.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5105
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitGridComponent, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$3.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i2$3.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2$3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$3.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2$3.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5106
5106
|
}
|
|
5107
5107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitGridComponent, decorators: [{
|
|
5108
5108
|
type: Component,
|
|
5109
|
-
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"] }]
|
|
5109
|
+
args: [{ selector: 'kit-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [data]=\"data\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (sortChange)=\"onSortChange($event)\"\n (pageChange)=\"onPageChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n@if (gridDataBinding) {\n <kendo-grid class=\"kit-grid\"\n kendoGridExpandDetailsBy\n [kendoGridBinding]=\"gridDataBinding\"\n [rowClass]=\"getCssRowClass\"\n [pageable]=\"getPagerSettings()\"\n [pageSize]=\"pageSize\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n [skip]=\"skip\"\n [loading]=\"loading\"\n [(expandedDetailKeys)]=\"expandedRows\"\n (cellClick)=\"onCellClick($event)\"\n (detailExpand)=\"onDetailExpand($event)\"\n (detailCollapse)=\"onDetailCollapse($event)\"\n (pageChange)=\"onPageChange($event)\"\n (sortChange)=\"onSortChange($event)\"\n (dataStateChange)=\"onDataStateChange($event)\">\n @for (column of columns(); track column) {\n <kendo-grid-column [field]=\"column.field\"\n [sortable]=\"column.sortable\"\n [hidden]=\"column.hidden\"\n [width]=\"column.width\">\n @if (column.cellTemplate) {\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n\n <ng-template kendoGridHeaderTemplate>\n <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n ></ng-container>\n </ng-template>\n\n @if (showFooter) {\n <ng-template kendoGridFooterTemplate>\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n </ng-template>\n }\n </kendo-grid-column>\n\n @if (kitGridDetailTemplate) {\n <ng-template kendoGridDetailTemplate let-dataItem\n [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n ></ng-container>\n </ng-template>\n }\n }\n </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n <div class=\"grid-title\"\n [class.sortable]=\"isColumnSortable(column)\">\n @if (column.titleIcon) {\n <kit-svg-icon class=\"grid-title-icon\"\n [icon]=\"column.titleIcon\"\n [ngClass]=\"column.titleIconType\"\n ></kit-svg-icon>\n }\n\n <div class=\"grid-title-text\">\n {{ column.title }}\n </div>\n\n @if (sortable && column.sortable) {\n @switch (getSortingDirection(column.field)) {\n @case (kitSortDirection.ASC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n ></kit-svg-icon>\n }\n @case (kitSortDirection.DESC) {\n <kit-svg-icon class=\"grid-title-sort-icon\"\n [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n ></kit-svg-icon>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n @if (columns()) {\n @if (footerTitle && column === columns()[0]) {\n {{ footerTitle }}\n }\n @else {\n {{ footerData?.[column.field] || '' }}\n }\n }\n</ng-template>\n", styles: [".kit-grid{border:none;background:none}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:20px 0;justify-content:flex-start}.kit-grid ::ng-deep .k-detail-row .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-12);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-nav:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-nav:after{opacity:0}.kit-grid ::ng-deep .k-pager-nav.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-nav:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-nav.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.6}\n"] }]
|
|
5110
5110
|
}], propDecorators: { data: [{
|
|
5111
5111
|
type: Input
|
|
5112
5112
|
}], gridDataBinding: [{
|