@meshmakers/shared-ui 3.3.510 → 3.3.520

package/fesm2022/meshmakers-shared-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, signal, ViewChild, Input, Component, Injectable, NgZone, Pipe, EventEmitter, Directive, ChangeDetectorRef, Output, InjectionToken, HostListener, ElementRef, forwardRef, computed, effect, makeEnvironmentProviders } from '@angular/core';
+import { inject, signal, ViewChild, Input, Component, Injectable, NgZone, Pipe, EventEmitter, ChangeDetectorRef, Directive, Output, ChangeDetectionStrategy, InjectionToken, HostListener, ElementRef, forwardRef, computed, effect, makeEnvironmentProviders } from '@angular/core';
 import * as i3$2 from '@progress/kendo-angular-dialog';
-import { DialogContentBase, DialogRef, DialogActionsComponent, DialogService, DialogModule, WindowRef, WindowModule, WindowService, WindowCloseResult } from '@progress/kendo-angular-dialog';
+import { DialogContentBase, DialogRef, DialogActionsComponent, DialogService, WindowRef, WindowService, WindowModule, WindowCloseResult, DialogModule } from '@progress/kendo-angular-dialog';
 import { NotificationService } from '@progress/kendo-angular-notification';
 import * as i4 from '@progress/kendo-angular-buttons';
 import { ButtonComponent, ButtonModule, ButtonsModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
@@ -9,33 +9,33 @@ import * as i1$2 from '@angular/common';
 import { NgIf, CommonModule, DatePipe, AsyncPipe, NgClass } from '@angular/common';
 import * as i3 from '@progress/kendo-angular-icons';
 import { SVGIconComponent, SVGIconModule, IconsModule } from '@progress/kendo-angular-icons';
-import { firstValueFrom, fromEvent, BehaviorSubject, of, Subject, from, Subscription } from 'rxjs';
+import { firstValueFrom, fromEvent, BehaviorSubject, of, Subject, asyncScheduler, from, Subscription } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import * as i6 from '@progress/kendo-angular-label';
 import { LabelComponent, LabelModule } from '@progress/kendo-angular-label';
-import * as i2 from '@progress/kendo-angular-inputs';
-import { TextBoxComponent, TextAreaModule, CheckBoxComponent, SeparatorComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
+import * as i5 from '@progress/kendo-angular-inputs';
+import { TextBoxComponent, CheckBoxComponent, SeparatorComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
 import { copyIcon, xIcon, filterIcon, filePdfIcon, fileExcelIcon, arrowRotateCwIcon, moreVerticalIcon, saveIcon, cancelIcon, searchIcon, clockIcon, checkIcon } from '@progress/kendo-svg-icons';
 import { Router, NavigationEnd } from '@angular/router';
-import { filter, debounceTime, distinctUntilChanged, takeUntil, tap, switchMap, catchError } from 'rxjs/operators';
+import { filter, debounceTime, distinctUntilChanged, takeUntil, observeOn, tap, switchMap, catchError } from 'rxjs/operators';
 import { MessageService, CommandBaseService, CommandSettingsService, provideMmSharedServices } from '@meshmakers/shared-services';
 import * as i1$1 from '@progress/kendo-angular-grid';
-import { DataBindingDirective, GridComponent, ColumnComponent, ToolbarTemplateDirective, GridSpacerComponent, ExcelModule, PDFModule, CommandColumnComponent, CellTemplateDirective, CheckboxColumnComponent } from '@progress/kendo-angular-grid';
+import { DataBindingDirective, GridComponent, ColumnComponent, ToolbarTemplateDirective, GridSpacerComponent, ExcelModule, PDFModule, CommandColumnComponent, CellTemplateDirective, CheckboxColumnComponent, CustomMessagesComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent } from '@progress/kendo-angular-grid';
+import * as i3$1 from '@progress/kendo-angular-dropdowns';
+import { DropDownListComponent, ValueTemplateDirective, ItemTemplateDirective, AutoCompleteModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
 import { ContextMenuComponent, HierarchyBindingDirective } from '@progress/kendo-angular-menu';
 import cronstrue from 'cronstrue';
 import 'cronstrue/locales/de';
 import 'cronstrue/locales/en';
-import * as i2$1 from '@progress/kendo-angular-excel-export';
+import * as i2 from '@progress/kendo-angular-excel-export';
 import { DropPosition, ExpandDirective, TreeViewComponent, NodeTemplateDirective, DragAndDropDirective } from '@progress/kendo-angular-treeview';
 import * as i1$3 from '@progress/kendo-angular-layout';
 import { SplitterComponent, SplitterPaneComponent, TabStripModule } from '@progress/kendo-angular-layout';
-import * as i3$1 from '@progress/kendo-angular-dropdowns';
-import { AutoCompleteModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
 import * as i7 from '@progress/kendo-angular-indicators';
 import { LoaderModule, IndicatorsModule } from '@progress/kendo-angular-indicators';
-import * as i2$2 from '@progress/kendo-angular-dateinputs';
+import * as i2$1 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule, DateTimePickerModule } from '@progress/kendo-angular-dateinputs';
 import { CronExpressionParser } from 'cron-parser';
 
@@ -545,38 +545,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class MessageDetailsDialogComponent {
     copyIcon = copyIcon;
     xIcon = xIcon;
-    dialogRef = inject(DialogRef);
-    // These will be injected by the dialog service
+    windowRef = inject(WindowRef);
     data;
-    title = '';
     details = '';
-    level = 'error';
+    copyLabel = 'Copy to Clipboard';
+    closeLabel = 'Close';
     ngOnInit() {
-        // Data is injected by the dialog service
         if (this.data) {
-            this.title = this.data.title;
             this.details = this.data.details;
-            this.level = this.data.level;
+            if (this.data.copyLabel)
+                this.copyLabel = this.data.copyLabel;
+            if (this.data.closeLabel)
+                this.closeLabel = this.data.closeLabel;
         }
     }
-    get dialogTitle() {
-        const levelText = this.level === 'error' ? 'Error' : 'Warning';
-        return `${levelText} Details: ${this.title}`;
-    }
     onClose() {
-        this.dialogRef.close();
+        this.windowRef.close();
     }
     async copyToClipboard() {
         try {
             await navigator.clipboard.writeText(this.details);
-            // Could show a brief success message here
-            console.log('Details copied to clipboard');
-            // Optionally show a brief success indication
-            // this.showSuccessIndicator();
-        }
-        catch (error) {
-            console.error('Failed to copy to clipboard:', error);
-            // Fallback for older browsers
+        }
+        catch {
             this.fallbackCopyToClipboard(this.details);
         }
     }
@@ -590,31 +580,24 @@ class MessageDetailsDialogComponent {
         textarea.select();
         try {
             document.execCommand('copy');
-            console.log('Details copied to clipboard (fallback)');
         }
-        catch (error) {
-            console.error('Fallback copy failed:', error);
+        catch {
+            // clipboard fallback failed silently
         }
         finally {
             document.body.removeChild(textarea);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageDetailsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: MessageDetailsDialogComponent, isStandalone: true, selector: "mm-message-details-dialog", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MessageDetailsDialogComponent, isStandalone: true, selector: "mm-message-details-dialog", ngImport: i0, template: `
     <div class="message-details-content">
-      <div class="dialog-header">
-        <h3>{{dialogTitle}}</h3>
-      </div>
-
-      <div class="details-section">
-        <label class="details-label">Details:</label>
-        <textarea
-          kendoTextArea
-          [(ngModel)]="details"
-          [readonly]="true"
-          class="details-textarea">
-        </textarea>
-      </div>
+      @if (!details) {
+        <div class="loading-section">
+          <span class="k-icon k-i-loading"></span>
+        </div>
+      } @else {
+        <pre class="details-pre">{{ details }}</pre>
+      }
 
       <div class="dialog-actions">
         <button
@@ -622,42 +605,32 @@ class MessageDetailsDialogComponent {
           [svgIcon]="copyIcon"
           themeColor="primary"
           (click)="copyToClipboard()">
-          Copy to Clipboard
+          {{ copyLabel }}
         </button>
         <button
           kendoButton
           [svgIcon]="xIcon"
           themeColor="base"
           (click)="onClose()">
-          Close
+          {{ closeLabel }}
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [".message-details-content{display:flex;flex-direction:column;height:100%;padding:20px;box-sizing:border-box;overflow:hidden}.dialog-header{flex-shrink:0;border-bottom:1px solid var(--kendo-color-border);padding-bottom:12px;margin-bottom:16px}.dialog-header h3{margin:0;font-size:18px;font-weight:600}.details-section{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}.details-label{flex-shrink:0;font-weight:600;font-size:14px}.details-textarea{flex:1;font-family:Courier New,monospace;font-size:13px;resize:none;border:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);border-radius:4px;padding:12px;line-height:1.5;width:100%;box-sizing:border-box;overflow-y:auto;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.dialog-actions{flex-shrink:0;padding-top:16px;margin-top:16px;border-top:1px solid var(--kendo-color-border);display:flex;flex-direction:row;justify-content:space-between;gap:12px}.details-textarea::-webkit-scrollbar{width:8px;height:8px}.details-textarea::-webkit-scrollbar-track{background:var(--kendo-color-base-subtle);border-radius:4px}.details-textarea::-webkit-scrollbar-thumb{background:var(--kendo-color-base-subtle);border-radius:4px}.details-textarea::-webkit-scrollbar-thumb:hover{background:var(--kendo-color-base-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.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: TextAreaModule }, { kind: "directive", type: i2.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, styles: [".message-details-content{display:flex;flex-direction:column;height:100%;padding:16px;box-sizing:border-box;overflow:hidden}.loading-section{flex:1;display:flex;align-items:center;justify-content:center}.details-pre{flex:1;margin:0;font-family:Courier New,monospace;font-size:13px;line-height:1.5;border:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);border-radius:4px;padding:12px;overflow:scroll;white-space:pre;min-height:0}.details-pre::-webkit-scrollbar{width:10px;height:10px}.details-pre::-webkit-scrollbar-track{background:var(--kendo-color-base-subtle, #f5f5f5);border-radius:4px}.details-pre::-webkit-scrollbar-thumb{background:var(--kendo-color-border, #ccc);border-radius:4px}.details-pre::-webkit-scrollbar-thumb:hover{background:#999}.dialog-actions{flex-shrink:0;padding-top:16px;margin-top:16px;border-top:1px solid var(--kendo-color-border);display:flex;flex-direction:row;justify-content:space-between;gap:12px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageDetailsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mm-message-details-dialog', standalone: true, imports: [
-                        CommonModule,
-                        DialogModule,
                         ButtonModule,
-                        TextAreaModule,
-                        FormsModule
                     ], template: `
     <div class="message-details-content">
-      <div class="dialog-header">
-        <h3>{{dialogTitle}}</h3>
-      </div>
-
-      <div class="details-section">
-        <label class="details-label">Details:</label>
-        <textarea
-          kendoTextArea
-          [(ngModel)]="details"
-          [readonly]="true"
-          class="details-textarea">
-        </textarea>
-      </div>
+      @if (!details) {
+        <div class="loading-section">
+          <span class="k-icon k-i-loading"></span>
+        </div>
+      } @else {
+        <pre class="details-pre">{{ details }}</pre>
+      }
 
       <div class="dialog-actions">
         <button
@@ -665,41 +638,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           [svgIcon]="copyIcon"
           themeColor="primary"
           (click)="copyToClipboard()">
-          Copy to Clipboard
+          {{ copyLabel }}
         </button>
         <button
           kendoButton
           [svgIcon]="xIcon"
           themeColor="base"
           (click)="onClose()">
-          Close
+          {{ closeLabel }}
         </button>
       </div>
     </div>
-  `, styles: [".message-details-content{display:flex;flex-direction:column;height:100%;padding:20px;box-sizing:border-box;overflow:hidden}.dialog-header{flex-shrink:0;border-bottom:1px solid var(--kendo-color-border);padding-bottom:12px;margin-bottom:16px}.dialog-header h3{margin:0;font-size:18px;font-weight:600}.details-section{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}.details-label{flex-shrink:0;font-weight:600;font-size:14px}.details-textarea{flex:1;font-family:Courier New,monospace;font-size:13px;resize:none;border:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);border-radius:4px;padding:12px;line-height:1.5;width:100%;box-sizing:border-box;overflow-y:auto;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.dialog-actions{flex-shrink:0;padding-top:16px;margin-top:16px;border-top:1px solid var(--kendo-color-border);display:flex;flex-direction:row;justify-content:space-between;gap:12px}.details-textarea::-webkit-scrollbar{width:8px;height:8px}.details-textarea::-webkit-scrollbar-track{background:var(--kendo-color-base-subtle);border-radius:4px}.details-textarea::-webkit-scrollbar-thumb{background:var(--kendo-color-base-subtle);border-radius:4px}.details-textarea::-webkit-scrollbar-thumb:hover{background:var(--kendo-color-base-subtle)}\n"] }]
+  `, styles: [".message-details-content{display:flex;flex-direction:column;height:100%;padding:16px;box-sizing:border-box;overflow:hidden}.loading-section{flex:1;display:flex;align-items:center;justify-content:center}.details-pre{flex:1;margin:0;font-family:Courier New,monospace;font-size:13px;line-height:1.5;border:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);border-radius:4px;padding:12px;overflow:scroll;white-space:pre;min-height:0}.details-pre::-webkit-scrollbar{width:10px;height:10px}.details-pre::-webkit-scrollbar-track{background:var(--kendo-color-base-subtle, #f5f5f5);border-radius:4px}.details-pre::-webkit-scrollbar-thumb{background:var(--kendo-color-border, #ccc);border-radius:4px}.details-pre::-webkit-scrollbar-thumb:hover{background:#999}.dialog-actions{flex-shrink:0;padding-top:16px;margin-top:16px;border-top:1px solid var(--kendo-color-border);display:flex;flex-direction:row;justify-content:space-between;gap:12px}\n"] }]
         }] });
 
 class MessageDetailsDialogService {
-    dialogService = inject(DialogService);
+    windowService = inject(WindowService);
     /**
-     * Opens a modal dialog to show message details with copy-to-clipboard functionality
+     * Opens a resizable window to show message details with copy-to-clipboard functionality
      */
     showDetailsDialog(data) {
-        const dialogRef = this.dialogService.open({
+        const windowRef = this.windowService.open({
             content: MessageDetailsDialogComponent,
-            actions: [], // Actions are handled by the component itself
-            minWidth: 700,
-            maxWidth: 900,
-            width: '70%',
+            title: data.title,
+            width: 900,
+            height: 600,
+            minWidth: 500,
             minHeight: 400,
-            maxHeight: '80vh',
-            height: '60vh'
+            resizable: true,
         });
-        // Pass data to the component instance
-        if (dialogRef.content.instance) {
-            dialogRef.content.instance.data = data;
+        const contentRef = windowRef.content;
+        if (contentRef?.instance) {
+            contentRef.instance.data = data;
         }
-        return dialogRef;
+        return windowRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageDetailsDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageDetailsDialogService });
@@ -1070,6 +1042,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
+/**
+ * Default English messages for the ListViewComponent.
+ */
+const DEFAULT_LIST_VIEW_MESSAGES = {
+    searchPlaceholder: 'Search in all columns...',
+    showRowFilter: 'Show Row Filter',
+    exportToExcel: 'Export to Excel',
+    exportToPdf: 'Export to PDF',
+    refreshData: 'Refresh Data',
+    actionsColumnTitle: 'Actions',
+    pdfPageTemplate: 'Page {pageNum} of {totalPages}',
+    pagerItemsPerPage: 'items per page',
+    pagerOf: 'of',
+    pagerItems: 'items',
+    pagerPage: 'Page',
+    pagerFirstPage: 'Go to the first page',
+    pagerLastPage: 'Go to the last page',
+    pagerPreviousPage: 'Go to the previous page',
+    pagerNextPage: 'Go to the next page',
+    noRecords: 'No records available.',
+};
+
 class PascalCasePipe {
     transform(value) {
         if (!value)
@@ -1127,14 +1121,18 @@ class MmListViewDataBindingDirective extends DataBindingDirective {
     _forceRefresh = false;
     constructor() {
         const grid = inject(GridComponent);
-        super(grid);
+        const changeDetector = inject(ChangeDetectorRef);
+        super(grid, changeDetector);
         this._serviceSubscription = null;
         this._executeFilterSubscription = null;
         this._fetchAgainSubscription = null;
         this._refreshDataSubscription = null;
     }
-    async ngOnInit() {
+    ngOnInit() {
         super.ngOnInit();
+        if (!this.dataSource) {
+            return;
+        }
         this._fetchAgainSubscription = this.dataSource.fetchAgainEvent.subscribe(() => {
             this._forceRefresh = true;
             this.rebind();
@@ -1157,12 +1155,21 @@ class MmListViewDataBindingDirective extends DataBindingDirective {
         super.ngOnDestroy();
     }
     // noinspection JSUnusedGlobalSymbols
+    /**
+     * Triggers a rebind when the filter state changes programmatically.
+     * Syncs the grid's filter into the DataBindingDirective state before rebinding.
+     */
+    notifyFilterChange(filter) {
+        this.state.filter = filter;
+        this.rebind();
+    }
     rebind() {
         try {
             if (!this.dataSource) {
                 return;
             }
-            this.grid.loading = true;
+            // Only use dataSource.setLoading() (tracked via isLoading$ / isLoading signal).
+            // Do NOT set grid.loading directly — it triggers Kendo's internal loading overlay.
             this.dataSource.setLoading(true);
             const forceRefresh = this._forceRefresh;
             this._forceRefresh = false; // Reset for next call
@@ -1172,7 +1179,6 @@ class MmListViewDataBindingDirective extends DataBindingDirective {
                 forceRefresh
             }).subscribe({
                 next: value => {
-                    this.grid.loading = false;
                     this.dataSource.setLoading(false);
                     this.grid.data = {
                         data: (value?.data ?? []),
@@ -1180,14 +1186,14 @@ class MmListViewDataBindingDirective extends DataBindingDirective {
                     };
                     this.notifyDataChange();
                 },
-                error: () => {
-                    this.grid.loading = false;
+                error: (err) => {
+                    console.error('[MmListViewDataBinding] fetchData error:', err);
                     this.dataSource.setLoading(false);
                 }
             });
         }
-        catch {
-            this.grid.loading = false;
+        catch (e) {
+            console.error('[MmListViewDataBinding] rebind() caught error:', e);
             this.dataSource.setLoading(false);
         }
     }
@@ -1357,7 +1363,7 @@ class ListViewComponent extends CommandBaseService {
     _contextMenuItems = [];
     _showRowFilter = false;
     /** Indicates if the data source is currently loading data */
-    isLoading = false;
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     gridComponent;
     dataBindingDirective;
     gridContextMenu;
@@ -1398,6 +1404,13 @@ class ListViewComponent extends CommandBaseService {
     sortable = false;
     rowFilterEnabled = false;
     searchTextBoxEnabled = false;
+    _messages = { ...DEFAULT_LIST_VIEW_MESSAGES };
+    set messages(value) {
+        this._messages = { ...DEFAULT_LIST_VIEW_MESSAGES, ...value };
+    }
+    get messages() {
+        return this._messages;
+    }
     selectable = {
         enabled: false
     };
@@ -1419,7 +1432,6 @@ class ListViewComponent extends CommandBaseService {
     get columns() {
         return this._columns;
     }
-    cdr = inject(ChangeDetectorRef);
     constructor() {
         const commandSettingsService = inject(CommandSettingsService);
         const router = inject(Router);
@@ -1431,15 +1443,13 @@ class ListViewComponent extends CommandBaseService {
         });
     }
     ngAfterViewInit() {
-        // Subscribe to loading state from the data binding directive
+        // Subscribe to loading state from the data binding directive.
+        // Use asyncScheduler to defer each emission to a separate macrotask,
+        // preventing the signal from changing during Angular's CD verify pass
+        // (which causes NG0100 when Apollo returns cached data quickly).
         if (this.dataBindingDirective) {
-            this.dataBindingDirective.isLoading$.pipe(takeUntil(this.destroy$)).subscribe(loading => {
-                // Use setTimeout to defer the update to the next tick,
-                // avoiding ExpressionChangedAfterItHasBeenCheckedError
-                setTimeout(() => {
-                    this.isLoading = loading;
-                    this.cdr.markForCheck();
-                });
+            this.dataBindingDirective.isLoading$.pipe(observeOn(asyncScheduler), takeUntil(this.destroy$)).subscribe(loading => {
+                this.isLoading.set(loading);
             });
         }
     }
@@ -1535,6 +1545,34 @@ class ListViewComponent extends CommandBaseService {
             return '';
         return this.cronHumanizer.toHumanReadable(expression, 'en');
     }
+    hasFilterOptions(column) {
+        return !!column.filterOptions && column.filterOptions.length > 0;
+    }
+    getSelectedFilterValue(column) {
+        const grid = this.gridComponent;
+        if (!grid)
+            return null;
+        const filter = grid.filter;
+        if (!filter?.filters)
+            return null;
+        const fd = filter.filters.find(f => 'field' in f && f.field === column.field);
+        return fd?.value ?? null;
+    }
+    onDropdownFilter(value, column) {
+        const grid = this.gridComponent;
+        if (!grid)
+            return;
+        const currentFilter = grid.filter ?? { logic: 'and', filters: [] };
+        // Remove existing filter for this field
+        const otherFilters = currentFilter.filters.filter(f => !('field' in f) || f.field !== column.field);
+        if (value) {
+            otherFilters.push({ field: column.field, operator: 'eq', value });
+        }
+        const newFilter = { logic: 'and', filters: otherFilters };
+        grid.filter = newFilter;
+        // Sync filter into directive state and trigger rebind
+        this.dataBindingDirective?.notifyFilterChange(newFilter);
+    }
     onShowRowFilter() {
         if (this.rowFilterEnabled) {
             this._showRowFilter = !this._showRowFilter;
@@ -1649,9 +1687,14 @@ class ListViewComponent extends CommandBaseService {
         }
         return items;
     }
+    getPdfPageText(pageNum, totalPages) {
+        return this._messages.pdfPageTemplate
+            .replace('{pageNum}', String(pageNum))
+            .replace('{totalPages}', String(totalPages));
+    }
     moreVerticalIcon = moreVerticalIcon;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ListViewComponent, isStandalone: true, selector: "mm-list-view", inputs: { pageSize: "pageSize", skip: "skip", rowIsClickable: "rowIsClickable", showRowCheckBoxes: "showRowCheckBoxes", showRowSelectAllCheckBox: "showRowSelectAllCheckBox", contextMenuType: "contextMenuType", leftToolbarActions: "leftToolbarActions", rightToolbarActions: "rightToolbarActions", actionCommandItems: "actionCommandItems", contextMenuCommandItems: "contextMenuCommandItems", excelExportFileName: "excelExportFileName", pdfExportFileName: "pdfExportFileName", pageable: "pageable", sortable: "sortable", rowFilterEnabled: "rowFilterEnabled", searchTextBoxEnabled: "searchTextBoxEnabled", selectable: "selectable", columns: "columns" }, outputs: { rowClicked: "rowClicked" }, viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }, { propertyName: "dataBindingDirective", first: true, predicate: MmListViewDataBindingDirective, descendants: true }, { propertyName: "gridContextMenu", first: true, predicate: ["gridmenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<kendo-grid\n  mmListViewDataBinding\n  [pageSize]=\"pageSize\" [selectable]=\"selectable\" (pageChange)=\"onPageChange($event)\"\n  [skip]=\"skip\" (selectionChange)=\"onRowSelect($event)\" (cellClick)=\"onCellClick($event)\"\n  [pageable]=\"pageable\"\n  [sortable]=\"sortable\"\n  [filterable]=\"_showRowFilter\"\n>\n  <ng-template kendoGridToolbarTemplate>\n\n    @for (commandItem of leftToolbarActions; track commandItem.id) {\n      @if (commandItem) {\n        @switch (commandItem.type) {\n          @case ('link') {\n            @if (commandItem.svgIcon) {\n              <button kendoTooltip kendoButton [svgIcon]=\"commandItem.svgIcon\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            } @else {\n              <button kendoTooltip kendoButton [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            }\n          }\n          @case ('separator'){\n            <kendo-separator></kendo-separator>\n          }\n        }\n      }\n    }\n\n    <kendo-grid-spacer></kendo-grid-spacer>\n    @if (searchTextBoxEnabled) {\n      <kendo-textbox\n        [style.width.px]=\"165\"\n        placeholder=\"Search in all columns...\"\n        [value]=\"searchValue\"\n        [disabled]=\"isLoading\"\n        (valueChange)=\"onFilter($event)\"\n      ></kendo-textbox>\n    }\n\n    @for (commandItem of rightToolbarActions; track commandItem.id) {\n      @if (commandItem) {\n        @switch (commandItem.type) {\n          @case ('link') {\n            @if (commandItem.svgIcon) {\n              <button kendoTooltip kendoButton [svgIcon]=\"commandItem.svgIcon\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            } @else {\n              <button kendoTooltip kendoButton [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            }\n          }\n          @case ('separator'){\n            <kendo-separator></kendo-separator>\n          }\n        }\n      }\n    }\n\n    @if (rowFilterEnabled) {\n      <button kendoTooltip kendoButton [svgIcon]=\"filterIcon\" (click)=\"onShowRowFilter()\"\n              [disabled]=\"isLoading\" title=\"Show Row Filter\"></button>\n    }\n    <button kendoTooltip kendoGridExcelCommand [svgIcon]=\"excelSVG\" [disabled]=\"isLoading\" title=\"Export to Excel\"></button>\n    <button kendoTooltip kendoGridPDFCommand [svgIcon]=\"pdfSVG\" [disabled]=\"isLoading\" title=\"Export to PDF\"></button>\n    <button kendoTooltip kendoButton [svgIcon]=\"refreshIcon\" (click)=\"onRefresh()\" [disabled]=\"isLoading\" title=\"Refresh Data\"></button>\n  </ng-template>\n\n  @if (showRowCheckBoxes && selectable.enabled) {\n    <kendo-grid-checkbox-column [showSelectAll]=\"showRowSelectAllCheckBox\"\n                                [width]=\"40\"></kendo-grid-checkbox-column>\n  }\n\n  @for (column of columns; track column.field) {\n    <kendo-grid-column [field]=\"column.field\"\n                       [filter]=\"getFilterType(column)\" format=\"{{column.format}}\"\n                       [width]=\"$any(column.width)\"\n                       [sortable]=\"column.sortable !== false\"\n                       [title]=\"getDisplayName(column) | pascalCase\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        @switch (column.dataType) {\n          @case ('boolean') {\n            <kendo-checkbox type=\"checkbox\" [checkedState]=\"$any(getValue(dataItem, column))\" [disabled]=\"true\" />\n          }\n          @case ('iso8601') {\n            {{ $any(getValue(dataItem, column)) | date:column.format }}\n          }\n          @case ('bytes') {\n            {{ $any(getValue(dataItem, column)) | bytesToSize }}\n          }\n          @case ('statusIcons') {\n            <span class=\"status-icons-cell\">\n              @for (fieldConfig of getStatusFields(column); track fieldConfig.field) {\n                @if (getStatusIconMapping(dataItem, fieldConfig); as mapping) {\n                  <span\n                    class=\"status-icon\"\n                    [title]=\"mapping.tooltip\"\n                    [style.color]=\"mapping.color\">\n                    <kendo-svg-icon [icon]=\"mapping.icon\"></kendo-svg-icon>\n                  </span>\n                }\n              }\n            </span>\n          }\n          @case ('cronExpression') {\n            <span class=\"cron-expression-cell\">\n              <code class=\"cron-expression\">{{ getValue(dataItem, column) }}</code>\n              <span class=\"cron-description\">{{ getCronHumanReadable(getValue(dataItem, column)) }}</span>\n            </span>\n          }\n          @default {\n            {{ getValue(dataItem, column) }}\n          }\n        }\n      </ng-template>\n    </kendo-grid-column>\n  }\n\n  @if (_actionMenuItems.length > 0 || (_contextMenuItems.length > 0 &&  contextMenuType == 'actionMenu')) {\n    <kendo-grid-command-column title=\"Actions\" [width]=\"220\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        @if (_actionMenuItems.length > 0) {\n          @for (menuItem of _actionMenuItems; track menuItem.text) {\n            @if (!menuItem.separator) {\n              <button\n                type=\"button\"\n                class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n                [title]=\"menuItem.text ?? ''\"\n                [disabled]=\"(menuItem.disabled ?? false) || isLoading\"\n                (click)=\"onSelectOptionActionItem($event, dataItem, menuItem)\">\n                @if (menuItem.svgIcon) {\n                  <kendo-svg-icon [icon]=\"menuItem.svgIcon\"></kendo-svg-icon>\n                }\n              </button>\n            }\n          }\n        }\n\n        @if (_contextMenuItems.length > 0 && contextMenuType == 'actionMenu') {\n          <button kendoButton [svgIcon]=\"moreVerticalIcon\" [disabled]=\"isLoading\" (click)=\"onContextMenu(dataItem, $event)\"></button>\n        }\n      </ng-template>\n    </kendo-grid-command-column>\n  }\n\n  <kendo-grid-excel fileName=\"{{excelExportFileName}}\">\n    @for (column of columns; track column.field) {\n      <kendo-excelexport-column [field]=\"column.field\"\n                                [title]=\"getDisplayName(column) | pascalCase\">\n      </kendo-excelexport-column>\n    }\n  </kendo-grid-excel>\n\n  <kendo-grid-pdf fileName=\"{{pdfExportFileName}}\" paperSize=\"A4\" [repeatHeaders]=\"true\"\n                  [landscape]=\"true\">\n    @for (column of columns; track column.field) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [filter]=\"getFilterType(column)\"\n                         [title]=\"getDisplayName(column) | pascalCase\"></kendo-grid-column>\n    }\n    <kendo-grid-pdf-margin top=\"1.5cm\" left=\"1cm\" right=\"1cm\" bottom=\"1.5cm\"></kendo-grid-pdf-margin>\n    <ng-template kendoGridPDFTemplate let-pageNum=\"pageNum\" let-totalPages=\"totalPages\">\n      <div class=\"page-template\">\n        <div class=\"footer\" style=\"position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 9px; color: #666;\">\n          Page {{ pageNum }} of {{ totalPages }}\n        </div>\n      </div>\n    </ng-template>\n  </kendo-grid-pdf>\n</kendo-grid>\n\n<kendo-contextmenu\n  #gridmenu\n  [kendoMenuHierarchyBinding]=\"_contextMenuItems\"\n  [textField]=\"['text']\"\n  childrenField=\"items\"\n  svgIconField=\"svgIcon\"\n  separatorField=\"separator\" (popupClose)=\"onContextMenuClosed($event)\"\n  (select)=\"onContextMenuSelect($event)\"\n></kendo-contextmenu>\n", styles: [".status-icons-cell{display:inline-flex;align-items:center;gap:8px}.status-icons-cell .status-icon{display:inline-flex;align-items:center;justify-content:center;cursor:default}.status-icons-cell .status-icon kendo-svg-icon{width:18px;height:18px}.cron-expression-cell{display:flex;flex-direction:column;gap:2px}.cron-expression-cell .cron-expression{font-family:Roboto Mono,Consolas,monospace;font-size:.85em;background:var(--mm-cron-code-bg, #eeeeee);color:var(--mm-cron-code-text, #333333);padding:2px 6px;border-radius:3px}.cron-expression-cell .cron-description{font-size:.8em;color:var(--mm-cron-text-secondary, #666666)}:host-context(.k-pdf-export) .k-grid,:host-context(.k-pdf-export) .k-grid-header,:host-context(.k-pdf-export) .k-grid-content,:host-context(.k-pdf-export) .k-grid-header-wrap,:host-context(.k-pdf-export) .k-grid-content-locked,:host-context(.k-pdf-export) .k-grid-header-locked{background:#fff!important;background-color:#fff!important;background-image:none!important;color:#000!important;border-color:#000!important}:host-context(.k-pdf-export) .k-grid{border:1px solid #000!important;font-family:Arial,sans-serif!important;font-size:10px!important}:host-context(.k-pdf-export) .k-grid-header th,:host-context(.k-pdf-export) .k-header,:host-context(.k-pdf-export) .k-grid th{background:#f0f0f0!important;background-color:#f0f0f0!important;background-image:none!important;color:#000!important;border:1px solid #000!important;font-weight:700!important;padding:6px 8px!important;text-transform:none!important;letter-spacing:normal!important}:host-context(.k-pdf-export) .k-grid td,:host-context(.k-pdf-export) .k-grid-content td,:host-context(.k-pdf-export) .k-master-row td{background:#fff!important;background-color:#fff!important;background-image:none!important;color:#000!important;border:1px solid #000!important;padding:4px 8px!important}:host-context(.k-pdf-export) .k-grid tr,:host-context(.k-pdf-export) .k-master-row,:host-context(.k-pdf-export) .k-alt{background:#fff!important;background-color:#fff!important;background-image:none!important}:host-context(.k-pdf-export) .k-grid tr:hover,:host-context(.k-pdf-export) .k-grid tr.k-selected,:host-context(.k-pdf-export) .k-grid td:hover{background:#fff!important;background-color:#fff!important}:host-context(.k-pdf-export) .k-grid-toolbar,:host-context(.k-pdf-export) .k-pager,:host-context(.k-pdf-export) .k-grid-pager,:host-context(.k-pdf-export) .k-command-cell,:host-context(.k-pdf-export) .k-checkbox-column,:host-context(.k-pdf-export) kendo-grid-checkbox-column,:host-context(.k-pdf-export) .status-icons-cell,:host-context(.k-pdf-export) .status-icon,:host-context(.k-pdf-export) kendo-svg-icon{display:none!important}\n"], dependencies: [{ kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: MmListViewDataBindingDirective, selector: "[mmListViewDataBinding]" }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: GridSpacerComponent, selector: "kendo-grid-spacer", inputs: ["width"] }, { kind: "ngmodule", type: ExcelModule }, { kind: "component", type: i1$1.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"], outputs: ["fileCreated"] }, { kind: "component", type: i1$1.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { kind: "component", type: i2$1.ColumnComponent, selector: "kendo-excelexport-column", inputs: ["field", "cellOptions", "groupHeaderCellOptions", "groupFooterCellOptions", "footerCellOptions"] }, { kind: "ngmodule", type: PDFModule }, { kind: "component", type: i1$1.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }, { kind: "component", type: i1$1.PDFMarginComponent, selector: "kendo-grid-pdf-margin" }, { kind: "component", type: i1$1.PDFCommandDirective, selector: "[kendoGridPDFCommand]" }, { kind: "directive", type: i1$1.PDFTemplateDirective, selector: "[kendoGridPDFTemplate]" }, { kind: "component", type: 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: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "directive", type: HierarchyBindingDirective, selector: "[kendoMenuHierarchyBinding]", inputs: ["kendoMenuHierarchyBinding", "textField", "urlField", "iconField", "svgIconField", "disabledField", "cssClassField", "cssStyleField", "separatorField", "childrenField"], exportAs: ["kendoMenuHierarchyBinding"] }, { kind: "component", type: CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll", "showDisabledCheckbox"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i3.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "pipe", type: PascalCasePipe, name: "pascalCase" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: BytesToSizePipe, name: "bytesToSize" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ListViewComponent, isStandalone: true, selector: "mm-list-view", inputs: { pageSize: "pageSize", skip: "skip", rowIsClickable: "rowIsClickable", showRowCheckBoxes: "showRowCheckBoxes", showRowSelectAllCheckBox: "showRowSelectAllCheckBox", contextMenuType: "contextMenuType", leftToolbarActions: "leftToolbarActions", rightToolbarActions: "rightToolbarActions", actionCommandItems: "actionCommandItems", contextMenuCommandItems: "contextMenuCommandItems", excelExportFileName: "excelExportFileName", pdfExportFileName: "pdfExportFileName", pageable: "pageable", sortable: "sortable", rowFilterEnabled: "rowFilterEnabled", searchTextBoxEnabled: "searchTextBoxEnabled", messages: "messages", selectable: "selectable", columns: "columns" }, outputs: { rowClicked: "rowClicked" }, viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }, { propertyName: "dataBindingDirective", first: true, predicate: MmListViewDataBindingDirective, descendants: true }, { propertyName: "gridContextMenu", first: true, predicate: ["gridmenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<kendo-grid\n  mmListViewDataBinding\n  [loading]=\"isLoading()\"\n  [pageSize]=\"pageSize\" [selectable]=\"selectable\" (pageChange)=\"onPageChange($event)\"\n  [skip]=\"skip\" (selectionChange)=\"onRowSelect($event)\" (cellClick)=\"onCellClick($event)\"\n  [pageable]=\"pageable\"\n  [sortable]=\"sortable\"\n  [filterable]=\"_showRowFilter\"\n>\n  <kendo-grid-messages\n    [pagerItemsPerPage]=\"_messages.pagerItemsPerPage\"\n    [pagerOf]=\"_messages.pagerOf\"\n    [pagerItems]=\"_messages.pagerItems\"\n    [pagerPage]=\"_messages.pagerPage\"\n    [pagerFirstPage]=\"_messages.pagerFirstPage\"\n    [pagerLastPage]=\"_messages.pagerLastPage\"\n    [pagerPreviousPage]=\"_messages.pagerPreviousPage\"\n    [pagerNextPage]=\"_messages.pagerNextPage\"\n    [noRecords]=\"_messages.noRecords\"\n  ></kendo-grid-messages>\n  <ng-template kendoGridToolbarTemplate>\n\n    @for (commandItem of leftToolbarActions; track commandItem.id) {\n      @if (commandItem) {\n        @switch (commandItem.type) {\n          @case ('link') {\n            @if (commandItem.svgIcon) {\n              <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading()\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            } @else {\n              <button kendoTooltip kendoButton themeColor=\"primary\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading()\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            }\n          }\n          @case ('separator'){\n            <kendo-separator></kendo-separator>\n          }\n        }\n      }\n    }\n\n    <kendo-grid-spacer></kendo-grid-spacer>\n    @if (searchTextBoxEnabled) {\n      <input\n        class=\"k-textbox k-input k-input-md k-rounded-md\"\n        [style.width.px]=\"165\"\n        [placeholder]=\"_messages.searchPlaceholder\"\n        [value]=\"searchValue\"\n        (input)=\"onFilter($any($event.target).value || null)\"\n      />\n    }\n\n    @for (commandItem of rightToolbarActions; track commandItem.id) {\n      @if (commandItem) {\n        @switch (commandItem.type) {\n          @case ('link') {\n            @if (commandItem.svgIcon) {\n              <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading()\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            } @else {\n              <button kendoTooltip kendoButton themeColor=\"primary\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading()\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            }\n          }\n          @case ('separator'){\n            <kendo-separator></kendo-separator>\n          }\n        }\n      }\n    }\n\n    @if (rowFilterEnabled) {\n      <button kendoTooltip kendoButton themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"filterIcon\" (click)=\"onShowRowFilter()\"\n              [disabled]=\"isLoading()\" [title]=\"_messages.showRowFilter\"></button>\n    }\n    <button kendoTooltip kendoGridExcelCommand themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"excelSVG\" [disabled]=\"isLoading()\" [title]=\"_messages.exportToExcel\"></button>\n    <button kendoTooltip kendoGridPDFCommand themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"pdfSVG\" [disabled]=\"isLoading()\" [title]=\"_messages.exportToPdf\"></button>\n    <button kendoTooltip kendoButton themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"refreshIcon\" (click)=\"onRefresh()\" [disabled]=\"isLoading()\" [title]=\"_messages.refreshData\"></button>\n  </ng-template>\n\n  @if (showRowCheckBoxes && selectable.enabled) {\n    <kendo-grid-checkbox-column [showSelectAll]=\"showRowSelectAllCheckBox\"\n                                [width]=\"40\"></kendo-grid-checkbox-column>\n  }\n\n  @for (column of columns; track column.field) {\n    <kendo-grid-column [field]=\"column.field\"\n                       [filter]=\"getFilterType(column)\" format=\"{{column.format}}\"\n                       [width]=\"$any(column.width)\"\n                       [sortable]=\"column.sortable !== false\"\n                       [filterable]=\"column.filterable !== false\"\n                       [title]=\"getDisplayName(column) | pascalCase\">\n      <ng-template kendoGridFilterCellTemplate let-filter let-gridColumn=\"column\">\n        @if (hasFilterOptions(column)) {\n          <kendo-dropdownlist\n            class=\"status-filter-dropdown\"\n            [data]=\"column.filterOptions!\"\n            textField=\"text\"\n            valueField=\"value\"\n            [valuePrimitive]=\"true\"\n            [value]=\"getSelectedFilterValue(column)\"\n            [defaultItem]=\"{ text: '', value: null }\"\n            [popupSettings]=\"{ width: 'auto' }\"\n            (valueChange)=\"onDropdownFilter($event, column)\"\n          >\n            <ng-template kendoDropDownListValueTemplate let-dataItem>\n              @if (dataItem?.value && column.statusMapping?.[dataItem.value]; as mapping) {\n                <span class=\"filter-status-item\">\n                  <span [style.color]=\"mapping.color\">\n                    <kendo-svg-icon [icon]=\"mapping.icon\" [size]=\"'small'\"></kendo-svg-icon>\n                  </span>\n                </span>\n              }\n            </ng-template>\n            <ng-template kendoDropDownListItemTemplate let-dataItem>\n              @if (dataItem?.value && column.statusMapping?.[dataItem.value]; as mapping) {\n                <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n                  <span [style.color]=\"mapping.color\">\n                    <kendo-svg-icon [icon]=\"mapping.icon\" [size]=\"'small'\"></kendo-svg-icon>\n                  </span>\n                  <span>{{ dataItem.text }}</span>\n                </span>\n              } @else {\n                <span>{{ dataItem.text }}</span>\n              }\n            </ng-template>\n          </kendo-dropdownlist>\n        } @else {\n          @switch (getFilterType(column)) {\n            @case ('numeric') {\n              <kendo-grid-numeric-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"false\"></kendo-grid-numeric-filter-cell>\n            }\n            @case ('boolean') {\n              <kendo-grid-boolean-filter-cell [column]=\"gridColumn\" [filter]=\"filter\"></kendo-grid-boolean-filter-cell>\n            }\n            @case ('date') {\n              <kendo-grid-date-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"false\"></kendo-grid-date-filter-cell>\n            }\n            @default {\n              <kendo-grid-string-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"false\"></kendo-grid-string-filter-cell>\n            }\n          }\n        }\n      </ng-template>\n      <ng-template kendoGridCellTemplate let-dataItem>\n        @switch (column.dataType) {\n          @case ('boolean') {\n            <kendo-checkbox type=\"checkbox\" [checkedState]=\"$any(getValue(dataItem, column))\" [disabled]=\"true\" />\n          }\n          @case ('iso8601') {\n            {{ $any(getValue(dataItem, column)) | date:column.format }}\n          }\n          @case ('bytes') {\n            {{ $any(getValue(dataItem, column)) | bytesToSize }}\n          }\n          @case ('statusIcons') {\n            <span class=\"status-icons-cell\">\n              @for (fieldConfig of getStatusFields(column); track fieldConfig.field) {\n                @if (getStatusIconMapping(dataItem, fieldConfig); as mapping) {\n                  <span\n                    class=\"status-icon\"\n                    [title]=\"mapping.tooltip\"\n                    [style.color]=\"mapping.color\">\n                    <kendo-svg-icon [icon]=\"mapping.icon\"></kendo-svg-icon>\n                  </span>\n                }\n              }\n            </span>\n          }\n          @case ('cronExpression') {\n            <span class=\"cron-expression-cell\">\n              <code class=\"cron-expression\">{{ getValue(dataItem, column) }}</code>\n              <span class=\"cron-description\">{{ getCronHumanReadable(getValue(dataItem, column)) }}</span>\n            </span>\n          }\n          @default {\n            {{ getValue(dataItem, column) }}\n          }\n        }\n      </ng-template>\n    </kendo-grid-column>\n  }\n\n  @if (_actionMenuItems.length > 0 || (_contextMenuItems.length > 0 &&  contextMenuType == 'actionMenu')) {\n    <kendo-grid-command-column [title]=\"_messages.actionsColumnTitle\" [width]=\"220\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        @if (_actionMenuItems.length > 0) {\n          @for (menuItem of _actionMenuItems; track menuItem.text) {\n            @if (!menuItem.separator) {\n              <button kendoButton themeColor=\"primary\" fillMode=\"flat\"\n                [svgIcon]=\"menuItem.svgIcon!\"\n                [title]=\"menuItem.text ?? ''\"\n                [disabled]=\"(menuItem.disabled ?? false) || isLoading()\"\n                (click)=\"onSelectOptionActionItem($event, dataItem, menuItem)\">\n              </button>\n            }\n          }\n        }\n\n        @if (_contextMenuItems.length > 0 && contextMenuType == 'actionMenu') {\n          <button kendoButton themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"moreVerticalIcon\" [disabled]=\"isLoading()\" (click)=\"onContextMenu(dataItem, $event)\"></button>\n        }\n      </ng-template>\n    </kendo-grid-command-column>\n  }\n\n  <kendo-grid-excel fileName=\"{{excelExportFileName}}\">\n    @for (column of columns; track column.field) {\n      <kendo-excelexport-column [field]=\"column.field\"\n                                [title]=\"getDisplayName(column) | pascalCase\">\n      </kendo-excelexport-column>\n    }\n  </kendo-grid-excel>\n\n  <kendo-grid-pdf fileName=\"{{pdfExportFileName}}\" paperSize=\"A4\" [repeatHeaders]=\"true\"\n                  [landscape]=\"true\">\n    @for (column of columns; track column.field) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [filter]=\"getFilterType(column)\"\n                         [title]=\"getDisplayName(column) | pascalCase\"></kendo-grid-column>\n    }\n    <kendo-grid-pdf-margin top=\"1.5cm\" left=\"1cm\" right=\"1cm\" bottom=\"1.5cm\"></kendo-grid-pdf-margin>\n    <ng-template kendoGridPDFTemplate let-pageNum=\"pageNum\" let-totalPages=\"totalPages\">\n      <div class=\"page-template\">\n        <div class=\"footer\" style=\"position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 9px; color: #666;\">\n          {{ getPdfPageText(pageNum, totalPages) }}\n        </div>\n      </div>\n    </ng-template>\n  </kendo-grid-pdf>\n</kendo-grid>\n\n<kendo-contextmenu\n  #gridmenu\n  [kendoMenuHierarchyBinding]=\"_contextMenuItems\"\n  [textField]=\"['text']\"\n  childrenField=\"items\"\n  svgIconField=\"svgIcon\"\n  separatorField=\"separator\" (popupClose)=\"onContextMenuClosed($event)\"\n  (select)=\"onContextMenuSelect($event)\"\n></kendo-contextmenu>\n", styles: [".status-icons-cell{display:inline-flex;align-items:center;gap:8px}.status-icons-cell .status-icon{display:inline-flex;align-items:center;justify-content:center;cursor:default}.status-icons-cell .status-icon kendo-svg-icon{width:18px;height:18px}:host ::ng-deep .filter-status-item{display:inline-flex;align-items:center;gap:10px}:host ::ng-deep .status-filter-dropdown .k-input-value-text{font-size:0}:host ::ng-deep .status-filter-dropdown .k-input-value-text .filter-status-item{font-size:14px}.cron-expression-cell{display:flex;flex-direction:column;gap:2px}.cron-expression-cell .cron-expression{font-family:Roboto Mono,Consolas,monospace;font-size:.85em;background:var(--mm-cron-code-bg, #eeeeee);color:var(--mm-cron-code-text, #333333);padding:2px 6px;border-radius:3px}.cron-expression-cell .cron-description{font-size:.8em;color:var(--mm-cron-text-secondary, #666666)}:host-context(.k-pdf-export) .k-grid,:host-context(.k-pdf-export) .k-grid-header,:host-context(.k-pdf-export) .k-grid-content,:host-context(.k-pdf-export) .k-grid-header-wrap,:host-context(.k-pdf-export) .k-grid-content-locked,:host-context(.k-pdf-export) .k-grid-header-locked{background:#fff!important;background-color:#fff!important;background-image:none!important;color:#000!important;border-color:#000!important}:host-context(.k-pdf-export) .k-grid{border:1px solid #000!important;font-family:Arial,sans-serif!important;font-size:10px!important}:host-context(.k-pdf-export) .k-grid-header th,:host-context(.k-pdf-export) .k-header,:host-context(.k-pdf-export) .k-grid th{background:#f0f0f0!important;background-color:#f0f0f0!important;background-image:none!important;color:#000!important;border:1px solid #000!important;font-weight:700!important;padding:6px 8px!important;text-transform:none!important;letter-spacing:normal!important}:host-context(.k-pdf-export) .k-grid td,:host-context(.k-pdf-export) .k-grid-content td,:host-context(.k-pdf-export) .k-master-row td{background:#fff!important;background-color:#fff!important;background-image:none!important;color:#000!important;border:1px solid #000!important;padding:4px 8px!important}:host-context(.k-pdf-export) .k-grid tr,:host-context(.k-pdf-export) .k-master-row,:host-context(.k-pdf-export) .k-alt{background:#fff!important;background-color:#fff!important;background-image:none!important}:host-context(.k-pdf-export) .k-grid tr:hover,:host-context(.k-pdf-export) .k-grid tr.k-selected,:host-context(.k-pdf-export) .k-grid td:hover{background:#fff!important;background-color:#fff!important}:host-context(.k-pdf-export) .k-grid-toolbar,:host-context(.k-pdf-export) .k-pager,:host-context(.k-pdf-export) .k-grid-pager,:host-context(.k-pdf-export) .k-command-cell,:host-context(.k-pdf-export) .k-checkbox-column,:host-context(.k-pdf-export) kendo-grid-checkbox-column,:host-context(.k-pdf-export) .status-icons-cell,:host-context(.k-pdf-export) .status-icon,:host-context(.k-pdf-export) kendo-svg-icon{display:none!important}\n"], dependencies: [{ kind: "component", type: GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: MmListViewDataBindingDirective, selector: "[mmListViewDataBinding]" }, { kind: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { kind: "component", type: GridSpacerComponent, selector: "kendo-grid-spacer", inputs: ["width"] }, { kind: "ngmodule", type: ExcelModule }, { kind: "component", type: i1$1.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"], outputs: ["fileCreated"] }, { kind: "component", type: i1$1.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { kind: "component", type: i2.ColumnComponent, selector: "kendo-excelexport-column", inputs: ["field", "cellOptions", "groupHeaderCellOptions", "groupFooterCellOptions", "footerCellOptions"] }, { kind: "ngmodule", type: PDFModule }, { kind: "component", type: i1$1.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }, { kind: "component", type: i1$1.PDFMarginComponent, selector: "kendo-grid-pdf-margin" }, { kind: "component", type: i1$1.PDFCommandDirective, selector: "[kendoGridPDFCommand]" }, { kind: "directive", type: i1$1.PDFTemplateDirective, selector: "[kendoGridPDFTemplate]" }, { kind: "component", type: 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: "component", type: CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "directive", type: HierarchyBindingDirective, selector: "[kendoMenuHierarchyBinding]", inputs: ["kendoMenuHierarchyBinding", "textField", "urlField", "iconField", "svgIconField", "disabledField", "cssClassField", "cssStyleField", "separatorField", "childrenField"], exportAs: ["kendoMenuHierarchyBinding"] }, { kind: "component", type: CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll", "showDisabledCheckbox"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i3.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: CustomMessagesComponent, selector: "kendo-grid-messages" }, { kind: "directive", type: FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { kind: "component", type: StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators", "placeholder"] }, { kind: "component", type: NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators", "placeholder"] }, { kind: "component", type: BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell" }, { kind: "component", type: DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "pipe", type: PascalCasePipe, name: "pascalCase" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: BytesToSizePipe, name: "bytesToSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -1661,7 +1704,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         ColumnComponent,
                         PascalCasePipe,
                         ToolbarTemplateDirective,
-                        TextBoxComponent,
                         GridSpacerComponent,
                         ExcelModule,
                         PDFModule,
@@ -1675,8 +1717,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SeparatorComponent,
                         DatePipe,
                         BytesToSizePipe,
-                        SVGIconModule
-                    ], template: "<kendo-grid\n  mmListViewDataBinding\n  [pageSize]=\"pageSize\" [selectable]=\"selectable\" (pageChange)=\"onPageChange($event)\"\n  [skip]=\"skip\" (selectionChange)=\"onRowSelect($event)\" (cellClick)=\"onCellClick($event)\"\n  [pageable]=\"pageable\"\n  [sortable]=\"sortable\"\n  [filterable]=\"_showRowFilter\"\n>\n  <ng-template kendoGridToolbarTemplate>\n\n    @for (commandItem of leftToolbarActions; track commandItem.id) {\n      @if (commandItem) {\n        @switch (commandItem.type) {\n          @case ('link') {\n            @if (commandItem.svgIcon) {\n              <button kendoTooltip kendoButton [svgIcon]=\"commandItem.svgIcon\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            } @else {\n              <button kendoTooltip kendoButton [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            }\n          }\n          @case ('separator'){\n            <kendo-separator></kendo-separator>\n          }\n        }\n      }\n    }\n\n    <kendo-grid-spacer></kendo-grid-spacer>\n    @if (searchTextBoxEnabled) {\n      <kendo-textbox\n        [style.width.px]=\"165\"\n        placeholder=\"Search in all columns...\"\n        [value]=\"searchValue\"\n        [disabled]=\"isLoading\"\n        (valueChange)=\"onFilter($event)\"\n      ></kendo-textbox>\n    }\n\n    @for (commandItem of rightToolbarActions; track commandItem.id) {\n      @if (commandItem) {\n        @switch (commandItem.type) {\n          @case ('link') {\n            @if (commandItem.svgIcon) {\n              <button kendoTooltip kendoButton [svgIcon]=\"commandItem.svgIcon\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            } @else {\n              <button kendoTooltip kendoButton [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            }\n          }\n          @case ('separator'){\n            <kendo-separator></kendo-separator>\n          }\n        }\n      }\n    }\n\n    @if (rowFilterEnabled) {\n      <button kendoTooltip kendoButton [svgIcon]=\"filterIcon\" (click)=\"onShowRowFilter()\"\n              [disabled]=\"isLoading\" title=\"Show Row Filter\"></button>\n    }\n    <button kendoTooltip kendoGridExcelCommand [svgIcon]=\"excelSVG\" [disabled]=\"isLoading\" title=\"Export to Excel\"></button>\n    <button kendoTooltip kendoGridPDFCommand [svgIcon]=\"pdfSVG\" [disabled]=\"isLoading\" title=\"Export to PDF\"></button>\n    <button kendoTooltip kendoButton [svgIcon]=\"refreshIcon\" (click)=\"onRefresh()\" [disabled]=\"isLoading\" title=\"Refresh Data\"></button>\n  </ng-template>\n\n  @if (showRowCheckBoxes && selectable.enabled) {\n    <kendo-grid-checkbox-column [showSelectAll]=\"showRowSelectAllCheckBox\"\n                                [width]=\"40\"></kendo-grid-checkbox-column>\n  }\n\n  @for (column of columns; track column.field) {\n    <kendo-grid-column [field]=\"column.field\"\n                       [filter]=\"getFilterType(column)\" format=\"{{column.format}}\"\n                       [width]=\"$any(column.width)\"\n                       [sortable]=\"column.sortable !== false\"\n                       [title]=\"getDisplayName(column) | pascalCase\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        @switch (column.dataType) {\n          @case ('boolean') {\n            <kendo-checkbox type=\"checkbox\" [checkedState]=\"$any(getValue(dataItem, column))\" [disabled]=\"true\" />\n          }\n          @case ('iso8601') {\n            {{ $any(getValue(dataItem, column)) | date:column.format }}\n          }\n          @case ('bytes') {\n            {{ $any(getValue(dataItem, column)) | bytesToSize }}\n          }\n          @case ('statusIcons') {\n            <span class=\"status-icons-cell\">\n              @for (fieldConfig of getStatusFields(column); track fieldConfig.field) {\n                @if (getStatusIconMapping(dataItem, fieldConfig); as mapping) {\n                  <span\n                    class=\"status-icon\"\n                    [title]=\"mapping.tooltip\"\n                    [style.color]=\"mapping.color\">\n                    <kendo-svg-icon [icon]=\"mapping.icon\"></kendo-svg-icon>\n                  </span>\n                }\n              }\n            </span>\n          }\n          @case ('cronExpression') {\n            <span class=\"cron-expression-cell\">\n              <code class=\"cron-expression\">{{ getValue(dataItem, column) }}</code>\n              <span class=\"cron-description\">{{ getCronHumanReadable(getValue(dataItem, column)) }}</span>\n            </span>\n          }\n          @default {\n            {{ getValue(dataItem, column) }}\n          }\n        }\n      </ng-template>\n    </kendo-grid-column>\n  }\n\n  @if (_actionMenuItems.length > 0 || (_contextMenuItems.length > 0 &&  contextMenuType == 'actionMenu')) {\n    <kendo-grid-command-column title=\"Actions\" [width]=\"220\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        @if (_actionMenuItems.length > 0) {\n          @for (menuItem of _actionMenuItems; track menuItem.text) {\n            @if (!menuItem.separator) {\n              <button\n                type=\"button\"\n                class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n                [title]=\"menuItem.text ?? ''\"\n                [disabled]=\"(menuItem.disabled ?? false) || isLoading\"\n                (click)=\"onSelectOptionActionItem($event, dataItem, menuItem)\">\n                @if (menuItem.svgIcon) {\n                  <kendo-svg-icon [icon]=\"menuItem.svgIcon\"></kendo-svg-icon>\n                }\n              </button>\n            }\n          }\n        }\n\n        @if (_contextMenuItems.length > 0 && contextMenuType == 'actionMenu') {\n          <button kendoButton [svgIcon]=\"moreVerticalIcon\" [disabled]=\"isLoading\" (click)=\"onContextMenu(dataItem, $event)\"></button>\n        }\n      </ng-template>\n    </kendo-grid-command-column>\n  }\n\n  <kendo-grid-excel fileName=\"{{excelExportFileName}}\">\n    @for (column of columns; track column.field) {\n      <kendo-excelexport-column [field]=\"column.field\"\n                                [title]=\"getDisplayName(column) | pascalCase\">\n      </kendo-excelexport-column>\n    }\n  </kendo-grid-excel>\n\n  <kendo-grid-pdf fileName=\"{{pdfExportFileName}}\" paperSize=\"A4\" [repeatHeaders]=\"true\"\n                  [landscape]=\"true\">\n    @for (column of columns; track column.field) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [filter]=\"getFilterType(column)\"\n                         [title]=\"getDisplayName(column) | pascalCase\"></kendo-grid-column>\n    }\n    <kendo-grid-pdf-margin top=\"1.5cm\" left=\"1cm\" right=\"1cm\" bottom=\"1.5cm\"></kendo-grid-pdf-margin>\n    <ng-template kendoGridPDFTemplate let-pageNum=\"pageNum\" let-totalPages=\"totalPages\">\n      <div class=\"page-template\">\n        <div class=\"footer\" style=\"position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 9px; color: #666;\">\n          Page {{ pageNum }} of {{ totalPages }}\n        </div>\n      </div>\n    </ng-template>\n  </kendo-grid-pdf>\n</kendo-grid>\n\n<kendo-contextmenu\n  #gridmenu\n  [kendoMenuHierarchyBinding]=\"_contextMenuItems\"\n  [textField]=\"['text']\"\n  childrenField=\"items\"\n  svgIconField=\"svgIcon\"\n  separatorField=\"separator\" (popupClose)=\"onContextMenuClosed($event)\"\n  (select)=\"onContextMenuSelect($event)\"\n></kendo-contextmenu>\n", styles: [".status-icons-cell{display:inline-flex;align-items:center;gap:8px}.status-icons-cell .status-icon{display:inline-flex;align-items:center;justify-content:center;cursor:default}.status-icons-cell .status-icon kendo-svg-icon{width:18px;height:18px}.cron-expression-cell{display:flex;flex-direction:column;gap:2px}.cron-expression-cell .cron-expression{font-family:Roboto Mono,Consolas,monospace;font-size:.85em;background:var(--mm-cron-code-bg, #eeeeee);color:var(--mm-cron-code-text, #333333);padding:2px 6px;border-radius:3px}.cron-expression-cell .cron-description{font-size:.8em;color:var(--mm-cron-text-secondary, #666666)}:host-context(.k-pdf-export) .k-grid,:host-context(.k-pdf-export) .k-grid-header,:host-context(.k-pdf-export) .k-grid-content,:host-context(.k-pdf-export) .k-grid-header-wrap,:host-context(.k-pdf-export) .k-grid-content-locked,:host-context(.k-pdf-export) .k-grid-header-locked{background:#fff!important;background-color:#fff!important;background-image:none!important;color:#000!important;border-color:#000!important}:host-context(.k-pdf-export) .k-grid{border:1px solid #000!important;font-family:Arial,sans-serif!important;font-size:10px!important}:host-context(.k-pdf-export) .k-grid-header th,:host-context(.k-pdf-export) .k-header,:host-context(.k-pdf-export) .k-grid th{background:#f0f0f0!important;background-color:#f0f0f0!important;background-image:none!important;color:#000!important;border:1px solid #000!important;font-weight:700!important;padding:6px 8px!important;text-transform:none!important;letter-spacing:normal!important}:host-context(.k-pdf-export) .k-grid td,:host-context(.k-pdf-export) .k-grid-content td,:host-context(.k-pdf-export) .k-master-row td{background:#fff!important;background-color:#fff!important;background-image:none!important;color:#000!important;border:1px solid #000!important;padding:4px 8px!important}:host-context(.k-pdf-export) .k-grid tr,:host-context(.k-pdf-export) .k-master-row,:host-context(.k-pdf-export) .k-alt{background:#fff!important;background-color:#fff!important;background-image:none!important}:host-context(.k-pdf-export) .k-grid tr:hover,:host-context(.k-pdf-export) .k-grid tr.k-selected,:host-context(.k-pdf-export) .k-grid td:hover{background:#fff!important;background-color:#fff!important}:host-context(.k-pdf-export) .k-grid-toolbar,:host-context(.k-pdf-export) .k-pager,:host-context(.k-pdf-export) .k-grid-pager,:host-context(.k-pdf-export) .k-command-cell,:host-context(.k-pdf-export) .k-checkbox-column,:host-context(.k-pdf-export) kendo-grid-checkbox-column,:host-context(.k-pdf-export) .status-icons-cell,:host-context(.k-pdf-export) .status-icon,:host-context(.k-pdf-export) kendo-svg-icon{display:none!important}\n"] }]
+                        SVGIconModule,
+                        CustomMessagesComponent,
+                        FilterCellTemplateDirective,
+                        StringFilterCellComponent,
+                        NumericFilterCellComponent,
+                        BooleanFilterCellComponent,
+                        DateFilterCellComponent,
+                        DropDownListComponent,
+                        ValueTemplateDirective,
+                        ItemTemplateDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-grid\n  mmListViewDataBinding\n  [loading]=\"isLoading()\"\n  [pageSize]=\"pageSize\" [selectable]=\"selectable\" (pageChange)=\"onPageChange($event)\"\n  [skip]=\"skip\" (selectionChange)=\"onRowSelect($event)\" (cellClick)=\"onCellClick($event)\"\n  [pageable]=\"pageable\"\n  [sortable]=\"sortable\"\n  [filterable]=\"_showRowFilter\"\n>\n  <kendo-grid-messages\n    [pagerItemsPerPage]=\"_messages.pagerItemsPerPage\"\n    [pagerOf]=\"_messages.pagerOf\"\n    [pagerItems]=\"_messages.pagerItems\"\n    [pagerPage]=\"_messages.pagerPage\"\n    [pagerFirstPage]=\"_messages.pagerFirstPage\"\n    [pagerLastPage]=\"_messages.pagerLastPage\"\n    [pagerPreviousPage]=\"_messages.pagerPreviousPage\"\n    [pagerNextPage]=\"_messages.pagerNextPage\"\n    [noRecords]=\"_messages.noRecords\"\n  ></kendo-grid-messages>\n  <ng-template kendoGridToolbarTemplate>\n\n    @for (commandItem of leftToolbarActions; track commandItem.id) {\n      @if (commandItem) {\n        @switch (commandItem.type) {\n          @case ('link') {\n            @if (commandItem.svgIcon) {\n              <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading()\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            } @else {\n              <button kendoTooltip kendoButton themeColor=\"primary\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading()\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            }\n          }\n          @case ('separator'){\n            <kendo-separator></kendo-separator>\n          }\n        }\n      }\n    }\n\n    <kendo-grid-spacer></kendo-grid-spacer>\n    @if (searchTextBoxEnabled) {\n      <input\n        class=\"k-textbox k-input k-input-md k-rounded-md\"\n        [style.width.px]=\"165\"\n        [placeholder]=\"_messages.searchPlaceholder\"\n        [value]=\"searchValue\"\n        (input)=\"onFilter($any($event.target).value || null)\"\n      />\n    }\n\n    @for (commandItem of rightToolbarActions; track commandItem.id) {\n      @if (commandItem) {\n        @switch (commandItem.type) {\n          @case ('link') {\n            @if (commandItem.svgIcon) {\n              <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading()\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            } @else {\n              <button kendoTooltip kendoButton themeColor=\"primary\" [title]=\"commandItem.text\"\n                      [disabled]=\"getIsDisabled(commandItem) || isLoading()\"\n                      (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n              </button>\n            }\n          }\n          @case ('separator'){\n            <kendo-separator></kendo-separator>\n          }\n        }\n      }\n    }\n\n    @if (rowFilterEnabled) {\n      <button kendoTooltip kendoButton themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"filterIcon\" (click)=\"onShowRowFilter()\"\n              [disabled]=\"isLoading()\" [title]=\"_messages.showRowFilter\"></button>\n    }\n    <button kendoTooltip kendoGridExcelCommand themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"excelSVG\" [disabled]=\"isLoading()\" [title]=\"_messages.exportToExcel\"></button>\n    <button kendoTooltip kendoGridPDFCommand themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"pdfSVG\" [disabled]=\"isLoading()\" [title]=\"_messages.exportToPdf\"></button>\n    <button kendoTooltip kendoButton themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"refreshIcon\" (click)=\"onRefresh()\" [disabled]=\"isLoading()\" [title]=\"_messages.refreshData\"></button>\n  </ng-template>\n\n  @if (showRowCheckBoxes && selectable.enabled) {\n    <kendo-grid-checkbox-column [showSelectAll]=\"showRowSelectAllCheckBox\"\n                                [width]=\"40\"></kendo-grid-checkbox-column>\n  }\n\n  @for (column of columns; track column.field) {\n    <kendo-grid-column [field]=\"column.field\"\n                       [filter]=\"getFilterType(column)\" format=\"{{column.format}}\"\n                       [width]=\"$any(column.width)\"\n                       [sortable]=\"column.sortable !== false\"\n                       [filterable]=\"column.filterable !== false\"\n                       [title]=\"getDisplayName(column) | pascalCase\">\n      <ng-template kendoGridFilterCellTemplate let-filter let-gridColumn=\"column\">\n        @if (hasFilterOptions(column)) {\n          <kendo-dropdownlist\n            class=\"status-filter-dropdown\"\n            [data]=\"column.filterOptions!\"\n            textField=\"text\"\n            valueField=\"value\"\n            [valuePrimitive]=\"true\"\n            [value]=\"getSelectedFilterValue(column)\"\n            [defaultItem]=\"{ text: '', value: null }\"\n            [popupSettings]=\"{ width: 'auto' }\"\n            (valueChange)=\"onDropdownFilter($event, column)\"\n          >\n            <ng-template kendoDropDownListValueTemplate let-dataItem>\n              @if (dataItem?.value && column.statusMapping?.[dataItem.value]; as mapping) {\n                <span class=\"filter-status-item\">\n                  <span [style.color]=\"mapping.color\">\n                    <kendo-svg-icon [icon]=\"mapping.icon\" [size]=\"'small'\"></kendo-svg-icon>\n                  </span>\n                </span>\n              }\n            </ng-template>\n            <ng-template kendoDropDownListItemTemplate let-dataItem>\n              @if (dataItem?.value && column.statusMapping?.[dataItem.value]; as mapping) {\n                <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n                  <span [style.color]=\"mapping.color\">\n                    <kendo-svg-icon [icon]=\"mapping.icon\" [size]=\"'small'\"></kendo-svg-icon>\n                  </span>\n                  <span>{{ dataItem.text }}</span>\n                </span>\n              } @else {\n                <span>{{ dataItem.text }}</span>\n              }\n            </ng-template>\n          </kendo-dropdownlist>\n        } @else {\n          @switch (getFilterType(column)) {\n            @case ('numeric') {\n              <kendo-grid-numeric-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"false\"></kendo-grid-numeric-filter-cell>\n            }\n            @case ('boolean') {\n              <kendo-grid-boolean-filter-cell [column]=\"gridColumn\" [filter]=\"filter\"></kendo-grid-boolean-filter-cell>\n            }\n            @case ('date') {\n              <kendo-grid-date-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"false\"></kendo-grid-date-filter-cell>\n            }\n            @default {\n              <kendo-grid-string-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"false\"></kendo-grid-string-filter-cell>\n            }\n          }\n        }\n      </ng-template>\n      <ng-template kendoGridCellTemplate let-dataItem>\n        @switch (column.dataType) {\n          @case ('boolean') {\n            <kendo-checkbox type=\"checkbox\" [checkedState]=\"$any(getValue(dataItem, column))\" [disabled]=\"true\" />\n          }\n          @case ('iso8601') {\n            {{ $any(getValue(dataItem, column)) | date:column.format }}\n          }\n          @case ('bytes') {\n            {{ $any(getValue(dataItem, column)) | bytesToSize }}\n          }\n          @case ('statusIcons') {\n            <span class=\"status-icons-cell\">\n              @for (fieldConfig of getStatusFields(column); track fieldConfig.field) {\n                @if (getStatusIconMapping(dataItem, fieldConfig); as mapping) {\n                  <span\n                    class=\"status-icon\"\n                    [title]=\"mapping.tooltip\"\n                    [style.color]=\"mapping.color\">\n                    <kendo-svg-icon [icon]=\"mapping.icon\"></kendo-svg-icon>\n                  </span>\n                }\n              }\n            </span>\n          }\n          @case ('cronExpression') {\n            <span class=\"cron-expression-cell\">\n              <code class=\"cron-expression\">{{ getValue(dataItem, column) }}</code>\n              <span class=\"cron-description\">{{ getCronHumanReadable(getValue(dataItem, column)) }}</span>\n            </span>\n          }\n          @default {\n            {{ getValue(dataItem, column) }}\n          }\n        }\n      </ng-template>\n    </kendo-grid-column>\n  }\n\n  @if (_actionMenuItems.length > 0 || (_contextMenuItems.length > 0 &&  contextMenuType == 'actionMenu')) {\n    <kendo-grid-command-column [title]=\"_messages.actionsColumnTitle\" [width]=\"220\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        @if (_actionMenuItems.length > 0) {\n          @for (menuItem of _actionMenuItems; track menuItem.text) {\n            @if (!menuItem.separator) {\n              <button kendoButton themeColor=\"primary\" fillMode=\"flat\"\n                [svgIcon]=\"menuItem.svgIcon!\"\n                [title]=\"menuItem.text ?? ''\"\n                [disabled]=\"(menuItem.disabled ?? false) || isLoading()\"\n                (click)=\"onSelectOptionActionItem($event, dataItem, menuItem)\">\n              </button>\n            }\n          }\n        }\n\n        @if (_contextMenuItems.length > 0 && contextMenuType == 'actionMenu') {\n          <button kendoButton themeColor=\"primary\" fillMode=\"flat\" [svgIcon]=\"moreVerticalIcon\" [disabled]=\"isLoading()\" (click)=\"onContextMenu(dataItem, $event)\"></button>\n        }\n      </ng-template>\n    </kendo-grid-command-column>\n  }\n\n  <kendo-grid-excel fileName=\"{{excelExportFileName}}\">\n    @for (column of columns; track column.field) {\n      <kendo-excelexport-column [field]=\"column.field\"\n                                [title]=\"getDisplayName(column) | pascalCase\">\n      </kendo-excelexport-column>\n    }\n  </kendo-grid-excel>\n\n  <kendo-grid-pdf fileName=\"{{pdfExportFileName}}\" paperSize=\"A4\" [repeatHeaders]=\"true\"\n                  [landscape]=\"true\">\n    @for (column of columns; track column.field) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [filter]=\"getFilterType(column)\"\n                         [title]=\"getDisplayName(column) | pascalCase\"></kendo-grid-column>\n    }\n    <kendo-grid-pdf-margin top=\"1.5cm\" left=\"1cm\" right=\"1cm\" bottom=\"1.5cm\"></kendo-grid-pdf-margin>\n    <ng-template kendoGridPDFTemplate let-pageNum=\"pageNum\" let-totalPages=\"totalPages\">\n      <div class=\"page-template\">\n        <div class=\"footer\" style=\"position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 9px; color: #666;\">\n          {{ getPdfPageText(pageNum, totalPages) }}\n        </div>\n      </div>\n    </ng-template>\n  </kendo-grid-pdf>\n</kendo-grid>\n\n<kendo-contextmenu\n  #gridmenu\n  [kendoMenuHierarchyBinding]=\"_contextMenuItems\"\n  [textField]=\"['text']\"\n  childrenField=\"items\"\n  svgIconField=\"svgIcon\"\n  separatorField=\"separator\" (popupClose)=\"onContextMenuClosed($event)\"\n  (select)=\"onContextMenuSelect($event)\"\n></kendo-contextmenu>\n", styles: [".status-icons-cell{display:inline-flex;align-items:center;gap:8px}.status-icons-cell .status-icon{display:inline-flex;align-items:center;justify-content:center;cursor:default}.status-icons-cell .status-icon kendo-svg-icon{width:18px;height:18px}:host ::ng-deep .filter-status-item{display:inline-flex;align-items:center;gap:10px}:host ::ng-deep .status-filter-dropdown .k-input-value-text{font-size:0}:host ::ng-deep .status-filter-dropdown .k-input-value-text .filter-status-item{font-size:14px}.cron-expression-cell{display:flex;flex-direction:column;gap:2px}.cron-expression-cell .cron-expression{font-family:Roboto Mono,Consolas,monospace;font-size:.85em;background:var(--mm-cron-code-bg, #eeeeee);color:var(--mm-cron-code-text, #333333);padding:2px 6px;border-radius:3px}.cron-expression-cell .cron-description{font-size:.8em;color:var(--mm-cron-text-secondary, #666666)}:host-context(.k-pdf-export) .k-grid,:host-context(.k-pdf-export) .k-grid-header,:host-context(.k-pdf-export) .k-grid-content,:host-context(.k-pdf-export) .k-grid-header-wrap,:host-context(.k-pdf-export) .k-grid-content-locked,:host-context(.k-pdf-export) .k-grid-header-locked{background:#fff!important;background-color:#fff!important;background-image:none!important;color:#000!important;border-color:#000!important}:host-context(.k-pdf-export) .k-grid{border:1px solid #000!important;font-family:Arial,sans-serif!important;font-size:10px!important}:host-context(.k-pdf-export) .k-grid-header th,:host-context(.k-pdf-export) .k-header,:host-context(.k-pdf-export) .k-grid th{background:#f0f0f0!important;background-color:#f0f0f0!important;background-image:none!important;color:#000!important;border:1px solid #000!important;font-weight:700!important;padding:6px 8px!important;text-transform:none!important;letter-spacing:normal!important}:host-context(.k-pdf-export) .k-grid td,:host-context(.k-pdf-export) .k-grid-content td,:host-context(.k-pdf-export) .k-master-row td{background:#fff!important;background-color:#fff!important;background-image:none!important;color:#000!important;border:1px solid #000!important;padding:4px 8px!important}:host-context(.k-pdf-export) .k-grid tr,:host-context(.k-pdf-export) .k-master-row,:host-context(.k-pdf-export) .k-alt{background:#fff!important;background-color:#fff!important;background-image:none!important}:host-context(.k-pdf-export) .k-grid tr:hover,:host-context(.k-pdf-export) .k-grid tr.k-selected,:host-context(.k-pdf-export) .k-grid td:hover{background:#fff!important;background-color:#fff!important}:host-context(.k-pdf-export) .k-grid-toolbar,:host-context(.k-pdf-export) .k-pager,:host-context(.k-pdf-export) .k-grid-pager,:host-context(.k-pdf-export) .k-command-cell,:host-context(.k-pdf-export) .k-checkbox-column,:host-context(.k-pdf-export) kendo-grid-checkbox-column,:host-context(.k-pdf-export) .status-icons-cell,:host-context(.k-pdf-export) .status-icon,:host-context(.k-pdf-export) kendo-svg-icon{display:none!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gridComponent: [{
                 type: ViewChild,
                 args: [GridComponent]
@@ -1720,6 +1771,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 type: Input
             }], searchTextBoxEnabled: [{
                 type: Input
+            }], messages: [{
+                type: Input
             }], selectable: [{
                 type: Input
             }], columns: [{
@@ -3385,7 +3438,7 @@ class SaveAsDialogComponent extends DialogContentBase {
         {{ saveButtonText }}
       </button>
     </kendo-dialog-actions>
-  `, isInline: true, styles: [".save-as-container{padding:20px;min-width:350px}.form-group{display:flex;flex-direction:column;gap:8px}.name-input{width:100%}.validation-container{min-height:24px}.validation-message{font-size:12px;padding:4px 0}.validation-message.error{color:var(--kendo-color-error, #dc3545)}.validation-message.success{color:var(--kendo-color-success, #28a745)}.availability-check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i4.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: InputsModule }, { kind: "component", type: i2.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i6.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: IndicatorsModule }, { kind: "component", type: i7.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }] });
+  `, isInline: true, styles: [".save-as-container{padding:20px;min-width:350px}.form-group{display:flex;flex-direction:column;gap:8px}.name-input{width:100%}.validation-container{min-height:24px}.validation-message{font-size:12px;padding:4px 0}.validation-message.error{color:var(--kendo-color-error, #dc3545)}.validation-message.success{color:var(--kendo-color-success, #28a745)}.availability-check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i4.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: InputsModule }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i6.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: IndicatorsModule }, { kind: "component", type: i7.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SaveAsDialogComponent, decorators: [{
             type: Component,
@@ -3880,7 +3933,7 @@ class TimeRangePickerComponent {
         return this.selectedType() === type;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimeRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TimeRangePickerComponent, isStandalone: true, selector: "mm-time-range-picker", inputs: { config: "config", labels: "labels", initialSelection: "initialSelection" }, outputs: { rangeChange: "rangeChange", rangeChangeISO: "rangeChangeISO", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"time-range-picker\">\n  <!-- Range Type Selection -->\n  <div class=\"picker-field type-field\">\n    <kendo-label [text]=\"mergedLabels().rangeType || 'Range Type'\">\n      <kendo-dropdownlist\n        [data]=\"typeOptions()\"\n        [value]=\"selectedType()\"\n        textField=\"label\"\n        valueField=\"value\"\n        [valuePrimitive]=\"true\"\n        (valueChange)=\"onTypeChange($event)\">\n      </kendo-dropdownlist>\n    </kendo-label>\n  </div>\n\n  <!-- Year Selection (for year, quarter, month types) -->\n  @if (isType('year') || isType('quarter') || isType('month')) {\n    <div class=\"picker-field year-field\">\n      <kendo-label [text]=\"mergedLabels().year || 'Year'\">\n        <kendo-dropdownlist\n          [data]=\"yearOptions()\"\n          [value]=\"selectedYear()\"\n          textField=\"label\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          (valueChange)=\"onYearChange($event)\">\n        </kendo-dropdownlist>\n      </kendo-label>\n    </div>\n  }\n\n  <!-- Quarter Selection -->\n  @if (isType('quarter')) {\n    <div class=\"picker-field quarter-field\">\n      <kendo-label [text]=\"mergedLabels().quarter || 'Quarter'\">\n        <kendo-dropdownlist\n          [data]=\"quarterOptions()\"\n          [value]=\"selectedQuarter()\"\n          textField=\"label\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          (valueChange)=\"onQuarterChange($event)\">\n        </kendo-dropdownlist>\n      </kendo-label>\n    </div>\n  }\n\n  <!-- Month Selection -->\n  @if (isType('month')) {\n    <div class=\"picker-field month-field\">\n      <kendo-label [text]=\"mergedLabels().month || 'Month'\">\n        <kendo-dropdownlist\n          [data]=\"monthOptions()\"\n          [value]=\"selectedMonth()\"\n          textField=\"label\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          (valueChange)=\"onMonthChange($event)\">\n        </kendo-dropdownlist>\n      </kendo-label>\n    </div>\n  }\n\n  <!-- Relative Time Selection -->\n  @if (isType('relative')) {\n    <div class=\"picker-field relative-value-field\">\n      <kendo-label [text]=\"mergedLabels().relativeValue || 'Last'\">\n        <kendo-numerictextbox\n          [value]=\"relativeValue()\"\n          [min]=\"1\"\n          [max]=\"9999\"\n          [decimals]=\"0\"\n          [format]=\"'n0'\"\n          [spinners]=\"true\"\n          (valueChange)=\"onRelativeValueChange($event)\">\n        </kendo-numerictextbox>\n      </kendo-label>\n    </div>\n\n    <div class=\"picker-field relative-unit-field\">\n      <kendo-label [text]=\"mergedLabels().relativeUnit || 'Unit'\">\n        <kendo-dropdownlist\n          [data]=\"relativeUnitOptions()\"\n          [value]=\"relativeUnit()\"\n          textField=\"label\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          (valueChange)=\"onRelativeUnitChange($event)\">\n        </kendo-dropdownlist>\n      </kendo-label>\n    </div>\n  }\n\n  <!-- Custom Date Range -->\n  @if (isType('custom')) {\n    <div class=\"picker-field custom-from-field\">\n      <kendo-label [text]=\"mergedLabels().customFrom || 'From'\">\n        @if (showTime()) {\n          <kendo-datetimepicker\n            [value]=\"customFrom()\"\n            [min]=\"minDate()\"\n            [max]=\"customTo()\"\n            (valueChange)=\"onCustomFromChange($event)\">\n          </kendo-datetimepicker>\n        } @else {\n          <kendo-datepicker\n            [value]=\"customFrom()\"\n            [min]=\"minDate()\"\n            [max]=\"customTo()\"\n            (valueChange)=\"onCustomFromChange($event)\">\n          </kendo-datepicker>\n        }\n      </kendo-label>\n    </div>\n\n    <div class=\"picker-field custom-to-field\">\n      <kendo-label [text]=\"mergedLabels().customTo || 'To'\">\n        @if (showTime()) {\n          <kendo-datetimepicker\n            [value]=\"customTo()\"\n            [min]=\"customFrom()\"\n            [max]=\"maxDate()\"\n            (valueChange)=\"onCustomToChange($event)\">\n          </kendo-datetimepicker>\n        } @else {\n          <kendo-datepicker\n            [value]=\"customTo()\"\n            [min]=\"customFrom()\"\n            [max]=\"maxDate()\"\n            (valueChange)=\"onCustomToChange($event)\">\n          </kendo-datepicker>\n        }\n      </kendo-label>\n    </div>\n  }\n</div>\n", styles: [".time-range-picker{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.time-range-picker .picker-field{display:flex;flex-direction:column}.time-range-picker .picker-field kendo-label{display:flex;flex-direction:column;gap:.25rem}.time-range-picker .type-field{min-width:120px}.time-range-picker .year-field{min-width:100px}.time-range-picker .quarter-field{min-width:140px}.time-range-picker .month-field{min-width:130px}.time-range-picker .relative-value-field{min-width:80px}.time-range-picker .relative-value-field kendo-numerictextbox{width:100%}.time-range-picker .relative-unit-field{min-width:100px}.time-range-picker .custom-from-field,.time-range-picker .custom-to-field{min-width:150px}.time-range-picker .custom-from-field kendo-datepicker,.time-range-picker .custom-from-field kendo-datetimepicker,.time-range-picker .custom-to-field kendo-datepicker,.time-range-picker .custom-to-field kendo-datetimepicker{width:100%}@media(max-width:768px){.time-range-picker{gap:.75rem}.time-range-picker .picker-field{flex:1 1 calc(50% - .5rem);min-width:0}.time-range-picker .type-field{flex:1 1 100%}}@media(max-width:480px){.time-range-picker{flex-direction:column;gap:.5rem}.time-range-picker .picker-field{flex:1 1 100%;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$2.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i2$2.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "adaptiveTitle", "adaptiveSubtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { kind: "ngmodule", type: NumericTextBoxModule }, { kind: "component", type: i2.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i6.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TimeRangePickerComponent, isStandalone: true, selector: "mm-time-range-picker", inputs: { config: "config", labels: "labels", initialSelection: "initialSelection" }, outputs: { rangeChange: "rangeChange", rangeChangeISO: "rangeChangeISO", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"time-range-picker\">\n  <!-- Range Type Selection -->\n  <div class=\"picker-field type-field\">\n    <kendo-label [text]=\"mergedLabels().rangeType || 'Range Type'\">\n      <kendo-dropdownlist\n        [data]=\"typeOptions()\"\n        [value]=\"selectedType()\"\n        textField=\"label\"\n        valueField=\"value\"\n        [valuePrimitive]=\"true\"\n        (valueChange)=\"onTypeChange($event)\">\n      </kendo-dropdownlist>\n    </kendo-label>\n  </div>\n\n  <!-- Year Selection (for year, quarter, month types) -->\n  @if (isType('year') || isType('quarter') || isType('month')) {\n    <div class=\"picker-field year-field\">\n      <kendo-label [text]=\"mergedLabels().year || 'Year'\">\n        <kendo-dropdownlist\n          [data]=\"yearOptions()\"\n          [value]=\"selectedYear()\"\n          textField=\"label\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          (valueChange)=\"onYearChange($event)\">\n        </kendo-dropdownlist>\n      </kendo-label>\n    </div>\n  }\n\n  <!-- Quarter Selection -->\n  @if (isType('quarter')) {\n    <div class=\"picker-field quarter-field\">\n      <kendo-label [text]=\"mergedLabels().quarter || 'Quarter'\">\n        <kendo-dropdownlist\n          [data]=\"quarterOptions()\"\n          [value]=\"selectedQuarter()\"\n          textField=\"label\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          (valueChange)=\"onQuarterChange($event)\">\n        </kendo-dropdownlist>\n      </kendo-label>\n    </div>\n  }\n\n  <!-- Month Selection -->\n  @if (isType('month')) {\n    <div class=\"picker-field month-field\">\n      <kendo-label [text]=\"mergedLabels().month || 'Month'\">\n        <kendo-dropdownlist\n          [data]=\"monthOptions()\"\n          [value]=\"selectedMonth()\"\n          textField=\"label\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          (valueChange)=\"onMonthChange($event)\">\n        </kendo-dropdownlist>\n      </kendo-label>\n    </div>\n  }\n\n  <!-- Relative Time Selection -->\n  @if (isType('relative')) {\n    <div class=\"picker-field relative-value-field\">\n      <kendo-label [text]=\"mergedLabels().relativeValue || 'Last'\">\n        <kendo-numerictextbox\n          [value]=\"relativeValue()\"\n          [min]=\"1\"\n          [max]=\"9999\"\n          [decimals]=\"0\"\n          [format]=\"'n0'\"\n          [spinners]=\"true\"\n          (valueChange)=\"onRelativeValueChange($event)\">\n        </kendo-numerictextbox>\n      </kendo-label>\n    </div>\n\n    <div class=\"picker-field relative-unit-field\">\n      <kendo-label [text]=\"mergedLabels().relativeUnit || 'Unit'\">\n        <kendo-dropdownlist\n          [data]=\"relativeUnitOptions()\"\n          [value]=\"relativeUnit()\"\n          textField=\"label\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          (valueChange)=\"onRelativeUnitChange($event)\">\n        </kendo-dropdownlist>\n      </kendo-label>\n    </div>\n  }\n\n  <!-- Custom Date Range -->\n  @if (isType('custom')) {\n    <div class=\"picker-field custom-from-field\">\n      <kendo-label [text]=\"mergedLabels().customFrom || 'From'\">\n        @if (showTime()) {\n          <kendo-datetimepicker\n            [value]=\"customFrom()\"\n            [min]=\"minDate()\"\n            [max]=\"customTo()\"\n            (valueChange)=\"onCustomFromChange($event)\">\n          </kendo-datetimepicker>\n        } @else {\n          <kendo-datepicker\n            [value]=\"customFrom()\"\n            [min]=\"minDate()\"\n            [max]=\"customTo()\"\n            (valueChange)=\"onCustomFromChange($event)\">\n          </kendo-datepicker>\n        }\n      </kendo-label>\n    </div>\n\n    <div class=\"picker-field custom-to-field\">\n      <kendo-label [text]=\"mergedLabels().customTo || 'To'\">\n        @if (showTime()) {\n          <kendo-datetimepicker\n            [value]=\"customTo()\"\n            [min]=\"customFrom()\"\n            [max]=\"maxDate()\"\n            (valueChange)=\"onCustomToChange($event)\">\n          </kendo-datetimepicker>\n        } @else {\n          <kendo-datepicker\n            [value]=\"customTo()\"\n            [min]=\"customFrom()\"\n            [max]=\"maxDate()\"\n            (valueChange)=\"onCustomToChange($event)\">\n          </kendo-datepicker>\n        }\n      </kendo-label>\n    </div>\n  }\n</div>\n", styles: [".time-range-picker{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.time-range-picker .picker-field{display:flex;flex-direction:column}.time-range-picker .picker-field kendo-label{display:flex;flex-direction:column;gap:.25rem}.time-range-picker .type-field{min-width:120px}.time-range-picker .year-field{min-width:100px}.time-range-picker .quarter-field{min-width:140px}.time-range-picker .month-field{min-width:130px}.time-range-picker .relative-value-field{min-width:80px}.time-range-picker .relative-value-field kendo-numerictextbox{width:100%}.time-range-picker .relative-unit-field{min-width:100px}.time-range-picker .custom-from-field,.time-range-picker .custom-to-field{min-width:150px}.time-range-picker .custom-from-field kendo-datepicker,.time-range-picker .custom-from-field kendo-datetimepicker,.time-range-picker .custom-to-field kendo-datepicker,.time-range-picker .custom-to-field kendo-datetimepicker{width:100%}@media(max-width:768px){.time-range-picker{gap:.75rem}.time-range-picker .picker-field{flex:1 1 calc(50% - .5rem);min-width:0}.time-range-picker .type-field{flex:1 1 100%}}@media(max-width:480px){.time-range-picker{flex-direction:column;gap:.5rem}.time-range-picker .picker-field{flex:1 1 100%;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$1.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "ngmodule", type: DateTimePickerModule }, { kind: "component", type: i2$1.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "adaptiveTitle", "adaptiveSubtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { kind: "ngmodule", type: NumericTextBoxModule }, { kind: "component", type: i5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i6.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TimeRangePickerComponent, decorators: [{
             type: Component,
@@ -4737,7 +4790,7 @@ class CronBuilderComponent {
                 useExisting: forwardRef(() => CronBuilderComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"cron-builder\" [class.disabled]=\"disabled()\">\n  <!-- Expression Preview Section -->\n  <div class=\"expression-section\">\n    <div class=\"expression-display\">\n      <div class=\"expression-label\">Cron Expression</div>\n      <div class=\"expression-value-row\">\n        <code class=\"expression-value\" [class.invalid]=\"!validationResult().isValid\">\n          {{ expression() }}\n        </code>\n        @if (mergedConfig().showCopyButton) {\n          <button\n            kendoButton\n            [svgIcon]=\"copiedRecently() ? checkIcon : copyIcon\"\n            [title]=\"copiedRecently() ? 'Copied!' : 'Copy to clipboard'\"\n            fillMode=\"flat\"\n            class=\"copy-button\"\n            [class.copied]=\"copiedRecently()\"\n            (click)=\"onCopyExpression()\"\n            [disabled]=\"disabled()\">\n          </button>\n        }\n      </div>\n      @if (!validationResult().isValid) {\n        <div class=\"validation-error\">\n          <kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon>\n          {{ validationResult().error }}\n        </div>\n      }\n    </div>\n\n    @if (mergedConfig().showHumanReadable && validationResult().isValid) {\n      <div class=\"human-readable\">\n        <kendo-svg-icon [icon]=\"clockIcon\" size=\"small\"></kendo-svg-icon>\n        <span>{{ humanReadable() }}</span>\n      </div>\n    }\n  </div>\n\n  <!-- Preset Buttons -->\n  @if (mergedConfig().showPresets) {\n    <div class=\"presets-section\">\n      <div class=\"presets-label\">Quick Select</div>\n      <div class=\"presets-grid\">\n        @for (preset of presetsByCategory().frequent; track preset.id) {\n          <button\n            kendoButton\n            size=\"small\"\n            fillMode=\"outline\"\n            class=\"preset-button\"\n            [title]=\"preset.description\"\n            [disabled]=\"disabled()\"\n            (click)=\"onPresetSelect(preset)\">\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Schedule Type Tabs -->\n  <kendo-tabstrip\n    [animate]=\"false\"\n    [tabAlignment]=\"'start'\"\n    (tabSelect)=\"onTabSelect($event.index)\">\n\n    <!-- Seconds Tab -->\n    <kendo-tabstrip-tab [title]=\"'Seconds'\" [selected]=\"selectedTabIndex() === 0\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"secondIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"secondInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onSecondIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>*/{{ secondInterval() }} * * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Minutes Tab -->\n    <kendo-tabstrip-tab [title]=\"'Minutes'\" [selected]=\"selectedTabIndex() === 1\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"minuteInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onMinuteIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>0 */{{ minuteInterval() }} * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Hourly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Hourly'\" [selected]=\"selectedTabIndex() === 2\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"form-row\">\n            <kendo-label text=\"At minute\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourSecondChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"time-label\">(mm:ss)</span>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Daily Tab -->\n    <kendo-tabstrip-tab [title]=\"'Daily'\" [selected]=\"selectedTabIndex() === 3\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <kendo-label text=\"On\"></kendo-label>\n            <div class=\"mode-buttons\">\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'every'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('every')\">\n                Every day\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'weekdays'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekdays')\">\n                Weekdays\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'weekends'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekends')\">\n                Weekends\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('specific')\">\n                Specific days\n              </button>\n            </div>\n          </div>\n\n          @if (dailyMode() === 'specific') {\n            <div class=\"form-row days-row\">\n              <div class=\"day-buttons\">\n                @for (day of weekdayAbbreviations; track day.value) {\n                  <button\n                    kendoButton\n                    [selected]=\"isDaySelected(day.value)\"\n                    [disabled]=\"disabled()\"\n                    class=\"day-button\"\n                    (click)=\"onDayToggle(day.value)\">\n                    {{ day.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Weekly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Weekly'\" [selected]=\"selectedTabIndex() === 4\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row\">\n            <kendo-label text=\"On days\"></kendo-label>\n            <div class=\"day-buttons\">\n              @for (day of weekdayAbbreviations; track day.value) {\n                <button\n                  kendoButton\n                  [selected]=\"isDaySelected(day.value)\"\n                  [disabled]=\"disabled()\"\n                  class=\"day-button\"\n                  (click)=\"onDayToggle(day.value)\">\n                  {{ day.label }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Monthly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Monthly'\" [selected]=\"selectedTabIndex() === 5\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <div class=\"mode-buttons\">\n              <button\n                kendoButton\n                [selected]=\"monthlyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('specific')\">\n                Specific day\n              </button>\n              <button\n                kendoButton\n                [selected]=\"monthlyMode() === 'relative'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('relative')\">\n                Relative day\n              </button>\n            </div>\n          </div>\n\n          @if (monthlyMode() === 'specific') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On day\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"dayOfMonthOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"dayOfMonth()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onDayOfMonthChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n\n          @if (monthlyMode() === 'relative') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On the\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"relativeWeekOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeWeek()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeWeekChange($event)\">\n              </kendo-dropdownlist>\n              <kendo-dropdownlist\n                [data]=\"weekdayOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeDay()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeDayChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Custom/Advanced Tab -->\n    @if (mergedConfig().allowCustom) {\n      <kendo-tabstrip-tab [title]=\"'Custom'\" [selected]=\"selectedTabIndex() === 6\">\n        <ng-template kendoTabContent>\n          <div class=\"tab-content custom-tab\">\n            <div class=\"custom-fields\">\n              <div class=\"custom-field\">\n                <kendo-label text=\"Second\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customSecond()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('second', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Minute\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMinute()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('minute', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Hour\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customHour()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('hour', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-23, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Day\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfMonth', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-31, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Month\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('month', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-12, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Weekday\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfWeek()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfWeek', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-6 (Sun-Sat)</span>\n              </div>\n            </div>\n\n            <div class=\"syntax-reference\">\n              <div class=\"reference-title\">Syntax Reference</div>\n              <div class=\"reference-items\">\n                <span><code>*</code> any</span>\n                <span><code>*/N</code> every N</span>\n                <span><code>N-M</code> range</span>\n                <span><code>N,M</code> list</span>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n\n  <!-- Next Executions Section -->\n  @if (mergedConfig().showNextExecutions && validationResult().isValid && nextExecutions().length > 0) {\n    <div class=\"next-executions-section\">\n      <div class=\"next-executions-label\">Next Executions</div>\n      <ul class=\"next-executions-list\">\n        @for (execution of nextExecutions(); track $index) {\n          <li>{{ formatNextExecution(execution) }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--cron-bg: var(--mm-cron-bg, #ffffff);--cron-border: var(--mm-cron-border, #e0e0e0);--cron-border-radius: var(--mm-cron-border-radius, 8px);--cron-text: var(--mm-cron-text, #333333);--cron-text-secondary: var(--mm-cron-text-secondary, #666666);--cron-accent: var(--mm-cron-accent, #616161);--cron-accent-hover: var(--mm-cron-accent-hover, #424242);--cron-preview-bg: var(--mm-cron-preview-bg, #f5f5f5);--cron-tab-active-bg: var(--mm-cron-tab-active-bg, #eeeeee);--cron-tab-active-border: var(--mm-cron-tab-active-border, #616161);--cron-error: var(--mm-cron-error, #d32f2f);--cron-success: var(--mm-cron-success, #388e3c);--cron-code-bg: var(--mm-cron-code-bg, #eeeeee);--cron-code-text: var(--mm-cron-code-text, #333333);--cron-shadow: var(--mm-cron-shadow, 0 2px 8px rgba(0, 0, 0, .1));--cron-font-family: var(--mm-cron-font-family, inherit);--cron-font-mono: var(--mm-cron-font-mono, \"Roboto Mono\", \"Consolas\", monospace);display:block;font-family:var(--cron-font-family)}.cron-builder{background:var(--cron-bg);border:1px solid var(--cron-border);border-radius:var(--cron-border-radius);padding:16px;box-shadow:var(--cron-shadow)}.cron-builder.disabled{opacity:.6;pointer-events:none}.expression-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--cron-border)}.expression-display .expression-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--cron-text-secondary);margin-bottom:8px}.expression-display .expression-value-row{display:flex;align-items:center;gap:8px}.expression-display .expression-value{flex:1;font-family:var(--cron-font-mono);font-size:1.1rem;font-weight:500;padding:8px 12px;background:var(--cron-code-bg);color:var(--cron-code-text);border-radius:4px;letter-spacing:1px}.expression-display .expression-value.invalid{color:var(--cron-error);border:1px solid var(--cron-error)}.expression-display .copy-button{flex-shrink:0;transition:all .2s ease}.expression-display .copy-button.copied{color:var(--cron-success)!important}.expression-display .validation-error{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;color:var(--cron-error)}.expression-display .validation-error kendo-svg-icon{flex-shrink:0}.human-readable{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;background:var(--cron-preview-bg);border-radius:4px;font-size:.9rem;color:var(--cron-text)}.human-readable kendo-svg-icon{color:var(--cron-accent);flex-shrink:0}.presets-section{margin-bottom:16px}.presets-section .presets-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--cron-text-secondary);margin-bottom:8px}.presets-section .presets-grid{display:flex;flex-wrap:wrap;gap:8px}.presets-section .preset-button{font-size:.8rem;padding:4px 12px;border-color:var(--cron-border);transition:all .2s ease}.presets-section .preset-button:hover:not(:disabled){border-color:var(--cron-accent);color:var(--cron-accent)}::ng-deep .k-tabstrip{background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{border-bottom:1px solid var(--cron-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item{color:var(--cron-text-secondary);background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items .k-item.k-active{color:var(--cron-accent);background:var(--cron-tab-active-bg);border-bottom:2px solid var(--cron-tab-active-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item:hover:not(.k-active){color:var(--cron-text);background:var(--cron-preview-bg)}::ng-deep .k-tabstrip .k-tabstrip-content{background:transparent;border:none;padding:16px 0}.tab-content{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.form-row kendo-label{min-width:80px;font-weight:500;color:var(--cron-text)}.form-row kendo-dropdownlist{min-width:140px}.form-row .separator{font-size:1.2rem;font-weight:700;color:var(--cron-text-secondary)}.form-row .time-label,.form-row .suffix-text{font-size:.85rem;color:var(--cron-text-secondary)}.mode-row .mode-buttons{display:flex;flex-wrap:wrap;gap:8px}.mode-row .mode-buttons button{transition:all .2s ease}.mode-row .mode-buttons button.k-selected,.mode-row .mode-buttons button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.days-row{padding-left:92px}.day-buttons{display:flex;flex-wrap:wrap;gap:6px}.day-buttons .day-button{min-width:48px;padding:6px 10px;font-size:.85rem;transition:all .2s ease}.day-buttons .day-button.k-selected,.day-buttons .day-button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.preview-text{font-size:.85rem;color:var(--cron-text-secondary)}.preview-text code{font-family:var(--cron-font-mono);background:var(--cron-preview-bg);padding:2px 6px;border-radius:3px}.custom-tab .custom-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}.custom-tab .custom-field{display:flex;flex-direction:column;gap:4px}.custom-tab .custom-field kendo-label{font-size:.8rem;font-weight:600;color:var(--cron-text-secondary)}.custom-tab .custom-field kendo-textbox{font-family:var(--cron-font-mono)}.custom-tab .custom-field .field-hint{font-size:.7rem;color:var(--cron-text-secondary)}.custom-tab .syntax-reference{margin-top:16px;padding:12px;background:var(--cron-preview-bg);border-radius:4px}.custom-tab .syntax-reference .reference-title{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--cron-text-secondary);margin-bottom:8px}.custom-tab .syntax-reference .reference-items{display:flex;flex-wrap:wrap;gap:16px;font-size:.85rem;color:var(--cron-text)}.custom-tab .syntax-reference .reference-items code{font-family:var(--cron-font-mono);background:var(--cron-code-bg);color:var(--cron-code-text);padding:2px 6px;border-radius:3px;margin-right:4px}.next-executions-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--cron-border)}.next-executions-section .next-executions-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--cron-text-secondary);margin-bottom:8px}.next-executions-section .next-executions-list{list-style:none;margin:0;padding:0}.next-executions-section .next-executions-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem;color:var(--cron-text);font-family:var(--cron-font-mono)}.next-executions-section .next-executions-list li:before{content:\"\\25b8\";color:var(--cron-accent);font-size:.75rem}.next-executions-section .next-executions-list li:not(:last-child){border-bottom:1px dashed var(--cron-border)}@media(max-width:600px){.cron-builder{padding:12px}.form-row{flex-direction:column;align-items:flex-start}.form-row kendo-label{min-width:auto}.days-row{padding-left:0}.time-row{flex-direction:row;flex-wrap:wrap}.time-row kendo-label{width:100%;margin-bottom:8px}.custom-tab .custom-fields{grid-template-columns:repeat(2,1fr)}}@media(max-width:400px){.custom-tab .custom-fields{grid-template-columns:1fr}.presets-grid{flex-direction:column}.presets-grid .preset-button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i1$3.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i1$3.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i1$3.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.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: ButtonGroupModule }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i2.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i6.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i3.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
+        ], ngImport: i0, template: "<div class=\"cron-builder\" [class.disabled]=\"disabled()\">\n  <!-- Expression Preview Section -->\n  <div class=\"expression-section\">\n    <div class=\"expression-display\">\n      <div class=\"expression-label\">Cron Expression</div>\n      <div class=\"expression-value-row\">\n        <code class=\"expression-value\" [class.invalid]=\"!validationResult().isValid\">\n          {{ expression() }}\n        </code>\n        @if (mergedConfig().showCopyButton) {\n          <button\n            kendoButton\n            [svgIcon]=\"copiedRecently() ? checkIcon : copyIcon\"\n            [title]=\"copiedRecently() ? 'Copied!' : 'Copy to clipboard'\"\n            fillMode=\"flat\"\n            class=\"copy-button\"\n            [class.copied]=\"copiedRecently()\"\n            (click)=\"onCopyExpression()\"\n            [disabled]=\"disabled()\">\n          </button>\n        }\n      </div>\n      @if (!validationResult().isValid) {\n        <div class=\"validation-error\">\n          <kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon>\n          {{ validationResult().error }}\n        </div>\n      }\n    </div>\n\n    @if (mergedConfig().showHumanReadable && validationResult().isValid) {\n      <div class=\"human-readable\">\n        <kendo-svg-icon [icon]=\"clockIcon\" size=\"small\"></kendo-svg-icon>\n        <span>{{ humanReadable() }}</span>\n      </div>\n    }\n  </div>\n\n  <!-- Preset Buttons -->\n  @if (mergedConfig().showPresets) {\n    <div class=\"presets-section\">\n      <div class=\"presets-label\">Quick Select</div>\n      <div class=\"presets-grid\">\n        @for (preset of presetsByCategory().frequent; track preset.id) {\n          <button\n            kendoButton\n            size=\"small\"\n            fillMode=\"outline\"\n            class=\"preset-button\"\n            [title]=\"preset.description\"\n            [disabled]=\"disabled()\"\n            (click)=\"onPresetSelect(preset)\">\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Schedule Type Tabs -->\n  <kendo-tabstrip\n    [animate]=\"false\"\n    [tabAlignment]=\"'start'\"\n    (tabSelect)=\"onTabSelect($event.index)\">\n\n    <!-- Seconds Tab -->\n    <kendo-tabstrip-tab [title]=\"'Seconds'\" [selected]=\"selectedTabIndex() === 0\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"secondIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"secondInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onSecondIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>*/{{ secondInterval() }} * * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Minutes Tab -->\n    <kendo-tabstrip-tab [title]=\"'Minutes'\" [selected]=\"selectedTabIndex() === 1\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"minuteInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onMinuteIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>0 */{{ minuteInterval() }} * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Hourly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Hourly'\" [selected]=\"selectedTabIndex() === 2\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"form-row\">\n            <kendo-label text=\"At minute\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourSecondChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"time-label\">(mm:ss)</span>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Daily Tab -->\n    <kendo-tabstrip-tab [title]=\"'Daily'\" [selected]=\"selectedTabIndex() === 3\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <kendo-label text=\"On\"></kendo-label>\n            <div class=\"mode-buttons\">\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'every'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('every')\">\n                Every day\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'weekdays'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekdays')\">\n                Weekdays\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'weekends'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekends')\">\n                Weekends\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('specific')\">\n                Specific days\n              </button>\n            </div>\n          </div>\n\n          @if (dailyMode() === 'specific') {\n            <div class=\"form-row days-row\">\n              <div class=\"day-buttons\">\n                @for (day of weekdayAbbreviations; track day.value) {\n                  <button\n                    kendoButton\n                    [selected]=\"isDaySelected(day.value)\"\n                    [disabled]=\"disabled()\"\n                    class=\"day-button\"\n                    (click)=\"onDayToggle(day.value)\">\n                    {{ day.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Weekly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Weekly'\" [selected]=\"selectedTabIndex() === 4\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row\">\n            <kendo-label text=\"On days\"></kendo-label>\n            <div class=\"day-buttons\">\n              @for (day of weekdayAbbreviations; track day.value) {\n                <button\n                  kendoButton\n                  [selected]=\"isDaySelected(day.value)\"\n                  [disabled]=\"disabled()\"\n                  class=\"day-button\"\n                  (click)=\"onDayToggle(day.value)\">\n                  {{ day.label }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Monthly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Monthly'\" [selected]=\"selectedTabIndex() === 5\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <div class=\"mode-buttons\">\n              <button\n                kendoButton\n                [selected]=\"monthlyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('specific')\">\n                Specific day\n              </button>\n              <button\n                kendoButton\n                [selected]=\"monthlyMode() === 'relative'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('relative')\">\n                Relative day\n              </button>\n            </div>\n          </div>\n\n          @if (monthlyMode() === 'specific') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On day\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"dayOfMonthOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"dayOfMonth()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onDayOfMonthChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n\n          @if (monthlyMode() === 'relative') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On the\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"relativeWeekOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeWeek()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeWeekChange($event)\">\n              </kendo-dropdownlist>\n              <kendo-dropdownlist\n                [data]=\"weekdayOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeDay()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeDayChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Custom/Advanced Tab -->\n    @if (mergedConfig().allowCustom) {\n      <kendo-tabstrip-tab [title]=\"'Custom'\" [selected]=\"selectedTabIndex() === 6\">\n        <ng-template kendoTabContent>\n          <div class=\"tab-content custom-tab\">\n            <div class=\"custom-fields\">\n              <div class=\"custom-field\">\n                <kendo-label text=\"Second\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customSecond()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('second', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Minute\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMinute()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('minute', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Hour\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customHour()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('hour', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-23, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Day\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfMonth', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-31, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Month\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('month', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-12, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Weekday\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfWeek()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfWeek', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-6 (Sun-Sat)</span>\n              </div>\n            </div>\n\n            <div class=\"syntax-reference\">\n              <div class=\"reference-title\">Syntax Reference</div>\n              <div class=\"reference-items\">\n                <span><code>*</code> any</span>\n                <span><code>*/N</code> every N</span>\n                <span><code>N-M</code> range</span>\n                <span><code>N,M</code> list</span>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n\n  <!-- Next Executions Section -->\n  @if (mergedConfig().showNextExecutions && validationResult().isValid && nextExecutions().length > 0) {\n    <div class=\"next-executions-section\">\n      <div class=\"next-executions-label\">Next Executions</div>\n      <ul class=\"next-executions-list\">\n        @for (execution of nextExecutions(); track $index) {\n          <li>{{ formatNextExecution(execution) }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--cron-bg: var(--mm-cron-bg, #ffffff);--cron-border: var(--mm-cron-border, #e0e0e0);--cron-border-radius: var(--mm-cron-border-radius, 8px);--cron-text: var(--mm-cron-text, #333333);--cron-text-secondary: var(--mm-cron-text-secondary, #666666);--cron-accent: var(--mm-cron-accent, #616161);--cron-accent-hover: var(--mm-cron-accent-hover, #424242);--cron-preview-bg: var(--mm-cron-preview-bg, #f5f5f5);--cron-tab-active-bg: var(--mm-cron-tab-active-bg, #eeeeee);--cron-tab-active-border: var(--mm-cron-tab-active-border, #616161);--cron-error: var(--mm-cron-error, #d32f2f);--cron-success: var(--mm-cron-success, #388e3c);--cron-code-bg: var(--mm-cron-code-bg, #eeeeee);--cron-code-text: var(--mm-cron-code-text, #333333);--cron-shadow: var(--mm-cron-shadow, 0 2px 8px rgba(0, 0, 0, .1));--cron-font-family: var(--mm-cron-font-family, inherit);--cron-font-mono: var(--mm-cron-font-mono, \"Roboto Mono\", \"Consolas\", monospace);display:block;font-family:var(--cron-font-family)}.cron-builder{background:var(--cron-bg);border:1px solid var(--cron-border);border-radius:var(--cron-border-radius);padding:16px;box-shadow:var(--cron-shadow)}.cron-builder.disabled{opacity:.6;pointer-events:none}.expression-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--cron-border)}.expression-display .expression-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--cron-text-secondary);margin-bottom:8px}.expression-display .expression-value-row{display:flex;align-items:center;gap:8px}.expression-display .expression-value{flex:1;font-family:var(--cron-font-mono);font-size:1.1rem;font-weight:500;padding:8px 12px;background:var(--cron-code-bg);color:var(--cron-code-text);border-radius:4px;letter-spacing:1px}.expression-display .expression-value.invalid{color:var(--cron-error);border:1px solid var(--cron-error)}.expression-display .copy-button{flex-shrink:0;transition:all .2s ease}.expression-display .copy-button.copied{color:var(--cron-success)!important}.expression-display .validation-error{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;color:var(--cron-error)}.expression-display .validation-error kendo-svg-icon{flex-shrink:0}.human-readable{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;background:var(--cron-preview-bg);border-radius:4px;font-size:.9rem;color:var(--cron-text)}.human-readable kendo-svg-icon{color:var(--cron-accent);flex-shrink:0}.presets-section{margin-bottom:16px}.presets-section .presets-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--cron-text-secondary);margin-bottom:8px}.presets-section .presets-grid{display:flex;flex-wrap:wrap;gap:8px}.presets-section .preset-button{font-size:.8rem;padding:4px 12px;border-color:var(--cron-border);transition:all .2s ease}.presets-section .preset-button:hover:not(:disabled){border-color:var(--cron-accent);color:var(--cron-accent)}::ng-deep .k-tabstrip{background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{border-bottom:1px solid var(--cron-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item{color:var(--cron-text-secondary);background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items .k-item.k-active{color:var(--cron-accent);background:var(--cron-tab-active-bg);border-bottom:2px solid var(--cron-tab-active-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item:hover:not(.k-active){color:var(--cron-text);background:var(--cron-preview-bg)}::ng-deep .k-tabstrip .k-tabstrip-content{background:transparent;border:none;padding:16px 0}.tab-content{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.form-row kendo-label{min-width:80px;font-weight:500;color:var(--cron-text)}.form-row kendo-dropdownlist{min-width:140px}.form-row .separator{font-size:1.2rem;font-weight:700;color:var(--cron-text-secondary)}.form-row .time-label,.form-row .suffix-text{font-size:.85rem;color:var(--cron-text-secondary)}.mode-row .mode-buttons{display:flex;flex-wrap:wrap;gap:8px}.mode-row .mode-buttons button{transition:all .2s ease}.mode-row .mode-buttons button.k-selected,.mode-row .mode-buttons button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.days-row{padding-left:92px}.day-buttons{display:flex;flex-wrap:wrap;gap:6px}.day-buttons .day-button{min-width:48px;padding:6px 10px;font-size:.85rem;transition:all .2s ease}.day-buttons .day-button.k-selected,.day-buttons .day-button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.preview-text{font-size:.85rem;color:var(--cron-text-secondary)}.preview-text code{font-family:var(--cron-font-mono);background:var(--cron-preview-bg);padding:2px 6px;border-radius:3px}.custom-tab .custom-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}.custom-tab .custom-field{display:flex;flex-direction:column;gap:4px}.custom-tab .custom-field kendo-label{font-size:.8rem;font-weight:600;color:var(--cron-text-secondary)}.custom-tab .custom-field kendo-textbox{font-family:var(--cron-font-mono)}.custom-tab .custom-field .field-hint{font-size:.7rem;color:var(--cron-text-secondary)}.custom-tab .syntax-reference{margin-top:16px;padding:12px;background:var(--cron-preview-bg);border-radius:4px}.custom-tab .syntax-reference .reference-title{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--cron-text-secondary);margin-bottom:8px}.custom-tab .syntax-reference .reference-items{display:flex;flex-wrap:wrap;gap:16px;font-size:.85rem;color:var(--cron-text)}.custom-tab .syntax-reference .reference-items code{font-family:var(--cron-font-mono);background:var(--cron-code-bg);color:var(--cron-code-text);padding:2px 6px;border-radius:3px;margin-right:4px}.next-executions-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--cron-border)}.next-executions-section .next-executions-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--cron-text-secondary);margin-bottom:8px}.next-executions-section .next-executions-list{list-style:none;margin:0;padding:0}.next-executions-section .next-executions-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem;color:var(--cron-text);font-family:var(--cron-font-mono)}.next-executions-section .next-executions-list li:before{content:\"\\25b8\";color:var(--cron-accent);font-size:.75rem}.next-executions-section .next-executions-list li:not(:last-child){border-bottom:1px dashed var(--cron-border)}@media(max-width:600px){.cron-builder{padding:12px}.form-row{flex-direction:column;align-items:flex-start}.form-row kendo-label{min-width:auto}.days-row{padding-left:0}.time-row{flex-direction:row;flex-wrap:wrap}.time-row kendo-label{width:100%;margin-bottom:8px}.custom-tab .custom-fields{grid-template-columns:repeat(2,1fr)}}@media(max-width:400px){.custom-tab .custom-fields{grid-template-columns:1fr}.presets-grid{flex-direction:column}.presets-grid .preset-button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i1$3.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i1$3.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i1$3.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.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: ButtonGroupModule }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i6.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i3.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CronBuilderComponent, decorators: [{
             type: Component,
@@ -4905,5 +4958,5 @@ function provideMmSharedUi() {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFormComponent, BaseTreeDetailComponent, BytesToSizePipe, CRON_PRESETS, ConfirmationService, CopyableTextComponent, CronBuilderComponent, CronHumanizerService, CronParserService, DEFAULT_CRON_BUILDER_CONFIG, DEFAULT_RESPONSIVE_COLSPAN, DEFAULT_TIME_RANGE_LABELS, DataSourceBase, DataSourceTyped, EntitySelectDialogComponent, EntitySelectDialogService, EntitySelectInputComponent, FetchResultBase, FetchResultTyped, FileUploadService, HAS_UNSAVED_CHANGES, HOUR_INTERVALS, HierarchyDataSource, HierarchyDataSourceBase, ImportStrategyDialogComponent, ImportStrategyDialogResult, ImportStrategyDialogService, ImportStrategyDto, InputDialogComponent, InputService, ListViewComponent, MINUTE_INTERVALS, MessageDetailsDialogComponent, MessageDetailsDialogService, MessageListenerService, MmListViewDataBindingDirective, NotificationDisplayService, PascalCasePipe, ProgressValue, ProgressWindowComponent, ProgressWindowService, RELATIVE_WEEKS, SECOND_INTERVALS, SaveAsDialogComponent, SaveAsDialogService, TimeRangePickerComponent, TimeRangeUtils, TreeComponent, UnsavedChangesDirective, UnsavedChangesGuard, UploadFileDialogComponent, WEEKDAYS, WEEKDAY_ABBREVIATIONS, generateDayOfMonthOptions, generateHourOptions, generateMinuteOptions, provideMmSharedUi };
+export { BaseFormComponent, BaseTreeDetailComponent, BytesToSizePipe, CRON_PRESETS, ConfirmationService, CopyableTextComponent, CronBuilderComponent, CronHumanizerService, CronParserService, DEFAULT_CRON_BUILDER_CONFIG, DEFAULT_LIST_VIEW_MESSAGES, DEFAULT_RESPONSIVE_COLSPAN, DEFAULT_TIME_RANGE_LABELS, DataSourceBase, DataSourceTyped, EntitySelectDialogComponent, EntitySelectDialogService, EntitySelectInputComponent, FetchResultBase, FetchResultTyped, FileUploadService, HAS_UNSAVED_CHANGES, HOUR_INTERVALS, HierarchyDataSource, HierarchyDataSourceBase, ImportStrategyDialogComponent, ImportStrategyDialogResult, ImportStrategyDialogService, ImportStrategyDto, InputDialogComponent, InputService, ListViewComponent, MINUTE_INTERVALS, MessageDetailsDialogComponent, MessageDetailsDialogService, MessageListenerService, MmListViewDataBindingDirective, NotificationDisplayService, PascalCasePipe, ProgressValue, ProgressWindowComponent, ProgressWindowService, RELATIVE_WEEKS, SECOND_INTERVALS, SaveAsDialogComponent, SaveAsDialogService, TimeRangePickerComponent, TimeRangeUtils, TreeComponent, UnsavedChangesDirective, UnsavedChangesGuard, UploadFileDialogComponent, WEEKDAYS, WEEKDAY_ABBREVIATIONS, generateDayOfMonthOptions, generateHourOptions, generateMinuteOptions, provideMmSharedUi };
 //# sourceMappingURL=meshmakers-shared-ui.mjs.map