@mk-kit/ui 0.50.0 → 0.52.0
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/fesm2022/mk-kit-ui-block-editor.mjs +2 -1
- package/fesm2022/mk-kit-ui-block-editor.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-checkbox.mjs +2 -1
- package/fesm2022/mk-kit-ui-checkbox.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-core-signal-forms.mjs +56 -0
- package/fesm2022/mk-kit-ui-core-signal-forms.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-core.mjs +1 -43
- package/fesm2022/mk-kit-ui-core.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-data.mjs +2 -1
- package/fesm2022/mk-kit-ui-data.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-datetime.mjs +2 -1
- package/fesm2022/mk-kit-ui-datetime.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-feedback-prompt-dialog-DnxQ7M0h.mjs +49 -0
- package/fesm2022/mk-kit-ui-feedback-prompt-dialog-DnxQ7M0h.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-feedback.mjs +7 -43
- package/fesm2022/mk-kit-ui-feedback.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-forms.mjs +2 -1
- package/fesm2022/mk-kit-ui-forms.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-rich-text.mjs +2 -1
- package/fesm2022/mk-kit-ui-rich-text.mjs.map +1 -1
- package/fesm2022/mk-kit-ui-testing.mjs +13 -2
- package/fesm2022/mk-kit-ui-testing.mjs.map +1 -1
- package/fesm2022/mk-kit-ui.mjs +1 -0
- package/fesm2022/mk-kit-ui.mjs.map +1 -1
- package/package.json +5 -1
- package/types/mk-kit-ui-core-signal-forms.d.ts +31 -0
- package/types/mk-kit-ui-core.d.ts +1 -29
- package/types/mk-kit-ui-feedback.d.ts +1 -22
- package/types/mk-kit-ui-testing.d.ts +6 -1
- package/types/mk-kit-ui.d.ts +1 -0
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, viewChild, ElementRef, signal, computed, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { MkOverlayRef, MK_OVERLAY_DATA, MK_I18N } from '@mk-kit/ui/core';
|
|
4
|
+
import { MkButton } from '@mk-kit/ui/button';
|
|
5
|
+
import { MkInput, MkFormField } from '@mk-kit/ui/forms';
|
|
6
|
+
import { MkDialog } from './mk-kit-ui-feedback.mjs';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Internal component backing `MkDialogService.prompt`. Renders a single text
|
|
10
|
+
* field and resolves the overlay ref with the entered string on confirm, or
|
|
11
|
+
* `null` on cancel / Escape / backdrop. Submitting the form (Enter) confirms.
|
|
12
|
+
*/
|
|
13
|
+
class MkPromptDialog {
|
|
14
|
+
ref = inject(MkOverlayRef);
|
|
15
|
+
data = inject(MK_OVERLAY_DATA);
|
|
16
|
+
i18n = inject(MK_I18N);
|
|
17
|
+
// `read: ElementRef` — the template ref also carries the MkInput directive, which would otherwise win.
|
|
18
|
+
inputRef = viewChild('input', { ...(ngDevMode ? { debugName: "inputRef" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
19
|
+
value = signal(this.data.value ?? '', /* @ts-ignore */
|
|
20
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
21
|
+
confirmText = computed(() => this.data.confirmText ?? this.i18n.ok, /* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [{ debugName: "confirmText" }] : /* istanbul ignore next */ []));
|
|
23
|
+
cancelText = computed(() => this.data.cancelText ?? this.i18n.cancel, /* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
|
|
25
|
+
canConfirm = computed(() => !this.data.required || this.value().trim().length > 0, /* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [{ debugName: "canConfirm" }] : /* istanbul ignore next */ []));
|
|
27
|
+
constructor() {
|
|
28
|
+
afterNextRender(() => this.inputRef()?.nativeElement?.focus());
|
|
29
|
+
}
|
|
30
|
+
onInput(event) {
|
|
31
|
+
this.value.set(event.target.value);
|
|
32
|
+
}
|
|
33
|
+
submit() {
|
|
34
|
+
if (this.canConfirm())
|
|
35
|
+
this.ref.close(this.value());
|
|
36
|
+
}
|
|
37
|
+
cancel() {
|
|
38
|
+
this.ref.close(null);
|
|
39
|
+
}
|
|
40
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
41
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPromptDialog, isStandalone: true, selector: "mk-prompt-dialog", viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n @if (data.message) {\n <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n }\n\n <mk-form-field [label]=\"data.label ?? ''\">\n <input\n #input\n mkInput\n [attr.type]=\"data.inputType ?? 'text'\"\n [value]=\"value()\"\n [attr.placeholder]=\"data.placeholder ?? null\"\n [attr.required]=\"data.required ? '' : null\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"submit()\"\n />\n </mk-form-field>\n\n <div mkDialogFooter>\n <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n {{ cancelText() }}\n </button>\n <button mkButton (click)=\"submit()\" [disabled]=\"!canConfirm()\">\n {{ confirmText() }}\n </button>\n </div>\n</mk-dialog>\n", styles: [".mk-confirm-dialog__message{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-confirm-dialog__body{display:flex;align-items:flex-start;gap:var(--mk-space-3)}.mk-confirm-dialog__icon{flex-shrink:0;margin-top:.125rem;color:var(--mk-text-muted)}.mk-confirm-dialog__icon--danger{color:var(--mk-danger-text)}\n"], dependencies: [{ kind: "component", type: MkDialog, selector: "mk-dialog", inputs: ["dialogTitle", "titleId", "hideClose", "draggable", "resizable"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkInput, selector: "input[mkInput], textarea[mkInput]", inputs: ["size", "invalid"] }, { kind: "component", type: MkFormField, selector: "mk-form-field", inputs: ["label", "hint", "error", "errorMessages", "errorOn", "required", "disabled", "size", "labelPosition", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
42
|
+
}
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPromptDialog, decorators: [{
|
|
44
|
+
type: Component,
|
|
45
|
+
args: [{ selector: 'mk-prompt-dialog', imports: [MkDialog, MkButton, MkInput, MkFormField], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n @if (data.message) {\n <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n }\n\n <mk-form-field [label]=\"data.label ?? ''\">\n <input\n #input\n mkInput\n [attr.type]=\"data.inputType ?? 'text'\"\n [value]=\"value()\"\n [attr.placeholder]=\"data.placeholder ?? null\"\n [attr.required]=\"data.required ? '' : null\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"submit()\"\n />\n </mk-form-field>\n\n <div mkDialogFooter>\n <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n {{ cancelText() }}\n </button>\n <button mkButton (click)=\"submit()\" [disabled]=\"!canConfirm()\">\n {{ confirmText() }}\n </button>\n </div>\n</mk-dialog>\n", styles: [".mk-confirm-dialog__message{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-confirm-dialog__body{display:flex;align-items:flex-start;gap:var(--mk-space-3)}.mk-confirm-dialog__icon{flex-shrink:0;margin-top:.125rem;color:var(--mk-text-muted)}.mk-confirm-dialog__icon--danger{color:var(--mk-danger-text)}\n"] }]
|
|
46
|
+
}], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
47
|
+
|
|
48
|
+
export { MkPromptDialog };
|
|
49
|
+
//# sourceMappingURL=mk-kit-ui-feedback-prompt-dialog-DnxQ7M0h.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mk-kit-ui-feedback-prompt-dialog-DnxQ7M0h.mjs","sources":["../../../projects/mk-kit/feedback/dialog/prompt-dialog.ts","../../../projects/mk-kit/feedback/dialog/prompt-dialog.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n afterNextRender,\n computed,\n inject,\n signal,\n viewChild,\n ElementRef,\n} from '@angular/core';\nimport { MK_I18N } from '@mk-kit/ui/core';\nimport { MK_OVERLAY_DATA, MkOverlayRef } from '@mk-kit/ui/core';\nimport { MkButton } from '@mk-kit/ui/button';\nimport { MkInput } from '@mk-kit/ui/forms';\nimport { MkFormField } from '@mk-kit/ui/forms';\nimport { MkDialog } from './dialog';\n\n/** Data contract for {@link MkPromptDialog} / `MkDialogService.prompt`. */\nexport interface MkPromptDialogData {\n /** Heading text. */\n title: string;\n /** Optional body message shown above the input. */\n message?: string;\n /** Field label. */\n label?: string;\n /** Pre-filled value. */\n value?: string;\n /** Input placeholder. */\n placeholder?: string;\n /** Confirm button label. Default `OK`. */\n confirmText?: string;\n /** Cancel button label. Default `Cancel`. */\n cancelText?: string;\n /** Require a non-empty value before the confirm button enables. */\n required?: boolean;\n /** Native input type (e.g. `text`, `email`, `number`, `password`). */\n inputType?: string;\n}\n\n/**\n * Internal component backing `MkDialogService.prompt`. Renders a single text\n * field and resolves the overlay ref with the entered string on confirm, or\n * `null` on cancel / Escape / backdrop. Submitting the form (Enter) confirms.\n */\n@Component({\n selector: 'mk-prompt-dialog',\n imports: [MkDialog, MkButton, MkInput, MkFormField],\n templateUrl: './prompt-dialog.html',\n styleUrl: './confirm-dialog.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MkPromptDialog {\n private readonly ref = inject<MkOverlayRef<string | null>>(MkOverlayRef);\n protected readonly data = inject<MkPromptDialogData>(MK_OVERLAY_DATA);\n protected readonly i18n = inject(MK_I18N);\n // `read: ElementRef` — the template ref also carries the MkInput directive, which would otherwise win.\n private readonly inputRef = viewChild('input', { read: ElementRef });\n\n protected readonly value = signal(this.data.value ?? '');\n protected readonly confirmText = computed(\n () => this.data.confirmText ?? this.i18n.ok,\n );\n protected readonly cancelText = computed(\n () => this.data.cancelText ?? this.i18n.cancel,\n );\n protected readonly canConfirm = computed(\n () => !this.data.required || this.value().trim().length > 0,\n );\n\n constructor() {\n afterNextRender(() => (this.inputRef()?.nativeElement as HTMLInputElement | undefined)?.focus());\n }\n\n protected onInput(event: Event): void {\n this.value.set((event.target as HTMLInputElement).value);\n }\n\n protected submit(): void {\n if (this.canConfirm()) this.ref.close(this.value());\n }\n\n protected cancel(): void {\n this.ref.close(null);\n }\n}\n","<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n @if (data.message) {\n <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n }\n\n <mk-form-field [label]=\"data.label ?? ''\">\n <input\n #input\n mkInput\n [attr.type]=\"data.inputType ?? 'text'\"\n [value]=\"value()\"\n [attr.placeholder]=\"data.placeholder ?? null\"\n [attr.required]=\"data.required ? '' : null\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"submit()\"\n />\n </mk-form-field>\n\n <div mkDialogFooter>\n <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n {{ cancelText() }}\n </button>\n <button mkButton (click)=\"submit()\" [disabled]=\"!canConfirm()\">\n {{ confirmText() }}\n </button>\n </div>\n</mk-dialog>\n"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,6 @@ import { isPlatformBrowser } from '@angular/common';
|
|
|
5
5
|
import { MkButton } from '@mk-kit/ui/button';
|
|
6
6
|
import { MkBadge, MkEmptyState, MkSpinner } from '@mk-kit/ui/data';
|
|
7
7
|
import { MkIcon } from '@mk-kit/ui/icon';
|
|
8
|
-
import { MkInput, MkFormField } from '@mk-kit/ui/forms';
|
|
9
8
|
|
|
10
9
|
/**
|
|
11
10
|
* Alert — an inline banner that communicates a contextual status message.
|
|
@@ -1397,46 +1396,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
1397
1396
|
args: [{ selector: 'mk-confirm-dialog', imports: [MkDialog, MkButton, MkIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n <div class=\"mk-confirm-dialog__body\">\n @if (data.icon; as icon) {\n <mk-icon\n class=\"mk-confirm-dialog__icon\"\n [class.mk-confirm-dialog__icon--danger]=\"data.tone === 'danger'\"\n [name]=\"icon\"\n [size]=\"22\"\n />\n }\n <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n </div>\n\n <div mkDialogFooter>\n @if (!data.hideCancel) {\n <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n {{ cancelText() }}\n </button>\n }\n <button mkButton [tone]=\"confirmTone()\" (click)=\"confirm()\">\n {{ confirmText() }}\n </button>\n </div>\n</mk-dialog>\n", styles: [".mk-confirm-dialog__message{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-confirm-dialog__body{display:flex;align-items:flex-start;gap:var(--mk-space-3)}.mk-confirm-dialog__icon{flex-shrink:0;margin-top:.125rem;color:var(--mk-text-muted)}.mk-confirm-dialog__icon--danger{color:var(--mk-danger-text)}\n"] }]
|
|
1398
1397
|
}] });
|
|
1399
1398
|
|
|
1400
|
-
/**
|
|
1401
|
-
* Internal component backing `MkDialogService.prompt`. Renders a single text
|
|
1402
|
-
* field and resolves the overlay ref with the entered string on confirm, or
|
|
1403
|
-
* `null` on cancel / Escape / backdrop. Submitting the form (Enter) confirms.
|
|
1404
|
-
*/
|
|
1405
|
-
class MkPromptDialog {
|
|
1406
|
-
ref = inject(MkOverlayRef);
|
|
1407
|
-
data = inject(MK_OVERLAY_DATA);
|
|
1408
|
-
i18n = inject(MK_I18N);
|
|
1409
|
-
// `read: ElementRef` — the template ref also carries the MkInput directive, which would otherwise win.
|
|
1410
|
-
inputRef = viewChild('input', { ...(ngDevMode ? { debugName: "inputRef" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
1411
|
-
value = signal(this.data.value ?? '', /* @ts-ignore */
|
|
1412
|
-
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1413
|
-
confirmText = computed(() => this.data.confirmText ?? this.i18n.ok, /* @ts-ignore */
|
|
1414
|
-
...(ngDevMode ? [{ debugName: "confirmText" }] : /* istanbul ignore next */ []));
|
|
1415
|
-
cancelText = computed(() => this.data.cancelText ?? this.i18n.cancel, /* @ts-ignore */
|
|
1416
|
-
...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
|
|
1417
|
-
canConfirm = computed(() => !this.data.required || this.value().trim().length > 0, /* @ts-ignore */
|
|
1418
|
-
...(ngDevMode ? [{ debugName: "canConfirm" }] : /* istanbul ignore next */ []));
|
|
1419
|
-
constructor() {
|
|
1420
|
-
afterNextRender(() => this.inputRef()?.nativeElement?.focus());
|
|
1421
|
-
}
|
|
1422
|
-
onInput(event) {
|
|
1423
|
-
this.value.set(event.target.value);
|
|
1424
|
-
}
|
|
1425
|
-
submit() {
|
|
1426
|
-
if (this.canConfirm())
|
|
1427
|
-
this.ref.close(this.value());
|
|
1428
|
-
}
|
|
1429
|
-
cancel() {
|
|
1430
|
-
this.ref.close(null);
|
|
1431
|
-
}
|
|
1432
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1433
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkPromptDialog, isStandalone: true, selector: "mk-prompt-dialog", viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n @if (data.message) {\n <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n }\n\n <mk-form-field [label]=\"data.label ?? ''\">\n <input\n #input\n mkInput\n [attr.type]=\"data.inputType ?? 'text'\"\n [value]=\"value()\"\n [attr.placeholder]=\"data.placeholder ?? null\"\n [attr.required]=\"data.required ? '' : null\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"submit()\"\n />\n </mk-form-field>\n\n <div mkDialogFooter>\n <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n {{ cancelText() }}\n </button>\n <button mkButton (click)=\"submit()\" [disabled]=\"!canConfirm()\">\n {{ confirmText() }}\n </button>\n </div>\n</mk-dialog>\n", styles: [".mk-confirm-dialog__message{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-confirm-dialog__body{display:flex;align-items:flex-start;gap:var(--mk-space-3)}.mk-confirm-dialog__icon{flex-shrink:0;margin-top:.125rem;color:var(--mk-text-muted)}.mk-confirm-dialog__icon--danger{color:var(--mk-danger-text)}\n"], dependencies: [{ kind: "component", type: MkDialog, selector: "mk-dialog", inputs: ["dialogTitle", "titleId", "hideClose", "draggable", "resizable"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkInput, selector: "input[mkInput], textarea[mkInput]", inputs: ["size", "invalid"] }, { kind: "component", type: MkFormField, selector: "mk-form-field", inputs: ["label", "hint", "error", "errorMessages", "errorOn", "required", "disabled", "size", "labelPosition", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1434
|
-
}
|
|
1435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPromptDialog, decorators: [{
|
|
1436
|
-
type: Component,
|
|
1437
|
-
args: [{ selector: 'mk-prompt-dialog', imports: [MkDialog, MkButton, MkInput, MkFormField], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mk-dialog [dialogTitle]=\"data.title\" hideClose>\n @if (data.message) {\n <p class=\"mk-confirm-dialog__message\">{{ data.message }}</p>\n }\n\n <mk-form-field [label]=\"data.label ?? ''\">\n <input\n #input\n mkInput\n [attr.type]=\"data.inputType ?? 'text'\"\n [value]=\"value()\"\n [attr.placeholder]=\"data.placeholder ?? null\"\n [attr.required]=\"data.required ? '' : null\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"submit()\"\n />\n </mk-form-field>\n\n <div mkDialogFooter>\n <button mkButton variant=\"ghost\" tone=\"neutral\" (click)=\"cancel()\">\n {{ cancelText() }}\n </button>\n <button mkButton (click)=\"submit()\" [disabled]=\"!canConfirm()\">\n {{ confirmText() }}\n </button>\n </div>\n</mk-dialog>\n", styles: [".mk-confirm-dialog__message{margin:0;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-relaxed)}.mk-confirm-dialog__body{display:flex;align-items:flex-start;gap:var(--mk-space-3)}.mk-confirm-dialog__icon{flex-shrink:0;margin-top:.125rem;color:var(--mk-text-muted)}.mk-confirm-dialog__icon--danger{color:var(--mk-danger-text)}\n"] }]
|
|
1438
|
-
}], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
1439
|
-
|
|
1440
1399
|
const DIALOG_PANEL_CLASS = 'mk-dialog-panel';
|
|
1441
1400
|
/**
|
|
1442
1401
|
* Dialog service — a thin, opinionated layer over {@link MkOverlayService} that
|
|
@@ -1496,7 +1455,12 @@ class MkDialogService {
|
|
|
1496
1455
|
* Open a single-field prompt dialog. Resolves with the entered string, or
|
|
1497
1456
|
* `null` if the user cancels, presses Escape, or clicks the backdrop.
|
|
1498
1457
|
*/
|
|
1499
|
-
prompt(data) {
|
|
1458
|
+
async prompt(data) {
|
|
1459
|
+
// Loaded on demand: the prompt dialog is the only thing in `feedback` that
|
|
1460
|
+
// needs `@mk-kit/ui/forms`, and a static reference here shipped the whole
|
|
1461
|
+
// forms entry (input, form field, and their dependencies) to every app
|
|
1462
|
+
// that injects this service — including ones that never prompt.
|
|
1463
|
+
const { MkPromptDialog } = await import('./mk-kit-ui-feedback-prompt-dialog-DnxQ7M0h.mjs');
|
|
1500
1464
|
const ref = this.open(MkPromptDialog, { data, ariaLabel: data.title });
|
|
1501
1465
|
return ref.afterClosed.then((result) => result ?? null);
|
|
1502
1466
|
}
|
|
@@ -2818,5 +2782,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
2818
2782
|
* Generated bundle index. Do not edit.
|
|
2819
2783
|
*/
|
|
2820
2784
|
|
|
2821
|
-
export { MK_TOUR_DATA, MkAlert, MkBanner, MkBlockUi, MkBlockUiOverlay, MkBlockUiService, MkBottomSheet, MkBottomSheetService, MkConfirmDialog, MkDialog, MkDialogService, MkDialogTitle, MkHovercard, MkHovercardTrigger, MkLoadingBar, MkLoadingBarService, MkNotificationCenter, MkPopconfirm, MkPopconfirmTrigger, MkPopover, MkPopoverTrigger,
|
|
2785
|
+
export { MK_TOUR_DATA, MkAlert, MkBanner, MkBlockUi, MkBlockUiOverlay, MkBlockUiService, MkBottomSheet, MkBottomSheetService, MkConfirmDialog, MkDialog, MkDialogService, MkDialogTitle, MkHovercard, MkHovercardTrigger, MkLoadingBar, MkLoadingBarService, MkNotificationCenter, MkPopconfirm, MkPopconfirmTrigger, MkPopover, MkPopoverTrigger, MkResult, MkSnackbar, MkSnackbarContainer, MkSnackbarRef, MkSnackbarService, MkToast, MkToastContainer, MkToastService, MkTooltip, MkTooltipPanel, MkTourPopup, MkTourService };
|
|
2822
2786
|
//# sourceMappingURL=mk-kit-ui-feedback.mjs.map
|