@mk-kit/ui 0.34.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/LICENSE +21 -0
- package/README.md +115 -0
- package/block-editor/README.md +254 -0
- package/fesm2022/mk-kit-ui-block-editor.mjs +2158 -0
- package/fesm2022/mk-kit-ui-block-editor.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-button.mjs +81 -0
- package/fesm2022/mk-kit-ui-button.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-checkbox.mjs +136 -0
- package/fesm2022/mk-kit-ui-checkbox.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-chip.mjs +122 -0
- package/fesm2022/mk-kit-ui-chip.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-context-menu.mjs +144 -0
- package/fesm2022/mk-kit-ui-context-menu.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-core.mjs +1576 -0
- package/fesm2022/mk-kit-ui-core.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-data.mjs +6055 -0
- package/fesm2022/mk-kit-ui-data.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-datetime.mjs +3409 -0
- package/fesm2022/mk-kit-ui-datetime.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-directives.mjs +1779 -0
- package/fesm2022/mk-kit-ui-directives.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-dnd.mjs +1073 -0
- package/fesm2022/mk-kit-ui-dnd.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-feedback.mjs +2426 -0
- package/fesm2022/mk-kit-ui-feedback.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-forms.mjs +9208 -0
- package/fesm2022/mk-kit-ui-forms.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-icon.mjs +470 -0
- package/fesm2022/mk-kit-ui-icon.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-media.mjs +896 -0
- package/fesm2022/mk-kit-ui-media.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-navigation.mjs +2542 -0
- package/fesm2022/mk-kit-ui-navigation.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-rich-text.mjs +565 -0
- package/fesm2022/mk-kit-ui-rich-text.mjs.map +1 -0
- package/fesm2022/mk-kit-ui-table.mjs +1378 -0
- package/fesm2022/mk-kit-ui-table.mjs.map +1 -0
- package/fesm2022/mk-kit-ui.mjs +32 -0
- package/fesm2022/mk-kit-ui.mjs.map +1 -0
- package/package.json +130 -0
- package/schematics/collection.json +10 -0
- package/schematics/ng-add/index.js +113 -0
- package/schematics/ng-add/schema.json +22 -0
- package/schematics/package.json +3 -0
- package/styles/mk-kit.css +750 -0
- package/types/mk-kit-ui-block-editor.d.ts +292 -0
- package/types/mk-kit-ui-button.d.ts +40 -0
- package/types/mk-kit-ui-checkbox.d.ts +62 -0
- package/types/mk-kit-ui-chip.d.ts +59 -0
- package/types/mk-kit-ui-context-menu.d.ts +57 -0
- package/types/mk-kit-ui-core.d.ts +1105 -0
- package/types/mk-kit-ui-data.d.ts +2580 -0
- package/types/mk-kit-ui-datetime.d.ts +1171 -0
- package/types/mk-kit-ui-directives.d.ts +807 -0
- package/types/mk-kit-ui-dnd.d.ts +423 -0
- package/types/mk-kit-ui-feedback.d.ts +1270 -0
- package/types/mk-kit-ui-forms.d.ts +3586 -0
- package/types/mk-kit-ui-icon.d.ts +108 -0
- package/types/mk-kit-ui-media.d.ts +549 -0
- package/types/mk-kit-ui-navigation.d.ts +1169 -0
- package/types/mk-kit-ui-rich-text.d.ts +187 -0
- package/types/mk-kit-ui-table.d.ts +739 -0
- package/types/mk-kit-ui.d.ts +17 -0
|
@@ -0,0 +1,1105 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken, ComponentRef, Injector, OnDestroy, Type, AfterViewInit, ElementRef, Provider, Signal } from '@angular/core';
|
|
3
|
+
import { Observable } from 'rxjs';
|
|
4
|
+
import { ValidationErrors } from '@angular/forms';
|
|
5
|
+
|
|
6
|
+
/** Shared primitive types used across mk-kit components. */
|
|
7
|
+
/** Control size scale. Maps to `--mk-control-height-*` tokens. */
|
|
8
|
+
type MkSize$1 = 'sm' | 'md' | 'lg';
|
|
9
|
+
/** Semantic color tone. Each maps to a `--mk-<tone>*` token family. */
|
|
10
|
+
type MkTone = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';
|
|
11
|
+
/** Visual treatment for tinted/interactive surfaces. */
|
|
12
|
+
type MkVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link';
|
|
13
|
+
/** Theme selection. `system` follows the OS `prefers-color-scheme`. */
|
|
14
|
+
type MkThemePreference = 'light' | 'dark' | 'system';
|
|
15
|
+
/** Concrete resolved theme (never `system`). */
|
|
16
|
+
type MkResolvedTheme = 'light' | 'dark';
|
|
17
|
+
/** Common placement values for overlays (menus, tooltips, popovers). */
|
|
18
|
+
type MkPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Global control-density mode.
|
|
22
|
+
*
|
|
23
|
+
* `touch` sizes controls for fingers (48px default) rather than a cursor —
|
|
24
|
+
* tablets, kiosks, order screens. It is usually applied per-subtree with the
|
|
25
|
+
* `data-mk-density` attribute rather than globally, since one app often has
|
|
26
|
+
* both a mouse-driven admin and a touch-driven screen.
|
|
27
|
+
*/
|
|
28
|
+
type MkDensity = 'comfortable' | 'compact' | 'touch';
|
|
29
|
+
/**
|
|
30
|
+
* Reactive theme controller for mk-kit.
|
|
31
|
+
*
|
|
32
|
+
* - `preference()` is the user's choice: `light`, `dark`, or `system`.
|
|
33
|
+
* - `resolvedTheme()` is the concrete theme currently applied.
|
|
34
|
+
* - Writes `data-mk-theme` on `<html>` and persists the choice to
|
|
35
|
+
* `localStorage`. When set to `system`, it live-tracks the OS setting and
|
|
36
|
+
* removes the attribute so pure-CSS `prefers-color-scheme` takes over.
|
|
37
|
+
*
|
|
38
|
+
* Provided in root — inject it anywhere and bind to the signals.
|
|
39
|
+
*/
|
|
40
|
+
declare class MkThemeService {
|
|
41
|
+
private readonly document;
|
|
42
|
+
private readonly destroyRef;
|
|
43
|
+
private readonly isBrowser;
|
|
44
|
+
private readonly _preference;
|
|
45
|
+
/** The user's theme preference. */
|
|
46
|
+
readonly preference: _angular_core.Signal<MkThemePreference>;
|
|
47
|
+
private readonly _systemPrefersDark;
|
|
48
|
+
/** The concrete theme in effect (`light` or `dark`). */
|
|
49
|
+
readonly resolvedTheme: _angular_core.Signal<MkResolvedTheme>;
|
|
50
|
+
/** Convenience boolean for template bindings. */
|
|
51
|
+
readonly isDark: _angular_core.Signal<boolean>;
|
|
52
|
+
private readonly _density;
|
|
53
|
+
/**
|
|
54
|
+
* The global density mode. `compact` tightens control heights and the core
|
|
55
|
+
* spacing steps via the `data-mk-density` attribute, `touch` enlarges them —
|
|
56
|
+
* every component follows automatically because they read the same tokens.
|
|
57
|
+
*
|
|
58
|
+
* This signal is the GLOBAL mode only. To make one screen or dialog touch-
|
|
59
|
+
* sized inside an otherwise comfortable app, put `data-mk-density="touch"`
|
|
60
|
+
* on that element instead; the tokens inherit and this service stays out of
|
|
61
|
+
* it.
|
|
62
|
+
*/
|
|
63
|
+
readonly density: _angular_core.Signal<MkDensity>;
|
|
64
|
+
constructor();
|
|
65
|
+
/** Set the global density mode. */
|
|
66
|
+
setDensity(density: MkDensity): void;
|
|
67
|
+
/**
|
|
68
|
+
* Toggle between comfortable and compact — the two modes a density switch in
|
|
69
|
+
* a UI offers. `touch` is a deliberate choice for a specific screen, not
|
|
70
|
+
* something to land on by toggling, so from `touch` this returns to
|
|
71
|
+
* comfortable rather than cycling.
|
|
72
|
+
*/
|
|
73
|
+
toggleDensity(): void;
|
|
74
|
+
private readInitialDensity;
|
|
75
|
+
/** Set the theme preference explicitly. */
|
|
76
|
+
setTheme(preference: MkThemePreference): void;
|
|
77
|
+
/** Toggle between light and dark (resolving `system` first). */
|
|
78
|
+
toggle(): void;
|
|
79
|
+
private readInitial;
|
|
80
|
+
private readSystemDark;
|
|
81
|
+
private watchSystemPreference;
|
|
82
|
+
private isBrowserEnv;
|
|
83
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkThemeService, never>;
|
|
84
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<MkThemeService>;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
type MkAriaLivePoliteness = 'polite' | 'assertive';
|
|
88
|
+
/**
|
|
89
|
+
* Announces messages to assistive technology via a visually-hidden
|
|
90
|
+
* `aria-live` region. Used by toasts, form validation, sort changes, etc.
|
|
91
|
+
* so state changes are perceivable without sight. WCAG 4.1.3 (Status Messages).
|
|
92
|
+
*/
|
|
93
|
+
declare class MkLiveAnnouncer {
|
|
94
|
+
private readonly document;
|
|
95
|
+
private readonly isBrowser;
|
|
96
|
+
private region?;
|
|
97
|
+
private clearTimer?;
|
|
98
|
+
/** Announce `message`. `politeness` controls interruption behavior. */
|
|
99
|
+
announce(message: string, politeness?: MkAriaLivePoliteness): void;
|
|
100
|
+
private ensureRegion;
|
|
101
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkLiveAnnouncer, never>;
|
|
102
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<MkLiveAnnouncer>;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/** Returns the tabbable elements inside `root`, in DOM order. */
|
|
106
|
+
declare function mkGetFocusable(root: HTMLElement): HTMLElement[];
|
|
107
|
+
/**
|
|
108
|
+
* Traps keyboard focus within `root` (wrapping Tab / Shift+Tab), moves focus
|
|
109
|
+
* inside on activation, and restores focus to the previously-focused element
|
|
110
|
+
* on release. Essential for accessible modals/menus (WCAG 2.4.3, 2.1.2).
|
|
111
|
+
*/
|
|
112
|
+
declare class MkFocusTrap {
|
|
113
|
+
private readonly root;
|
|
114
|
+
private previouslyFocused;
|
|
115
|
+
private active;
|
|
116
|
+
private readonly keydownHandler;
|
|
117
|
+
constructor(root: HTMLElement);
|
|
118
|
+
/** Activate the trap and move focus to the first focusable element (or root). */
|
|
119
|
+
activate(initialFocus?: HTMLElement): void;
|
|
120
|
+
/** Deactivate and restore focus to the trigger element. */
|
|
121
|
+
release(): void;
|
|
122
|
+
private onKeydown;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Generates a stable, unique DOM id for wiring `aria-*` relationships
|
|
127
|
+
* (labels, descriptions, controls). Prefer this over `Math.random()` so
|
|
128
|
+
* ids are deterministic within a render and SSR-safe.
|
|
129
|
+
*
|
|
130
|
+
* @param prefix short semantic prefix, e.g. `mk-input`.
|
|
131
|
+
*/
|
|
132
|
+
declare function mkUniqueId(prefix?: string): string;
|
|
133
|
+
|
|
134
|
+
/** Injection token exposing the data passed to an overlay component. */
|
|
135
|
+
declare const MK_OVERLAY_DATA: InjectionToken<unknown>;
|
|
136
|
+
/**
|
|
137
|
+
* Handle to an open overlay. Injected into the rendered component and returned
|
|
138
|
+
* from `MkOverlayService.open`. Resolve the overlay by calling `close`.
|
|
139
|
+
*
|
|
140
|
+
* The close result is exposed three ways so the handle fits whatever style the
|
|
141
|
+
* calling code already uses — they all settle together:
|
|
142
|
+
*
|
|
143
|
+
* - `result` — a signal, for template binding and signal-based components.
|
|
144
|
+
* - `closed$` — an Observable that emits once and completes, for RxJS
|
|
145
|
+
* pipelines. A service that hands a dialog result back to its callers can
|
|
146
|
+
* return this directly instead of wrapping the promise in `from(...)`.
|
|
147
|
+
* - `afterClosed` — a Promise, for `await` / `.then()`.
|
|
148
|
+
*/
|
|
149
|
+
declare class MkOverlayRef<TResult = unknown, TComponent = unknown> {
|
|
150
|
+
/** The rendered component instance (set by the service after creation). */
|
|
151
|
+
componentRef?: ComponentRef<TComponent>;
|
|
152
|
+
private readonly _closed;
|
|
153
|
+
/** Becomes `true` once the overlay has been dismissed. */
|
|
154
|
+
readonly closed: _angular_core.Signal<boolean>;
|
|
155
|
+
private readonly _result;
|
|
156
|
+
/**
|
|
157
|
+
* The value passed to `close`, or `undefined` while open and for a dismissal
|
|
158
|
+
* (Escape / backdrop). Read `closed()` to tell "closed with no result" apart
|
|
159
|
+
* from "still open".
|
|
160
|
+
*/
|
|
161
|
+
readonly result: _angular_core.Signal<TResult | undefined>;
|
|
162
|
+
private resolveClosed;
|
|
163
|
+
/** Resolves with the close result when the overlay is dismissed. */
|
|
164
|
+
readonly afterClosed: Promise<TResult | undefined>;
|
|
165
|
+
private emitClosed?;
|
|
166
|
+
/**
|
|
167
|
+
* Emits the close result once, then completes. Subscribing after the overlay
|
|
168
|
+
* has already closed replays the result immediately, so a late subscriber
|
|
169
|
+
* never hangs.
|
|
170
|
+
*/
|
|
171
|
+
readonly closed$: Observable<TResult | undefined>;
|
|
172
|
+
/** Internal disposer wired up by the service. */
|
|
173
|
+
_dispose: (result: TResult | undefined) => void;
|
|
174
|
+
/** Close the overlay, optionally returning a result. */
|
|
175
|
+
close(result?: TResult): void;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
interface MkOverlayConfig<TData = unknown> {
|
|
179
|
+
/** Arbitrary data injected via `MK_OVERLAY_DATA`. */
|
|
180
|
+
data?: TData;
|
|
181
|
+
/** Render a dimmed scrim behind the panel. Default `true`. */
|
|
182
|
+
hasBackdrop?: boolean;
|
|
183
|
+
/** Close when the backdrop is clicked. Default `true`. */
|
|
184
|
+
closeOnBackdropClick?: boolean;
|
|
185
|
+
/** Close when Escape is pressed. Default `true`. */
|
|
186
|
+
closeOnEscape?: boolean;
|
|
187
|
+
/** Trap focus within the panel and restore it on close. Default `true`. */
|
|
188
|
+
trapFocus?: boolean;
|
|
189
|
+
/**
|
|
190
|
+
* Move focus to the panel's first focusable element on open. Default `true`.
|
|
191
|
+
* Set `false` to focus the panel itself instead — for content-led surfaces
|
|
192
|
+
* (a product sheet, a preview) where focusing the close button first reads
|
|
193
|
+
* as "dismiss me". Tab containment and focus restore are unaffected; turn
|
|
194
|
+
* `trapFocus` off only if you want neither.
|
|
195
|
+
*/
|
|
196
|
+
autoFocus?: boolean;
|
|
197
|
+
/** Extra class(es) applied to the panel host element. */
|
|
198
|
+
panelClass?: string | string[];
|
|
199
|
+
/** Accessible role for the panel. Default `dialog`. */
|
|
200
|
+
role?: 'dialog' | 'alertdialog' | 'menu' | 'listbox';
|
|
201
|
+
/** `aria-label` for the panel when no visible title is wired up. */
|
|
202
|
+
ariaLabel?: string;
|
|
203
|
+
/** A custom injector to use as the parent for the rendered component. */
|
|
204
|
+
injector?: Injector;
|
|
205
|
+
}
|
|
206
|
+
/**
|
|
207
|
+
* Lightweight, dependency-free overlay renderer. Instantiates a standalone
|
|
208
|
+
* component into a body-level host, manages the backdrop, focus trapping,
|
|
209
|
+
* Escape handling, and scroll locking. Powers Dialog, Menu, and others.
|
|
210
|
+
*/
|
|
211
|
+
declare class MkOverlayService implements OnDestroy {
|
|
212
|
+
private readonly appRef;
|
|
213
|
+
private readonly envInjector;
|
|
214
|
+
private readonly document;
|
|
215
|
+
private readonly isBrowser;
|
|
216
|
+
/** Reference count for the body scroll lock (first open locks, last close unlocks). */
|
|
217
|
+
private openOverlays;
|
|
218
|
+
private bodyScrollLock;
|
|
219
|
+
/**
|
|
220
|
+
* Every overlay currently on screen, in open order (Map preserves insertion
|
|
221
|
+
* order, so the last entry is the topmost). Kept so {@link closeAll} can
|
|
222
|
+
* dismiss them and so the shared Escape listener can find the topmost
|
|
223
|
+
* dismissible overlay. Entries remove themselves on dispose.
|
|
224
|
+
*/
|
|
225
|
+
private readonly openRefs;
|
|
226
|
+
/** The document currently carrying the shared Escape listener, if any. */
|
|
227
|
+
private escapeListenerDoc;
|
|
228
|
+
/**
|
|
229
|
+
* The one document-level Escape listener, shared by every open overlay.
|
|
230
|
+
*
|
|
231
|
+
* Registered on the BUBBLE phase on purpose: widgets living inside an
|
|
232
|
+
* overlay (a menu, an anchored panel, a picker) handle Escape on their own
|
|
233
|
+
* elements during bubbling and call `preventDefault()`, so a consumed
|
|
234
|
+
* Escape arrives here already `defaultPrevented` and closes nothing. A
|
|
235
|
+
* per-overlay capture listener with `stopPropagation()` cannot do this:
|
|
236
|
+
* stopPropagation does not stop OTHER listeners on the same target, so one
|
|
237
|
+
* Escape used to close every stacked overlay at once.
|
|
238
|
+
*/
|
|
239
|
+
private readonly onDocumentEscape;
|
|
240
|
+
/** (Un)register the shared Escape listener to match the open-overlay set. */
|
|
241
|
+
private syncEscapeListener;
|
|
242
|
+
private lockBodyScroll;
|
|
243
|
+
private unlockBodyScroll;
|
|
244
|
+
/** How many overlays are currently open. */
|
|
245
|
+
get openCount(): number;
|
|
246
|
+
/**
|
|
247
|
+
* Close every open overlay, newest first. Each is closed with no result, so
|
|
248
|
+
* `afterClosed` resolves undefined exactly as a backdrop click or Escape
|
|
249
|
+
* would. Safe to call when nothing is open.
|
|
250
|
+
*/
|
|
251
|
+
closeAll(): void;
|
|
252
|
+
/**
|
|
253
|
+
* Injector teardown closes everything still open. In an app this runs only
|
|
254
|
+
* at shutdown; in tests it runs on every `TestBed.resetTestingModule()`,
|
|
255
|
+
* so an overlay a spec forgot to close cannot leak its scroll lock, focus
|
|
256
|
+
* trap, inert marks, or document listeners into later spec files sharing
|
|
257
|
+
* the worker.
|
|
258
|
+
*/
|
|
259
|
+
ngOnDestroy(): void;
|
|
260
|
+
open<TComponent, TResult = unknown, TData = unknown>(component: Type<TComponent>, config?: MkOverlayConfig<TData>): MkOverlayRef<TResult, TComponent>;
|
|
261
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkOverlayService, never>;
|
|
262
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<MkOverlayService>;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
/** Options controlling {@link mkComputeAnchoredPosition}. */
|
|
266
|
+
interface MkAnchoredPositionOptions {
|
|
267
|
+
placement: MkPlacement;
|
|
268
|
+
gap: number;
|
|
269
|
+
flip: boolean;
|
|
270
|
+
clamp: boolean;
|
|
271
|
+
/** Resolve `-start`/`-end` alignment against a right-to-left anchor. */
|
|
272
|
+
rtl?: boolean;
|
|
273
|
+
}
|
|
274
|
+
interface MkRectLike {
|
|
275
|
+
top: number;
|
|
276
|
+
left: number;
|
|
277
|
+
right: number;
|
|
278
|
+
bottom: number;
|
|
279
|
+
width: number;
|
|
280
|
+
height: number;
|
|
281
|
+
}
|
|
282
|
+
interface MkSize {
|
|
283
|
+
width: number;
|
|
284
|
+
height: number;
|
|
285
|
+
}
|
|
286
|
+
/** Resolved coordinates (viewport-relative, for `position: fixed`). */
|
|
287
|
+
interface MkAnchoredPosition {
|
|
288
|
+
top: number;
|
|
289
|
+
left: number;
|
|
290
|
+
/** The placement actually used after any flip. */
|
|
291
|
+
placement: MkPlacement;
|
|
292
|
+
}
|
|
293
|
+
/**
|
|
294
|
+
* Pure viewport-positioning maths shared by every anchored overlay
|
|
295
|
+
* ({@link MkAnchoredPanel} and the tooltip). Given the anchor rect, the panel
|
|
296
|
+
* size and the viewport size, returns the top/left for a `position: fixed`
|
|
297
|
+
* panel — flipping to the opposite side when it would overflow and clamping
|
|
298
|
+
* back inside the viewport.
|
|
299
|
+
*/
|
|
300
|
+
declare function mkComputeAnchoredPosition(anchor: MkRectLike, panel: MkSize, viewport: MkSize, opts: MkAnchoredPositionOptions): MkAnchoredPosition;
|
|
301
|
+
/**
|
|
302
|
+
* Anchored-overlay directive. Apply it to a floating panel element (a dropdown
|
|
303
|
+
* list, calendar, menu, …) that is rendered inside its component's own template
|
|
304
|
+
* — typically inside an `@if (open()) { … }` block. On init the directive
|
|
305
|
+
* **teleports the panel to `document.body` and into the browser top layer** via
|
|
306
|
+
* the native Popover API (`popover="manual"` + `showPopover()`), then positions
|
|
307
|
+
* it against the anchor with `position: fixed`. Because the element stays part
|
|
308
|
+
* of the component's Angular view, all bindings, `@for` content, events and
|
|
309
|
+
* projected content keep working after the move.
|
|
310
|
+
*
|
|
311
|
+
* The top layer is immune to ancestor `overflow`, `transform` and `z-index`
|
|
312
|
+
* stacking contexts, so the panel can never be clipped by a container or hidden
|
|
313
|
+
* behind sibling content. Where the Popover API is unavailable the panel still
|
|
314
|
+
* renders in a `document.body` portal with a `z-index` fallback.
|
|
315
|
+
*
|
|
316
|
+
* ```html
|
|
317
|
+
* <ul #panel mkAnchoredPanel [mkAnchoredPanelFor]="trigger" [matchWidth]="true"
|
|
318
|
+
* (dismiss)="close()"> … </ul>
|
|
319
|
+
* ```
|
|
320
|
+
*/
|
|
321
|
+
declare class MkAnchoredPanel implements AfterViewInit, OnDestroy {
|
|
322
|
+
private readonly host;
|
|
323
|
+
private readonly document;
|
|
324
|
+
private readonly isBrowser;
|
|
325
|
+
/** The trigger element to position against. */
|
|
326
|
+
readonly anchor: _angular_core.InputSignal<HTMLElement | ElementRef<HTMLElement> | undefined>;
|
|
327
|
+
/** Viewport-point anchor (e.g. a right-click position) — takes precedence. */
|
|
328
|
+
readonly anchorRect: _angular_core.InputSignal<{
|
|
329
|
+
x: number;
|
|
330
|
+
y: number;
|
|
331
|
+
} | undefined>;
|
|
332
|
+
/** Preferred placement relative to the anchor. */
|
|
333
|
+
readonly placement: _angular_core.InputSignal<MkPlacement>;
|
|
334
|
+
/** Distance in px between the anchor and the panel. */
|
|
335
|
+
readonly gap: _angular_core.InputSignal<number>;
|
|
336
|
+
/** Set the panel's `min-width` to the anchor's width (dropdowns). */
|
|
337
|
+
readonly matchWidth: _angular_core.InputSignal<boolean>;
|
|
338
|
+
/** Flip to the opposite side when the preferred side would overflow. */
|
|
339
|
+
readonly flip: _angular_core.InputSignal<boolean>;
|
|
340
|
+
/** Clamp the panel inside the viewport. */
|
|
341
|
+
readonly clamp: _angular_core.InputSignal<boolean>;
|
|
342
|
+
/** Emitted on an outside pointerdown or when the window loses focus. */
|
|
343
|
+
readonly dismiss: _angular_core.OutputEmitterRef<void>;
|
|
344
|
+
private popover;
|
|
345
|
+
/** Whether {@link position} applied an inline viewport size cap (`max-*`). */
|
|
346
|
+
private sizeCapped;
|
|
347
|
+
private repositionRaf;
|
|
348
|
+
/**
|
|
349
|
+
* Scroll-driven repositions track the anchor without clamping, so the
|
|
350
|
+
* panel follows its trigger instead of detaching and hugging the viewport
|
|
351
|
+
* edge; open/resize positioning clamps as usual.
|
|
352
|
+
*/
|
|
353
|
+
private pendingTrack;
|
|
354
|
+
/** rAF-coalesced repositioning — at most one layout pass per frame. */
|
|
355
|
+
private reposition;
|
|
356
|
+
private readonly onScroll;
|
|
357
|
+
private readonly onResize;
|
|
358
|
+
private readonly onDocPointerdown;
|
|
359
|
+
private readonly onWindowBlur;
|
|
360
|
+
ngAfterViewInit(): void;
|
|
361
|
+
/**
|
|
362
|
+
* Recompute and apply the panel position. Safe to call at any time.
|
|
363
|
+
* With `track` (scroll-driven), the panel follows the anchor unclamped and
|
|
364
|
+
* dismisses once the anchor leaves the viewport (matching the CDK's
|
|
365
|
+
* reposition-with-auto-close scroll behaviour).
|
|
366
|
+
*/
|
|
367
|
+
position(track?: boolean): void;
|
|
368
|
+
/** Whether the anchor renders in a right-to-left context. */
|
|
369
|
+
private isAnchorRtl;
|
|
370
|
+
private resolveAnchorEl;
|
|
371
|
+
private resolveAnchorRect;
|
|
372
|
+
ngOnDestroy(): void;
|
|
373
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkAnchoredPanel, never>;
|
|
374
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkAnchoredPanel, "[mkAnchoredPanel]", ["mkAnchoredPanel"], { "anchor": { "alias": "mkAnchoredPanelFor"; "required": false; "isSignal": true; }; "anchorRect": { "alias": "anchorRect"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "matchWidth": { "alias": "matchWidth"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; "clamp": { "alias": "clamp"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/** Direction passed to the sort announcer. */
|
|
378
|
+
type MkSortAnnounceDirection = 'asc' | 'desc';
|
|
379
|
+
/**
|
|
380
|
+
* Localised date-name tables consumed by the calendar, the date/month/week
|
|
381
|
+
* pickers and `formatDate`. All arrays are full-length (12 months, 7 weekdays
|
|
382
|
+
* starting with Sunday) — override the whole set for a locale.
|
|
383
|
+
*/
|
|
384
|
+
interface MkDateNames {
|
|
385
|
+
/** Full month names, January-first (12). */
|
|
386
|
+
months: readonly string[];
|
|
387
|
+
/** Abbreviated month names (12). */
|
|
388
|
+
monthsShort: readonly string[];
|
|
389
|
+
/** Full weekday names, Sunday-first (7). */
|
|
390
|
+
weekdays: readonly string[];
|
|
391
|
+
/** Abbreviated weekday names (7). */
|
|
392
|
+
weekdaysShort: readonly string[];
|
|
393
|
+
/** One/two-letter weekday names for calendar headers (7). */
|
|
394
|
+
weekdaysNarrow: readonly string[];
|
|
395
|
+
}
|
|
396
|
+
/** Strings used by the block editor's chrome. */
|
|
397
|
+
interface MkBlockEditorStrings {
|
|
398
|
+
addBlock: string;
|
|
399
|
+
addFirstBlock: string;
|
|
400
|
+
insertBlockHere: string;
|
|
401
|
+
blockInserter: string;
|
|
402
|
+
searchBlocks: string;
|
|
403
|
+
blocks: string;
|
|
404
|
+
moveBlockUp: string;
|
|
405
|
+
moveBlockDown: string;
|
|
406
|
+
blockOptions: string;
|
|
407
|
+
duplicate: string;
|
|
408
|
+
remove: string;
|
|
409
|
+
textFormatting: string;
|
|
410
|
+
altText: string;
|
|
411
|
+
caption: string;
|
|
412
|
+
alignment: string;
|
|
413
|
+
replaceImage: string;
|
|
414
|
+
imageUrl: string;
|
|
415
|
+
externalContent: string;
|
|
416
|
+
embedUrl: string;
|
|
417
|
+
columnSettings: string;
|
|
418
|
+
columns: string;
|
|
419
|
+
ratio: string;
|
|
420
|
+
gap: string;
|
|
421
|
+
align: string;
|
|
422
|
+
justify: string;
|
|
423
|
+
headingLevel: (level: number) => string;
|
|
424
|
+
/** Editor region label + empty-block placeholder defaults. */
|
|
425
|
+
editorLabel: string;
|
|
426
|
+
emptyBlockPlaceholder: string;
|
|
427
|
+
/** Drag handle tooltip. */
|
|
428
|
+
dragHandle: string;
|
|
429
|
+
/** "Turn into …" transform menu item; receives the target block's label. */
|
|
430
|
+
turnInto: (label: string) => string;
|
|
431
|
+
/** Shown for a block whose type has no registered definition. */
|
|
432
|
+
unknownBlock: (type: string) => string;
|
|
433
|
+
/** Structural-change screen-reader announcements. */
|
|
434
|
+
blockAdded: (label: string) => string;
|
|
435
|
+
blockDuplicated: string;
|
|
436
|
+
blockDeleted: (label: string) => string;
|
|
437
|
+
blockMovedUp: string;
|
|
438
|
+
blockMovedDown: string;
|
|
439
|
+
turnedInto: (label: string) => string;
|
|
440
|
+
/** Inserter empty state; receives the search query. */
|
|
441
|
+
noBlocksMatch: (query: string) => string;
|
|
442
|
+
/** Built-in palette group headings. */
|
|
443
|
+
groupText: string;
|
|
444
|
+
groupMedia: string;
|
|
445
|
+
groupLayout: string;
|
|
446
|
+
/** Built-in block labels + inserter descriptions. */
|
|
447
|
+
blockParagraph: string;
|
|
448
|
+
blockParagraphDesc: string;
|
|
449
|
+
blockHeading: string;
|
|
450
|
+
blockHeadingDesc: string;
|
|
451
|
+
blockList: string;
|
|
452
|
+
blockListDesc: string;
|
|
453
|
+
blockQuote: string;
|
|
454
|
+
blockQuoteDesc: string;
|
|
455
|
+
blockCode: string;
|
|
456
|
+
blockCodeDesc: string;
|
|
457
|
+
blockImage: string;
|
|
458
|
+
blockImageDesc: string;
|
|
459
|
+
blockEmbed: string;
|
|
460
|
+
blockEmbedDesc: string;
|
|
461
|
+
blockButton: string;
|
|
462
|
+
blockButtonDesc: string;
|
|
463
|
+
blockDivider: string;
|
|
464
|
+
blockDividerDesc: string;
|
|
465
|
+
blockColumns: string;
|
|
466
|
+
blockColumnsDesc: string;
|
|
467
|
+
/** Rich-text inline toolbar. */
|
|
468
|
+
bold: string;
|
|
469
|
+
italic: string;
|
|
470
|
+
underline: string;
|
|
471
|
+
strikethrough: string;
|
|
472
|
+
inlineCode: string;
|
|
473
|
+
link: string;
|
|
474
|
+
clearFormatting: string;
|
|
475
|
+
/** Prompt asking for a link URL. */
|
|
476
|
+
linkUrlPrompt: string;
|
|
477
|
+
/** Default label of the editable rich-text region. */
|
|
478
|
+
editableText: string;
|
|
479
|
+
/** Heading block. */
|
|
480
|
+
headingPlaceholder: (level: number) => string;
|
|
481
|
+
headingLevelGroup: string;
|
|
482
|
+
/** List block. */
|
|
483
|
+
listStyle: string;
|
|
484
|
+
bulleted: string;
|
|
485
|
+
numbered: string;
|
|
486
|
+
listItem: string;
|
|
487
|
+
/** Quote block. */
|
|
488
|
+
quoteText: string;
|
|
489
|
+
citation: string;
|
|
490
|
+
addCitation: string;
|
|
491
|
+
/** Code block. */
|
|
492
|
+
codeLanguage: string;
|
|
493
|
+
codeLanguagePlaceholder: string;
|
|
494
|
+
enterCode: string;
|
|
495
|
+
/** Image block. */
|
|
496
|
+
imageWidth: (percent: number) => string;
|
|
497
|
+
uploading: string;
|
|
498
|
+
dropImagePrompt: string;
|
|
499
|
+
chooseFile: string;
|
|
500
|
+
pasteImageUrl: string;
|
|
501
|
+
notAnImage: string;
|
|
502
|
+
uploadFailed: string;
|
|
503
|
+
imageAdded: string;
|
|
504
|
+
/** Embed block. */
|
|
505
|
+
pasteEmbedUrl: string;
|
|
506
|
+
embedFallbackNote: string;
|
|
507
|
+
embedTitle: (provider: string) => string;
|
|
508
|
+
embedAdded: (provider: string) => string;
|
|
509
|
+
embeddedContent: string;
|
|
510
|
+
/** Button block settings. */
|
|
511
|
+
buttonLabel: string;
|
|
512
|
+
buttonLink: string;
|
|
513
|
+
buttonTone: string;
|
|
514
|
+
buttonVariant: string;
|
|
515
|
+
/** Label a freshly inserted Button block starts with. */
|
|
516
|
+
buttonDefaultLabel: string;
|
|
517
|
+
/** Alignment option captions (image + button blocks). */
|
|
518
|
+
alignLeft: string;
|
|
519
|
+
alignCenter: string;
|
|
520
|
+
alignRight: string;
|
|
521
|
+
/** Tone option captions (button block swatches). */
|
|
522
|
+
tonePrimary: string;
|
|
523
|
+
toneNeutral: string;
|
|
524
|
+
toneSuccess: string;
|
|
525
|
+
toneWarning: string;
|
|
526
|
+
toneDanger: string;
|
|
527
|
+
toneInfo: string;
|
|
528
|
+
/** Variant option captions (button block). */
|
|
529
|
+
variantSolid: string;
|
|
530
|
+
variantSoft: string;
|
|
531
|
+
variantOutline: string;
|
|
532
|
+
/** Columns settings option captions. */
|
|
533
|
+
ratioEqual: string;
|
|
534
|
+
alignStretch: string;
|
|
535
|
+
alignTop: string;
|
|
536
|
+
alignMiddle: string;
|
|
537
|
+
alignBottom: string;
|
|
538
|
+
justifyStart: string;
|
|
539
|
+
justifyCenter: string;
|
|
540
|
+
justifyEnd: string;
|
|
541
|
+
justifyBetween: string;
|
|
542
|
+
}
|
|
543
|
+
/**
|
|
544
|
+
* Messages rendered by `mk-form-field` for the validation errors the library's
|
|
545
|
+
* own controls produce, plus the standard Angular `Validators` keys, so a
|
|
546
|
+
* field wrapping any control shows something sensible without per-form wiring.
|
|
547
|
+
*
|
|
548
|
+
* Keys match the `ValidationErrors` keys exactly and each entry receives that
|
|
549
|
+
* key's error payload. Override any subset through
|
|
550
|
+
* `provideMkI18n({ validation: … })`, or a whole map per field via
|
|
551
|
+
* `mk-form-field`'s `errorMessages` input.
|
|
552
|
+
*/
|
|
553
|
+
interface MkValidationStrings {
|
|
554
|
+
/** `Validators.required` — also emitted by checkbox and radio-group. */
|
|
555
|
+
required: string;
|
|
556
|
+
/** `Validators.email`. */
|
|
557
|
+
email: string;
|
|
558
|
+
/** `Validators.min`, and the numeric controls' `[min]`. */
|
|
559
|
+
min: (err: {
|
|
560
|
+
min: number;
|
|
561
|
+
actual: number;
|
|
562
|
+
}) => string;
|
|
563
|
+
/** `Validators.max`, and the numeric controls' `[max]`. */
|
|
564
|
+
max: (err: {
|
|
565
|
+
max: number;
|
|
566
|
+
actual: number;
|
|
567
|
+
}) => string;
|
|
568
|
+
/** `Validators.minLength` — also emitted by password-input and OTP. */
|
|
569
|
+
minlength: (err: {
|
|
570
|
+
requiredLength: number;
|
|
571
|
+
actualLength: number;
|
|
572
|
+
}) => string;
|
|
573
|
+
/** `Validators.maxLength`. */
|
|
574
|
+
maxlength: (err: {
|
|
575
|
+
requiredLength: number;
|
|
576
|
+
actualLength: number;
|
|
577
|
+
}) => string;
|
|
578
|
+
/** `Validators.pattern`. */
|
|
579
|
+
pattern: string;
|
|
580
|
+
/** A date/month/week picker's `[min]`. */
|
|
581
|
+
mkMinDate: (err: {
|
|
582
|
+
min: Date;
|
|
583
|
+
actual: Date;
|
|
584
|
+
}) => string;
|
|
585
|
+
/** A date/month/week picker's `[max]`. */
|
|
586
|
+
mkMaxDate: (err: {
|
|
587
|
+
max: Date;
|
|
588
|
+
actual: Date;
|
|
589
|
+
}) => string;
|
|
590
|
+
/** A date rejected by a calendar's `[disabledDate]` predicate. */
|
|
591
|
+
mkDateFilter: string;
|
|
592
|
+
/** A range picker with only one end filled in. */
|
|
593
|
+
mkDateRangeIncomplete: string;
|
|
594
|
+
/** The time-picker's `[min]`. */
|
|
595
|
+
mkMinTime: (err: {
|
|
596
|
+
min: string;
|
|
597
|
+
actual: string;
|
|
598
|
+
}) => string;
|
|
599
|
+
/** The time-picker's `[max]`. */
|
|
600
|
+
mkMaxTime: (err: {
|
|
601
|
+
max: string;
|
|
602
|
+
actual: string;
|
|
603
|
+
}) => string;
|
|
604
|
+
/** More items than a multi-select's, tag-input's or upload's `[max*]` allows. */
|
|
605
|
+
mkMaxItems: (err: {
|
|
606
|
+
max: number;
|
|
607
|
+
actual: number;
|
|
608
|
+
}) => string;
|
|
609
|
+
/** A file larger than a file-upload's `[maxSize]`. */
|
|
610
|
+
mkFileSize: (err: {
|
|
611
|
+
max: number;
|
|
612
|
+
maxLabel: string;
|
|
613
|
+
name: string;
|
|
614
|
+
}) => string;
|
|
615
|
+
/** A file not matching a file-upload's `[accept]` filter. */
|
|
616
|
+
mkFileType: (err: {
|
|
617
|
+
accept: string;
|
|
618
|
+
name: string;
|
|
619
|
+
}) => string;
|
|
620
|
+
/** A card number failing the Luhn checksum. */
|
|
621
|
+
cardNumber: string;
|
|
622
|
+
/** An IBAN failing the mod-97 checksum. */
|
|
623
|
+
iban: (err: {
|
|
624
|
+
country: string;
|
|
625
|
+
expectedLength: number | null;
|
|
626
|
+
}) => string;
|
|
627
|
+
/** A postal code not matching the country's format. */
|
|
628
|
+
postalCode: (err: {
|
|
629
|
+
country: string;
|
|
630
|
+
example: string;
|
|
631
|
+
}) => string;
|
|
632
|
+
/** A tax identifier not matching the country's format or checksum. */
|
|
633
|
+
taxId: (err: {
|
|
634
|
+
country: string;
|
|
635
|
+
label: string;
|
|
636
|
+
example: string;
|
|
637
|
+
}) => string;
|
|
638
|
+
/** Fallback for an error key with no message of its own. */
|
|
639
|
+
unknown: string;
|
|
640
|
+
}
|
|
641
|
+
/**
|
|
642
|
+
* All user-facing strings the library renders itself (aria-labels, empty-state
|
|
643
|
+
* text, control captions and screen-reader announcements). Consumers localise
|
|
644
|
+
* the library by overriding any subset via {@link provideMkI18n}. Interpolated
|
|
645
|
+
* strings are functions so translators control word order.
|
|
646
|
+
*/
|
|
647
|
+
interface MkI18nStrings {
|
|
648
|
+
/** Validation messages (deep-merged by provideMkI18n). */
|
|
649
|
+
validation: MkValidationStrings;
|
|
650
|
+
/** Generic "Close" control (dialog, drawer, bottom-sheet). */
|
|
651
|
+
close: string;
|
|
652
|
+
/** Generic "Dismiss" control (alert, banner, toast, snackbar). */
|
|
653
|
+
dismiss: string;
|
|
654
|
+
/** Clear-input control (autocomplete, pickers, tag inputs). */
|
|
655
|
+
clear: string;
|
|
656
|
+
/** Generic confirm action (confirm dialog, popconfirm). */
|
|
657
|
+
confirm: string;
|
|
658
|
+
/** Generic cancel action (dialogs, inline edit). */
|
|
659
|
+
cancel: string;
|
|
660
|
+
/** Generic acknowledge action (alert/prompt dialogs). */
|
|
661
|
+
ok: string;
|
|
662
|
+
/** Generic save action (inline edit). */
|
|
663
|
+
save: string;
|
|
664
|
+
/** Default action-button caption (submit input). */
|
|
665
|
+
submit: string;
|
|
666
|
+
/** Generic edit affordance (inline edit trigger). */
|
|
667
|
+
edit: string;
|
|
668
|
+
/** Generic remove control (chip). */
|
|
669
|
+
remove: string;
|
|
670
|
+
/** Remove a named item (tag input chips, file upload rows). */
|
|
671
|
+
removeItem: (name: string) => string;
|
|
672
|
+
/** Placeholder shown for an empty editable value (inline edit, mini date). */
|
|
673
|
+
empty: string;
|
|
674
|
+
/** "Optional" marker (stepper). */
|
|
675
|
+
optional: string;
|
|
676
|
+
/** Filter/search field placeholder (transfer list). */
|
|
677
|
+
filter: string;
|
|
678
|
+
/** Default confirmation question (popconfirm). */
|
|
679
|
+
confirmMessage: string;
|
|
680
|
+
/** Decrease control (number input). */
|
|
681
|
+
decrease: string;
|
|
682
|
+
/** Increase control (number input). */
|
|
683
|
+
increase: string;
|
|
684
|
+
/** Async loading row (autocomplete, multi-select). */
|
|
685
|
+
loading: string;
|
|
686
|
+
/** Empty listbox with no options (select, time picker). */
|
|
687
|
+
noOptions: string;
|
|
688
|
+
/** Empty async/filtered results (autocomplete, multi-select, command palette). */
|
|
689
|
+
noResults: string;
|
|
690
|
+
/** Empty data table / list. */
|
|
691
|
+
noData: string;
|
|
692
|
+
/** Announced when a filterable list updates (autocomplete, multi-select, command palette). */
|
|
693
|
+
resultsCount: (count: number) => string;
|
|
694
|
+
/** Pagination: previous page control. */
|
|
695
|
+
previousPage: string;
|
|
696
|
+
/** Pagination: next page control. */
|
|
697
|
+
nextPage: string;
|
|
698
|
+
/** Pagination: jump to a page. */
|
|
699
|
+
goToPage: (page: number) => string;
|
|
700
|
+
/** Pagination landmark label. */
|
|
701
|
+
paginationLabel: string;
|
|
702
|
+
/** Carousel: previous slide control. */
|
|
703
|
+
previousSlide: string;
|
|
704
|
+
/** Carousel: next slide control. */
|
|
705
|
+
nextSlide: string;
|
|
706
|
+
/** Carousel: jump to a slide. */
|
|
707
|
+
goToSlide: (slide: number) => string;
|
|
708
|
+
/** Carousel region label. */
|
|
709
|
+
carouselLabel: string;
|
|
710
|
+
/** Carousel: pause / resume automatic rotation. */
|
|
711
|
+
pauseSlideshow: string;
|
|
712
|
+
playSlideshow: string;
|
|
713
|
+
/** Carousel: slide position (slide labels + live announcements). */
|
|
714
|
+
slideOf: (slide: number, total: number) => string;
|
|
715
|
+
/** Localised month/weekday name tables (deep-merged by provideMkI18n). */
|
|
716
|
+
dateNames: MkDateNames;
|
|
717
|
+
/** Calendar: previous month control. */
|
|
718
|
+
previousMonth: string;
|
|
719
|
+
/** Calendar: next month control. */
|
|
720
|
+
nextMonth: string;
|
|
721
|
+
/** Month picker: previous/next year (month mode). */
|
|
722
|
+
previousYear: string;
|
|
723
|
+
nextYear: string;
|
|
724
|
+
/** Month picker: previous/next decade page (year mode). */
|
|
725
|
+
previousYears: string;
|
|
726
|
+
nextYears: string;
|
|
727
|
+
/** Field placeholders. */
|
|
728
|
+
selectDate: string;
|
|
729
|
+
selectRange: string;
|
|
730
|
+
selectTime: string;
|
|
731
|
+
selectMonth: string;
|
|
732
|
+
selectYear: string;
|
|
733
|
+
selectWeek: string;
|
|
734
|
+
selectPlaceholder: string;
|
|
735
|
+
/** Popover dialog labels. */
|
|
736
|
+
chooseDate: string;
|
|
737
|
+
chooseDateRange: string;
|
|
738
|
+
chooseMonth: string;
|
|
739
|
+
chooseYear: string;
|
|
740
|
+
chooseWeek: string;
|
|
741
|
+
openCalendar: string;
|
|
742
|
+
openTimeList: string;
|
|
743
|
+
/** Mini-date segment names. */
|
|
744
|
+
daySegment: string;
|
|
745
|
+
monthSegment: string;
|
|
746
|
+
yearSegment: string;
|
|
747
|
+
/** Countdown unit captions. */
|
|
748
|
+
countdownDays: string;
|
|
749
|
+
countdownHours: string;
|
|
750
|
+
countdownMinutes: string;
|
|
751
|
+
countdownSeconds: string;
|
|
752
|
+
/** Announced when a countdown reaches zero. */
|
|
753
|
+
countdownFinished: string;
|
|
754
|
+
/** Event-calendar day label suffix, e.g. `2 events: Standup, Demo`. */
|
|
755
|
+
dayEvents: (count: number, titles: string) => string;
|
|
756
|
+
/** Event-calendar overflow pill for events beyond `maxPerDay`, e.g. `+2 more`. */
|
|
757
|
+
moreEvents: (count: number) => string;
|
|
758
|
+
/** Select-all header checkbox. */
|
|
759
|
+
selectAllRows: string;
|
|
760
|
+
/** Per-row checkbox; receives the row's leading cell text. */
|
|
761
|
+
selectRow: (row: string) => string;
|
|
762
|
+
/** Hidden expander column header. */
|
|
763
|
+
expandHeader: string;
|
|
764
|
+
/** Row expander toggle labels. */
|
|
765
|
+
expandRow: string;
|
|
766
|
+
collapseRow: string;
|
|
767
|
+
/** aria-label of a group header's toggle when the group is collapsed. */
|
|
768
|
+
expandGroup: string;
|
|
769
|
+
/** aria-label of a group header's toggle when the group is expanded. */
|
|
770
|
+
collapseGroup: string;
|
|
771
|
+
/** Row count shown on a group header, e.g. "4 items". */
|
|
772
|
+
groupCount: (count: number) => string;
|
|
773
|
+
/** Column resize separator label. */
|
|
774
|
+
resizeColumn: string;
|
|
775
|
+
/** Announced while a column is resized by keyboard. */
|
|
776
|
+
columnWidth: (column: string, width: number) => string;
|
|
777
|
+
/** Announced when a column is reordered. */
|
|
778
|
+
columnMoved: (column: string, position: number, total: number) => string;
|
|
779
|
+
/** Hint suffix + announcement for editable cells. */
|
|
780
|
+
editCell: string;
|
|
781
|
+
cellSaved: (value: string) => string;
|
|
782
|
+
/** Announced when a column is sorted. */
|
|
783
|
+
sortedBy: (column: string, direction: MkSortAnnounceDirection) => string;
|
|
784
|
+
/** Announced when sorting is removed from a column. */
|
|
785
|
+
sortingCleared: (column: string) => string;
|
|
786
|
+
/** Password reveal toggle. */
|
|
787
|
+
showPassword: string;
|
|
788
|
+
hidePassword: string;
|
|
789
|
+
/** Password rule captions. */
|
|
790
|
+
passwordRuleMinLength: (length: number) => string;
|
|
791
|
+
passwordRuleUppercase: string;
|
|
792
|
+
passwordRuleNumber: string;
|
|
793
|
+
passwordRuleSymbol: string;
|
|
794
|
+
/** Password strength label for a 0–4 score. */
|
|
795
|
+
passwordStrength: (score: number) => string;
|
|
796
|
+
/** Visible prefix before the strength label. */
|
|
797
|
+
passwordStrengthLabel: string;
|
|
798
|
+
/** Rule-state prefixes announced to screen readers. */
|
|
799
|
+
ruleMet: string;
|
|
800
|
+
ruleNotMet: string;
|
|
801
|
+
/** OTP field labels. */
|
|
802
|
+
oneTimeCode: string;
|
|
803
|
+
otpDigit: (position: number) => string;
|
|
804
|
+
/** Numeric keypad labels + masked-PIN progress announcement. */
|
|
805
|
+
numericKeypadLabel: string;
|
|
806
|
+
keypadClear: string;
|
|
807
|
+
keypadBackspace: string;
|
|
808
|
+
keypadDigitsEntered: (count: number, length: number) => string;
|
|
809
|
+
/** On-screen keyboard label + action-key labels. */
|
|
810
|
+
onScreenKeyboardLabel: string;
|
|
811
|
+
keyboardShift: string;
|
|
812
|
+
keyboardSpace: string;
|
|
813
|
+
keyboardEnter: string;
|
|
814
|
+
keyboardAltLayer: string;
|
|
815
|
+
keyboardBaseLayer: string;
|
|
816
|
+
/** Rating slider label + value text. */
|
|
817
|
+
ratingLabel: string;
|
|
818
|
+
ratingValueText: (value: number, max: number) => string;
|
|
819
|
+
/** Range slider thumb labels. */
|
|
820
|
+
minimum: string;
|
|
821
|
+
maximum: string;
|
|
822
|
+
/** Color picker labels. */
|
|
823
|
+
chooseColor: string;
|
|
824
|
+
hexValue: string;
|
|
825
|
+
presetColors: string;
|
|
826
|
+
/** Phone input: country-prefix trigger label. */
|
|
827
|
+
chooseCountry: string;
|
|
828
|
+
/** Phone input: search field placeholder inside the country list. */
|
|
829
|
+
searchCountries: string;
|
|
830
|
+
/** Phone input: default accessible label of the national-number field. */
|
|
831
|
+
phoneNumber: string;
|
|
832
|
+
/** Postal-code input: default accessible label. */
|
|
833
|
+
postalCode: string;
|
|
834
|
+
/** Currency input: default accessible label. */
|
|
835
|
+
amount: string;
|
|
836
|
+
/** Card-number input: default accessible label. */
|
|
837
|
+
cardNumber: string;
|
|
838
|
+
/** Card-number input: announced/badge text for a detected brand. */
|
|
839
|
+
cardBrand: (brand: string) => string;
|
|
840
|
+
/** IBAN input: default accessible label. */
|
|
841
|
+
iban: string;
|
|
842
|
+
/** Tax-ID input: default accessible label. */
|
|
843
|
+
taxId: string;
|
|
844
|
+
/** Signature pad: default accessible label of the drawing surface. */
|
|
845
|
+
signature: string;
|
|
846
|
+
/** JSON viewer: default accessible label of the tree. */
|
|
847
|
+
jsonLabel: string;
|
|
848
|
+
/** Log viewer: default accessible label of the log region. */
|
|
849
|
+
logViewerLabel: string;
|
|
850
|
+
/** Log viewer: re-attach-to-tail button. */
|
|
851
|
+
logFollow: string;
|
|
852
|
+
/** Log viewer: copy-the-whole-buffer toolbar button. */
|
|
853
|
+
logCopyAll: string;
|
|
854
|
+
/** Log viewer: soft-wrap toolbar toggle. */
|
|
855
|
+
logWrapLines: string;
|
|
856
|
+
/** Announced when an event is picked up in keyboard move mode. */
|
|
857
|
+
eventCalendarGrabbed: (title: string, from: string, to: string) => string;
|
|
858
|
+
/** Announced after each keyboard step: current day + time range. */
|
|
859
|
+
eventCalendarPosition: (title: string, day: string, from: string, to: string) => string;
|
|
860
|
+
/** Announced when a move commits. */
|
|
861
|
+
eventCalendarMoved: (title: string, day: string, from: string, to: string) => string;
|
|
862
|
+
/** Announced when a resize commits. */
|
|
863
|
+
eventCalendarResized: (title: string, to: string) => string;
|
|
864
|
+
/** Announced when an edit is aborted. */
|
|
865
|
+
eventCalendarEditCancelled: string;
|
|
866
|
+
/** `aria-roledescription` of an editable event pill. */
|
|
867
|
+
eventCalendarMovableEvent: string;
|
|
868
|
+
/** Lightbox / gallery: previous-image control. */
|
|
869
|
+
previousImage: string;
|
|
870
|
+
/** Lightbox / gallery: next-image control. */
|
|
871
|
+
nextImage: string;
|
|
872
|
+
/** Lightbox counter + per-image aria label, e.g. `Image 2 of 8`. */
|
|
873
|
+
imageOf: (index: number, total: number) => string;
|
|
874
|
+
/** Gallery tile label; receives the image's alt text. */
|
|
875
|
+
viewImage: (alt: string) => string;
|
|
876
|
+
/** Shown in an image block whose source failed to load. */
|
|
877
|
+
imageFailed: string;
|
|
878
|
+
/** Cropper zoom controls. */
|
|
879
|
+
zoom: string;
|
|
880
|
+
zoomIn: string;
|
|
881
|
+
zoomOut: string;
|
|
882
|
+
/** Media gallery region label. */
|
|
883
|
+
mediaLibrary: string;
|
|
884
|
+
/** File upload dropzone + states. */
|
|
885
|
+
dropzoneLabel: string;
|
|
886
|
+
uploadFailed: string;
|
|
887
|
+
retryUpload: string;
|
|
888
|
+
/** Form error summary heading. */
|
|
889
|
+
errorSummaryTitle: string;
|
|
890
|
+
/** Default column titles. */
|
|
891
|
+
available: string;
|
|
892
|
+
selected: string;
|
|
893
|
+
/** Move-button labels; receive the target list's title. */
|
|
894
|
+
transferSelected: (target: string) => string;
|
|
895
|
+
transferAll: (target: string) => string;
|
|
896
|
+
/** Announced after a move. */
|
|
897
|
+
itemsMoved: (count: number, target: string) => string;
|
|
898
|
+
notificationsTitle: string;
|
|
899
|
+
allCaughtUp: string;
|
|
900
|
+
markAllRead: string;
|
|
901
|
+
notificationsUnread: (count: number) => string;
|
|
902
|
+
/** Unread state announced per row. */
|
|
903
|
+
unread: string;
|
|
904
|
+
tourStepOf: (step: number, total: number) => string;
|
|
905
|
+
tourSkip: string;
|
|
906
|
+
tourPrevious: string;
|
|
907
|
+
tourNext: string;
|
|
908
|
+
tourDone: string;
|
|
909
|
+
/** Command palette input placeholder. */
|
|
910
|
+
commandPalettePlaceholder: string;
|
|
911
|
+
/** Command palette dialog label. */
|
|
912
|
+
commandPaletteLabel: string;
|
|
913
|
+
/** Stepper: step state, appended to the step's accessible name. */
|
|
914
|
+
stepCompleted: string;
|
|
915
|
+
stepError: string;
|
|
916
|
+
/** Diff: screen-reader prefix for changed lines. */
|
|
917
|
+
diffAddedLine: string;
|
|
918
|
+
diffRemovedLine: string;
|
|
919
|
+
/** Chip collections (tag input, multi-select): announced on add/remove. */
|
|
920
|
+
itemAdded: (name: string) => string;
|
|
921
|
+
itemRemoved: (name: string) => string;
|
|
922
|
+
/** Splitter separator label. */
|
|
923
|
+
resizePanes: string;
|
|
924
|
+
/** Back-to-top button label. */
|
|
925
|
+
backToTop: string;
|
|
926
|
+
/** Breadcrumb nav landmark label. */
|
|
927
|
+
breadcrumbLabel: string;
|
|
928
|
+
/** FAB default label. */
|
|
929
|
+
fabLabel: string;
|
|
930
|
+
/** Diff view labels. */
|
|
931
|
+
diffBefore: string;
|
|
932
|
+
diffAfter: string;
|
|
933
|
+
diffChanges: string;
|
|
934
|
+
/** App shell. */
|
|
935
|
+
skipToContent: string;
|
|
936
|
+
primaryNav: string;
|
|
937
|
+
/** Announced when an item is lifted for keyboard dragging. */
|
|
938
|
+
dndPickedUp: (position: number, total: number) => string;
|
|
939
|
+
/** Announced as the item moves within its list. */
|
|
940
|
+
dndMoved: (position: number, total: number) => string;
|
|
941
|
+
/** Announced as the item moves into another list. */
|
|
942
|
+
dndMovedToList: (list: string, position: number, total: number) => string;
|
|
943
|
+
/** Announced when the item is dropped. */
|
|
944
|
+
dndDropped: (position: number) => string;
|
|
945
|
+
/** Announced when the drag is cancelled. */
|
|
946
|
+
dndCancelled: string;
|
|
947
|
+
/** Repeater add-row button caption (default when no `addLabel` is given). */
|
|
948
|
+
repeaterAddRow: string;
|
|
949
|
+
/** Repeater per-row remove button label (1-based row number). */
|
|
950
|
+
repeaterRemoveRow: (index: number) => string;
|
|
951
|
+
/** Repeater per-row drag-handle label (1-based row number). */
|
|
952
|
+
repeaterReorderRow: (index: number) => string;
|
|
953
|
+
/** Announced after a repeater row is reordered (1-based positions). */
|
|
954
|
+
repeaterRowMoved: (from: number, to: number) => string;
|
|
955
|
+
fileRejectedType: (name: string) => string;
|
|
956
|
+
fileRejectedSize: (name: string, limit: string) => string;
|
|
957
|
+
fileRejectedCount: (name: string, max: number) => string;
|
|
958
|
+
chartCategory: string;
|
|
959
|
+
chartValue: string;
|
|
960
|
+
chartSeries: string;
|
|
961
|
+
chartSlice: string;
|
|
962
|
+
chartStage: string;
|
|
963
|
+
chartConversion: string;
|
|
964
|
+
chartAxis: string;
|
|
965
|
+
chartShare: string;
|
|
966
|
+
chartLabel: string;
|
|
967
|
+
/** Default accessible label of a QR code, carrying its encoded content. */
|
|
968
|
+
qrCodeLabel: (text: string) => string;
|
|
969
|
+
/** Block editor chrome (deep-merged by provideMkI18n). */
|
|
970
|
+
blockEditor: MkBlockEditorStrings;
|
|
971
|
+
}
|
|
972
|
+
/** The built-in English validation messages. */
|
|
973
|
+
declare const MK_DEFAULT_VALIDATION: MkValidationStrings;
|
|
974
|
+
/** The built-in English date names. */
|
|
975
|
+
declare const MK_DEFAULT_DATE_NAMES: MkDateNames;
|
|
976
|
+
/** The built-in English strings. */
|
|
977
|
+
declare const MK_DEFAULT_I18N: MkI18nStrings;
|
|
978
|
+
/**
|
|
979
|
+
* The active string map. Defaults to {@link MK_DEFAULT_I18N}; override with
|
|
980
|
+
* {@link provideMkI18n}. Inject it (`inject(MK_I18N)`) wherever a built-in
|
|
981
|
+
* string is rendered.
|
|
982
|
+
*/
|
|
983
|
+
declare const MK_I18N: InjectionToken<MkI18nStrings>;
|
|
984
|
+
/**
|
|
985
|
+
* Provide localised strings (merged over the English defaults) — pass any
|
|
986
|
+
* subset. The nested `dateNames`, `blockEditor` and `validation` groups are
|
|
987
|
+
* merged deeply, so partial overrides of those work too.
|
|
988
|
+
*
|
|
989
|
+
* ```ts
|
|
990
|
+
* bootstrapApplication(App, {
|
|
991
|
+
* providers: [provideMkI18n({ noResults: 'Brak wyników', close: 'Zamknij' })],
|
|
992
|
+
* });
|
|
993
|
+
* ```
|
|
994
|
+
*/
|
|
995
|
+
declare function provideMkI18n(overrides: Partial<Omit<MkI18nStrings, 'dateNames' | 'blockEditor' | 'validation'>> & {
|
|
996
|
+
dateNames?: Partial<MkDateNames>;
|
|
997
|
+
blockEditor?: Partial<MkBlockEditorStrings>;
|
|
998
|
+
validation?: Partial<MkValidationStrings>;
|
|
999
|
+
}): Provider;
|
|
1000
|
+
|
|
1001
|
+
/**
|
|
1002
|
+
* Field context — the contract a field wrapper (`mk-form-field`) exposes to
|
|
1003
|
+
* the control nested inside it. Controls inject it optionally
|
|
1004
|
+
* (`inject(MkFieldContext, { optional: true })`) to adopt the wrapper's
|
|
1005
|
+
* control id and to reflect its required/error state and `aria-describedby`
|
|
1006
|
+
* wiring — without depending on the `@mk-kit/ui/forms` entry point.
|
|
1007
|
+
*
|
|
1008
|
+
* `MkFormField` provides itself under this token; standalone usage (no
|
|
1009
|
+
* wrapper) simply yields `null`.
|
|
1010
|
+
*/
|
|
1011
|
+
declare abstract class MkFieldContext {
|
|
1012
|
+
/** Id for the nested interactive control — adopt on your control element. */
|
|
1013
|
+
abstract readonly controlId: string;
|
|
1014
|
+
/** Id of the field's label element, for `aria-labelledby`. */
|
|
1015
|
+
abstract readonly labelId: string;
|
|
1016
|
+
/** The field's visual size, mirrored onto the nested control. */
|
|
1017
|
+
abstract readonly size: Signal<MkSize$1>;
|
|
1018
|
+
/** Whether the field is required (explicitly or via the bound control). */
|
|
1019
|
+
abstract readonly isRequired: Signal<boolean>;
|
|
1020
|
+
/** Whether the field currently shows an error. */
|
|
1021
|
+
abstract readonly hasError: Signal<boolean>;
|
|
1022
|
+
/**
|
|
1023
|
+
* Space-separated id list for the nested control's `aria-describedby`,
|
|
1024
|
+
* or `null` when there is nothing to describe.
|
|
1025
|
+
*/
|
|
1026
|
+
abstract readonly describedBy: Signal<string | null>;
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
/**
|
|
1030
|
+
* Dependency-free syntax highlighting for {@link MkCodeEditor}. Each function
|
|
1031
|
+
* takes source text and returns an HTML string of `<span class="mk-tok-…">`
|
|
1032
|
+
* tokens. Input is HTML-escaped first, so the result is safe to render.
|
|
1033
|
+
*/
|
|
1034
|
+
/** Languages with built-in highlighting. Unknown values render plain text. */
|
|
1035
|
+
type MkCodeLanguage = 'json' | 'plaintext';
|
|
1036
|
+
/**
|
|
1037
|
+
* Highlight a JSON document. Recognises object keys, strings, numbers, the
|
|
1038
|
+
* `true`/`false`/`null` literals and structural punctuation. Invalid JSON is
|
|
1039
|
+
* still highlighted token-by-token (the editor validates separately).
|
|
1040
|
+
*/
|
|
1041
|
+
declare function mkHighlightJson(src: string): string;
|
|
1042
|
+
/** Highlight `src` for `language`, falling back to escaped plain text. */
|
|
1043
|
+
declare function mkHighlight(src: string, language: string): string;
|
|
1044
|
+
|
|
1045
|
+
/**
|
|
1046
|
+
* Handle returned by {@link mkValidatorChange}, wiring a component's
|
|
1047
|
+
* `registerOnValidatorChange` callback to a set of reactive dependencies.
|
|
1048
|
+
*/
|
|
1049
|
+
interface MkValidatorChangeRef {
|
|
1050
|
+
/** Store the callback Angular hands to `registerOnValidatorChange`. */
|
|
1051
|
+
register(fn: () => void): void;
|
|
1052
|
+
/** Ask the bound control to re-run `validate()` now. */
|
|
1053
|
+
notify(): void;
|
|
1054
|
+
}
|
|
1055
|
+
/**
|
|
1056
|
+
* Re-validates the bound form control whenever a validator's inputs change.
|
|
1057
|
+
*
|
|
1058
|
+
* A `Validator` whose constraints come from component inputs (`[min]`,
|
|
1059
|
+
* `[max]`, `[required]`, …) must tell Angular when those inputs change,
|
|
1060
|
+
* otherwise the control keeps the verdict computed under the old constraints.
|
|
1061
|
+
* `NgModel`/`FormControlName` pass a callback to `registerOnValidatorChange`
|
|
1062
|
+
* for exactly this; call it from an effect over the constraint signals.
|
|
1063
|
+
*
|
|
1064
|
+
* Must be called from an injection context (i.e. as a field initialiser).
|
|
1065
|
+
*
|
|
1066
|
+
* ```ts
|
|
1067
|
+
* private readonly validatorChange = mkValidatorChange(() => {
|
|
1068
|
+
* this.min();
|
|
1069
|
+
* this.max();
|
|
1070
|
+
* });
|
|
1071
|
+
*
|
|
1072
|
+
* registerOnValidatorChange(fn: () => void): void {
|
|
1073
|
+
* this.validatorChange.register(fn);
|
|
1074
|
+
* }
|
|
1075
|
+
* ```
|
|
1076
|
+
*
|
|
1077
|
+
* @param deps Reads every signal the validator depends on.
|
|
1078
|
+
*/
|
|
1079
|
+
declare function mkValidatorChange(deps: () => void): MkValidatorChangeRef;
|
|
1080
|
+
|
|
1081
|
+
/**
|
|
1082
|
+
* A per-field override map: an error key mapped either to a fixed message or
|
|
1083
|
+
* to a function receiving that key's error payload.
|
|
1084
|
+
*
|
|
1085
|
+
* ```html
|
|
1086
|
+
* <mk-form-field label="Age" [errorMessages]="{ min: 'You must be 18 or over' }">
|
|
1087
|
+
* ```
|
|
1088
|
+
*/
|
|
1089
|
+
type MkErrorMessages = Readonly<Record<string, string | ((err: any) => string)>>;
|
|
1090
|
+
/**
|
|
1091
|
+
* Resolves the message for the first error on a control, mirroring how
|
|
1092
|
+
* `mat-error` shows one message at a time.
|
|
1093
|
+
*
|
|
1094
|
+
* Lookup order per key: the field's `overrides`, then the i18n `validation`
|
|
1095
|
+
* table, then the error payload's own `message` string (so a custom validator
|
|
1096
|
+
* can carry its text), then the generic fallback. Keys are visited in the
|
|
1097
|
+
* order the validators put them on the control, so composing
|
|
1098
|
+
* `[Validators.required, Validators.email]` surfaces "required" while empty.
|
|
1099
|
+
*
|
|
1100
|
+
* @returns The message, or `null` when there are no errors.
|
|
1101
|
+
*/
|
|
1102
|
+
declare function mkFirstErrorMessage(errors: ValidationErrors | null | undefined, strings: MkValidationStrings, overrides?: MkErrorMessages): string | null;
|
|
1103
|
+
|
|
1104
|
+
export { MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MkAnchoredPanel, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkComputeAnchoredPosition, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkUniqueId, mkValidatorChange, provideMkI18n };
|
|
1105
|
+
export type { MkAnchoredPosition, MkAnchoredPositionOptions, MkAriaLivePoliteness, MkBlockEditorStrings, MkCodeLanguage, MkDateNames, MkDensity, MkErrorMessages, MkI18nStrings, MkOverlayConfig, MkPlacement, MkResolvedTheme, MkSize$1 as MkSize, MkSortAnnounceDirection, MkThemePreference, MkTone, MkValidationStrings, MkValidatorChangeRef, MkVariant };
|