@indigina/ui-kit 1.1.530 → 1.1.532

package/fesm2022/indigina-ui-kit.mjs

@@ -6829,7 +6829,6 @@ var KitGridDropPosition;
 class KitGridComponent {
     constructor() {
         this.translateService = inject(TranslateService);
-        this.rowDropSwitchThresholdPx = 4;
         /**
          * Sets the data of the grid. Allows user to implement data operations manually
          */
@@ -6923,7 +6922,6 @@ class KitGridComponent {
             computation: (data) => this.cloneDataInput(data) });
         this.renderedGridDataBinding = linkedSignal({ ...(ngDevMode ? { debugName: "renderedGridDataBinding" } : /* istanbul ignore next */ {}), source: () => this.gridDataBinding(),
             computation: (data) => this.cloneGridDataBinding(data) });
-        this.dropIndicator = signal(null, ...(ngDevMode ? [{ debugName: "dropIndicator" }] : /* istanbul ignore next */ []));
         this.selectByField = computed(() => this.checkboxColumn()?.selectByField(), ...(ngDevMode ? [{ debugName: "selectByField" }] : /* istanbul ignore next */ []));
         this.forwardedColumnMarkers = signal([], ...(ngDevMode ? [{ debugName: "forwardedColumnMarkers" }] : /* istanbul ignore next */ []));
         this.columnMarkers = computed(() => {
@@ -6964,17 +6962,19 @@ class KitGridComponent {
             return 'unchecked';
         }, ...(ngDevMode ? [{ debugName: "headerCheckboxState" }] : /* istanbul ignore next */ []));
         this.expandedRows = [];
+        this.rowDropSwitchThresholdPx = 4;
+        this.dragSourceIndex = null;
+        this.lastRealTimeDestinationIndex = null;
         this.getCssRowClass = (context) => {
             const expanded = this.expandedRows.includes(context.dataItem);
             const expandDisabled = this.detailTemplateExpandDisableIf(context.dataItem);
-            const indicator = this.dropIndicator();
             const checkboxHidden = this.isCheckboxHidden(context.dataItem);
+            const isDragging = this.dragSourceIndex === context.index && this.dragSourceIndex !== null;
             const internalClasses = {
                 expanded,
                 'expand-disabled': expandDisabled,
                 'checkbox-hidden': checkboxHidden,
-                'drag-insert-before': indicator?.targetRowIndex === context.index && indicator?.position === this.kitGridDropPosition.BEFORE,
-                'drag-insert-after': indicator?.targetRowIndex === context.index && indicator?.position === this.kitGridDropPosition.AFTER,
+                'kit-grid-row-dragging': isDragging,
             };
             const externalFn = this.rowClassFn();
             const externalClasses = externalFn?.(context) ?? null;
@@ -7118,36 +7118,33 @@ class KitGridComponent {
     dragData({ dragTarget }) {
         return Number(dragTarget.dataset.kendoGridItemIndex);
     }
-    onDrop(event) {
-        const dropContext = this.getDropContext(event);
-        if (!dropContext) {
-            this.clearRowDropIndicator();
-            return;
-        }
-        if (dropContext.destinationIndex !== dropContext.sourceIndex) {
-            this.updateGridData(dropContext.collection, dropContext.sourceIndex, dropContext.destinationIndex);
-        }
-        this.rowReordered.emit(dropContext.collection);
-        this.dragTargetContainer()?.notify();
-        this.dropTargetContainer()?.notify();
-        this.clearRowDropIndicator();
+    onDrop() {
+        this.notifyReorderedAndCleanup();
     }
     onRowDragOver(event) {
         if (event.dropTargetIndex === undefined) {
-            this.clearRowDropIndicator();
+            this.clearDragAndDrop();
             return;
         }
-        const currentIndicator = this.dropIndicator();
-        const dropTargetMidpoint = this.getDropTargetMidpoint(event);
-        const distanceToMidpoint = Math.abs(event.dragEvent.clientY - dropTargetMidpoint);
-        if (currentIndicator?.targetRowIndex === event.dropTargetIndex &&
-            distanceToMidpoint <= this.rowDropSwitchThresholdPx) {
+        const sourceIndex = Number(event.dragData);
+        const collection = this.getDataCollection();
+        if (!collection || !this.isValidDropIndex(sourceIndex, collection) || !this.isValidDropIndex(event.dropTargetIndex, collection)) {
             return;
         }
-        this.dropIndicator.set({
-            targetRowIndex: event.dropTargetIndex,
-            position: this.getDropPosition(event),
-        });
+        if (this.dragSourceIndex === null) {
+            this.dragSourceIndex = sourceIndex;
+            this.lastRealTimeDestinationIndex = sourceIndex;
+        }
+        const dropPosition = this.getDropPosition(event);
+        const destinationIndex = this.calculateDestinationIndex(this.dragSourceIndex, event.dropTargetIndex, dropPosition, collection.length);
+        if (destinationIndex !== this.lastRealTimeDestinationIndex) {
+            this.performRealTimeReordering(collection, this.dragSourceIndex, destinationIndex);
+            this.lastRealTimeDestinationIndex = destinationIndex;
+            this.dragSourceIndex = destinationIndex;
+        }
+    }
+    onDragRelease() {
+        this.notifyReorderedAndCleanup();
     }
     getPagerSettings() {
         const pagerSettings = {
@@ -7163,6 +7160,13 @@ class KitGridComponent {
     saveAsExcel() {
         this.gridComponent?.saveAsExcel();
     }
+    notifyReorderedAndCleanup() {
+        const collection = this.getDataCollection();
+        if (collection && this.dragSourceIndex !== null && this.lastRealTimeDestinationIndex !== null) {
+            this.rowReordered.emit(collection);
+        }
+        this.clearDragAndDrop();
+    }
     filterOutHiddenKeys(keys) {
         const collection = this.getDataCollection();
         if (!collection) {
@@ -7256,8 +7260,21 @@ class KitGridComponent {
         }
         return dataItem;
     }
-    clearRowDropIndicator() {
-        this.dropIndicator.set(null);
+    clearDragAndDrop() {
+        this.dragSourceIndex = null;
+        this.lastRealTimeDestinationIndex = null;
+    }
+    performRealTimeReordering(collection, sourceIndex, destinationIndex) {
+        if (sourceIndex === destinationIndex) {
+            return;
+        }
+        const movedItem = collection[sourceIndex];
+        if (!movedItem) {
+            return;
+        }
+        collection.splice(sourceIndex, 1);
+        collection.splice(destinationIndex, 0, movedItem);
+        this.syncReorderedCollection(collection);
     }
     updateGridData(collection, sourceIndex, destinationIndex) {
         const movedItem = collection[sourceIndex];
@@ -7345,7 +7362,7 @@ class KitGridComponent {
             { provide: L10N_PREFIX, useValue: '' },
             PagerContextService,
             PagerNavigationService,
-        ], queries: [{ propertyName: "columnMarkersContent", predicate: KIT_GRID_COLUMN_MARKER, isSignal: true }], viewQueries: [{ propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true, isSignal: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true, isSignal: true }, { propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "@if (data()) {\n  <div class=\"kit-grid\"\n       kendoDragTargetContainer\n       kendoDropTargetContainer\n       dragTargetFilter=\".k-master-row\"\n       dropTargetFilter=\".k-master-row\"\n       dragHandle=\".k-master-row\"\n       [dragDisabled]=\"!rowReorderable()\"\n       [dropDisabled]=\"!rowReorderable()\"\n       [dragData]=\"dragData\"\n       [hint]=\"{ hintClass: 'kit-grid-row-hint' }\"\n       (onDragOver)=\"onRowDragOver($event)\"\n       (onRelease)=\"dropIndicator.set(null)\"\n       (onDrop)=\"onDrop($event)\">\n    <kendo-grid kendoGridExpandDetailsBy\n                [class.kit-grid--radio]=\"isRadioColumn()\"\n                [data]=\"renderedData()\"\n                [sortable]=\"sortable\"\n                [sort]=\"sort\"\n                [rowClass]=\"getCssRowClass\"\n                [pageable]=\"getPagerSettings()\"\n                [pageSize]=\"pageSize\"\n                [skip]=\"skip()\"\n                [loading]=\"loading()\"\n                [resizable]=\"resizable()\"\n                [(expandedDetailKeys)]=\"expandedRows\"\n                [kendoGridSelectBy]=\"selectByField() || ''\"\n                [isRowSelectable]=\"isRowSelectable.bind(this)\"\n                [selectable]=\"selectableSettings()\"\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                [selectedKeys]=\"selectedKeys()\"\n                (selectedKeysChange)=\"selectedKeys.set(limitSelectedKeys($event))\"\n                (selectionChange)=\"selectionChanged.emit($event)\"\n                (excelExport)=\"excelExport.emit($event)\">\n      @for (column of columnMarkers(); track $index) {\n        @if (isCheckboxColumn(column)) {\n          <kendo-grid-checkbox-column [width]=\"column.width()\"\n                                      [showSelectAll]=\"!isRadioColumn() && column.showSelectAll()\">\n            @if (!isRadioColumn() && column.showSelectAll()) {\n              <ng-template kendoGridHeaderTemplate>\n                <div class=\"kit-grid-select-all\">\n                  <kit-checkbox [checked]=\"headerCheckboxState() === 'checked'\"\n                                [indeterminate]=\"headerCheckboxState() === 'indeterminate'\"\n                                [disabled]=\"isHeaderCheckboxDisabled()\"\n                                (changed)=\"onHeaderCheckboxChanged($event)\">\n                  </kit-checkbox>\n                </div>\n              </ng-template>\n            }\n          </kendo-grid-checkbox-column>\n        } @else {\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\n                           let-dataItem>\n                <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n                ></ng-container>\n              </ng-template>\n            }\n\n            @if (showFooter) {\n              <ng-template kendoGridFooterTemplate>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n              </ng-template>\n            }\n          </kendo-grid-column>\n\n          @if (gridDetailTemplate()) {\n            <ng-template kendoGridDetailTemplate\n                         let-dataItem\n                         [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n              <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n              ></ng-container>\n            </ng-template>\n          }\n        }\n      }\n      <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n      <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n                      [allPages]=\"pdfOptions.allPages\"\n                      [paperSize]=\"pdfOptions.paperSize\"\n                      [scale]=\"pdfOptions.scale\"\n                      [landscape]=\"pdfOptions.landscape\"\n                      [repeatHeaders]=\"true\" />\n\n      <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n      <kendo-grid-messages [pagerItems]=\"pagerInfoText()\"\n                           [pagerOf]=\"'of'\"\n                           [noRecords]=\"noRecordsText()\">\n      </kendo-grid-messages>\n    </kendo-grid>\n  </div>\n}\n\n@if (gridDataBinding()) {\n  <div class=\"kit-grid\"\n       kendoDragTargetContainer\n       kendoDropTargetContainer\n       dragTargetFilter=\".k-master-row\"\n       dropTargetFilter=\".k-master-row\"\n       dragHandle=\".k-master-row\"\n       [dragDisabled]=\"!rowReorderable()\"\n       [dropDisabled]=\"!rowReorderable()\"\n       [dragData]=\"dragData\"\n       [hint]=\"{ hintClass: 'kit-grid-row-hint' }\"\n       (onDragOver)=\"onRowDragOver($event)\"\n       (onRelease)=\"dropIndicator.set(null)\"\n       (onDrop)=\"onDrop($event)\">\n    <kendo-grid kendoGridExpandDetailsBy\n                [class.kit-grid--radio]=\"isRadioColumn()\"\n                [kendoGridBinding]=\"renderedGridDataBinding()\"\n                [rowClass]=\"getCssRowClass\"\n                [pageable]=\"getPagerSettings()\"\n                [pageSize]=\"pageSize\"\n                [sortable]=\"sortable\"\n                [sort]=\"sort\"\n                [skip]=\"skip()\"\n                [loading]=\"loading()\"\n                [resizable]=\"resizable()\"\n                [(expandedDetailKeys)]=\"expandedRows\"\n                [kendoGridSelectBy]=\"selectByField() || ''\"\n                [isRowSelectable]=\"isRowSelectable.bind(this)\"\n                [selectable]=\"selectableSettings()\"\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                [selectedKeys]=\"selectedKeys()\"\n                (selectedKeysChange)=\"selectedKeys.set(limitSelectedKeys($event))\"\n                (selectionChange)=\"selectionChanged.emit($event)\"\n                (excelExport)=\"excelExport.emit($event)\">\n      @for (column of columnMarkers(); track $index) {\n        @if (isCheckboxColumn(column)) {\n          <kendo-grid-checkbox-column [width]=\"column.width()\"\n                                      [showSelectAll]=\"!isRadioColumn() && column.showSelectAll()\">\n            @if (!isRadioColumn() && column.showSelectAll()) {\n              <ng-template kendoGridHeaderTemplate>\n                <div class=\"kit-grid-select-all\">\n                  <kit-checkbox [checked]=\"headerCheckboxState() === 'checked'\"\n                                [indeterminate]=\"headerCheckboxState() === 'indeterminate'\"\n                                [disabled]=\"isHeaderCheckboxDisabled()\"\n                                (changed)=\"onHeaderCheckboxChanged($event)\">\n                  </kit-checkbox>\n                </div>\n              </ng-template>\n            }\n          </kendo-grid-checkbox-column>\n        } @else {\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\n                           let-dataItem>\n                <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n                ></ng-container>\n              </ng-template>\n            }\n\n            <ng-template kendoGridHeaderTemplate>\n              <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n              ></ng-container>\n            </ng-template>\n\n            @if (showFooter) {\n              <ng-template kendoGridFooterTemplate>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n              </ng-template>\n            }\n          </kendo-grid-column>\n\n          @if (gridDetailTemplate()) {\n            <ng-template kendoGridDetailTemplate\n                         let-dataItem\n                         [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n              <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n              ></ng-container>\n            </ng-template>\n          }\n        }\n      }\n      <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n      <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n                      [allPages]=\"pdfOptions.allPages\"\n                      [paperSize]=\"pdfOptions.paperSize\"\n                      [scale]=\"pdfOptions.scale\"\n                      [landscape]=\"pdfOptions.landscape\"\n                      [repeatHeaders]=\"true\" />\n\n      <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n      <kendo-grid-messages pagerOf=\"of\"\n                           [pagerItems]=\"pagerInfoText()\"\n                           [noRecords]=\"noRecordsText()\">\n      </kendo-grid-messages>\n    </kendo-grid>\n  </div>\n}\n\n<ng-template #columnHeaderTemplate\n             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\n             let-column>\n  @if (columns(); as columns) {\n    @if (footerTitle && column === columns[0]) {\n      {{ footerTitle }}\n    } @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n\n<ng-template #pagerTemplate\n             kendoPagerTemplate>\n  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n  <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n  <kendo-pager-next-buttons></kendo-pager-next-buttons>\n  <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{height:100%}.kit-grid .kit-grid-select-all{display:flex;align-items:center;justify-content:center;width:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid{border:none;background:none;max-height:100%}.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);box-shadow:none}.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-selected>.k-table-td{background-color:var(--ui-kit-color-selected)}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px;box-shadow:none}.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-checkbox-wrap{display:flex;align-items:center;justify-content:center}.kit-grid ::ng-deep .k-checkbox{width:16px;height:16px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-checkbox.k-indeterminate{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:hover:not(:disabled){border-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:focus,.kit-grid ::ng-deep .k-checkbox.k-focus{box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-checkbox:checked,.kit-grid ::ng-deep .k-checkbox.k-checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:checked:disabled,.kit-grid ::ng-deep .k-checkbox.k-checked:disabled{border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-checkbox:disabled{border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-master-row .k-hierarchy-cell{padding:12px 8px}.kit-grid ::ng-deep .k-master-row.drag-insert-before .k-table-td{box-shadow:inset 0 2px 0 0 var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-master-row.drag-insert-after .k-table-td{box-shadow:inset 0 -2px 0 0 var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:2px 0;color:var(--ui-kit-color-grey-10);border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button{width:32px;height:32px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:after,.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:before{display:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:not(.k-selected):hover{background-color:var(--ui-kit-color-grey-11)!important}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button-icon:before{content:\"\";display:flex;width:14px;height:14px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;background-color:currentcolor}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-left:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.99976 10.3596L8.99976 9.48071C8.99976 9.42094 8.97046 9.36469 8.92241 9.32954L4.33335 6.00024L8.92241 2.67094C8.97046 2.63579 8.99976 2.57954 8.99976 2.51977L8.99976 1.64086C8.99976 1.56469 8.91304 1.52016 8.85093 1.56469L3.15444 5.69672C2.94819 5.84673 2.94819 6.15376 3.15444 6.30258L8.85093 10.4346C8.91304 10.4803 8.99976 10.4358 8.99976 10.3596Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.99976 10.3596L8.99976 9.48071C8.99976 9.42094 8.97046 9.36469 8.92241 9.32954L4.33335 6.00024L8.92241 2.67094C8.97046 2.63579 8.99976 2.57954 8.99976 2.51977L8.99976 1.64086C8.99976 1.56469 8.91304 1.52016 8.85093 1.56469L3.15444 5.69672C2.94819 5.84673 2.94819 6.15376 3.15444 6.30258L8.85093 10.4346C8.91304 10.4803 8.99976 10.4358 8.99976 10.3596Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-right:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99976 1.64041L2.99976 2.51932C2.99976 2.57909 3.02905 2.63534 3.0771 2.67049L7.66616 5.99979L3.0771 9.32909C3.02905 9.36424 2.99976 9.42049 2.99976 9.48026L2.99976 10.3592C2.99976 10.4353 3.08647 10.4799 3.14858 10.4353L8.84507 6.30331C9.05132 6.15331 9.05132 5.84627 8.84507 5.69745L3.14858 1.56541C3.08647 1.51971 2.99976 1.56424 2.99976 1.64041Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99976 1.64041L2.99976 2.51932C2.99976 2.57909 3.02905 2.63534 3.0771 2.67049L7.66616 5.99979L3.0771 9.32909C3.02905 9.36424 2.99976 9.42049 2.99976 9.48026L2.99976 10.3592C2.99976 10.4353 3.08647 10.4799 3.14858 10.4353L8.84507 6.30331C9.05132 6.15331 9.05132 5.84627 8.84507 5.69745L3.14858 1.56541C3.08647 1.51971 2.99976 1.56424 2.99976 1.64041Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-to-left:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='1' x2='1' y2='11' stroke='black' stroke-width='1'/%3E%3Cpath d='M9 10.36L9 9.48C9 9.42 8.97 9.36 8.92 9.33L4.33 6L8.92 2.67C8.97 2.64 9 2.58 9 2.52L9 1.64C9 1.56 8.91 1.52 8.85 1.56L3.15 5.7C2.95 5.85 2.95 6.15 3.15 6.3L8.85 10.43C8.91 10.48 9 10.44 9 10.36Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='1' x2='1' y2='11' stroke='black' stroke-width='1'/%3E%3Cpath d='M9 10.36L9 9.48C9 9.42 8.97 9.36 8.92 9.33L4.33 6L8.92 2.67C8.97 2.64 9 2.58 9 2.52L9 1.64C9 1.56 8.91 1.52 8.85 1.56L3.15 5.7C2.95 5.85 2.95 6.15 3.15 6.3L8.85 10.43C8.91 10.48 9 10.44 9 10.36Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-to-right:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.64L3 2.52C3 2.58 3.03 2.64 3.08 2.67L7.67 6L3.08 9.33C3.03 9.36 3 9.42 3 9.48L3 10.36C3 10.44 3.09 10.48 3.15 10.43L8.85 6.3C9.05 6.15 9.05 5.85 8.85 5.7L3.15 1.56C3.09 1.52 3 1.56 3 1.64Z' fill='black'/%3E%3Cline x1='11' y1='1' x2='11' y2='11' stroke='black' stroke-width='1'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.64L3 2.52C3 2.58 3.03 2.64 3.08 2.67L7.67 6L3.08 9.33C3.03 9.36 3 9.42 3 9.48L3 10.36C3 10.44 3.09 10.48 3.15 10.43L8.85 6.3C9.05 6.15 9.05 5.85 8.85 5.7L3.15 1.56C3.09 1.52 3 1.56 3 1.64Z' fill='black'/%3E%3Cline x1='11' y1='1' x2='11' y2='11' stroke='black' stroke-width='1'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;border-radius:6px}.kit-grid ::ng-deep .k-pager-nav:before,.kit-grid ::ng-deep .k-pager-nav:after{display:none!important}.kit-grid ::ng-deep .k-pager-nav:not(.k-disabled):hover{background:var(--ui-kit-color-grey-11)!important}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}.kit-grid ::ng-deep .checkbox-hidden .k-checkbox-wrap{visibility:hidden}.kit-grid ::ng-deep .k-picker{height:32px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-picker:hover{border-color:var(--ui-kit-color-hover)}.kit-grid ::ng-deep .k-picker.k-focus{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-picker[aria-expanded=true] .k-svg-i-caret-alt-down:before{transform:rotate(180deg)}.kit-grid ::ng-deep .k-picker .k-svg-i-caret-alt-down:before{content:\"\\e015\";color:var(--ui-kit-color-grey-12);font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox{border-radius:50%}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:after{content:\"\";display:block;width:8px;height:8px;border-radius:50%;background-color:transparent;margin:auto;position:absolute;inset:0}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked{background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked:after,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked:after{background-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked:disabled:after,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked:disabled:after{background-color:var(--ui-kit-color-grey-11)}::ng-deep .kit-grid-row-hint{overflow:hidden;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 24px #11182724;z-index:10002}::ng-deep .kit-grid-row-hint .k-table-td{padding:10px 8px;border-color:var(--ui-kit-color-grey-11);color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-white)}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}::ng-deep .k-animation-container .k-list-item.k-selected{background-color:var(--ui-kit-color-main);color:var(--ui-kit-color-white)}::ng-deep .k-animation-container .k-list-item:hover:not(.k-selected){color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: GridModule }, { kind: "component", type: i1$d.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i1$d.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i1$d.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i1$d.CustomMessagesComponent, selector: "kendo-grid-messages" }, { kind: "directive", type: i1$d.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i1$d.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i1$d.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i1$d.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i1$d.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll", "showDisabledCheckbox"] }, { kind: "directive", type: i1$d.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i1$d.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i2.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i2.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i2.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i2.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i2.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { kind: "ngmodule", type: ExcelModule }, { kind: "component", type: i1$d.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"], outputs: ["fileCreated"] }, { kind: "ngmodule", type: PDFModule }, { kind: "component", type: i1$d.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: i3.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "columnMarkersContent", predicate: KIT_GRID_COLUMN_MARKER, isSignal: true }], viewQueries: [{ propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true, isSignal: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true, isSignal: true }, { propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "@if (data()) {\n  <div class=\"kit-grid\"\n       kendoDragTargetContainer\n       kendoDropTargetContainer\n       dragTargetFilter=\".k-master-row\"\n       dropTargetFilter=\".k-master-row\"\n       dragHandle=\".k-master-row\"\n       [dragDisabled]=\"!rowReorderable()\"\n       [dropDisabled]=\"!rowReorderable()\"\n       [dragData]=\"dragData\"\n       [hint]=\"{ hintClass: 'kit-grid-row-hint' }\"\n       (onDragOver)=\"onRowDragOver($event)\"\n       (onRelease)=\"onDragRelease()\"\n       (onDrop)=\"onDrop()\">\n    <kendo-grid kendoGridExpandDetailsBy\n                [class.kit-grid--radio]=\"isRadioColumn()\"\n                [data]=\"renderedData()\"\n                [sortable]=\"sortable\"\n                [sort]=\"sort\"\n                [rowClass]=\"getCssRowClass\"\n                [pageable]=\"getPagerSettings()\"\n                [pageSize]=\"pageSize\"\n                [skip]=\"skip()\"\n                [loading]=\"loading()\"\n                [resizable]=\"resizable()\"\n                [(expandedDetailKeys)]=\"expandedRows\"\n                [kendoGridSelectBy]=\"selectByField() || ''\"\n                [isRowSelectable]=\"isRowSelectable.bind(this)\"\n                [selectable]=\"selectableSettings()\"\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                [selectedKeys]=\"selectedKeys()\"\n                (selectedKeysChange)=\"selectedKeys.set(limitSelectedKeys($event))\"\n                (selectionChange)=\"selectionChanged.emit($event)\"\n                (excelExport)=\"excelExport.emit($event)\">\n      @for (column of columnMarkers(); track $index) {\n        @if (isCheckboxColumn(column)) {\n          <kendo-grid-checkbox-column [width]=\"column.width()\"\n                                      [showSelectAll]=\"!isRadioColumn() && column.showSelectAll()\">\n            @if (!isRadioColumn() && column.showSelectAll()) {\n              <ng-template kendoGridHeaderTemplate>\n                <div class=\"kit-grid-select-all\">\n                  <kit-checkbox [checked]=\"headerCheckboxState() === 'checked'\"\n                                [indeterminate]=\"headerCheckboxState() === 'indeterminate'\"\n                                [disabled]=\"isHeaderCheckboxDisabled()\"\n                                (changed)=\"onHeaderCheckboxChanged($event)\">\n                  </kit-checkbox>\n                </div>\n              </ng-template>\n            }\n          </kendo-grid-checkbox-column>\n        } @else {\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\n                           let-dataItem>\n                <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n                ></ng-container>\n              </ng-template>\n            }\n\n            @if (showFooter) {\n              <ng-template kendoGridFooterTemplate>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n              </ng-template>\n            }\n          </kendo-grid-column>\n\n          @if (gridDetailTemplate()) {\n            <ng-template kendoGridDetailTemplate\n                         let-dataItem\n                         [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n              <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n              ></ng-container>\n            </ng-template>\n          }\n        }\n      }\n      <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n      <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n                      [allPages]=\"pdfOptions.allPages\"\n                      [paperSize]=\"pdfOptions.paperSize\"\n                      [scale]=\"pdfOptions.scale\"\n                      [landscape]=\"pdfOptions.landscape\"\n                      [repeatHeaders]=\"true\" />\n\n      <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n      <kendo-grid-messages [pagerItems]=\"pagerInfoText()\"\n                           [pagerOf]=\"'of'\"\n                           [noRecords]=\"noRecordsText()\">\n      </kendo-grid-messages>\n    </kendo-grid>\n  </div>\n}\n\n@if (gridDataBinding()) {\n  <div class=\"kit-grid\"\n       kendoDragTargetContainer\n       kendoDropTargetContainer\n       dragTargetFilter=\".k-master-row\"\n       dropTargetFilter=\".k-master-row\"\n       dragHandle=\".k-master-row\"\n       [dragDisabled]=\"!rowReorderable()\"\n       [dropDisabled]=\"!rowReorderable()\"\n       [dragData]=\"dragData\"\n       [hint]=\"{ hintClass: 'kit-grid-row-hint' }\"\n       (onDragOver)=\"onRowDragOver($event)\"\n       (onRelease)=\"onDragRelease()\"\n       (onDrop)=\"onDrop()\">\n    <kendo-grid kendoGridExpandDetailsBy\n                [class.kit-grid--radio]=\"isRadioColumn()\"\n                [kendoGridBinding]=\"renderedGridDataBinding()\"\n                [rowClass]=\"getCssRowClass\"\n                [pageable]=\"getPagerSettings()\"\n                [pageSize]=\"pageSize\"\n                [sortable]=\"sortable\"\n                [sort]=\"sort\"\n                [skip]=\"skip()\"\n                [loading]=\"loading()\"\n                [resizable]=\"resizable()\"\n                [(expandedDetailKeys)]=\"expandedRows\"\n                [kendoGridSelectBy]=\"selectByField() || ''\"\n                [isRowSelectable]=\"isRowSelectable.bind(this)\"\n                [selectable]=\"selectableSettings()\"\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                [selectedKeys]=\"selectedKeys()\"\n                (selectedKeysChange)=\"selectedKeys.set(limitSelectedKeys($event))\"\n                (selectionChange)=\"selectionChanged.emit($event)\"\n                (excelExport)=\"excelExport.emit($event)\">\n      @for (column of columnMarkers(); track $index) {\n        @if (isCheckboxColumn(column)) {\n          <kendo-grid-checkbox-column [width]=\"column.width()\"\n                                      [showSelectAll]=\"!isRadioColumn() && column.showSelectAll()\">\n            @if (!isRadioColumn() && column.showSelectAll()) {\n              <ng-template kendoGridHeaderTemplate>\n                <div class=\"kit-grid-select-all\">\n                  <kit-checkbox [checked]=\"headerCheckboxState() === 'checked'\"\n                                [indeterminate]=\"headerCheckboxState() === 'indeterminate'\"\n                                [disabled]=\"isHeaderCheckboxDisabled()\"\n                                (changed)=\"onHeaderCheckboxChanged($event)\">\n                  </kit-checkbox>\n                </div>\n              </ng-template>\n            }\n          </kendo-grid-checkbox-column>\n        } @else {\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\n                           let-dataItem>\n                <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n                ></ng-container>\n              </ng-template>\n            }\n\n            <ng-template kendoGridHeaderTemplate>\n              <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n              ></ng-container>\n            </ng-template>\n\n            @if (showFooter) {\n              <ng-template kendoGridFooterTemplate>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n              </ng-template>\n            }\n          </kendo-grid-column>\n\n          @if (gridDetailTemplate()) {\n            <ng-template kendoGridDetailTemplate\n                         let-dataItem\n                         [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n              <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n              ></ng-container>\n            </ng-template>\n          }\n        }\n      }\n      <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n      <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n                      [allPages]=\"pdfOptions.allPages\"\n                      [paperSize]=\"pdfOptions.paperSize\"\n                      [scale]=\"pdfOptions.scale\"\n                      [landscape]=\"pdfOptions.landscape\"\n                      [repeatHeaders]=\"true\" />\n\n      <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n      <kendo-grid-messages pagerOf=\"of\"\n                           [pagerItems]=\"pagerInfoText()\"\n                           [noRecords]=\"noRecordsText()\">\n      </kendo-grid-messages>\n    </kendo-grid>\n  </div>\n}\n\n<ng-template #columnHeaderTemplate\n             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\n             let-column>\n  @if (columns(); as columns) {\n    @if (footerTitle && column === columns[0]) {\n      {{ footerTitle }}\n    } @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n\n<ng-template #pagerTemplate\n             kendoPagerTemplate>\n  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n  <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n  <kendo-pager-next-buttons></kendo-pager-next-buttons>\n  <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{height:100%}.kit-grid .kit-grid-select-all{display:flex;align-items:center;justify-content:center;width:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid{border:none;background:none;max-height:100%}.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);box-shadow:none}.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-selected>.k-table-td{background-color:var(--ui-kit-color-selected)}.kit-grid ::ng-deep .k-table-row.kit-grid-row-dragging{position:relative;box-shadow:4px 4px 8px #0003}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px;box-shadow:none}.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-checkbox-wrap{display:flex;align-items:center;justify-content:center}.kit-grid ::ng-deep .k-checkbox{width:16px;height:16px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-checkbox.k-indeterminate{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:hover:not(:disabled){border-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:focus,.kit-grid ::ng-deep .k-checkbox.k-focus{box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-checkbox:checked,.kit-grid ::ng-deep .k-checkbox.k-checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:checked:disabled,.kit-grid ::ng-deep .k-checkbox.k-checked:disabled{border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-checkbox:disabled{border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-master-row .k-hierarchy-cell{padding:12px 8px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:2px 0;color:var(--ui-kit-color-grey-10);border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button{width:32px;height:32px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:after,.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:before{display:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:not(.k-selected):hover{background-color:var(--ui-kit-color-grey-11)!important}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button-icon:before{content:\"\";display:flex;width:14px;height:14px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;background-color:currentcolor}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-left:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.99976 10.3596L8.99976 9.48071C8.99976 9.42094 8.97046 9.36469 8.92241 9.32954L4.33335 6.00024L8.92241 2.67094C8.97046 2.63579 8.99976 2.57954 8.99976 2.51977L8.99976 1.64086C8.99976 1.56469 8.91304 1.52016 8.85093 1.56469L3.15444 5.69672C2.94819 5.84673 2.94819 6.15376 3.15444 6.30258L8.85093 10.4346C8.91304 10.4803 8.99976 10.4358 8.99976 10.3596Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.99976 10.3596L8.99976 9.48071C8.99976 9.42094 8.97046 9.36469 8.92241 9.32954L4.33335 6.00024L8.92241 2.67094C8.97046 2.63579 8.99976 2.57954 8.99976 2.51977L8.99976 1.64086C8.99976 1.56469 8.91304 1.52016 8.85093 1.56469L3.15444 5.69672C2.94819 5.84673 2.94819 6.15376 3.15444 6.30258L8.85093 10.4346C8.91304 10.4803 8.99976 10.4358 8.99976 10.3596Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-right:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99976 1.64041L2.99976 2.51932C2.99976 2.57909 3.02905 2.63534 3.0771 2.67049L7.66616 5.99979L3.0771 9.32909C3.02905 9.36424 2.99976 9.42049 2.99976 9.48026L2.99976 10.3592C2.99976 10.4353 3.08647 10.4799 3.14858 10.4353L8.84507 6.30331C9.05132 6.15331 9.05132 5.84627 8.84507 5.69745L3.14858 1.56541C3.08647 1.51971 2.99976 1.56424 2.99976 1.64041Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99976 1.64041L2.99976 2.51932C2.99976 2.57909 3.02905 2.63534 3.0771 2.67049L7.66616 5.99979L3.0771 9.32909C3.02905 9.36424 2.99976 9.42049 2.99976 9.48026L2.99976 10.3592C2.99976 10.4353 3.08647 10.4799 3.14858 10.4353L8.84507 6.30331C9.05132 6.15331 9.05132 5.84627 8.84507 5.69745L3.14858 1.56541C3.08647 1.51971 2.99976 1.56424 2.99976 1.64041Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-to-left:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='1' x2='1' y2='11' stroke='black' stroke-width='1'/%3E%3Cpath d='M9 10.36L9 9.48C9 9.42 8.97 9.36 8.92 9.33L4.33 6L8.92 2.67C8.97 2.64 9 2.58 9 2.52L9 1.64C9 1.56 8.91 1.52 8.85 1.56L3.15 5.7C2.95 5.85 2.95 6.15 3.15 6.3L8.85 10.43C8.91 10.48 9 10.44 9 10.36Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='1' x2='1' y2='11' stroke='black' stroke-width='1'/%3E%3Cpath d='M9 10.36L9 9.48C9 9.42 8.97 9.36 8.92 9.33L4.33 6L8.92 2.67C8.97 2.64 9 2.58 9 2.52L9 1.64C9 1.56 8.91 1.52 8.85 1.56L3.15 5.7C2.95 5.85 2.95 6.15 3.15 6.3L8.85 10.43C8.91 10.48 9 10.44 9 10.36Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-to-right:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.64L3 2.52C3 2.58 3.03 2.64 3.08 2.67L7.67 6L3.08 9.33C3.03 9.36 3 9.42 3 9.48L3 10.36C3 10.44 3.09 10.48 3.15 10.43L8.85 6.3C9.05 6.15 9.05 5.85 8.85 5.7L3.15 1.56C3.09 1.52 3 1.56 3 1.64Z' fill='black'/%3E%3Cline x1='11' y1='1' x2='11' y2='11' stroke='black' stroke-width='1'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.64L3 2.52C3 2.58 3.03 2.64 3.08 2.67L7.67 6L3.08 9.33C3.03 9.36 3 9.42 3 9.48L3 10.36C3 10.44 3.09 10.48 3.15 10.43L8.85 6.3C9.05 6.15 9.05 5.85 8.85 5.7L3.15 1.56C3.09 1.52 3 1.56 3 1.64Z' fill='black'/%3E%3Cline x1='11' y1='1' x2='11' y2='11' stroke='black' stroke-width='1'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;border-radius:6px}.kit-grid ::ng-deep .k-pager-nav:before,.kit-grid ::ng-deep .k-pager-nav:after{display:none!important}.kit-grid ::ng-deep .k-pager-nav:not(.k-disabled):hover{background:var(--ui-kit-color-grey-11)!important}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}.kit-grid ::ng-deep .checkbox-hidden .k-checkbox-wrap{visibility:hidden}.kit-grid ::ng-deep .k-picker{height:32px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-picker:hover{border-color:var(--ui-kit-color-hover)}.kit-grid ::ng-deep .k-picker.k-focus{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-picker[aria-expanded=true] .k-svg-i-caret-alt-down:before{transform:rotate(180deg)}.kit-grid ::ng-deep .k-picker .k-svg-i-caret-alt-down:before{content:\"\\e015\";color:var(--ui-kit-color-grey-12);font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox{border-radius:50%}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:after{content:\"\";display:block;width:8px;height:8px;border-radius:50%;background-color:transparent;margin:auto;position:absolute;inset:0}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked{background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked:after,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked:after{background-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked:disabled:after,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked:disabled:after{background-color:var(--ui-kit-color-grey-11)}::ng-deep .kit-grid-row-hint{overflow:hidden;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-shadow:0 10px 24px #11182724;z-index:10002!important}::ng-deep .kit-grid-row-hint .k-table-td{min-width:170px;padding:10px 8px;border-color:var(--ui-kit-color-grey-11);color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-white)}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}::ng-deep .k-animation-container .k-list-item.k-selected{background-color:var(--ui-kit-color-main);color:var(--ui-kit-color-white)}::ng-deep .k-animation-container .k-list-item:hover:not(.k-selected){color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: GridModule }, { kind: "component", type: i1$d.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i1$d.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i1$d.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i1$d.CustomMessagesComponent, selector: "kendo-grid-messages" }, { kind: "directive", type: i1$d.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i1$d.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i1$d.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i1$d.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i1$d.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll", "showDisabledCheckbox"] }, { kind: "directive", type: i1$d.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i1$d.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i2.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i2.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i2.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i2.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i2.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { kind: "ngmodule", type: ExcelModule }, { kind: "component", type: i1$d.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"], outputs: ["fileCreated"] }, { kind: "ngmodule", type: PDFModule }, { kind: "component", type: i1$d.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: i3.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridComponent, decorators: [{
             type: Component,
@@ -7363,7 +7380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         { provide: L10N_PREFIX, useValue: '' },
                         PagerContextService,
                         PagerNavigationService,
-                    ], template: "@if (data()) {\n  <div class=\"kit-grid\"\n       kendoDragTargetContainer\n       kendoDropTargetContainer\n       dragTargetFilter=\".k-master-row\"\n       dropTargetFilter=\".k-master-row\"\n       dragHandle=\".k-master-row\"\n       [dragDisabled]=\"!rowReorderable()\"\n       [dropDisabled]=\"!rowReorderable()\"\n       [dragData]=\"dragData\"\n       [hint]=\"{ hintClass: 'kit-grid-row-hint' }\"\n       (onDragOver)=\"onRowDragOver($event)\"\n       (onRelease)=\"dropIndicator.set(null)\"\n       (onDrop)=\"onDrop($event)\">\n    <kendo-grid kendoGridExpandDetailsBy\n                [class.kit-grid--radio]=\"isRadioColumn()\"\n                [data]=\"renderedData()\"\n                [sortable]=\"sortable\"\n                [sort]=\"sort\"\n                [rowClass]=\"getCssRowClass\"\n                [pageable]=\"getPagerSettings()\"\n                [pageSize]=\"pageSize\"\n                [skip]=\"skip()\"\n                [loading]=\"loading()\"\n                [resizable]=\"resizable()\"\n                [(expandedDetailKeys)]=\"expandedRows\"\n                [kendoGridSelectBy]=\"selectByField() || ''\"\n                [isRowSelectable]=\"isRowSelectable.bind(this)\"\n                [selectable]=\"selectableSettings()\"\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                [selectedKeys]=\"selectedKeys()\"\n                (selectedKeysChange)=\"selectedKeys.set(limitSelectedKeys($event))\"\n                (selectionChange)=\"selectionChanged.emit($event)\"\n                (excelExport)=\"excelExport.emit($event)\">\n      @for (column of columnMarkers(); track $index) {\n        @if (isCheckboxColumn(column)) {\n          <kendo-grid-checkbox-column [width]=\"column.width()\"\n                                      [showSelectAll]=\"!isRadioColumn() && column.showSelectAll()\">\n            @if (!isRadioColumn() && column.showSelectAll()) {\n              <ng-template kendoGridHeaderTemplate>\n                <div class=\"kit-grid-select-all\">\n                  <kit-checkbox [checked]=\"headerCheckboxState() === 'checked'\"\n                                [indeterminate]=\"headerCheckboxState() === 'indeterminate'\"\n                                [disabled]=\"isHeaderCheckboxDisabled()\"\n                                (changed)=\"onHeaderCheckboxChanged($event)\">\n                  </kit-checkbox>\n                </div>\n              </ng-template>\n            }\n          </kendo-grid-checkbox-column>\n        } @else {\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\n                           let-dataItem>\n                <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n                ></ng-container>\n              </ng-template>\n            }\n\n            @if (showFooter) {\n              <ng-template kendoGridFooterTemplate>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n              </ng-template>\n            }\n          </kendo-grid-column>\n\n          @if (gridDetailTemplate()) {\n            <ng-template kendoGridDetailTemplate\n                         let-dataItem\n                         [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n              <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n              ></ng-container>\n            </ng-template>\n          }\n        }\n      }\n      <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n      <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n                      [allPages]=\"pdfOptions.allPages\"\n                      [paperSize]=\"pdfOptions.paperSize\"\n                      [scale]=\"pdfOptions.scale\"\n                      [landscape]=\"pdfOptions.landscape\"\n                      [repeatHeaders]=\"true\" />\n\n      <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n      <kendo-grid-messages [pagerItems]=\"pagerInfoText()\"\n                           [pagerOf]=\"'of'\"\n                           [noRecords]=\"noRecordsText()\">\n      </kendo-grid-messages>\n    </kendo-grid>\n  </div>\n}\n\n@if (gridDataBinding()) {\n  <div class=\"kit-grid\"\n       kendoDragTargetContainer\n       kendoDropTargetContainer\n       dragTargetFilter=\".k-master-row\"\n       dropTargetFilter=\".k-master-row\"\n       dragHandle=\".k-master-row\"\n       [dragDisabled]=\"!rowReorderable()\"\n       [dropDisabled]=\"!rowReorderable()\"\n       [dragData]=\"dragData\"\n       [hint]=\"{ hintClass: 'kit-grid-row-hint' }\"\n       (onDragOver)=\"onRowDragOver($event)\"\n       (onRelease)=\"dropIndicator.set(null)\"\n       (onDrop)=\"onDrop($event)\">\n    <kendo-grid kendoGridExpandDetailsBy\n                [class.kit-grid--radio]=\"isRadioColumn()\"\n                [kendoGridBinding]=\"renderedGridDataBinding()\"\n                [rowClass]=\"getCssRowClass\"\n                [pageable]=\"getPagerSettings()\"\n                [pageSize]=\"pageSize\"\n                [sortable]=\"sortable\"\n                [sort]=\"sort\"\n                [skip]=\"skip()\"\n                [loading]=\"loading()\"\n                [resizable]=\"resizable()\"\n                [(expandedDetailKeys)]=\"expandedRows\"\n                [kendoGridSelectBy]=\"selectByField() || ''\"\n                [isRowSelectable]=\"isRowSelectable.bind(this)\"\n                [selectable]=\"selectableSettings()\"\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                [selectedKeys]=\"selectedKeys()\"\n                (selectedKeysChange)=\"selectedKeys.set(limitSelectedKeys($event))\"\n                (selectionChange)=\"selectionChanged.emit($event)\"\n                (excelExport)=\"excelExport.emit($event)\">\n      @for (column of columnMarkers(); track $index) {\n        @if (isCheckboxColumn(column)) {\n          <kendo-grid-checkbox-column [width]=\"column.width()\"\n                                      [showSelectAll]=\"!isRadioColumn() && column.showSelectAll()\">\n            @if (!isRadioColumn() && column.showSelectAll()) {\n              <ng-template kendoGridHeaderTemplate>\n                <div class=\"kit-grid-select-all\">\n                  <kit-checkbox [checked]=\"headerCheckboxState() === 'checked'\"\n                                [indeterminate]=\"headerCheckboxState() === 'indeterminate'\"\n                                [disabled]=\"isHeaderCheckboxDisabled()\"\n                                (changed)=\"onHeaderCheckboxChanged($event)\">\n                  </kit-checkbox>\n                </div>\n              </ng-template>\n            }\n          </kendo-grid-checkbox-column>\n        } @else {\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\n                           let-dataItem>\n                <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n                ></ng-container>\n              </ng-template>\n            }\n\n            <ng-template kendoGridHeaderTemplate>\n              <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n              ></ng-container>\n            </ng-template>\n\n            @if (showFooter) {\n              <ng-template kendoGridFooterTemplate>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n              </ng-template>\n            }\n          </kendo-grid-column>\n\n          @if (gridDetailTemplate()) {\n            <ng-template kendoGridDetailTemplate\n                         let-dataItem\n                         [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n              <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n              ></ng-container>\n            </ng-template>\n          }\n        }\n      }\n      <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n      <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n                      [allPages]=\"pdfOptions.allPages\"\n                      [paperSize]=\"pdfOptions.paperSize\"\n                      [scale]=\"pdfOptions.scale\"\n                      [landscape]=\"pdfOptions.landscape\"\n                      [repeatHeaders]=\"true\" />\n\n      <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n      <kendo-grid-messages pagerOf=\"of\"\n                           [pagerItems]=\"pagerInfoText()\"\n                           [noRecords]=\"noRecordsText()\">\n      </kendo-grid-messages>\n    </kendo-grid>\n  </div>\n}\n\n<ng-template #columnHeaderTemplate\n             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\n             let-column>\n  @if (columns(); as columns) {\n    @if (footerTitle && column === columns[0]) {\n      {{ footerTitle }}\n    } @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n\n<ng-template #pagerTemplate\n             kendoPagerTemplate>\n  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n  <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n  <kendo-pager-next-buttons></kendo-pager-next-buttons>\n  <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{height:100%}.kit-grid .kit-grid-select-all{display:flex;align-items:center;justify-content:center;width:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid{border:none;background:none;max-height:100%}.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);box-shadow:none}.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-selected>.k-table-td{background-color:var(--ui-kit-color-selected)}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px;box-shadow:none}.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-checkbox-wrap{display:flex;align-items:center;justify-content:center}.kit-grid ::ng-deep .k-checkbox{width:16px;height:16px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-checkbox.k-indeterminate{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:hover:not(:disabled){border-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:focus,.kit-grid ::ng-deep .k-checkbox.k-focus{box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-checkbox:checked,.kit-grid ::ng-deep .k-checkbox.k-checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:checked:disabled,.kit-grid ::ng-deep .k-checkbox.k-checked:disabled{border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-checkbox:disabled{border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-master-row .k-hierarchy-cell{padding:12px 8px}.kit-grid ::ng-deep .k-master-row.drag-insert-before .k-table-td{box-shadow:inset 0 2px 0 0 var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-master-row.drag-insert-after .k-table-td{box-shadow:inset 0 -2px 0 0 var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:2px 0;color:var(--ui-kit-color-grey-10);border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button{width:32px;height:32px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:after,.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:before{display:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:not(.k-selected):hover{background-color:var(--ui-kit-color-grey-11)!important}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button-icon:before{content:\"\";display:flex;width:14px;height:14px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;background-color:currentcolor}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-left:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.99976 10.3596L8.99976 9.48071C8.99976 9.42094 8.97046 9.36469 8.92241 9.32954L4.33335 6.00024L8.92241 2.67094C8.97046 2.63579 8.99976 2.57954 8.99976 2.51977L8.99976 1.64086C8.99976 1.56469 8.91304 1.52016 8.85093 1.56469L3.15444 5.69672C2.94819 5.84673 2.94819 6.15376 3.15444 6.30258L8.85093 10.4346C8.91304 10.4803 8.99976 10.4358 8.99976 10.3596Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.99976 10.3596L8.99976 9.48071C8.99976 9.42094 8.97046 9.36469 8.92241 9.32954L4.33335 6.00024L8.92241 2.67094C8.97046 2.63579 8.99976 2.57954 8.99976 2.51977L8.99976 1.64086C8.99976 1.56469 8.91304 1.52016 8.85093 1.56469L3.15444 5.69672C2.94819 5.84673 2.94819 6.15376 3.15444 6.30258L8.85093 10.4346C8.91304 10.4803 8.99976 10.4358 8.99976 10.3596Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-right:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99976 1.64041L2.99976 2.51932C2.99976 2.57909 3.02905 2.63534 3.0771 2.67049L7.66616 5.99979L3.0771 9.32909C3.02905 9.36424 2.99976 9.42049 2.99976 9.48026L2.99976 10.3592C2.99976 10.4353 3.08647 10.4799 3.14858 10.4353L8.84507 6.30331C9.05132 6.15331 9.05132 5.84627 8.84507 5.69745L3.14858 1.56541C3.08647 1.51971 2.99976 1.56424 2.99976 1.64041Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99976 1.64041L2.99976 2.51932C2.99976 2.57909 3.02905 2.63534 3.0771 2.67049L7.66616 5.99979L3.0771 9.32909C3.02905 9.36424 2.99976 9.42049 2.99976 9.48026L2.99976 10.3592C2.99976 10.4353 3.08647 10.4799 3.14858 10.4353L8.84507 6.30331C9.05132 6.15331 9.05132 5.84627 8.84507 5.69745L3.14858 1.56541C3.08647 1.51971 2.99976 1.56424 2.99976 1.64041Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-to-left:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='1' x2='1' y2='11' stroke='black' stroke-width='1'/%3E%3Cpath d='M9 10.36L9 9.48C9 9.42 8.97 9.36 8.92 9.33L4.33 6L8.92 2.67C8.97 2.64 9 2.58 9 2.52L9 1.64C9 1.56 8.91 1.52 8.85 1.56L3.15 5.7C2.95 5.85 2.95 6.15 3.15 6.3L8.85 10.43C8.91 10.48 9 10.44 9 10.36Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='1' x2='1' y2='11' stroke='black' stroke-width='1'/%3E%3Cpath d='M9 10.36L9 9.48C9 9.42 8.97 9.36 8.92 9.33L4.33 6L8.92 2.67C8.97 2.64 9 2.58 9 2.52L9 1.64C9 1.56 8.91 1.52 8.85 1.56L3.15 5.7C2.95 5.85 2.95 6.15 3.15 6.3L8.85 10.43C8.91 10.48 9 10.44 9 10.36Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-to-right:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.64L3 2.52C3 2.58 3.03 2.64 3.08 2.67L7.67 6L3.08 9.33C3.03 9.36 3 9.42 3 9.48L3 10.36C3 10.44 3.09 10.48 3.15 10.43L8.85 6.3C9.05 6.15 9.05 5.85 8.85 5.7L3.15 1.56C3.09 1.52 3 1.56 3 1.64Z' fill='black'/%3E%3Cline x1='11' y1='1' x2='11' y2='11' stroke='black' stroke-width='1'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.64L3 2.52C3 2.58 3.03 2.64 3.08 2.67L7.67 6L3.08 9.33C3.03 9.36 3 9.42 3 9.48L3 10.36C3 10.44 3.09 10.48 3.15 10.43L8.85 6.3C9.05 6.15 9.05 5.85 8.85 5.7L3.15 1.56C3.09 1.52 3 1.56 3 1.64Z' fill='black'/%3E%3Cline x1='11' y1='1' x2='11' y2='11' stroke='black' stroke-width='1'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;border-radius:6px}.kit-grid ::ng-deep .k-pager-nav:before,.kit-grid ::ng-deep .k-pager-nav:after{display:none!important}.kit-grid ::ng-deep .k-pager-nav:not(.k-disabled):hover{background:var(--ui-kit-color-grey-11)!important}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}.kit-grid ::ng-deep .checkbox-hidden .k-checkbox-wrap{visibility:hidden}.kit-grid ::ng-deep .k-picker{height:32px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-picker:hover{border-color:var(--ui-kit-color-hover)}.kit-grid ::ng-deep .k-picker.k-focus{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-picker[aria-expanded=true] .k-svg-i-caret-alt-down:before{transform:rotate(180deg)}.kit-grid ::ng-deep .k-picker .k-svg-i-caret-alt-down:before{content:\"\\e015\";color:var(--ui-kit-color-grey-12);font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox{border-radius:50%}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:after{content:\"\";display:block;width:8px;height:8px;border-radius:50%;background-color:transparent;margin:auto;position:absolute;inset:0}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked{background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked:after,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked:after{background-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked:disabled:after,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked:disabled:after{background-color:var(--ui-kit-color-grey-11)}::ng-deep .kit-grid-row-hint{overflow:hidden;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 24px #11182724;z-index:10002}::ng-deep .kit-grid-row-hint .k-table-td{padding:10px 8px;border-color:var(--ui-kit-color-grey-11);color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-white)}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}::ng-deep .k-animation-container .k-list-item.k-selected{background-color:var(--ui-kit-color-main);color:var(--ui-kit-color-white)}::ng-deep .k-animation-container .k-list-item:hover:not(.k-selected){color:var(--ui-kit-color-main)}\n"] }]
+                    ], template: "@if (data()) {\n  <div class=\"kit-grid\"\n       kendoDragTargetContainer\n       kendoDropTargetContainer\n       dragTargetFilter=\".k-master-row\"\n       dropTargetFilter=\".k-master-row\"\n       dragHandle=\".k-master-row\"\n       [dragDisabled]=\"!rowReorderable()\"\n       [dropDisabled]=\"!rowReorderable()\"\n       [dragData]=\"dragData\"\n       [hint]=\"{ hintClass: 'kit-grid-row-hint' }\"\n       (onDragOver)=\"onRowDragOver($event)\"\n       (onRelease)=\"onDragRelease()\"\n       (onDrop)=\"onDrop()\">\n    <kendo-grid kendoGridExpandDetailsBy\n                [class.kit-grid--radio]=\"isRadioColumn()\"\n                [data]=\"renderedData()\"\n                [sortable]=\"sortable\"\n                [sort]=\"sort\"\n                [rowClass]=\"getCssRowClass\"\n                [pageable]=\"getPagerSettings()\"\n                [pageSize]=\"pageSize\"\n                [skip]=\"skip()\"\n                [loading]=\"loading()\"\n                [resizable]=\"resizable()\"\n                [(expandedDetailKeys)]=\"expandedRows\"\n                [kendoGridSelectBy]=\"selectByField() || ''\"\n                [isRowSelectable]=\"isRowSelectable.bind(this)\"\n                [selectable]=\"selectableSettings()\"\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                [selectedKeys]=\"selectedKeys()\"\n                (selectedKeysChange)=\"selectedKeys.set(limitSelectedKeys($event))\"\n                (selectionChange)=\"selectionChanged.emit($event)\"\n                (excelExport)=\"excelExport.emit($event)\">\n      @for (column of columnMarkers(); track $index) {\n        @if (isCheckboxColumn(column)) {\n          <kendo-grid-checkbox-column [width]=\"column.width()\"\n                                      [showSelectAll]=\"!isRadioColumn() && column.showSelectAll()\">\n            @if (!isRadioColumn() && column.showSelectAll()) {\n              <ng-template kendoGridHeaderTemplate>\n                <div class=\"kit-grid-select-all\">\n                  <kit-checkbox [checked]=\"headerCheckboxState() === 'checked'\"\n                                [indeterminate]=\"headerCheckboxState() === 'indeterminate'\"\n                                [disabled]=\"isHeaderCheckboxDisabled()\"\n                                (changed)=\"onHeaderCheckboxChanged($event)\">\n                  </kit-checkbox>\n                </div>\n              </ng-template>\n            }\n          </kendo-grid-checkbox-column>\n        } @else {\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\n                           let-dataItem>\n                <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n                ></ng-container>\n              </ng-template>\n            }\n\n            @if (showFooter) {\n              <ng-template kendoGridFooterTemplate>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n              </ng-template>\n            }\n          </kendo-grid-column>\n\n          @if (gridDetailTemplate()) {\n            <ng-template kendoGridDetailTemplate\n                         let-dataItem\n                         [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n              <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n              ></ng-container>\n            </ng-template>\n          }\n        }\n      }\n      <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n      <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n                      [allPages]=\"pdfOptions.allPages\"\n                      [paperSize]=\"pdfOptions.paperSize\"\n                      [scale]=\"pdfOptions.scale\"\n                      [landscape]=\"pdfOptions.landscape\"\n                      [repeatHeaders]=\"true\" />\n\n      <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n      <kendo-grid-messages [pagerItems]=\"pagerInfoText()\"\n                           [pagerOf]=\"'of'\"\n                           [noRecords]=\"noRecordsText()\">\n      </kendo-grid-messages>\n    </kendo-grid>\n  </div>\n}\n\n@if (gridDataBinding()) {\n  <div class=\"kit-grid\"\n       kendoDragTargetContainer\n       kendoDropTargetContainer\n       dragTargetFilter=\".k-master-row\"\n       dropTargetFilter=\".k-master-row\"\n       dragHandle=\".k-master-row\"\n       [dragDisabled]=\"!rowReorderable()\"\n       [dropDisabled]=\"!rowReorderable()\"\n       [dragData]=\"dragData\"\n       [hint]=\"{ hintClass: 'kit-grid-row-hint' }\"\n       (onDragOver)=\"onRowDragOver($event)\"\n       (onRelease)=\"onDragRelease()\"\n       (onDrop)=\"onDrop()\">\n    <kendo-grid kendoGridExpandDetailsBy\n                [class.kit-grid--radio]=\"isRadioColumn()\"\n                [kendoGridBinding]=\"renderedGridDataBinding()\"\n                [rowClass]=\"getCssRowClass\"\n                [pageable]=\"getPagerSettings()\"\n                [pageSize]=\"pageSize\"\n                [sortable]=\"sortable\"\n                [sort]=\"sort\"\n                [skip]=\"skip()\"\n                [loading]=\"loading()\"\n                [resizable]=\"resizable()\"\n                [(expandedDetailKeys)]=\"expandedRows\"\n                [kendoGridSelectBy]=\"selectByField() || ''\"\n                [isRowSelectable]=\"isRowSelectable.bind(this)\"\n                [selectable]=\"selectableSettings()\"\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                [selectedKeys]=\"selectedKeys()\"\n                (selectedKeysChange)=\"selectedKeys.set(limitSelectedKeys($event))\"\n                (selectionChange)=\"selectionChanged.emit($event)\"\n                (excelExport)=\"excelExport.emit($event)\">\n      @for (column of columnMarkers(); track $index) {\n        @if (isCheckboxColumn(column)) {\n          <kendo-grid-checkbox-column [width]=\"column.width()\"\n                                      [showSelectAll]=\"!isRadioColumn() && column.showSelectAll()\">\n            @if (!isRadioColumn() && column.showSelectAll()) {\n              <ng-template kendoGridHeaderTemplate>\n                <div class=\"kit-grid-select-all\">\n                  <kit-checkbox [checked]=\"headerCheckboxState() === 'checked'\"\n                                [indeterminate]=\"headerCheckboxState() === 'indeterminate'\"\n                                [disabled]=\"isHeaderCheckboxDisabled()\"\n                                (changed)=\"onHeaderCheckboxChanged($event)\">\n                  </kit-checkbox>\n                </div>\n              </ng-template>\n            }\n          </kendo-grid-checkbox-column>\n        } @else {\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\n                           let-dataItem>\n                <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n                ></ng-container>\n              </ng-template>\n            }\n\n            <ng-template kendoGridHeaderTemplate>\n              <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n              ></ng-container>\n            </ng-template>\n\n            @if (showFooter) {\n              <ng-template kendoGridFooterTemplate>\n                <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n              </ng-template>\n            }\n          </kendo-grid-column>\n\n          @if (gridDetailTemplate()) {\n            <ng-template kendoGridDetailTemplate\n                         let-dataItem\n                         [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n              <ng-container *ngTemplateOutlet=\"gridDetailTemplate(); context: { $implicit: dataItem }\"\n              ></ng-container>\n            </ng-template>\n          }\n        }\n      }\n      <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n      <kendo-grid-pdf [fileName]=\"pdfOptions.fileName\"\n                      [allPages]=\"pdfOptions.allPages\"\n                      [paperSize]=\"pdfOptions.paperSize\"\n                      [scale]=\"pdfOptions.scale\"\n                      [landscape]=\"pdfOptions.landscape\"\n                      [repeatHeaders]=\"true\" />\n\n      <ng-container *ngTemplateOutlet=\"pagerTemplate\" />\n      <kendo-grid-messages pagerOf=\"of\"\n                           [pagerItems]=\"pagerInfoText()\"\n                           [noRecords]=\"noRecordsText()\">\n      </kendo-grid-messages>\n    </kendo-grid>\n  </div>\n}\n\n<ng-template #columnHeaderTemplate\n             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\n             let-column>\n  @if (columns(); as columns) {\n    @if (footerTitle && column === columns[0]) {\n      {{ footerTitle }}\n    } @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n\n<ng-template #pagerTemplate\n             kendoPagerTemplate>\n  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n  <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n  <kendo-pager-next-buttons></kendo-pager-next-buttons>\n  <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{height:100%}.kit-grid .kit-grid-select-all{display:flex;align-items:center;justify-content:center;width:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid{border:none;background:none;max-height:100%}.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);box-shadow:none}.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-selected>.k-table-td{background-color:var(--ui-kit-color-selected)}.kit-grid ::ng-deep .k-table-row.kit-grid-row-dragging{position:relative;box-shadow:4px 4px 8px #0003}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px;box-shadow:none}.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-checkbox-wrap{display:flex;align-items:center;justify-content:center}.kit-grid ::ng-deep .k-checkbox{width:16px;height:16px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-checkbox.k-indeterminate{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:hover:not(:disabled){border-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:focus,.kit-grid ::ng-deep .k-checkbox.k-focus{box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-checkbox:checked,.kit-grid ::ng-deep .k-checkbox.k-checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-checkbox:checked:disabled,.kit-grid ::ng-deep .k-checkbox.k-checked:disabled{border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-checkbox:disabled{border-color:var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-master-row .k-hierarchy-cell{padding:12px 8px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:2px 0;color:var(--ui-kit-color-grey-10);border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button{width:32px;height:32px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:after,.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:before{display:none}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button:not(.k-selected):hover{background-color:var(--ui-kit-color-grey-11)!important}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-button-icon:before{content:\"\";display:flex;width:14px;height:14px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;background-color:currentcolor}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-left:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.99976 10.3596L8.99976 9.48071C8.99976 9.42094 8.97046 9.36469 8.92241 9.32954L4.33335 6.00024L8.92241 2.67094C8.97046 2.63579 8.99976 2.57954 8.99976 2.51977L8.99976 1.64086C8.99976 1.56469 8.91304 1.52016 8.85093 1.56469L3.15444 5.69672C2.94819 5.84673 2.94819 6.15376 3.15444 6.30258L8.85093 10.4346C8.91304 10.4803 8.99976 10.4358 8.99976 10.3596Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.99976 10.3596L8.99976 9.48071C8.99976 9.42094 8.97046 9.36469 8.92241 9.32954L4.33335 6.00024L8.92241 2.67094C8.97046 2.63579 8.99976 2.57954 8.99976 2.51977L8.99976 1.64086C8.99976 1.56469 8.91304 1.52016 8.85093 1.56469L3.15444 5.69672C2.94819 5.84673 2.94819 6.15376 3.15444 6.30258L8.85093 10.4346C8.91304 10.4803 8.99976 10.4358 8.99976 10.3596Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-right:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99976 1.64041L2.99976 2.51932C2.99976 2.57909 3.02905 2.63534 3.0771 2.67049L7.66616 5.99979L3.0771 9.32909C3.02905 9.36424 2.99976 9.42049 2.99976 9.48026L2.99976 10.3592C2.99976 10.4353 3.08647 10.4799 3.14858 10.4353L8.84507 6.30331C9.05132 6.15331 9.05132 5.84627 8.84507 5.69745L3.14858 1.56541C3.08647 1.51971 2.99976 1.56424 2.99976 1.64041Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99976 1.64041L2.99976 2.51932C2.99976 2.57909 3.02905 2.63534 3.0771 2.67049L7.66616 5.99979L3.0771 9.32909C3.02905 9.36424 2.99976 9.42049 2.99976 9.48026L2.99976 10.3592C2.99976 10.4353 3.08647 10.4799 3.14858 10.4353L8.84507 6.30331C9.05132 6.15331 9.05132 5.84627 8.84507 5.69745L3.14858 1.56541C3.08647 1.51971 2.99976 1.56424 2.99976 1.64041Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-to-left:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='1' x2='1' y2='11' stroke='black' stroke-width='1'/%3E%3Cpath d='M9 10.36L9 9.48C9 9.42 8.97 9.36 8.92 9.33L4.33 6L8.92 2.67C8.97 2.64 9 2.58 9 2.52L9 1.64C9 1.56 8.91 1.52 8.85 1.56L3.15 5.7C2.95 5.85 2.95 6.15 3.15 6.3L8.85 10.43C8.91 10.48 9 10.44 9 10.36Z' fill='black'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='1' x2='1' y2='11' stroke='black' stroke-width='1'/%3E%3Cpath d='M9 10.36L9 9.48C9 9.42 8.97 9.36 8.92 9.33L4.33 6L8.92 2.67C8.97 2.64 9 2.58 9 2.52L9 1.64C9 1.56 8.91 1.52 8.85 1.56L3.15 5.7C2.95 5.85 2.95 6.15 3.15 6.3L8.85 10.43C8.91 10.48 9 10.44 9 10.36Z' fill='black'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-numbers-wrap .k-svg-i-caret-alt-to-right:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.64L3 2.52C3 2.58 3.03 2.64 3.08 2.67L7.67 6L3.08 9.33C3.03 9.36 3 9.42 3 9.48L3 10.36C3 10.44 3.09 10.48 3.15 10.43L8.85 6.3C9.05 6.15 9.05 5.85 8.85 5.7L3.15 1.56C3.09 1.52 3 1.56 3 1.64Z' fill='black'/%3E%3Cline x1='11' y1='1' x2='11' y2='11' stroke='black' stroke-width='1'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.64L3 2.52C3 2.58 3.03 2.64 3.08 2.67L7.67 6L3.08 9.33C3.03 9.36 3 9.42 3 9.48L3 10.36C3 10.44 3.09 10.48 3.15 10.43L8.85 6.3C9.05 6.15 9.05 5.85 8.85 5.7L3.15 1.56C3.09 1.52 3 1.56 3 1.64Z' fill='black'/%3E%3Cline x1='11' y1='1' x2='11' y2='11' stroke='black' stroke-width='1'/%3E%3C/svg%3E\")}.kit-grid ::ng-deep .k-pager-nav{width:32px;height:32px;border-radius:6px}.kit-grid ::ng-deep .k-pager-nav:before,.kit-grid ::ng-deep .k-pager-nav:after{display:none!important}.kit-grid ::ng-deep .k-pager-nav:not(.k-disabled):hover{background:var(--ui-kit-color-grey-11)!important}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}.kit-grid ::ng-deep .checkbox-hidden .k-checkbox-wrap{visibility:hidden}.kit-grid ::ng-deep .k-picker{height:32px;border-radius:4px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-picker:hover{border-color:var(--ui-kit-color-hover)}.kit-grid ::ng-deep .k-picker.k-focus{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-grid ::ng-deep .k-picker[aria-expanded=true] .k-svg-i-caret-alt-down:before{transform:rotate(180deg)}.kit-grid ::ng-deep .k-picker .k-svg-i-caret-alt-down:before{content:\"\\e015\";color:var(--ui-kit-color-grey-12);font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox{border-radius:50%}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:after{content:\"\";display:block;width:8px;height:8px;border-radius:50%;background-color:transparent;margin:auto;position:absolute;inset:0}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked{background-color:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked:after,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked:after{background-color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox:checked:disabled:after,.kit-grid ::ng-deep .k-grid.kit-grid--radio .k-checkbox.k-checked:disabled:after{background-color:var(--ui-kit-color-grey-11)}::ng-deep .kit-grid-row-hint{overflow:hidden;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);box-shadow:0 10px 24px #11182724;z-index:10002!important}::ng-deep .kit-grid-row-hint .k-table-td{min-width:170px;padding:10px 8px;border-color:var(--ui-kit-color-grey-11);color:var(--ui-kit-color-grey-10);background:var(--ui-kit-color-white)}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}::ng-deep .k-animation-container .k-list-item.k-selected{background-color:var(--ui-kit-color-main);color:var(--ui-kit-color-white)}::ng-deep .k-animation-container .k-list-item:hover:not(.k-selected){color:var(--ui-kit-color-main)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], gridDataBinding: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridDataBinding", required: false }] }], sortable: [{
                 type: Input
             }], sort: [{
@@ -12739,7 +12756,7 @@ class KitFilterCheckboxComponent {
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ displayedValues[0] }}\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ?? '' }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n    <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n    <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip{display:flex;align-items:center;gap:3px}.kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}.kit-filter-checkbox-single-item{display:block;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
             type: Component,
@@ -12751,7 +12768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         FormsModule,
                         KitPopupComponent,
                         KitTextboxComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ displayedValues[0] }}\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ?? '' }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n    <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n    <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip{display:flex;align-items:center;gap:3px}.kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}.kit-filter-checkbox-single-item{display:block;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], translateKeyPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateKeyPrefix", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], guidField: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidField", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popupContent: [{ type: i0.ViewChild, args: ['popupContent', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterCustomInputComponent {
@@ -12836,7 +12853,7 @@ class KitFilterCustomInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitFilterCustomInputComponent, isStandalone: true, selector: "kit-filter-custom-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  {{ selectedValue() }}\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitFilterCustomInputComponent, isStandalone: true, selector: "kit-filter-custom-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  <kit-truncate-text class=\"kit-custom-input-selected-values\">\n    {{ selectedValue() }}\n  </kit-truncate-text>\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>\n", styles: [".kit-custom-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCustomInputComponent, decorators: [{
             type: Component,
@@ -12845,7 +12862,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitPopupComponent,
                         KitTextboxComponent,
                         TranslateModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  {{ selectedValue() }}\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"] }]
+                        KitTruncateTextComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  <kit-truncate-text class=\"kit-custom-input-selected-values\">\n    {{ selectedValue() }}\n  </kit-truncate-text>\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>\n", styles: [".kit-custom-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"] }]
         }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterDateComponent {
@@ -13261,7 +13279,7 @@ class KitFilterInputComponent {
         this.focusRafId = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textboxComponents", predicate: KitTextboxComponent, descendants: true, isSignal: true }, { propertyName: "numericTextboxComponents", predicate: KitNumericTextboxComponent, descendants: true, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (opened)=\"onPopupOpened()\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [max]=\"maxIntegerValue\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textboxComponents", predicate: KitTextboxComponent, descendants: true, isSignal: true }, { propertyName: "numericTextboxComponents", predicate: KitNumericTextboxComponent, descendants: true, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    <kit-truncate-text class=\"kit-filter-input-selected-values\">\n      @for (filter of selectedFilters; track $index) {\n        {{ getSelectedFilterText(filter) }}\n\n        @if ($index === 0) {\n          {{ getSelectedLogicText(selectedValues()) }}\n        }\n      }\n    </kit-truncate-text>\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (opened)=\"onPopupOpened()\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [max]=\"maxIntegerValue\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".kit-filter-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, decorators: [{
             type: Component,
@@ -13272,7 +13290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitTextboxComponent,
                         TranslateModule,
                         KitNumericTextboxComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (opened)=\"onPopupOpened()\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [max]=\"maxIntegerValue\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
+                        KitTruncateTextComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    <kit-truncate-text class=\"kit-filter-input-selected-values\">\n      @for (filter of selectedFilters; track $index) {\n        {{ getSelectedFilterText(filter) }}\n\n        @if ($index === 0) {\n          {{ getSelectedLogicText(selectedValues()) }}\n        }\n      }\n    </kit-truncate-text>\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (opened)=\"onPopupOpened()\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [max]=\"maxIntegerValue\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".kit-filter-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
         }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], filterInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterInputType", required: true }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], textboxComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KitTextboxComponent), { isSignal: true }] }], numericTextboxComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KitNumericTextboxComponent), { isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterNullCheckComponent {
@@ -13483,7 +13502,7 @@ class KitFilterRadioComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterRadioComponent, isStandalone: true, selector: "kit-filter-radio", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-radio\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (hasSelectedFilters(selectedFilterValue)) {\n      {{ getSelectedFilterText(selectedFilterValue) | translate }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-radio-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n                      (changed)=\"onRadioButtonChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-radio-popup .popup-content{width:172px}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterRadioComponent, isStandalone: true, selector: "kit-filter-radio", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-radio\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (hasSelectedFilters(selectedFilterValue)) {\n      <kit-truncate-text class=\"kit-filter-radio-selected-values\">\n        {{ getSelectedFilterText(selectedFilterValue) | translate }}\n      </kit-truncate-text>\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-radio-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n                      (changed)=\"onRadioButtonChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>\n", styles: [".kit-filter-radio-selected-values{max-width:180px}::ng-deep .kit-filter-radio-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterRadioComponent, decorators: [{
             type: Component,
@@ -13492,7 +13511,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         TranslatePipe,
                         KitPopupComponent,
                         KitRadioButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-radio\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (hasSelectedFilters(selectedFilterValue)) {\n      {{ getSelectedFilterText(selectedFilterValue) | translate }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-radio-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n                      (changed)=\"onRadioButtonChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-radio-popup .popup-content{width:172px}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"] }]
+                        KitTruncateTextComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-radio\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (hasSelectedFilters(selectedFilterValue)) {\n      <kit-truncate-text class=\"kit-filter-radio-selected-values\">\n        {{ getSelectedFilterText(selectedFilterValue) | translate }}\n      </kit-truncate-text>\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-radio-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n                      (changed)=\"onRadioButtonChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>\n", styles: [".kit-filter-radio-selected-values{max-width:180px}::ng-deep .kit-filter-radio-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"] }]
         }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], translateKeyPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateKeyPrefix", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterSelectorComponent {