@meshmakers/shared-ui 3.4.1480 → 3.4.1490

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,13 +1,13 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, signal, ViewChild, Input, ChangeDetectionStrategy, Component, Injectable, NgZone, TemplateRef, Directive, Pipe, EventEmitter, ChangeDetectorRef, ElementRef, Output, HostBinding, ContentChild, InjectionToken, HostListener, forwardRef, computed, effect, makeEnvironmentProviders } from '@angular/core';
3
- import * as i3$2 from '@progress/kendo-angular-dialog';
2
+ import { inject, signal, ViewChild, Input, ChangeDetectionStrategy, Component, Injectable, ElementRef, InjectionToken, computed, NgZone, TemplateRef, Directive, Pipe, EventEmitter, ChangeDetectorRef, input, booleanAttribute, output, ViewEncapsulation, Output, HostBinding, ContentChild, HostListener, forwardRef, effect, numberAttribute, makeEnvironmentProviders } from '@angular/core';
3
+ import * as i3$1 from '@progress/kendo-angular-dialog';
4
4
  import { DialogContentBase, DialogRef, DialogActionsComponent, DialogService, WindowRef, WindowService, WindowModule, WindowCloseResult, DialogModule } from '@progress/kendo-angular-dialog';
5
5
  import { NotificationService } from '@progress/kendo-angular-notification';
6
- import * as i4 from '@progress/kendo-angular-buttons';
7
- import { ButtonComponent, ButtonModule, DropDownButtonComponent, SplitButtonComponent, ButtonsModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
8
- import * as i1$2 from '@angular/common';
6
+ import * as i1$1 from '@progress/kendo-angular-buttons';
7
+ import { ButtonComponent, ButtonModule, DropDownButtonComponent, SplitButtonComponent, ButtonsModule, ButtonGroupModule, DropDownButtonModule } from '@progress/kendo-angular-buttons';
8
+ import * as i1$3 from '@angular/common';
9
9
  import { NgIf, CommonModule, NgComponentOutlet, NgTemplateOutlet, DatePipe, DecimalPipe, AsyncPipe, NgClass } from '@angular/common';
10
- import * as i3 from '@progress/kendo-angular-icons';
10
+ import * as i2 from '@progress/kendo-angular-icons';
11
11
  import { SVGIconComponent, SVGIconModule, IconsModule } from '@progress/kendo-angular-icons';
12
12
  import { firstValueFrom, fromEvent, BehaviorSubject, of, Subject, asyncScheduler, from, Subscription } from 'rxjs';
13
13
  import * as i1 from '@angular/forms';
@@ -17,26 +17,26 @@ import { LabelComponent, LabelModule } from '@progress/kendo-angular-label';
17
17
  import * as i5 from '@progress/kendo-angular-inputs';
18
18
  import { TextBoxComponent, CheckBoxComponent, SeparatorComponent, NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
19
19
  import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
20
- import { copyIcon, xIcon, filterIcon, filePdfIcon, fileExcelIcon, arrowRotateCwIcon, filterClearIcon, moreVerticalIcon, slidersIcon, saveIcon, cancelIcon, searchIcon, clockIcon, checkIcon } from '@progress/kendo-svg-icons';
21
- import { Router, NavigationEnd } from '@angular/router';
20
+ import { copyIcon, xIcon, undoIcon, fileReportIcon, downloadIcon, importIcon, exportIcon, stopIcon, playIcon, xCircleIcon, uploadIcon, arrowRotateCwIcon, fileDataIcon, eraserIcon, trashIcon, hyperlinkOpenIcon, eyeIcon, pencilIcon, plusIcon, filterIcon, filePdfIcon, fileExcelIcon, filterClearIcon, moreVerticalIcon, slidersIcon, saveIcon, cancelIcon, searchIcon, clockIcon, checkIcon } from '@progress/kendo-svg-icons';
21
+ import { Router, NavigationEnd, RouterLink, ActivatedRoute } from '@angular/router';
22
22
  import { filter, debounceTime, distinctUntilChanged, takeUntil, observeOn, tap, switchMap, catchError } from 'rxjs/operators';
23
23
  import { MessageService, CommandBaseService, CommandSettingsService, provideMmSharedServices } from '@meshmakers/shared-services';
24
- import * as i1$1 from '@progress/kendo-angular-grid';
24
+ import * as i1$2 from '@progress/kendo-angular-grid';
25
25
  import { DataBindingDirective, GridComponent, ColumnComponent, ToolbarTemplateDirective, GridSpacerComponent, ExcelModule, PDFModule, CommandColumnComponent, CellTemplateDirective, CheckboxColumnComponent, CustomMessagesComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent } from '@progress/kendo-angular-grid';
26
- import * as i3$1 from '@progress/kendo-angular-dropdowns';
26
+ import * as i3 from '@progress/kendo-angular-dropdowns';
27
27
  import { DropDownListComponent, ValueTemplateDirective, ItemTemplateDirective, AutoCompleteModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
28
28
  import { isCompositeFilterDescriptor } from '@progress/kendo-data-query';
29
29
  import { ContextMenuComponent, HierarchyBindingDirective } from '@progress/kendo-angular-menu';
30
30
  import cronstrue from 'cronstrue';
31
31
  import 'cronstrue/locales/de.js';
32
32
  import 'cronstrue/locales/en.js';
33
- import * as i2 from '@progress/kendo-angular-excel-export';
33
+ import * as i2$1 from '@progress/kendo-angular-excel-export';
34
34
  import { DropPosition, ExpandDirective, TreeViewComponent, NodeTemplateDirective, DragAndDropDirective } from '@progress/kendo-angular-treeview';
35
- import * as i1$3 from '@progress/kendo-angular-layout';
35
+ import * as i1$4 from '@progress/kendo-angular-layout';
36
36
  import { SplitterComponent, SplitterPaneComponent, TabStripModule } from '@progress/kendo-angular-layout';
37
37
  import * as i7 from '@progress/kendo-angular-indicators';
38
38
  import { LoaderModule, IndicatorsModule } from '@progress/kendo-angular-indicators';
39
- import * as i2$1 from '@progress/kendo-angular-dateinputs';
39
+ import * as i2$2 from '@progress/kendo-angular-dateinputs';
40
40
  import { DatePickerModule, DateTimePickerModule } from '@progress/kendo-angular-dateinputs';
41
41
  import { CronExpressionParser } from 'cron-parser';
42
42
 
@@ -280,6 +280,20 @@ class ConfirmationWindowComponent extends DialogContentBase {
280
280
  }
281
281
  }
282
282
  }
283
+ host = inject((ElementRef));
284
+ /**
285
+ * Destructive confirmations start with the focus on the dismissing button (AB#5578): Enter must
286
+ * never confirm a delete. Backs up the service's `autoFocusedElement`.
287
+ */
288
+ ngAfterViewInit() {
289
+ super.ngAfterViewInit();
290
+ if (this.data?.danger) {
291
+ setTimeout(() => {
292
+ const root = this.host.nativeElement.closest('.k-dialog') ?? this.host.nativeElement;
293
+ root.querySelector('[data-action="dismiss"], [data-action="cancel"]')?.focus();
294
+ });
295
+ }
296
+ }
283
297
  onButton1() {
284
298
  this.dialogRef.close((new ConfirmationWindowResult(this.button1Result)));
285
299
  }
@@ -290,7 +304,7 @@ class ConfirmationWindowComponent extends DialogContentBase {
290
304
  this.dialogRef.close((new ConfirmationWindowResult(this.button3Result)));
291
305
  }
292
306
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ConfirmationWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
293
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: ConfirmationWindowComponent, isStandalone: true, selector: "mm-confirmation-window", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<div>{{data?.message}}</div>\n<kendo-dialog-actions>\n <button kendoButton (click)=\"onButton1()\" themeColor=\"primary\">{{button1Text}}</button>\n <button kendoButton (click)=\"onButton2()\" *ngIf=\"button2Text\">{{button2Text}}</button>\n <button kendoButton (click)=\"onButton3()\" *ngIf=\"button3Text\">{{button3Text}}</button>\n</kendo-dialog-actions>\n\n", styles: [""], dependencies: [{ kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
307
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: ConfirmationWindowComponent, isStandalone: true, selector: "mm-confirmation-window", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<div>{{data?.message}}</div>\n<!-- Button order (Studio action guideline \u00A72.2, app convention): dismissing buttons first (left),\n the confirming / primary button last (right) - also for destructive confirmations. -->\n<kendo-dialog-actions>\n <button kendoButton (click)=\"onButton3()\" *ngIf=\"button3Text\" data-action=\"cancel\">{{button3Text}}</button>\n <button kendoButton (click)=\"onButton2()\" *ngIf=\"button2Text\" data-action=\"dismiss\">{{button2Text}}</button>\n <button kendoButton (click)=\"onButton1()\" [themeColor]=\"data?.danger ? 'error' : 'primary'\" [attr.data-danger]=\"data?.danger ? 'true' : null\" data-action=\"confirm\">{{button1Text}}</button>\n</kendo-dialog-actions>\n", styles: [""], dependencies: [{ kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
294
308
  }
295
309
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ConfirmationWindowComponent, decorators: [{
296
310
  type: Component,
@@ -298,14 +312,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
298
312
  DialogActionsComponent,
299
313
  NgIf,
300
314
  ButtonComponent
301
- ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div>{{data?.message}}</div>\n<kendo-dialog-actions>\n <button kendoButton (click)=\"onButton1()\" themeColor=\"primary\">{{button1Text}}</button>\n <button kendoButton (click)=\"onButton2()\" *ngIf=\"button2Text\">{{button2Text}}</button>\n <button kendoButton (click)=\"onButton3()\" *ngIf=\"button3Text\">{{button3Text}}</button>\n</kendo-dialog-actions>\n\n" }]
315
+ ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div>{{data?.message}}</div>\n<!-- Button order (Studio action guideline \u00A72.2, app convention): dismissing buttons first (left),\n the confirming / primary button last (right) - also for destructive confirmations. -->\n<kendo-dialog-actions>\n <button kendoButton (click)=\"onButton3()\" *ngIf=\"button3Text\" data-action=\"cancel\">{{button3Text}}</button>\n <button kendoButton (click)=\"onButton2()\" *ngIf=\"button2Text\" data-action=\"dismiss\">{{button2Text}}</button>\n <button kendoButton (click)=\"onButton1()\" [themeColor]=\"data?.danger ? 'error' : 'primary'\" [attr.data-danger]=\"data?.danger ? 'true' : null\" data-action=\"confirm\">{{button1Text}}</button>\n</kendo-dialog-actions>\n" }]
302
316
  }], ctorParameters: () => [], propDecorators: { data: [{
303
317
  type: Input
304
318
  }] } });
305
319
 
