@progress-chef/platform-shared-components 0.0.154 → 0.0.155

package/fesm2022/progress-chef-platform-shared-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, HostBinding, Output, NgModule, ViewChild, HostListener, ViewChildren, ContentChild, ViewEncapsulation, Pipe, Directive, booleanAttribute, ContentChildren, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Input, EventEmitter, HostBinding, Output, NgModule, ViewChild, HostListener, ViewChildren, ContentChild, ViewEncapsulation, Pipe, Directive, booleanAttribute, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, SecurityContext, Injectable } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$2 from '@angular/forms';
@@ -19,7 +19,7 @@ import * as i2$5 from '@progress/kendo-angular-dropdowns';
 import { DropDownsModule, AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
 import * as i2$2 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
-import * as i2$8 from '@progress/kendo-angular-icons';
+import * as i2$a from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i3$3 from '@progress/kendo-angular-label';
 import { LabelModule, FloatingLabelModule } from '@progress/kendo-angular-label';
@@ -36,19 +36,25 @@ import { LoaderModule as LoaderModule$1, IndicatorsModule } from '@progress/kend
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i2$6 from '@progress/kendo-angular-progressbar';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
-import { Subject, Subscription, tap, map } from 'rxjs';
+import { Subject, Subscription, tap, map, of } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import * as i2$7 from '@progress/kendo-angular-treelist';
+import { TreeListModule as TreeListModule$1 } from '@progress/kendo-angular-treelist';
+import * as i2$8 from '@progress/kendo-angular-treeview';
+import { TreeViewModule as TreeViewModule$1 } from '@progress/kendo-angular-treeview';
 import * as i1$5 from '@progress/kendo-angular-upload';
 import { UploadsModule } from '@progress/kendo-angular-upload';
 import { HttpClientModule } from '@angular/common/http';
-import * as i2$7 from '@progress/kendo-angular-dialog';
+import * as i2$9 from '@progress/kendo-angular-dialog';
 import { DialogsModule, DialogModule as DialogModule$1 } from '@progress/kendo-angular-dialog';
 import * as i1$6 from '@progress/kendo-angular-grid';
 import { GridModule, GridComponent } from '@progress/kendo-angular-grid';
 import { Keys } from '@progress/kendo-angular-common';
-import * as i2$9 from '@progress/kendo-angular-pager';
+import * as i2$b from '@progress/kendo-angular-pager';
 import { KENDO_PAGER, PagerModule } from '@progress/kendo-angular-pager';
 import { orderBy } from '@progress/kendo-data-query';
+import { marked } from 'marked';
+import * as i1$7 from '@angular/platform-browser';
 
 class SharedComponent {
     constructor() { }
@@ -1548,6 +1554,11 @@ class DragAndDropComponent {
         this.dragDropItemIndexAttribute = 'data-kendo-listview-item-index';
         this.dragHandleClassSelector = '.reorder-icon';
         this.emitListChangeEv = new EventEmitter();
+        this.dragEnter = new EventEmitter();
+        this.dragLeave = new EventEmitter();
+        this.dropDone = new EventEmitter();
+        this.dragStart = new EventEmitter();
+        this.dragRelease = new EventEmitter();
         this.dragData = ({ dragTarget }) => {
             return {
                 fromElement: this.setElement(dragTarget, this.dragDropContainerClassSelector, this.dragDropContainerIndexAttribute),
@@ -1572,6 +1583,18 @@ class DragAndDropComponent {
             this.dropTargetContainer.notify();
         }
     }
+    onDragEnter(e) {
+        this.dragEnter.emit(e);
+    }
+    onDragLeave(e) {
+        this.dragLeave.emit(e);
+    }
+    onRelease(e) {
+        this.dragRelease.emit(e);
+    }
+    onDragStart(e) {
+        this.dragStart.emit(e);
+    }
     onDrop(e) {
         const { fromIndex } = e.dragData;
         let destinationIndex = 0;
@@ -1581,6 +1604,7 @@ class DragAndDropComponent {
         }
         this._listData = [...this._listData];
         this.emitListChangeEv.emit(this._listData);
+        this.dropDone.emit(e);
         this.dragTargetContainer.notify();
         this.dropTargetContainer.notify();
     }
@@ -1605,11 +1629,11 @@ class DragAndDropComponent {
     }
     ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DragAndDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DragAndDropComponent, isStandalone: true, selector: "lib-drag-and-drop", inputs: { dragDropContainerClassSelector: "dragDropContainerClassSelector", dragDropItemClassSelector: "dragDropItemClassSelector", dragDropContainerIndexAttribute: "dragDropContainerIndexAttribute", dragDropItemIndexAttribute: "dragDropItemIndexAttribute", dragHandleClassSelector: "dragHandleClassSelector", listData: "listData" }, outputs: { emitListChangeEv: "emitListChangeEv" }, viewQueries: [{ propertyName: "dragTargetContainer", first: true, predicate: ["wrapper"], descendants: true, read: DragTargetContainerDirective }, { propertyName: "dropTargetContainer", first: true, predicate: ["wrapper"], descendants: true, read: DropTargetContainerDirective }], ngImport: i0, template: "<div class=\"demo-container\" #wrapper kendoDragTargetContainer kendoDropTargetContainer\n  [dragTargetFilter]=\"dragDropItemClassSelector\" [dropTargetFilter]=\"dragDropItemClassSelector\" [dragData]=\"dragData\"\n  [hint]=\"{ hintClass: 'rowHint' }\" (onDrop)=\"onDrop($event)\" [dragHandle]=\"dragHandleClassSelector\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: DragAndDropModule$1 }, { kind: "directive", type: i1$2.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: i1$2.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DragAndDropComponent, isStandalone: true, selector: "lib-drag-and-drop", inputs: { dragDropContainerClassSelector: "dragDropContainerClassSelector", dragDropItemClassSelector: "dragDropItemClassSelector", dragDropContainerIndexAttribute: "dragDropContainerIndexAttribute", dragDropItemIndexAttribute: "dragDropItemIndexAttribute", dragHandleClassSelector: "dragHandleClassSelector", listData: "listData" }, outputs: { emitListChangeEv: "emitListChangeEv", dragEnter: "dragEnter", dragLeave: "dragLeave", dropDone: "dropDone", dragStart: "dragStart", dragRelease: "dragRelease" }, viewQueries: [{ propertyName: "dragTargetContainer", first: true, predicate: ["wrapper"], descendants: true, read: DragTargetContainerDirective }, { propertyName: "dropTargetContainer", first: true, predicate: ["wrapper"], descendants: true, read: DropTargetContainerDirective }], ngImport: i0, template: "<div class=\"demo-container\" #wrapper kendoDragTargetContainer kendoDropTargetContainer\n  [dragTargetFilter]=\"dragDropItemClassSelector\" [dropTargetFilter]=\"dragDropItemClassSelector\" [dragData]=\"dragData\"\n  [hint]=\"{ hintClass: 'rowHint' }\" (onDrop)=\"onDrop($event)\" (onDragEnter)=\"onDragEnter($event)\"\n  (onDragLeave)=\"onDragLeave($event)\" (onRelease)=\"onRelease($event)\" (onDragStart)=\"onDragStart($event)\" [dragHandle]=\"dragHandleClassSelector\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: DragAndDropModule$1 }, { kind: "directive", type: i1$2.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: i1$2.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DragAndDropComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'lib-drag-and-drop', imports: [DragAndDropModule$1], template: "<div class=\"demo-container\" #wrapper kendoDragTargetContainer kendoDropTargetContainer\n  [dragTargetFilter]=\"dragDropItemClassSelector\" [dropTargetFilter]=\"dragDropItemClassSelector\" [dragData]=\"dragData\"\n  [hint]=\"{ hintClass: 'rowHint' }\" (onDrop)=\"onDrop($event)\" [dragHandle]=\"dragHandleClassSelector\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'lib-drag-and-drop', imports: [DragAndDropModule$1], template: "<div class=\"demo-container\" #wrapper kendoDragTargetContainer kendoDropTargetContainer\n  [dragTargetFilter]=\"dragDropItemClassSelector\" [dropTargetFilter]=\"dragDropItemClassSelector\" [dragData]=\"dragData\"\n  [hint]=\"{ hintClass: 'rowHint' }\" (onDrop)=\"onDrop($event)\" (onDragEnter)=\"onDragEnter($event)\"\n  (onDragLeave)=\"onDragLeave($event)\" (onRelease)=\"onRelease($event)\" (onDragStart)=\"onDragStart($event)\" [dragHandle]=\"dragHandleClassSelector\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { dragDropContainerClassSelector: [{
                 type: Input
             }], dragDropItemClassSelector: [{
@@ -1624,6 +1648,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], emitListChangeEv: [{
                 type: Output
+            }], dragEnter: [{
+                type: Output
+            }], dragLeave: [{
+                type: Output
+            }], dropDone: [{
+                type: Output
+            }], dragStart: [{
+                type: Output
+            }], dragRelease: [{
+                type: Output
             }], dragTargetContainer: [{
                 type: ViewChild,
                 args: ['wrapper', { read: DragTargetContainerDirective, static: false }]
@@ -4147,6 +4181,980 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 }]
         }] });
 
+/**
+ * Custom TreeList component that wraps Kendo's TreeList with design system styling.
+ *
+ * This component provides a hierarchical data grid for displaying and editing tabular data.
+ * It supports selection, sorting, filtering, editing, and custom column templates.
+ */
+class TreeListComponent {
+    constructor() {
+        /**
+         * The data source for the tree list
+         */
+        this.data = [];
+        /**
+         * Column definitions for the tree list
+         */
+        this.columns = [];
+        /**
+         * Field name that contains the unique identifier for each node
+         */
+        this.idField = 'id';
+        /**
+         * Field name that contains the child nodes array (for hierarchical binding)
+         */
+        this.childrenField = 'children';
+        /**
+         * Field name that contains the parent identifier (for flat binding)
+         */
+        this.parentIdField = 'parentId';
+        /**
+         * Binding type: 'hierarchy' for nested data with children, 'flat' for parent-child relationship data
+         */
+        this.bindingType = 'hierarchy';
+        /**
+         * Enable selection functionality
+         */
+        this.selectable = false;
+        /**
+         * Enable sorting functionality
+         */
+        this.sortable = false;
+        /**
+         * Enable filtering functionality
+         */
+        this.filterable = false;
+        /**
+         * Enable resizing functionality
+         */
+        this.resizable = false;
+        /**
+         * Enable reordering functionality
+         */
+        this.reorderable = false;
+        /**
+         * Enable editing functionality
+         */
+        this.editable = false;
+        /**
+         * Loading state - shows loading indicator when true
+         */
+        this.loading = false;
+        /**
+         * Height of the tree list container
+         */
+        this.height = 'auto';
+        /**
+         * Enable virtual scrolling
+         */
+        this.scrollable = true;
+        /**
+         * Page size for pagination
+         */
+        this.pageSize = 0;
+        /**
+         * Enable pagination
+         */
+        this.pageable = false;
+        /**
+         * Current sort configuration
+         */
+        this.sort = [];
+        this.selectionChange = new EventEmitter();
+        this.expand = new EventEmitter();
+        this.collapse = new EventEmitter();
+        this.sortChange = new EventEmitter();
+        this.filterChange = new EventEmitter();
+        this.pageChange = new EventEmitter();
+        this.add = new EventEmitter();
+        this.edit = new EventEmitter();
+        this.cancelEvent = new EventEmitter();
+        this.save = new EventEmitter();
+        this.remove = new EventEmitter();
+        this.cellClick = new EventEmitter();
+        this.cellClose = new EventEmitter();
+    }
+    /**
+     * Generates CSS classes for the tree-list container element based on current state.
+     * Applies conditional classes for loading state and editing mode to enable appropriate styling.
+     *
+     * @returns A space-separated string of CSS class names to apply to the container
+     */
+    getTreeListClasses() {
+        const classes = ['lib-tree-list'];
+        if (this.loading) {
+            classes.push('lib-tree-list--loading');
+        }
+        if (this.editable) {
+            classes.push('lib-tree-list--editable');
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Handles selection state changes when users select or deselect tree-list rows.
+     * Propagates the selection event to parent components for external handling.
+     *
+     * @param event - The selection change event containing selected items and metadata
+     */
+    onSelectionChange(event) {
+        this.selectionChange.emit(event);
+    }
+    /**
+     * Handles node expansion events when users expand collapsed hierarchical tree nodes.
+     * Emits the expand event to notify parent components of the state change for potential data loading.
+     *
+     * @param event - The expand event containing the expanded node data and index information
+     */
+    onExpand(event) {
+        this.expand.emit(event);
+    }
+    /**
+     * Handles node collapse events when users collapse expanded hierarchical tree nodes.
+     * Emits the collapse event to notify parent components of the state change for cleanup or optimization.
+     *
+     * @param event - The collapse event containing the collapsed node data and index information
+     */
+    onCollapse(event) {
+        this.collapse.emit(event);
+    }
+    /**
+     * Handles column sorting changes when users click on sortable column headers.
+     * Updates the internal sort state and propagates the change to parent components for data reordering.
+     *
+     * @param sort - Array of sort descriptors defining field names and sort directions (asc/desc)
+     */
+    onSortChange(sort) {
+        this.sort = sort;
+        this.sortChange.emit(sort);
+    }
+    /**
+     * Handles filter criteria changes when users interact with column filters or search functionality.
+     * Propagates filter events to parent components for server-side or client-side data filtering.
+     *
+     * @param filter - The filter object containing criteria, operators, and field specifications
+     */
+    onFilterChange(filter) {
+        this.filterChange.emit(filter);
+    }
+    /**
+     * Handles pagination navigation when users interact with pager controls.
+     * Propagates page change events to parent components for data loading of the requested page.
+     *
+     * @param event - The page change event containing skip, take, and page size information
+     */
+    onPageChange(event) {
+        this.pageChange.emit(event);
+    }
+    /**
+     * Handles add/create events when users initiate creation of new tree-list items.
+     * Propagates the add event to parent components for handling new item creation logic and validation.
+     *
+     * @param event - The add event containing parent item context and position information for insertion
+     */
+    onAdd(event) {
+        this.add.emit(event);
+    }
+    /**
+     * Handles edit mode activation when users enter editing mode for tree-list items.
+     * Propagates the edit event to parent components for setting up edit state and validation rules.
+     *
+     * @param event - The edit event containing the item data being edited and row context
+     */
+    onEdit(event) {
+        this.edit.emit(event);
+    }
+    /**
+     * Handles edit cancellation when users discard changes and exit editing mode without saving.
+     * Propagates the cancel event to parent components for cleanup and restoring original data state.
+     *
+     * @param event - The cancel event containing the item data that was being edited
+     */
+    onCancel(event) {
+        this.cancelEvent.emit(event);
+    }
+    /**
+     * Handles save operations when users commit changes after editing tree-list items.
+     * Propagates the save event to parent components for validation, persistence, and data refresh.
+     *
+     * @param event - The save event containing the modified item data and original values for comparison
+     */
+    onSave(event) {
+        this.save.emit(event);
+    }
+    /**
+     * Handles delete/removal operations when users confirm deletion of tree-list items.
+     * Propagates the remove event to parent components for confirmation dialogs and data deletion.
+     *
+     * @param event - The remove event containing the item data to be deleted and hierarchical context
+     */
+    onRemove(event) {
+        this.remove.emit(event);
+    }
+    /**
+     * Handles individual cell click events within the tree-list for custom interaction handling.
+     * Propagates cell click events to parent components for custom actions, navigation, or cell-specific logic.
+     *
+     * @param event - The cell click event containing cell data, coordinates, and column information
+     */
+    onCellClick(event) {
+        this.cellClick.emit(event);
+    }
+    /**
+     * Handles cell editor close events when users exit cell editing mode.
+     * Propagates cell close events to parent components for cleanup and state management.
+     *
+     * @param event - The cell close event containing editor state and any pending changes
+     */
+    onCellClose(event) {
+        this.cellClose.emit(event);
+    }
+    /**
+     * Handles edit button clicks from command column or custom templates to initiate item editing.
+     * Creates and emits a properly formatted EditEvent to notify parent components of edit intention.
+     * This method bridges custom UI elements with the standard Kendo TreeList editing workflow.
+     *
+     * @param dataItem - The tree-list item data object to be edited
+     */
+    onEditButtonClick(dataItem) {
+        // Emit the edit event to let parent component handle the editing logic
+        this.edit.emit({ dataItem });
+    }
+    /**
+     * Handles remove button clicks from command column or custom templates to initiate item deletion.
+     * Creates and emits a properly formatted RemoveEvent to notify parent components of deletion request.
+     * This method bridges custom UI elements with the standard Kendo TreeList removal workflow.
+     *
+     * @param dataItem - The tree-list item data object to be deleted
+     */
+    onRemoveButtonClick(dataItem) {
+        // Emit the remove event to let parent component handle the removal logic
+        this.remove.emit({ dataItem });
+    }
+    /**
+     * Recursively expands all collapsible nodes in the tree-list hierarchy.
+     * Iterates through all top-level data items and uses the Kendo TreeList API to expand each node,
+     * which triggers cascading expansion of all child nodes. Safely handles cases where the
+     * TreeList element is not yet initialized.
+     */
+    expandAll() {
+        if (this.treeListElement) {
+            // TreeList doesn't have expandAll, so we implement custom logic
+            this.data.forEach(item => {
+                if (this.treeListElement) {
+                    this.treeListElement.expand(item);
+                }
+            });
+        }
+    }
+    /**
+     * Recursively collapses all expandable nodes in the tree-list hierarchy.
+     * Iterates through all top-level data items and uses the Kendo TreeList API to collapse each node,
+     * which triggers cascading collapse of all child nodes. Safely handles cases where the
+     * TreeList element is not yet initialized.
+     */
+    collapseAll() {
+        if (this.treeListElement) {
+            // TreeList doesn't have collapseAll, so we implement custom logic
+            this.data.forEach(item => {
+                if (this.treeListElement) {
+                    this.treeListElement.collapse(item);
+                }
+            });
+        }
+    }
+    /**
+     * Provides a tracking function for Angular's ngFor optimization when rendering column definitions.
+     * Returns a unique identifier for each column to help Angular efficiently track and update
+     * column elements during re-rendering. Falls back to array index if no field property exists.
+     *
+     * @param index - The array index of the column in the columns collection
+     * @param column - The column configuration object containing field and other properties
+     * @returns A unique identifier for the column (field name or array index)
+     */
+    trackByColumn(index, column) {
+        return column.field || index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TreeListComponent, isStandalone: true, selector: "lib-tree-list", inputs: { data: "data", columns: "columns", idField: "idField", childrenField: "childrenField", parentIdField: "parentIdField", bindingType: "bindingType", fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded", selectable: "selectable", sortable: "sortable", filterable: "filterable", resizable: "resizable", reorderable: "reorderable", editable: "editable", loading: "loading", height: "height", scrollable: "scrollable", pageSize: "pageSize", pageable: "pageable", sort: "sort", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", editTemplate: "editTemplate", commandTemplate: "commandTemplate", noRecordsTemplate: "noRecordsTemplate", loadingTemplate: "loadingTemplate" }, outputs: { selectionChange: "selectionChange", expand: "expand", collapse: "collapse", sortChange: "sortChange", filterChange: "filterChange", pageChange: "pageChange", add: "add", edit: "edit", cancelEvent: "cancelEvent", save: "save", remove: "remove", cellClick: "cellClick", cellClose: "cellClose" }, viewQueries: [{ propertyName: "treeListElement", first: true, predicate: ["treeListElement"], descendants: true }], ngImport: i0, template: "<div [class]=\"getTreeListClasses()\">\n  <!-- Enhanced TreeList with Hierarchy Binding -->\n  <kendo-treelist *ngIf=\"bindingType === 'hierarchy'\" [kendoTreeListHierarchyBinding]=\"data\"\n    [childrenField]=\"childrenField\" [idField]=\"idField\" class=\"lib-tree-list__kendo-treelist\" [selectable]=\"selectable\"\n    (selectionChange)=\"onSelectionChange($event)\" [sortable]=\"sortable\" [sort]=\"sort\"\n    (sortChange)=\"onSortChange($event)\" [filterable]=\"filterable\" (filterChange)=\"onFilterChange($event)\"\n    [pageable]=\"pageable\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\" [resizable]=\"resizable\"\n    [reorderable]=\"reorderable\" [height]=\"height\" [scrollable]=\"scrollable\" [navigable]=\"editable\"\n    (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\" (cellClick)=\"onCellClick($event)\"\n    (cellClose)=\"onCellClose($event)\" (add)=\"onAdd($event)\" (edit)=\"onEdit($event)\" (cancel)=\"onCancel($event)\"\n    (save)=\"onSave($event)\" (remove)=\"onRemove($event)\" kendoTreeListExpandable [initiallyExpanded]=\"true\"\n    kendoTreeListSelectable>\n\n    <!-- Dynamic columns with templates -->\n    <kendo-treelist-column *ngFor=\"let column of columns; trackBy: trackByColumn; let i = index\" [field]=\"column.field\"\n      [title]=\"column.title || column.field\" [width]=\"column.width\" [locked]=\"column.locked\" [hidden]=\"column.hidden\"\n      [sortable]=\"column.sortable !== undefined ? column.sortable : sortable\"\n      [filterable]=\"column.filterable !== undefined ? column.filterable : filterable\"\n      [editable]=\"column.editable !== undefined ? column.editable : editable\" [format]=\"column.format\"\n      [expandable]=\"i === 0\">\n\n      <!-- Custom cell template -->\n      <ng-template *ngIf=\"column.template\" kendoTreeListCellTemplate let-dataItem=\"dataItem\" let-rowIndex=\"rowIndex\"\n        let-columnIndex=\"columnIndex\">\n        <ng-container [ngTemplateOutlet]=\"column.template\" [ngTemplateOutletContext]=\"{ \n            $implicit: dataItem, \n            dataItem: dataItem, \n            rowIndex: rowIndex, \n            columnIndex: columnIndex,\n            field: column.field,\n            value: dataItem[column.field]\n          }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Custom header template -->\n      <ng-template *ngIf=\"column.headerTemplate\" kendoTreeListHeaderTemplate>\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Custom footer template -->\n      <ng-template *ngIf=\"column.footerTemplate\" kendoTreeListFooterTemplate>\n        <ng-container [ngTemplateOutlet]=\"column.footerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Edit template for inline editing -->\n      <ng-template *ngIf=\"editable && column.editTemplate\" kendoTreeListEditTemplate let-dataItem=\"dataItem\"\n        let-formGroup=\"formGroup\">\n        <ng-container [ngTemplateOutlet]=\"column.editTemplate\" [ngTemplateOutletContext]=\"{ \n            dataItem: dataItem, \n            formGroup: formGroup,\n            field: column.field\n          }\">\n        </ng-container>\n      </ng-template>\n    </kendo-treelist-column>\n\n    <!-- Command column for editing actions -->\n    <kendo-treelist-command-column *ngIf=\"editable\" title=\"Actions\" width=\"150\" [locked]=\"false\">\n      <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-dataItem=\"dataItem\" let-cellContext=\"cellContext\">\n        <lib-button *ngIf=\"!isNew\" label=\"\" iconName=\"edit\" size=\"medium\" fillMode=\"flat\" themeColor=\"primary\"\n          [iconButton]=\"true\" (buttonClick)=\"onEditButtonClick(dataItem)\" [attr.aria-label]=\"'Edit ' + dataItem.name\">\n        </lib-button>\n        <lib-button *ngIf=\"!isNew\" label=\"\" iconName=\"delete\" size=\"medium\" fillMode=\"flat\" themeColor=\"error\"\n          [iconButton]=\"true\" (buttonClick)=\"onRemoveButtonClick(dataItem)\"\n          [attr.aria-label]=\"'Delete ' + dataItem.name\">\n        </lib-button>\n      </ng-template>\n    </kendo-treelist-command-column>\n  </kendo-treelist>\n\n  <!-- Enhanced TreeList with Flat Binding -->\n  <kendo-treelist *ngIf=\"bindingType === 'flat'\" [kendoTreeListFlatBinding]=\"data\" [parentIdField]=\"parentIdField\"\n    [idField]=\"idField\" class=\"lib-tree-list__kendo-treelist\" [selectable]=\"selectable\"\n    (selectionChange)=\"onSelectionChange($event)\" [sortable]=\"sortable\" [sort]=\"sort\"\n    (sortChange)=\"onSortChange($event)\" [filterable]=\"filterable\" (filterChange)=\"onFilterChange($event)\"\n    [pageable]=\"pageable\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\" [resizable]=\"resizable\"\n    [reorderable]=\"reorderable\" [height]=\"height\" [scrollable]=\"scrollable\" [navigable]=\"editable\"\n    (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\" (cellClick)=\"onCellClick($event)\"\n    (cellClose)=\"onCellClose($event)\" (add)=\"onAdd($event)\" (edit)=\"onEdit($event)\" (cancel)=\"onCancel($event)\"\n    (save)=\"onSave($event)\" (remove)=\"onRemove($event)\">\n\n    <!-- Dynamic columns with templates for flat binding -->\n    <kendo-treelist-column *ngFor=\"let column of columns; trackBy: trackByColumn; let i = index\" [field]=\"column.field\"\n      [title]=\"column.title || column.field\" [width]=\"column.width\" [locked]=\"column.locked\" [hidden]=\"column.hidden\"\n      [sortable]=\"column.sortable !== undefined ? column.sortable : sortable\"\n      [filterable]=\"column.filterable !== undefined ? column.filterable : filterable\"\n      [editable]=\"column.editable !== undefined ? column.editable : editable\" [format]=\"column.format\"\n      [expandable]=\"i === 0\">\n\n      <!-- Custom cell template -->\n      <ng-template *ngIf=\"column.template\" kendoTreeListCellTemplate let-dataItem=\"dataItem\" let-rowIndex=\"rowIndex\"\n        let-columnIndex=\"columnIndex\">\n        <ng-container [ngTemplateOutlet]=\"column.template\" [ngTemplateOutletContext]=\"{ \n            $implicit: dataItem, \n            dataItem: dataItem, \n            rowIndex: rowIndex, \n            columnIndex: columnIndex,\n            field: column.field,\n            value: dataItem[column.field]\n          }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Custom header template -->\n      <ng-template *ngIf=\"column.headerTemplate\" kendoTreeListHeaderTemplate>\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Custom footer template -->\n      <ng-template *ngIf=\"column.footerTemplate\" kendoTreeListFooterTemplate>\n        <ng-container [ngTemplateOutlet]=\"column.footerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Edit template for inline editing -->\n      <ng-template *ngIf=\"editable && column.editTemplate\" kendoTreeListEditTemplate let-dataItem=\"dataItem\"\n        let-formGroup=\"formGroup\">\n        <ng-container [ngTemplateOutlet]=\"column.editTemplate\" [ngTemplateOutletContext]=\"{ \n            dataItem: dataItem, \n            formGroup: formGroup,\n            field: column.field\n          }\">\n        </ng-container>\n      </ng-template>\n    </kendo-treelist-column>\n\n    <!-- Command column for editing actions -->\n    <kendo-treelist-command-column *ngIf=\"editable\" title=\"Actions\" width=\"150\" [locked]=\"false\">\n      <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-dataItem=\"dataItem\">\n        <lib-button *ngIf=\"!isNew\" label=\"\" iconName=\"edit\" size=\"medium\" fillMode=\"flat\" themeColor=\"primary\"\n          [iconButton]=\"true\" (buttonClick)=\"onEditButtonClick(dataItem)\" [attr.aria-label]=\"'Edit ' + dataItem.name\">\n        </lib-button>\n        <lib-button *ngIf=\"!isNew\" label=\"\" iconName=\"delete\" size=\"medium\" fillMode=\"flat\" themeColor=\"error\"\n          [iconButton]=\"true\" (buttonClick)=\"onRemoveButtonClick(dataItem)\"\n          [attr.aria-label]=\"'Delete ' + dataItem.name\">\n        </lib-button>\n      </ng-template>\n    </kendo-treelist-command-column>\n  </kendo-treelist>\n\n  <!-- Loading indicator -->\n  <div *ngIf=\"loading\" class=\"lib-tree-list__loading\">\n    <lib-loader size=\"medium\" type=\"pulsing\" themeColor=\"primary\"></lib-loader>\n  </div>\n</div>\n", styles: [".lib-tree-list{position:relative;width:100%}::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-row.k-disabled>.k-table-td{background-color:#fff!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-grid td,::ng-deep .k-grid .k-table-td{white-space:nowrap!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}::ng-deep kendo-grid.k-grid .k-table-alt-row .k-grid-content-sticky,::ng-deep kendo-grid.k-grid .k-grid-row-sticky.k-table-alt-row td,::ng-deep kendo-grid.k-grid .k-grid-row-sticky.k-table-alt-row .k-table-td,::ng-deep .k-master-row.k-table-alt-row .k-grid-content-sticky,::ng-deep .k-master-row.k-table-alt-row .k-grid-row-sticky{background-color:#fff}::ng-deep kendo-grid.k-grid .k-grid-content-sticky:hover,::ng-deep kendo-grid.k-grid .k-grid-content-sticky.k-hover,::ng-deep kendo-grid.k-grid .k-table-row:hover .k-grid-content-sticky{background-color:#d0dcf5!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TreeListModule$1 }, { kind: "component", type: i2$7.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "rowReorderable", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange", "rowReorder"], exportAs: ["kendoTreeList"] }, { kind: "directive", type: i2$7.HierarchyBindingDirective, selector: "[kendoTreeListHierarchyBinding]", inputs: ["childrenField", "kendoTreeListHierarchyBinding"], exportAs: ["kendoTreeListHierarchyBinding"] }, { kind: "directive", type: i2$7.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { kind: "directive", type: i2$7.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["expandedKeys", "initiallyExpanded", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { kind: "directive", type: i2$7.SelectableDirective, selector: "[kendoTreeListSelectable]", inputs: ["selectable", "selectedItems", "itemKey", "columnKey"], outputs: ["selectedItemsChange"], exportAs: ["kendoTreeListSelectable"] }, { kind: "component", type: i2$7.ColumnComponent, selector: "kendo-treelist-column", inputs: ["expandable", "field", "format", "sortable", "editor", "filter", "filterable", "editable"] }, { kind: "component", type: i2$7.CommandColumnComponent, selector: "kendo-treelist-command-column" }, { kind: "directive", type: i2$7.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { kind: "directive", type: i2$7.EditTemplateDirective, selector: "[kendoTreeListEditTemplate]" }, { kind: "directive", type: i2$7.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { kind: "directive", type: i2$7.HeaderTemplateDirective, selector: "[kendoTreeListHeaderTemplate]" }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon", "formatFn", "iconFontSize"], outputs: ["buttonClick"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeListComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'lib-tree-list', imports: [
+                        CommonModule,
+                        TreeListModule$1,
+                        IconsModule,
+                        ButtonComponent,
+                        IconComponent,
+                        LoaderComponent
+                    ], template: "<div [class]=\"getTreeListClasses()\">\n  <!-- Enhanced TreeList with Hierarchy Binding -->\n  <kendo-treelist *ngIf=\"bindingType === 'hierarchy'\" [kendoTreeListHierarchyBinding]=\"data\"\n    [childrenField]=\"childrenField\" [idField]=\"idField\" class=\"lib-tree-list__kendo-treelist\" [selectable]=\"selectable\"\n    (selectionChange)=\"onSelectionChange($event)\" [sortable]=\"sortable\" [sort]=\"sort\"\n    (sortChange)=\"onSortChange($event)\" [filterable]=\"filterable\" (filterChange)=\"onFilterChange($event)\"\n    [pageable]=\"pageable\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\" [resizable]=\"resizable\"\n    [reorderable]=\"reorderable\" [height]=\"height\" [scrollable]=\"scrollable\" [navigable]=\"editable\"\n    (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\" (cellClick)=\"onCellClick($event)\"\n    (cellClose)=\"onCellClose($event)\" (add)=\"onAdd($event)\" (edit)=\"onEdit($event)\" (cancel)=\"onCancel($event)\"\n    (save)=\"onSave($event)\" (remove)=\"onRemove($event)\" kendoTreeListExpandable [initiallyExpanded]=\"true\"\n    kendoTreeListSelectable>\n\n    <!-- Dynamic columns with templates -->\n    <kendo-treelist-column *ngFor=\"let column of columns; trackBy: trackByColumn; let i = index\" [field]=\"column.field\"\n      [title]=\"column.title || column.field\" [width]=\"column.width\" [locked]=\"column.locked\" [hidden]=\"column.hidden\"\n      [sortable]=\"column.sortable !== undefined ? column.sortable : sortable\"\n      [filterable]=\"column.filterable !== undefined ? column.filterable : filterable\"\n      [editable]=\"column.editable !== undefined ? column.editable : editable\" [format]=\"column.format\"\n      [expandable]=\"i === 0\">\n\n      <!-- Custom cell template -->\n      <ng-template *ngIf=\"column.template\" kendoTreeListCellTemplate let-dataItem=\"dataItem\" let-rowIndex=\"rowIndex\"\n        let-columnIndex=\"columnIndex\">\n        <ng-container [ngTemplateOutlet]=\"column.template\" [ngTemplateOutletContext]=\"{ \n            $implicit: dataItem, \n            dataItem: dataItem, \n            rowIndex: rowIndex, \n            columnIndex: columnIndex,\n            field: column.field,\n            value: dataItem[column.field]\n          }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Custom header template -->\n      <ng-template *ngIf=\"column.headerTemplate\" kendoTreeListHeaderTemplate>\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Custom footer template -->\n      <ng-template *ngIf=\"column.footerTemplate\" kendoTreeListFooterTemplate>\n        <ng-container [ngTemplateOutlet]=\"column.footerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Edit template for inline editing -->\n      <ng-template *ngIf=\"editable && column.editTemplate\" kendoTreeListEditTemplate let-dataItem=\"dataItem\"\n        let-formGroup=\"formGroup\">\n        <ng-container [ngTemplateOutlet]=\"column.editTemplate\" [ngTemplateOutletContext]=\"{ \n            dataItem: dataItem, \n            formGroup: formGroup,\n            field: column.field\n          }\">\n        </ng-container>\n      </ng-template>\n    </kendo-treelist-column>\n\n    <!-- Command column for editing actions -->\n    <kendo-treelist-command-column *ngIf=\"editable\" title=\"Actions\" width=\"150\" [locked]=\"false\">\n      <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-dataItem=\"dataItem\" let-cellContext=\"cellContext\">\n        <lib-button *ngIf=\"!isNew\" label=\"\" iconName=\"edit\" size=\"medium\" fillMode=\"flat\" themeColor=\"primary\"\n          [iconButton]=\"true\" (buttonClick)=\"onEditButtonClick(dataItem)\" [attr.aria-label]=\"'Edit ' + dataItem.name\">\n        </lib-button>\n        <lib-button *ngIf=\"!isNew\" label=\"\" iconName=\"delete\" size=\"medium\" fillMode=\"flat\" themeColor=\"error\"\n          [iconButton]=\"true\" (buttonClick)=\"onRemoveButtonClick(dataItem)\"\n          [attr.aria-label]=\"'Delete ' + dataItem.name\">\n        </lib-button>\n      </ng-template>\n    </kendo-treelist-command-column>\n  </kendo-treelist>\n\n  <!-- Enhanced TreeList with Flat Binding -->\n  <kendo-treelist *ngIf=\"bindingType === 'flat'\" [kendoTreeListFlatBinding]=\"data\" [parentIdField]=\"parentIdField\"\n    [idField]=\"idField\" class=\"lib-tree-list__kendo-treelist\" [selectable]=\"selectable\"\n    (selectionChange)=\"onSelectionChange($event)\" [sortable]=\"sortable\" [sort]=\"sort\"\n    (sortChange)=\"onSortChange($event)\" [filterable]=\"filterable\" (filterChange)=\"onFilterChange($event)\"\n    [pageable]=\"pageable\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\" [resizable]=\"resizable\"\n    [reorderable]=\"reorderable\" [height]=\"height\" [scrollable]=\"scrollable\" [navigable]=\"editable\"\n    (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\" (cellClick)=\"onCellClick($event)\"\n    (cellClose)=\"onCellClose($event)\" (add)=\"onAdd($event)\" (edit)=\"onEdit($event)\" (cancel)=\"onCancel($event)\"\n    (save)=\"onSave($event)\" (remove)=\"onRemove($event)\">\n\n    <!-- Dynamic columns with templates for flat binding -->\n    <kendo-treelist-column *ngFor=\"let column of columns; trackBy: trackByColumn; let i = index\" [field]=\"column.field\"\n      [title]=\"column.title || column.field\" [width]=\"column.width\" [locked]=\"column.locked\" [hidden]=\"column.hidden\"\n      [sortable]=\"column.sortable !== undefined ? column.sortable : sortable\"\n      [filterable]=\"column.filterable !== undefined ? column.filterable : filterable\"\n      [editable]=\"column.editable !== undefined ? column.editable : editable\" [format]=\"column.format\"\n      [expandable]=\"i === 0\">\n\n      <!-- Custom cell template -->\n      <ng-template *ngIf=\"column.template\" kendoTreeListCellTemplate let-dataItem=\"dataItem\" let-rowIndex=\"rowIndex\"\n        let-columnIndex=\"columnIndex\">\n        <ng-container [ngTemplateOutlet]=\"column.template\" [ngTemplateOutletContext]=\"{ \n            $implicit: dataItem, \n            dataItem: dataItem, \n            rowIndex: rowIndex, \n            columnIndex: columnIndex,\n            field: column.field,\n            value: dataItem[column.field]\n          }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Custom header template -->\n      <ng-template *ngIf=\"column.headerTemplate\" kendoTreeListHeaderTemplate>\n        <ng-container [ngTemplateOutlet]=\"column.headerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Custom footer template -->\n      <ng-template *ngIf=\"column.footerTemplate\" kendoTreeListFooterTemplate>\n        <ng-container [ngTemplateOutlet]=\"column.footerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n        </ng-container>\n      </ng-template>\n\n      <!-- Edit template for inline editing -->\n      <ng-template *ngIf=\"editable && column.editTemplate\" kendoTreeListEditTemplate let-dataItem=\"dataItem\"\n        let-formGroup=\"formGroup\">\n        <ng-container [ngTemplateOutlet]=\"column.editTemplate\" [ngTemplateOutletContext]=\"{ \n            dataItem: dataItem, \n            formGroup: formGroup,\n            field: column.field\n          }\">\n        </ng-container>\n      </ng-template>\n    </kendo-treelist-column>\n\n    <!-- Command column for editing actions -->\n    <kendo-treelist-command-column *ngIf=\"editable\" title=\"Actions\" width=\"150\" [locked]=\"false\">\n      <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-dataItem=\"dataItem\">\n        <lib-button *ngIf=\"!isNew\" label=\"\" iconName=\"edit\" size=\"medium\" fillMode=\"flat\" themeColor=\"primary\"\n          [iconButton]=\"true\" (buttonClick)=\"onEditButtonClick(dataItem)\" [attr.aria-label]=\"'Edit ' + dataItem.name\">\n        </lib-button>\n        <lib-button *ngIf=\"!isNew\" label=\"\" iconName=\"delete\" size=\"medium\" fillMode=\"flat\" themeColor=\"error\"\n          [iconButton]=\"true\" (buttonClick)=\"onRemoveButtonClick(dataItem)\"\n          [attr.aria-label]=\"'Delete ' + dataItem.name\">\n        </lib-button>\n      </ng-template>\n    </kendo-treelist-command-column>\n  </kendo-treelist>\n\n  <!-- Loading indicator -->\n  <div *ngIf=\"loading\" class=\"lib-tree-list__loading\">\n    <lib-loader size=\"medium\" type=\"pulsing\" themeColor=\"primary\"></lib-loader>\n  </div>\n</div>\n", styles: [".lib-tree-list{position:relative;width:100%}::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-row.k-disabled>.k-table-td{background-color:#fff!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-grid td,::ng-deep .k-grid .k-table-td{white-space:nowrap!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}::ng-deep kendo-grid.k-grid .k-table-alt-row .k-grid-content-sticky,::ng-deep kendo-grid.k-grid .k-grid-row-sticky.k-table-alt-row td,::ng-deep kendo-grid.k-grid .k-grid-row-sticky.k-table-alt-row .k-table-td,::ng-deep .k-master-row.k-table-alt-row .k-grid-content-sticky,::ng-deep .k-master-row.k-table-alt-row .k-grid-row-sticky{background-color:#fff}::ng-deep kendo-grid.k-grid .k-grid-content-sticky:hover,::ng-deep kendo-grid.k-grid .k-grid-content-sticky.k-hover,::ng-deep kendo-grid.k-grid .k-table-row:hover .k-grid-content-sticky{background-color:#d0dcf5!important}\n"] }]
+        }], propDecorators: { treeListElement: [{
+                type: ViewChild,
+                args: ['treeListElement', { static: false }]
+            }], data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], childrenField: [{
+                type: Input
+            }], parentIdField: [{
+                type: Input
+            }], bindingType: [{
+                type: Input
+            }], fetchChildren: [{
+                type: Input
+            }], hasChildren: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageable: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], cellTemplate: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], editTemplate: [{
+                type: Input
+            }], commandTemplate: [{
+                type: Input
+            }], noRecordsTemplate: [{
+                type: Input
+            }], loadingTemplate: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], add: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], cancelEvent: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], cellClick: [{
+                type: Output
+            }], cellClose: [{
+                type: Output
+            }] } });
+
+class TreeListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TreeListModule, imports: [TreeListComponent,
+            CommonModule,
+            TreeListModule$1,
+            IconsModule,
+            ButtonModule,
+            IconModule,
+            LoaderModule], exports: [TreeListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeListModule, imports: [TreeListComponent,
+            CommonModule,
+            TreeListModule$1,
+            IconsModule,
+            ButtonModule,
+            IconModule,
+            LoaderModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TreeListComponent,
+                        CommonModule,
+                        TreeListModule$1,
+                        IconsModule,
+                        ButtonModule,
+                        IconModule,
+                        LoaderModule
+                    ],
+                    exports: [
+                        TreeListComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Custom TreeView component that wraps Kendo's TreeView with design system styling.
+ *
+ * This component provides a hierarchical tree structure for displaying and navigating data.
+ * It supports selection, expansion, icons, and custom templates.
+ */
+class TreeViewComponent {
+    constructor() {
+        /**
+         * The data source for the tree view
+         */
+        this.data = [];
+        // Basic Properties
+        this.selectable = false;
+        this.filterable = false;
+        this.checkboxes = false;
+        this.checkable = false;
+        this.dragAndDrop = false;
+        this.expandable = true;
+        this.loading = false;
+        this.animate = true;
+        this.size = 'medium';
+        // Field Configuration
+        this.textField = 'text';
+        this.childrenField = 'children';
+        this.hasChildrenField = 'hasChildren';
+        this.expandedField = 'expanded';
+        this.selectedField = 'selected';
+        this.disabledField = 'disabled';
+        this.checkedField = 'checked';
+        this.iconClassField = 'iconClass';
+        this.iconField = 'icon';
+        this.imageUrlField = 'imageUrl';
+        this.spriteCssClassField = 'spriteCssClass';
+        // Selection and Expansion
+        this.disabledKeys = [];
+        this.expandBy = ''; //if expandBy is empty, expandedKeys will use index to track expansion. Otherwise, it will use the field name to decide the expandedKeys.
+        this.expandedKeys = [];
+        this.selectedKeys = [];
+        this.checkedKeys = [];
+        this.expandDisabledNodes = false;
+        this.disableNodes = false;
+        // Checkbox Configuration
+        this.enableCheck = false;
+        this.checkChildren = false;
+        this.checkDisabledChildren = false;
+        this.checkParents = false;
+        this.checkOnClick = false;
+        this.uncheckCollapsedChildren = false;
+        this.checkMode = "multiple";
+        this.pageSize = 0;
+        this.loadOnDemand = false;
+        // Filtering
+        this.filter = '';
+        // Keyboard Navigation
+        this.navigable = true;
+        // Basic Events
+        this.selectionChange = new EventEmitter();
+        this.expand = new EventEmitter();
+        this.collapse = new EventEmitter();
+        this.checkedChange = new EventEmitter();
+        this.nodeClick = new EventEmitter();
+        this.nodeDblClick = new EventEmitter();
+        // Drag and Drop Events
+        this.nodeDragStart = new EventEmitter();
+        this.nodeDrag = new EventEmitter();
+        this.nodeDrop = new EventEmitter();
+        this.nodeDragEnd = new EventEmitter();
+        this.addItem = new EventEmitter();
+        this.removeItem = new EventEmitter();
+        // Key Change Events (Two-way binding support)
+        this.expandedKeysChange = new EventEmitter();
+        this.selectedKeysChange = new EventEmitter();
+        this.checkedKeysChange = new EventEmitter();
+        // Filter Events
+        this.filterChange = new EventEmitter();
+        // Load More Events
+        this.loadMore = new EventEmitter();
+        // Children Loading Events
+        this.childrenLoaded = new EventEmitter();
+        /**
+         * Currently selected items
+         */
+        this.selectedItems = [];
+        /**
+         * Currently checked items
+         */
+        this.checkedItems = [];
+        /**
+         * Extracts and returns child items from a tree node using the configured children field.
+         * Provides a standardized way for the Kendo TreeView to access hierarchical child data
+         * regardless of the actual field name used in the data structure.
+         *
+         * @param dataItem - The tree node data item to extract children from
+         * @returns Observable array of child items or empty array if no children exist
+         */
+        this.children = (dataItem) => of(dataItem[this.childrenField]);
+        /**
+         * Determines whether a tree node has child items for proper expand/collapse icon display.
+         * Checks for the existence of children property and logs the result for debugging purposes.
+         * Used by the TreeView to decide whether to show expansion indicators for each node.
+         *
+         * @param dataItem - The tree node data item to check for children
+         * @returns Boolean indicating whether the node has children that can be expanded
+         */
+        this.hasChildren = (dataItem) => { return !!dataItem[this.childrenField]; };
+    }
+    /**
+     * Generates CSS classes for the tree-view container element based on current component state.
+     * Applies conditional styling classes to reflect loading states and enable appropriate visual feedback.
+     *
+     * @returns A space-separated string of CSS class names to apply to the tree-view container
+     */
+    getTreeViewClasses() {
+        const classes = ['lib-tree-view'];
+        if (this.loading) {
+            classes.push('lib-tree-view--loading');
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Provides comprehensive checkable settings configuration for the Kendo TreeView component.
+     * Aggregates all checkbox-related input properties into a single configuration object
+     * that controls checkbox behavior including parent-child relationships and interaction modes.
+     *
+     * @returns CheckableSettings object with all checkbox configuration options
+     */
+    get checkableSettings() {
+        return {
+            checkChildren: this.checkChildren,
+            checkDisabledChildren: this.checkDisabledChildren,
+            checkParents: this.checkParents,
+            enabled: this.enableCheck,
+            mode: this.checkMode,
+            checkOnClick: this.checkOnClick,
+            uncheckCollapsedChildren: this.uncheckCollapsedChildren,
+        };
+    }
+    // Event Handlers
+    /**
+     * Handles tree node selection changes when users select or deselect nodes.
+     * Updates the internal selected items state and propagates the selection event
+     * to parent components for external handling and synchronization.
+     *
+     * @param event - The selection change event containing the newly selected items array
+     */
+    onSelectionChange(event) {
+        this.selectedItems = event;
+        this.selectionChange.emit(event);
+    }
+    /**
+     * Handles checkbox state changes when users check or uncheck tree nodes.
+     * Updates the internal checked items state and emits the change event to notify
+     * parent components of the new checkbox selections for form validation or data processing.
+     *
+     * @param event - The checked change event containing the newly checked items array
+     */
+    onCheckedChange(event) {
+        this.checkedItems = event;
+        this.checkedChange.emit(event);
+    }
+    /**
+     * Handles tree node expansion events when users click expand icons or use keyboard navigation.
+     * Updates the node's expanded state in the data model and emits the expand event
+     * for parent components to handle lazy loading of child data or state persistence.
+     *
+     * @param event - The expand event containing the expanded node data and context information
+     */
+    onExpand(event) {
+        if (event.dataItem) {
+            event.dataItem[this.expandedField] = true;
+        }
+        this.expand.emit(event);
+    }
+    /**
+     * Handles tree node collapse events when users click collapse icons or use keyboard navigation.
+     * Updates the node's expanded state in the data model and emits the collapse event
+     * for parent components to handle state cleanup or memory optimization.
+     *
+     * @param event - The collapse event containing the collapsed node data and context information
+     */
+    onCollapse(event) {
+        if (event.dataItem) {
+            event.dataItem[this.expandedField] = false;
+        }
+        this.collapse.emit(event);
+    }
+    /**
+     * Handles single-click events on tree nodes for custom interaction handling.
+     * Propagates click events to parent components for navigation, selection logic,
+     * or custom actions based on the clicked node's data and context.
+     *
+     * @param event - The node click event containing clicked node data and mouse event details
+     */
+    onNodeClick(event) {
+        this.nodeClick.emit(event);
+    }
+    /**
+     * Handles double-click events on tree nodes for enhanced interaction patterns.
+     * Typically used for opening detailed views, editing modes, or quick actions
+     * that differ from single-click behavior. Emits event for parent component handling.
+     *
+     * @param event - The node double-click event containing node data and mouse event details
+     */
+    onNodeDblClick(event) {
+        this.nodeDblClick.emit(event);
+    }
+    /**
+     * Handles the initiation of drag operations when users start dragging tree nodes.
+     * Validates that drag-and-drop functionality is enabled before proceeding and
+     * emits the drag start event for parent components to handle drag state setup.
+     *
+     * @param event - The tree item drag start event containing source node and drag context
+     */
+    onNodeDragStart(event) {
+        if (!this.dragAndDrop) {
+            return;
+        }
+        this.nodeDragStart.emit(event);
+    }
+    /**
+     * Handles ongoing drag operations as users move nodes during drag-and-drop actions.
+     * Provides real-time feedback and validation during the drag process, allowing
+     * parent components to update UI indicators or validate drop targets.
+     *
+     * @param event - The tree item drag event containing current drag position and target information
+     */
+    onNodeDrag(event) {
+        this.nodeDrag.emit(event);
+    }
+    /**
+     * Handles the completion of drag operations when users finish dragging nodes.
+     * Provides cleanup and final processing for drag-and-drop operations, allowing
+     * parent components to finalize data updates and reset drag-related UI states.
+     *
+     * @param event - The tree item drag end event containing final drag state and completion context
+     */
+    onNodeDragEnd(event) {
+        this.nodeDragEnd.emit(event);
+    }
+    /**
+     * Handles item addition events when new nodes are added to the tree structure.
+     * Propagates add events to parent components for data persistence, validation,
+     * and tree structure updates to maintain data integrity.
+     *
+     * @param event - The tree item add event containing new item data and insertion context
+     */
+    onAddItem(event) {
+        this.addItem.emit(event);
+    }
+    /**
+     * Handles item removal events when nodes are deleted from the tree structure.
+     * Propagates remove events to parent components for confirmation dialogs, data cleanup,
+     * and cascading deletions of child nodes when necessary.
+     *
+     * @param event - The tree item remove event containing deleted item data and context
+     */
+    onRemoveItem(event) {
+        this.removeItem.emit(event);
+    }
+    /**
+     * Handles expanded keys changes for two-way binding support with parent components.
+     * Synchronizes internal expanded state with external data binding, enabling
+     * programmatic control of tree expansion and state persistence across component updates.
+     *
+     * @param keys - Array of string keys representing currently expanded tree nodes
+     */
+    onExpandedKeysChange(keys) {
+        this.expandedKeys = keys;
+        this.expandedKeysChange.emit(keys);
+    }
+    /**
+     * Handles selected keys changes for two-way binding support with parent components.
+     * Synchronizes internal selection state with external data binding, enabling
+     * programmatic control of tree selection and form integration capabilities.
+     *
+     * @param keys - Array of string keys representing currently selected tree nodes
+     */
+    onSelectedKeysChange(keys) {
+        this.selectedKeys = keys;
+        this.selectedKeysChange.emit(keys);
+    }
+    /**
+     * Handles checked keys changes for two-way binding support with parent components.
+     * Synchronizes internal checkbox state with external data binding, enabling
+     * programmatic control of checkbox selections and form validation integration.
+     *
+     * @param keys - Array of string keys representing currently checked tree nodes
+     */
+    onCheckedKeysChange(keys) {
+        this.checkedKeys = keys;
+        this.checkedKeysChange.emit(keys);
+    }
+    /**
+     * Handles filter text changes when users type in search fields or apply filtering criteria.
+     * Updates the internal filter state and propagates changes to parent components
+     * for server-side filtering or custom search logic implementation.
+     *
+     * @param filter - The filter string entered by the user for tree node searching
+     */
+    onFilterChange(filter) {
+        this.filter = filter;
+        this.filterChange.emit(filter);
+    }
+    /**
+     * Handle load more event
+     */
+    onLoadMore(event) {
+        this.loadMore.emit(event);
+    }
+    /**
+     * Handle children loaded event
+     */
+    onChildrenLoaded(event) {
+        this.childrenLoaded.emit(event);
+    }
+    // Utility Methods
+    /**
+     * Expand all nodes
+     */
+    expandAll() {
+        if (this.treeViewElement) {
+            // Implementation depends on Kendo TreeView API
+        }
+    }
+    /**
+     * Get item from lookup
+     */
+    itemLookup(index) {
+        if (this.treeViewElement) {
+            return this.treeViewElement.itemLookup(index);
+        }
+        return undefined;
+    }
+    /**
+     * Log function for debugging events
+     */
+    log(eventName, event) {
+        console.log(`${eventName}:`, event);
+    }
+    /**
+     * Handle drop event with custom logic
+     */
+    handleDrop(event) {
+        console.log('handleDrop:', event);
+        // Add custom drop handling logic here
+        this.nodeDrop.emit(event);
+    }
+    /**
+     * Handle node drag start event
+     */
+    onDragStart(event) {
+        if (!this.dragAndDrop) {
+            event.preventDefault();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TreeViewComponent, isStandalone: true, selector: "lib-tree-view", inputs: { data: "data", selectable: "selectable", filterable: "filterable", checkboxes: "checkboxes", checkable: "checkable", dragAndDrop: "dragAndDrop", expandable: "expandable", loading: "loading", animate: "animate", size: "size", textField: "textField", childrenField: "childrenField", hasChildrenField: "hasChildrenField", expandedField: "expandedField", selectedField: "selectedField", disabledField: "disabledField", checkedField: "checkedField", iconClassField: "iconClassField", iconField: "iconField", imageUrlField: "imageUrlField", spriteCssClassField: "spriteCssClassField", disabledKeys: "disabledKeys", expandBy: "expandBy", expandedKeys: "expandedKeys", selectedKeys: "selectedKeys", checkedKeys: "checkedKeys", expandDisabledNodes: "expandDisabledNodes", disableNodes: "disableNodes", enableCheck: "enableCheck", checkChildren: "checkChildren", checkDisabledChildren: "checkDisabledChildren", checkParents: "checkParents", checkOnClick: "checkOnClick", uncheckCollapsedChildren: "uncheckCollapsedChildren", checkMode: "checkMode", fetchChildren: "fetchChildren", isChecked: "isChecked", isDisabled: "isDisabled", isExpanded: "isExpanded", isSelected: "isSelected", isVisible: "isVisible", nodeTemplate: "nodeTemplate", loadMoreButtonTemplate: "loadMoreButtonTemplate", loadMoreService: "loadMoreService", pageSize: "pageSize", loadOnDemand: "loadOnDemand", filter: "filter", filterSettings: "filterSettings", navigable: "navigable", trackBy: "trackBy" }, outputs: { selectionChange: "selectionChange", expand: "expand", collapse: "collapse", checkedChange: "checkedChange", nodeClick: "nodeClick", nodeDblClick: "nodeDblClick", nodeDragStart: "nodeDragStart", nodeDrag: "nodeDrag", nodeDrop: "nodeDrop", nodeDragEnd: "nodeDragEnd", addItem: "addItem", removeItem: "removeItem", expandedKeysChange: "expandedKeysChange", selectedKeysChange: "selectedKeysChange", checkedKeysChange: "checkedKeysChange", filterChange: "filterChange", loadMore: "loadMore", childrenLoaded: "childrenLoaded" }, viewQueries: [{ propertyName: "treeViewElement", first: true, predicate: ["treeViewElement"], descendants: true }], ngImport: i0, template: "<div [class]=\"getTreeViewClasses()\">\n\n  <div class=\"treeview-panel\">\n\n    <ng-container [ngSwitch]=\"checkable\">\n\n      <kendo-treeview #treeViewElement *ngSwitchCase=\"true\" [children]=\"children\" kendoTreeViewHierarchyBinding\n        kendoTreeViewExpandable [kendoTreeViewCheckable]=\"checkableSettings\" kendoTreeViewDragAndDrop\n        kendoTreeViewDragAndDropEditing [nodes]=\"data\" [textField]=\"textField\" [childrenField]=\"childrenField\"\n        [filterable]=\"filterable\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\"\n        [expandDisabledNodes]=\"expandDisabledNodes\" (selectionChange)=\"onSelectionChange($event)\"\n        (checkedChange)=\"onCheckedChange($event)\" (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\"\n        (nodeClick)=\"onNodeClick($event)\" (expandedKeysChange)=\"onExpandedKeysChange($event)\"\n        (nodeDragStart)=\"onDragStart($event)\" (nodeDrop)=\"handleDrop($event)\" (addItem)=\"log('addItem', $event)\"\n        (removeItem)=\"log('removeItem', $event)\" (nodeDragEnd)=\"log('nodeDragEnd', $event)\"\n        (nodeDrag)=\"onNodeDrag($event)\" class=\"lib-tree-view__kendo-tree\" [kendoTreeViewSelectable]=\"selectable\"\n        [filter]=\"filter\" [size]=\"size\" [navigable]=\"navigable\" [loadOnDemand]=\"loadOnDemand\" [trackBy]=\"trackBy\"\n        [hasChildren]=\"hasChildren\" [(selectedKeys)]=\"selectedKeys\" (filterChange)=\"onFilterChange($event)\">\n\n        <!-- Custom Node Template -->\n        <ng-template *ngIf=\"nodeTemplate\" kendoTreeViewNodeTemplate let-dataItem=\"dataItem\" let-index=\"index\">\n          <ng-container [ngTemplateOutlet]=\"nodeTemplate\" [ngTemplateOutletContext]=\"{ \n        $implicit: dataItem, \n        dataItem: dataItem, \n        index: index \n      }\">\n          </ng-container>\n        </ng-template>\n\n        <!-- Load More Button Template -->\n        <ng-template *ngIf=\"loadMoreButtonTemplate\" kendoTreeViewLoadMoreButtonTemplate let-dataItem=\"dataItem\">\n          <ng-container [ngTemplateOutlet]=\"loadMoreButtonTemplate\" [ngTemplateOutletContext]=\"{ \n        $implicit: dataItem, \n        dataItem: dataItem \n      }\">\n          </ng-container>\n        </ng-template>\n\n      </kendo-treeview>\n\n      <!-- TreeView without checkable functionality -->\n      <kendo-treeview #treeViewElement *ngSwitchDefault kendoTreeViewHierarchyBinding kendoTreeViewExpandable\n        kendoTreeViewDragAndDrop kendoTreeViewDragAndDropEditing [nodes]=\"data\" [textField]=\"textField\"\n        [childrenField]=\"childrenField\" [filterable]=\"filterable\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\"\n        [expandDisabledNodes]=\"expandDisabledNodes\" (selectionChange)=\"onSelectionChange($event)\"\n        (checkedChange)=\"onCheckedChange($event)\" (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\"\n        (nodeClick)=\"onNodeClick($event)\" (expandedKeysChange)=\"onExpandedKeysChange($event)\"\n        (nodeDragStart)=\"onDragStart($event)\" (nodeDrag)=\"onNodeDrag($event)\" (nodeDrop)=\"handleDrop($event)\"\n        (addItem)=\"log('addItem', $event)\" (removeItem)=\"log('removeItem', $event)\"\n        (nodeDragEnd)=\"log('nodeDragEnd', $event)\" class=\"lib-tree-view__kendo-tree\"\n        [kendoTreeViewSelectable]=\"selectable\" [size]=\"size\" [navigable]=\"navigable\" [loadOnDemand]=\"loadOnDemand\"\n        [trackBy]=\"trackBy\" [hasChildren]=\"hasChildren\" [(selectedKeys)]=\"selectedKeys\"\n        (filterChange)=\"onFilterChange($event)\">\n\n        <!-- Custom Node Template -->\n        <ng-template *ngIf=\"nodeTemplate\" kendoTreeViewNodeTemplate let-dataItem=\"dataItem\" let-index=\"index\">\n          <ng-container [ngTemplateOutlet]=\"nodeTemplate\" [ngTemplateOutletContext]=\"{ \n        $implicit: dataItem, \n        dataItem: dataItem, \n        index: index \n      }\">\n          </ng-container>\n        </ng-template>\n\n        <!-- Load More Button Template -->\n        <ng-template *ngIf=\"loadMoreButtonTemplate\" kendoTreeViewLoadMoreButtonTemplate let-dataItem=\"dataItem\">\n          <ng-container [ngTemplateOutlet]=\"loadMoreButtonTemplate\" [ngTemplateOutletContext]=\"{ \n        $implicit: dataItem, \n        dataItem: dataItem \n      }\">\n          </ng-container>\n        </ng-template>\n\n      </kendo-treeview>\n    </ng-container>\n\n    <!-- Loading indicator -->\n    <div *ngIf=\"loading\" class=\"lib-tree-view__loading\">\n      <lib-loader size=\"medium\" type=\"pulsing\" themeColor=\"primary\"></lib-loader>\n    </div>\n  </div>\n", styles: [".lib-tree-view{position:relative;width:100%}.lib-tree-view__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background-color:#fffc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TreeViewModule$1 }, { kind: "component", type: i2$8.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: i2$8.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { kind: "directive", type: i2$8.CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { kind: "directive", type: i2$8.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: i2$8.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "directive", type: i2$8.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { kind: "directive", type: i2$8.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { kind: "directive", type: i2$8.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { kind: "directive", type: i2$8.LoadMoreButtonTemplateDirective, selector: "[kendoTreeViewLoadMoreButtonTemplate]" }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeViewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'lib-tree-view', imports: [
+                        CommonModule,
+                        TreeViewModule$1,
+                        IconsModule,
+                        ButtonComponent,
+                        IconComponent,
+                        LoaderComponent
+                    ], template: "<div [class]=\"getTreeViewClasses()\">\n\n  <div class=\"treeview-panel\">\n\n    <ng-container [ngSwitch]=\"checkable\">\n\n      <kendo-treeview #treeViewElement *ngSwitchCase=\"true\" [children]=\"children\" kendoTreeViewHierarchyBinding\n        kendoTreeViewExpandable [kendoTreeViewCheckable]=\"checkableSettings\" kendoTreeViewDragAndDrop\n        kendoTreeViewDragAndDropEditing [nodes]=\"data\" [textField]=\"textField\" [childrenField]=\"childrenField\"\n        [filterable]=\"filterable\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\"\n        [expandDisabledNodes]=\"expandDisabledNodes\" (selectionChange)=\"onSelectionChange($event)\"\n        (checkedChange)=\"onCheckedChange($event)\" (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\"\n        (nodeClick)=\"onNodeClick($event)\" (expandedKeysChange)=\"onExpandedKeysChange($event)\"\n        (nodeDragStart)=\"onDragStart($event)\" (nodeDrop)=\"handleDrop($event)\" (addItem)=\"log('addItem', $event)\"\n        (removeItem)=\"log('removeItem', $event)\" (nodeDragEnd)=\"log('nodeDragEnd', $event)\"\n        (nodeDrag)=\"onNodeDrag($event)\" class=\"lib-tree-view__kendo-tree\" [kendoTreeViewSelectable]=\"selectable\"\n        [filter]=\"filter\" [size]=\"size\" [navigable]=\"navigable\" [loadOnDemand]=\"loadOnDemand\" [trackBy]=\"trackBy\"\n        [hasChildren]=\"hasChildren\" [(selectedKeys)]=\"selectedKeys\" (filterChange)=\"onFilterChange($event)\">\n\n        <!-- Custom Node Template -->\n        <ng-template *ngIf=\"nodeTemplate\" kendoTreeViewNodeTemplate let-dataItem=\"dataItem\" let-index=\"index\">\n          <ng-container [ngTemplateOutlet]=\"nodeTemplate\" [ngTemplateOutletContext]=\"{ \n        $implicit: dataItem, \n        dataItem: dataItem, \n        index: index \n      }\">\n          </ng-container>\n        </ng-template>\n\n        <!-- Load More Button Template -->\n        <ng-template *ngIf=\"loadMoreButtonTemplate\" kendoTreeViewLoadMoreButtonTemplate let-dataItem=\"dataItem\">\n          <ng-container [ngTemplateOutlet]=\"loadMoreButtonTemplate\" [ngTemplateOutletContext]=\"{ \n        $implicit: dataItem, \n        dataItem: dataItem \n      }\">\n          </ng-container>\n        </ng-template>\n\n      </kendo-treeview>\n\n      <!-- TreeView without checkable functionality -->\n      <kendo-treeview #treeViewElement *ngSwitchDefault kendoTreeViewHierarchyBinding kendoTreeViewExpandable\n        kendoTreeViewDragAndDrop kendoTreeViewDragAndDropEditing [nodes]=\"data\" [textField]=\"textField\"\n        [childrenField]=\"childrenField\" [filterable]=\"filterable\" [expandBy]=\"expandBy\" [(expandedKeys)]=\"expandedKeys\"\n        [expandDisabledNodes]=\"expandDisabledNodes\" (selectionChange)=\"onSelectionChange($event)\"\n        (checkedChange)=\"onCheckedChange($event)\" (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\"\n        (nodeClick)=\"onNodeClick($event)\" (expandedKeysChange)=\"onExpandedKeysChange($event)\"\n        (nodeDragStart)=\"onDragStart($event)\" (nodeDrag)=\"onNodeDrag($event)\" (nodeDrop)=\"handleDrop($event)\"\n        (addItem)=\"log('addItem', $event)\" (removeItem)=\"log('removeItem', $event)\"\n        (nodeDragEnd)=\"log('nodeDragEnd', $event)\" class=\"lib-tree-view__kendo-tree\"\n        [kendoTreeViewSelectable]=\"selectable\" [size]=\"size\" [navigable]=\"navigable\" [loadOnDemand]=\"loadOnDemand\"\n        [trackBy]=\"trackBy\" [hasChildren]=\"hasChildren\" [(selectedKeys)]=\"selectedKeys\"\n        (filterChange)=\"onFilterChange($event)\">\n\n        <!-- Custom Node Template -->\n        <ng-template *ngIf=\"nodeTemplate\" kendoTreeViewNodeTemplate let-dataItem=\"dataItem\" let-index=\"index\">\n          <ng-container [ngTemplateOutlet]=\"nodeTemplate\" [ngTemplateOutletContext]=\"{ \n        $implicit: dataItem, \n        dataItem: dataItem, \n        index: index \n      }\">\n          </ng-container>\n        </ng-template>\n\n        <!-- Load More Button Template -->\n        <ng-template *ngIf=\"loadMoreButtonTemplate\" kendoTreeViewLoadMoreButtonTemplate let-dataItem=\"dataItem\">\n          <ng-container [ngTemplateOutlet]=\"loadMoreButtonTemplate\" [ngTemplateOutletContext]=\"{ \n        $implicit: dataItem, \n        dataItem: dataItem \n      }\">\n          </ng-container>\n        </ng-template>\n\n      </kendo-treeview>\n    </ng-container>\n\n    <!-- Loading indicator -->\n    <div *ngIf=\"loading\" class=\"lib-tree-view__loading\">\n      <lib-loader size=\"medium\" type=\"pulsing\" themeColor=\"primary\"></lib-loader>\n    </div>\n  </div>\n", styles: [".lib-tree-view{position:relative;width:100%}.lib-tree-view__loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background-color:#fffc}\n"] }]
+        }], propDecorators: { treeViewElement: [{
+                type: ViewChild,
+                args: ['treeViewElement', { static: false }]
+            }], data: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], checkboxes: [{
+                type: Input
+            }], checkable: [{
+                type: Input
+            }], dragAndDrop: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], animate: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], childrenField: [{
+                type: Input
+            }], hasChildrenField: [{
+                type: Input
+            }], expandedField: [{
+                type: Input
+            }], selectedField: [{
+                type: Input
+            }], disabledField: [{
+                type: Input
+            }], checkedField: [{
+                type: Input
+            }], iconClassField: [{
+                type: Input
+            }], iconField: [{
+                type: Input
+            }], imageUrlField: [{
+                type: Input
+            }], spriteCssClassField: [{
+                type: Input
+            }], disabledKeys: [{
+                type: Input
+            }], expandBy: [{
+                type: Input
+            }], expandedKeys: [{
+                type: Input
+            }], selectedKeys: [{
+                type: Input
+            }], checkedKeys: [{
+                type: Input
+            }], expandDisabledNodes: [{
+                type: Input
+            }], disableNodes: [{
+                type: Input
+            }], enableCheck: [{
+                type: Input
+            }], checkChildren: [{
+                type: Input
+            }], checkDisabledChildren: [{
+                type: Input
+            }], checkParents: [{
+                type: Input
+            }], checkOnClick: [{
+                type: Input
+            }], uncheckCollapsedChildren: [{
+                type: Input
+            }], checkMode: [{
+                type: Input
+            }], fetchChildren: [{
+                type: Input
+            }], isChecked: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], isSelected: [{
+                type: Input
+            }], isVisible: [{
+                type: Input
+            }], nodeTemplate: [{
+                type: Input
+            }], loadMoreButtonTemplate: [{
+                type: Input
+            }], loadMoreService: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], loadOnDemand: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], filterSettings: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], trackBy: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
+            }], checkedChange: [{
+                type: Output
+            }], nodeClick: [{
+                type: Output
+            }], nodeDblClick: [{
+                type: Output
+            }], nodeDragStart: [{
+                type: Output
+            }], nodeDrag: [{
+                type: Output
+            }], nodeDrop: [{
+                type: Output
+            }], nodeDragEnd: [{
+                type: Output
+            }], addItem: [{
+                type: Output
+            }], removeItem: [{
+                type: Output
+            }], expandedKeysChange: [{
+                type: Output
+            }], selectedKeysChange: [{
+                type: Output
+            }], checkedKeysChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], loadMore: [{
+                type: Output
+            }], childrenLoaded: [{
+                type: Output
+            }] } });
+
+class TreeViewModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TreeViewModule, imports: [TreeViewComponent,
+            CommonModule,
+            TreeViewModule$1,
+            IconsModule,
+            ButtonModule,
+            IconModule,
+            LoaderModule], exports: [TreeViewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeViewModule, imports: [TreeViewComponent,
+            CommonModule,
+            TreeViewModule$1,
+            IconsModule,
+            ButtonModule,
+            IconModule,
+            LoaderModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TreeViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        TreeViewComponent,
+                        CommonModule,
+                        TreeViewModule$1,
+                        IconsModule,
+                        ButtonModule,
+                        IconModule,
+                        LoaderModule
+                    ],
+                    exports: [
+                        TreeViewComponent
+                    ]
+                }]
+        }] });
+
 class UploaderComponent {
     constructor(renderer, elRef) {
         this.renderer = renderer;
@@ -4456,6 +5464,8 @@ class AtomsModule {
             TimePickerModule,
             TimeschedulerModule,
             TooltipModule,
+            TreeListModule,
+            TreeViewModule,
             TypographyModule,
             UploaderModule], exports: [AlertModule,
             AngularPopupModule,
@@ -4494,6 +5504,8 @@ class AtomsModule {
             TimePickerModule,
             TimeschedulerModule,
             TooltipModule,
+            TreeListModule,
+            TreeViewModule,
             TypographyModule,
             UploaderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AtomsModule, imports: [CommonModule,
@@ -4536,6 +5548,8 @@ class AtomsModule {
             TimePickerModule,
             TimeschedulerModule,
             TooltipModule,
+            TreeListModule,
+            TreeViewModule,
             TypographyModule,
             UploaderModule, AlertModule,
             AngularPopupModule,
@@ -4574,6 +5588,8 @@ class AtomsModule {
             TimePickerModule,
             TimeschedulerModule,
             TooltipModule,
+            TreeListModule,
+            TreeViewModule,
             TypographyModule,
             UploaderModule] }); }
 }
@@ -4621,6 +5637,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         TimePickerModule,
                         TimeschedulerModule,
                         TooltipModule,
+                        TreeListModule,
+                        TreeViewModule,
                         TypographyModule,
                         UploaderModule
                     ],
@@ -4662,6 +5680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         TimePickerModule,
                         TimeschedulerModule,
                         TooltipModule,
+                        TreeListModule,
+                        TreeViewModule,
                         TypographyModule,
                         UploaderModule
                     ]
