@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.
- package/README.md +30 -0
- package/fesm2022/meshmakers-shared-ui-assistant-core.mjs +938 -0
- package/fesm2022/meshmakers-shared-ui-assistant-core.mjs.map +1 -0
- package/fesm2022/meshmakers-shared-ui-assistant.mjs +796 -0
- package/fesm2022/meshmakers-shared-ui-assistant.mjs.map +1 -0
- package/fesm2022/meshmakers-shared-ui-command-palette.mjs +817 -0
- package/fesm2022/meshmakers-shared-ui-command-palette.mjs.map +1 -0
- package/fesm2022/meshmakers-shared-ui-shell.mjs +1738 -0
- package/fesm2022/meshmakers-shared-ui-shell.mjs.map +1 -0
- package/fesm2022/meshmakers-shared-ui-testing.mjs +92 -0
- package/fesm2022/meshmakers-shared-ui-testing.mjs.map +1 -0
- package/fesm2022/meshmakers-shared-ui.mjs +1167 -201
- package/fesm2022/meshmakers-shared-ui.mjs.map +1 -1
- package/package.json +28 -2
- package/types/meshmakers-shared-ui-assistant-core.d.ts +728 -0
- package/types/meshmakers-shared-ui-assistant.d.ts +247 -0
- package/types/meshmakers-shared-ui-command-palette.d.ts +398 -0
- package/types/meshmakers-shared-ui-shell.d.ts +939 -0
- package/types/meshmakers-shared-ui-testing.d.ts +41 -0
- package/types/meshmakers-shared-ui.d.ts +739 -153
|
@@ -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,
|
|
3
|
-
import * as i3$
|
|
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
|
|
7
|
-
import { ButtonComponent, ButtonModule, DropDownButtonComponent, SplitButtonComponent, ButtonsModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
|
|
8
|
-
import * as i1$
|
|
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
|
|
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,
|
|
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$
|
|
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
|
|
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$
|
|
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$
|
|
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)=\"
|
|
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)=\"
|
|
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:
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
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
|
-
|
|
1173
|
-
|
|
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}
|
|
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
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
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
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
const
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
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
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
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
|
|
2078
|
-
|
|
2079
|
-
|
|
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
|
|
2146
|
-
*
|
|
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 }
|
|
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 =
|
|
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 =
|
|
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.
|
|
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
|
|
2701
|
-
if (!
|
|
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
|
-
|
|
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$
|
|
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$
|
|
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$
|
|
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:
|
|
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
|