320
+ const DEFAULT_DANGER_CONFIRMATION_MESSAGES = {
321
+ cancel: 'Cancel',
322
+ typeToConfirm: 'Type {name} to confirm',
323
+ environmentNotice: '{environment} environment. Check the target before you confirm.',
324
+ target: 'Target',
325
+ };
326
+ /** Word typed when the target name is empty and no confirm text is set either. */
327
+ const DANGER_CONFIRM_FALLBACK_WORD = 'DELETE';
328
+ /**
329
+ * The text the user has to type when `requireTypingName` is set: the target name, or — when the
330
+ * target name is empty/whitespace — the confirm button text, else {@link DANGER_CONFIRM_FALLBACK_WORD}.
331
+ * Never empty, so an empty input can never satisfy the type-to-confirm rule.
332
+ */
333
+ function dangerConfirmTypingToken(options) {
334
+ return (options.targetName ?? '').trim() || (options.confirmText ?? '').trim() || DANGER_CONFIRM_FALLBACK_WORD;
335
+ }
336
+ /**
337
+ * True when `typed` matches the target name (trimmed, case-sensitive). An empty/whitespace target
338
+ * name never matches — use {@link dangerConfirmTypingToken} to get a non-empty word to type.
339
+ */
340
+ function dangerConfirmNameMatches(typed, targetName) {
341
+ const expected = (targetName ?? '').trim();
342
+ return expected.length > 0 && (typed ?? '').trim() === expected;
343
+ }
344
+ /**
345
+ * Optional hook providing the current {@link DangerConfirmEnvironment}; evaluated each time a
346
+ * danger confirmation opens (so it may read signals). Absent = behaviour unchanged.
347
+ *
348
+ * ```ts
349
+ * { provide: DANGER_CONFIRM_ENVIRONMENT, useFactory: () => {
350
+ * const mode = inject(MyEnvironmentService);
351
+ * return () => ({ requireTypingName: mode.isProduction(), environmentLabel: mode.label() });
352
+ * } }
353
+ * ```
354
+ */
355
+ const DANGER_CONFIRM_ENVIRONMENT = new InjectionToken('DANGER_CONFIRM_ENVIRONMENT');
356
+ /** Applies the environment defaults to options that leave `requireTypingName` / `environmentLabel` unset. */
357
+ function applyDangerConfirmEnvironment(options, environment) {
358
+ if (!environment) {
359
+ return options;
360
+ }
361
+ return {
362
+ ...options,
363
+ requireTypingName: options.requireTypingName ?? environment.requireTypingName,
364
+ environmentLabel: options.environmentLabel !== undefined ? options.environmentLabel : (environment.environmentLabel ?? null),
365
+ };
366
+ }
367
+
368
+ let nextId = 0;
369
+ /** Selector of the element that gets the initial focus (never the destructive button). */
370
+ function DANGER_CONFIRM_SAFE_FOCUS(requireTypingName) {
371
+ return requireTypingName ? '[data-type-to-confirm]' : '[data-action="cancel"]';
372
+ }
373
+ /** Result of the danger confirmation dialog: `true` only for the confirming button. */
374
+ class DangerConfirmationResult {
375
+ confirmed;
376
+ constructor(confirmed) {
377
+ this.confirmed = confirmed;
378
+ }
379
+ }
380
+ /**
381
+ * Content of {@link ConfirmationService.showDangerConfirm} (AB#5578): environment notice,
382
+ * target, consequence, optional type-to-confirm input; Cancel left, danger confirm right.
383
+ */
384
+ class DangerConfirmationWindowComponent extends DialogContentBase {
385
+ ref;
386
+ /** Set by the service right after opening. */
387
+ options = signal({ title: '', targetName: '', consequence: '', confirmText: '' }, /* @ts-ignore */
388
+ ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
389
+ typed = signal('', /* @ts-ignore */
390
+ ...(ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []));
391
+ inputId = `mm-danger-confirm-${nextId++}`;
392
+ messages = computed(() => ({
393
+ ...DEFAULT_DANGER_CONFIRMATION_MESSAGES,
394
+ ...(this.options().messages ?? {}),
395
+ }), /* @ts-ignore */
396
+ ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
397
+ /** What has to be typed: the target name, or a non-empty fallback when it is empty. */
398
+ typingToken = computed(() => dangerConfirmTypingToken(this.options()), /* @ts-ignore */
399
+ ...(ngDevMode ? [{ debugName: "typingToken" }] : /* istanbul ignore next */ []));
400
+ typeLabel = computed(() => this.messages().typeToConfirm.replace('{name}', this.typingToken()), /* @ts-ignore */
401
+ ...(ngDevMode ? [{ debugName: "typeLabel" }] : /* istanbul ignore next */ []));
402
+ environmentNotice = computed(() => this.messages().environmentNotice.replace('{environment}', this.options().environmentLabel ?? ''), /* @ts-ignore */
403
+ ...(ngDevMode ? [{ debugName: "environmentNotice" }] : /* istanbul ignore next */ []));
404
+ canConfirm = computed(() => !this.options().requireTypingName || dangerConfirmNameMatches(this.typed(), this.typingToken()), /* @ts-ignore */
405
+ ...(ngDevMode ? [{ debugName: "canConfirm" }] : /* istanbul ignore next */ []));
406
+ constructor() {
407
+ const ref = inject(DialogRef);
408
+ super(ref);
409
+ this.ref = ref;
410
+ }
411
+ host = inject((ElementRef));
412
+ /**
413
+ * Initial focus never on the destructive button (Enter must not delete): the type-to-confirm
414
+ * input when required, else Cancel. The service also passes `autoFocusedElement`; this is the
415
+ * fallback for hosts that render the content themselves.
416
+ */
417
+ ngAfterViewInit() {
418
+ super.ngAfterViewInit();
419
+ setTimeout(() => this.focusSafeElement());
420
+ }
421
+ /** Focuses the type-to-confirm input or Cancel (unless focus already sits on one of them). */
422
+ focusSafeElement() {
423
+ const root = this.host.nativeElement.closest('.k-dialog') ?? this.host.nativeElement;
424
+ const target = root.querySelector(DANGER_CONFIRM_SAFE_FOCUS(!!this.options().requireTypingName));
425
+ target?.focus();
426
+ }
427
+ cancel() {
428
+ this.ref.close(new DangerConfirmationResult(false));
429
+ }
430
+ confirm() {
431
+ if (this.canConfirm()) {
432
+ this.ref.close(new DangerConfirmationResult(true));
433
+ }
434
+ }
435
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DangerConfirmationWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
436
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DangerConfirmationWindowComponent, isStandalone: true, selector: "mm-danger-confirmation-window", usesInheritance: true, ngImport: i0, template: `
437
+ @let o = options();
438
+ <div class="mm-danger-confirmation" data-dialog="danger-confirm">
439
+ @if (o.environmentLabel) {
440
+ <p class="mm-danger-confirmation__environment" role="alert" data-production-warning>
441
+ {{ environmentNotice() }}
442
+ </p>
443
+ }
444
+ <p class="mm-danger-confirmation__target">
445
+ <span class="mm-danger-confirmation__target-label">{{ messages().target }}:</span>
446
+ <strong data-target>{{ o.targetName }}</strong>
447
+ </p>
448
+ <p class="mm-danger-confirmation__consequence" data-consequence>{{ o.consequence }}</p>
449
+ @if (o.requireTypingName) {
450
+ <label class="mm-danger-confirmation__type" [for]="inputId">{{ typeLabel() }}</label>
451
+ <input
452
+ class="k-textbox k-input k-input-md k-rounded-md mm-danger-confirmation__input"
453
+ [id]="inputId"
454
+ type="text"
455
+ autocomplete="off"
456
+ spellcheck="false"
457
+ data-type-to-confirm
458
+ [value]="typed()"
459
+ (input)="typed.set($any($event.target).value)"
460
+ (keydown.enter)="canConfirm() && confirm()"
461
+ />
462
+ }
463
+ </div>
464
+ <kendo-dialog-actions>
465
+ <button kendoButton data-action="cancel" (click)="cancel()">{{ o.cancelText ?? messages().cancel }}</button>
466
+ <button kendoButton themeColor="error" data-action="confirm" data-danger="true"
467
+ [disabled]="!canConfirm()" (click)="confirm()">{{ o.confirmText }}</button>
468
+ </kendo-dialog-actions>
469
+ `, isInline: true, styles: [".mm-danger-confirmation p{margin:0 0 var(--theme-space-3, 12px)}.mm-danger-confirmation__environment{padding:var(--theme-space-2, 8px) var(--theme-space-3, 12px);border-left:3px solid var(--theme-status-error, #c0385f);border-radius:var(--theme-radius-sm, 4px);background:var(--theme-status-error-subtle, rgba(192, 56, 95, .08));font-weight:600}.mm-danger-confirmation__target-label{color:var(--theme-text-muted, #75829a);margin-right:var(--theme-space-1, 4px)}.mm-danger-confirmation__type{display:block;margin-bottom:var(--theme-space-1, 4px)}.mm-danger-confirmation__input{width:100%}\n"], dependencies: [{ kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
470
+ }
471
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DangerConfirmationWindowComponent, decorators: [{
472
+ type: Component,
473
+ args: [{ selector: 'mm-danger-confirmation-window', standalone: true, imports: [DialogActionsComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
474
+ @let o = options();
475
+ <div class="mm-danger-confirmation" data-dialog="danger-confirm">
476
+ @if (o.environmentLabel) {
477
+ <p class="mm-danger-confirmation__environment" role="alert" data-production-warning>
478
+ {{ environmentNotice() }}
479
+ </p>
480
+ }
481
+ <p class="mm-danger-confirmation__target">
482
+ <span class="mm-danger-confirmation__target-label">{{ messages().target }}:</span>
483
+ <strong data-target>{{ o.targetName }}</strong>
484
+ </p>
485
+ <p class="mm-danger-confirmation__consequence" data-consequence>{{ o.consequence }}</p>
486
+ @if (o.requireTypingName) {
487
+ <label class="mm-danger-confirmation__type" [for]="inputId">{{ typeLabel() }}</label>
488
+ <input
489
+ class="k-textbox k-input k-input-md k-rounded-md mm-danger-confirmation__input"
490
+ [id]="inputId"
491
+ type="text"
492
+ autocomplete="off"
493
+ spellcheck="false"
494
+ data-type-to-confirm
495
+ [value]="typed()"
496
+ (input)="typed.set($any($event.target).value)"
497
+ (keydown.enter)="canConfirm() && confirm()"
498
+ />
499
+ }
500
+ </div>
501
+ <kendo-dialog-actions>
502
+ <button kendoButton data-action="cancel" (click)="cancel()">{{ o.cancelText ?? messages().cancel }}</button>
503
+ <button kendoButton themeColor="error" data-action="confirm" data-danger="true"
504
+ [disabled]="!canConfirm()" (click)="confirm()">{{ o.confirmText }}</button>
505
+ </kendo-dialog-actions>
506
+ `, styles: [".mm-danger-confirmation p{margin:0 0 var(--theme-space-3, 12px)}.mm-danger-confirmation__environment{padding:var(--theme-space-2, 8px) var(--theme-space-3, 12px);border-left:3px solid var(--theme-status-error, #c0385f);border-radius:var(--theme-radius-sm, 4px);background:var(--theme-status-error-subtle, rgba(192, 56, 95, .08));font-weight:600}.mm-danger-confirmation__target-label{color:var(--theme-text-muted, #75829a);margin-right:var(--theme-space-1, 4px)}.mm-danger-confirmation__type{display:block;margin-bottom:var(--theme-space-1, 4px)}.mm-danger-confirmation__input{width:100%}\n"] }]
507
+ }], ctorParameters: () => [] });
508
+
306
509
  class ConfirmationService {
307
510
  dialogService = inject(DialogService);
511
+ /** Optional app-wide environment defaults (e.g. production → type the name), AB#5578. */
512
+ dangerEnvironment = inject(DANGER_CONFIRM_ENVIRONMENT, { optional: true });
308
513
  defaultMessages;
514
+ /** App-wide translations of {@link showDangerConfirm}; per-call `options.messages` win. */
515
+ defaultDangerMessages;
516
+ /**
517
+ * Danger confirmation that names the target (Studio action guideline §2.4, AB#5578): title +
518
+ * target + consequence, Cancel left / danger confirm right, initial focus on Cancel (or on the
519
+ * type-to-confirm input when `requireTypingName`, e.g. in production tenants). Resolves `true`
520
+ * only when the confirming button was used. Unset `requireTypingName` / `environmentLabel` fall
521
+ * back to the app's {@link DANGER_CONFIRM_ENVIRONMENT}, if provided.
522
+ */
523
+ async showDangerConfirm(callerOptions) {
524
+ const options = applyDangerConfirmEnvironment(callerOptions, this.dangerEnvironment?.());
525
+ const dialogRef = this.dialogService.open({
526
+ title: options.title,
527
+ content: DangerConfirmationWindowComponent,
528
+ cssClass: 'mm-dialog-danger',
529
+ autoFocusedElement: DANGER_CONFIRM_SAFE_FOCUS(!!options.requireTypingName),
530
+ minWidth: 'min(320px, calc(100vw - 32px))',
531
+ maxWidth: 'min(560px, calc(100vw - 32px))',
532
+ });
533
+ const component = dialogRef.content.instance;
534
+ component.options.set({
535
+ ...options,
536
+ messages: { ...(this.defaultDangerMessages ?? {}), ...(options.messages ?? {}) },
537
+ });
538
+ const result = await firstValueFrom(dialogRef.result);
539
+ return result instanceof DangerConfirmationResult && result.confirmed;
540
+ }
309
541
  async showYesNoConfirmationDialog(title, message, cssClass, buttonLabels, messages) {
310
542
  const dialogRef = this.openDialog(title, message, DialogType.YesNo, cssClass, buttonLabels, messages);
311
543
  const result = await firstValueFrom(dialogRef.result);
@@ -341,6 +573,16 @@ class ConfirmationService {
341
573
  return false;
342
574
  }
343
575
  }
576
+ /**
577
+ * Confirmation of a destructive action: explicit verb labels instead of Yes / No (e.g.
578
+ * "Rotate" / "Cancel") and the confirming button styled as danger. Resolves `true` only when
579
+ * the confirming button was clicked.
580
+ */
581
+ async showDestructiveConfirmationDialog(title, message, confirmLabel, cancelLabel = 'Cancel') {
582
+ const dialogRef = this.openDialog(title, message, DialogType.YesNo, undefined, { yes: confirmLabel, no: cancelLabel }, undefined, true);
583
+ const result = await firstValueFrom(dialogRef.result);
584
+ return result instanceof ConfirmationWindowResult && result.result === ButtonTypes.Yes;
585
+ }
344
586
  async showOkDialog(title, message, messages) {
345
587
  const dialogRef = this.openDialog(title, message, DialogType.Ok, undefined, undefined, messages);
346
588
  const result = await firstValueFrom(dialogRef.result);
@@ -351,11 +593,19 @@ class ConfirmationService {
351
593
  return false;
352
594
  }
353
595
  }
354
- openDialog(title, message, dialogType, cssClass, buttonLabels, messages) {
596
+ openDialog(title, message, dialogType, cssClass, buttonLabels, messages, danger = false) {
597
+ // A confirmation is a short text: cap its width so a long message wraps instead of
598
+ // stretching the dialog over the whole viewport.
355
599
  const dialogRef = this.dialogService.open({
356
600
  title,
357
601
  content: ConfirmationWindowComponent,
358
- cssClass
602
+ cssClass,
603
+ // Destructive confirmations focus the dismissing button first: Enter must never confirm a
604
+ // delete (AB#5578). Danger = showDestructiveConfirmationDialog, 'mm-dialog-danger' = production check.
605
+ ...(danger || cssClass?.includes('mm-dialog-danger') ? { autoFocusedElement: '[data-action="dismiss"], [data-action="cancel"]' } : {}),
606
+ // Both bounds leave a 16 px gutter on each side, so a phone (< 352 px) never overflows.
607
+ minWidth: 'min(320px, calc(100vw - 32px))',
608
+ maxWidth: 'min(560px, calc(100vw - 32px))'
359
609
  });
360
610
  const component = dialogRef.content.instance;
361
611
  component.data = {
@@ -364,6 +614,7 @@ class ConfirmationService {
364
614
  dialogType,
365
615
  buttonLabels,
366
616
  messages: messages ?? this.defaultMessages,
617
+ ...(danger ? { danger: true } : {}),
367
618
  };
368
619
  return dialogRef;
369
620
  }
@@ -682,7 +933,7 @@ class MessageDetailsDialogComponent {
682
933
  </button>
683
934
  </div>
684
935
  </div>
685
- `, 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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
936
+ `, 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: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
686
937
  }
687
938
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: MessageDetailsDialogComponent, decorators: [{
688
939
  type: Component,
@@ -944,13 +1195,29 @@ const DEFAULT_NOTIFICATION_DISPLAY_MESSAGES = {
944
1195
  showDetails: 'Show Details',
945
1196
  };
946
1197
 
1198
+ const NOTIFICATION_DISPLAY_OPTIONS = new InjectionToken('NOTIFICATION_DISPLAY_OPTIONS');
1199
+ const DEFAULT_OPTIONS = {
1200
+ errorHideAfter: 0,
1201
+ warningHideAfter: 0,
1202
+ maxVisible: 0,
1203
+ dedupe: true,
1204
+ stickyWithDetails: false,
1205
+ };
1206
+ /** Eviction order of the stack cap: lower goes first. */
1207
+ const SEVERITY = { success: 0, info: 0, warning: 1, error: 2 };
947
1208
  class NotificationDisplayService {
948
1209
  notificationService = inject(NotificationService);
949
1210
  messageDetailsDialogService = inject(MessageDetailsDialogService);
950
1211
  router = inject(Router);
951
1212
  ngZone = inject(NgZone);
1213
+ options = {
1214
+ ...DEFAULT_OPTIONS,
1215
+ ...(inject(NOTIFICATION_DISPLAY_OPTIONS, { optional: true }) ?? {}),
1216
+ };
952
1217
  notificationCounter = 0;
953
1218
  activeNotifications = new Map();
1219
+ /** Every visible toast, oldest first (dedupe, stack cap, auto-hide timers). */
1220
+ toasts = [];
954
1221
  subscriptions = [];
955
1222
  interactionDebounceTime = 300; // ms
956
1223
  gracePeriod = 1000; // ms - prevent immediate closure after opening
@@ -1051,6 +1318,7 @@ class NotificationDisplayService {
1051
1318
  toRemove.forEach(id => {
1052
1319
  this.activeNotifications.delete(id);
1053
1320
  this.notificationOpenTimes.delete(id);
1321
+ this.forget(id);
1054
1322
  });
1055
1323
  }
1056
1324
  clearAllNotifications() {
@@ -1059,6 +1327,8 @@ class NotificationDisplayService {
1059
1327
  }
1060
1328
  this.activeNotifications.clear();
1061
1329
  this.notificationOpenTimes.clear();
1330
+ this.toasts.forEach(toast => clearTimeout(toast.timer));
1331
+ this.toasts = [];
1062
1332
  }
1063
1333
  /**
1064
1334
  * Helper method to create SVG icon HTML
@@ -1071,182 +1341,166 @@ class NotificationDisplayService {
1071
1341
  * Shows a success notification (auto-closes after 3 seconds)
1072
1342
  */
1073
1343
  showSuccess(title, hideAfter) {
1074
- console.log('showSuccess called with:', { title, hideAfter });
1075
- const autoHideTime = hideAfter ?? 3000;
1076
- const settings = {
1077
- content: title,
1078
- type: {
1079
- style: 'success',
1080
- icon: true
1081
- },
1082
- animation: { type: 'slide', duration: 400 },
1083
- hideAfter: 0, // Disable Kendo's auto-hide, we'll handle it manually
1084
- closable: true,
1085
- position: { horizontal: 'center', vertical: 'top' }
1086
- };
1087
- console.log('Success notification settings:', settings);
1088
- const notificationRef = this.notificationService.show(settings);
1089
- console.log('Notification ref created:', notificationRef);
1090
- if (notificationRef) {
1091
- console.log(`Success notification will auto-hide after ${autoHideTime}ms (manual)`);
1092
- // Manually hide the notification after the specified time
1093
- setTimeout(() => {
1094
- console.log('Manually hiding success notification');
1095
- notificationRef.hide();
1096
- }, autoHideTime);
1097
- }
1344
+ this.present('success', title, undefined, hideAfter ?? 3000);
1098
1345
  }
1099
1346
  /**
1100
- * Shows an error notification (persists until user interaction or navigation)
1347
+ * Shows an error notification. It persists until user interaction or navigation, or hides
1348
+ * after `hideAfter` ms (default: `errorHideAfter` of the options; `0` = sticky).
1101
1349
  */
1102
1350
  showError(title, details, hideAfter) {
1103
- // Generate unique ID for this notification
1104
- const notificationId = `error-${++this.notificationCounter}-${Date.now()}`;
1105
- // Start with plain text content
1106
- const settings = {
1107
- ...this.defaultSettings,
1108
- content: title,
1109
- type: {
1110
- style: 'error',
1111
- icon: true
1112
- },
1113
- hideAfter: hideAfter ?? 0, // 0 means no auto-hide for errors
1114
- closable: true,
1115
- cssClass: `notification-${notificationId}` // Add unique class for targeting
1116
- };
1117
- const notificationRef = this.notificationService.show(settings);
1118
- if (notificationRef) {
1119
- this.activeNotifications.set(notificationId, notificationRef);
1120
- this.notificationOpenTimes.set(notificationId, Date.now());
1121
- }
1122
- if (details && notificationRef) {
1123
- // After notification is shown, find it by the unique class and modify its content
1124
- setTimeout(() => {
1125
- const notification = document.querySelector(`.notification-${notificationId}`);
1126
- if (notification) {
1127
- const contentEl = notification.querySelector('.k-notification-content');
1128
- if (contentEl && !contentEl.querySelector('.notification-details-btn')) {
1129
- // Create wrapper div
1130
- const wrapper = document.createElement('div');
1131
- wrapper.style.cssText = 'display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px;';
1132
- // Create text span
1133
- const textSpan = document.createElement('span');
1134
- textSpan.style.cssText = 'flex: 1; overflow: hidden; text-overflow: ellipsis;';
1135
- textSpan.textContent = title;
1136
- // Create details button with icon only
1137
- const detailsBtn = document.createElement('button');
1138
- detailsBtn.className = 'k-button k-button-sm k-button-flat k-button-flat-base notification-details-btn';
1139
- detailsBtn.style.cssText = 'flex-shrink: 0; width: 32px; height: 32px; padding: 8px; display: flex; align-items: center; justify-content: center;';
1140
- detailsBtn.innerHTML = this.createSvgIcon();
1141
- detailsBtn.title = this.messages.showDetails;
1142
- detailsBtn.onclick = (event) => {
1143
- event.stopPropagation();
1144
- this.messageDetailsDialogService.showDetailsDialog({
1145
- title,
1146
- details,
1147
- level: 'error'
1148
- });
1149
- };
1150
- // Assemble the elements
1151
- wrapper.appendChild(textSpan);
1152
- wrapper.appendChild(detailsBtn);
1153
- // Replace content
1154
- contentEl.innerHTML = '';
1155
- contentEl.appendChild(wrapper);
1156
- }
1157
- }
1158
- }, 50);
1159
- }
1351
+ this.present('error', title, details, hideAfter ?? this.options.errorHideAfter);
1160
1352
  }
1161
1353
  /**
1162
- * Shows a warning notification (persists until user interaction or navigation)
1354
+ * Shows a warning notification. It persists until user interaction or navigation, or hides
1355
+ * after `hideAfter` ms (default: `warningHideAfter` of the options; `0` = sticky).
1163
1356
  */
1164
1357
  showWarning(title, details, hideAfter) {
1165
- // Generate unique ID for this notification
1166
- const notificationId = `warning-${++this.notificationCounter}-${Date.now()}`;
1167
- // Start with plain text content
1358
+ this.present('warning', title, details, hideAfter ?? this.options.warningHideAfter);
1359
+ }
1360
+ /**
1361
+ * Shows an info notification (auto-closes after 3 seconds)
1362
+ */
1363
+ showInfo(title, hideAfter) {
1364
+ this.present('info', title, undefined, hideAfter ?? 3000);
1365
+ }
1366
+ /** The visible toasts as `[style, text]`, oldest first — for tests and diagnostics. */
1367
+ visibleToasts() {
1368
+ return this.toasts.map(toast => [toast.style, toast.title]);
1369
+ }
1370
+ present(style, title, details, hideAfter) {
1371
+ const key = `${style}\u0000${title}\u0000${details ?? ''}`;
1372
+ if (this.options.dedupe) {
1373
+ const same = this.toasts.find(toast => toast.key === key);
1374
+ if (same) {
1375
+ // Already on screen: no second copy, the visible one just stays a while longer.
1376
+ this.schedule(same);
1377
+ return;
1378
+ }
1379
+ }
1380
+ const sticky = style === 'error' || style === 'warning';
1381
+ // An error or warning with details is read in the details dialog: it waits for the user.
1382
+ const duration = sticky && details && this.options.stickyWithDetails ? 0 : hideAfter;
1383
+ const notificationId = `${style}-${++this.notificationCounter}-${Date.now()}`;
1168
1384
  const settings = {
1169
1385
  ...this.defaultSettings,
1170
1386
  content: title,
1171
- type: {
1172
- style: 'warning',
1173
- icon: true
1174
- },
1175
- hideAfter: hideAfter ?? 0, // 0 means no auto-hide for warnings
1387
+ type: { style, icon: true },
1388
+ // Kendo ignores hideAfter on closable notifications: hiding is done by schedule().
1389
+ hideAfter: 0,
1176
1390
  closable: true,
1177
- cssClass: `notification-${notificationId}` // Add unique class for targeting
1391
+ cssClass: `notification-${notificationId}`,
1178
1392
  };
1179
1393
  const notificationRef = this.notificationService.show(settings);
1180
- if (notificationRef) {
1394
+ if (!notificationRef) {
1395
+ return;
1396
+ }
1397
+ if (sticky) {
1181
1398
  this.activeNotifications.set(notificationId, notificationRef);
1182
1399
  this.notificationOpenTimes.set(notificationId, Date.now());
1183
1400
  }
1184
- if (details && notificationRef) {
1185
- // After notification is shown, find it by the unique class and modify its content
1186
- setTimeout(() => {
1187
- const notification = document.querySelector(`.notification-${notificationId}`);
1188
- if (notification) {
1189
- const contentEl = notification.querySelector('.k-notification-content');
1190
- if (contentEl && !contentEl.querySelector('.notification-details-btn')) {
1191
- // Create wrapper div
1192
- const wrapper = document.createElement('div');
1193
- wrapper.style.cssText = 'display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px;';
1194
- // Create text span
1195
- const textSpan = document.createElement('span');
1196
- textSpan.style.cssText = 'flex: 1; overflow: hidden; text-overflow: ellipsis;';
1197
- textSpan.textContent = title;
1198
- // Create details button with icon only
1199
- const detailsBtn = document.createElement('button');
1200
- detailsBtn.className = 'k-button k-button-sm k-button-flat k-button-flat-base notification-details-btn';
1201
- detailsBtn.style.cssText = 'flex-shrink: 0; width: 32px; height: 32px; padding: 8px; display: flex; align-items: center; justify-content: center;';
1202
- detailsBtn.innerHTML = this.createSvgIcon();
1203
- detailsBtn.title = this.messages.showDetails;
1204
- detailsBtn.onclick = (event) => {
1205
- event.stopPropagation();
1206
- this.messageDetailsDialogService.showDetailsDialog({
1207
- title,
1208
- details,
1209
- level: 'warning'
1210
- });
1211
- };
1212
- // Assemble the elements
1213
- wrapper.appendChild(textSpan);
1214
- wrapper.appendChild(detailsBtn);
1215
- // Replace content
1216
- contentEl.innerHTML = '';
1217
- contentEl.appendChild(wrapper);
1218
- }
1219
- }
1220
- }, 50);
1401
+ const toast = { id: notificationId, key, style, title, ref: notificationRef, hideAfter: duration, hovered: false, focused: false };
1402
+ this.toasts.push(toast);
1403
+ notificationRef.afterHide?.subscribe(() => this.forget(notificationId));
1404
+ this.schedule(toast);
1405
+ this.enforceLimit();
1406
+ // The toast element exists once Kendo has rendered it.
1407
+ setTimeout(() => {
1408
+ this.watchPointerAndFocus(toast);
1409
+ if (details && sticky) {
1410
+ this.addDetailsButton(notificationId, title, details, style);
1411
+ }
1412
+ }, 50);
1413
+ }
1414
+ /** (Re)starts the auto-hide timer of a toast; a toast with `hideAfter` 0 stays, a hovered or focused one waits. */
1415
+ schedule(toast) {
1416
+ clearTimeout(toast.timer);
1417
+ toast.timer = undefined;
1418
+ if (toast.hideAfter > 0 && !toast.hovered && !toast.focused) {
1419
+ toast.timer = setTimeout(() => this.hideToast(toast), toast.hideAfter);
1221
1420
  }
1222
1421
  }
1223
- /**
1224
- * Shows an info notification (auto-closes after 3 seconds)
1225
- */
1226
- showInfo(title, hideAfter) {
1227
- console.log('showInfo called with:', { title, hideAfter });
1228
- const autoHideTime = hideAfter ?? 3000;
1229
- const settings = {
1230
- content: title,
1231
- type: {
1232
- style: 'info',
1233
- icon: true
1234
- },
1235
- animation: { type: 'slide', duration: 400 },
1236
- hideAfter: 0, // Disable Kendo's auto-hide, we'll handle it manually
1237
- closable: true,
1238
- position: { horizontal: 'center', vertical: 'top' }
1422
+ /** Pauses the auto-hide while the pointer is over the toast or focus is inside it; restarts it afterwards. */
1423
+ watchPointerAndFocus(toast) {
1424
+ const element = document.querySelector(`.notification-${toast.id}`);
1425
+ if (!element || !this.toasts.includes(toast)) {
1426
+ return;
1427
+ }
1428
+ const update = (change) => {
1429
+ Object.assign(toast, change);
1430
+ if (this.toasts.includes(toast)) {
1431
+ this.schedule(toast);
1432
+ }
1239
1433
  };
1240
- console.log('Info notification settings:', settings);
1241
- const notificationRef = this.notificationService.show(settings);
1242
- console.log('Notification ref created:', notificationRef);
1243
- if (notificationRef) {
1244
- console.log(`Info notification will auto-hide after ${autoHideTime}ms (manual)`);
1245
- // Manually hide the notification after the specified time
1246
- setTimeout(() => {
1247
- console.log('Manually hiding info notification');
1248
- notificationRef.hide();
1249
- }, autoHideTime);
1434
+ element.addEventListener('mouseenter', () => update({ hovered: true }));
1435
+ element.addEventListener('mouseleave', () => update({ hovered: false }));
1436
+ element.addEventListener('focusin', () => update({ focused: true }));
1437
+ element.addEventListener('focusout', (event) => {
1438
+ if (!(event.relatedTarget instanceof Node && element.contains(event.relatedTarget))) {
1439
+ update({ focused: false });
1440
+ }
1441
+ });
1442
+ }
1443
+ /** Beyond `maxVisible`, hides the oldest toast of the lowest severity (success/info before warning before error). */
1444
+ enforceLimit() {
1445
+ const max = this.options.maxVisible;
1446
+ while (max > 0 && this.toasts.length > max) {
1447
+ const lowest = Math.min(...this.toasts.map(toast => SEVERITY[toast.style]));
1448
+ const victim = this.toasts.find(toast => SEVERITY[toast.style] === lowest);
1449
+ if (!victim) {
1450
+ return;
1451
+ }
1452
+ this.hideToast(victim);
1453
+ }
1454
+ }
1455
+ hideToast(toast) {
1456
+ toast.ref.hide();
1457
+ this.activeNotifications.delete(toast.id);
1458
+ this.notificationOpenTimes.delete(toast.id);
1459
+ this.forget(toast.id);
1460
+ }
1461
+ forget(id) {
1462
+ const toast = this.toasts.find(entry => entry.id === id);
1463
+ if (toast) {
1464
+ clearTimeout(toast.timer);
1465
+ this.toasts = this.toasts.filter(entry => entry !== toast);
1466
+ }
1467
+ }
1468
+ addDetailsButton(notificationId, title, details, level) {
1469
+ // Called once the notification is rendered: find it by the unique class and modify its content
1470
+ {
1471
+ const notification = document.querySelector(`.notification-${notificationId}`);
1472
+ if (notification) {
1473
+ const contentEl = notification.querySelector('.k-notification-content');
1474
+ if (contentEl && !contentEl.querySelector('.notification-details-btn')) {
1475
+ // Create wrapper div
1476
+ const wrapper = document.createElement('div');
1477
+ wrapper.style.cssText = 'display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px;';
1478
+ // Create text span
1479
+ const textSpan = document.createElement('span');
1480
+ textSpan.style.cssText = 'flex: 1; overflow: hidden; text-overflow: ellipsis;';
1481
+ textSpan.textContent = title;
1482
+ // Create details button with icon only
1483
+ const detailsBtn = document.createElement('button');
1484
+ detailsBtn.className = 'k-button k-button-sm k-button-flat k-button-flat-base notification-details-btn';
1485
+ detailsBtn.style.cssText = 'flex-shrink: 0; width: 32px; height: 32px; padding: 8px; display: flex; align-items: center; justify-content: center;';
1486
+ detailsBtn.innerHTML = this.createSvgIcon();
1487
+ detailsBtn.title = this.messages.showDetails;
1488
+ detailsBtn.onclick = (event) => {
1489
+ event.stopPropagation();
1490
+ this.messageDetailsDialogService.showDetailsDialog({
1491
+ title,
1492
+ details,
1493
+ level
1494
+ });
1495
+ };
1496
+ // Assemble the elements
1497
+ wrapper.appendChild(textSpan);
1498
+ wrapper.appendChild(detailsBtn);
1499
+ // Replace content
1500
+ contentEl.innerHTML = '';
1501
+ contentEl.appendChild(wrapper);
1502
+ }
1503
+ }
1250
1504
  }
1251
1505
  }
1252
1506
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NotificationDisplayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1347,7 +1601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
1347
1601
  }] });
1348
1602
 
1349
1603
  /**
1350
- * Default English messages for the ListViewComponent.
1604
+ * Default English messages for the ListViewComponent. Complete: every member, including the
1605
+ * optional ones, has a value.
1351
1606
  */
1352
1607
  const DEFAULT_LIST_VIEW_MESSAGES = {
1353
1608
  searchPlaceholder: 'Search in all columns...',
@@ -1358,6 +1613,10 @@ const DEFAULT_LIST_VIEW_MESSAGES = {
1358
1613
  resetFilters: 'Reset Filters',
1359
1614
  commands: 'Commands',
1360
1615
  actionsColumnTitle: 'Actions',
1616
+ rowActionsFor: 'Actions for {name}',
1617
+ rowActions: 'Row actions',
1618
+ rowActionUnavailable: 'Not available for this row',
1619
+ rowActionsLoading: 'The list is loading',
1361
1620
  pdfPageTemplate: 'Page {pageNum} of {totalPages}',
1362
1621
  pagerItemsPerPage: 'items per page',
1363
1622
  pagerOf: 'of',
@@ -1369,6 +1628,24 @@ const DEFAULT_LIST_VIEW_MESSAGES = {
1369
1628
  pagerNextPage: 'Go to the next page',
1370
1629
  noRecords: 'No records available.',
1371
1630
  };
1631
+ /**
1632
+ * Merges app-supplied list-view messages over {@link DEFAULT_LIST_VIEW_MESSAGES}. Members that
1633
+ * are missing, `undefined` or `null` keep their default, so an app compiled against an older
1634
+ * `ListViewMessages` shape (or one that leaves a translation unset) never renders an empty label.
1635
+ */
1636
+ function resolveListViewMessages(messages) {
1637
+ const resolved = { ...DEFAULT_LIST_VIEW_MESSAGES };
1638
+ if (!messages) {
1639
+ return resolved;
1640
+ }
1641
+ for (const key of Object.keys(messages)) {
1642
+ const value = messages[key];
1643
+ if (value !== undefined && value !== null) {
1644
+ resolved[key] = value;
1645
+ }
1646
+ }
1647
+ return resolved;
1648
+ }
1372
1649
 
1373
1650
  class PascalCasePipe {
1374
1651
  transform(value) {
@@ -1548,6 +1825,14 @@ class MmListViewDataBindingDirective extends DataBindingDirective {
1548
1825
  get isLoading() {
1549
1826
  return this.dataSource?.isLoading ?? false;
1550
1827
  }
1828
+ /**
1829
+ * Read-only view of the grid state (filter, sort, skip, take) Kendo keeps
1830
+ * protected on the base directive. The list view consults it to decide
1831
+ * whether anything is filtered right now.
1832
+ */
1833
+ get currentState() {
1834
+ return this.state;
1835
+ }
1551
1836
  _serviceSubscription;
1552
1837
  _executeFilterSubscription;
1553
1838
  _fetchAgainSubscription;
@@ -1762,6 +2047,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
1762
2047
  }]
1763
2048
  }], ctorParameters: () => [] });
1764
2049
 
2050
+ /** Default number of row action slots (inline buttons incl. the overflow button). */
2051
+ const MM_ROW_ACTIONS_MAX_INLINE = 3;
2052
+ /**
2053
+ * Canonical action icons (AB#5570). One verb, one icon, everywhere: pick from this map
2054
+ * instead of importing a Kendo icon ad hoc, so "Edit" never shows a gear in one list and a
2055
+ * pencil in the next.
2056
+ */
2057
+ const MM_ACTION_ICONS = {
2058
+ /** Create a new item ("New adapter", "Add mapping"). */
2059
+ add: plusIcon,
2060
+ /** Edit / open the editable form of the item. */
2061
+ edit: pencilIcon,
2062
+ /** Read-only view / preview. */
2063
+ view: eyeIcon,
2064
+ /** Open the item (or a related page) in its own view / new tab. */
2065
+ open: hyperlinkOpenIcon,
2066
+ /** Delete / remove the item (always `danger`). */
2067
+ delete: trashIcon,
2068
+ /** Clear a stored value without deleting the item ("Not needed", "Clear secret"). */
2069
+ clear: eraserIcon,
2070
+ /** Copy an id or value to the clipboard. */
2071
+ copy: copyIcon,
2072
+ /** Duplicate the item as a new item. */
2073
+ duplicate: fileDataIcon,
2074
+ /** Reload data. */
2075
+ refresh: arrowRotateCwIcon,
2076
+ /** Deploy to a pool / cluster. */
2077
+ deploy: uploadIcon,
2078
+ /** Undeploy. */
2079
+ undeploy: xCircleIcon,
2080
+ /** Run / execute / start. */
2081
+ run: playIcon,
2082
+ /** Stop / cancel a running job. */
2083
+ stop: stopIcon,
2084
+ /** Export data (file the user saves). */
2085
+ export: exportIcon,
2086
+ /** Import data. */
2087
+ import: importIcon,
2088
+ /** Download a file. */
2089
+ download: downloadIcon,
2090
+ /** Show a report / log. */
2091
+ report: fileReportIcon,
2092
+ /** Restore / roll back to a stored state (e.g. restore a dump); destructive restores are `danger`. */
2093
+ restore: undoIcon,
2094
+ };
2095
+ /** True when the action is disabled (non-empty {@link MmAction.disabledReason}). */
2096
+ function isActionDisabled(action) {
2097
+ return !!action.disabledReason && action.disabledReason.trim().length > 0;
2098
+ }
2099
+ /** True unless the action is explicitly hidden. */
2100
+ function isActionVisible(action) {
2101
+ return action.visible !== false;
2102
+ }
2103
+ /**
2104
+ * Accessible name of an action on a named target: "Delete dump Encrypt run 2026-10-06 17:09".
2105
+ * Without a target the label alone.
2106
+ */
2107
+ function actionAccessibleName(action, targetLabel) {
2108
+ const target = (targetLabel ?? '').trim();
2109
+ return target ? `${action.label} ${target}` : action.label;
2110
+ }
2111
+ /** Tooltip: the label, plus the reason when disabled ("Delete dump — Requires SecretManagement"). */
2112
+ function actionTooltip(action) {
2113
+ return isActionDisabled(action) ? `${action.label} — ${action.disabledReason.trim()}` : action.label;
2114
+ }
2115
+ /**
2116
+ * Splits visible actions into inline buttons and overflow-menu items. At most `maxInline`
2117
+ * slots are rendered: when the actions do not fit, the last slot becomes the overflow
2118
+ * button. Actions with `overflow: true` always go to the menu (and need the overflow slot).
2119
+ */
2120
+ function splitRowActions(actions, maxInline = MM_ROW_ACTIONS_MAX_INLINE) {
2121
+ const visible = actions.filter(isActionVisible);
2122
+ const forced = visible.filter((a) => a.overflow);
2123
+ const candidates = visible.filter((a) => !a.overflow);
2124
+ const slots = Math.max(1, Math.floor(maxInline));
2125
+ const needsMenu = forced.length > 0 || candidates.length > slots;
2126
+ if (!needsMenu) {
2127
+ return { inline: candidates, menu: [] };
2128
+ }
2129
+ const inlineCount = Math.max(0, slots - 1);
2130
+ return {
2131
+ inline: candidates.slice(0, inlineCount),
2132
+ menu: [...candidates.slice(inlineCount), ...forced],
2133
+ };
2134
+ }
2135
+
2136
+ let nextReasonId = 0;
2137
+ /**
2138
+ * One action as a button (AB#5570), rendered from a shared {@link MmAction} definition.
2139
+ *
2140
+ * - `display="icon"`: icon-only, native tooltip = label (+ disabled reason), `aria-label`
2141
+ * = label + `targetLabel` ("Delete dump Encrypt run 2026-10-06 17:09").
2142
+ * - `display="text"` / `"icon-text"`: visible label; `targetLabel` still extends the
2143
+ * accessible name when the same label repeats (one per row).
2144
+ * - Disabled (`disabledReason`): stays focusable, `aria-disabled="true"`, the reason is
2145
+ * linked via `aria-describedby` and shown in the tooltip; clicks are swallowed.
2146
+ * - `danger`: Kendo `themeColor="error"`. The consumer confirms before acting.
2147
+ * - `primary` (page/toolbar context only): solid primary button for the one main action.
2148
+ * - `link`: rendered as a real router link (`<a kendoButton [routerLink]>`, so open-in-new-tab
2149
+ * works); a disabled link action renders as a disabled button.
2150
+ *
2151
+ * ```html
2152
+ * <mm-action-button [action]="refresh" context="toolbar" (triggered)="reload()" />
2153
+ * <mm-action-button [action]="newAdapter" context="page" display="icon-text" primary (triggered)="create()" />
2154
+ * ```
2155
+ */
2156
+ class ActionButtonComponent {
2157
+ /** The action definition. */
2158
+ action = input.required(/* @ts-ignore */
2159
+ ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
2160
+ /** Name of the target (row) for the accessible name; required for repeated row actions. */
2161
+ targetLabel = input(undefined, /* @ts-ignore */
2162
+ ...(ngDevMode ? [{ debugName: "targetLabel" }] : /* istanbul ignore next */ []));
2163
+ context = input('row', /* @ts-ignore */
2164
+ ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
2165
+ display = input('icon', /* @ts-ignore */
2166
+ ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
2167
+ /** Solid primary emphasis — at most one per page header / toolbar. */
2168
+ primary = input(false, { ...(ngDevMode ? { debugName: "primary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
2169
+ /** Fires for enabled actions only. */
2170
+ triggered = output();
2171
+ reasonId = `mm-action-reason-${nextReasonId++}`;
2172
+ disabled = computed(() => isActionDisabled(this.action()), /* @ts-ignore */
2173
+ ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
2174
+ /** Icon-only needs an icon; without one the button falls back to its text. */
2175
+ iconOnly = computed(() => this.display() === 'icon' && !!this.action().icon, /* @ts-ignore */
2176
+ ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
2177
+ /** Visible text: `menuLabel` ("Delete dump…") when set, else the label. */
2178
+ visibleLabel = computed(() => this.action().menuLabel || this.action().label, /* @ts-ignore */
2179
+ ...(ngDevMode ? [{ debugName: "visibleLabel" }] : /* istanbul ignore next */ []));
2180
+ showIcon = computed(() => this.display() !== 'text' && !!this.action().icon, /* @ts-ignore */
2181
+ ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
2182
+ tooltip = computed(() => this.iconOnly() || this.disabled() ? actionTooltip(this.action()) : null, /* @ts-ignore */
2183
+ ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
2184
+ ariaLabel = computed(() => this.iconOnly() || this.targetLabel() ? actionAccessibleName(this.action(), this.targetLabel()) : null, /* @ts-ignore */
2185
+ ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
2186
+ /** Kendo button classes for the link variant (same look as `button[kendoButton]`). */
2187
+ linkClasses = computed(() => {
2188
+ const size = this.context() === 'row' ? 'sm' : 'md';
2189
+ const fill = this.primary() && !this.action().danger ? 'solid' : 'flat';
2190
+ const theme = this.action().danger ? 'error' : this.primary() ? 'primary' : 'base';
2191
+ return ['k-button', `k-button-${size}`, `k-button-${fill}`, `k-button-${theme}`, 'k-rounded-md',
2192
+ this.iconOnly() ? 'k-icon-button' : ''].filter(Boolean).join(' ');
2193
+ }, /* @ts-ignore */
2194
+ ...(ngDevMode ? [{ debugName: "linkClasses" }] : /* istanbul ignore next */ []));
2195
+ onClick(event) {
2196
+ if (this.disabled()) {
2197
+ event.preventDefault();
2198
+ event.stopPropagation();
2199
+ return;
2200
+ }
2201
+ const action = this.action();
2202
+ this.triggered.emit({ id: action.id, action });
2203
+ }
2204
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2205
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ActionButtonComponent, isStandalone: true, selector: "mm-action-button", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: true, transformFunction: null }, targetLabel: { classPropertyName: "targetLabel", publicName: "targetLabel", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { triggered: "triggered" }, host: { properties: { "class.mm-action-button-host--disabled": "disabled()" }, classAttribute: "mm-action-button-host" }, ngImport: i0, template: `
2206
+ @if (action().link && !disabled()) {
2207
+ <!-- kendoButton only matches <button>: the link carries the same Kendo button classes itself. -->
2208
+ <a
2209
+ class="mm-action-button"
2210
+ [class]="linkClasses()"
2211
+ [class.mm-action-button--danger]="!!action().danger"
2212
+ [class.mm-action-button--icon-only]="iconOnly()"
2213
+ [class.mm-action-button--toolbar]="context() !== 'row'"
2214
+ [attr.title]="tooltip()"
2215
+ [attr.aria-label]="ariaLabel()"
2216
+ [attr.data-action]="action().id"
2217
+ [routerLink]="$any(action().link!.commands)"
2218
+ [queryParams]="action().link!.queryParams ?? null"
2219
+ (click)="onClick($event)"
2220
+ >@if (showIcon()) {<kendo-svgicon class="k-button-icon" [icon]="action().icon!" />}@if (!iconOnly()) {<span class="k-button-text">{{ visibleLabel() }}</span>}</a>
2221
+ } @else {
2222
+ <button
2223
+ kendoButton
2224
+ type="button"
2225
+ class="mm-action-button"
2226
+ [class.mm-action-button--disabled]="disabled()"
2227
+ [class.mm-action-button--danger]="!!action().danger"
2228
+ [class.mm-action-button--icon-only]="iconOnly()"
2229
+ [class.mm-action-button--toolbar]="context() !== 'row'"
2230
+ [svgIcon]="showIcon() ? action().icon! : $any(undefined)"
2231
+ [size]="context() === 'row' ? 'small' : 'medium'"
2232
+ [fillMode]="primary() && !action().danger ? 'solid' : 'flat'"
2233
+ [themeColor]="action().danger ? 'error' : primary() ? 'primary' : 'base'"
2234
+ [attr.title]="tooltip()"
2235
+ [attr.aria-label]="ariaLabel()"
2236
+ [attr.data-action]="action().id"
2237
+ [attr.aria-disabled]="disabled() ? 'true' : null"
2238
+ [attr.aria-describedby]="disabled() ? reasonId : null"
2239
+ (click)="onClick($event)"
2240
+ >@if (!iconOnly()) { {{ visibleLabel() }} }</button>
2241
+ }
2242
+ @if (disabled()) {
2243
+ <span class="mm-action-button__reason" [id]="reasonId">{{ action().disabledReason }}</span>
2244
+ }
2245
+ `, isInline: true, styles: [".mm-action-button-host{display:inline-flex;position:relative}.mm-action-button--toolbar.mm-action-button--icon-only .k-svg-icon{width:20px;height:20px}.mm-action-button--disabled{opacity:.45;cursor:not-allowed}.mm-action-button-host .mm-action-button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #2e8473)}.mm-action-button__reason{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mm-action-button-host--disabled:has(.mm-action-button:focus-visible) .mm-action-button__reason{top:calc(100% + 4px);left:0;z-index:20;width:max-content;max-width:280px;height:auto;margin:0;overflow:visible;clip:auto;padding:var(--theme-space-1, 4px) var(--theme-space-2, 8px);white-space:normal;font-size:.75rem;line-height:1.4;color:var(--theme-text-primary, #0f1c2e);background:var(--theme-bg-overlay, #ffffff);border:1px solid var(--theme-border-default, rgba(7, 23, 43, .12));border-radius:var(--theme-radius-sm, 4px);box-shadow:var(--theme-shadow-popup, 0 8px 24px rgba(7, 23, 43, .14));pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2246
+ }
2247
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ActionButtonComponent, decorators: [{
2248
+ type: Component,
2249
+ args: [{ selector: 'mm-action-button', standalone: true, imports: [ButtonModule, RouterLink, SVGIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'mm-action-button-host', '[class.mm-action-button-host--disabled]': 'disabled()' }, template: `
2250
+ @if (action().link && !disabled()) {
2251
+ <!-- kendoButton only matches <button>: the link carries the same Kendo button classes itself. -->
2252
+ <a
2253
+ class="mm-action-button"
2254
+ [class]="linkClasses()"
2255
+ [class.mm-action-button--danger]="!!action().danger"
2256
+ [class.mm-action-button--icon-only]="iconOnly()"
2257
+ [class.mm-action-button--toolbar]="context() !== 'row'"
2258
+ [attr.title]="tooltip()"
2259
+ [attr.aria-label]="ariaLabel()"
2260
+ [attr.data-action]="action().id"
2261
+ [routerLink]="$any(action().link!.commands)"
2262
+ [queryParams]="action().link!.queryParams ?? null"
2263
+ (click)="onClick($event)"
2264
+ >@if (showIcon()) {<kendo-svgicon class="k-button-icon" [icon]="action().icon!" />}@if (!iconOnly()) {<span class="k-button-text">{{ visibleLabel() }}</span>}</a>
2265
+ } @else {
2266
+ <button
2267
+ kendoButton
2268
+ type="button"
2269
+ class="mm-action-button"
2270
+ [class.mm-action-button--disabled]="disabled()"
2271
+ [class.mm-action-button--danger]="!!action().danger"
2272
+ [class.mm-action-button--icon-only]="iconOnly()"
2273
+ [class.mm-action-button--toolbar]="context() !== 'row'"
2274
+ [svgIcon]="showIcon() ? action().icon! : $any(undefined)"
2275
+ [size]="context() === 'row' ? 'small' : 'medium'"
2276
+ [fillMode]="primary() && !action().danger ? 'solid' : 'flat'"
2277
+ [themeColor]="action().danger ? 'error' : primary() ? 'primary' : 'base'"
2278
+ [attr.title]="tooltip()"
2279
+ [attr.aria-label]="ariaLabel()"
2280
+ [attr.data-action]="action().id"
2281
+ [attr.aria-disabled]="disabled() ? 'true' : null"
2282
+ [attr.aria-describedby]="disabled() ? reasonId : null"
2283
+ (click)="onClick($event)"
2284
+ >@if (!iconOnly()) { {{ visibleLabel() }} }</button>
2285
+ }
2286
+ @if (disabled()) {
2287
+ <span class="mm-action-button__reason" [id]="reasonId">{{ action().disabledReason }}</span>
2288
+ }
2289
+ `, styles: [".mm-action-button-host{display:inline-flex;position:relative}.mm-action-button--toolbar.mm-action-button--icon-only .k-svg-icon{width:20px;height:20px}.mm-action-button--disabled{opacity:.45;cursor:not-allowed}.mm-action-button-host .mm-action-button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #2e8473)}.mm-action-button__reason{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mm-action-button-host--disabled:has(.mm-action-button:focus-visible) .mm-action-button__reason{top:calc(100% + 4px);left:0;z-index:20;width:max-content;max-width:280px;height:auto;margin:0;overflow:visible;clip:auto;padding:var(--theme-space-1, 4px) var(--theme-space-2, 8px);white-space:normal;font-size:.75rem;line-height:1.4;color:var(--theme-text-primary, #0f1c2e);background:var(--theme-bg-overlay, #ffffff);border:1px solid var(--theme-border-default, rgba(7, 23, 43, .12));border-radius:var(--theme-radius-sm, 4px);box-shadow:var(--theme-shadow-popup, 0 8px 24px rgba(7, 23, 43, .14));pointer-events:none}\n"] }]
2290
+ }], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: true }] }], targetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetLabel", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], triggered: [{ type: i0.Output, args: ["triggered"] }] } });
2291
+
2292
+ /** Resolves the per-row callbacks of a {@link MmListRowAction}. */
2293
+ function resolveListRowAction(definition, row) {
2294
+ const { disabledReason, visible, link, run: _run, ...rest } = definition;
2295
+ return {
2296
+ ...rest,
2297
+ disabledReason: typeof disabledReason === 'function' ? disabledReason(row) ?? null : disabledReason ?? null,
2298
+ visible: typeof visible === 'function' ? visible(row) : visible,
2299
+ link: typeof link === 'function' ? link(row) ?? undefined : link,
2300
+ };
2301
+ }
2302
+ /** Structural equality of two rendered actions (keeps object identity stable across change detection). */
2303
+ function sameAction(a, b) {
2304
+ return a.id === b.id && a.label === b.label && a.menuLabel === b.menuLabel && a.icon === b.icon
2305
+ && !!a.danger === !!b.danger && (a.disabledReason ?? null) === (b.disabledReason ?? null)
2306
+ && a.visible === b.visible && !!a.overflow === !!b.overflow && sameLink(a.link, b.link);
2307
+ }
2308
+ function sameLink(a, b) {
2309
+ if (a === b)
2310
+ return true;
2311
+ if (!a || !b)
2312
+ return false;
2313
+ return JSON.stringify(a) === JSON.stringify(b);
2314
+ }
2315
+
1765
2316
  class BytesToSizePipe {
1766
2317
  transform(value, decimals = 2) {
1767
2318
  if (value === 0) {
@@ -1901,6 +2452,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
1901
2452
  }]
1902
2453
  }] });
1903
2454
 
2455
+ /** Context/overflow menu class of `CommandItem.danger` items (AB#5570); styled globally in the list-view SCSS. */
2456
+ const DANGER_MENU_ITEM_CLASS = 'mm-list-view-menu-item--danger';
2457
+ function isOverflowRowActionData(data) {
2458
+ return !!data && data.mmRowAction === true;
2459
+ }
2460
+ /** Menu text: `menuLabel` ("Delete…"), plus the disabled reason ("Delete… — The adapter is deployed"). */
2461
+ function entryMenuText(action) {
2462
+ const text = action.menuLabel || action.label;
2463
+ return isActionDisabled(action) ? `${text} — ${action.disabledReason.trim()}` : text;
2464
+ }
2465
+ function sameEntries(a, b) {
2466
+ return a.length === b.length && a.every((entry, i) => entry.commandItem === b[i].commandItem && entry.rowAction === b[i].rowAction && sameAction(entry.action, b[i].action));
2467
+ }
1904
2468
  class ListViewComponent extends CommandBaseService {
1905
2469
  cronHumanizer = inject(CronHumanizerService);
1906
2470
  _columns = [];
@@ -1915,6 +2479,11 @@ class ListViewComponent extends CommandBaseService {
1915
2479
  // context menu (right click)
1916
2480
  _contextMenuSelectedRow = null;
1917
2481
  _actionMenuItems = [];
2482
+ _rowActions = [];
2483
+ /** Per-row resolved actions; identical results keep their identity (no NG0100, no re-render churn). */
2484
+ rowActionCache = new WeakMap();
2485
+ activatedRoute = inject(ActivatedRoute, { optional: true });
2486
+ routerForActions = inject(Router, { optional: true });
1918
2487
  _contextMenuItems = [];
1919
2488
  _showRowFilter = false;
1920
2489
  /** Indicates if the data source is currently loading data */
@@ -1991,6 +2560,25 @@ class ListViewComponent extends CommandBaseService {
1991
2560
  this._contextMenuCommandItems = commandItems;
1992
2561
  this._contextMenuItems = this.buildMenuItems(commandItems);
1993
2562
  }
2563
+ /**
2564
+ * Row actions from the shared action model (AB#5572) — preferred over `actionCommandItems`.
2565
+ * Rendered after the `actionCommandItems` (which keep working through an adapter); together they
2566
+ * get at most {@link maxInlineRowActions} slots, the rest goes into the row's overflow menu.
2567
+ */
2568
+ set rowActions(actions) {
2569
+ this._rowActions = actions ?? [];
2570
+ this.rowActionCache = new WeakMap();
2571
+ }
2572
+ get rowActions() {
2573
+ return this._rowActions;
2574
+ }
2575
+ /**
2576
+ * Row action slots incl. the overflow ("…") button (guideline §2.2: 3). When the actions do not
2577
+ * fit, the last slot opens the overflow menu with the remaining actions and the context menu items.
2578
+ */
2579
+ maxInlineRowActions = MM_ROW_ACTIONS_MAX_INLINE;
2580
+ /** An enabled {@link rowActions} action was triggered (inline or from the overflow menu). */
2581
+ rowAction = new EventEmitter();
1994
2582
  excelExportFileName = 'Export.xlsx';
1995
2583
  pdfExportFileName = 'Export.pdf';
1996
2584
  pageable = {
@@ -2074,9 +2662,22 @@ class ListViewComponent extends CommandBaseService {
2074
2662
  * case the column has to be wide enough for.
2075
2663
  */
2076
2664
  get maxActionButtons() {
2077
- const actions = this._actionMenuItems.filter(item => !item.separator).length;
2078
- const contextButton = this._contextMenuItems.length > 0 && this.contextMenuType === 'actionMenu' ? 1 : 0;
2079
- return actions + contextButton;
2665
+ const candidates = this._actionMenuItems.filter(item => !item.separator).length +
2666
+ this._rowActions.filter(a => !a.overflow).length;
2667
+ const forcedMenu = this.hasContextMenuButton || this._rowActions.some(a => a.overflow);
2668
+ const slots = Math.max(1, Math.floor(this.maxInlineRowActions));
2669
+ if (!forcedMenu && candidates <= slots) {
2670
+ return candidates;
2671
+ }
2672
+ return Math.min(candidates, slots - 1) + 1;
2673
+ }
2674
+ /** The context menu is opened from the row's "…" button (not by right click). */
2675
+ get hasContextMenuButton() {
2676
+ return this._contextMenuCommandItems.length > 0 && this.contextMenuType === 'actionMenu';
2677
+ }
2678
+ /** The list renders an actions column / card actions at all. */
2679
+ get hasRowActions() {
2680
+ return this._actionMenuItems.length > 0 || this._rowActions.length > 0 || this.hasContextMenuButton;
2080
2681
  }
2081
2682
  /**
2082
2683
  * The actions column width actually used.
@@ -2133,6 +2734,31 @@ class ListViewComponent extends CommandBaseService {
2133
2734
  * the window ever resizing.
2134
2735
  */
2135
2736
  collapseCommandsBelow = 900;
2737
+ /**
2738
+ * Tells the list that the host holds filters of its own (quick-view bars,
2739
+ * app-side field filters) that a reset would clear. The toolbar's reset
2740
+ * button only shows while something is filtered, and the list cannot see
2741
+ * those host filters by itself.
2742
+ */
2743
+ hasExternalFilters = false;
2744
+ /**
2745
+ * Whether anything narrows or reorders the default view right now: a row
2746
+ * filter, a column sort, free-text search, or host-side filters announced
2747
+ * through {@link hasExternalFilters}. Paging is deliberately not counted —
2748
+ * the pager already gets back to page 1.
2749
+ */
2750
+ get hasActiveFilters() {
2751
+ if (this.hasExternalFilters || this.searchValue.trim().length > 0) {
2752
+ return true;
2753
+ }
2754
+ const state = this.dataBindingDirective?.currentState;
2755
+ if (!state) {
2756
+ return false;
2757
+ }
2758
+ const hasRowFilter = (state.filter?.filters?.length ?? 0) > 0;
2759
+ const hasSort = (state.sort ?? []).some(descriptor => !!descriptor.dir);
2760
+ return hasRowFilter || hasSort;
2761
+ }
2136
2762
  /** True while the command buttons are collapsed into the overflow menu. */
2137
2763
  get commandsCollapsed() {
2138
2764
  const width = this.containerWidth();
@@ -2142,15 +2768,22 @@ class ListViewComponent extends CommandBaseService {
2142
2768
  * The commands available right now, in toolbar order. The row filter is
2143
2769
  * omitted in card mode: cards have no column headers for a filter row to
2144
2770
  * appear in, and the grid already drops `filterable` there — leaving the
2145
- * button visible offered to toggle something that cannot exist. Reset stays
2146
- * available, or a filter set before the switch could never be cleared.
2771
+ * button visible offered to toggle something that cannot exist. Reset shows
2772
+ * only while something is actually filtered, sorted or searched (see
2773
+ * {@link hasActiveFilters}); on the default view there is nothing to reset,
2774
+ * so the button would only be noise. It is independent of card mode, so a
2775
+ * filter set before the switch can still be cleared.
2147
2776
  */
2148
2777
  get toolbarCommands() {
2149
2778
  const commands = [];
2150
2779
  if (this.rowFilterEnabled && !this.isCardMode) {
2151
2780
  commands.push({ id: 'rowFilter', text: this._messages.showRowFilter, svgIcon: this.filterIcon });
2152
2781
  }
2153
- commands.push({ id: 'excel', text: this._messages.exportToExcel, svgIcon: this.excelSVG }, { id: 'pdf', text: this._messages.exportToPdf, svgIcon: this.pdfSVG }, { id: 'reset', text: this._messages.resetFilters, svgIcon: this.resetFilterIcon }, { id: 'refresh', text: this._messages.refreshData, svgIcon: this.refreshIcon });
2782
+ commands.push({ id: 'excel', text: this._messages.exportToExcel, svgIcon: this.excelSVG }, { id: 'pdf', text: this._messages.exportToPdf, svgIcon: this.pdfSVG });
2783
+ if (this.hasActiveFilters) {
2784
+ commands.push({ id: 'reset', text: this._messages.resetFilters, svgIcon: this.resetFilterIcon });
2785
+ }
2786
+ commands.push({ id: 'refresh', text: this._messages.refreshData, svgIcon: this.refreshIcon });
2154
2787
  return commands;
2155
2788
  }
2156
2789
  /**
@@ -2207,9 +2840,13 @@ class ListViewComponent extends CommandBaseService {
2207
2840
  */
2208
2841
  rowClass;
2209
2842
  defaultRowClass = () => ({});
2210
- _messages = { ...DEFAULT_LIST_VIEW_MESSAGES };
2843
+ _messages = resolveListViewMessages(undefined);
2844
+ /**
2845
+ * Translated messages. Partial: members that are not supplied (or are `undefined`) keep the
2846
+ * English default from `DEFAULT_LIST_VIEW_MESSAGES`.
2847
+ */
2211
2848
  set messages(value) {
2212
- this._messages = { ...DEFAULT_LIST_VIEW_MESSAGES, ...value };
2849
+ this._messages = resolveListViewMessages(value);
2213
2850
  }
2214
2851
  get messages() {
2215
2852
  return this._messages;
@@ -2425,7 +3062,7 @@ class ListViewComponent extends CommandBaseService {
2425
3062
  if (this.showCheckboxColumn()) {
2426
3063
  fixedWidth += this.checkboxColumnWidth;
2427
3064
  }
2428
- if (this._actionMenuItems.length > 0 || (this._contextMenuItems.length > 0 && this.contextMenuType == 'actionMenu')) {
3065
+ if (this.hasRowActions) {
2429
3066
  fixedWidth += this.effectiveActionsColumnWidth;
2430
3067
  }
2431
3068
  const autoColumns = visibleColumns.filter(c => c.width === undefined);
@@ -2457,6 +3094,39 @@ class ListViewComponent extends CommandBaseService {
2457
3094
  getToolbarItemDisabled(commandItem) {
2458
3095
  return CommandBaseService.getIsDisabled(commandItem, this._selectedRows);
2459
3096
  }
3097
+ /**
3098
+ * Accessible name of a host toolbar action. A button with a visible text is named by that
3099
+ * text; an icon-only one (no text) gets its tooltip as `aria-label`, because `title` alone is
3100
+ * not reliably announced (action guideline §2.2: icon-only = tooltip + aria-label).
3101
+ */
3102
+ toolbarItemAriaLabel(commandItem) {
3103
+ if (commandItem.text?.trim()) {
3104
+ return null;
3105
+ }
3106
+ return commandItem.tooltip?.trim() ? commandItem.tooltip : null;
3107
+ }
3108
+ buttonAttributesCache = new Map();
3109
+ static NO_BUTTON_ATTRIBUTES = {};
3110
+ /**
3111
+ * `buttonAttributes` for Kendo split / dropdown buttons: same rule as
3112
+ * {@link toolbarItemAriaLabel}, cached per label so change detection sees a stable object.
3113
+ */
3114
+ toolbarItemButtonAttributes(commandItem) {
3115
+ const label = this.toolbarItemAriaLabel(commandItem);
3116
+ return label ? this.ariaLabelAttributes(label) : ListViewComponent.NO_BUTTON_ATTRIBUTES;
3117
+ }
3118
+ /** `buttonAttributes` of the icon-only menu the commands collapse into. */
3119
+ get commandsMenuButtonAttributes() {
3120
+ return this.ariaLabelAttributes(this._messages.commands);
3121
+ }
3122
+ ariaLabelAttributes(label) {
3123
+ let attributes = this.buttonAttributesCache.get(label);
3124
+ if (!attributes) {
3125
+ attributes = { 'aria-label': label };
3126
+ this.buttonAttributesCache.set(label, attributes);
3127
+ }
3128
+ return attributes;
3129
+ }
2460
3130
  getValue(element, column) {
2461
3131
  if (column.field.indexOf('.') === -1) {
2462
3132
  return element[column.field];
@@ -2518,6 +3188,23 @@ class ListViewComponent extends CommandBaseService {
2518
3188
  return 'text';
2519
3189
  }
2520
3190
  }
3191
+ /** Input attributes of a read-only boolean cell, cached per column and name (AB#5621). */
3192
+ booleanCellAttributeCache = new WeakMap();
3193
+ /**
3194
+ * Input attributes of a `boolean` cell's read-only checkbox: its accessible name is the column's
3195
+ * display name (AB#5621), so a screen reader announces "<column>, checked" instead of an unnamed
3196
+ * checkbox.
3197
+ */
3198
+ booleanCellAttributes(column) {
3199
+ const name = this.getDisplayName(column) ?? '';
3200
+ const cached = this.booleanCellAttributeCache.get(column);
3201
+ if (cached && cached.name === name) {
3202
+ return cached.attributes;
3203
+ }
3204
+ const attributes = name ? { 'aria-label': name } : {};
3205
+ this.booleanCellAttributeCache.set(column, { name, attributes });
3206
+ return attributes;
3207
+ }
2521
3208
  /**
2522
3209
  * Gets all status field configurations for a statusIcons column.
2523
3210
  * Returns an array of StatusFieldConfig, whether the column uses single or multi-field configuration.
@@ -2697,10 +3384,21 @@ class ListViewComponent extends CommandBaseService {
2697
3384
  this._selectedRows = [];
2698
3385
  }
2699
3386
  async onContextMenuSelect(_event) {
2700
- const commandItem = _event.item?.data?.data;
2701
- if (!commandItem) {
3387
+ const data = _event.item?.data?.data;
3388
+ if (!data) {
3389
+ return;
3390
+ }
3391
+ if (isOverflowRowActionData(data)) {
3392
+ const row = this._actionMenuSelectedRow;
3393
+ if (data.entry.commandItem) {
3394
+ await this.navigateAsync(data.entry.commandItem, row);
3395
+ }
3396
+ else {
3397
+ await this.triggerRowAction(data.entry, row);
3398
+ }
2702
3399
  return;
2703
3400
  }
3401
+ const commandItem = data;
2704
3402
  if (this._actionMenuSelectedRow) {
2705
3403
  await this.navigateAsync(commandItem, this._actionMenuSelectedRow);
2706
3404
  }
@@ -2754,6 +3452,27 @@ class ListViewComponent extends CommandBaseService {
2754
3452
  }
2755
3453
  await this.navigateAsync(commandItem, dataItem);
2756
3454
  }
3455
+ /**
3456
+ * Row field naming a row for assistive technology (row menu "Actions for <name>", action
3457
+ * buttons "<action> <name>"). Falls back to `rtWellKnownName`, then `rtId`.
3458
+ */
3459
+ rowLabelField = 'name';
3460
+ /** Human name of a row (`rowLabelField`, `rtWellKnownName`, `rtId`), or '' when unknown. */
3461
+ rowLabel(dataItem) {
3462
+ const row = (dataItem ?? {});
3463
+ for (const key of [this.rowLabelField, 'rtWellKnownName', 'rtId']) {
3464
+ const value = row[key];
3465
+ if (value !== null && value !== undefined && String(value).trim() !== '') {
3466
+ return String(value);
3467
+ }
3468
+ }
3469
+ return '';
3470
+ }
3471
+ /** Accessible name and tooltip of the row menu button. */
3472
+ rowActionsLabel(dataItem) {
3473
+ const name = this.rowLabel(dataItem);
3474
+ return name ? this.messages.rowActionsFor.replace('{name}', name) : this.messages.rowActions;
3475
+ }
2757
3476
  getMenuItemVisible(menuItem, dataItem) {
2758
3477
  const commandItem = menuItem.data;
2759
3478
  if (commandItem) {
@@ -2772,7 +3491,19 @@ class ListViewComponent extends CommandBaseService {
2772
3491
  this._actionMenuSelectedRow = dataItem;
2773
3492
  // Rebuild context menu items with updated disabled state for the current row.
2774
3493
  // A new array reference is needed so Kendo's kendoMenuHierarchyBinding detects the change.
2775
- this._contextMenuItems = this.buildContextMenuItemsWithDisabledState(this._contextMenuCommandItems, dataItem);
3494
+ const overflow = this.rowActionsView(dataItem).menu.map((entry) => ({
3495
+ text: entryMenuText(entry.action),
3496
+ svgIcon: entry.action.icon,
3497
+ data: { mmRowAction: true, entry },
3498
+ disabled: isActionDisabled(entry.action),
3499
+ cssClass: entry.action.danger ? DANGER_MENU_ITEM_CLASS : undefined,
3500
+ }));
3501
+ const contextItems = this.contextMenuType === 'actionMenu'
3502
+ ? this.buildContextMenuItemsWithDisabledState(this._contextMenuCommandItems, dataItem)
3503
+ : [];
3504
+ this._contextMenuItems = overflow.length && contextItems.length
3505
+ ? [...overflow, { separator: true }, ...contextItems]
3506
+ : [...overflow, ...contextItems];
2776
3507
  this.gridContextMenu?.show({
2777
3508
  left: this.clampContextMenuX(e.pageX),
2778
3509
  top: e.pageY,
@@ -2795,6 +3526,7 @@ class ListViewComponent extends CommandBaseService {
2795
3526
  data: commandItem,
2796
3527
  items: childMenuItems,
2797
3528
  disabled: CommandBaseService.getIsDisabled(commandItem, dataItem),
3529
+ cssClass: commandItem.danger ? DANGER_MENU_ITEM_CLASS : undefined,
2798
3530
  });
2799
3531
  }
2800
3532
  }
@@ -2803,6 +3535,95 @@ class ListViewComponent extends CommandBaseService {
2803
3535
  onContextMenuClosed(_event) {
2804
3536
  this._contextMenuSelectedRow = null;
2805
3537
  this._actionMenuSelectedRow = null;
3538
+ // Back to the static items: `hasContextMenuButton` and the column width rely on them.
3539
+ this._contextMenuItems = this.buildMenuItems(this._contextMenuCommandItems);
3540
+ }
3541
+ /**
3542
+ * Row actions of one row (AB#5572): `actionCommandItems` (adapter) followed by `rowActions`,
3543
+ * split into inline buttons and overflow-menu entries (max {@link maxInlineRowActions} slots,
3544
+ * context menu items and `overflow: true` actions force the "…" button).
3545
+ */
3546
+ rowActionsView(dataItem) {
3547
+ const loadingReason = this.isLoading() ? this._messages.rowActionsLoading : null;
3548
+ const resolved = [];
3549
+ for (const commandItem of this._actionCommandItems) {
3550
+ if (commandItem.type === 'separator' || !CommandBaseService.getIsVisibleSync(commandItem, dataItem)) {
3551
+ continue;
3552
+ }
3553
+ resolved.push({ commandItem, action: this.commandItemAction(commandItem, dataItem, loadingReason) });
3554
+ }
3555
+ for (const rowAction of this._rowActions) {
3556
+ const action = resolveListRowAction(rowAction, dataItem);
3557
+ if (!isActionVisible(action)) {
3558
+ continue;
3559
+ }
3560
+ resolved.push({ rowAction, action: loadingReason && !isActionDisabled(action) ? { ...action, disabledReason: loadingReason } : action });
3561
+ }
3562
+ const candidates = resolved.filter(e => !e.action.overflow);
3563
+ const forced = resolved.filter(e => e.action.overflow);
3564
+ const slots = Math.max(1, Math.floor(this.maxInlineRowActions));
3565
+ const needsMenu = forced.length > 0 || candidates.length > slots || this.hasContextMenuButton;
3566
+ const inlineCount = needsMenu ? Math.max(0, slots - 1) : candidates.length;
3567
+ const view = {
3568
+ inline: candidates.slice(0, inlineCount),
3569
+ menu: [...candidates.slice(inlineCount), ...forced],
3570
+ hasMenu: needsMenu,
3571
+ };
3572
+ return this.stableView(dataItem, view);
3573
+ }
3574
+ /** Accessible name of the row action group: "Actions for <row>". */
3575
+ rowActionsGroupLabel(dataItem) {
3576
+ return this.rowActionsLabel(dataItem);
3577
+ }
3578
+ async onInlineRowAction(entry, dataItem) {
3579
+ if (entry.commandItem) {
3580
+ // A routerLink-rendered action navigated already; CommandItems never use MmAction.link.
3581
+ await this.navigateAsync(entry.commandItem, dataItem);
3582
+ return;
3583
+ }
3584
+ // Inline link actions navigate via their own routerLink.
3585
+ await this.triggerRowAction(entry, dataItem, !!entry.action.link);
3586
+ }
3587
+ async triggerRowAction(entry, row, navigated = false) {
3588
+ const action = entry.action;
3589
+ if (isActionDisabled(action)) {
3590
+ return;
3591
+ }
3592
+ if (!navigated && action.link && this.routerForActions) {
3593
+ const commands = typeof action.link.commands === 'string' ? [action.link.commands] : [...action.link.commands];
3594
+ void this.routerForActions.navigate(commands, { queryParams: action.link.queryParams, relativeTo: this.activatedRoute ?? undefined });
3595
+ }
3596
+ this.rowAction.emit({ id: action.id, action, row });
3597
+ await entry.rowAction?.run?.(row);
3598
+ }
3599
+ /** `CommandItem` → `MmAction` adapter (AB#5572): `isDisabled` → reason, `danger`, icon, text. */
3600
+ commandItemAction(commandItem, dataItem, loadingReason) {
3601
+ let disabledReason = null;
3602
+ if (CommandBaseService.getIsDisabled(commandItem, dataItem)) {
3603
+ const reason = typeof commandItem.disabledReason === 'function'
3604
+ ? commandItem.disabledReason(dataItem)
3605
+ : commandItem.disabledReason;
3606
+ disabledReason = reason && reason.trim() ? reason : this._messages.rowActionUnavailable;
3607
+ }
3608
+ return {
3609
+ id: commandItem.id,
3610
+ label: commandItem.text || commandItem.tooltip || commandItem.id,
3611
+ icon: commandItem.svgIcon,
3612
+ danger: !!commandItem.danger,
3613
+ disabledReason: disabledReason ?? loadingReason,
3614
+ };
3615
+ }
3616
+ stableView(dataItem, view) {
3617
+ if (typeof dataItem !== 'object' || dataItem === null) {
3618
+ return view;
3619
+ }
3620
+ const previous = this.rowActionCache.get(dataItem);
3621
+ if (previous && sameEntries(previous.inline, view.inline) && sameEntries(previous.menu, view.menu)
3622
+ && previous.hasMenu === view.hasMenu) {
3623
+ return previous;
3624
+ }
3625
+ this.rowActionCache.set(dataItem, view);
3626
+ return view;
2806
3627
  }
2807
3628
  async onToolbarCommand(commandItem) {
2808
3629
  if (this._selectedRows.length === 1) {
@@ -2835,7 +3656,8 @@ class ListViewComponent extends CommandBaseService {
2835
3656
  text: commandItem.text,
2836
3657
  svgIcon: commandItem.svgIcon,
2837
3658
  data: commandItem,
2838
- items: childMenuItems
3659
+ items: childMenuItems,
3660
+ cssClass: commandItem.danger ? DANGER_MENU_ITEM_CLASS : undefined,
2839
3661
  });
2840
3662
  }
2841
3663
  }
@@ -2856,7 +3678,7 @@ class ListViewComponent extends CommandBaseService {
2856
3678
  */
2857
3679
  commandsIcon = slidersIcon;
2858
3680
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2859
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ListViewComponent, isStandalone: true, selector: "mm-list-view", inputs: { pageSize: "pageSize", skip: "skip", autoPageSize: "autoPageSize", 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", persistListState: "persistListState", listStateKey: "listStateKey", resizable: "resizable", actionsColumnWidth: "actionsColumnWidth", hideCheckboxesBelow: "hideCheckboxesBelow", cardModeBelow: "cardModeBelow", collapseCommandsBelow: "collapseCommandsBelow", rowClass: "rowClass", messages: "messages", selectable: "selectable", columns: "columns" }, outputs: { rowClicked: "rowClicked", resetFilters: "resetFilters" }, host: { properties: { "class.mm-list-view-narrow": "this.isNarrow", "class.mm-list-view-cards": "this.isCardMode" } }, queries: [{ propertyName: "filtersTemplate", first: true, predicate: ListViewFiltersDirective, descendants: true }], 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: "<!-- Shared cell renderer (AB#4930): used by the regular grid columns AND the\n card-mode body lines, so both render every dataType identically. -->\n<ng-template #cellContent let-element=\"element\" let-column=\"column\">\n @if (column.formatter) {\n {{ getFormattedValue(element, column) }}\n } @else {\n @switch (column.dataType) {\n @case ('boolean') {\n <kendo-checkbox type=\"checkbox\" [checkedState]=\"$any(getValue(element, column))\" [disabled]=\"true\" />\n }\n @case ('iso8601') {\n {{ $any(getValue(element, column)) | date:column.format }}\n }\n @case ('bytes') {\n {{ $any(getValue(element, column)) | bytesToSize }}\n }\n @case ('statusIcons') {\n <span class=\"status-icons-cell\">\n @for (fieldConfig of getStatusFields(column); track fieldConfig.field) {\n @if (getStatusIconMapping(element, 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(element, column) }}</code>\n <span class=\"cron-description\">{{ getCronHumanReadable(getValue(element, column)) }}</span>\n </span>\n }\n @case ('numeric') {\n {{ $any(getValue(element, column)) | number:column.format }}\n }\n @case ('progressBar') {\n <span class=\"progress-bar-cell\">\n <span class=\"progress-bar-track\">\n <span class=\"progress-bar-fill\" [style.width.%]=\"getValue(element, column)\"></span>\n </span>\n <span class=\"progress-bar-label\">{{ getValue(element, column) }}%</span>\n </span>\n }\n @case ('badge') {\n @if (getBadgeMapping(element, column); as badge) {\n <span\n class=\"badge-cell\"\n [title]=\"badge.tooltip ?? ''\"\n [style.color]=\"badge.color\"\n [style.background]=\"badge.backgroundColor\"\n [style.borderColor]=\"badge.borderColor ?? badge.backgroundColor\">\n {{ badge.label ?? getValue(element, column) }}\n </span>\n } @else if (!column.badgeHideUnmapped) {\n <span class=\"badge-cell badge-cell-default\">{{ getValue(element, column) }}</span>\n }\n }\n @case ('component') {\n @if (column.cellComponent) {\n <ng-container *ngComponentOutlet=\"column.cellComponent; inputs: getCellInputs(element, column)\" />\n }\n }\n @default {\n {{ getValue(element, column) }}\n }\n }\n }\n</ng-template>\n\n<!-- Row actions (AB#4930): shared by the actions column and the card header. -->\n<ng-template #rowActions let-dataItem=\"dataItem\">\n @if (_actionMenuItems.length > 0) {\n @for (menuItem of _actionMenuItems; track menuItem.text) {\n @if (!menuItem.separator && getMenuItemVisible(menuItem, dataItem)) {\n <button kendoButton themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"menuItem.svgIcon!\"\n [title]=\"menuItem.text ?? ''\"\n [disabled]=\"getMenuItemDisabled(menuItem, dataItem) || 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\n<kendo-grid\n mmListViewDataBinding\n [loading]=\"isLoading()\"\n [pageSize]=\"effectivePageSize()\" [selectable]=\"selectable\" (pageChange)=\"onPageChange($event)\"\n [skip]=\"skip\" (selectionChange)=\"onRowSelect($event)\" (cellClick)=\"onCellClick($event)\"\n [pageable]=\"effectivePageable\"\n [sortable]=\"sortable\"\n [filterable]=\"_showRowFilter && !isCardMode\"\n [resizable]=\"resizable\"\n [rowClass]=\"rowClass ?? defaultRowClass\"\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.children && commandItem.children.length > 0 && commandItem.onClick) {\n <kendo-splitbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n (buttonClick)=\"onToolbarCommand(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-splitbutton>\n } @else if (commandItem.children && commandItem.children.length > 0) {\n <kendo-dropdownbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-dropdownbutton>\n } @else if (commandItem.svgIcon) {\n <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n </button>\n } @else {\n <button kendoTooltip kendoButton themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [disabled]=\"getToolbarItemDisabled(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 <!-- Host scope/filter controls (view switches and the like). They steer the\n table, so they sit in the table's own band instead of a second strip\n stacked above the grid. -->\n @if (filtersTemplate) {\n <!-- A rule between the host's actions and its filters: both sit on the\n left of the same band, but one acts on records and the other changes\n what the list shows. Only drawn when actions precede them. -->\n @if (leftToolbarActions.length > 0) {\n <kendo-separator class=\"mm-toolbar-filters-separator\"></kendo-separator>\n }\n <div class=\"mm-toolbar-filters\">\n <ng-container [ngTemplateOutlet]=\"filtersTemplate.templateRef\"></ng-container>\n </div>\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 mm-search-input\"\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.children && commandItem.children.length > 0 && commandItem.onClick) {\n <kendo-splitbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n (buttonClick)=\"onToolbarCommand(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-splitbutton>\n } @else if (commandItem.children && commandItem.children.length > 0) {\n <kendo-dropdownbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-dropdownbutton>\n } @else if (commandItem.svgIcon) {\n <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n </button>\n } @else {\n <button kendoTooltip kendoButton themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [disabled]=\"getToolbarItemDisabled(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 <!-- Commands: laid out while there is room, collapsed into one menu once\n the list gets narrow. Same behaviour in every host app \u2014 a list this\n wide has space for five buttons, and a list this narrow does not. -->\n @if (commandsCollapsed) {\n <kendo-dropdownbutton class=\"mm-toolbar-commands\" [data]=\"toolbarCommands\" textField=\"text\" [svgIcon]=\"commandsIcon\"\n fillMode=\"flat\" themeColor=\"primary\" [disabled]=\"isLoading()\"\n [title]=\"_messages.commands\"\n (itemClick)=\"onCommand($any($event).id)\"></kendo-dropdownbutton>\n } @else {\n @for (command of toolbarCommands; track command.id) {\n @switch (command.id) {\n @case ('excel') {\n <button kendoTooltip kendoGridExcelCommand themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" [disabled]=\"isLoading()\" [title]=\"command.text\"></button>\n }\n @case ('pdf') {\n <button kendoTooltip kendoGridPDFCommand themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" [disabled]=\"isLoading()\" [title]=\"command.text\"></button>\n }\n @default {\n <button kendoTooltip kendoButton themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" (click)=\"onCommand(command.id)\"\n [disabled]=\"isLoading()\" [title]=\"command.text\"></button>\n }\n }\n }\n }\n </ng-template>\n\n @if (showCheckboxColumn()) {\n <kendo-grid-checkbox-column [showSelectAll]=\"showRowSelectAllCheckBox\"\n [width]=\"effectiveCheckboxColumnWidth\"></kendo-grid-checkbox-column>\n }\n\n @if (!isCardMode) {\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(getEffectiveWidth(column))\"\n [minResizableWidth]=\"column.minWidth ?? 10\"\n [hidden]=\"isColumnHidden(column)\"\n [sortable]=\"column.sortable !== false\"\n [filterable]=\"column.filterable !== false\"\n [class]=\"alignClass(column)\"\n [headerClass]=\"alignClass(column)\"\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 } @else if (dataItem?.text) {\n <span>{{ dataItem.text }}</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 if (column.dataType === 'numericRange') {\n <span class=\"numeric-range-filter\">\n <kendo-numerictextbox\n [value]=\"$any(getRangeFilterValue(column, 'gte'))\"\n (valueChange)=\"onRangeFilterChange($event, column, 'gte')\"\n [spinners]=\"false\"\n [decimals]=\"2\"\n placeholder=\"From\"\n size=\"small\"\n ></kendo-numerictextbox>\n <span class=\"range-separator\">\u2013</span>\n <kendo-numerictextbox\n [value]=\"$any(getRangeFilterValue(column, 'lte'))\"\n (valueChange)=\"onRangeFilterChange($event, column, 'lte')\"\n [spinners]=\"false\"\n [decimals]=\"2\"\n placeholder=\"To\"\n size=\"small\"\n ></kendo-numerictextbox>\n </span>\n } @else {\n @switch (getFilterType(column)) {\n @case ('numeric') {\n <kendo-grid-numeric-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"true\" [operator]=\"column.filterOperator || 'eq'\"\n [spinners]=\"!isCompactFilter(column)\" [class.mm-filter-compact]=\"isCompactFilter(column)\"></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]=\"true\" [operator]=\"column.filterOperator || 'eq'\"\n [class.mm-filter-compact]=\"isCompactFilter(column)\"></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 <span\n [class.mm-cell-truncate]=\"column.truncate\"\n [attr.title]=\"column.truncate ? getCellTitle(dataItem, column) : null\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: column }\"\n ></ng-container>\n </span>\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]=\"effectiveActionsColumnWidth\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"rowActions\"\n [ngTemplateOutletContext]=\"{ dataItem: dataItem }\"\n ></ng-container>\n </ng-template>\n </kendo-grid-command-column>\n }\n } @else {\n <!-- Card mode (AB#4930): one full-width column renders the whole row as a\n stacked card \u2014 title from the first column, labeled lines for the\n rest (empty values skipped), row actions in the card header. -->\n <kendo-grid-column [sortable]=\"false\" [filterable]=\"false\" title=\"\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <div class=\"mm-card\">\n <div class=\"mm-card-header\">\n @if (cardTitleColumn; as titleColumn) {\n <span class=\"mm-card-title\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: titleColumn }\"\n ></ng-container>\n </span>\n }\n <span class=\"mm-card-actions\">\n <ng-container\n [ngTemplateOutlet]=\"rowActions\"\n [ngTemplateOutletContext]=\"{ dataItem: dataItem }\"\n ></ng-container>\n </span>\n </div>\n <div class=\"mm-card-fields\">\n @for (column of cardBodyColumns; track column.field) {\n @if (hasCardValue(dataItem, column)) {\n <div class=\"mm-card-field\">\n <span class=\"mm-card-label\">{{ getDisplayName(column) | pascalCase }}</span>\n <span class=\"mm-card-value\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: column }\"\n ></ng-container>\n </span>\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n </kendo-grid-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\"\n disabledField=\"disabled\"\n (popupClose)=\"onContextMenuClosed($event)\"\n (select)=\"onContextMenuSelect($event)\"\n></kendo-contextmenu>\n", styles: [":host{display:flex;flex-direction:column;min-height:0}:host>kendo-grid{flex:1;min-height:0}.mm-search-input{width:165px}:host ::ng-deep .k-grid th:has(input[type=checkbox]),:host ::ng-deep .k-grid td:has(>kendo-checkbox){text-overflow:clip}:host ::ng-deep .k-command-cell{white-space:nowrap;overflow:hidden;vertical-align:middle}:host ::ng-deep .k-command-cell .k-button{display:inline-flex;vertical-align:middle;margin:0}:host ::ng-deep .k-command-cell .k-button+.k-button{margin-left:4px}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar{flex-wrap:wrap;row-gap:6px}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar .mm-search-input{width:100%;order:10}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar kendo-grid-spacer{display:none}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar .mm-toolbar-commands{margin-left:auto}:host ::ng-deep .k-grid td.mm-col-align-right{text-align:right;font-variant-numeric:tabular-nums}:host ::ng-deep .k-grid td.mm-col-align-center{text-align:center}:host ::ng-deep .k-grid th.mm-col-align-right .k-cell-inner>.k-link{justify-content:flex-end}:host ::ng-deep .k-grid th.mm-col-align-center .k-cell-inner>.k-link{justify-content:center}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-wrapper{gap:2px}:host ::ng-deep .k-filter-row .mm-filter-compact .k-datepicker>.k-input-button{display:none}:host ::ng-deep .k-filter-row .mm-filter-compact .k-input-inner{padding-left:4px;padding-right:4px;font-size:12px}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-operator .k-dropdown-operator{width:26px;min-width:0}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-operator .k-dropdown-operator .k-input-button{padding:2px}.mm-cell-truncate{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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,:host ::ng-deep .status-filter-dropdown .k-input-value-text>span{font-size:14px}.numeric-range-filter{display:flex;align-items:center;gap:4px}.numeric-range-filter kendo-numerictextbox{flex:1;min-width:0}.numeric-range-filter .range-separator{flex-shrink:0;opacity:.6}.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)}.badge-cell{display:inline-block;padding:2px 10px;font-size:.75rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:12px;border:1px solid var(--mm-badge-default-border, transparent);background:var(--mm-badge-default-bg, rgba(127, 127, 127, .15));color:var(--mm-badge-default-color, inherit);white-space:nowrap;line-height:1.4}.badge-cell-default{opacity:.7;font-style:italic}.progress-bar-cell{display:inline-flex;align-items:center;gap:8px;width:100%}.progress-bar-cell .progress-bar-track{flex:1;height:8px;background:var(--mm-progress-track-bg, rgba(255, 255, 255, .1));border-radius:4px;overflow:hidden}.progress-bar-cell .progress-bar-fill{display:block;height:100%;background:var(--mm-progress-fill-color, #10b981);border-radius:4px;transition:width .3s ease}.progress-bar-cell .progress-bar-label{min-width:40px;text-align:right;font-size:.85em}: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}:host-context(.k-pdf-export) .badge-cell{background:transparent!important;border:none!important;color:inherit!important;padding:0!important;border-radius:0!important;text-transform:none!important;font-weight:inherit!important;letter-spacing:0!important;font-size:inherit!important}:host(.mm-list-view-cards) ::ng-deep .k-grid-header{display:none}:host(.mm-list-view-cards) ::ng-deep .k-grid td,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-td{border:none;background:transparent;padding:4px 2px;white-space:normal}:host(.mm-list-view-cards) ::ng-deep .k-grid td:has(>kendo-checkbox),:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-td:has(>kendo-checkbox){padding-left:2px;padding-right:0}:host(.mm-list-view-cards) ::ng-deep .k-grid colgroup>col:first-child:not(:only-child){width:32px!important}:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row:hover,:host(.mm-list-view-cards) ::ng-deep .k-grid tr:hover{background:transparent}:host(.mm-list-view-cards) ::ng-deep .k-grid tr.k-selected .mm-card,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row.k-selected .mm-card{border-color:var(--kendo-color-primary, #ff6358)}:host(.mm-list-view-cards) ::ng-deep .k-grid tr.k-selected>td,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background:transparent}.mm-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:8px;padding:10px 12px}.mm-card-header{display:flex;align-items:center;gap:8px}.mm-card-title{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}.mm-card-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.mm-card-fields{display:flex;flex-direction:column;gap:3px}.mm-card-field{display:flex;align-items:baseline;gap:8px;font-size:.9em}.mm-card-label{flex:0 0 38%;max-width:160px;color:var(--kendo-color-subtle, #666666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mm-card-value{flex:1;min-width:0;overflow-wrap:anywhere}::ng-deep .k-grid-toolbar .mm-toolbar-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}::ng-deep .k-grid-toolbar .mm-toolbar-filters-separator{align-self:center;height:22px;margin:0 4px;border-left:1px solid var(--theme-border-subtle, rgba(0, 0, 0, .16));border-top:none;width:0}\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", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { 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", "variant"], 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: "component", type: 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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PascalCasePipe, name: "pascalCase" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: BytesToSizePipe, name: "bytesToSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3681
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ListViewComponent, isStandalone: true, selector: "mm-list-view", inputs: { pageSize: "pageSize", skip: "skip", autoPageSize: "autoPageSize", rowIsClickable: "rowIsClickable", showRowCheckBoxes: "showRowCheckBoxes", showRowSelectAllCheckBox: "showRowSelectAllCheckBox", contextMenuType: "contextMenuType", leftToolbarActions: "leftToolbarActions", rightToolbarActions: "rightToolbarActions", actionCommandItems: "actionCommandItems", contextMenuCommandItems: "contextMenuCommandItems", rowActions: "rowActions", maxInlineRowActions: "maxInlineRowActions", excelExportFileName: "excelExportFileName", pdfExportFileName: "pdfExportFileName", pageable: "pageable", sortable: "sortable", rowFilterEnabled: "rowFilterEnabled", searchTextBoxEnabled: "searchTextBoxEnabled", persistListState: "persistListState", listStateKey: "listStateKey", resizable: "resizable", actionsColumnWidth: "actionsColumnWidth", hideCheckboxesBelow: "hideCheckboxesBelow", cardModeBelow: "cardModeBelow", collapseCommandsBelow: "collapseCommandsBelow", hasExternalFilters: "hasExternalFilters", rowClass: "rowClass", messages: "messages", selectable: "selectable", columns: "columns", rowLabelField: "rowLabelField" }, outputs: { rowClicked: "rowClicked", rowAction: "rowAction", resetFilters: "resetFilters" }, host: { properties: { "class.mm-list-view-narrow": "this.isNarrow", "class.mm-list-view-cards": "this.isCardMode" } }, queries: [{ propertyName: "filtersTemplate", first: true, predicate: ListViewFiltersDirective, descendants: true }], 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: "<!-- Shared cell renderer (AB#4930): used by the regular grid columns AND the\n card-mode body lines, so both render every dataType identically. -->\n<ng-template #cellContent let-element=\"element\" let-column=\"column\">\n @if (column.formatter) {\n {{ getFormattedValue(element, column) }}\n } @else {\n @switch (column.dataType) {\n @case ('boolean') {\n <!-- Read-only marker: named after its column so a screen reader says what is checked (AB#5621). -->\n <kendo-checkbox type=\"checkbox\" [checkedState]=\"$any(getValue(element, column))\" [disabled]=\"true\"\n [inputAttributes]=\"booleanCellAttributes(column)\" />\n }\n @case ('iso8601') {\n {{ $any(getValue(element, column)) | date:column.format }}\n }\n @case ('bytes') {\n {{ $any(getValue(element, column)) | bytesToSize }}\n }\n @case ('statusIcons') {\n <span class=\"status-icons-cell\">\n @for (fieldConfig of getStatusFields(column); track fieldConfig.field) {\n @if (getStatusIconMapping(element, fieldConfig); as mapping) {\n <!-- Icon-only status: the mapping's tooltip is also its accessible name (AB#5621). -->\n <span\n class=\"status-icon\"\n role=\"img\"\n [title]=\"mapping.tooltip\"\n [attr.aria-label]=\"mapping.tooltip || null\"\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(element, column) }}</code>\n <span class=\"cron-description\">{{ getCronHumanReadable(getValue(element, column)) }}</span>\n </span>\n }\n @case ('numeric') {\n {{ $any(getValue(element, column)) | number:column.format }}\n }\n @case ('progressBar') {\n <span class=\"progress-bar-cell\">\n <span class=\"progress-bar-track\">\n <span class=\"progress-bar-fill\" [style.width.%]=\"getValue(element, column)\"></span>\n </span>\n <span class=\"progress-bar-label\">{{ getValue(element, column) }}%</span>\n </span>\n }\n @case ('badge') {\n @if (getBadgeMapping(element, column); as badge) {\n <span\n class=\"badge-cell\"\n [title]=\"badge.tooltip ?? ''\"\n [style.color]=\"badge.color\"\n [style.background]=\"badge.backgroundColor\"\n [style.borderColor]=\"badge.borderColor ?? badge.backgroundColor\">\n {{ badge.label ?? getValue(element, column) }}\n </span>\n } @else if (!column.badgeHideUnmapped) {\n <span class=\"badge-cell badge-cell-default\">{{ getValue(element, column) }}</span>\n }\n }\n @case ('component') {\n @if (column.cellComponent) {\n <ng-container *ngComponentOutlet=\"column.cellComponent; inputs: getCellInputs(element, column)\" />\n }\n }\n @default {\n {{ getValue(element, column) }}\n }\n }\n }\n</ng-template>\n\n<!-- Row actions (AB#4930, AB#5572): shared by the actions column and the card header. One MmAction\n per action (CommandItems via adapter): neutral icon buttons, danger colour only for destructive\n actions, max `maxInlineRowActions` slots, the rest (and the context menu) behind \"\u2026\". Disabled\n actions stay focusable and announce their reason (mm-action-button). -->\n<ng-template #rowActions let-dataItem=\"dataItem\">\n @let view = rowActionsView(dataItem);\n @if (view.inline.length > 0 || view.hasMenu) {\n <span class=\"mm-list-view-row-actions\" role=\"group\" [attr.aria-label]=\"rowActionsGroupLabel(dataItem)\">\n @for (entry of view.inline; track entry.action.id) {\n <!-- Clicks never reach the grid (no row selection / row navigation from an action). -->\n <mm-action-button [action]=\"entry.action\" [targetLabel]=\"rowLabel(dataItem)\" context=\"row\" display=\"icon\"\n (click)=\"$event.stopPropagation()\"\n (triggered)=\"onInlineRowAction(entry, dataItem)\" />\n }\n @if (view.hasMenu) {\n <button kendoButton themeColor=\"base\" fillMode=\"flat\" size=\"small\" class=\"mm-list-view-row-actions__more\"\n [svgIcon]=\"moreVerticalIcon\" data-action=\"more\"\n [title]=\"rowActionsLabel(dataItem)\" [attr.aria-label]=\"rowActionsLabel(dataItem)\" aria-haspopup=\"menu\"\n [disabled]=\"isLoading()\" (click)=\"$event.stopPropagation(); onContextMenu(dataItem, $event)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<kendo-grid\n mmListViewDataBinding\n [loading]=\"isLoading()\"\n [pageSize]=\"effectivePageSize()\" [selectable]=\"selectable\" (pageChange)=\"onPageChange($event)\"\n [skip]=\"skip\" (selectionChange)=\"onRowSelect($event)\" (cellClick)=\"onCellClick($event)\"\n [pageable]=\"effectivePageable\"\n [sortable]=\"sortable\"\n [filterable]=\"_showRowFilter && !isCardMode\"\n [resizable]=\"resizable\"\n [rowClass]=\"rowClass ?? defaultRowClass\"\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.children && commandItem.children.length > 0 && commandItem.onClick) {\n <kendo-splitbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [buttonAttributes]=\"toolbarItemButtonAttributes(commandItem)\"\n (buttonClick)=\"onToolbarCommand(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-splitbutton>\n } @else if (commandItem.children && commandItem.children.length > 0) {\n <kendo-dropdownbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [buttonAttributes]=\"toolbarItemButtonAttributes(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-dropdownbutton>\n } @else if (commandItem.svgIcon) {\n <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [attr.aria-label]=\"toolbarItemAriaLabel(commandItem)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n </button>\n } @else {\n <button kendoTooltip kendoButton themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [attr.aria-label]=\"toolbarItemAriaLabel(commandItem)\"\n [disabled]=\"getToolbarItemDisabled(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 <!-- Host scope/filter controls (view switches and the like). They steer the\n table, so they sit in the table's own band instead of a second strip\n stacked above the grid. -->\n @if (filtersTemplate) {\n <!-- A rule between the host's actions and its filters: both sit on the\n left of the same band, but one acts on records and the other changes\n what the list shows. Only drawn when actions precede them. -->\n @if (leftToolbarActions.length > 0) {\n <kendo-separator class=\"mm-toolbar-filters-separator\"></kendo-separator>\n }\n <div class=\"mm-toolbar-filters\">\n <ng-container [ngTemplateOutlet]=\"filtersTemplate.templateRef\"></ng-container>\n </div>\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 mm-search-input\"\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.children && commandItem.children.length > 0 && commandItem.onClick) {\n <kendo-splitbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [buttonAttributes]=\"toolbarItemButtonAttributes(commandItem)\"\n (buttonClick)=\"onToolbarCommand(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-splitbutton>\n } @else if (commandItem.children && commandItem.children.length > 0) {\n <kendo-dropdownbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [buttonAttributes]=\"toolbarItemButtonAttributes(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-dropdownbutton>\n } @else if (commandItem.svgIcon) {\n <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [attr.aria-label]=\"toolbarItemAriaLabel(commandItem)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n </button>\n } @else {\n <button kendoTooltip kendoButton themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [attr.aria-label]=\"toolbarItemAriaLabel(commandItem)\"\n [disabled]=\"getToolbarItemDisabled(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 <!-- Commands: laid out while there is room, collapsed into one menu once\n the list gets narrow. Same behaviour in every host app \u2014 a list this\n wide has space for five buttons, and a list this narrow does not. -->\n @if (commandsCollapsed) {\n <kendo-dropdownbutton class=\"mm-toolbar-commands\" [data]=\"toolbarCommands\" textField=\"text\" [svgIcon]=\"commandsIcon\"\n fillMode=\"flat\" themeColor=\"primary\" [disabled]=\"isLoading()\"\n [title]=\"_messages.commands\"\n [buttonAttributes]=\"commandsMenuButtonAttributes\"\n (itemClick)=\"onCommand($any($event).id)\"></kendo-dropdownbutton>\n } @else {\n @for (command of toolbarCommands; track command.id) {\n @switch (command.id) {\n @case ('excel') {\n <button kendoTooltip kendoGridExcelCommand themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" [disabled]=\"isLoading()\" [title]=\"command.text\"\n [attr.aria-label]=\"command.text\" [attr.data-command]=\"command.id\"></button>\n }\n @case ('pdf') {\n <button kendoTooltip kendoGridPDFCommand themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" [disabled]=\"isLoading()\" [title]=\"command.text\"\n [attr.aria-label]=\"command.text\" [attr.data-command]=\"command.id\"></button>\n }\n @default {\n <!-- The row filter is a toggle: its on state is shown (k-selected) and announced. -->\n <button kendoTooltip kendoButton themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" (click)=\"onCommand(command.id)\"\n [class.k-selected]=\"command.id === 'rowFilter' && _showRowFilter\"\n [attr.aria-pressed]=\"command.id === 'rowFilter' ? _showRowFilter : null\"\n [attr.data-command]=\"command.id\"\n [disabled]=\"isLoading()\" [title]=\"command.text\" [attr.aria-label]=\"command.text\"></button>\n }\n }\n }\n }\n </ng-template>\n\n @if (showCheckboxColumn()) {\n <kendo-grid-checkbox-column [showSelectAll]=\"showRowSelectAllCheckBox\"\n [width]=\"effectiveCheckboxColumnWidth\"></kendo-grid-checkbox-column>\n }\n\n @if (!isCardMode) {\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(getEffectiveWidth(column))\"\n [minResizableWidth]=\"column.minWidth ?? 10\"\n [hidden]=\"isColumnHidden(column)\"\n [sortable]=\"column.sortable !== false\"\n [filterable]=\"column.filterable !== false\"\n [class]=\"alignClass(column)\"\n [headerClass]=\"alignClass(column)\"\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 role=\"img\" [attr.aria-label]=\"dataItem.text || mapping.tooltip || null\" [title]=\"dataItem.text || mapping.tooltip\"\n [style.color]=\"mapping.color\">\n <kendo-svg-icon [icon]=\"mapping.icon\" [size]=\"'small'\"></kendo-svg-icon>\n </span>\n </span>\n } @else if (dataItem?.text) {\n <span>{{ dataItem.text }}</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 if (column.dataType === 'numericRange') {\n <span class=\"numeric-range-filter\">\n <kendo-numerictextbox\n [value]=\"$any(getRangeFilterValue(column, 'gte'))\"\n (valueChange)=\"onRangeFilterChange($event, column, 'gte')\"\n [spinners]=\"false\"\n [decimals]=\"2\"\n placeholder=\"From\"\n size=\"small\"\n ></kendo-numerictextbox>\n <span class=\"range-separator\">\u2013</span>\n <kendo-numerictextbox\n [value]=\"$any(getRangeFilterValue(column, 'lte'))\"\n (valueChange)=\"onRangeFilterChange($event, column, 'lte')\"\n [spinners]=\"false\"\n [decimals]=\"2\"\n placeholder=\"To\"\n size=\"small\"\n ></kendo-numerictextbox>\n </span>\n } @else {\n @switch (getFilterType(column)) {\n @case ('numeric') {\n <kendo-grid-numeric-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"true\" [operator]=\"column.filterOperator || 'eq'\"\n [spinners]=\"!isCompactFilter(column)\" [class.mm-filter-compact]=\"isCompactFilter(column)\"></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]=\"true\" [operator]=\"column.filterOperator || 'eq'\"\n [class.mm-filter-compact]=\"isCompactFilter(column)\"></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 <span\n [class.mm-cell-truncate]=\"column.truncate\"\n [attr.title]=\"column.truncate ? getCellTitle(dataItem, column) : null\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: column }\"\n ></ng-container>\n </span>\n </ng-template>\n </kendo-grid-column>\n }\n\n @if (hasRowActions) {\n <kendo-grid-command-column [title]=\"_messages.actionsColumnTitle\" [width]=\"effectiveActionsColumnWidth\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"rowActions\"\n [ngTemplateOutletContext]=\"{ dataItem: dataItem }\"\n ></ng-container>\n </ng-template>\n </kendo-grid-command-column>\n }\n } @else {\n <!-- Card mode (AB#4930): one full-width column renders the whole row as a\n stacked card \u2014 title from the first column, labeled lines for the\n rest (empty values skipped), row actions in the card header. -->\n <kendo-grid-column [sortable]=\"false\" [filterable]=\"false\" title=\"\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <div class=\"mm-card\">\n <div class=\"mm-card-header\">\n @if (cardTitleColumn; as titleColumn) {\n <span class=\"mm-card-title\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: titleColumn }\"\n ></ng-container>\n </span>\n }\n <span class=\"mm-card-actions\">\n <ng-container\n [ngTemplateOutlet]=\"rowActions\"\n [ngTemplateOutletContext]=\"{ dataItem: dataItem }\"\n ></ng-container>\n </span>\n </div>\n <div class=\"mm-card-fields\">\n @for (column of cardBodyColumns; track column.field) {\n @if (hasCardValue(dataItem, column)) {\n <div class=\"mm-card-field\">\n <span class=\"mm-card-label\">{{ getDisplayName(column) | pascalCase }}</span>\n <span class=\"mm-card-value\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: column }\"\n ></ng-container>\n </span>\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n </kendo-grid-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\"\n disabledField=\"disabled\"\n cssClassField=\"cssClass\"\n (popupClose)=\"onContextMenuClosed($event)\"\n (select)=\"onContextMenuSelect($event)\"\n></kendo-contextmenu>\n", styles: [":host{display:flex;flex-direction:column;min-height:0}:host>kendo-grid{flex:1;min-height:0}.mm-search-input{width:165px}:host ::ng-deep .k-grid th:has(input[type=checkbox]),:host ::ng-deep .k-grid td:has(>kendo-checkbox){text-overflow:clip}:host ::ng-deep .k-command-cell{white-space:nowrap;overflow:hidden;vertical-align:middle}:host ::ng-deep .k-command-cell .k-button{display:inline-flex;vertical-align:middle;margin:0}:host ::ng-deep .k-command-cell .k-button+.k-button{margin-left:4px}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar{flex-wrap:wrap;row-gap:6px}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar .mm-search-input{width:100%;order:10}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar kendo-grid-spacer{display:none}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar .mm-toolbar-commands{margin-left:auto}:host ::ng-deep .k-grid td.mm-col-align-right{text-align:right;font-variant-numeric:tabular-nums}:host ::ng-deep .k-grid td.mm-col-align-center{text-align:center}:host ::ng-deep .k-grid th.mm-col-align-right .k-cell-inner>.k-link{justify-content:flex-end}:host ::ng-deep .k-grid th.mm-col-align-center .k-cell-inner>.k-link{justify-content:center}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-wrapper{gap:2px}:host ::ng-deep .k-filter-row .mm-filter-compact .k-datepicker>.k-input-button{display:none}:host ::ng-deep .k-filter-row .mm-filter-compact .k-input-inner{padding-left:4px;padding-right:4px;font-size:12px}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-operator .k-dropdown-operator{width:26px;min-width:0}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-operator .k-dropdown-operator .k-input-button{padding:2px}.mm-cell-truncate{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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,:host ::ng-deep .status-filter-dropdown .k-input-value-text>span{font-size:14px}.numeric-range-filter{display:flex;align-items:center;gap:4px}.numeric-range-filter kendo-numerictextbox{flex:1;min-width:0}.numeric-range-filter .range-separator{flex-shrink:0;opacity:.6}.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)}.badge-cell{display:inline-block;padding:2px 10px;font-size:.75rem;font-weight:600;border-radius:12px;border:1px solid var(--mm-badge-default-border, transparent);background:var(--mm-badge-default-bg, rgba(127, 127, 127, .15));color:var(--mm-badge-default-color, inherit);white-space:nowrap;line-height:1.4}.badge-cell-default{opacity:.7;font-style:italic}.progress-bar-cell{display:inline-flex;align-items:center;gap:8px;width:100%}.progress-bar-cell .progress-bar-track{flex:1;height:8px;background:var(--mm-progress-track-bg, rgba(255, 255, 255, .1));border-radius:4px;overflow:hidden}.progress-bar-cell .progress-bar-fill{display:block;height:100%;background:var(--mm-progress-fill-color, #10b981);border-radius:4px;transition:width .3s ease}.progress-bar-cell .progress-bar-label{min-width:40px;text-align:right;font-size:.85em}: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}:host-context(.k-pdf-export) .badge-cell{background:transparent!important;border:none!important;color:inherit!important;padding:0!important;border-radius:0!important;text-transform:none!important;font-weight:inherit!important;font-size:inherit!important}:host(.mm-list-view-cards) ::ng-deep .k-grid-header{display:none}:host(.mm-list-view-cards) ::ng-deep .k-grid td,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-td{border:none;background:transparent;padding:4px 2px;white-space:normal}:host(.mm-list-view-cards) ::ng-deep .k-grid td:has(>kendo-checkbox),:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-td:has(>kendo-checkbox){padding-left:2px;padding-right:0}:host(.mm-list-view-cards) ::ng-deep .k-grid colgroup>col:first-child:not(:only-child){width:32px!important}:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row:hover,:host(.mm-list-view-cards) ::ng-deep .k-grid tr:hover{background:transparent}:host(.mm-list-view-cards) ::ng-deep .k-grid tr.k-selected .mm-card,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row.k-selected .mm-card{border-color:var(--kendo-color-primary, #ff6358)}:host(.mm-list-view-cards) ::ng-deep .k-grid tr.k-selected>td,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background:transparent}.mm-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:8px;padding:10px 12px}.mm-card-header{display:flex;align-items:center;gap:8px}.mm-card-title{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}.mm-card-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.mm-card-fields{display:flex;flex-direction:column;gap:3px}.mm-card-field{display:flex;align-items:baseline;gap:8px;font-size:.9em}.mm-card-label{flex:0 0 38%;max-width:160px;color:var(--kendo-color-subtle, #666666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mm-card-value{flex:1;min-width:0;overflow-wrap:anywhere}::ng-deep .k-grid-toolbar .mm-toolbar-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}::ng-deep .k-grid-toolbar .mm-toolbar-filters-separator{align-self:center;height:22px;margin:0 4px;border-left:1px solid var(--theme-border-subtle, rgba(0, 0, 0, .16));border-top:none;width:0}::ng-deep .k-menu-group .mm-list-view-menu-item--danger>.k-link,::ng-deep .k-menu-group .mm-list-view-menu-item--danger>.k-menu-link{color:var(--theme-status-error, #c0385f)}.mm-list-view-row-actions{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;vertical-align:middle}.mm-list-view-row-actions .mm-list-view-row-actions__more:focus-visible{outline:none;box-shadow:var(--theme-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #2e8473)}\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", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "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$2.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"], outputs: ["fileCreated"] }, { kind: "component", type: i1$2.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$2.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }, { kind: "component", type: i1$2.PDFMarginComponent, selector: "kendo-grid-pdf-margin" }, { kind: "component", type: i1$2.PDFCommandDirective, selector: "[kendoGridPDFCommand]" }, { kind: "directive", type: i1$2.PDFTemplateDirective, selector: "[kendoGridPDFTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { 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: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], 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: "component", type: 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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionButtonComponent, selector: "mm-action-button", inputs: ["action", "targetLabel", "context", "display", "primary"], outputs: ["triggered"] }, { kind: "pipe", type: PascalCasePipe, name: "pascalCase" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: BytesToSizePipe, name: "bytesToSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2860
3682
  }
2861
3683
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListViewComponent, decorators: [{
2862
3684
  type: Component,
@@ -2894,8 +3716,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
2894
3716
  ItemTemplateDirective,
2895
3717
  NumericTextBoxComponent,
2896
3718
  NgComponentOutlet,
2897
- NgTemplateOutlet
2898
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Shared cell renderer (AB#4930): used by the regular grid columns AND the\n card-mode body lines, so both render every dataType identically. -->\n<ng-template #cellContent let-element=\"element\" let-column=\"column\">\n @if (column.formatter) {\n {{ getFormattedValue(element, column) }}\n } @else {\n @switch (column.dataType) {\n @case ('boolean') {\n <kendo-checkbox type=\"checkbox\" [checkedState]=\"$any(getValue(element, column))\" [disabled]=\"true\" />\n }\n @case ('iso8601') {\n {{ $any(getValue(element, column)) | date:column.format }}\n }\n @case ('bytes') {\n {{ $any(getValue(element, column)) | bytesToSize }}\n }\n @case ('statusIcons') {\n <span class=\"status-icons-cell\">\n @for (fieldConfig of getStatusFields(column); track fieldConfig.field) {\n @if (getStatusIconMapping(element, 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(element, column) }}</code>\n <span class=\"cron-description\">{{ getCronHumanReadable(getValue(element, column)) }}</span>\n </span>\n }\n @case ('numeric') {\n {{ $any(getValue(element, column)) | number:column.format }}\n }\n @case ('progressBar') {\n <span class=\"progress-bar-cell\">\n <span class=\"progress-bar-track\">\n <span class=\"progress-bar-fill\" [style.width.%]=\"getValue(element, column)\"></span>\n </span>\n <span class=\"progress-bar-label\">{{ getValue(element, column) }}%</span>\n </span>\n }\n @case ('badge') {\n @if (getBadgeMapping(element, column); as badge) {\n <span\n class=\"badge-cell\"\n [title]=\"badge.tooltip ?? ''\"\n [style.color]=\"badge.color\"\n [style.background]=\"badge.backgroundColor\"\n [style.borderColor]=\"badge.borderColor ?? badge.backgroundColor\">\n {{ badge.label ?? getValue(element, column) }}\n </span>\n } @else if (!column.badgeHideUnmapped) {\n <span class=\"badge-cell badge-cell-default\">{{ getValue(element, column) }}</span>\n }\n }\n @case ('component') {\n @if (column.cellComponent) {\n <ng-container *ngComponentOutlet=\"column.cellComponent; inputs: getCellInputs(element, column)\" />\n }\n }\n @default {\n {{ getValue(element, column) }}\n }\n }\n }\n</ng-template>\n\n<!-- Row actions (AB#4930): shared by the actions column and the card header. -->\n<ng-template #rowActions let-dataItem=\"dataItem\">\n @if (_actionMenuItems.length > 0) {\n @for (menuItem of _actionMenuItems; track menuItem.text) {\n @if (!menuItem.separator && getMenuItemVisible(menuItem, dataItem)) {\n <button kendoButton themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"menuItem.svgIcon!\"\n [title]=\"menuItem.text ?? ''\"\n [disabled]=\"getMenuItemDisabled(menuItem, dataItem) || 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\n<kendo-grid\n mmListViewDataBinding\n [loading]=\"isLoading()\"\n [pageSize]=\"effectivePageSize()\" [selectable]=\"selectable\" (pageChange)=\"onPageChange($event)\"\n [skip]=\"skip\" (selectionChange)=\"onRowSelect($event)\" (cellClick)=\"onCellClick($event)\"\n [pageable]=\"effectivePageable\"\n [sortable]=\"sortable\"\n [filterable]=\"_showRowFilter && !isCardMode\"\n [resizable]=\"resizable\"\n [rowClass]=\"rowClass ?? defaultRowClass\"\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.children && commandItem.children.length > 0 && commandItem.onClick) {\n <kendo-splitbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n (buttonClick)=\"onToolbarCommand(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-splitbutton>\n } @else if (commandItem.children && commandItem.children.length > 0) {\n <kendo-dropdownbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-dropdownbutton>\n } @else if (commandItem.svgIcon) {\n <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n </button>\n } @else {\n <button kendoTooltip kendoButton themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [disabled]=\"getToolbarItemDisabled(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 <!-- Host scope/filter controls (view switches and the like). They steer the\n table, so they sit in the table's own band instead of a second strip\n stacked above the grid. -->\n @if (filtersTemplate) {\n <!-- A rule between the host's actions and its filters: both sit on the\n left of the same band, but one acts on records and the other changes\n what the list shows. Only drawn when actions precede them. -->\n @if (leftToolbarActions.length > 0) {\n <kendo-separator class=\"mm-toolbar-filters-separator\"></kendo-separator>\n }\n <div class=\"mm-toolbar-filters\">\n <ng-container [ngTemplateOutlet]=\"filtersTemplate.templateRef\"></ng-container>\n </div>\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 mm-search-input\"\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.children && commandItem.children.length > 0 && commandItem.onClick) {\n <kendo-splitbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n (buttonClick)=\"onToolbarCommand(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-splitbutton>\n } @else if (commandItem.children && commandItem.children.length > 0) {\n <kendo-dropdownbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-dropdownbutton>\n } @else if (commandItem.svgIcon) {\n <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n </button>\n } @else {\n <button kendoTooltip kendoButton themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [disabled]=\"getToolbarItemDisabled(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 <!-- Commands: laid out while there is room, collapsed into one menu once\n the list gets narrow. Same behaviour in every host app \u2014 a list this\n wide has space for five buttons, and a list this narrow does not. -->\n @if (commandsCollapsed) {\n <kendo-dropdownbutton class=\"mm-toolbar-commands\" [data]=\"toolbarCommands\" textField=\"text\" [svgIcon]=\"commandsIcon\"\n fillMode=\"flat\" themeColor=\"primary\" [disabled]=\"isLoading()\"\n [title]=\"_messages.commands\"\n (itemClick)=\"onCommand($any($event).id)\"></kendo-dropdownbutton>\n } @else {\n @for (command of toolbarCommands; track command.id) {\n @switch (command.id) {\n @case ('excel') {\n <button kendoTooltip kendoGridExcelCommand themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" [disabled]=\"isLoading()\" [title]=\"command.text\"></button>\n }\n @case ('pdf') {\n <button kendoTooltip kendoGridPDFCommand themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" [disabled]=\"isLoading()\" [title]=\"command.text\"></button>\n }\n @default {\n <button kendoTooltip kendoButton themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" (click)=\"onCommand(command.id)\"\n [disabled]=\"isLoading()\" [title]=\"command.text\"></button>\n }\n }\n }\n }\n </ng-template>\n\n @if (showCheckboxColumn()) {\n <kendo-grid-checkbox-column [showSelectAll]=\"showRowSelectAllCheckBox\"\n [width]=\"effectiveCheckboxColumnWidth\"></kendo-grid-checkbox-column>\n }\n\n @if (!isCardMode) {\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(getEffectiveWidth(column))\"\n [minResizableWidth]=\"column.minWidth ?? 10\"\n [hidden]=\"isColumnHidden(column)\"\n [sortable]=\"column.sortable !== false\"\n [filterable]=\"column.filterable !== false\"\n [class]=\"alignClass(column)\"\n [headerClass]=\"alignClass(column)\"\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 } @else if (dataItem?.text) {\n <span>{{ dataItem.text }}</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 if (column.dataType === 'numericRange') {\n <span class=\"numeric-range-filter\">\n <kendo-numerictextbox\n [value]=\"$any(getRangeFilterValue(column, 'gte'))\"\n (valueChange)=\"onRangeFilterChange($event, column, 'gte')\"\n [spinners]=\"false\"\n [decimals]=\"2\"\n placeholder=\"From\"\n size=\"small\"\n ></kendo-numerictextbox>\n <span class=\"range-separator\">\u2013</span>\n <kendo-numerictextbox\n [value]=\"$any(getRangeFilterValue(column, 'lte'))\"\n (valueChange)=\"onRangeFilterChange($event, column, 'lte')\"\n [spinners]=\"false\"\n [decimals]=\"2\"\n placeholder=\"To\"\n size=\"small\"\n ></kendo-numerictextbox>\n </span>\n } @else {\n @switch (getFilterType(column)) {\n @case ('numeric') {\n <kendo-grid-numeric-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"true\" [operator]=\"column.filterOperator || 'eq'\"\n [spinners]=\"!isCompactFilter(column)\" [class.mm-filter-compact]=\"isCompactFilter(column)\"></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]=\"true\" [operator]=\"column.filterOperator || 'eq'\"\n [class.mm-filter-compact]=\"isCompactFilter(column)\"></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 <span\n [class.mm-cell-truncate]=\"column.truncate\"\n [attr.title]=\"column.truncate ? getCellTitle(dataItem, column) : null\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: column }\"\n ></ng-container>\n </span>\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]=\"effectiveActionsColumnWidth\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"rowActions\"\n [ngTemplateOutletContext]=\"{ dataItem: dataItem }\"\n ></ng-container>\n </ng-template>\n </kendo-grid-command-column>\n }\n } @else {\n <!-- Card mode (AB#4930): one full-width column renders the whole row as a\n stacked card \u2014 title from the first column, labeled lines for the\n rest (empty values skipped), row actions in the card header. -->\n <kendo-grid-column [sortable]=\"false\" [filterable]=\"false\" title=\"\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <div class=\"mm-card\">\n <div class=\"mm-card-header\">\n @if (cardTitleColumn; as titleColumn) {\n <span class=\"mm-card-title\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: titleColumn }\"\n ></ng-container>\n </span>\n }\n <span class=\"mm-card-actions\">\n <ng-container\n [ngTemplateOutlet]=\"rowActions\"\n [ngTemplateOutletContext]=\"{ dataItem: dataItem }\"\n ></ng-container>\n </span>\n </div>\n <div class=\"mm-card-fields\">\n @for (column of cardBodyColumns; track column.field) {\n @if (hasCardValue(dataItem, column)) {\n <div class=\"mm-card-field\">\n <span class=\"mm-card-label\">{{ getDisplayName(column) | pascalCase }}</span>\n <span class=\"mm-card-value\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: column }\"\n ></ng-container>\n </span>\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n </kendo-grid-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\"\n disabledField=\"disabled\"\n (popupClose)=\"onContextMenuClosed($event)\"\n (select)=\"onContextMenuSelect($event)\"\n></kendo-contextmenu>\n", styles: [":host{display:flex;flex-direction:column;min-height:0}:host>kendo-grid{flex:1;min-height:0}.mm-search-input{width:165px}:host ::ng-deep .k-grid th:has(input[type=checkbox]),:host ::ng-deep .k-grid td:has(>kendo-checkbox){text-overflow:clip}:host ::ng-deep .k-command-cell{white-space:nowrap;overflow:hidden;vertical-align:middle}:host ::ng-deep .k-command-cell .k-button{display:inline-flex;vertical-align:middle;margin:0}:host ::ng-deep .k-command-cell .k-button+.k-button{margin-left:4px}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar{flex-wrap:wrap;row-gap:6px}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar .mm-search-input{width:100%;order:10}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar kendo-grid-spacer{display:none}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar .mm-toolbar-commands{margin-left:auto}:host ::ng-deep .k-grid td.mm-col-align-right{text-align:right;font-variant-numeric:tabular-nums}:host ::ng-deep .k-grid td.mm-col-align-center{text-align:center}:host ::ng-deep .k-grid th.mm-col-align-right .k-cell-inner>.k-link{justify-content:flex-end}:host ::ng-deep .k-grid th.mm-col-align-center .k-cell-inner>.k-link{justify-content:center}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-wrapper{gap:2px}:host ::ng-deep .k-filter-row .mm-filter-compact .k-datepicker>.k-input-button{display:none}:host ::ng-deep .k-filter-row .mm-filter-compact .k-input-inner{padding-left:4px;padding-right:4px;font-size:12px}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-operator .k-dropdown-operator{width:26px;min-width:0}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-operator .k-dropdown-operator .k-input-button{padding:2px}.mm-cell-truncate{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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,:host ::ng-deep .status-filter-dropdown .k-input-value-text>span{font-size:14px}.numeric-range-filter{display:flex;align-items:center;gap:4px}.numeric-range-filter kendo-numerictextbox{flex:1;min-width:0}.numeric-range-filter .range-separator{flex-shrink:0;opacity:.6}.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)}.badge-cell{display:inline-block;padding:2px 10px;font-size:.75rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:12px;border:1px solid var(--mm-badge-default-border, transparent);background:var(--mm-badge-default-bg, rgba(127, 127, 127, .15));color:var(--mm-badge-default-color, inherit);white-space:nowrap;line-height:1.4}.badge-cell-default{opacity:.7;font-style:italic}.progress-bar-cell{display:inline-flex;align-items:center;gap:8px;width:100%}.progress-bar-cell .progress-bar-track{flex:1;height:8px;background:var(--mm-progress-track-bg, rgba(255, 255, 255, .1));border-radius:4px;overflow:hidden}.progress-bar-cell .progress-bar-fill{display:block;height:100%;background:var(--mm-progress-fill-color, #10b981);border-radius:4px;transition:width .3s ease}.progress-bar-cell .progress-bar-label{min-width:40px;text-align:right;font-size:.85em}: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}:host-context(.k-pdf-export) .badge-cell{background:transparent!important;border:none!important;color:inherit!important;padding:0!important;border-radius:0!important;text-transform:none!important;font-weight:inherit!important;letter-spacing:0!important;font-size:inherit!important}:host(.mm-list-view-cards) ::ng-deep .k-grid-header{display:none}:host(.mm-list-view-cards) ::ng-deep .k-grid td,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-td{border:none;background:transparent;padding:4px 2px;white-space:normal}:host(.mm-list-view-cards) ::ng-deep .k-grid td:has(>kendo-checkbox),:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-td:has(>kendo-checkbox){padding-left:2px;padding-right:0}:host(.mm-list-view-cards) ::ng-deep .k-grid colgroup>col:first-child:not(:only-child){width:32px!important}:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row:hover,:host(.mm-list-view-cards) ::ng-deep .k-grid tr:hover{background:transparent}:host(.mm-list-view-cards) ::ng-deep .k-grid tr.k-selected .mm-card,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row.k-selected .mm-card{border-color:var(--kendo-color-primary, #ff6358)}:host(.mm-list-view-cards) ::ng-deep .k-grid tr.k-selected>td,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background:transparent}.mm-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:8px;padding:10px 12px}.mm-card-header{display:flex;align-items:center;gap:8px}.mm-card-title{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}.mm-card-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.mm-card-fields{display:flex;flex-direction:column;gap:3px}.mm-card-field{display:flex;align-items:baseline;gap:8px;font-size:.9em}.mm-card-label{flex:0 0 38%;max-width:160px;color:var(--kendo-color-subtle, #666666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mm-card-value{flex:1;min-width:0;overflow-wrap:anywhere}::ng-deep .k-grid-toolbar .mm-toolbar-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}::ng-deep .k-grid-toolbar .mm-toolbar-filters-separator{align-self:center;height:22px;margin:0 4px;border-left:1px solid var(--theme-border-subtle, rgba(0, 0, 0, .16));border-top:none;width:0}\n"] }]
3719
+ NgTemplateOutlet,
3720
+ ActionButtonComponent
3721
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Shared cell renderer (AB#4930): used by the regular grid columns AND the\n card-mode body lines, so both render every dataType identically. -->\n<ng-template #cellContent let-element=\"element\" let-column=\"column\">\n @if (column.formatter) {\n {{ getFormattedValue(element, column) }}\n } @else {\n @switch (column.dataType) {\n @case ('boolean') {\n <!-- Read-only marker: named after its column so a screen reader says what is checked (AB#5621). -->\n <kendo-checkbox type=\"checkbox\" [checkedState]=\"$any(getValue(element, column))\" [disabled]=\"true\"\n [inputAttributes]=\"booleanCellAttributes(column)\" />\n }\n @case ('iso8601') {\n {{ $any(getValue(element, column)) | date:column.format }}\n }\n @case ('bytes') {\n {{ $any(getValue(element, column)) | bytesToSize }}\n }\n @case ('statusIcons') {\n <span class=\"status-icons-cell\">\n @for (fieldConfig of getStatusFields(column); track fieldConfig.field) {\n @if (getStatusIconMapping(element, fieldConfig); as mapping) {\n <!-- Icon-only status: the mapping's tooltip is also its accessible name (AB#5621). -->\n <span\n class=\"status-icon\"\n role=\"img\"\n [title]=\"mapping.tooltip\"\n [attr.aria-label]=\"mapping.tooltip || null\"\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(element, column) }}</code>\n <span class=\"cron-description\">{{ getCronHumanReadable(getValue(element, column)) }}</span>\n </span>\n }\n @case ('numeric') {\n {{ $any(getValue(element, column)) | number:column.format }}\n }\n @case ('progressBar') {\n <span class=\"progress-bar-cell\">\n <span class=\"progress-bar-track\">\n <span class=\"progress-bar-fill\" [style.width.%]=\"getValue(element, column)\"></span>\n </span>\n <span class=\"progress-bar-label\">{{ getValue(element, column) }}%</span>\n </span>\n }\n @case ('badge') {\n @if (getBadgeMapping(element, column); as badge) {\n <span\n class=\"badge-cell\"\n [title]=\"badge.tooltip ?? ''\"\n [style.color]=\"badge.color\"\n [style.background]=\"badge.backgroundColor\"\n [style.borderColor]=\"badge.borderColor ?? badge.backgroundColor\">\n {{ badge.label ?? getValue(element, column) }}\n </span>\n } @else if (!column.badgeHideUnmapped) {\n <span class=\"badge-cell badge-cell-default\">{{ getValue(element, column) }}</span>\n }\n }\n @case ('component') {\n @if (column.cellComponent) {\n <ng-container *ngComponentOutlet=\"column.cellComponent; inputs: getCellInputs(element, column)\" />\n }\n }\n @default {\n {{ getValue(element, column) }}\n }\n }\n }\n</ng-template>\n\n<!-- Row actions (AB#4930, AB#5572): shared by the actions column and the card header. One MmAction\n per action (CommandItems via adapter): neutral icon buttons, danger colour only for destructive\n actions, max `maxInlineRowActions` slots, the rest (and the context menu) behind \"\u2026\". Disabled\n actions stay focusable and announce their reason (mm-action-button). -->\n<ng-template #rowActions let-dataItem=\"dataItem\">\n @let view = rowActionsView(dataItem);\n @if (view.inline.length > 0 || view.hasMenu) {\n <span class=\"mm-list-view-row-actions\" role=\"group\" [attr.aria-label]=\"rowActionsGroupLabel(dataItem)\">\n @for (entry of view.inline; track entry.action.id) {\n <!-- Clicks never reach the grid (no row selection / row navigation from an action). -->\n <mm-action-button [action]=\"entry.action\" [targetLabel]=\"rowLabel(dataItem)\" context=\"row\" display=\"icon\"\n (click)=\"$event.stopPropagation()\"\n (triggered)=\"onInlineRowAction(entry, dataItem)\" />\n }\n @if (view.hasMenu) {\n <button kendoButton themeColor=\"base\" fillMode=\"flat\" size=\"small\" class=\"mm-list-view-row-actions__more\"\n [svgIcon]=\"moreVerticalIcon\" data-action=\"more\"\n [title]=\"rowActionsLabel(dataItem)\" [attr.aria-label]=\"rowActionsLabel(dataItem)\" aria-haspopup=\"menu\"\n [disabled]=\"isLoading()\" (click)=\"$event.stopPropagation(); onContextMenu(dataItem, $event)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<kendo-grid\n mmListViewDataBinding\n [loading]=\"isLoading()\"\n [pageSize]=\"effectivePageSize()\" [selectable]=\"selectable\" (pageChange)=\"onPageChange($event)\"\n [skip]=\"skip\" (selectionChange)=\"onRowSelect($event)\" (cellClick)=\"onCellClick($event)\"\n [pageable]=\"effectivePageable\"\n [sortable]=\"sortable\"\n [filterable]=\"_showRowFilter && !isCardMode\"\n [resizable]=\"resizable\"\n [rowClass]=\"rowClass ?? defaultRowClass\"\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.children && commandItem.children.length > 0 && commandItem.onClick) {\n <kendo-splitbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [buttonAttributes]=\"toolbarItemButtonAttributes(commandItem)\"\n (buttonClick)=\"onToolbarCommand(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-splitbutton>\n } @else if (commandItem.children && commandItem.children.length > 0) {\n <kendo-dropdownbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [buttonAttributes]=\"toolbarItemButtonAttributes(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-dropdownbutton>\n } @else if (commandItem.svgIcon) {\n <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [attr.aria-label]=\"toolbarItemAriaLabel(commandItem)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n </button>\n } @else {\n <button kendoTooltip kendoButton themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [attr.aria-label]=\"toolbarItemAriaLabel(commandItem)\"\n [disabled]=\"getToolbarItemDisabled(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 <!-- Host scope/filter controls (view switches and the like). They steer the\n table, so they sit in the table's own band instead of a second strip\n stacked above the grid. -->\n @if (filtersTemplate) {\n <!-- A rule between the host's actions and its filters: both sit on the\n left of the same band, but one acts on records and the other changes\n what the list shows. Only drawn when actions precede them. -->\n @if (leftToolbarActions.length > 0) {\n <kendo-separator class=\"mm-toolbar-filters-separator\"></kendo-separator>\n }\n <div class=\"mm-toolbar-filters\">\n <ng-container [ngTemplateOutlet]=\"filtersTemplate.templateRef\"></ng-container>\n </div>\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 mm-search-input\"\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.children && commandItem.children.length > 0 && commandItem.onClick) {\n <kendo-splitbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [buttonAttributes]=\"toolbarItemButtonAttributes(commandItem)\"\n (buttonClick)=\"onToolbarCommand(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-splitbutton>\n } @else if (commandItem.children && commandItem.children.length > 0) {\n <kendo-dropdownbutton\n [data]=\"commandItem.children\"\n [svgIcon]=\"$any(commandItem.svgIcon)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n [textField]=\"'text'\"\n themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [buttonAttributes]=\"toolbarItemButtonAttributes(commandItem)\"\n (itemClick)=\"onToolbarDropdownItemClick($event)\">\n {{ commandItem.text }}\n </kendo-dropdownbutton>\n } @else if (commandItem.svgIcon) {\n <button kendoTooltip kendoButton themeColor=\"primary\" [svgIcon]=\"commandItem.svgIcon\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [attr.aria-label]=\"toolbarItemAriaLabel(commandItem)\"\n [disabled]=\"getToolbarItemDisabled(commandItem) || isLoading()\"\n (click)=\"onToolbarCommand(commandItem)\">{{ commandItem.text }}\n </button>\n } @else {\n <button kendoTooltip kendoButton themeColor=\"primary\"\n [fillMode]=\"$any(commandItem.fillMode ?? 'solid')\"\n [title]=\"commandItem.tooltip ?? commandItem.text\"\n [attr.aria-label]=\"toolbarItemAriaLabel(commandItem)\"\n [disabled]=\"getToolbarItemDisabled(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 <!-- Commands: laid out while there is room, collapsed into one menu once\n the list gets narrow. Same behaviour in every host app \u2014 a list this\n wide has space for five buttons, and a list this narrow does not. -->\n @if (commandsCollapsed) {\n <kendo-dropdownbutton class=\"mm-toolbar-commands\" [data]=\"toolbarCommands\" textField=\"text\" [svgIcon]=\"commandsIcon\"\n fillMode=\"flat\" themeColor=\"primary\" [disabled]=\"isLoading()\"\n [title]=\"_messages.commands\"\n [buttonAttributes]=\"commandsMenuButtonAttributes\"\n (itemClick)=\"onCommand($any($event).id)\"></kendo-dropdownbutton>\n } @else {\n @for (command of toolbarCommands; track command.id) {\n @switch (command.id) {\n @case ('excel') {\n <button kendoTooltip kendoGridExcelCommand themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" [disabled]=\"isLoading()\" [title]=\"command.text\"\n [attr.aria-label]=\"command.text\" [attr.data-command]=\"command.id\"></button>\n }\n @case ('pdf') {\n <button kendoTooltip kendoGridPDFCommand themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" [disabled]=\"isLoading()\" [title]=\"command.text\"\n [attr.aria-label]=\"command.text\" [attr.data-command]=\"command.id\"></button>\n }\n @default {\n <!-- The row filter is a toggle: its on state is shown (k-selected) and announced. -->\n <button kendoTooltip kendoButton themeColor=\"primary\" fillMode=\"flat\"\n [svgIcon]=\"command.svgIcon\" (click)=\"onCommand(command.id)\"\n [class.k-selected]=\"command.id === 'rowFilter' && _showRowFilter\"\n [attr.aria-pressed]=\"command.id === 'rowFilter' ? _showRowFilter : null\"\n [attr.data-command]=\"command.id\"\n [disabled]=\"isLoading()\" [title]=\"command.text\" [attr.aria-label]=\"command.text\"></button>\n }\n }\n }\n }\n </ng-template>\n\n @if (showCheckboxColumn()) {\n <kendo-grid-checkbox-column [showSelectAll]=\"showRowSelectAllCheckBox\"\n [width]=\"effectiveCheckboxColumnWidth\"></kendo-grid-checkbox-column>\n }\n\n @if (!isCardMode) {\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(getEffectiveWidth(column))\"\n [minResizableWidth]=\"column.minWidth ?? 10\"\n [hidden]=\"isColumnHidden(column)\"\n [sortable]=\"column.sortable !== false\"\n [filterable]=\"column.filterable !== false\"\n [class]=\"alignClass(column)\"\n [headerClass]=\"alignClass(column)\"\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 role=\"img\" [attr.aria-label]=\"dataItem.text || mapping.tooltip || null\" [title]=\"dataItem.text || mapping.tooltip\"\n [style.color]=\"mapping.color\">\n <kendo-svg-icon [icon]=\"mapping.icon\" [size]=\"'small'\"></kendo-svg-icon>\n </span>\n </span>\n } @else if (dataItem?.text) {\n <span>{{ dataItem.text }}</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 if (column.dataType === 'numericRange') {\n <span class=\"numeric-range-filter\">\n <kendo-numerictextbox\n [value]=\"$any(getRangeFilterValue(column, 'gte'))\"\n (valueChange)=\"onRangeFilterChange($event, column, 'gte')\"\n [spinners]=\"false\"\n [decimals]=\"2\"\n placeholder=\"From\"\n size=\"small\"\n ></kendo-numerictextbox>\n <span class=\"range-separator\">\u2013</span>\n <kendo-numerictextbox\n [value]=\"$any(getRangeFilterValue(column, 'lte'))\"\n (valueChange)=\"onRangeFilterChange($event, column, 'lte')\"\n [spinners]=\"false\"\n [decimals]=\"2\"\n placeholder=\"To\"\n size=\"small\"\n ></kendo-numerictextbox>\n </span>\n } @else {\n @switch (getFilterType(column)) {\n @case ('numeric') {\n <kendo-grid-numeric-filter-cell [column]=\"gridColumn\" [filter]=\"filter\" [showOperators]=\"true\" [operator]=\"column.filterOperator || 'eq'\"\n [spinners]=\"!isCompactFilter(column)\" [class.mm-filter-compact]=\"isCompactFilter(column)\"></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]=\"true\" [operator]=\"column.filterOperator || 'eq'\"\n [class.mm-filter-compact]=\"isCompactFilter(column)\"></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 <span\n [class.mm-cell-truncate]=\"column.truncate\"\n [attr.title]=\"column.truncate ? getCellTitle(dataItem, column) : null\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: column }\"\n ></ng-container>\n </span>\n </ng-template>\n </kendo-grid-column>\n }\n\n @if (hasRowActions) {\n <kendo-grid-command-column [title]=\"_messages.actionsColumnTitle\" [width]=\"effectiveActionsColumnWidth\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"rowActions\"\n [ngTemplateOutletContext]=\"{ dataItem: dataItem }\"\n ></ng-container>\n </ng-template>\n </kendo-grid-command-column>\n }\n } @else {\n <!-- Card mode (AB#4930): one full-width column renders the whole row as a\n stacked card \u2014 title from the first column, labeled lines for the\n rest (empty values skipped), row actions in the card header. -->\n <kendo-grid-column [sortable]=\"false\" [filterable]=\"false\" title=\"\">\n <ng-template kendoGridCellTemplate let-dataItem>\n <div class=\"mm-card\">\n <div class=\"mm-card-header\">\n @if (cardTitleColumn; as titleColumn) {\n <span class=\"mm-card-title\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: titleColumn }\"\n ></ng-container>\n </span>\n }\n <span class=\"mm-card-actions\">\n <ng-container\n [ngTemplateOutlet]=\"rowActions\"\n [ngTemplateOutletContext]=\"{ dataItem: dataItem }\"\n ></ng-container>\n </span>\n </div>\n <div class=\"mm-card-fields\">\n @for (column of cardBodyColumns; track column.field) {\n @if (hasCardValue(dataItem, column)) {\n <div class=\"mm-card-field\">\n <span class=\"mm-card-label\">{{ getDisplayName(column) | pascalCase }}</span>\n <span class=\"mm-card-value\">\n <ng-container\n [ngTemplateOutlet]=\"cellContent\"\n [ngTemplateOutletContext]=\"{ element: dataItem, column: column }\"\n ></ng-container>\n </span>\n </div>\n }\n }\n </div>\n </div>\n </ng-template>\n </kendo-grid-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\"\n disabledField=\"disabled\"\n cssClassField=\"cssClass\"\n (popupClose)=\"onContextMenuClosed($event)\"\n (select)=\"onContextMenuSelect($event)\"\n></kendo-contextmenu>\n", styles: [":host{display:flex;flex-direction:column;min-height:0}:host>kendo-grid{flex:1;min-height:0}.mm-search-input{width:165px}:host ::ng-deep .k-grid th:has(input[type=checkbox]),:host ::ng-deep .k-grid td:has(>kendo-checkbox){text-overflow:clip}:host ::ng-deep .k-command-cell{white-space:nowrap;overflow:hidden;vertical-align:middle}:host ::ng-deep .k-command-cell .k-button{display:inline-flex;vertical-align:middle;margin:0}:host ::ng-deep .k-command-cell .k-button+.k-button{margin-left:4px}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar{flex-wrap:wrap;row-gap:6px}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar .mm-search-input{width:100%;order:10}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar kendo-grid-spacer{display:none}:host(.mm-list-view-narrow) ::ng-deep .k-grid-toolbar .mm-toolbar-commands{margin-left:auto}:host ::ng-deep .k-grid td.mm-col-align-right{text-align:right;font-variant-numeric:tabular-nums}:host ::ng-deep .k-grid td.mm-col-align-center{text-align:center}:host ::ng-deep .k-grid th.mm-col-align-right .k-cell-inner>.k-link{justify-content:flex-end}:host ::ng-deep .k-grid th.mm-col-align-center .k-cell-inner>.k-link{justify-content:center}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-wrapper{gap:2px}:host ::ng-deep .k-filter-row .mm-filter-compact .k-datepicker>.k-input-button{display:none}:host ::ng-deep .k-filter-row .mm-filter-compact .k-input-inner{padding-left:4px;padding-right:4px;font-size:12px}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-operator .k-dropdown-operator{width:26px;min-width:0}:host ::ng-deep .k-filter-row .mm-filter-compact .k-filtercell-operator .k-dropdown-operator .k-input-button{padding:2px}.mm-cell-truncate{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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,:host ::ng-deep .status-filter-dropdown .k-input-value-text>span{font-size:14px}.numeric-range-filter{display:flex;align-items:center;gap:4px}.numeric-range-filter kendo-numerictextbox{flex:1;min-width:0}.numeric-range-filter .range-separator{flex-shrink:0;opacity:.6}.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)}.badge-cell{display:inline-block;padding:2px 10px;font-size:.75rem;font-weight:600;border-radius:12px;border:1px solid var(--mm-badge-default-border, transparent);background:var(--mm-badge-default-bg, rgba(127, 127, 127, .15));color:var(--mm-badge-default-color, inherit);white-space:nowrap;line-height:1.4}.badge-cell-default{opacity:.7;font-style:italic}.progress-bar-cell{display:inline-flex;align-items:center;gap:8px;width:100%}.progress-bar-cell .progress-bar-track{flex:1;height:8px;background:var(--mm-progress-track-bg, rgba(255, 255, 255, .1));border-radius:4px;overflow:hidden}.progress-bar-cell .progress-bar-fill{display:block;height:100%;background:var(--mm-progress-fill-color, #10b981);border-radius:4px;transition:width .3s ease}.progress-bar-cell .progress-bar-label{min-width:40px;text-align:right;font-size:.85em}: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}:host-context(.k-pdf-export) .badge-cell{background:transparent!important;border:none!important;color:inherit!important;padding:0!important;border-radius:0!important;text-transform:none!important;font-weight:inherit!important;font-size:inherit!important}:host(.mm-list-view-cards) ::ng-deep .k-grid-header{display:none}:host(.mm-list-view-cards) ::ng-deep .k-grid td,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-td{border:none;background:transparent;padding:4px 2px;white-space:normal}:host(.mm-list-view-cards) ::ng-deep .k-grid td:has(>kendo-checkbox),:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-td:has(>kendo-checkbox){padding-left:2px;padding-right:0}:host(.mm-list-view-cards) ::ng-deep .k-grid colgroup>col:first-child:not(:only-child){width:32px!important}:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row:hover,:host(.mm-list-view-cards) ::ng-deep .k-grid tr:hover{background:transparent}:host(.mm-list-view-cards) ::ng-deep .k-grid tr.k-selected .mm-card,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row.k-selected .mm-card{border-color:var(--kendo-color-primary, #ff6358)}:host(.mm-list-view-cards) ::ng-deep .k-grid tr.k-selected>td,:host(.mm-list-view-cards) ::ng-deep .k-grid .k-table-row.k-selected>.k-table-td{background:transparent}.mm-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:8px;padding:10px 12px}.mm-card-header{display:flex;align-items:center;gap:8px}.mm-card-title{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}.mm-card-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.mm-card-fields{display:flex;flex-direction:column;gap:3px}.mm-card-field{display:flex;align-items:baseline;gap:8px;font-size:.9em}.mm-card-label{flex:0 0 38%;max-width:160px;color:var(--kendo-color-subtle, #666666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mm-card-value{flex:1;min-width:0;overflow-wrap:anywhere}::ng-deep .k-grid-toolbar .mm-toolbar-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}::ng-deep .k-grid-toolbar .mm-toolbar-filters-separator{align-self:center;height:22px;margin:0 4px;border-left:1px solid var(--theme-border-subtle, rgba(0, 0, 0, .16));border-top:none;width:0}::ng-deep .k-menu-group .mm-list-view-menu-item--danger>.k-link,::ng-deep .k-menu-group .mm-list-view-menu-item--danger>.k-menu-link{color:var(--theme-status-error, #c0385f)}.mm-list-view-row-actions{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;vertical-align:middle}.mm-list-view-row-actions .mm-list-view-row-actions__more:focus-visible{outline:none;box-shadow:var(--theme-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #2e8473)}\n"] }]
2899
3722
  }], ctorParameters: () => [], propDecorators: { filtersTemplate: [{
2900
3723
  type: ContentChild,
2901
3724
  args: [ListViewFiltersDirective]
@@ -2932,6 +3755,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
2932
3755
  type: Input
2933
3756
  }], contextMenuCommandItems: [{
2934
3757
  type: Input
3758
+ }], rowActions: [{
3759
+ type: Input
3760
+ }], maxInlineRowActions: [{
3761
+ type: Input
3762
+ }], rowAction: [{
3763
+ type: Output
2935
3764
  }], excelExportFileName: [{
2936
3765
  type: Input
2937
3766
  }], pdfExportFileName: [{
@@ -2961,6 +3790,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
2961
3790
  type: Input
2962
3791
  }], collapseCommandsBelow: [{
2963
3792
  type: Input
3793
+ }], hasExternalFilters: [{
3794
+ type: Input
2964
3795
  }], isCardMode: [{
2965
3796
  type: HostBinding,
2966
3797
  args: ['class.mm-list-view-cards']
@@ -2974,6 +3805,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
2974
3805
  type: Input
2975
3806
  }], resetFilters: [{
2976
3807
  type: Output
3808
+ }], rowLabelField: [{
3809
+ type: Input
2977
3810
  }] } });
2978
3811
 
2979
3812
  class TreeComponent {
@@ -3344,14 +4177,14 @@ class BaseFormComponent {
3344
4177
  return this.form?.dirty ?? false;
3345
4178
  }
3346
4179
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3347
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: BaseFormComponent, isStandalone: true, selector: "mm-base-form", inputs: { form: "form", config: "config" }, outputs: { saveForm: "saveForm", cancelForm: "cancelForm" }, providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: BaseFormComponent }], queries: [{ propertyName: "titleExtra", first: true, predicate: FormTitleExtraDirective, descendants: true }], hostDirectives: [{ directive: UnsavedChangesDirective }], ngImport: i0, template: "<div class=\"mm-base-form-container\" [class.with-card]=\"config.showCard\" [class.without-card]=\"!config.showCard\">\n <!-- Title (no card mode) -->\n <div *ngIf=\"!config.showCard && (title || titleExtra)\" class=\"mm-form-title-row mm-form-title-standalone\">\n <h2 *ngIf=\"title\" class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Main form wrapper - styled as card or plain based on CSS class -->\n <div class=\"mm-form-wrapper\" [style.maxWidth]=\"config.showCard ? (config.cardWidth || '800px') : null\">\n <!-- Card header (only in card mode) -->\n <div *ngIf=\"config.showCard && (title || titleExtra)\" class=\"mm-form-header\">\n <h2 *ngIf=\"title\" class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Form body with content projection -->\n <div class=\"mm-form-body\">\n <div *ngIf=\"config.isLoading && config.showLoadingOverlay\" class=\"mm-loading-overlay\">\n <div class=\"k-loader k-loader-lg\"></div>\n <p>{{ loadingText }}</p>\n </div>\n <ng-content></ng-content>\n </div>\n\n <!-- Form actions -->\n <div class=\"mm-form-actions\">\n <!-- Status indicator (left side) -->\n <div class=\"mm-form-status\">\n <span class=\"mm-status-indicator\" [class.modified]=\"config.hasChanges\">\n <span class=\"mm-status-dot\"></span>\n <span class=\"mm-status-text\">{{ config.hasChanges ? modifiedText : readyText }}</span>\n </span>\n </div>\n\n <!-- Action buttons (right side) -->\n <div class=\"mm-form-buttons\">\n <button\n *ngIf=\"showSaveButton\"\n kendoButton\n type=\"submit\"\n [svgIcon]=\"saveIcon\"\n themeColor=\"primary\"\n [disabled]=\"saveButtonDisabled\"\n (click)=\"onSave()\">\n {{ saveButtonText }}\n </button>\n <button\n *ngIf=\"showCancelButton\"\n kendoButton\n type=\"button\"\n [svgIcon]=\"cancelIcon\"\n [disabled]=\"!!config.isSaving\"\n (click)=\"onCancel()\">\n {{ cancelButtonText }}\n </button>\n <ng-content select=\"[additionalActions]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--mm-form-bg: var(--kendo-color-surface);--mm-form-bg-alt: var(--kendo-color-surface-alt);--mm-form-bg-elevated: var(--kendo-color-surface-alt);--mm-form-border: var(--kendo-color-border);--mm-form-border-subtle: var(--kendo-color-border-alt, var(--mm-form-border));--mm-form-text: var(--kendo-color-on-app-surface);--mm-form-text-subtle: var(--kendo-color-subtle);--mm-form-text-label: var(--kendo-color-on-app-surface);--mm-form-accent: var(--kendo-color-primary);--mm-form-error: var(--kendo-color-error);--mm-form-status-ready: #37b400;--mm-form-status-modified: #da9162;--mm-form-padding: 1.5rem;--mm-form-padding-sm: 1rem;--mm-form-gap: .5rem;--mm-form-radius: 4px;--mm-form-shadow: 0 2px 6px rgba(0, 0, 0, .15);--mm-form-overlay-bg: var(--kendo-color-surface)}.mm-base-form-container{padding:var(--mm-form-padding);height:100%;overflow:auto}.mm-base-form-container .mm-form-wrapper{margin:0 auto}.mm-base-form-container.with-card .mm-form-wrapper{background:var(--mm-form-bg);border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);box-shadow:var(--mm-form-shadow)}.mm-base-form-container.with-card .mm-form-header{display:flex;align-items:center;gap:1rem;padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-bottom:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.with-card .mm-form-body{padding:var(--mm-form-padding)}.mm-base-form-container.with-card .mm-form-actions{padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-top:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.without-card .mm-form-wrapper{max-width:1200px}.mm-base-form-container.without-card .mm-form-title-standalone{margin-bottom:var(--mm-form-padding)}.mm-base-form-container.without-card .mm-form-actions{margin-top:var(--mm-form-padding);padding-top:var(--mm-form-padding);border-top:1px solid var(--mm-form-border)}.mm-base-form-container .mm-form-title-row{display:flex;align-items:center;gap:1rem}.mm-base-form-container .mm-form-title{font-size:1.5rem;font-weight:500;margin:0;color:var(--mm-form-text)}.mm-base-form-container .mm-modified-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mm-form-status-modified);background:#da916226;border:1px solid rgba(218,145,98,.4);border-radius:var(--mm-form-radius);animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.7}}.mm-base-form-container .mm-form-body{position:relative;min-height:100px}.mm-base-form-container .mm-form-actions{display:flex;gap:var(--mm-form-gap);justify-content:space-between;align-items:center}.mm-base-form-container .mm-form-status{display:flex;align-items:center}.mm-base-form-container .mm-status-indicator{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:#37b4001a;border:1px solid rgba(55,180,0,.3);border-radius:var(--mm-form-radius)}.mm-base-form-container .mm-status-indicator .mm-status-dot{width:8px;height:8px;border-radius:50%;background:var(--mm-form-status-ready);box-shadow:0 0 8px #37b40099;animation:pulse-dot 2s ease-in-out infinite}.mm-base-form-container .mm-status-indicator .mm-status-text{font-size:.7rem;font-weight:600;letter-spacing:1px;color:var(--mm-form-status-ready);text-transform:uppercase}.mm-base-form-container .mm-status-indicator.modified{background:#da91621a;border-color:#da91624d}.mm-base-form-container .mm-status-indicator.modified .mm-status-dot{background:var(--mm-form-status-modified);box-shadow:0 0 8px #da916299}.mm-base-form-container .mm-status-indicator.modified .mm-status-text{color:var(--mm-form-status-modified)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.6}}.mm-base-form-container .mm-form-buttons{display:flex;gap:var(--mm-form-gap)}.mm-base-form-container .mm-form-buttons button{min-width:100px}.mm-base-form-container .mm-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--mm-form-overlay-bg);opacity:.95;z-index:10}.mm-base-form-container .mm-loading-overlay p{margin-top:1rem;color:var(--mm-form-text-subtle);font-size:1rem}::ng-deep .mm-base-form-container fieldset[kendoformfieldset],::ng-deep .mm-base-form-container .k-form-fieldset{border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);padding:var(--mm-form-padding);margin:0;background:var(--mm-form-bg-alt)}::ng-deep .mm-base-form-container fieldset[kendoformfieldset] legend,::ng-deep .mm-base-form-container fieldset[kendoformfieldset] .k-form-legend,::ng-deep .mm-base-form-container .k-form-fieldset legend,::ng-deep .mm-base-form-container .k-form-fieldset .k-form-legend{font-size:1.125rem;font-weight:500;color:var(--mm-form-accent);padding:0 .5rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label,::ng-deep .mm-base-form-container kendo-formfield .k-label,::ng-deep .mm-base-form-container .k-form-field kendo-label,::ng-deep .mm-base-form-container .k-form-field .k-label{font-weight:500;color:var(--mm-form-text-label);margin-bottom:.25rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label .k-required,::ng-deep .mm-base-form-container kendo-formfield .k-label .k-required,::ng-deep .mm-base-form-container .k-form-field kendo-label .k-required,::ng-deep .mm-base-form-container .k-form-field .k-label .k-required{color:var(--mm-form-error)}::ng-deep .mm-base-form-container kendo-formfield kendo-textbox,::ng-deep .mm-base-form-container kendo-formfield kendo-numerictextbox,::ng-deep .mm-base-form-container kendo-formfield kendo-textarea,::ng-deep .mm-base-form-container kendo-formfield kendo-datepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-datetimepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-timepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-dropdownlist,::ng-deep .mm-base-form-container kendo-formfield kendo-combobox,::ng-deep .mm-base-form-container kendo-formfield kendo-multiselect,::ng-deep .mm-base-form-container kendo-formfield kendo-autocomplete,::ng-deep .mm-base-form-container .k-form-field kendo-textbox,::ng-deep .mm-base-form-container .k-form-field kendo-numerictextbox,::ng-deep .mm-base-form-container .k-form-field kendo-textarea,::ng-deep .mm-base-form-container .k-form-field kendo-datepicker,::ng-deep .mm-base-form-container .k-form-field kendo-datetimepicker,::ng-deep .mm-base-form-container .k-form-field kendo-timepicker,::ng-deep .mm-base-form-container .k-form-field kendo-dropdownlist,::ng-deep .mm-base-form-container .k-form-field kendo-combobox,::ng-deep .mm-base-form-container .k-form-field kendo-multiselect,::ng-deep .mm-base-form-container .k-form-field kendo-autocomplete{width:100%}::ng-deep .mm-base-form-container kendo-formfield kendo-formhint,::ng-deep .mm-base-form-container kendo-formfield .k-form-hint,::ng-deep .mm-base-form-container .k-form-field kendo-formhint,::ng-deep .mm-base-form-container .k-form-field .k-form-hint{color:var(--mm-form-text-subtle);font-size:.875rem}::ng-deep .mm-base-form-container kendo-formfield kendo-formerror,::ng-deep .mm-base-form-container kendo-formfield .k-form-error,::ng-deep .mm-base-form-container .k-form-field kendo-formerror,::ng-deep .mm-base-form-container .k-form-field .k-form-error{color:var(--mm-form-error);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:var(--mm-form-radius);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator.success{background-color:var(--kendo-color-success-subtle);color:var(--kendo-color-success-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.warning{background-color:var(--kendo-color-warning-subtle);color:var(--kendo-color-warning-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.error{background-color:var(--kendo-color-error-subtle);color:var(--kendo-color-error-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.info{background-color:var(--kendo-color-info-subtle);color:var(--kendo-color-info-on-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
4180
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: BaseFormComponent, isStandalone: true, selector: "mm-base-form", inputs: { form: "form", config: "config" }, outputs: { saveForm: "saveForm", cancelForm: "cancelForm" }, providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: BaseFormComponent }], queries: [{ propertyName: "titleExtra", first: true, predicate: FormTitleExtraDirective, descendants: true }], hostDirectives: [{ directive: UnsavedChangesDirective }], ngImport: i0, template: "<div class=\"mm-base-form-container\" [class.with-card]=\"config.showCard\" [class.without-card]=\"!config.showCard\">\n <!-- Title (no card mode) -->\n <div *ngIf=\"!config.showCard && (title || titleExtra)\" class=\"mm-form-title-row mm-form-title-standalone\">\n <h2 *ngIf=\"title\" class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Main form wrapper - styled as card or plain based on CSS class -->\n <div class=\"mm-form-wrapper\" [style.maxWidth]=\"config.showCard ? (config.cardWidth || '800px') : null\">\n <!-- Card header (only in card mode) -->\n <div *ngIf=\"config.showCard && (title || titleExtra)\" class=\"mm-form-header\">\n <h2 *ngIf=\"title\" class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Form body with content projection -->\n <div class=\"mm-form-body\">\n <div *ngIf=\"config.isLoading && config.showLoadingOverlay\" class=\"mm-loading-overlay\">\n <div class=\"k-loader k-loader-lg\"></div>\n <p>{{ loadingText }}</p>\n </div>\n <ng-content></ng-content>\n </div>\n\n <!-- Form actions -->\n <div class=\"mm-form-actions\">\n <!-- Status indicator (left side) -->\n <div class=\"mm-form-status\">\n <span class=\"mm-status-indicator\" [class.modified]=\"config.hasChanges\">\n <span class=\"mm-status-dot\"></span>\n <span class=\"mm-status-text\">{{ config.hasChanges ? modifiedText : readyText }}</span>\n </span>\n </div>\n\n <!-- Action buttons (right side) -->\n <div class=\"mm-form-buttons\">\n <button\n *ngIf=\"showSaveButton\"\n kendoButton\n type=\"submit\"\n [svgIcon]=\"saveIcon\"\n themeColor=\"primary\"\n [disabled]=\"saveButtonDisabled\"\n (click)=\"onSave()\">\n {{ saveButtonText }}\n </button>\n <button\n *ngIf=\"showCancelButton\"\n kendoButton\n type=\"button\"\n [svgIcon]=\"cancelIcon\"\n [disabled]=\"!!config.isSaving\"\n (click)=\"onCancel()\">\n {{ cancelButtonText }}\n </button>\n <ng-content select=\"[additionalActions]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--mm-form-bg: var(--kendo-color-surface);--mm-form-bg-alt: var(--kendo-color-surface-alt);--mm-form-bg-elevated: var(--kendo-color-surface-alt);--mm-form-border: var(--kendo-color-border);--mm-form-border-subtle: var(--kendo-color-border-alt, var(--mm-form-border));--mm-form-text: var(--kendo-color-on-app-surface);--mm-form-text-subtle: var(--kendo-color-subtle);--mm-form-text-label: var(--kendo-color-on-app-surface);--mm-form-accent: var(--kendo-color-primary);--mm-form-error: var(--kendo-color-error);--mm-form-status-ready: #37b400;--mm-form-status-modified: #da9162;--mm-form-padding: 1.5rem;--mm-form-padding-sm: 1rem;--mm-form-gap: .5rem;--mm-form-radius: 4px;--mm-form-shadow: 0 2px 6px rgba(0, 0, 0, .15);--mm-form-overlay-bg: var(--kendo-color-surface)}.mm-base-form-container{padding:var(--mm-form-padding);height:100%;overflow:auto}.mm-base-form-container .mm-form-wrapper{margin:0 auto}.mm-base-form-container.with-card .mm-form-wrapper{background:var(--mm-form-bg);border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);box-shadow:var(--mm-form-shadow)}.mm-base-form-container.with-card .mm-form-header{display:flex;align-items:center;gap:1rem;padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-bottom:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.with-card .mm-form-body{padding:var(--mm-form-padding)}.mm-base-form-container.with-card .mm-form-actions{padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-top:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.without-card .mm-form-wrapper{max-width:1200px}.mm-base-form-container.without-card .mm-form-title-standalone{margin-bottom:var(--mm-form-padding)}.mm-base-form-container.without-card .mm-form-actions{margin-top:var(--mm-form-padding);padding-top:var(--mm-form-padding);border-top:1px solid var(--mm-form-border)}.mm-base-form-container .mm-form-title-row{display:flex;align-items:center;gap:1rem}.mm-base-form-container .mm-form-title{font-size:1.5rem;font-weight:500;margin:0;color:var(--mm-form-text)}.mm-base-form-container .mm-modified-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;color:var(--mm-form-status-modified);background:#da916226;border:1px solid rgba(218,145,98,.4);border-radius:var(--mm-form-radius);animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.7}}.mm-base-form-container .mm-form-body{position:relative;min-height:100px}.mm-base-form-container .mm-form-actions{display:flex;gap:var(--mm-form-gap);justify-content:space-between;align-items:center}.mm-base-form-container .mm-form-status{display:flex;align-items:center}.mm-base-form-container .mm-status-indicator{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:#37b4001a;border:1px solid rgba(55,180,0,.3);border-radius:var(--mm-form-radius)}.mm-base-form-container .mm-status-indicator .mm-status-dot{width:8px;height:8px;border-radius:50%;background:var(--mm-form-status-ready);box-shadow:0 0 8px #37b40099;animation:pulse-dot 2s ease-in-out infinite}.mm-base-form-container .mm-status-indicator .mm-status-text{font-size:.7rem;font-weight:600;color:var(--mm-form-status-ready)}.mm-base-form-container .mm-status-indicator.modified{background:#da91621a;border-color:#da91624d}.mm-base-form-container .mm-status-indicator.modified .mm-status-dot{background:var(--mm-form-status-modified);box-shadow:0 0 8px #da916299}.mm-base-form-container .mm-status-indicator.modified .mm-status-text{color:var(--mm-form-status-modified)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.6}}.mm-base-form-container .mm-form-buttons{display:flex;gap:var(--mm-form-gap)}.mm-base-form-container .mm-form-buttons button{min-width:100px}.mm-base-form-container .mm-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--mm-form-overlay-bg);opacity:.95;z-index:10}.mm-base-form-container .mm-loading-overlay p{margin-top:1rem;color:var(--mm-form-text-subtle);font-size:1rem}::ng-deep .mm-base-form-container fieldset[kendoformfieldset],::ng-deep .mm-base-form-container .k-form-fieldset{border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);padding:var(--mm-form-padding);margin:0;background:var(--mm-form-bg-alt)}::ng-deep .mm-base-form-container fieldset[kendoformfieldset] legend,::ng-deep .mm-base-form-container fieldset[kendoformfieldset] .k-form-legend,::ng-deep .mm-base-form-container .k-form-fieldset legend,::ng-deep .mm-base-form-container .k-form-fieldset .k-form-legend{font-size:1.125rem;font-weight:500;color:var(--mm-form-accent);padding:0 .5rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label,::ng-deep .mm-base-form-container kendo-formfield .k-label,::ng-deep .mm-base-form-container .k-form-field kendo-label,::ng-deep .mm-base-form-container .k-form-field .k-label{font-weight:500;color:var(--mm-form-text-label);margin-bottom:.25rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label .k-required,::ng-deep .mm-base-form-container kendo-formfield .k-label .k-required,::ng-deep .mm-base-form-container .k-form-field kendo-label .k-required,::ng-deep .mm-base-form-container .k-form-field .k-label .k-required{color:var(--mm-form-error)}::ng-deep .mm-base-form-container kendo-formfield kendo-textbox,::ng-deep .mm-base-form-container kendo-formfield kendo-numerictextbox,::ng-deep .mm-base-form-container kendo-formfield kendo-textarea,::ng-deep .mm-base-form-container kendo-formfield kendo-datepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-datetimepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-timepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-dropdownlist,::ng-deep .mm-base-form-container kendo-formfield kendo-combobox,::ng-deep .mm-base-form-container kendo-formfield kendo-multiselect,::ng-deep .mm-base-form-container kendo-formfield kendo-autocomplete,::ng-deep .mm-base-form-container .k-form-field kendo-textbox,::ng-deep .mm-base-form-container .k-form-field kendo-numerictextbox,::ng-deep .mm-base-form-container .k-form-field kendo-textarea,::ng-deep .mm-base-form-container .k-form-field kendo-datepicker,::ng-deep .mm-base-form-container .k-form-field kendo-datetimepicker,::ng-deep .mm-base-form-container .k-form-field kendo-timepicker,::ng-deep .mm-base-form-container .k-form-field kendo-dropdownlist,::ng-deep .mm-base-form-container .k-form-field kendo-combobox,::ng-deep .mm-base-form-container .k-form-field kendo-multiselect,::ng-deep .mm-base-form-container .k-form-field kendo-autocomplete{width:100%}::ng-deep .mm-base-form-container kendo-formfield kendo-formhint,::ng-deep .mm-base-form-container kendo-formfield .k-form-hint,::ng-deep .mm-base-form-container .k-form-field kendo-formhint,::ng-deep .mm-base-form-container .k-form-field .k-form-hint{color:var(--mm-form-text-subtle);font-size:.875rem}::ng-deep .mm-base-form-container kendo-formfield kendo-formerror,::ng-deep .mm-base-form-container kendo-formfield .k-form-error,::ng-deep .mm-base-form-container .k-form-field kendo-formerror,::ng-deep .mm-base-form-container .k-form-field .k-form-error{color:var(--mm-form-error);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:var(--mm-form-radius);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator.success{background-color:var(--kendo-color-success-subtle);color:var(--kendo-color-success-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.warning{background-color:var(--kendo-color-warning-subtle);color:var(--kendo-color-warning-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.error{background-color:var(--kendo-color-error-subtle);color:var(--kendo-color-error-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.info{background-color:var(--kendo-color-info-subtle);color:var(--kendo-color-info-on-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
3348
4181
  }
3349
4182
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseFormComponent, decorators: [{
3350
4183
  type: Component,
3351
4184
  args: [{ selector: 'mm-base-form', standalone: true, imports: [
3352
4185
  CommonModule,
3353
4186
  ButtonModule
3354
- ], hostDirectives: [UnsavedChangesDirective], providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: BaseFormComponent }], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"mm-base-form-container\" [class.with-card]=\"config.showCard\" [class.without-card]=\"!config.showCard\">\n <!-- Title (no card mode) -->\n <div *ngIf=\"!config.showCard && (title || titleExtra)\" class=\"mm-form-title-row mm-form-title-standalone\">\n <h2 *ngIf=\"title\" class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Main form wrapper - styled as card or plain based on CSS class -->\n <div class=\"mm-form-wrapper\" [style.maxWidth]=\"config.showCard ? (config.cardWidth || '800px') : null\">\n <!-- Card header (only in card mode) -->\n <div *ngIf=\"config.showCard && (title || titleExtra)\" class=\"mm-form-header\">\n <h2 *ngIf=\"title\" class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Form body with content projection -->\n <div class=\"mm-form-body\">\n <div *ngIf=\"config.isLoading && config.showLoadingOverlay\" class=\"mm-loading-overlay\">\n <div class=\"k-loader k-loader-lg\"></div>\n <p>{{ loadingText }}</p>\n </div>\n <ng-content></ng-content>\n </div>\n\n <!-- Form actions -->\n <div class=\"mm-form-actions\">\n <!-- Status indicator (left side) -->\n <div class=\"mm-form-status\">\n <span class=\"mm-status-indicator\" [class.modified]=\"config.hasChanges\">\n <span class=\"mm-status-dot\"></span>\n <span class=\"mm-status-text\">{{ config.hasChanges ? modifiedText : readyText }}</span>\n </span>\n </div>\n\n <!-- Action buttons (right side) -->\n <div class=\"mm-form-buttons\">\n <button\n *ngIf=\"showSaveButton\"\n kendoButton\n type=\"submit\"\n [svgIcon]=\"saveIcon\"\n themeColor=\"primary\"\n [disabled]=\"saveButtonDisabled\"\n (click)=\"onSave()\">\n {{ saveButtonText }}\n </button>\n <button\n *ngIf=\"showCancelButton\"\n kendoButton\n type=\"button\"\n [svgIcon]=\"cancelIcon\"\n [disabled]=\"!!config.isSaving\"\n (click)=\"onCancel()\">\n {{ cancelButtonText }}\n </button>\n <ng-content select=\"[additionalActions]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--mm-form-bg: var(--kendo-color-surface);--mm-form-bg-alt: var(--kendo-color-surface-alt);--mm-form-bg-elevated: var(--kendo-color-surface-alt);--mm-form-border: var(--kendo-color-border);--mm-form-border-subtle: var(--kendo-color-border-alt, var(--mm-form-border));--mm-form-text: var(--kendo-color-on-app-surface);--mm-form-text-subtle: var(--kendo-color-subtle);--mm-form-text-label: var(--kendo-color-on-app-surface);--mm-form-accent: var(--kendo-color-primary);--mm-form-error: var(--kendo-color-error);--mm-form-status-ready: #37b400;--mm-form-status-modified: #da9162;--mm-form-padding: 1.5rem;--mm-form-padding-sm: 1rem;--mm-form-gap: .5rem;--mm-form-radius: 4px;--mm-form-shadow: 0 2px 6px rgba(0, 0, 0, .15);--mm-form-overlay-bg: var(--kendo-color-surface)}.mm-base-form-container{padding:var(--mm-form-padding);height:100%;overflow:auto}.mm-base-form-container .mm-form-wrapper{margin:0 auto}.mm-base-form-container.with-card .mm-form-wrapper{background:var(--mm-form-bg);border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);box-shadow:var(--mm-form-shadow)}.mm-base-form-container.with-card .mm-form-header{display:flex;align-items:center;gap:1rem;padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-bottom:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.with-card .mm-form-body{padding:var(--mm-form-padding)}.mm-base-form-container.with-card .mm-form-actions{padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-top:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.without-card .mm-form-wrapper{max-width:1200px}.mm-base-form-container.without-card .mm-form-title-standalone{margin-bottom:var(--mm-form-padding)}.mm-base-form-container.without-card .mm-form-actions{margin-top:var(--mm-form-padding);padding-top:var(--mm-form-padding);border-top:1px solid var(--mm-form-border)}.mm-base-form-container .mm-form-title-row{display:flex;align-items:center;gap:1rem}.mm-base-form-container .mm-form-title{font-size:1.5rem;font-weight:500;margin:0;color:var(--mm-form-text)}.mm-base-form-container .mm-modified-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mm-form-status-modified);background:#da916226;border:1px solid rgba(218,145,98,.4);border-radius:var(--mm-form-radius);animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.7}}.mm-base-form-container .mm-form-body{position:relative;min-height:100px}.mm-base-form-container .mm-form-actions{display:flex;gap:var(--mm-form-gap);justify-content:space-between;align-items:center}.mm-base-form-container .mm-form-status{display:flex;align-items:center}.mm-base-form-container .mm-status-indicator{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:#37b4001a;border:1px solid rgba(55,180,0,.3);border-radius:var(--mm-form-radius)}.mm-base-form-container .mm-status-indicator .mm-status-dot{width:8px;height:8px;border-radius:50%;background:var(--mm-form-status-ready);box-shadow:0 0 8px #37b40099;animation:pulse-dot 2s ease-in-out infinite}.mm-base-form-container .mm-status-indicator .mm-status-text{font-size:.7rem;font-weight:600;letter-spacing:1px;color:var(--mm-form-status-ready);text-transform:uppercase}.mm-base-form-container .mm-status-indicator.modified{background:#da91621a;border-color:#da91624d}.mm-base-form-container .mm-status-indicator.modified .mm-status-dot{background:var(--mm-form-status-modified);box-shadow:0 0 8px #da916299}.mm-base-form-container .mm-status-indicator.modified .mm-status-text{color:var(--mm-form-status-modified)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.6}}.mm-base-form-container .mm-form-buttons{display:flex;gap:var(--mm-form-gap)}.mm-base-form-container .mm-form-buttons button{min-width:100px}.mm-base-form-container .mm-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--mm-form-overlay-bg);opacity:.95;z-index:10}.mm-base-form-container .mm-loading-overlay p{margin-top:1rem;color:var(--mm-form-text-subtle);font-size:1rem}::ng-deep .mm-base-form-container fieldset[kendoformfieldset],::ng-deep .mm-base-form-container .k-form-fieldset{border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);padding:var(--mm-form-padding);margin:0;background:var(--mm-form-bg-alt)}::ng-deep .mm-base-form-container fieldset[kendoformfieldset] legend,::ng-deep .mm-base-form-container fieldset[kendoformfieldset] .k-form-legend,::ng-deep .mm-base-form-container .k-form-fieldset legend,::ng-deep .mm-base-form-container .k-form-fieldset .k-form-legend{font-size:1.125rem;font-weight:500;color:var(--mm-form-accent);padding:0 .5rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label,::ng-deep .mm-base-form-container kendo-formfield .k-label,::ng-deep .mm-base-form-container .k-form-field kendo-label,::ng-deep .mm-base-form-container .k-form-field .k-label{font-weight:500;color:var(--mm-form-text-label);margin-bottom:.25rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label .k-required,::ng-deep .mm-base-form-container kendo-formfield .k-label .k-required,::ng-deep .mm-base-form-container .k-form-field kendo-label .k-required,::ng-deep .mm-base-form-container .k-form-field .k-label .k-required{color:var(--mm-form-error)}::ng-deep .mm-base-form-container kendo-formfield kendo-textbox,::ng-deep .mm-base-form-container kendo-formfield kendo-numerictextbox,::ng-deep .mm-base-form-container kendo-formfield kendo-textarea,::ng-deep .mm-base-form-container kendo-formfield kendo-datepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-datetimepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-timepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-dropdownlist,::ng-deep .mm-base-form-container kendo-formfield kendo-combobox,::ng-deep .mm-base-form-container kendo-formfield kendo-multiselect,::ng-deep .mm-base-form-container kendo-formfield kendo-autocomplete,::ng-deep .mm-base-form-container .k-form-field kendo-textbox,::ng-deep .mm-base-form-container .k-form-field kendo-numerictextbox,::ng-deep .mm-base-form-container .k-form-field kendo-textarea,::ng-deep .mm-base-form-container .k-form-field kendo-datepicker,::ng-deep .mm-base-form-container .k-form-field kendo-datetimepicker,::ng-deep .mm-base-form-container .k-form-field kendo-timepicker,::ng-deep .mm-base-form-container .k-form-field kendo-dropdownlist,::ng-deep .mm-base-form-container .k-form-field kendo-combobox,::ng-deep .mm-base-form-container .k-form-field kendo-multiselect,::ng-deep .mm-base-form-container .k-form-field kendo-autocomplete{width:100%}::ng-deep .mm-base-form-container kendo-formfield kendo-formhint,::ng-deep .mm-base-form-container kendo-formfield .k-form-hint,::ng-deep .mm-base-form-container .k-form-field kendo-formhint,::ng-deep .mm-base-form-container .k-form-field .k-form-hint{color:var(--mm-form-text-subtle);font-size:.875rem}::ng-deep .mm-base-form-container kendo-formfield kendo-formerror,::ng-deep .mm-base-form-container kendo-formfield .k-form-error,::ng-deep .mm-base-form-container .k-form-field kendo-formerror,::ng-deep .mm-base-form-container .k-form-field .k-form-error{color:var(--mm-form-error);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:var(--mm-form-radius);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator.success{background-color:var(--kendo-color-success-subtle);color:var(--kendo-color-success-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.warning{background-color:var(--kendo-color-warning-subtle);color:var(--kendo-color-warning-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.error{background-color:var(--kendo-color-error-subtle);color:var(--kendo-color-error-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.info{background-color:var(--kendo-color-info-subtle);color:var(--kendo-color-info-on-subtle)}\n"] }]
4187
+ ], hostDirectives: [UnsavedChangesDirective], providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: BaseFormComponent }], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"mm-base-form-container\" [class.with-card]=\"config.showCard\" [class.without-card]=\"!config.showCard\">\n <!-- Title (no card mode) -->\n <div *ngIf=\"!config.showCard && (title || titleExtra)\" class=\"mm-form-title-row mm-form-title-standalone\">\n <h2 *ngIf=\"title\" class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Main form wrapper - styled as card or plain based on CSS class -->\n <div class=\"mm-form-wrapper\" [style.maxWidth]=\"config.showCard ? (config.cardWidth || '800px') : null\">\n <!-- Card header (only in card mode) -->\n <div *ngIf=\"config.showCard && (title || titleExtra)\" class=\"mm-form-header\">\n <h2 *ngIf=\"title\" class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Form body with content projection -->\n <div class=\"mm-form-body\">\n <div *ngIf=\"config.isLoading && config.showLoadingOverlay\" class=\"mm-loading-overlay\">\n <div class=\"k-loader k-loader-lg\"></div>\n <p>{{ loadingText }}</p>\n </div>\n <ng-content></ng-content>\n </div>\n\n <!-- Form actions -->\n <div class=\"mm-form-actions\">\n <!-- Status indicator (left side) -->\n <div class=\"mm-form-status\">\n <span class=\"mm-status-indicator\" [class.modified]=\"config.hasChanges\">\n <span class=\"mm-status-dot\"></span>\n <span class=\"mm-status-text\">{{ config.hasChanges ? modifiedText : readyText }}</span>\n </span>\n </div>\n\n <!-- Action buttons (right side) -->\n <div class=\"mm-form-buttons\">\n <button\n *ngIf=\"showSaveButton\"\n kendoButton\n type=\"submit\"\n [svgIcon]=\"saveIcon\"\n themeColor=\"primary\"\n [disabled]=\"saveButtonDisabled\"\n (click)=\"onSave()\">\n {{ saveButtonText }}\n </button>\n <button\n *ngIf=\"showCancelButton\"\n kendoButton\n type=\"button\"\n [svgIcon]=\"cancelIcon\"\n [disabled]=\"!!config.isSaving\"\n (click)=\"onCancel()\">\n {{ cancelButtonText }}\n </button>\n <ng-content select=\"[additionalActions]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--mm-form-bg: var(--kendo-color-surface);--mm-form-bg-alt: var(--kendo-color-surface-alt);--mm-form-bg-elevated: var(--kendo-color-surface-alt);--mm-form-border: var(--kendo-color-border);--mm-form-border-subtle: var(--kendo-color-border-alt, var(--mm-form-border));--mm-form-text: var(--kendo-color-on-app-surface);--mm-form-text-subtle: var(--kendo-color-subtle);--mm-form-text-label: var(--kendo-color-on-app-surface);--mm-form-accent: var(--kendo-color-primary);--mm-form-error: var(--kendo-color-error);--mm-form-status-ready: #37b400;--mm-form-status-modified: #da9162;--mm-form-padding: 1.5rem;--mm-form-padding-sm: 1rem;--mm-form-gap: .5rem;--mm-form-radius: 4px;--mm-form-shadow: 0 2px 6px rgba(0, 0, 0, .15);--mm-form-overlay-bg: var(--kendo-color-surface)}.mm-base-form-container{padding:var(--mm-form-padding);height:100%;overflow:auto}.mm-base-form-container .mm-form-wrapper{margin:0 auto}.mm-base-form-container.with-card .mm-form-wrapper{background:var(--mm-form-bg);border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);box-shadow:var(--mm-form-shadow)}.mm-base-form-container.with-card .mm-form-header{display:flex;align-items:center;gap:1rem;padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-bottom:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.with-card .mm-form-body{padding:var(--mm-form-padding)}.mm-base-form-container.with-card .mm-form-actions{padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-top:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.without-card .mm-form-wrapper{max-width:1200px}.mm-base-form-container.without-card .mm-form-title-standalone{margin-bottom:var(--mm-form-padding)}.mm-base-form-container.without-card .mm-form-actions{margin-top:var(--mm-form-padding);padding-top:var(--mm-form-padding);border-top:1px solid var(--mm-form-border)}.mm-base-form-container .mm-form-title-row{display:flex;align-items:center;gap:1rem}.mm-base-form-container .mm-form-title{font-size:1.5rem;font-weight:500;margin:0;color:var(--mm-form-text)}.mm-base-form-container .mm-modified-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;color:var(--mm-form-status-modified);background:#da916226;border:1px solid rgba(218,145,98,.4);border-radius:var(--mm-form-radius);animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.7}}.mm-base-form-container .mm-form-body{position:relative;min-height:100px}.mm-base-form-container .mm-form-actions{display:flex;gap:var(--mm-form-gap);justify-content:space-between;align-items:center}.mm-base-form-container .mm-form-status{display:flex;align-items:center}.mm-base-form-container .mm-status-indicator{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:#37b4001a;border:1px solid rgba(55,180,0,.3);border-radius:var(--mm-form-radius)}.mm-base-form-container .mm-status-indicator .mm-status-dot{width:8px;height:8px;border-radius:50%;background:var(--mm-form-status-ready);box-shadow:0 0 8px #37b40099;animation:pulse-dot 2s ease-in-out infinite}.mm-base-form-container .mm-status-indicator .mm-status-text{font-size:.7rem;font-weight:600;color:var(--mm-form-status-ready)}.mm-base-form-container .mm-status-indicator.modified{background:#da91621a;border-color:#da91624d}.mm-base-form-container .mm-status-indicator.modified .mm-status-dot{background:var(--mm-form-status-modified);box-shadow:0 0 8px #da916299}.mm-base-form-container .mm-status-indicator.modified .mm-status-text{color:var(--mm-form-status-modified)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.6}}.mm-base-form-container .mm-form-buttons{display:flex;gap:var(--mm-form-gap)}.mm-base-form-container .mm-form-buttons button{min-width:100px}.mm-base-form-container .mm-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--mm-form-overlay-bg);opacity:.95;z-index:10}.mm-base-form-container .mm-loading-overlay p{margin-top:1rem;color:var(--mm-form-text-subtle);font-size:1rem}::ng-deep .mm-base-form-container fieldset[kendoformfieldset],::ng-deep .mm-base-form-container .k-form-fieldset{border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);padding:var(--mm-form-padding);margin:0;background:var(--mm-form-bg-alt)}::ng-deep .mm-base-form-container fieldset[kendoformfieldset] legend,::ng-deep .mm-base-form-container fieldset[kendoformfieldset] .k-form-legend,::ng-deep .mm-base-form-container .k-form-fieldset legend,::ng-deep .mm-base-form-container .k-form-fieldset .k-form-legend{font-size:1.125rem;font-weight:500;color:var(--mm-form-accent);padding:0 .5rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label,::ng-deep .mm-base-form-container kendo-formfield .k-label,::ng-deep .mm-base-form-container .k-form-field kendo-label,::ng-deep .mm-base-form-container .k-form-field .k-label{font-weight:500;color:var(--mm-form-text-label);margin-bottom:.25rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label .k-required,::ng-deep .mm-base-form-container kendo-formfield .k-label .k-required,::ng-deep .mm-base-form-container .k-form-field kendo-label .k-required,::ng-deep .mm-base-form-container .k-form-field .k-label .k-required{color:var(--mm-form-error)}::ng-deep .mm-base-form-container kendo-formfield kendo-textbox,::ng-deep .mm-base-form-container kendo-formfield kendo-numerictextbox,::ng-deep .mm-base-form-container kendo-formfield kendo-textarea,::ng-deep .mm-base-form-container kendo-formfield kendo-datepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-datetimepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-timepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-dropdownlist,::ng-deep .mm-base-form-container kendo-formfield kendo-combobox,::ng-deep .mm-base-form-container kendo-formfield kendo-multiselect,::ng-deep .mm-base-form-container kendo-formfield kendo-autocomplete,::ng-deep .mm-base-form-container .k-form-field kendo-textbox,::ng-deep .mm-base-form-container .k-form-field kendo-numerictextbox,::ng-deep .mm-base-form-container .k-form-field kendo-textarea,::ng-deep .mm-base-form-container .k-form-field kendo-datepicker,::ng-deep .mm-base-form-container .k-form-field kendo-datetimepicker,::ng-deep .mm-base-form-container .k-form-field kendo-timepicker,::ng-deep .mm-base-form-container .k-form-field kendo-dropdownlist,::ng-deep .mm-base-form-container .k-form-field kendo-combobox,::ng-deep .mm-base-form-container .k-form-field kendo-multiselect,::ng-deep .mm-base-form-container .k-form-field kendo-autocomplete{width:100%}::ng-deep .mm-base-form-container kendo-formfield kendo-formhint,::ng-deep .mm-base-form-container kendo-formfield .k-form-hint,::ng-deep .mm-base-form-container .k-form-field kendo-formhint,::ng-deep .mm-base-form-container .k-form-field .k-form-hint{color:var(--mm-form-text-subtle);font-size:.875rem}::ng-deep .mm-base-form-container kendo-formfield kendo-formerror,::ng-deep .mm-base-form-container kendo-formfield .k-form-error,::ng-deep .mm-base-form-container .k-form-field kendo-formerror,::ng-deep .mm-base-form-container .k-form-field .k-form-error{color:var(--mm-form-error);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:var(--mm-form-radius);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator.success{background-color:var(--kendo-color-success-subtle);color:var(--kendo-color-success-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.warning{background-color:var(--kendo-color-warning-subtle);color:var(--kendo-color-warning-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.error{background-color:var(--kendo-color-error-subtle);color:var(--kendo-color-error-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.info{background-color:var(--kendo-color-info-subtle);color:var(--kendo-color-info-on-subtle)}\n"] }]
3355
4188
  }], propDecorators: { titleExtra: [{
3356
4189
  type: ContentChild,
3357
4190
  args: [FormTitleExtraDirective]
@@ -3914,7 +4747,7 @@ class EntitySelectDialogComponent {
3914
4747
  </button>
3915
4748
  </div>
3916
4749
  </div>
3917
- `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}.entity-select-dialog-content{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px 20px;box-sizing:border-box;gap:12px}.search-toolbar{flex-shrink:0}.entity-grid{flex:1;min-height:200px;border:1px solid var(--kendo-color-border)}.selection-info{padding:8px 0;font-size:12px;color:var(--kendo-color-subtle);flex-shrink:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: WindowModule }, { 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", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "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: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "component", type: CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll", "showDisabledCheckbox"] }, { kind: "component", type: CustomMessagesComponent, selector: "kendo-grid-messages" }, { 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: "pipe", type: PascalCasePipe, name: "pascalCase" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
4750
+ `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}.entity-select-dialog-content{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px 20px;box-sizing:border-box;gap:12px}.search-toolbar{flex-shrink:0}.entity-grid{flex:1;min-height:200px;border:1px solid var(--kendo-color-border)}.selection-info{padding:8px 0;font-size:12px;color:var(--kendo-color-subtle);flex-shrink:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: WindowModule }, { 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", "pinnable", "pinnedTopRows", "pinnedBottomRows", "isRowPinnable"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "rowPinChange", "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: "component", type: ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "component", type: CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll", "showDisabledCheckbox"] }, { kind: "component", type: CustomMessagesComponent, selector: "kendo-grid-messages" }, { 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: "pipe", type: PascalCasePipe, name: "pascalCase" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
3918
4751
  }
3919
4752
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EntitySelectDialogComponent, decorators: [{
3920
4753
  type: Component,
@@ -4385,7 +5218,7 @@ class EntitySelectInputComponent {
4385
5218
  (click)="openAdvancedSearch()">
4386
5219
  </button>
4387
5220
  </div>
4388
- `, isInline: true, styles: [":host{display:block;width:100%}.entity-select-wrapper{position:relative;display:flex;align-items:center;width:100%;gap:4px}.entity-select-wrapper.disabled{opacity:.6;pointer-events:none}.entity-autocomplete{flex:1;min-width:0}.dialog-button{flex-shrink:0;height:30px;width:30px;padding:0;display:flex;align-items:center;justify-content:center}.clear-button{position:absolute;right:32px;top:50%;transform:translateY(-50%);z-index:1;padding:4px;min-width:auto;height:20px;width:20px}.entity-item{padding:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-data-message{padding:8px 12px;color:var(--kendo-color-subtle);font-style:italic;text-align:center}.advanced-search-footer{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;color:var(--kendo-color-primary);border-top:1px solid var(--kendo-color-border);background:var(--kendo-color-surface-alt);transition:background-color .2s}.advanced-search-footer:hover{background:var(--kendo-color-base-hover)}::ng-deep .entity-autocomplete .k-input-inner{padding-right:60px!important}::ng-deep .entity-autocomplete.k-disabled .k-input-inner{padding-right:32px!important}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i3$1.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoAutoComplete"] }, { kind: "directive", type: i3$1.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i3$1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i3$1.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { kind: "ngmodule", type: LoaderModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: i3.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "ngmodule", type: SVGIconModule }], changeDetection: i0.ChangeDetectionStrategy.Eager });
5221
+ `, isInline: true, styles: [":host{display:block;width:100%}.entity-select-wrapper{position:relative;display:flex;align-items:center;width:100%;gap:4px}.entity-select-wrapper.disabled{opacity:.6;pointer-events:none}.entity-autocomplete{flex:1;min-width:0}.dialog-button{flex-shrink:0;height:30px;width:30px;padding:0;display:flex;align-items:center;justify-content:center}.clear-button{position:absolute;right:32px;top:50%;transform:translateY(-50%);z-index:1;padding:4px;min-width:auto;height:20px;width:20px}.entity-item{padding:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-data-message{padding:8px 12px;color:var(--kendo-color-subtle);font-style:italic;text-align:center}.advanced-search-footer{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;color:var(--kendo-color-primary);border-top:1px solid var(--kendo-color-border);background:var(--kendo-color-surface-alt);transition:background-color .2s}.advanced-search-footer:hover{background:var(--kendo-color-base-hover)}::ng-deep .entity-autocomplete .k-input-inner{padding-right:60px!important}::ng-deep .entity-autocomplete.k-disabled .k-input-inner{padding-right:32px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i3.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoAutoComplete"] }, { kind: "directive", type: i3.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i3.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i3.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { kind: "ngmodule", type: LoaderModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: IconsModule }, { kind: "component", type: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "ngmodule", type: SVGIconModule }], changeDetection: i0.ChangeDetectionStrategy.Eager });
4389
5222
  }
4390
5223
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: EntitySelectInputComponent, decorators: [{
4391
5224
  type: Component,
@@ -4782,7 +5615,7 @@ class SaveAsDialogComponent extends DialogContentBase {
4782
5615
  {{ saveButtonText }}
4783
5616
  </button>
4784
5617
  </kendo-dialog-actions>
4785
- `, 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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
5618
+ `, 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$3.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$1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
4786
5619
  }
4787
5620
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: SaveAsDialogComponent, decorators: [{
4788
5621
  type: Component,
@@ -5501,7 +6334,7 @@ class TimeRangePickerComponent {
5501
6334
  return this.selectedType() === type;
5502
6335
  }
5503
6336
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TimeRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5504
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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, day types) -->\n @if (isType('year') || isType('quarter') || isType('month') || isType('day')) {\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') || isType('day')) {\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 <!-- Day Selection -->\n @if (isType('day')) {\n <div class=\"picker-field day-field\">\n <kendo-label [text]=\"mergedLabels().day || 'Day'\">\n <kendo-dropdownlist\n [data]=\"dayOptions()\"\n [value]=\"selectedDay()\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n (valueChange)=\"onDayChange($event)\">\n </kendo-dropdownlist>\n </kendo-label>\n </div>\n\n <!-- Hour From Selection (optional) -->\n <div class=\"picker-field hour-from-field\">\n <kendo-label [text]=\"mergedLabels().hourFrom || 'From Hour'\">\n <kendo-dropdownlist\n [data]=\"hourFromOptions()\"\n [value]=\"hourFrom()\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [defaultItem]=\"{ value: null, label: '\u2014' }\"\n (valueChange)=\"onHourFromChange($event)\">\n </kendo-dropdownlist>\n </kendo-label>\n </div>\n\n <!-- Hour To Selection (visible when hourFrom is set) -->\n @if (hourFrom() !== null) {\n <div class=\"picker-field hour-to-field\">\n <kendo-label [text]=\"mergedLabels().hourTo || 'To Hour'\">\n <kendo-dropdownlist\n [data]=\"hourToOptions()\"\n [value]=\"hourTo()\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n (valueChange)=\"onHourToChange($event)\">\n </kendo-dropdownlist>\n </kendo-label>\n </div>\n }\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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
6337
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", 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, day types) -->\n @if (isType('year') || isType('quarter') || isType('month') || isType('day')) {\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') || isType('day')) {\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 <!-- Day Selection -->\n @if (isType('day')) {\n <div class=\"picker-field day-field\">\n <kendo-label [text]=\"mergedLabels().day || 'Day'\">\n <kendo-dropdownlist\n [data]=\"dayOptions()\"\n [value]=\"selectedDay()\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n (valueChange)=\"onDayChange($event)\">\n </kendo-dropdownlist>\n </kendo-label>\n </div>\n\n <!-- Hour From Selection (optional) -->\n <div class=\"picker-field hour-from-field\">\n <kendo-label [text]=\"mergedLabels().hourFrom || 'From Hour'\">\n <kendo-dropdownlist\n [data]=\"hourFromOptions()\"\n [value]=\"hourFrom()\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [defaultItem]=\"{ value: null, label: '\u2014' }\"\n (valueChange)=\"onHourFromChange($event)\">\n </kendo-dropdownlist>\n </kendo-label>\n </div>\n\n <!-- Hour To Selection (visible when hourFrom is set) -->\n @if (hourFrom() !== null) {\n <div class=\"picker-field hour-to-field\">\n <kendo-label [text]=\"mergedLabels().hourTo || 'To Hour'\">\n <kendo-dropdownlist\n [data]=\"hourToOptions()\"\n [value]=\"hourTo()\"\n textField=\"label\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n (valueChange)=\"onHourToChange($event)\">\n </kendo-dropdownlist>\n </kendo-label>\n </div>\n }\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.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: 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
5505
6338
  }
5506
6339
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TimeRangePickerComponent, decorators: [{
5507
6340
  type: Component,
@@ -6397,7 +7230,7 @@ class CronBuilderComponent {
6397
7230
  useExisting: forwardRef(() => CronBuilderComponent),
6398
7231
  multi: true
6399
7232
  }
6400
- ], 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", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], 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", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
7233
+ ], 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;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}.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;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;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;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$4.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$4.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i1$4.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i3.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: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], 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: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
6401
7234
  }
6402
7235
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CronBuilderComponent, decorators: [{
6403
7236
  type: Component,
@@ -6417,7 +7250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
6417
7250
  useExisting: forwardRef(() => CronBuilderComponent),
6418
7251
  multi: true
6419
7252
  }
6420
- ], 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"] }]
7253
+ ], 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;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}.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;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;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;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"] }]
6421
7254
  }], ctorParameters: () => [], propDecorators: { config: [{
6422
7255
  type: Input
6423
7256
  }] } });
@@ -6466,7 +7299,7 @@ class CopyableTextComponent {
6466
7299
  });
6467
7300
  }
6468
7301
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CopyableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6469
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: CopyableTextComponent, isStandalone: true, selector: "mm-copyable-text", inputs: { value: "value", label: "label", copyLabel: "copyLabel", buttonTitle: "buttonTitle" }, outputs: { copied: "copied" }, ngImport: i0, template: "<div class=\"mm-copyable-text\">\n @if (label) {\n <label class=\"label\">{{ label }}</label>\n }\n <div class=\"value-container\">\n <span class=\"value\">{{ hasValue ? value : '\u2014' }}</span>\n @if (hasValue) {\n <button\n kendoButton\n type=\"button\"\n fillMode=\"flat\"\n [svgIcon]=\"copyIcon\"\n [title]=\"buttonTitle\"\n class=\"copy-button\"\n (click)=\"copyToClipboard()\">\n </button>\n }\n </div>\n</div>\n", styles: [".mm-copyable-text{display:flex;flex-direction:column;gap:4px}.mm-copyable-text .label{font-size:.875rem;font-weight:500;color:var(--kendo-color-subtle, #6c757d)}.mm-copyable-text .value-container{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--theme-bg-elevated, rgba(31, 46, 64, .4));border:1px solid var(--theme-border-subtle, rgba(100, 206, 185, .15));border-radius:4px;transition:border-color .2s ease,box-shadow .2s ease}.mm-copyable-text .value-container:hover{border-color:var(--theme-border-hover, rgba(100, 206, 185, .3))}.mm-copyable-text .value-container .value{flex:1;font-family:Roboto Mono,Consolas,Monaco,monospace;font-size:.875rem;color:var(--theme-text-primary, rgba(var(--octo-text-color), .9));word-break:break-all;-webkit-user-select:text;user-select:text}.mm-copyable-text .value-container .copy-button{flex-shrink:0;opacity:.7;transition:opacity .2s ease}.mm-copyable-text .value-container .copy-button:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }], changeDetection: i0.ChangeDetectionStrategy.Eager });
7302
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: CopyableTextComponent, isStandalone: true, selector: "mm-copyable-text", inputs: { value: "value", label: "label", copyLabel: "copyLabel", buttonTitle: "buttonTitle" }, outputs: { copied: "copied" }, ngImport: i0, template: "<div class=\"mm-copyable-text\">\n @if (label) {\n <label class=\"label\">{{ label }}</label>\n }\n <div class=\"value-container\">\n <span class=\"value\">{{ hasValue ? value : '\u2014' }}</span>\n @if (hasValue) {\n <button\n kendoButton\n type=\"button\"\n fillMode=\"flat\"\n [svgIcon]=\"copyIcon\"\n [title]=\"buttonTitle\"\n class=\"copy-button\"\n (click)=\"copyToClipboard()\">\n </button>\n }\n </div>\n</div>\n", styles: [".mm-copyable-text{display:flex;flex-direction:column;gap:4px}.mm-copyable-text .label{font-size:.875rem;font-weight:500;color:var(--kendo-color-subtle, #6c757d)}.mm-copyable-text .value-container{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--theme-bg-elevated, rgba(31, 46, 64, .4));border:1px solid var(--theme-border-subtle, rgba(100, 206, 185, .15));border-radius:4px;transition:border-color .2s ease,box-shadow .2s ease}.mm-copyable-text .value-container:hover{border-color:var(--theme-border-hover, rgba(100, 206, 185, .3))}.mm-copyable-text .value-container .value{flex:1;font-family:Roboto Mono,Consolas,Monaco,monospace;font-size:.875rem;color:var(--theme-text-primary, rgba(var(--octo-text-color), .9));word-break:break-all;-webkit-user-select:text;user-select:text}.mm-copyable-text .value-container .copy-button{flex-shrink:0;opacity:.7;transition:opacity .2s ease}.mm-copyable-text .value-container .copy-button:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: SVGIconModule }], changeDetection: i0.ChangeDetectionStrategy.Eager });
6470
7303
  }
6471
7304
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CopyableTextComponent, decorators: [{
6472
7305
  type: Component,
@@ -6546,6 +7379,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
6546
7379
  type: Injectable
6547
7380
  }] });
6548
7381
 
7382
+ /**
7383
+ * The actions of one table row (AB#5570): icon buttons (16 px) with tooltip and an accessible
7384
+ * name that includes the row ("Edit Mesh Adapter"), from one shared action definition.
7385
+ * At most `maxInline` slots (default 3): when the actions do not fit, the last slot becomes a
7386
+ * "More actions for …" menu. Disabled actions stay focusable and announce their reason;
7387
+ * in the menu the reason is shown under the item text.
7388
+ *
7389
+ * The component only emits — destructive handlers confirm first (danger dialog naming the target).
7390
+ *
7391
+ * ```html
7392
+ * <td class="actions">
7393
+ * <mm-row-actions [actions]="rowActions(run)" [rowLabel]="runLabel(run)" (triggered)="onAction($event, run)" />
7394
+ * </td>
7395
+ * ```
7396
+ */
7397
+ class RowActionsComponent {
7398
+ /** Action definitions for this row (hidden ones are filtered out). */
7399
+ actions = input.required(/* @ts-ignore */
7400
+ ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
7401
+ /** Human name of the row ("Mesh Adapter", "Encrypt run 2026-10-06 17:09"); part of every accessible name. */
7402
+ rowLabel = input.required(/* @ts-ignore */
7403
+ ...(ngDevMode ? [{ debugName: "rowLabel" }] : /* istanbul ignore next */ []));
7404
+ /** Slots incl. the overflow button. */
7405
+ maxInline = input(MM_ROW_ACTIONS_MAX_INLINE, { ...(ngDevMode ? { debugName: "maxInline" } : /* istanbul ignore next */ {}), transform: numberAttribute });
7406
+ /** Fires for enabled actions only, inline or from the menu. */
7407
+ triggered = output();
7408
+ router = inject(Router, { optional: true });
7409
+ /** Menu links resolve like the inline `routerLink`: relative to the hosting route. */
7410
+ route = inject(ActivatedRoute, { optional: true });
7411
+ moreIcon = moreVerticalIcon;
7412
+ split = computed(() => splitRowActions(this.actions(), this.maxInline()), /* @ts-ignore */
7413
+ ...(ngDevMode ? [{ debugName: "split" }] : /* istanbul ignore next */ []));
7414
+ menuItems = computed(() => this.split().menu.map((action) => ({
7415
+ text: action.menuLabel || action.label,
7416
+ svgIcon: action.icon,
7417
+ disabled: isActionDisabled(action),
7418
+ action,
7419
+ })), /* @ts-ignore */
7420
+ ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
7421
+ /** No group semantics for an empty cell (all actions hidden). */
7422
+ hasActions = computed(() => this.split().inline.length > 0 || this.split().menu.length > 0, /* @ts-ignore */
7423
+ ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
7424
+ moreLabel = computed(() => `More actions for ${this.rowLabel()}`, /* @ts-ignore */
7425
+ ...(ngDevMode ? [{ debugName: "moreLabel" }] : /* istanbul ignore next */ []));
7426
+ groupLabel = computed(() => `Actions for ${this.rowLabel()}`, /* @ts-ignore */
7427
+ ...(ngDevMode ? [{ debugName: "groupLabel" }] : /* istanbul ignore next */ []));
7428
+ onMenuItem(item) {
7429
+ if (!item || item.disabled) {
7430
+ return;
7431
+ }
7432
+ const link = item.action.link;
7433
+ if (link && this.router) {
7434
+ const commands = typeof link.commands === 'string' ? [link.commands] : [...link.commands];
7435
+ void this.router.navigate(commands, { queryParams: link.queryParams, relativeTo: this.route ?? undefined });
7436
+ }
7437
+ this.triggered.emit({ id: item.action.id, action: item.action });
7438
+ }
7439
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7440
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: RowActionsComponent, isStandalone: true, selector: "mm-row-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: true, transformFunction: null }, rowLabel: { classPropertyName: "rowLabel", publicName: "rowLabel", isSignal: true, isRequired: true, transformFunction: null }, maxInline: { classPropertyName: "maxInline", publicName: "maxInline", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { triggered: "triggered" }, host: { properties: { "attr.role": "hasActions() ? \"group\" : null", "attr.aria-label": "hasActions() ? groupLabel() : null" }, classAttribute: "mm-row-actions" }, ngImport: i0, template: `
7441
+ @for (action of split().inline; track action.id) {
7442
+ <mm-action-button [action]="action" [targetLabel]="rowLabel()" context="row" display="icon"
7443
+ (triggered)="triggered.emit($event)" />
7444
+ }
7445
+ @if (menuItems().length) {
7446
+ <kendo-dropdownbutton
7447
+ class="mm-row-actions__more"
7448
+ [data]="menuItems()"
7449
+ [svgIcon]="moreIcon"
7450
+ size="small"
7451
+ fillMode="flat"
7452
+ themeColor="base"
7453
+ [buttonAttributes]="{ title: moreLabel(), 'aria-label': moreLabel(), 'data-action': 'more' }"
7454
+ (itemClick)="onMenuItem($event)"
7455
+ >
7456
+ <ng-template kendoDropDownButtonItemTemplate let-item>
7457
+ <span class="mm-row-actions__item" [class.mm-row-actions__item--danger]="!!item.action.danger"
7458
+ [attr.data-action]="item.action.id">
7459
+ @if (item.svgIcon) {
7460
+ <kendo-svgicon [icon]="item.svgIcon" />
7461
+ }
7462
+ <span class="mm-row-actions__item-text">
7463
+ <span>{{ item.text }}</span>
7464
+ @if (item.disabled) {
7465
+ <span class="mm-row-actions__item-reason">{{ item.action.disabledReason }}</span>
7466
+ }
7467
+ </span>
7468
+ </span>
7469
+ </ng-template>
7470
+ </kendo-dropdownbutton>
7471
+ }
7472
+ `, isInline: true, styles: [".mm-row-actions{display:inline-flex;align-items:center;gap:var(--theme-space-1, 4px)}.mm-row-actions__item{display:inline-flex;align-items:flex-start;gap:var(--theme-space-2, 8px)}.mm-row-actions__item-text{display:inline-flex;flex-direction:column}.mm-row-actions__item-reason{font-size:.85em;color:var(--theme-text-muted, #75829a);white-space:normal;max-width:280px}.mm-row-actions__item--danger{color:var(--theme-status-error, #c0385f)}.mm-row-actions__more .k-button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #2e8473)}\n"], dependencies: [{ kind: "ngmodule", type: DropDownButtonModule }, { kind: "component", type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "directive", type: i1$1.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: ActionButtonComponent, selector: "mm-action-button", inputs: ["action", "targetLabel", "context", "display", "primary"], outputs: ["triggered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
7473
+ }
7474
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: RowActionsComponent, decorators: [{
7475
+ type: Component,
7476
+ args: [{ selector: 'mm-row-actions', standalone: true, imports: [DropDownButtonModule, SVGIconModule, ActionButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
7477
+ class: 'mm-row-actions',
7478
+ '[attr.role]': 'hasActions() ? "group" : null',
7479
+ '[attr.aria-label]': 'hasActions() ? groupLabel() : null',
7480
+ }, template: `
7481
+ @for (action of split().inline; track action.id) {
7482
+ <mm-action-button [action]="action" [targetLabel]="rowLabel()" context="row" display="icon"
7483
+ (triggered)="triggered.emit($event)" />
7484
+ }
7485
+ @if (menuItems().length) {
7486
+ <kendo-dropdownbutton
7487
+ class="mm-row-actions__more"
7488
+ [data]="menuItems()"
7489
+ [svgIcon]="moreIcon"
7490
+ size="small"
7491
+ fillMode="flat"
7492
+ themeColor="base"
7493
+ [buttonAttributes]="{ title: moreLabel(), 'aria-label': moreLabel(), 'data-action': 'more' }"
7494
+ (itemClick)="onMenuItem($event)"
7495
+ >
7496
+ <ng-template kendoDropDownButtonItemTemplate let-item>
7497
+ <span class="mm-row-actions__item" [class.mm-row-actions__item--danger]="!!item.action.danger"
7498
+ [attr.data-action]="item.action.id">
7499
+ @if (item.svgIcon) {
7500
+ <kendo-svgicon [icon]="item.svgIcon" />
7501
+ }
7502
+ <span class="mm-row-actions__item-text">
7503
+ <span>{{ item.text }}</span>
7504
+ @if (item.disabled) {
7505
+ <span class="mm-row-actions__item-reason">{{ item.action.disabledReason }}</span>
7506
+ }
7507
+ </span>
7508
+ </span>
7509
+ </ng-template>
7510
+ </kendo-dropdownbutton>
7511
+ }
7512
+ `, styles: [".mm-row-actions{display:inline-flex;align-items:center;gap:var(--theme-space-1, 4px)}.mm-row-actions__item{display:inline-flex;align-items:flex-start;gap:var(--theme-space-2, 8px)}.mm-row-actions__item-text{display:inline-flex;flex-direction:column}.mm-row-actions__item-reason{font-size:.85em;color:var(--theme-text-muted, #75829a);white-space:normal;max-width:280px}.mm-row-actions__item--danger{color:var(--theme-status-error, #c0385f)}.mm-row-actions__more .k-button:focus-visible{outline:none;box-shadow:var(--theme-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #2e8473)}\n"] }]
7513
+ }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: true }] }], rowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLabel", required: true }] }], maxInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxInline", required: false }] }], triggered: [{ type: i0.Output, args: ["triggered"] }] } });
7514
+
6549
7515
  /*
6550
7516
  * Public API Surface of shared-ui
6551
7517
  */
@@ -6569,5 +7535,5 @@ function provideMmSharedUi() {
6569
7535
  * Generated bundle index. Do not edit.
6570
7536
  */
6571
7537
 
6572
- export { BaseFormComponent, BaseTreeDetailComponent, ButtonTypes, BytesToSizePipe, CRON_PRESETS, ConfirmationService, ConfirmationWindowComponent, ConfirmationWindowResult, CopyableTextComponent, CronBuilderComponent, CronHumanizerService, CronParserService, DEFAULT_CONFIRMATION_WINDOW_MESSAGES, DEFAULT_CRON_BUILDER_CONFIG, DEFAULT_ENTITY_SELECT_DIALOG_MESSAGES, DEFAULT_ENTITY_SELECT_INPUT_MESSAGES, DEFAULT_INPUT_DIALOG_MESSAGES, DEFAULT_LIST_VIEW_MESSAGES, DEFAULT_MESSAGE_DETAILS_DIALOG_MESSAGES, DEFAULT_NOTIFICATION_DISPLAY_MESSAGES, DEFAULT_PROGRESS_WINDOW_MESSAGES, DEFAULT_RESPONSIVE_COLSPAN, DEFAULT_SAVE_AS_DIALOG_MESSAGES, DEFAULT_TIME_RANGE_LABELS, DataSourceBase, DataSourceTyped, DialogType, EntitySelectDialogComponent, EntitySelectDialogService, EntitySelectInputComponent, FetchResultBase, FetchResultTyped, FileUploadResult, FileUploadService, FormTitleExtraDirective, HAS_UNSAVED_CHANGES, HOUR_INTERVALS, HierarchyDataSource, HierarchyDataSourceBase, ImportStrategyDialogComponent, ImportStrategyDialogResult, ImportStrategyDialogService, ImportStrategyDto, InputDialogComponent, InputService, ListStateService, ListViewComponent, ListViewFiltersDirective, 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, WindowStateService, generateDayOfMonthOptions, generateHourOptions, generateMinuteOptions, provideMmSharedUi };
7538
+ export { ActionButtonComponent, BaseFormComponent, BaseTreeDetailComponent, ButtonTypes, BytesToSizePipe, CRON_PRESETS, ConfirmationService, ConfirmationWindowComponent, ConfirmationWindowResult, CopyableTextComponent, CronBuilderComponent, CronHumanizerService, CronParserService, DANGER_CONFIRM_ENVIRONMENT, DANGER_CONFIRM_FALLBACK_WORD, DANGER_CONFIRM_SAFE_FOCUS, DEFAULT_CONFIRMATION_WINDOW_MESSAGES, DEFAULT_CRON_BUILDER_CONFIG, DEFAULT_DANGER_CONFIRMATION_MESSAGES, DEFAULT_ENTITY_SELECT_DIALOG_MESSAGES, DEFAULT_ENTITY_SELECT_INPUT_MESSAGES, DEFAULT_INPUT_DIALOG_MESSAGES, DEFAULT_LIST_VIEW_MESSAGES, DEFAULT_MESSAGE_DETAILS_DIALOG_MESSAGES, DEFAULT_NOTIFICATION_DISPLAY_MESSAGES, DEFAULT_PROGRESS_WINDOW_MESSAGES, DEFAULT_RESPONSIVE_COLSPAN, DEFAULT_SAVE_AS_DIALOG_MESSAGES, DEFAULT_TIME_RANGE_LABELS, DangerConfirmationResult, DangerConfirmationWindowComponent, DataSourceBase, DataSourceTyped, DialogType, EntitySelectDialogComponent, EntitySelectDialogService, EntitySelectInputComponent, FetchResultBase, FetchResultTyped, FileUploadResult, FileUploadService, FormTitleExtraDirective, HAS_UNSAVED_CHANGES, HOUR_INTERVALS, HierarchyDataSource, HierarchyDataSourceBase, ImportStrategyDialogComponent, ImportStrategyDialogResult, ImportStrategyDialogService, ImportStrategyDto, InputDialogComponent, InputService, ListStateService, ListViewComponent, ListViewFiltersDirective, MINUTE_INTERVALS, MM_ACTION_ICONS, MM_ROW_ACTIONS_MAX_INLINE, MessageDetailsDialogComponent, MessageDetailsDialogService, MessageListenerService, MmListViewDataBindingDirective, NOTIFICATION_DISPLAY_OPTIONS, NotificationDisplayService, PascalCasePipe, ProgressValue, ProgressWindowComponent, ProgressWindowService, RELATIVE_WEEKS, RowActionsComponent, SECOND_INTERVALS, SaveAsDialogComponent, SaveAsDialogService, TimeRangePickerComponent, TimeRangeUtils, TreeComponent, UnsavedChangesDirective, UnsavedChangesGuard, UploadFileDialogComponent, WEEKDAYS, WEEKDAY_ABBREVIATIONS, WindowStateService, actionAccessibleName, actionTooltip, applyDangerConfirmEnvironment, dangerConfirmNameMatches, dangerConfirmTypingToken, generateDayOfMonthOptions, generateHourOptions, generateMinuteOptions, isActionDisabled, isActionVisible, provideMmSharedUi, resolveListRowAction, resolveListViewMessages, sameAction, splitRowActions };
6573
7539
  //# sourceMappingURL=meshmakers-shared-ui.mjs.map