@@ -4852,7 +5872,7 @@ class DialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DialogComponent, isStandalone: true, selector: "lib-dialog", inputs: { width: "width", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", minHeight: "minHeight", maxHeight: "maxHeight", opened: "opened" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }, { propertyName: "dialogRef", first: true, predicate: ["dialogRef"], descendants: true }], ngImport: i0, template: "<div #dialogRef>\n  <kendo-dialog\n    *ngIf=\"opened\"\n    [width]=\"width\"\n    [height]=\"height\"\n    [minWidth]=\"minWidth\"\n    [maxWidth]=\"maxWidth\"\n    [minHeight]=\"minHeight\"\n    [maxHeight]=\"maxHeight\">\n    <div #contentRef>\n      <ng-content></ng-content>\n    </div>\n  </kendo-dialog>\n</div>\n", styles: [":host ::ng-deep .dialog-title .k-dialog-titlebar-action{display:none!important}:host ::ng-deep .k-window-content,:host ::ng-deep .k-prompt-container{padding:1.5rem}:host ::ng-deep .k-window-titlebar{padding:1rem 1.5rem}:host ::ng-deep .k-window-actions{margin:0;border-width:1px 0 0;padding:1rem 1.5rem;position:sticky;z-index:100;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i2$7.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "ngmodule", type: IconsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DialogComponent, isStandalone: true, selector: "lib-dialog", inputs: { width: "width", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", minHeight: "minHeight", maxHeight: "maxHeight", opened: "opened" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }, { propertyName: "dialogRef", first: true, predicate: ["dialogRef"], descendants: true }], ngImport: i0, template: "<div #dialogRef>\n  <kendo-dialog\n    *ngIf=\"opened\"\n    [width]=\"width\"\n    [height]=\"height\"\n    [minWidth]=\"minWidth\"\n    [maxWidth]=\"maxWidth\"\n    [minHeight]=\"minHeight\"\n    [maxHeight]=\"maxHeight\">\n    <div #contentRef>\n      <ng-content></ng-content>\n    </div>\n  </kendo-dialog>\n</div>\n", styles: [":host ::ng-deep .dialog-title .k-dialog-titlebar-action{display:none!important}:host ::ng-deep .k-window-content,:host ::ng-deep .k-prompt-container{padding:1.5rem}:host ::ng-deep .k-window-titlebar{padding:1rem 1.5rem}:host ::ng-deep .k-window-actions{margin:0;border-width:1px 0 0;padding:1rem 1.5rem;position:sticky;z-index:100;gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DialogsModule }, { kind: "component", type: i2$9.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "ngmodule", type: IconsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
@@ -4899,7 +5919,7 @@ class DialogTitlebarComponent {
         return this.hideCloseIcon ? 'dialog-title' : undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogTitlebarComponent, deps: [{ token: DialogComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: DialogTitlebarComponent, isStandalone: true, selector: "lib-dialog-titlebar", inputs: { title: "title", titleFont: "titleFont", hideCloseIcon: ["hideCloseIcon", "hideCloseIcon", (value) => value === true || value === 'true'] }, outputs: { closeDialog: "closeDialog" }, ngImport: i0, template: "<kendo-dialog-titlebar (close)=\"close()\" [ngClass]=\"closeBtn()\">\n  <lib-typography\n    [defaultText]=\"title\"\n    [type]=\"titleFont\"\n  ></lib-typography>\n</kendo-dialog-titlebar>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DialogModule$1 }, { kind: "component", type: i2$7.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: DialogTitlebarComponent, isStandalone: true, selector: "lib-dialog-titlebar", inputs: { title: "title", titleFont: "titleFont", hideCloseIcon: ["hideCloseIcon", "hideCloseIcon", (value) => value === true || value === 'true'] }, outputs: { closeDialog: "closeDialog" }, ngImport: i0, template: "<kendo-dialog-titlebar (close)=\"close()\" [ngClass]=\"closeBtn()\">\n  <lib-typography\n    [defaultText]=\"title\"\n    [type]=\"titleFont\"\n  ></lib-typography>\n</kendo-dialog-titlebar>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DialogModule$1 }, { kind: "component", type: i2$9.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogTitlebarComponent, decorators: [{
             type: Component,
@@ -4925,7 +5945,7 @@ class DialogActionsComponent {
         this.buttonLayout = 'start';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DialogActionsComponent, isStandalone: true, selector: "lib-dialog-actions", inputs: { buttonLayout: "buttonLayout" }, ngImport: i0, template: "<kendo-dialog-actions [layout]=\"buttonLayout\">\n  <ng-content></ng-content>\n</kendo-dialog-actions>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule$1 }, { kind: "component", type: i2$7.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DialogActionsComponent, isStandalone: true, selector: "lib-dialog-actions", inputs: { buttonLayout: "buttonLayout" }, ngImport: i0, template: "<kendo-dialog-actions [layout]=\"buttonLayout\">\n  <ng-content></ng-content>\n</kendo-dialog-actions>\n", styles: [".random-css-to-not-keep-this-file-empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule$1 }, { kind: "component", type: i2$9.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DialogActionsComponent, decorators: [{
             type: Component,
@@ -5173,7 +6193,7 @@ class GridFormComponent {
         this.formGroup = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GridFormComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: GridFormComponent, isStandalone: true, selector: "lib-grid-form", inputs: { showToolbar: ["showToolbar", "showToolbar", (value) => value === true || value === 'true'], noRecordsContent: "noRecordsContent", gridData: "gridData", columnData: "columnData", controls: "controls" }, outputs: { addOrUpdateRow: "addOrUpdateRow", deletedRow: "deletedRow", removeRow: "removeRow", saveRow: "saveRow" }, queries: [{ propertyName: "templateRef1", first: true, predicate: ["tmp1"], descendants: true }, { propertyName: "templateRef2", first: true, predicate: ["tmp2"], descendants: true }], ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" (dataStateChange)=\"onStateChange($event)\" (edit)=\"editHandler($event)\"\n  (cancel)=\"cancelHandler($event)\" (save)=\"saveHandler($event)\" (remove)=\"removeHandler($event)\"\n  (add)=\"addHandler($event)\" [navigable]=\"true\">\n  <ng-template kendoGridToolbarTemplate>\n    <ng-content select=\"header\"></ng-content>\n    <lib-grid-pagination-spacer></lib-grid-pagination-spacer>\n    <button kendoGridAddCommand themeColor=\"primary\">\n      <ng-content select=\"div.header-add-btn\"></ng-content>\n    </button>\n  </ng-template>\n  <ng-template *ngIf=\"!showColumns\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n  </ng-template>\n  <ng-container *ngIf=\"showColumns\">\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\" [editor]=\"item.editor\">\n      <ng-template *ngIf=\"item.custom\" kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <ng-container\n          *ngTemplateOutlet=\"templateRef1; context: {$implicit: dataItem, formGroup: formGroup}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef2; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-command-column [width]=\"120\">\n      <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\n        <div class=\"command-column\">\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Edit</div>\n            <button kendoGridEditCommand fillMode=\"clear\" themeColor=\"primary\">\n              <kendo-icon name=\"pencil\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Remove</div>\n            <button kendoGridRemoveCommand fillMode=\"clear\" themeColor=\"error\">\n              <kendo-icon name=\"trash\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n        </div>\n        <div class=\"command-column\">\n          <button kendoGridSaveCommand [disabled]=\"formGroup && formGroup.invalid\" fillMode=\"clear\" themeColor=\"primary\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Save</div>\n              <kendo-icon name=\"save\"></kendo-icon>\n            </lib-tooltip>\n          </button>\n          <button kendoGridCancelCommand fillMode=\"clear\" themeColor=\"error\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Cancel</div>\n              <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n            </lib-tooltip>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-command-column>\n  </ng-container>\n</kendo-grid>\n", styles: [".command-column{display:flex;justify-content:space-between}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ kind: "ngmodule", type: GridModule }, { kind: "component", type: i1$6.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", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i1$6.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i1$6.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i1$6.GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: i1$6.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i1$6.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: i1$6.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i1$6.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i1$6.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { kind: "directive", type: i1$6.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "component", type: i1$6.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { kind: "component", type: i1$6.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { kind: "component", type: i1$6.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { kind: "component", type: i1$6.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "component", type: i1$6.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: i2$8.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: GridPaginationSpacerComponent, selector: "lib-grid-pagination-spacer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: GridFormComponent, isStandalone: true, selector: "lib-grid-form", inputs: { showToolbar: ["showToolbar", "showToolbar", (value) => value === true || value === 'true'], noRecordsContent: "noRecordsContent", gridData: "gridData", columnData: "columnData", controls: "controls" }, outputs: { addOrUpdateRow: "addOrUpdateRow", deletedRow: "deletedRow", removeRow: "removeRow", saveRow: "saveRow" }, queries: [{ propertyName: "templateRef1", first: true, predicate: ["tmp1"], descendants: true }, { propertyName: "templateRef2", first: true, predicate: ["tmp2"], descendants: true }], ngImport: i0, template: "<kendo-grid [kendoGridBinding]=\"gridData\" (dataStateChange)=\"onStateChange($event)\" (edit)=\"editHandler($event)\"\n  (cancel)=\"cancelHandler($event)\" (save)=\"saveHandler($event)\" (remove)=\"removeHandler($event)\"\n  (add)=\"addHandler($event)\" [navigable]=\"true\">\n  <ng-template kendoGridToolbarTemplate>\n    <ng-content select=\"header\"></ng-content>\n    <lib-grid-pagination-spacer></lib-grid-pagination-spacer>\n    <button kendoGridAddCommand themeColor=\"primary\">\n      <ng-content select=\"div.header-add-btn\"></ng-content>\n    </button>\n  </ng-template>\n  <ng-template *ngIf=\"!showColumns\" kendoGridNoRecordsTemplate>\n    <lib-typography [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n  </ng-template>\n  <ng-container *ngIf=\"showColumns\">\n    <kendo-grid-column *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\" [editor]=\"item.editor\">\n      <ng-template *ngIf=\"item.custom\" kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <ng-container\n          *ngTemplateOutlet=\"templateRef1; context: {$implicit: dataItem, formGroup: formGroup}\"></ng-container>\n      </ng-template>\n      <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n        <ng-container *ngTemplateOutlet=\"templateRef2; context: {$implicit: dataItem}\"></ng-container>\n      </ng-template>\n    </kendo-grid-column>\n    <kendo-grid-command-column [width]=\"120\">\n      <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\n        <div class=\"command-column\">\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Edit</div>\n            <button kendoGridEditCommand fillMode=\"clear\" themeColor=\"primary\">\n              <kendo-icon name=\"pencil\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n          <lib-tooltip position=\"top\" showOn=\"hover\">\n            <div class=\"tooltip-content\">Remove</div>\n            <button kendoGridRemoveCommand fillMode=\"clear\" themeColor=\"error\">\n              <kendo-icon name=\"trash\"></kendo-icon>\n            </button>\n          </lib-tooltip>\n        </div>\n        <div class=\"command-column\">\n          <button kendoGridSaveCommand [disabled]=\"formGroup && formGroup.invalid\" fillMode=\"clear\" themeColor=\"primary\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Save</div>\n              <kendo-icon name=\"save\"></kendo-icon>\n            </lib-tooltip>\n          </button>\n          <button kendoGridCancelCommand fillMode=\"clear\" themeColor=\"error\">\n            <lib-tooltip position=\"top\" showOn=\"hover\">\n              <div class=\"tooltip-content\">Cancel</div>\n              <lib-icon name=\"close\" [fontSize]=\"20\"></lib-icon>\n            </lib-tooltip>\n          </button>\n        </div>\n      </ng-template>\n    </kendo-grid-command-column>\n  </ng-container>\n</kendo-grid>\n", styles: [".command-column{display:flex;justify-content:space-between}::ng-deep .k-grid-header{border-bottom-width:0px}\n"], dependencies: [{ kind: "ngmodule", type: GridModule }, { kind: "component", type: i1$6.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", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i1$6.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i1$6.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "directive", type: i1$6.GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: i1$6.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i1$6.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: i1$6.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i1$6.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i1$6.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { kind: "directive", type: i1$6.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "component", type: i1$6.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { kind: "component", type: i1$6.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { kind: "component", type: i1$6.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { kind: "component", type: i1$6.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "component", type: i1$6.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: i2$a.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "component", type: GridPaginationSpacerComponent, selector: "lib-grid-pagination-spacer" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GridFormComponent, decorators: [{
             type: Component,
@@ -5870,7 +6890,7 @@ class GridPaginationComponent {
                     if (value === undefined || value === null)
                         return 56;
                     return typeof value === 'string' ? parseInt(value, 10) || 56 : value;
-                }], sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", loading: ["loading", "loading", (value) => value === true || value === 'true'], loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows", allowEditingCell: "allowEditingCell", columnContentNoWrap: "columnContentNoWrap", infiniteScrollLoader: "infiniteScrollLoader", isInfiniteScrollGrid: ["isInfiniteScrollGrid", "isInfiniteScrollGrid", (value) => value === true || value === 'true'], gridLoading: ["gridLoading", "gridLoading", (value) => value === true || value === 'true'], minResizableWidth: "minResizableWidth", showRefresh: "showRefresh", isKebabColumnSticky: "isKebabColumnSticky", isCheckBoxColumnSticky: "isCheckBoxColumnSticky", isDeleteColumnSticky: "isDeleteColumnSticky", isSelectAllCheckboxRequired: "isSelectAllCheckboxRequired" }, outputs: { onSelectAllAcrossPages: "onSelectAllAcrossPages", selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData", updatedData: "updatedData", onscrollBottom: "onscrollBottom", emitRefreshEvt: "emitRefreshEvt" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }, { propertyName: "columnTemplates", predicate: CustomColumnTemplate }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAllMessageElement", first: true, predicate: ["selectAllMessageElement"], descendants: true }], ngImport: i0, template: "<div #gridElement [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n  <kendo-grid [data]=\"_gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [loading]=\"gridLoading\" [groupable]=\"groupable\"\n    [reorderable]=\"reorderable\" [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\"\n    [height]=\"gridHeight\" (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"_preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n    [sort]=\"sort\" (sortChange)=\"sortChange($event)\" (scrollBottom)=\"scrollBottom()\" [ngClass]=\"getHeaderHeight()\"\n    id=\"lib-grid\" [rowClass]=\"rowClass\">\n    <div #selectAllMessageElement>\n      <div class=\"lib-grid-select-all-message-container\"\n        *ngIf=\"((selectedItemCount < _gridView.total) || allPagesSelected)\">\n        <div *ngIf=\"(selectedItemCount < _gridView.total)\" class=\"lib-grid-select-all-message\">\n          <lib-typography [defaultText]=\"'All '+selectedItemCount+' '+itemName+' on this page are selected.'\"\n            type=\"BODY_SMALL\"></lib-typography>\n          <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n              [defaultText]=\"'Select all '+_gridView.total+' '+itemName+' from all pages'\"\n              type=\"BODY_SMALL\"></lib-typography></u>\n        </div>\n        <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n          <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n          <lib-typography [defaultText]=\"'All '+_gridView.total+' '+itemName+' across all pages are selected.'\"\n            type=\"BODY_SMALL\"></lib-typography>\n          <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n              [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n        </div>\n      </div>\n    </div>\n    <ng-template kendoGridToolbarTemplate [position]=\"getPosition()\" let-position=\"position\">\n      <ng-container *ngIf=\"showToolbar && position === 'top'\">\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"showRefresh\">\n          <ng-container *ngTemplateOutlet=\"showRefreshTemplate\"></ng-container>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"infiniteScrollLoader && position === 'bottom'\">\n        <lib-grid-pagination-spacer></lib-grid-pagination-spacer>\n        <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n        <lib-grid-pagination-spacer></lib-grid-pagination-spacer>\n      </ng-container>\n    </ng-template>\n\n    <ng-template #showRefreshTemplate>\n      <lib-tooltip position=\"top\" showOn=\"hover\" [tooltipWidth]=\"68\" [callout]=\"true\" [closable]=\"false\">\n        <div class=\"tooltip-content\">\n          <lib-typography defaultText=\"Refresh\"></lib-typography>\n        </div>\n        <lib-button size=\"small\" width=\"2.4rem\" rounded=\"small\" fillMode=\"solid\" themeColor=\"primary\" iconName=\"reset\"\n          [toggleable]=\"false\" (buttonClick)=\"refreshGridData()\" [iconButton]=\"true\" [iconFontSize]=\"13\"></lib-button>\n      </lib-tooltip>\n    </ng-template>\n\n    <ng-template kendoGridLoadingTemplate>\n      <div class=\"k-loading-color\"></div>\n      <div class=\"loading-container\">\n        <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n      </div>\n    </ng-template>\n\n    <ng-template *ngIf=\"this._gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n    <ng-container *ngIf=\"this._gridView.total > 0\">\n      <kendo-grid-checkbox-column #selectAllCheckbox headerClass=\"select-all-header\" *ngIf=\"checkBoxRequired\"\n        [width]=\"checkBoxWidth\" [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n        class=\"checkbox-column\" [sticky]=\"isCheckBoxColumnSticky && !customExpandRowColumn\"\n        [showSelectAll]=\"isSelectAllCheckboxRequired\">\n        <ng-template kendoGridHeaderTemplate *ngIf=\"isSelectAllCheckboxRequired\">\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n\n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [minResizableWidth]=\"minResizableWidth\" [sortable]=\"item.sortable\"\n        [editor]=\"item.editor\" [class]=\"item.class\" [sticky]=\"item.columnSticky && !customExpandRowColumn\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n          <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n            [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\"\n        [sticky]=\"isDeleteColumnSticky && !customExpandRowColumn\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\"\n        [sticky]=\"isKebabColumnSticky && !customExpandRowColumn\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n\n      <!-- Limitation: detail template and sticky columns do not co-exist-->\n      <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <div [ngClass]=\"expandColumnClass()\">\n            <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n              class=\"expand-column-text\">\n              Already added\n            </span>\n            <button kendoButton *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n              (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n            </button>\n            <button kendoButton *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n              (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n            </button>\n          </div>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <!-- Detail template must be outside ng-container to work properly -->\n    <ng-template kendoGridDetailTemplate let-dataItem *ngIf=\"customExpandRowColumn\">\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n        <kendo-pager-numeric-buttons [buttonCount]=\"_pageCount\"></kendo-pager-numeric-buttons>\n        <kendo-pager-next-buttons></kendo-pager-next-buttons>\n        <kendo-pager-info></kendo-pager-info>\n        <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n      </div>\n    </ng-template>\n\n  </kendo-grid>\n</div>\n", styles: [".loading-container{height:100%;display:flex;justify-content:center;align-items:center}::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-row.k-disabled>.k-table-td{background-color:#fff!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-grid td,::ng-deep .k-grid .k-table-td{white-space:nowrap!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}::ng-deep kendo-grid.k-grid .k-table-alt-row .k-grid-content-sticky,::ng-deep kendo-grid.k-grid .k-grid-row-sticky.k-table-alt-row td,::ng-deep kendo-grid.k-grid .k-grid-row-sticky.k-table-alt-row .k-table-td,::ng-deep .k-master-row.k-table-alt-row .k-grid-content-sticky,::ng-deep .k-master-row.k-table-alt-row .k-grid-row-sticky{background-color:#fff}::ng-deep kendo-grid.k-grid .k-grid-content-sticky:hover,::ng-deep kendo-grid.k-grid .k-grid-content-sticky.k-hover,::ng-deep kendo-grid.k-grid .k-table-row:hover .k-grid-content-sticky{background-color:#d0dcf5!important}\n"], dependencies: [{ kind: "ngmodule", type: GridModule }, { kind: "component", type: i1$6.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", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i1$6.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i1$6.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i1$6.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i1$6.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i1$6.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll", "showDisabledCheckbox"] }, { kind: "directive", type: i1$6.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i1$6.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i1$6.LoadingTemplateDirective, selector: "[kendoGridLoadingTemplate]" }, { kind: "directive", type: i1$6.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i1$6.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i2$9.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i2$9.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i2$9.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i2$9.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i2$9.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i2$9.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "ngmodule", type: ButtonModule$1 }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DropDownButtonModule }, { kind: "component", type: i3$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "ngmodule", type: IconsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i2$2.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon", "formatFn", "iconFontSize"], outputs: ["buttonClick"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "pipe", type: KebabMenuFilterPipe, name: "kebabMenuFilter" }] }); }
+                }], sizes: "sizes", pageCount: "pageCount", showDeleteColumn: "showDeleteColumn", hideKebabRowIndex: "hideKebabRowIndex", loading: ["loading", "loading", (value) => value === true || value === 'true'], loaderType: "loaderType", loaderSize: "loaderSize", loaderTheme: "loaderTheme", disablePreSelectedRows: "disablePreSelectedRows", allowEditingCell: "allowEditingCell", columnContentNoWrap: "columnContentNoWrap", infiniteScrollLoader: "infiniteScrollLoader", isInfiniteScrollGrid: ["isInfiniteScrollGrid", "isInfiniteScrollGrid", (value) => value === true || value === 'true'], gridLoading: ["gridLoading", "gridLoading", (value) => value === true || value === 'true'], minResizableWidth: "minResizableWidth", showRefresh: "showRefresh", isKebabColumnSticky: "isKebabColumnSticky", isCheckBoxColumnSticky: "isCheckBoxColumnSticky", isDeleteColumnSticky: "isDeleteColumnSticky", isSelectAllCheckboxRequired: "isSelectAllCheckboxRequired" }, outputs: { onSelectAllAcrossPages: "onSelectAllAcrossPages", selectedRowData: "selectedRowData", rowDetails: "rowDetails", kebabItemClick: "kebabItemClick", rowDataOfClickedCell: "rowDataOfClickedCell", onPageChange: "onPageChange", sortDirection: "sortDirection", deletedRowData: "deletedRowData", updatedData: "updatedData", onscrollBottom: "onscrollBottom", emitRefreshEvt: "emitRefreshEvt" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["multiColumnData"], descendants: true }, { propertyName: "detailTemplate", first: true, predicate: ["detailTemplate"], descendants: true }, { propertyName: "impactColumn", first: true, predicate: ["impactColumn"], descendants: true }, { propertyName: "columnTemplates", predicate: CustomColumnTemplate }], viewQueries: [{ propertyName: "grid", first: true, predicate: GridComponent, descendants: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "selectAllMessageElement", first: true, predicate: ["selectAllMessageElement"], descendants: true }], ngImport: i0, template: "<div #gridElement [ngClass]=\"columnContentNoWrap ? 'column-content-nowrap' : ''\">\n  <kendo-grid [data]=\"_gridView\" [pageSize]=\"pageSize\" [skip]=\"skip\" [selectable]=\"selectableSettings\"\n    [pageable]=\"pageable\" [sortable]=\"sortable\" [loading]=\"gridLoading\" [groupable]=\"groupable\"\n    [reorderable]=\"reorderable\" [resizable]=\"resizable\" [columnMenu]=\"columnMenu\" [navigable]=\"navigable\"\n    [height]=\"gridHeight\" (change)=\"setSelectableSettings()\" (selectedKeysChange)=\"selectedKeysChange($event)\"\n    [kendoGridSelectBy]=\"gridRowSelectByValue\" (detailExpand)=\"onDetailExpand($event)\" [selectedKeys]=\"_preSelected\"\n    (pageChange)=\"pageChange($event)\" (cellClick)=\"cellClickHandler($event)\" (cellClose)=\"cellCloseHandler($event)\"\n    [sort]=\"sort\" (sortChange)=\"sortChange($event)\" (scrollBottom)=\"scrollBottom()\" [ngClass]=\"getHeaderHeight()\"\n    id=\"lib-grid\" [rowClass]=\"rowClass\">\n    <div #selectAllMessageElement>\n      <div class=\"lib-grid-select-all-message-container\"\n        *ngIf=\"((selectedItemCount < _gridView.total) || allPagesSelected)\">\n        <div *ngIf=\"(selectedItemCount < _gridView.total)\" class=\"lib-grid-select-all-message\">\n          <lib-typography [defaultText]=\"'All '+selectedItemCount+' '+itemName+' on this page are selected.'\"\n            type=\"BODY_SMALL\"></lib-typography>\n          <u><lib-typography (click)=\"selectAcrossPages(true)\" class=\"select-all-handler\"\n              [defaultText]=\"'Select all '+_gridView.total+' '+itemName+' from all pages'\"\n              type=\"BODY_SMALL\"></lib-typography></u>\n        </div>\n        <div *ngIf=\"allPagesSelected\" class=\"lib-grid-select-all-message\">\n          <lib-icon name=\"circle-checked\" class=\"all-selected-icon\"></lib-icon>\n          <lib-typography [defaultText]=\"'All '+_gridView.total+' '+itemName+' across all pages are selected.'\"\n            type=\"BODY_SMALL\"></lib-typography>\n          <u><lib-typography (click)=\"selectAcrossPages(false)\" class=\"select-all-handler\"\n              [defaultText]=\"'Clear selection'\" type=\"BODY_SMALL\"></lib-typography></u>\n        </div>\n      </div>\n    </div>\n    <ng-template kendoGridToolbarTemplate [position]=\"getPosition()\" let-position=\"position\">\n      <ng-container *ngIf=\"showToolbar && position === 'top'\">\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"showRefresh\">\n          <ng-container *ngTemplateOutlet=\"showRefreshTemplate\"></ng-container>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"infiniteScrollLoader && position === 'bottom'\">\n        <lib-grid-pagination-spacer></lib-grid-pagination-spacer>\n        <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n        <lib-grid-pagination-spacer></lib-grid-pagination-spacer>\n      </ng-container>\n    </ng-template>\n\n    <ng-template #showRefreshTemplate>\n      <lib-tooltip position=\"top\" showOn=\"hover\" [tooltipWidth]=\"68\" [callout]=\"true\" [closable]=\"false\">\n        <div class=\"tooltip-content\">\n          <lib-typography defaultText=\"Refresh\"></lib-typography>\n        </div>\n        <lib-button size=\"small\" width=\"2.4rem\" rounded=\"small\" fillMode=\"solid\" themeColor=\"primary\" iconName=\"reset\"\n          [toggleable]=\"false\" (buttonClick)=\"refreshGridData()\" [iconButton]=\"true\" [iconFontSize]=\"13\"></lib-button>\n      </lib-tooltip>\n    </ng-template>\n\n    <ng-template kendoGridLoadingTemplate>\n      <div class=\"k-loading-color\"></div>\n      <div class=\"loading-container\">\n        <lib-loader [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n      </div>\n    </ng-template>\n\n    <ng-template *ngIf=\"this._gridView.total === 0\" kendoGridNoRecordsTemplate>\n      <lib-typography *ngIf=\"!loading\" [defaultText]=\"noRecordsContent\" type=\"BODY_MEDIUM\"></lib-typography>\n      <lib-loader *ngIf=\"loading\" [type]=\"loaderType\" [size]=\"loaderSize\" [themeColor]=\"loaderTheme\"></lib-loader>\n    </ng-template>\n    <ng-container *ngIf=\"this._gridView.total > 0\">\n      <kendo-grid-checkbox-column #selectAllCheckbox headerClass=\"select-all-header\" *ngIf=\"checkBoxRequired\"\n        [width]=\"checkBoxWidth\" [resizable]=\"checkBoxColumnResizable\" [columnMenu]=\"checkBoxColumnMenu\"\n        class=\"checkbox-column\" [sticky]=\"isCheckBoxColumnSticky && !customExpandRowColumn\"\n        [showSelectAll]=\"isSelectAllCheckboxRequired\">\n        <ng-template kendoGridHeaderTemplate *ngIf=\"isSelectAllCheckboxRequired\">\n          <input id=\"selectAllCheckboxId\" type=\"checkbox\" kendoCheckBox kendoGridSelectAllCheckbox\n            [state]=\"selectAllState\" (selectAllChange)=\"onSelectAllChange($event)\" />\n        </ng-template>\n      </kendo-grid-checkbox-column>\n\n      <kendo-grid-column class=\"grid-column\" *ngFor=\"let item of columnData\" [field]=\"item.field\" [title]=\"item.title\"\n        [width]=\"item.columnWidth\" [minResizableWidth]=\"minResizableWidth\" [sortable]=\"item.sortable\"\n        [editor]=\"item.editor\" [class]=\"item.class\" [sticky]=\"item.columnSticky && !customExpandRowColumn\">\n\n        <ng-template *ngIf=\"sortable\" kendoGridHeaderTemplate>\n          {{item.title}}\n          <span *ngIf=\"sort[0].field === item.field\">\n            <span *ngIf=\"sort[0].dir === 'asc'\"></span>\n            <span *ngIf=\"sort[0].dir === 'desc'\"></span>\n          </span>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.customColumn\" kendoGridCellTemplate let-dataItem>\n          <ng-container [ngTemplateOutlet]=\"columnTemplateDict[item.type]\"\n            [ngTemplateOutletContext]=\"{$implicit: dataItem}\"></ng-container>\n        </ng-template>\n\n        <ng-template *ngIf=\"item.custom\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"templateRef; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n        <ng-template *ngIf=\"item.impact\" kendoGridCellTemplate let-dataItem>\n          <ng-container *ngTemplateOutlet=\"impactColumn; context: {$implicit: dataItem}\"></ng-container>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column *ngIf=\"showDeleteColumn\" [width]=\"deleteColumnWidth\" class=\"delete-column\" title=\"Action\"\n        [sticky]=\"isDeleteColumnSticky && !customExpandRowColumn\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <lib-tooltip showOn=\"hover\" position=\"bottom\" class=\"remove-tooltip\">\n            <lib-icon name=\"delete\" class=\"delete-icon\" (click)=\"onDelete(dataItem)\"></lib-icon>\n            <div class=\"tooltip-content\">\n              <lib-typography defaultText=\"Remove\"></lib-typography>\n            </div>\n          </lib-tooltip>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column [width]=\"kebabColumnWidth\" class=\"kebab-column\" *ngIf=\"showKebab\" title=\"Actions\"\n        [sticky]=\"isKebabColumnSticky && !customExpandRowColumn\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <kendo-dropdownbutton *ngIf=\"!hideKebabRowIndex.includes(rowIndex)\" [svgIcon]=\"icon\" fillMode=\"none\"\n            [data]=\"kebabList | kebabMenuFilter : dataItem\" class=\"kebab\" (itemClick)=\"onKebabClick($event, dataItem)\"\n            [popupSettings]=\"{ align: 'right', animate: true, popupClass: 'kebab-list' }\">\n          </kendo-dropdownbutton>\n        </ng-template>\n      </kendo-grid-column>\n\n      <!-- Limitation: detail template and sticky columns do not co-exist-->\n      <kendo-grid-column *ngIf=\"customExpandRowColumn\" [width]=\"expandRowColumnWidth\" class=\"grid-column expand-column\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          <div [ngClass]=\"expandColumnClass()\">\n            <span *ngIf=\"selectedRows.includes(dataItem[gridRowSelectByValue]) && disablePreSelectedRows\"\n              class=\"expand-column-text\">\n              Already added\n            </span>\n            <button kendoButton *ngIf=\"!expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowDownIcon\"\n              (click)=\"expandRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n            </button>\n            <button kendoButton *ngIf=\"expandRowIndex.includes(rowIndex)\" [svgIcon]=\"arrowUpIcon\"\n              (click)=\"collapseRow(rowIndex)\" fillMode=\"none\" class=\"arrow-btn\">\n            </button>\n          </div>\n        </ng-template>\n      </kendo-grid-column>\n    </ng-container>\n\n    <!-- Detail template must be outside ng-container to work properly -->\n    <ng-template kendoGridDetailTemplate let-dataItem *ngIf=\"customExpandRowColumn\">\n      <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: dataItem}\"></ng-container>\n    </ng-template>\n\n    <ng-template kendoPagerTemplate let-totalPages=\"totalPages\" let-currentPage=\"currentPage\">\n      <div class=\"pagination-wrapper\" [ngClass]=\"allPagesSelected ? 'pagination-disabled' : ''\">\n        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n        <kendo-pager-numeric-buttons [buttonCount]=\"_pageCount\"></kendo-pager-numeric-buttons>\n        <kendo-pager-next-buttons></kendo-pager-next-buttons>\n        <kendo-pager-info></kendo-pager-info>\n        <kendo-pager-page-sizes [pageSizes]=\"sizes\"></kendo-pager-page-sizes>\n      </div>\n    </ng-template>\n\n  </kendo-grid>\n</div>\n", styles: [".loading-container{height:100%;display:flex;justify-content:center;align-items:center}::ng-deep .k-grid tr{height:50px}::ng-deep .pagination-wrapper{display:flex;width:100%}::ng-deep .pagination-disabled{color:#6c6f72!important;pointer-events:none}::ng-deep .lib-grid-select-all-message-container{height:2rem;display:none;gap:.25rem;justify-content:center;align-items:center;background-color:#eceff5!important;font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .lib-grid-select-all-message-container .select-all-handler{cursor:pointer}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message{display:flex;gap:.25rem}::ng-deep .lib-grid-select-all-message-container .lib-grid-select-all-message .all-selected-icon{color:#198038}::ng-deep .disabled{cursor:none!important;pointer-events:none;opacity:.5}::ng-deep .lib-grid-select-all-message-show{display:flex!important}::ng-deep .k-grid .k-table-th,::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important;border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:2px!important;border-right:0px!important;border-left:0px!important;cursor:default!important}::ng-deep .k-grid .k-table-th .k-cell-inner,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner{padding-right:.5rem;border-right:2px solid #C2D2F3!important}::ng-deep .k-grid .k-table-th .k-cell-inner .k-link,::ng-deep .k-grid .k-table-th.k-sorted .k-cell-inner .k-link{cursor:default!important}::ng-deep .k-grid .k-table-th:focus,::ng-deep .k-grid .k-table-th.k-sorted:focus{box-shadow:none!important}::ng-deep .k-grid .k-table-th.k-sorted{font-family:Inter,sans-serif!important;font-weight:600!important;font-style:normal!important;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important;background-color:#dee6f7!important}::ng-deep .k-grid tbody>tr:not(.k-detail-row):hover{background-color:#d0dcf5!important}::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background-color:#c9d7f4!important}::ng-deep .k-grid .k-table-row.k-disabled>.k-table-td{background-color:#fff!important}::ng-deep .k-grid .k-table-td{border-bottom-color:#ebecec!important;border-bottom-style:solid!important;border-bottom-width:1px!important;border-right:0px!important;border-left:0px!important}::ng-deep .k-grid td,::ng-deep .k-grid .k-table-td{white-space:nowrap!important}::ng-deep .k-table-alt-row{background-color:inherit!important}::ng-deep .k-grid .k-table-td{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal;font-size:12px!important;line-height:16px!important;letter-spacing:.25px!important}::ng-deep .k-grid-norecords{text-align:center!important;opacity:.4}::ng-deep .k-grid-norecords td{padding:14px 0 14px 24px!important}::ng-deep kendo-pager.k-pager-wrap.k-grid-pager{font-family:Inter,sans-serif!important;font-weight:400!important;font-style:normal!important;font-size:14px!important;line-height:20px!important;letter-spacing:.25px!important}::ng-deep .k-pager{border-style:none!important}::ng-deep .k-input-value-text{overflow:unset!important}::ng-deep .k-grid th.k-header{vertical-align:middle!important;padding-left:16px;padding-right:.5rem}::ng-deep .grid-column,::ng-deep .kebab-column,::ng-deep .delete-column{padding:0!important}::ng-deep .grid-column kendo-button,::ng-deep .kebab-column kendo-button,::ng-deep .delete-column kendo-button{align-items:center!important;justify-content:center!important;display:flex!important}::ng-deep .k-checkbox{width:20px!important;height:20px!important;border-radius:0!important}::ng-deep .k-grid .k-hierarchy-cell,::ng-deep .k-grid .k-hierarchy-col{width:0;display:none}::ng-deep .k-grid .k-detail-row .k-detail-cell{background-color:#f4f8fa!important;padding:16px!important}::ng-deep .delete-icon{color:#dc267f!important;padding-left:12px;cursor:pointer}::ng-deep .remove-tooltip kendo-tooltip.k-tooltip{background-color:#fff;color:#000}::ng-deep .hide-header .k-grid-header{border:0px!important}::ng-deep .k-grouping-header{background-color:#eceff5!important}::ng-deep .k-grid-toolbar{padding:4px 16px!important;height:54px;background-color:#eceff5!important}::ng-deep .k-grid td:not(.kebab-column):not(.expand-column){padding-left:16px!important;padding-right:16px!important}::ng-deep .view-header .k-table-thead tr{height:50px}::ng-deep .hide-header .k-table-thead tr{height:0px;padding:0;display:block}::ng-deep td.kebab-column{display:flex;justify-content:center;align-items:center;height:inherit}::ng-deep .k-grid .k-table-td>.k-checkbox{vertical-align:middle!important}::ng-deep .kebab .k-button,::ng-deep .expand-column .k-button{border:0px}::ng-deep .expand-column{pointer-events:all!important}::ng-deep .expand-column-text{margin-right:32px}::ng-deep .expand-row{display:flex;align-items:center;justify-content:flex-end}::ng-deep .column-cursor-pointer{cursor:pointer}::ng-deep .column-content-nowrap .k-grid .k-table-th,::ng-deep .column-content-nowrap .k-grid td,::ng-deep .column-content-nowrap .k-grid .k-table-td{white-space:nowrap;text-overflow:clip}::ng-deep kendo-grid.k-grid .k-table-alt-row .k-grid-content-sticky,::ng-deep kendo-grid.k-grid .k-grid-row-sticky.k-table-alt-row td,::ng-deep kendo-grid.k-grid .k-grid-row-sticky.k-table-alt-row .k-table-td,::ng-deep .k-master-row.k-table-alt-row .k-grid-content-sticky,::ng-deep .k-master-row.k-table-alt-row .k-grid-row-sticky{background-color:#fff}::ng-deep kendo-grid.k-grid .k-grid-content-sticky:hover,::ng-deep kendo-grid.k-grid .k-grid-content-sticky.k-hover,::ng-deep kendo-grid.k-grid .k-table-row:hover .k-grid-content-sticky{background-color:#d0dcf5!important}\n"], dependencies: [{ kind: "ngmodule", type: GridModule }, { kind: "component", type: i1$6.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", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i1$6.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "directive", type: i1$6.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i1$6.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i1$6.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "component", type: i1$6.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll", "showDisabledCheckbox"] }, { kind: "directive", type: i1$6.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i1$6.NoRecordsTemplateDirective, selector: "[kendoGridNoRecordsTemplate]" }, { kind: "directive", type: i1$6.LoadingTemplateDirective, selector: "[kendoGridLoadingTemplate]" }, { kind: "directive", type: i1$6.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "directive", type: i1$6.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "component", type: i2$b.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i2$b.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i2$b.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i2$b.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i2$b.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i2$b.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "ngmodule", type: ButtonModule$1 }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DropDownButtonModule }, { kind: "component", type: i3$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "ngmodule", type: IconsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i2$2.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: TypographyComponent, selector: "lib-typography", inputs: ["type", "defaultText", "isLabel", "hiddenLabel"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["name", "projectedIcon", "fontSize", "type"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["size", "rounded", "fillMode", "themeColor", "label", "iconName", "disabled", "toggleable", "iconPosition", "fontType", "width", "iconButton", "projectedIcon", "formatFn", "iconFontSize"], outputs: ["buttonClick"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["size", "type", "themeColor"] }, { kind: "component", type: TooltipComponent, selector: "lib-tooltip", inputs: ["position", "tooltipWidth", "tooltipHeight", "showOn", "closable", "title", "callout"] }, { kind: "pipe", type: KebabMenuFilterPipe, name: "kebabMenuFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: GridPaginationComponent, decorators: [{
             type: Component,
@@ -6371,11 +7391,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 }]
         }] });
 
+/**
+ * Service for rendering markdown content to safe HTML
+ * Handles configuration of the marked library and sanitization
+ */
+class MarkdownDisplayService {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.configureMarked();
+    }
+    /**
+     * Configure marked options for GitHub-flavored markdown rendering
+     * @private
+     */
+    configureMarked() {
+        // Configure marked options for basic rendering
+        marked.setOptions({
+            gfm: true, // GitHub Flavored Markdown
+            breaks: true // Convert line breaks to <br>
+        });
+    }
+    /**
+     * Render markdown content to safe HTML
+     * @param content - The markdown content to render
+     * @returns Promise resolving to sanitized HTML string or empty string if no content
+     */
+    async renderMarkdown(content) {
+        if (!content) {
+            return '';
+        }
+        try {
+            const html = await marked.parse(content);
+            return this.sanitizer.sanitize(SecurityContext.HTML, html) || '';
+        }
+        catch (error) {
+            console.error('Error rendering markdown:', error);
+            const errorHtml = `<div class="readme-error">Error rendering markdown content</div>`;
+            return this.sanitizer.sanitize(SecurityContext.HTML, errorHtml) || '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownDisplayService, deps: [{ token: i1$7.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownDisplayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownDisplayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$7.DomSanitizer }] });
+
+/**
+ * Component for displaying markdown files with rendering
+ * Uses the MarkdownDisplayService to convert markdown to HTML
+ *
+ * @example
+ * <!-- Display markdown content from string -->
+ * <lib-markdown-display [content]="markdownContent"></lib-markdown-display>
+ */
+class MarkdownDisplayComponent {
+    constructor(markdownDisplayService) {
+        this.markdownDisplayService = markdownDisplayService;
+        this.content = '';
+        this.renderedContent = '';
+    }
+    ngOnInit() {
+        this.renderMarkdown();
+    }
+    ngOnChanges(changes) {
+        if (changes['content'] && this.content) {
+            this.renderMarkdown();
+        }
+    }
+    async renderMarkdown() {
+        this.renderedContent = await this.markdownDisplayService.renderMarkdown(this.content);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownDisplayComponent, deps: [{ token: MarkdownDisplayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: MarkdownDisplayComponent, isStandalone: true, selector: "lib-markdown-display", inputs: { content: "content" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"markdown-display\" [innerHTML]=\"renderedContent\"></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'lib-markdown-display', imports: [CommonModule], template: "<div class=\"markdown-display\" [innerHTML]=\"renderedContent\"></div>\n" }]
+        }], ctorParameters: () => [{ type: MarkdownDisplayService }], propDecorators: { content: [{
+                type: Input
+            }] } });
+
+class MarkdownDisplayModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: MarkdownDisplayModule, imports: [CommonModule,
+            MarkdownDisplayComponent], exports: [CommonModule,
+            MarkdownDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownDisplayModule, imports: [CommonModule,
+            MarkdownDisplayComponent, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: MarkdownDisplayModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MarkdownDisplayComponent
+                    ],
+                    exports: [
+                        CommonModule,
+                        MarkdownDisplayComponent
+                    ]
+                }]
+        }] });
+
 /** --------------- modules ----------------------- **/
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ALERT_TYPE, AlertComponent, AlertModule, AngularPopupComponent, AngularPopupModule, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonGroupModule, ButtonModule, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardModule, CheckboxComponent, CheckboxModule, ChipComponent, ChipListComponent, ChipListModule, ChipModule, ClipboardComponent, ClipboardModule, ConfirmationDialogComponent, ContainerComponent, ContainerModule, CustomColumnTemplate, DateRangeComponent, DateRangeModule, DatepickerComponent, DatepickerModule, DialogActionsComponent, DialogComponent, DialogModule, DialogTitlebarComponent, DragAndDropComponent, DragAndDropModule, DropdownButtonComponent, DropdownButtonModule, DropdownComponent, DropdownModule, DropdowntreeComponent, DropdowntreeModule, ExpansionPanelComponent, ExpansionPanelModule, GridFormComponent, GridFormModule, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, GridPaginationComponent, GridPaginationModule, GridPaginationSpacerComponent, IconComponent, IconModule, KebabMenuFilterPipe, LabelComponent, LabelsModule, ListViewComponent, ListViewsModule, LoaderComponent, LoaderModule, LoaderSize, LoaderThemeColor, LoaderType, LoadingSpinnerComponent, LoadingSpinnerModule, MoleculesModule, MultiSelectDropdownComponent, MultiSelectDropdownModule, NotificationComponent, NotificationModule, NumericTextboxComponent, NumericTextboxModule, ProgressBarComponent, ProgressBarsModule, RadioButtonComponent, RadioButtonModule, SearchBoxComponent, SearchBoxModule, SharedComponent, SharedModule, SliderComponent, SliderModule, StepperComponent, StepperModule, SwitchComponent, SwitchModule, TabstripComponent, TabstripModule, TabstripTabComponent, TextAreaModule, TextareaComponent, TextboxComponent, TextboxModule, TimePickerComponent, TimePickerModule, TimeschedulerComponent, TimeschedulerModule, TooltipComponent, TooltipModule, Type, TypographyComponent, TypographyModule, UploaderComponent, UploaderModule };
+export { ALERT_TYPE, AlertComponent, AlertModule, AngularPopupComponent, AngularPopupModule, AtomsModule, AvatarComponent, AvatarModule, BreadcrumbComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonGroupModule, ButtonModule, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardModule, CheckboxComponent, CheckboxModule, ChipComponent, ChipListComponent, ChipListModule, ChipModule, ClipboardComponent, ClipboardModule, ConfirmationDialogComponent, ContainerComponent, ContainerModule, CustomColumnTemplate, DateRangeComponent, DateRangeModule, DatepickerComponent, DatepickerModule, DialogActionsComponent, DialogComponent, DialogModule, DialogTitlebarComponent, DragAndDropComponent, DragAndDropModule, DropdownButtonComponent, DropdownButtonModule, DropdownComponent, DropdownModule, DropdowntreeComponent, DropdowntreeModule, ExpansionPanelComponent, ExpansionPanelModule, GridFormComponent, GridFormModule, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, GridPaginationComponent, GridPaginationModule, GridPaginationSpacerComponent, IconComponent, IconModule, KebabMenuFilterPipe, LabelComponent, LabelsModule, ListViewComponent, ListViewsModule, LoaderComponent, LoaderModule, LoaderSize, LoaderThemeColor, LoaderType, LoadingSpinnerComponent, LoadingSpinnerModule, MarkdownDisplayComponent, MarkdownDisplayModule, MoleculesModule, MultiSelectDropdownComponent, MultiSelectDropdownModule, NotificationComponent, NotificationModule, NumericTextboxComponent, NumericTextboxModule, ProgressBarComponent, ProgressBarsModule, RadioButtonComponent, RadioButtonModule, SearchBoxComponent, SearchBoxModule, SharedComponent, SharedModule, SliderComponent, SliderModule, StepperComponent, StepperModule, SwitchComponent, SwitchModule, TabstripComponent, TabstripModule, TabstripTabComponent, TextAreaModule, TextareaComponent, TextboxComponent, TextboxModule, TimePickerComponent, TimePickerModule, TimeschedulerComponent, TimeschedulerModule, TooltipComponent, TooltipModule, TreeListComponent, TreeListModule, TreeViewComponent, TreeViewModule, Type, TypographyComponent, TypographyModule, UploaderComponent, UploaderModule };
 //# sourceMappingURL=progress-chef-platform-shared-components.mjs.map