@modyra/angular 0.2.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 +364 -0
- package/fesm2022/modyra-angular-adapter.mjs +19 -0
- package/fesm2022/modyra-angular-interop.mjs +145 -0
- package/fesm2022/modyra-angular-ui.mjs +18 -0
- package/fesm2022/modyra-angular-zod.mjs +33 -0
- package/fesm2022/modyra-angular.mjs +9556 -0
- package/package.json +94 -0
- package/types/modyra-angular-adapter.d.ts +2 -0
- package/types/modyra-angular-interop.d.ts +43 -0
- package/types/modyra-angular-ui.d.ts +2 -0
- package/types/modyra-angular-zod.d.ts +23 -0
- package/types/modyra-angular.d.ts +2385 -0
|
@@ -0,0 +1,2385 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { Signal, WritableSignal, Injector, InjectionToken, Provider, TemplateRef, OnInit, ElementRef, InputSignal, OnDestroy, InputSignalWithTransform } from '@angular/core';
|
|
3
|
+
import * as _modyra_core from '@modyra/core';
|
|
4
|
+
import { MdyFormError, MdyFieldError, MdyFormSubmitEvent, MdyControlOption, ValidatorFn, MdySelectOption, MdyFormRegistry, MdyFormEngine, MdySubmitMode, MdyI18nMessages, MdyBuiltInLocale, MdyDateLocale, MdyAnyArrayDescriptor as MdyAnyArrayDescriptor$1, MdyAnyFieldDescriptor as MdyAnyFieldDescriptor$1, MdyAnyGroupDescriptor as MdyAnyGroupDescriptor$1, MdyArrayDescriptor as MdyArrayDescriptor$1, MdyArrayItemValue as MdyArrayItemValue$1, MdyFieldDescriptor as MdyFieldDescriptor$1, MdyFormSchema as MdyFormSchema$1, MdyGroupDescriptor as MdyGroupDescriptor$1, MdyFieldOptions as MdyFieldOptions$1, MdyTypedFormBaseOptions, MdyFormPatch as MdyFormPatch$1, MdyFormValue as MdyFormValue$1, MdyTypedFormBase, MdyWiden as MdyWiden$1, MdyFormValidatorFn, MdyAsyncValidatorFn, MdyAsyncValidatorOptions, MdyDateRange, MdyReactivity } from '@modyra/core';
|
|
5
|
+
export { MdyAsyncValidatorFn, MdyAsyncValidatorOptions, MdyControlOption, MdyDateRange, MdyDraftOptions, MdyDraftStorage, MdyFieldError, MdyFormError, MdyFormSubmitEvent, MdyFormValidatorFn, MdySelectOption, MdySubmitMode, ValidatorFn } from '@modyra/core';
|
|
6
|
+
import * as _modyra_angular from '@modyra/angular';
|
|
7
|
+
import { MdyDynamicField } from '@modyra/core/dynamic-config';
|
|
8
|
+
import * as packages_core_dist from 'packages/core/dist';
|
|
9
|
+
import { OverlayPosition, OverlayAlignment, OverlayAnchor } from '@modyra/core/overlay-position';
|
|
10
|
+
import { CalendarCell, CalendarDate } from '@modyra/core/date-utils';
|
|
11
|
+
import * as _modyra_widgets from '@modyra/widgets';
|
|
12
|
+
import { MdyUiCommand, MdySelectState, MdySelectController, MdySelectControllerOptions, MdySelectIntent } from '@modyra/widgets';
|
|
13
|
+
import { MdyTimeFormat } from '@modyra/core/time-utils';
|
|
14
|
+
import { SafeHtml } from '@angular/platform-browser';
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Mirrors the FieldState exposed by @angular/forms/signals.
|
|
18
|
+
* Stable public contract — isolated from upstream API changes.
|
|
19
|
+
*/
|
|
20
|
+
interface MdyFieldState<TValue> {
|
|
21
|
+
readonly value: WritableSignal<TValue>;
|
|
22
|
+
readonly valid: Signal<boolean>;
|
|
23
|
+
readonly touched: WritableSignal<boolean>;
|
|
24
|
+
readonly dirty: WritableSignal<boolean>;
|
|
25
|
+
readonly disabled: Signal<boolean>;
|
|
26
|
+
readonly readonly: Signal<boolean>;
|
|
27
|
+
readonly pending: Signal<boolean>;
|
|
28
|
+
readonly required: Signal<boolean>;
|
|
29
|
+
readonly errors: Signal<ReadonlyArray<MdyFieldError>>;
|
|
30
|
+
}
|
|
31
|
+
/** Callable that returns the FieldState for a field. */
|
|
32
|
+
type MdyFieldRef<TValue> = () => MdyFieldState<TValue>;
|
|
33
|
+
/**
|
|
34
|
+
* Maps a form model type `T` to a tree of field refs, mirroring the model shape.
|
|
35
|
+
* Each key of `T` becomes an `MdyFieldRef` for its corresponding value type.
|
|
36
|
+
*/
|
|
37
|
+
type MdyFieldTree<T extends Record<string, unknown>> = {
|
|
38
|
+
readonly [K in keyof T]: MdyFieldRef<T[K]>;
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* Interface for components that support options override (e.g. Select, Multiselect).
|
|
42
|
+
* Used by conditional directives to avoid circular dependencies.
|
|
43
|
+
*/
|
|
44
|
+
interface MdyOptionsControl<TValue = unknown> {
|
|
45
|
+
readonly overrideOptions: WritableSignal<readonly MdySelectOption<TValue>[] | null>;
|
|
46
|
+
readonly options: Signal<readonly MdySelectOption<TValue>[]>;
|
|
47
|
+
readonly loading: Signal<boolean>;
|
|
48
|
+
readonly loadingOverride: WritableSignal<boolean | null>;
|
|
49
|
+
/** Current search query typed in the control's search input. */
|
|
50
|
+
readonly searchQuery: Signal<string>;
|
|
51
|
+
resetSelection(): void;
|
|
52
|
+
}
|
|
53
|
+
interface MdyControlRendererConfig {
|
|
54
|
+
readonly label?: string;
|
|
55
|
+
readonly hint?: string;
|
|
56
|
+
readonly placeholder?: string;
|
|
57
|
+
readonly options?: ReadonlyArray<MdyControlOption<unknown>>;
|
|
58
|
+
}
|
|
59
|
+
interface MdyFormState {
|
|
60
|
+
readonly valid: Signal<boolean>;
|
|
61
|
+
readonly pending: Signal<boolean>;
|
|
62
|
+
readonly submitting: Signal<boolean>;
|
|
63
|
+
readonly submitCount: Signal<number>;
|
|
64
|
+
readonly canSubmit: Signal<boolean>;
|
|
65
|
+
readonly lastSubmitErrors: Signal<ReadonlyArray<MdyFormError>>;
|
|
66
|
+
}
|
|
67
|
+
interface MdyFormAdapter<T extends object> {
|
|
68
|
+
readonly state: MdyFormState;
|
|
69
|
+
/** Reactive signal that emits the current form value on every change. */
|
|
70
|
+
readonly value: Signal<T>;
|
|
71
|
+
getValue(): T;
|
|
72
|
+
getField<K extends keyof T>(name: K): MdyFieldRef<T[K]> | null;
|
|
73
|
+
errorsFor(path: keyof T | string): Signal<ReadonlyArray<MdyFormError>>;
|
|
74
|
+
submit(action: (value: T) => Promise<MdyFormError[] | void> | MdyFormError[] | void): Promise<void>;
|
|
75
|
+
markAllTouched(): void;
|
|
76
|
+
buildSubmitEvent(value: T): MdyFormSubmitEvent<T>;
|
|
77
|
+
/** Merge partial values into the form without touching other fields. */
|
|
78
|
+
patchValue(partial: Partial<T>): void;
|
|
79
|
+
/** Replace the entire form value. */
|
|
80
|
+
setValue(value: T): void;
|
|
81
|
+
/**
|
|
82
|
+
* Resets all fields to their declared initial values and clears touched/dirty state.
|
|
83
|
+
*
|
|
84
|
+
* Reset semantics:
|
|
85
|
+
* - Fields with an explicit `[initialValue]` binding reset to that value.
|
|
86
|
+
* - Fields seeded only via `[formValue]` (no `[initialValue]`) reset to `null`.
|
|
87
|
+
* `[formValue]` is a prefill seed, not a persistent reset target.
|
|
88
|
+
* - All `touched` and `dirty` states are cleared to `false`.
|
|
89
|
+
*/
|
|
90
|
+
reset(): void;
|
|
91
|
+
}
|
|
92
|
+
interface MdyFormContext {
|
|
93
|
+
readonly valid: Signal<boolean>;
|
|
94
|
+
readonly submitting: Signal<boolean>;
|
|
95
|
+
readonly submitCount: Signal<number>;
|
|
96
|
+
readonly lastSubmitErrors: Signal<ReadonlyArray<MdyFormError>>;
|
|
97
|
+
}
|
|
98
|
+
interface MdyFieldConfig<TValue = unknown> {
|
|
99
|
+
readonly name: string;
|
|
100
|
+
readonly validators?: ReadonlyArray<ValidatorFn<TValue>>;
|
|
101
|
+
readonly initialValue?: TValue;
|
|
102
|
+
readonly disabled?: boolean;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* The flat path protocol controls and validator directives speak.
|
|
107
|
+
* Angular specialization of the framework-agnostic core registry contract.
|
|
108
|
+
*/
|
|
109
|
+
type MdyDeclarativeRegistry = MdyFormRegistry<Signal<boolean>>;
|
|
110
|
+
/**
|
|
111
|
+
* Adapter used when `<mdy-form>` runs without an explicit [adapter] input,
|
|
112
|
+
* and the engine underneath `mdyForm()`.
|
|
113
|
+
*
|
|
114
|
+
* Since the domain-model extraction this class is a thin Angular binding of
|
|
115
|
+
* the framework-agnostic {@link MdyFormEngine} from `@modyra/core`: it feeds
|
|
116
|
+
* the engine Angular's native signal primitives (via `angularReactivity`),
|
|
117
|
+
* so every piece of form state is a real Angular signal that participates
|
|
118
|
+
* in change detection — zoneless included. All semantics (lazy fields,
|
|
119
|
+
* keyed validators, async last-wins, drafts, history, server-error
|
|
120
|
+
* snapshots) live in the engine.
|
|
121
|
+
*/
|
|
122
|
+
declare class MdyDeclarativeAdapter extends MdyFormEngine implements MdyFormAdapter<Record<string, unknown>>, MdyDeclarativeRegistry {
|
|
123
|
+
constructor(formValue: Signal<Record<string, unknown> | undefined>, submitMode?: Signal<MdySubmitMode>,
|
|
124
|
+
/** Needed to run async validators, drafts and history. */
|
|
125
|
+
injector?: Injector);
|
|
126
|
+
readonly state: MdyFormState;
|
|
127
|
+
readonly value: Signal<Record<string, unknown>>;
|
|
128
|
+
readonly fieldNames: Signal<readonly string[]>;
|
|
129
|
+
readonly hasDraft: Signal<boolean>;
|
|
130
|
+
readonly canUndo: Signal<boolean>;
|
|
131
|
+
readonly canRedo: Signal<boolean>;
|
|
132
|
+
getField(name: string): MdyFieldRef<unknown> | null;
|
|
133
|
+
errorsFor(path: string): Signal<ReadonlyArray<MdyFormError>>;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* Scoped to MdyFormComponent via providers[].
|
|
138
|
+
* Injected by renderer components to resolve FieldRefs.
|
|
139
|
+
*/
|
|
140
|
+
declare const MDY_FORM_ADAPTER: InjectionToken<MdyFormAdapter<Record<string, unknown>>>;
|
|
141
|
+
/**
|
|
142
|
+
* When provided on an element injector, renderers display errors
|
|
143
|
+
* inline next to the label rather than as a block below the input.
|
|
144
|
+
*/
|
|
145
|
+
declare const MDY_INLINE_ERRORS: InjectionToken<boolean>;
|
|
146
|
+
/**
|
|
147
|
+
* Provided by MdyFloatingLabelsDirective to enable floating labels globally on a form.
|
|
148
|
+
*/
|
|
149
|
+
declare const MDY_FLOATING_LABELS: InjectionToken<_modyra_angular.MdyFloatingLabelsDirective>;
|
|
150
|
+
/**
|
|
151
|
+
* Global default for whether floating labels are enabled.
|
|
152
|
+
* Override at application root to change the default for all forms.
|
|
153
|
+
* Defaults to `false` (floating labels opt-in via `mdyFloatingLabels` directive).
|
|
154
|
+
*/
|
|
155
|
+
declare const MDY_FLOATING_LABELS_DEFAULT: InjectionToken<boolean>;
|
|
156
|
+
/**
|
|
157
|
+
* Global default density for floating labels.
|
|
158
|
+
* Replicates M3 density semantics: 0 = standard 56px, negative values compact.
|
|
159
|
+
* Defaults to `-2` (48px, balanced compactness).
|
|
160
|
+
*/
|
|
161
|
+
declare const MDY_FLOATING_LABELS_DENSITY_DEFAULT: InjectionToken<number>;
|
|
162
|
+
/**
|
|
163
|
+
* Provided by MdyFormComponent in declarative mode (no explicit [adapter] input).
|
|
164
|
+
* Validator directives inject this to register their rules on specific fields.
|
|
165
|
+
*/
|
|
166
|
+
declare const MDY_DECLARATIVE_REGISTRY: InjectionToken<MdyDeclarativeRegistry>;
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* All static UI strings used by modyra renderers.
|
|
170
|
+
* Override by providing `MDY_I18N_MESSAGES` at the root or component level.
|
|
171
|
+
*
|
|
172
|
+
* @example
|
|
173
|
+
* providers: [{ provide: MDY_I18N_MESSAGES, useValue: { ...MDY_I18N_MESSAGES_DEFAULT, noResults: 'Nessun risultato' } }]
|
|
174
|
+
*/
|
|
175
|
+
declare const MDY_I18N_MESSAGES: InjectionToken<MdyI18nMessages>;
|
|
176
|
+
|
|
177
|
+
interface MdyLocaleOptions {
|
|
178
|
+
/**
|
|
179
|
+
* BCP 47 tag for `Intl`-based date formatting (month/day names, first day
|
|
180
|
+
* of week). Defaults to the canonical tag of the language preset.
|
|
181
|
+
*/
|
|
182
|
+
readonly dateLocale?: string;
|
|
183
|
+
/** Per-key overrides applied on top of the language preset. */
|
|
184
|
+
readonly overrides?: Partial<MdyI18nMessages>;
|
|
185
|
+
}
|
|
186
|
+
/**
|
|
187
|
+
* Provides both UI strings and date localisation with one call:
|
|
188
|
+
*
|
|
189
|
+
* ```ts
|
|
190
|
+
* bootstrapApplication(App, {
|
|
191
|
+
* providers: [provideModyraLocale("it")],
|
|
192
|
+
* });
|
|
193
|
+
* ```
|
|
194
|
+
*
|
|
195
|
+
* Built-in presets: `en`, `it`, `de`, `fr`, `es`. Use `overrides` to adjust
|
|
196
|
+
* individual keys, or provide `MDY_I18N_MESSAGES` yourself for other
|
|
197
|
+
* languages (the token is a plain object of strings).
|
|
198
|
+
*/
|
|
199
|
+
declare function provideModyraLocale(locale: MdyBuiltInLocale, options?: MdyLocaleOptions): Provider[];
|
|
200
|
+
|
|
201
|
+
/**
|
|
202
|
+
* DI token that provides locale configuration for date components.
|
|
203
|
+
*
|
|
204
|
+
* The locale shape and builder are framework-agnostic and come from
|
|
205
|
+
* `@modyra/core`; Angular keeps only the token/provider wiring here.
|
|
206
|
+
*/
|
|
207
|
+
declare const MDY_DATE_LOCALE: InjectionToken<MdyDateLocale>;
|
|
208
|
+
|
|
209
|
+
type MdyAnyArrayDescriptor = MdyAnyArrayDescriptor$1;
|
|
210
|
+
type MdyAnyFieldDescriptor = MdyAnyFieldDescriptor$1;
|
|
211
|
+
type MdyAnyGroupDescriptor = MdyAnyGroupDescriptor$1;
|
|
212
|
+
type MdyArrayDescriptor<TItem> = MdyArrayDescriptor$1<TItem>;
|
|
213
|
+
type MdyArrayItemValue<I> = MdyArrayItemValue$1<I>;
|
|
214
|
+
type MdyFieldDescriptor<TValue> = MdyFieldDescriptor$1<TValue>;
|
|
215
|
+
type MdyFieldOptions<TValue> = MdyFieldOptions$1<TValue>;
|
|
216
|
+
type MdyFormPatch<S extends MdyFormSchema$1> = MdyFormPatch$1<S>;
|
|
217
|
+
type MdyFormSchema = MdyFormSchema$1;
|
|
218
|
+
type MdyFormValue<S extends MdyFormSchema$1> = MdyFormValue$1<S>;
|
|
219
|
+
type MdyGroupDescriptor<TChildren extends MdyFormSchema$1> = MdyGroupDescriptor$1<TChildren>;
|
|
220
|
+
type MdyWiden<T> = MdyWiden$1<T>;
|
|
221
|
+
/**
|
|
222
|
+
* Typed handle for a single field, exposed on `form.f`.
|
|
223
|
+
* Bind it to a renderer with `[field]="form.f.email"` — a typo on the
|
|
224
|
+
* handle path is a compile error, unlike the stringly `name` attribute.
|
|
225
|
+
*/
|
|
226
|
+
interface MdyFieldHandle<TValue> {
|
|
227
|
+
/** Flat adapter path of the field (dot-separated for nested groups). */
|
|
228
|
+
readonly path: string;
|
|
229
|
+
readonly value: Signal<TValue>;
|
|
230
|
+
readonly errors: Signal<ReadonlyArray<MdyFieldError>>;
|
|
231
|
+
readonly touched: Signal<boolean>;
|
|
232
|
+
readonly dirty: Signal<boolean>;
|
|
233
|
+
readonly valid: Signal<boolean>;
|
|
234
|
+
readonly pending: Signal<boolean>;
|
|
235
|
+
readonly required: Signal<boolean>;
|
|
236
|
+
readonly disabled: Signal<boolean>;
|
|
237
|
+
set(value: TValue): void;
|
|
238
|
+
markAsTouched(): void;
|
|
239
|
+
markAsDirty(): void;
|
|
240
|
+
}
|
|
241
|
+
/** Typed handle for a repeatable array item, exposed on `form.f` (`form.f.items`). */
|
|
242
|
+
interface MdyArrayHandle<TItemHandle, TItemValue> {
|
|
243
|
+
readonly path: string;
|
|
244
|
+
readonly length: Signal<number>;
|
|
245
|
+
readonly rows: Signal<ReadonlyArray<TItemHandle>>;
|
|
246
|
+
readonly errors: Signal<ReadonlyArray<MdyFieldError>>;
|
|
247
|
+
readonly valid: Signal<boolean>;
|
|
248
|
+
push(value: TItemValue): void;
|
|
249
|
+
insert(index: number, value: TItemValue): void;
|
|
250
|
+
remove(index: number): void;
|
|
251
|
+
move(from: number, to: number): void;
|
|
252
|
+
setAll(values: ReadonlyArray<TItemValue>): void;
|
|
253
|
+
at(index: number): TItemHandle | null;
|
|
254
|
+
}
|
|
255
|
+
/** The handle tree for a single array item — a field handle or nested group tree. */
|
|
256
|
+
type MdyItemHandleTree<I> = I extends MdyGroupDescriptor<infer C> ? MdyFieldHandleTree<C> : I extends MdyFieldDescriptor<infer V> ? MdyFieldHandle<V> : never;
|
|
257
|
+
/** The typed handle tree mirroring the schema shape (`form.f.address.city`). */
|
|
258
|
+
type MdyFieldHandleTree<S extends MdyFormSchema> = {
|
|
259
|
+
readonly [K in keyof S]: S[K] extends MdyFieldDescriptor<infer V> ? MdyFieldHandle<V> : S[K] extends MdyGroupDescriptor<infer C> ? MdyFieldHandleTree<C> : S[K] extends MdyArrayDescriptor<infer I> ? MdyArrayHandle<MdyItemHandleTree<I>, MdyArrayItemValue<I>> : never;
|
|
260
|
+
};
|
|
261
|
+
/** Declares a typed leaf field of a {@link mdyForm} schema. */
|
|
262
|
+
declare function field<TValue>(initial: MdyWiden<TValue>, validators?: ReadonlyArray<ValidatorFn<MdyWiden<TValue>>>, options?: MdyFieldOptions<MdyWiden<TValue>>): MdyFieldDescriptor<MdyWiden<TValue>>;
|
|
263
|
+
/** Declares a nested group of fields (`address.city` paths on the adapter). */
|
|
264
|
+
declare function group<TChildren extends MdyFormSchema>(children: TChildren): MdyGroupDescriptor<TChildren>;
|
|
265
|
+
/** Declares a repeatable array of fields or groups (`items.0.name` paths on the adapter). */
|
|
266
|
+
declare function array<TItem extends MdyAnyGroupDescriptor | MdyAnyFieldDescriptor>(item: TItem, options?: {
|
|
267
|
+
readonly initial?: ReadonlyArray<unknown>;
|
|
268
|
+
readonly validators?: ReadonlyArray<ValidatorFn<readonly unknown[]>>;
|
|
269
|
+
}): MdyArrayDescriptor<TItem>;
|
|
270
|
+
interface MdyFormOptions<TValue extends Record<string, unknown> = Record<string, unknown>> extends MdyTypedFormBaseOptions<TValue> {
|
|
271
|
+
readonly submitMode?: MdySubmitMode;
|
|
272
|
+
/**
|
|
273
|
+
* Needed only for async validators when `mdyForm()` is called outside an
|
|
274
|
+
* injection context; inside a field initializer it is resolved automatically.
|
|
275
|
+
*/
|
|
276
|
+
readonly injector?: Injector;
|
|
277
|
+
}
|
|
278
|
+
/**
|
|
279
|
+
* Structural supertype of every `MdyTypedForm<S>` — what `<mdy-form [form]>`
|
|
280
|
+
* accepts without caring about the concrete schema type. Mirrors
|
|
281
|
+
* `MdyFormAdapter` with schema-agnostic value types.
|
|
282
|
+
*/
|
|
283
|
+
interface MdyTypedFormLike extends MdyDeclarativeRegistry {
|
|
284
|
+
readonly state: MdyFormState;
|
|
285
|
+
readonly value: Signal<Record<string, unknown>>;
|
|
286
|
+
getValue(): Record<string, unknown>;
|
|
287
|
+
getField(name: string): MdyFieldRef<unknown> | null;
|
|
288
|
+
errorsFor(path: string): Signal<ReadonlyArray<MdyFormError>>;
|
|
289
|
+
submit(action: (value: Record<string, unknown>) => Promise<MdyFormError[] | void> | MdyFormError[] | void): Promise<void>;
|
|
290
|
+
markAllTouched(): void;
|
|
291
|
+
buildSubmitEvent(value: never): MdyFormSubmitEvent<Record<string, unknown>>;
|
|
292
|
+
patchValue(partial: never): void;
|
|
293
|
+
setValue(value: never): void;
|
|
294
|
+
reset(): void;
|
|
295
|
+
}
|
|
296
|
+
/**
|
|
297
|
+
* Creates a typed, signal-based form model from a schema.
|
|
298
|
+
*
|
|
299
|
+
* ```ts
|
|
300
|
+
* const form = mdyForm({
|
|
301
|
+
* email: field("", [required(), email()]),
|
|
302
|
+
* age: field<number | null>(null, [min(18)]),
|
|
303
|
+
* address: group({ city: field(""), zip: field("") }),
|
|
304
|
+
* });
|
|
305
|
+
*
|
|
306
|
+
* form.f.email.value(); // Signal<string>
|
|
307
|
+
* form.f.address.city.set("Rome");
|
|
308
|
+
* form.getValue().age; // number | null — typos do not compile
|
|
309
|
+
* ```
|
|
310
|
+
* ```html
|
|
311
|
+
* <mdy-form [form]="form" (submitted)="onSubmit($event)">
|
|
312
|
+
* <mdy-control-text [field]="form.f.email" label="Email" />
|
|
313
|
+
* </mdy-form>
|
|
314
|
+
* ```
|
|
315
|
+
*/
|
|
316
|
+
declare function mdyForm<S extends MdyFormSchema>(schema: S, options?: MdyFormOptions<MdyFormValue<S>>): MdyTypedForm<S>;
|
|
317
|
+
/**
|
|
318
|
+
* Typed form model over the flat {@link MdyDeclarativeAdapter}.
|
|
319
|
+
*
|
|
320
|
+
* Inherits all framework-agnostic behavior from {@link MdyTypedFormBase} in
|
|
321
|
+
* `@modyra/core`; this class only adds Angular signal narrowing and the
|
|
322
|
+
* injector-aware constructor.
|
|
323
|
+
*/
|
|
324
|
+
declare class MdyTypedForm<S extends MdyFormSchema> extends MdyTypedFormBase<S, MdyFieldHandle<unknown>, Signal<boolean>> implements MdyFormAdapter<MdyFormValue<S>>, MdyDeclarativeRegistry {
|
|
325
|
+
protected readonly _adapter: MdyDeclarativeAdapter;
|
|
326
|
+
readonly state: MdyFormState;
|
|
327
|
+
readonly f: MdyFieldHandleTree<S>;
|
|
328
|
+
readonly value: Signal<MdyFormValue<S>>;
|
|
329
|
+
constructor(schema: S, options?: MdyFormOptions<MdyFormValue<S>>);
|
|
330
|
+
getField<K extends keyof MdyFormValue<S>>(name: K): MdyFieldRef<MdyFormValue<S>[K]> | null;
|
|
331
|
+
getField(name: string): MdyFieldRef<unknown> | null;
|
|
332
|
+
errorsFor(path: keyof MdyFormValue<S> | string): Signal<ReadonlyArray<MdyFormError>>;
|
|
333
|
+
get canUndo(): Signal<boolean>;
|
|
334
|
+
get canRedo(): Signal<boolean>;
|
|
335
|
+
get hasDraft(): Signal<boolean>;
|
|
336
|
+
get fieldNames(): Signal<readonly string[]>;
|
|
337
|
+
protected _buildHandle(path: string): MdyFieldHandle<unknown>;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/**
|
|
341
|
+
* Pure state-manager for a dynamically-sized list of repeating sub-forms.
|
|
342
|
+
*
|
|
343
|
+
* Manages the items array (add/remove) and collects values/validity from
|
|
344
|
+
* `<mdy-form>` content children. The consumer renders the forms directly
|
|
345
|
+
* in its own template so Angular DI works correctly for renderer components.
|
|
346
|
+
*
|
|
347
|
+
* Usage:
|
|
348
|
+
* ```html
|
|
349
|
+
* <mdy-form-array #arr [initialItems]="items">
|
|
350
|
+
* @for (item of arr.items(); track item._id; let idx = $index) {
|
|
351
|
+
* <mdy-form [formValue]="item.value">
|
|
352
|
+
* <mdy-control-text name="nome" label="Nome" />
|
|
353
|
+
* <button type="button" (click)="arr.remove(idx)">Remove</button>
|
|
354
|
+
* </mdy-form>
|
|
355
|
+
* }
|
|
356
|
+
* </mdy-form-array>
|
|
357
|
+
* <button (click)="arr.add()">Add</button>
|
|
358
|
+
* ```
|
|
359
|
+
*
|
|
360
|
+
* Read results with `arr.getValue()` and validity with `arr.isValid()`.
|
|
361
|
+
*/
|
|
362
|
+
declare class MdyFormArrayComponent<T extends Record<string, unknown>> {
|
|
363
|
+
/** Seed values for the initial rows. Re-setting this input resets all rows. */
|
|
364
|
+
readonly initialItems: _angular_core.InputSignal<readonly T[]>;
|
|
365
|
+
private _nextId;
|
|
366
|
+
/**
|
|
367
|
+
* Reactive items list — bind this in the consumer's `@for` to drive the rows.
|
|
368
|
+
* Each entry carries a stable `_id` for `track` and the row seed `value`.
|
|
369
|
+
* Seeds are `Partial<T>`: rows added without a value start empty and get
|
|
370
|
+
* completed by the user (B43 — no unsound `Partial<T> as T` cast).
|
|
371
|
+
*/
|
|
372
|
+
readonly items: WritableSignal<Array<{
|
|
373
|
+
_id: number;
|
|
374
|
+
value: Partial<T>;
|
|
375
|
+
}>>;
|
|
376
|
+
/** All `<mdy-form>` content children, in DOM order. */
|
|
377
|
+
private readonly _forms;
|
|
378
|
+
/** Aggregated validity signal — `true` when every row form is valid. */
|
|
379
|
+
readonly state: Signal<{
|
|
380
|
+
valid: boolean;
|
|
381
|
+
}>;
|
|
382
|
+
/** Returns `true` when every row form is valid. */
|
|
383
|
+
isValid(): boolean;
|
|
384
|
+
/**
|
|
385
|
+
* Collects and returns the current value of every row form, in DOM order.
|
|
386
|
+
* Rows are typed `Partial<T>`: a row whose controls have not all been
|
|
387
|
+
* filled genuinely lacks those keys. Validate with `isValid()` before
|
|
388
|
+
* treating entries as complete `T` (B43).
|
|
389
|
+
*/
|
|
390
|
+
getValue(): Array<Partial<T>>;
|
|
391
|
+
/** Appends a new row pre-filled with the given partial value. */
|
|
392
|
+
add(value?: Partial<T>): void;
|
|
393
|
+
/** Removes the row at the given index. */
|
|
394
|
+
remove(index: number): void;
|
|
395
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyFormArrayComponent<any>, never>;
|
|
396
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyFormArrayComponent<any>, "mdy-form-array", never, { "initialItems": { "alias": "initialItems"; "required": false; "isSignal": true; }; }, {}, ["_forms"], ["*"], true, never>;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
/**
|
|
400
|
+
* Host component for a declarative signal-driven form.
|
|
401
|
+
*
|
|
402
|
+
* Provides the adapter to all descendant renderer components via DI.
|
|
403
|
+
*
|
|
404
|
+
* **Explicit adapter mode** (existing API, unchanged):
|
|
405
|
+
* ```html
|
|
406
|
+
* <mdy-form [adapter]="adapter" (submitted)="handle($event)">…</mdy-form>
|
|
407
|
+
* ```
|
|
408
|
+
*
|
|
409
|
+
* **Declarative mode** (no adapter needed):
|
|
410
|
+
* ```html
|
|
411
|
+
* <mdy-form [formValue]="{ age: 18 }" (submitted)="handle($event)">
|
|
412
|
+
* <mdy-control-text name="email" mdyRequired mdyEmail />
|
|
413
|
+
* <mdy-control-number name="age" [mdyMin]="18" />
|
|
414
|
+
* </mdy-form>
|
|
415
|
+
* ```
|
|
416
|
+
*/
|
|
417
|
+
declare class MdyFormComponent<T extends Record<string, unknown>> implements MdyFormAdapter<T>, MdyDeclarativeRegistry {
|
|
418
|
+
/** Explicit adapter — if omitted the form creates one automatically. */
|
|
419
|
+
readonly adapter: _angular_core.InputSignal<MdyFormAdapter<T> | undefined>;
|
|
420
|
+
/**
|
|
421
|
+
* Typed form model created with `mdyForm()`. Takes precedence over the
|
|
422
|
+
* internal declarative adapter; `[adapter]` still wins over both.
|
|
423
|
+
* `[formValue]` is ignored in this mode — initial values live in the schema.
|
|
424
|
+
*/
|
|
425
|
+
readonly form: _angular_core.InputSignal<(MdyFormAdapter<T> & MdyDeclarativeRegistry) | undefined>;
|
|
426
|
+
readonly action: _angular_core.InputSignal<((value: T) => Promise<MdyFormError[] | void> | MdyFormError[] | void) | undefined>;
|
|
427
|
+
/**
|
|
428
|
+
* Default values for declarative mode.
|
|
429
|
+
* Per-control [initialValue] takes precedence over this.
|
|
430
|
+
*/
|
|
431
|
+
readonly formValue: _angular_core.InputSignal<Partial<Record<string, unknown>> | undefined>;
|
|
432
|
+
/** Submit behaviour for declarative mode (ignored when adapter is provided). */
|
|
433
|
+
readonly submitMode: _angular_core.InputSignal<MdySubmitMode>;
|
|
434
|
+
/**
|
|
435
|
+
* Form-level (cross-field) validators for declarative mode. Build them
|
|
436
|
+
* with `crossField()`; errors land on the involved fields (or on the form
|
|
437
|
+
* with `path: null`). With `[form]`/`[adapter]` declare validators on the
|
|
438
|
+
* model instead.
|
|
439
|
+
*/
|
|
440
|
+
readonly formValidators: _angular_core.InputSignal<readonly MdyFormValidatorFn<Record<string, unknown>>[]>;
|
|
441
|
+
/**
|
|
442
|
+
* Declarative-mode draft autosave: persists the form value under this key
|
|
443
|
+
* (localStorage) and restores it on init; cleared after an error-free
|
|
444
|
+
* submit. With `[form]`/`[adapter]` configure the draft on the model.
|
|
445
|
+
*/
|
|
446
|
+
readonly draftKey: _angular_core.InputSignal<string | undefined>;
|
|
447
|
+
readonly submitted: _angular_core.OutputEmitterRef<MdyFormSubmitEvent<T>>;
|
|
448
|
+
private readonly _declarativeAdapter;
|
|
449
|
+
/** Last seed applied from [formValue] — used to diff per key (B2). */
|
|
450
|
+
private _lastSeed;
|
|
451
|
+
/** One-shot guard for the registry-incompatible [adapter] dev warning. */
|
|
452
|
+
private _warnedAdapterRegistry;
|
|
453
|
+
constructor();
|
|
454
|
+
claimField(name: string): void;
|
|
455
|
+
removeField(name: string): void;
|
|
456
|
+
/** Active adapter: [adapter] wins, then [form], then the internal one. */
|
|
457
|
+
private get _active();
|
|
458
|
+
/**
|
|
459
|
+
* Registry target for controls/directives. Must resolve to the same object
|
|
460
|
+
* as {@link _active}: claims and validators registered on a different
|
|
461
|
+
* adapter than the one whose value is displayed would silently diverge
|
|
462
|
+
* (required not applied, wrong field released on destroy).
|
|
463
|
+
*/
|
|
464
|
+
private get _registry();
|
|
465
|
+
addValidators<V>(name: string, validators: ReadonlyArray<ValidatorFn<V>>, isRequired?: boolean): void;
|
|
466
|
+
upsertValidators<V>(name: string, key: string, validators: ReadonlyArray<ValidatorFn<V>>, marksRequired?: boolean): void;
|
|
467
|
+
removeValidators(name: string, key: string): void;
|
|
468
|
+
upsertAsyncValidators<V>(name: string, key: string, validators: ReadonlyArray<MdyAsyncValidatorFn<V>>, options?: MdyAsyncValidatorOptions): void;
|
|
469
|
+
setInitialValue(name: string, value: unknown): void;
|
|
470
|
+
setDisabled(name: string, disabled: Signal<boolean>): void;
|
|
471
|
+
setReadonly(name: string, readonly: Signal<boolean>): void;
|
|
472
|
+
get state(): MdyFormState;
|
|
473
|
+
/**
|
|
474
|
+
* Reactive flat field paths of the active adapter (empty for a custom
|
|
475
|
+
* `[adapter]` that does not expose them) — used by the devtools.
|
|
476
|
+
*/
|
|
477
|
+
get fieldNames(): Signal<readonly string[]>;
|
|
478
|
+
get value(): Signal<T>;
|
|
479
|
+
getValue(): T;
|
|
480
|
+
getField<K extends keyof T>(name: K): MdyFieldRef<T[K]> | null;
|
|
481
|
+
errorsFor(path: keyof T | string): Signal<ReadonlyArray<MdyFormError>>;
|
|
482
|
+
submit(action: (value: T) => Promise<MdyFormError[] | void> | MdyFormError[] | void): Promise<void>;
|
|
483
|
+
markAllTouched(): void;
|
|
484
|
+
buildSubmitEvent(value: T): MdyFormSubmitEvent<T>;
|
|
485
|
+
patchValue(partial: Partial<T>): void;
|
|
486
|
+
setValue(value: T): void;
|
|
487
|
+
reset(): void;
|
|
488
|
+
protected handleSubmit(): Promise<void>;
|
|
489
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyFormComponent<any>, never>;
|
|
490
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyFormComponent<any>, "mdy-form", never, { "adapter": { "alias": "adapter"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "formValue": { "alias": "formValue"; "required": false; "isSignal": true; }; "submitMode": { "alias": "submitMode"; "required": false; "isSignal": true; }; "formValidators": { "alias": "formValidators"; "required": false; "isSignal": true; }; "draftKey": { "alias": "draftKey"; "required": false; "isSignal": true; }; }, { "submitted": "submitted"; }, never, ["*"], true, never>;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
/**
|
|
494
|
+
* Marks an `<mdy-form>` as inspectable by the devtools overlay:
|
|
495
|
+
*
|
|
496
|
+
* ```html
|
|
497
|
+
* <mdy-form [form]="form" mdyDevtools>…</mdy-form>
|
|
498
|
+
* ```
|
|
499
|
+
*
|
|
500
|
+
* Press the hotkey (default **Ctrl+Shift+D**, see `MDY_DEVTOOLS_HOTKEY`) to
|
|
501
|
+
* toggle a draggable overlay inspecting the form that currently has focus
|
|
502
|
+
* (fallback: the last registered form). Close it with ✕ or Escape.
|
|
503
|
+
*/
|
|
504
|
+
declare class MdyDevtoolsDirective {
|
|
505
|
+
constructor();
|
|
506
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyDevtoolsDirective, never>;
|
|
507
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyDevtoolsDirective, "mdy-form[mdyDevtools]", never, {}, {}, never, never, true, never>;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
/**
|
|
511
|
+
* Floating, draggable window around the devtools panel — opened by
|
|
512
|
+
* {@link MdyFormsDevtoolsService} via a keyboard shortcut. Drag it by the
|
|
513
|
+
* title bar; the ✕ button (or Escape while it has focus) closes it.
|
|
514
|
+
*/
|
|
515
|
+
declare class MdyFormsDevtoolsOverlayComponent {
|
|
516
|
+
readonly form: _angular_core.InputSignal<MdyTypedFormLike>;
|
|
517
|
+
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
518
|
+
private readonly _offset;
|
|
519
|
+
protected readonly translate: _angular_core.WritableSignal<string>;
|
|
520
|
+
private _dragging;
|
|
521
|
+
private _start;
|
|
522
|
+
protected onDragStart(event: PointerEvent): void;
|
|
523
|
+
protected onDragMove(event: PointerEvent): void;
|
|
524
|
+
protected onDragEnd(event: PointerEvent): void;
|
|
525
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyFormsDevtoolsOverlayComponent, never>;
|
|
526
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyFormsDevtoolsOverlayComponent, "mdy-forms-devtools-overlay", never, { "form": { "alias": "form"; "required": true; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
interface DevtoolsFieldRow {
|
|
530
|
+
readonly path: string;
|
|
531
|
+
readonly value: string;
|
|
532
|
+
readonly valid: boolean;
|
|
533
|
+
readonly touched: boolean;
|
|
534
|
+
readonly dirty: boolean;
|
|
535
|
+
readonly pending: boolean;
|
|
536
|
+
readonly errors: readonly string[];
|
|
537
|
+
}
|
|
538
|
+
/**
|
|
539
|
+
* Live inspector for a form model — the universal "why is my form
|
|
540
|
+
* invalid?" debugging pain, answered in one panel.
|
|
541
|
+
*
|
|
542
|
+
* ```html
|
|
543
|
+
* @if (isDevMode) {
|
|
544
|
+
* <mdy-forms-devtools [form]="form" [fields]="[form.f.email, form.f.address.city]" />
|
|
545
|
+
* }
|
|
546
|
+
* ```
|
|
547
|
+
*
|
|
548
|
+
* Shows the live value (JSON, `File`s serialized), the form state signals
|
|
549
|
+
* (valid/pending/submitting/submitCount/canSubmit), the last submit errors
|
|
550
|
+
* and a per-field row (value, valid/touched/dirty/pending, error messages
|
|
551
|
+
* with their origin) for every handle passed in `[fields]`. Values of
|
|
552
|
+
* sensitive-looking fields (password, token, card…) are masked; add more
|
|
553
|
+
* paths via `[maskFields]`. Render it behind `isDevMode()` — it ships no
|
|
554
|
+
* providers, and it is only bundled when your code imports it (standard
|
|
555
|
+
* tree shaking: unused imports are dropped by the production build).
|
|
556
|
+
*/
|
|
557
|
+
declare class MdyFormsDevtoolsComponent {
|
|
558
|
+
/** The form model to inspect (an `mdyForm()` result or any adapter). */
|
|
559
|
+
readonly form: _angular_core.InputSignal<MdyTypedFormLike>;
|
|
560
|
+
/**
|
|
561
|
+
* Typed handles to show as per-field rows (`[form.f.email, …]`).
|
|
562
|
+
* When omitted, the rows are derived automatically from the form's
|
|
563
|
+
* registered field names.
|
|
564
|
+
*/
|
|
565
|
+
readonly fields: _angular_core.InputSignal<readonly MdyFieldHandle<unknown>[]>;
|
|
566
|
+
/** Start with the body expanded (the overlay opens it this way). */
|
|
567
|
+
readonly expanded: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
568
|
+
/**
|
|
569
|
+
* Extra field paths whose values are masked in the panel, in addition
|
|
570
|
+
* to the built-in heuristic (paths containing password/token/card/…).
|
|
571
|
+
*/
|
|
572
|
+
readonly maskFields: _angular_core.InputSignal<readonly string[]>;
|
|
573
|
+
/**
|
|
574
|
+
* Field paths hidden from the devtools entirely — no row and no key in
|
|
575
|
+
* the JSON view (masking shows `•••`; excluding shows nothing).
|
|
576
|
+
*/
|
|
577
|
+
readonly excludeFields: _angular_core.InputSignal<readonly string[]>;
|
|
578
|
+
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
579
|
+
protected readonly nameFilter: _angular_core.WritableSignal<string>;
|
|
580
|
+
protected readonly onlyInvalid: _angular_core.WritableSignal<boolean>;
|
|
581
|
+
protected readonly onlyTouched: _angular_core.WritableSignal<boolean>;
|
|
582
|
+
protected readonly onlyDirty: _angular_core.WritableSignal<boolean>;
|
|
583
|
+
protected readonly onlyPending: _angular_core.WritableSignal<boolean>;
|
|
584
|
+
protected readonly state: Signal<{
|
|
585
|
+
valid: boolean;
|
|
586
|
+
pending: boolean;
|
|
587
|
+
submitting: boolean;
|
|
588
|
+
submitCount: number;
|
|
589
|
+
canSubmit: boolean;
|
|
590
|
+
}>;
|
|
591
|
+
protected readonly valueJson: Signal<string>;
|
|
592
|
+
protected readonly submitErrors: Signal<string[]>;
|
|
593
|
+
protected readonly rows: Signal<readonly DevtoolsFieldRow[]>;
|
|
594
|
+
protected readonly filteredRows: Signal<DevtoolsFieldRow[]>;
|
|
595
|
+
protected copyText(text: string): void;
|
|
596
|
+
private _isMasked;
|
|
597
|
+
private _displayValue;
|
|
598
|
+
/** Masks sensitive-looking keys and drops excluded ones in the JSON view. */
|
|
599
|
+
private _maskDeep;
|
|
600
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyFormsDevtoolsComponent, never>;
|
|
601
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyFormsDevtoolsComponent, "mdy-forms-devtools", never, { "form": { "alias": "form"; "required": true; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "maskFields": { "alias": "maskFields"; "required": false; "isSignal": true; }; "excludeFields": { "alias": "excludeFields"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
/**
|
|
605
|
+
* Hotkey that toggles the devtools overlay, as `modifier+…+key`
|
|
606
|
+
* (`ctrl`, `shift`, `alt`, `meta` plus a single key). Default
|
|
607
|
+
* `ctrl+shift+d` — note this collides with a built-in browser shortcut
|
|
608
|
+
* in some browsers (e.g. bookmark-all-tabs); override it when that
|
|
609
|
+
* matters: `{ provide: MDY_DEVTOOLS_HOTKEY, useValue: "ctrl+alt+i" }`.
|
|
610
|
+
* Provide `null` (or `""`) to disable the hotkey entirely — the overlay
|
|
611
|
+
* stays reachable via {@link MdyFormsDevtoolsService.toggle}.
|
|
612
|
+
*/
|
|
613
|
+
declare const MDY_DEVTOOLS_HOTKEY: InjectionToken<string | null>;
|
|
614
|
+
/**
|
|
615
|
+
* Registry + launcher for the devtools overlay. `mdyDevtools` on an
|
|
616
|
+
* `<mdy-form>` registers the form; the hotkey (default Ctrl+Shift+D)
|
|
617
|
+
* toggles a draggable overlay inspecting the **selected** form — the
|
|
618
|
+
* registered form containing the focused element, or the last registered
|
|
619
|
+
* one as a fallback. Also usable programmatically via {@link toggle}.
|
|
620
|
+
*/
|
|
621
|
+
declare class MdyFormsDevtoolsService {
|
|
622
|
+
private readonly _appRef;
|
|
623
|
+
private readonly _injector;
|
|
624
|
+
private readonly _hotkey;
|
|
625
|
+
private readonly _registrations;
|
|
626
|
+
private _overlay;
|
|
627
|
+
private _listening;
|
|
628
|
+
private _previousFocus;
|
|
629
|
+
/** Registers an inspectable form (called by the `mdyDevtools` directive). */
|
|
630
|
+
register(element: HTMLElement, form: MdyTypedFormLike): void;
|
|
631
|
+
unregister(element: HTMLElement): void;
|
|
632
|
+
/** Opens the overlay on the selected (or given) form; closes it if open. */
|
|
633
|
+
toggle(form?: MdyTypedFormLike): void;
|
|
634
|
+
open(form: MdyTypedFormLike): void;
|
|
635
|
+
close(): void;
|
|
636
|
+
/** The registered form containing the focused element, else the last one. */
|
|
637
|
+
private _selectForm;
|
|
638
|
+
private _setupHotkey;
|
|
639
|
+
private _teardownHotkey;
|
|
640
|
+
private readonly _onKeydown;
|
|
641
|
+
private _matchesHotkey;
|
|
642
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyFormsDevtoolsService, never>;
|
|
643
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<MdyFormsDevtoolsService>;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
/**
|
|
647
|
+
* Runtime form rendering from a serializable config — CMS, form builders,
|
|
648
|
+
* low-code scenarios. The config is a discriminated union
|
|
649
|
+
* ({@link MdyDynamicField}), so invalid kind/property combinations do not
|
|
650
|
+
* compile when the config is authored in TypeScript, and validators are a
|
|
651
|
+
* JSON-safe subset mapped to the library's pure validator functions.
|
|
652
|
+
*
|
|
653
|
+
* ```ts
|
|
654
|
+
* readonly fields: MdyDynamicField[] = [
|
|
655
|
+
* { kind: "text", name: "firstName", label: "First name", validators: { required: true } },
|
|
656
|
+
* { kind: "select", name: "country", label: "Country", options: [...] },
|
|
657
|
+
* { kind: "slider", name: "budget", label: "Budget", min: 0, max: 100 },
|
|
658
|
+
* ];
|
|
659
|
+
* ```
|
|
660
|
+
* ```html
|
|
661
|
+
* <mdy-dynamic-form [fields]="fields" (submitted)="save($event)" />
|
|
662
|
+
* ```
|
|
663
|
+
*/
|
|
664
|
+
declare class MdyDynamicFormComponent {
|
|
665
|
+
/** Serializable field configs, rendered in order. */
|
|
666
|
+
readonly fields: _angular_core.InputSignal<readonly MdyDynamicField[]>;
|
|
667
|
+
/** Re-emitted from the inner `<mdy-form>`. */
|
|
668
|
+
readonly submitted: _angular_core.OutputEmitterRef<MdyFormSubmitEvent<Record<string, unknown>>>;
|
|
669
|
+
/** Inner form — exposed so consumers can call getValue()/reset()/submit(). */
|
|
670
|
+
readonly form: _angular_core.Signal<MdyFormComponent<Record<string, unknown>>>;
|
|
671
|
+
constructor();
|
|
672
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyDynamicFormComponent, never>;
|
|
673
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyDynamicFormComponent, "mdy-dynamic-form", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; }, { "submitted": "submitted"; }, never, ["*"], true, never>;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
/**
|
|
677
|
+
* One step of an `<mdy-form-wizard>`.
|
|
678
|
+
*
|
|
679
|
+
* The step declares which fields it owns via `[fields]` (names or typed
|
|
680
|
+
* handles): the wizard gates navigation on their validity and marks them
|
|
681
|
+
* touched when the user tries to advance past an invalid step.
|
|
682
|
+
*
|
|
683
|
+
* Inactive steps are hidden, **not destroyed** — their controls stay
|
|
684
|
+
* registered on the form, so values and validators survive navigation.
|
|
685
|
+
*/
|
|
686
|
+
declare class MdyWizardStepComponent {
|
|
687
|
+
/** Step title shown in the wizard progress header. */
|
|
688
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
689
|
+
/**
|
|
690
|
+
* Fields owned by this step — names (`"email"`) or typed handles
|
|
691
|
+
* (`form.f.email`). Used for per-step validation.
|
|
692
|
+
*/
|
|
693
|
+
readonly fields: _angular_core.InputSignal<readonly (string | MdyFieldHandle<unknown>)[]>;
|
|
694
|
+
/** Resolved adapter paths of the step's fields. */
|
|
695
|
+
readonly fieldNames: Signal<readonly string[]>;
|
|
696
|
+
/** Set by the parent wizard. */
|
|
697
|
+
readonly isActive: _angular_core.WritableSignal<boolean>;
|
|
698
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyWizardStepComponent, never>;
|
|
699
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyWizardStepComponent, "mdy-wizard-step", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
/**
|
|
703
|
+
* Multi-step wizard over a single `<mdy-form>`.
|
|
704
|
+
*
|
|
705
|
+
* Place it inside the form and declare the steps as content children; the
|
|
706
|
+
* wizard shows one step at a time (hidden, not destroyed), gates "Next" on
|
|
707
|
+
* the validity of the active step's `[fields]`, and renders a progress
|
|
708
|
+
* header plus navigation buttons.
|
|
709
|
+
*
|
|
710
|
+
* ```html
|
|
711
|
+
* <mdy-form [form]="form" (submitted)="save($event)">
|
|
712
|
+
* <mdy-form-wizard (finished)="onFinished()">
|
|
713
|
+
* <mdy-wizard-step label="Account" [fields]="[form.f.email, form.f.password]">
|
|
714
|
+
* <mdy-control-text [field]="form.f.email" label="Email" />
|
|
715
|
+
* …
|
|
716
|
+
* </mdy-wizard-step>
|
|
717
|
+
* <mdy-wizard-step label="Address" [fields]="[form.f.address.city]">…</mdy-wizard-step>
|
|
718
|
+
* </mdy-form-wizard>
|
|
719
|
+
* </mdy-form>
|
|
720
|
+
* ```
|
|
721
|
+
*
|
|
722
|
+
* `finished` fires on the last step's confirm button — typically you call
|
|
723
|
+
* `form.submit(...)` or submit the surrounding form there.
|
|
724
|
+
*/
|
|
725
|
+
declare class MdyFormWizardComponent {
|
|
726
|
+
protected readonly i18n: packages_core_dist.MdyI18nMessages;
|
|
727
|
+
private readonly adapter;
|
|
728
|
+
protected readonly steps: Signal<readonly MdyWizardStepComponent[]>;
|
|
729
|
+
private readonly _activeIndex;
|
|
730
|
+
/** Index of the currently visible step. */
|
|
731
|
+
readonly activeIndex: Signal<number>;
|
|
732
|
+
/** True while the last step is active. */
|
|
733
|
+
readonly isLast: Signal<boolean>;
|
|
734
|
+
/** 0..1 progress across the steps (for progress bars). */
|
|
735
|
+
readonly progress: Signal<number>;
|
|
736
|
+
/** Validity of the currently active step's declared fields. */
|
|
737
|
+
readonly activeStepValid: Signal<boolean>;
|
|
738
|
+
/** Fires after every successful navigation with the new index. */
|
|
739
|
+
readonly stepChange: _angular_core.OutputEmitterRef<number>;
|
|
740
|
+
/** Fires when the user confirms the last step. */
|
|
741
|
+
readonly finished: _angular_core.OutputEmitterRef<void>;
|
|
742
|
+
constructor();
|
|
743
|
+
/** Advances (or fires `finished` on the last step) if the step is valid. */
|
|
744
|
+
next(): void;
|
|
745
|
+
previous(): void;
|
|
746
|
+
/** Jumps to a step: backwards freely, forwards only across valid steps. */
|
|
747
|
+
goTo(index: number): void;
|
|
748
|
+
/** True when every step before `index` is valid. */
|
|
749
|
+
protected canJumpTo(index: number): boolean;
|
|
750
|
+
private _stepValid;
|
|
751
|
+
private _touchStep;
|
|
752
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyFormWizardComponent, never>;
|
|
753
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyFormWizardComponent, "mdy-form-wizard", never, {}, { "stepChange": "stepChange"; "finished": "finished"; }, ["steps"], ["*"], true, never>;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
/**
|
|
757
|
+
* Chips Directive to enhance select/multiselect options.
|
|
758
|
+
*
|
|
759
|
+
* Provides Material 3 styling and behavior for "Input Chips" or "Filter Chips".
|
|
760
|
+
*/
|
|
761
|
+
declare class MdyChipsDirective {
|
|
762
|
+
/** Whether the chip is currently selected/active. */
|
|
763
|
+
readonly selected: _angular_core.InputSignal<boolean>;
|
|
764
|
+
/** Whether the chip shows a removal (X) icon. */
|
|
765
|
+
readonly removable: _angular_core.InputSignal<boolean>;
|
|
766
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyChipsDirective, never>;
|
|
767
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyChipsDirective, "[mdyChips]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
/**
|
|
771
|
+
* Directive that automatically filters options of a host select/multiselect
|
|
772
|
+
* based on the value of another field in the same form.
|
|
773
|
+
*
|
|
774
|
+
* Usage:
|
|
775
|
+
* ```html
|
|
776
|
+
* <mdy-select name="country" [options]="countries" />
|
|
777
|
+
* <mdy-select name="province"
|
|
778
|
+
* [mdyDependsOn]="'country'"
|
|
779
|
+
* [mdyOptionsMap]="provincesByCountry" />
|
|
780
|
+
* ```
|
|
781
|
+
*/
|
|
782
|
+
declare class MdyConditionalOptionsDirective<TValue = unknown> {
|
|
783
|
+
/** Name of the form field that this control depends on. */
|
|
784
|
+
readonly mdyDependsOn: _angular_core.InputSignal<string>;
|
|
785
|
+
/**
|
|
786
|
+
* Map of options keyed by the dependent field's value,
|
|
787
|
+
* or a function that returns options given the value.
|
|
788
|
+
*/
|
|
789
|
+
readonly mdyOptionsMap: _angular_core.InputSignal<Record<string | number, readonly MdySelectOption<TValue>[]> | ((val: unknown) => readonly MdySelectOption<TValue>[])>;
|
|
790
|
+
private readonly adapter;
|
|
791
|
+
private readonly host;
|
|
792
|
+
/** Sentinel distinguishing "no previous run" from a legitimate undefined value. */
|
|
793
|
+
private static readonly UNSET;
|
|
794
|
+
private previousVal;
|
|
795
|
+
constructor();
|
|
796
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyConditionalOptionsDirective<any>, never>;
|
|
797
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyConditionalOptionsDirective<any>, "[mdyDependsOn]", never, { "mdyDependsOn": { "alias": "mdyDependsOn"; "required": true; "isSignal": true; }; "mdyOptionsMap": { "alias": "mdyOptionsMap"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
/**
|
|
801
|
+
* Optional wrapper component for form controls.
|
|
802
|
+
*
|
|
803
|
+
* Provides a styled container with data-field attribute.
|
|
804
|
+
* Error display is handled by each renderer component directly.
|
|
805
|
+
*
|
|
806
|
+
* Usage:
|
|
807
|
+
* ```html
|
|
808
|
+
* <mdy-control name="firstName">
|
|
809
|
+
* <mdy-text name="firstName" label="First Name" />
|
|
810
|
+
* </mdy-control>
|
|
811
|
+
* ```
|
|
812
|
+
*/
|
|
813
|
+
declare class MdyControlComponent {
|
|
814
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
815
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyControlComponent, never>;
|
|
816
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyControlComponent, "mdy-control", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
/**
|
|
820
|
+
* Marks a template or element as an input prefix (leading content).
|
|
821
|
+
*/
|
|
822
|
+
declare class MdyPrefixDirective {
|
|
823
|
+
readonly template: TemplateRef<unknown>;
|
|
824
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyPrefixDirective, never>;
|
|
825
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyPrefixDirective, "[mdyPrefix]", never, {}, {}, never, never, true, never>;
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
/**
|
|
829
|
+
* Marks a template or element as an input suffix (trailing content).
|
|
830
|
+
*/
|
|
831
|
+
declare class MdySuffixDirective {
|
|
832
|
+
readonly template: TemplateRef<unknown>;
|
|
833
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdySuffixDirective, never>;
|
|
834
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdySuffixDirective, "[mdySuffix]", never, {}, {}, never, never, true, never>;
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
/**
|
|
838
|
+
* Marks a template or element as supporting text (helper text).
|
|
839
|
+
*/
|
|
840
|
+
declare class MdySupportingTextDirective {
|
|
841
|
+
readonly template: TemplateRef<unknown>;
|
|
842
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdySupportingTextDirective, never>;
|
|
843
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdySupportingTextDirective, "[mdySupportingText]", never, {}, {}, never, never, true, never>;
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
/**
|
|
847
|
+
* Abstract base class for all renderer components.
|
|
848
|
+
*
|
|
849
|
+
* Injects the nearest MdyFormAdapter (provided by MdyFormComponent)
|
|
850
|
+
* and resolves the field state by name. Provides convenience computed
|
|
851
|
+
* signals that concrete renderers bind in their templates.
|
|
852
|
+
*/
|
|
853
|
+
declare abstract class MdyBaseControl<TValue = unknown> implements OnInit {
|
|
854
|
+
protected readonly hostElement: ElementRef<any>;
|
|
855
|
+
private readonly _destroyRef;
|
|
856
|
+
private prefixObserver?;
|
|
857
|
+
/** Field name currently claimed on the registry (tracks name changes). */
|
|
858
|
+
private _claimedName;
|
|
859
|
+
constructor();
|
|
860
|
+
/**
|
|
861
|
+
* Field name for declarative (`name`-based) mode.
|
|
862
|
+
* Optional when a typed `[field]` handle is bound instead.
|
|
863
|
+
*/
|
|
864
|
+
readonly name: InputSignal<string>;
|
|
865
|
+
/**
|
|
866
|
+
* Typed field handle from an `mdyForm()` schema — the type-safe
|
|
867
|
+
* alternative to the stringly `name` attribute:
|
|
868
|
+
* `<mdy-control-text [field]="form.f.email" />`.
|
|
869
|
+
* Accepts the nullable variant too: adapter fields start as `null`
|
|
870
|
+
* (e.g. Zod-derived handles are `T | null`) and every renderer already
|
|
871
|
+
* treats `null` as "empty". The control only reads the handle's path.
|
|
872
|
+
*/
|
|
873
|
+
readonly field: InputSignal<MdyFieldHandle<TValue> | MdyFieldHandle<TValue | null> | undefined>;
|
|
874
|
+
/** Resolved adapter path: the handle's path or the `name` input. */
|
|
875
|
+
protected readonly effectiveName: Signal<string>;
|
|
876
|
+
/** The label text for the form control. */
|
|
877
|
+
readonly label: InputSignal<string>;
|
|
878
|
+
/** Opt-in or opt-out of floating labels on a per-control basis, overriding the form-level directive. */
|
|
879
|
+
readonly floatingLabel: InputSignal<boolean | undefined>;
|
|
880
|
+
/**
|
|
881
|
+
* Optional initial value for declarative mode.
|
|
882
|
+
* Takes precedence over [formValue] set on the parent <mdy-form>.
|
|
883
|
+
*/
|
|
884
|
+
readonly initialValue: InputSignal<unknown>;
|
|
885
|
+
private readonly adapter;
|
|
886
|
+
private readonly _declarativeRegistry;
|
|
887
|
+
/** True when MdyInlineErrorsDirective is applied to this element. */
|
|
888
|
+
protected readonly inlineErrors: boolean;
|
|
889
|
+
private readonly globalFloatingLabels;
|
|
890
|
+
/** Marks the field as required for assistive technology. */
|
|
891
|
+
readonly ariaRequired: InputSignal<boolean>;
|
|
892
|
+
/** Marks the field as disabled for assistive technology (auto-derived from field state). */
|
|
893
|
+
readonly ariaDisabled: InputSignal<boolean | undefined>;
|
|
894
|
+
/** Leading content (icon/text) provided via `mdyPrefix` directive. */
|
|
895
|
+
protected readonly prefix: Signal<MdyPrefixDirective | undefined>;
|
|
896
|
+
/** Trailing content (icon/text/button) provided via `mdySuffix` directive. */
|
|
897
|
+
protected readonly suffix: Signal<MdySuffixDirective | undefined>;
|
|
898
|
+
/** Supporting text (helper text) provided via `mdySupportingText` directive. */
|
|
899
|
+
protected readonly supportingText: Signal<MdySupportingTextDirective | undefined>;
|
|
900
|
+
/**
|
|
901
|
+
* Inert state served while `name`/`[field]` are still unresolved. Input
|
|
902
|
+
* signals are not set during construction, so any computed chained to
|
|
903
|
+
* {@link fieldState} (value, errors, …) must stay readable there instead
|
|
904
|
+
* of throwing; the constructor effect reports controls that are STILL
|
|
905
|
+
* unresolved after init. Per instance — never shared.
|
|
906
|
+
*/
|
|
907
|
+
private _detachedState?;
|
|
908
|
+
private _detached;
|
|
909
|
+
/** Resolved field state — reactive to name/[field] changes. */
|
|
910
|
+
protected readonly fieldState: Signal<MdyFieldState<TValue>>;
|
|
911
|
+
readonly value: Signal<TValue>;
|
|
912
|
+
protected readonly errors: Signal<ReadonlyArray<MdyFieldError>>;
|
|
913
|
+
protected readonly touched: Signal<boolean>;
|
|
914
|
+
protected readonly dirty: Signal<boolean>;
|
|
915
|
+
protected readonly isDisabled: Signal<boolean>;
|
|
916
|
+
protected readonly isValid: Signal<boolean>;
|
|
917
|
+
protected readonly hasErrors: Signal<boolean>;
|
|
918
|
+
/** Effective aria-disabled: explicit input overrides field state. */
|
|
919
|
+
protected readonly effectiveAriaDisabled: Signal<boolean>;
|
|
920
|
+
/** Whether the field is required (deduced from validators). */
|
|
921
|
+
protected readonly isRequired: Signal<boolean>;
|
|
922
|
+
/** Error messages joined as a single string for inline display. */
|
|
923
|
+
protected readonly inlineErrorText: Signal<string>;
|
|
924
|
+
/** Whether the field should display a floating label. */
|
|
925
|
+
protected readonly isFloatingLabel: Signal<boolean>;
|
|
926
|
+
setValue(newValue: TValue): void;
|
|
927
|
+
protected markAsTouched(): void;
|
|
928
|
+
protected markAsDirty(): void;
|
|
929
|
+
/** Generate a unique ID for template label/input association. */
|
|
930
|
+
protected static nextId(): number;
|
|
931
|
+
ngOnInit(): void;
|
|
932
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyBaseControl<any>, never>;
|
|
933
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyBaseControl<any>, never, never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "initialValue": { "alias": "initialValue"; "required": false; "isSignal": true; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; "isSignal": true; }; "ariaDisabled": { "alias": "ariaDisabled"; "required": false; "isSignal": true; }; }, {}, ["prefix", "suffix", "supportingText"], never, true, never>;
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
/**
|
|
937
|
+
* Block error list displayed below a form control.
|
|
938
|
+
*
|
|
939
|
+
* Renders a `<ul>` of validation error messages. Used when
|
|
940
|
+
* `mdyInlineErrors` is **not** applied to a renderer.
|
|
941
|
+
*
|
|
942
|
+
* ```html
|
|
943
|
+
* <mdy-error-list [fieldId]="fieldId" [errors]="errors()" />
|
|
944
|
+
* ```
|
|
945
|
+
*/
|
|
946
|
+
declare class MdyErrorListComponent {
|
|
947
|
+
readonly fieldId: _angular_core.InputSignal<string>;
|
|
948
|
+
readonly errors: _angular_core.InputSignal<readonly MdyFieldError[]>;
|
|
949
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyErrorListComponent, never>;
|
|
950
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyErrorListComponent, "mdy-error-list", never, { "fieldId": { "alias": "fieldId"; "required": true; "isSignal": true; }; "errors": { "alias": "errors"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
951
|
+
}
|
|
952
|
+
|
|
953
|
+
/**
|
|
954
|
+
* Inline error icon with hover/focus tooltip.
|
|
955
|
+
*
|
|
956
|
+
* Renders a warning triangle SVG that reveals the error message on
|
|
957
|
+
* hover or keyboard focus. Used inside labels when `mdyInlineErrors`
|
|
958
|
+
* is applied to a renderer.
|
|
959
|
+
*
|
|
960
|
+
* ```html
|
|
961
|
+
* <mdy-inline-error-icon [errorText]="inlineErrorText()" />
|
|
962
|
+
* ```
|
|
963
|
+
*/
|
|
964
|
+
declare class MdyInlineErrorIconComponent {
|
|
965
|
+
readonly errorText: _angular_core.InputSignal<string>;
|
|
966
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyInlineErrorIconComponent, never>;
|
|
967
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyInlineErrorIconComponent, "mdy-inline-error-icon", never, { "errorText": { "alias": "errorText"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
/**
|
|
971
|
+
* Attribute directive that switches a renderer to inline error display.
|
|
972
|
+
*
|
|
973
|
+
* When applied to a renderer component, errors are shown in parentheses
|
|
974
|
+
* next to the label instead of as a block below the input.
|
|
975
|
+
*
|
|
976
|
+
* ```html
|
|
977
|
+
* <mdy-control-text name="email" label="Email" mdyInlineErrors />
|
|
978
|
+
* ```
|
|
979
|
+
*/
|
|
980
|
+
declare class MdyInlineErrorsDirective {
|
|
981
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyInlineErrorsDirective, never>;
|
|
982
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyInlineErrorsDirective, "[mdyInlineErrors]", never, {}, {}, never, never, true, never>;
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
/**
|
|
986
|
+
* Shared label + optional inline-error-icon block.
|
|
987
|
+
*
|
|
988
|
+
* Eliminates the duplicated `@if (label()) { <label>...</label> }` pattern
|
|
989
|
+
* that was copy-pasted across every renderer component.
|
|
990
|
+
*
|
|
991
|
+
* ```html
|
|
992
|
+
* <mdy-control-label
|
|
993
|
+
* [label]="label()"
|
|
994
|
+
* [forId]="fieldId"
|
|
995
|
+
* [showInlineError]="inlineErrors && touched() && hasErrors()"
|
|
996
|
+
* [errorText]="inlineErrorText()"
|
|
997
|
+
* />
|
|
998
|
+
* ```
|
|
999
|
+
*/
|
|
1000
|
+
declare class MdyControlLabelComponent {
|
|
1001
|
+
/** The label text. If empty, renders nothing. */
|
|
1002
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1003
|
+
/** The `id` of the input this label is associated with (maps to `[for]`). */
|
|
1004
|
+
readonly forId: _angular_core.InputSignal<string>;
|
|
1005
|
+
/**
|
|
1006
|
+
* Optional `id` rendered on the `<label>` itself, so group renderers
|
|
1007
|
+
* (radio, segmented) can reference it via `aria-labelledby` (B33).
|
|
1008
|
+
*/
|
|
1009
|
+
readonly labelId: _angular_core.InputSignal<string>;
|
|
1010
|
+
/** When `true`, the inline error icon is rendered inside the label. */
|
|
1011
|
+
readonly showInlineError: _angular_core.InputSignal<boolean>;
|
|
1012
|
+
/** Error text passed to the inline error icon tooltip. */
|
|
1013
|
+
readonly errorText: _angular_core.InputSignal<string>;
|
|
1014
|
+
/** Whether to show a required asterisk. */
|
|
1015
|
+
readonly required: _angular_core.InputSignal<boolean>;
|
|
1016
|
+
/** Whether the field is filled (has a value). */
|
|
1017
|
+
readonly filled: _angular_core.InputSignal<boolean>;
|
|
1018
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyControlLabelComponent, never>;
|
|
1019
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyControlLabelComponent, "mdy-control-label", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "forId": { "alias": "forId"; "required": false; "isSignal": true; }; "labelId": { "alias": "labelId"; "required": false; "isSignal": true; }; "showInlineError": { "alias": "showInlineError"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
/**
|
|
1023
|
+
* Structural directive to mark an `<ng-template>` as the custom option
|
|
1024
|
+
* template for `MdySelectComponent`.
|
|
1025
|
+
*
|
|
1026
|
+
* The template receives the option as implicit context.
|
|
1027
|
+
*
|
|
1028
|
+
* ```html
|
|
1029
|
+
* <mdy-control-select name="country" [options]="countries">
|
|
1030
|
+
* <ng-template mdyOption let-opt>
|
|
1031
|
+
* {{ opt.value | uppercase }} — {{ opt.label }}
|
|
1032
|
+
* </ng-template>
|
|
1033
|
+
* </mdy-control-select>
|
|
1034
|
+
* ```
|
|
1035
|
+
*/
|
|
1036
|
+
declare class MdyOptionDirective {
|
|
1037
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyOptionDirective, never>;
|
|
1038
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyOptionDirective, "[mdyOption]", never, {}, {}, never, never, true, never>;
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
/**
|
|
1042
|
+
* Directive that automatically manages the loading state of an options-based control.
|
|
1043
|
+
* It sets the loading state to true until the options signal emits a non-empty array
|
|
1044
|
+
* for the first time, or until the timeout elapses — a legitimately empty list
|
|
1045
|
+
* must not spin forever (B24).
|
|
1046
|
+
*
|
|
1047
|
+
* Usage:
|
|
1048
|
+
* <mdy-control-select [options]="myOptions()" mdyOptionsAutoLoading />
|
|
1049
|
+
*/
|
|
1050
|
+
declare class MdyOptionsAutoLoadingDirective {
|
|
1051
|
+
private readonly control;
|
|
1052
|
+
private readonly hasLoaded;
|
|
1053
|
+
private timer;
|
|
1054
|
+
/**
|
|
1055
|
+
* Milliseconds to wait for a non-empty options list before clearing the
|
|
1056
|
+
* loading state anyway (an empty result is a valid outcome). 0 disables
|
|
1057
|
+
* the timeout.
|
|
1058
|
+
*/
|
|
1059
|
+
readonly mdyOptionsAutoLoadingTimeout: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
1060
|
+
constructor();
|
|
1061
|
+
private armTimeout;
|
|
1062
|
+
private clearTimer;
|
|
1063
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyOptionsAutoLoadingDirective, never>;
|
|
1064
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyOptionsAutoLoadingDirective, "[mdyOptionsAutoLoading]", never, { "mdyOptionsAutoLoadingTimeout": { "alias": "mdyOptionsAutoLoadingTimeout"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
/**
|
|
1068
|
+
* MdyGlassDirective
|
|
1069
|
+
*
|
|
1070
|
+
* Applies a "Liquid Glass" effect to the host element using backdrop-filters,
|
|
1071
|
+
* semi-transparent backgrounds, and specular highlights.
|
|
1072
|
+
*
|
|
1073
|
+
* The visual appearance is driven by CSS variables (--mdy-glass-*) which are
|
|
1074
|
+
* defined in the theme layer (e.g., modyra-ios.css).
|
|
1075
|
+
*
|
|
1076
|
+
* Usage:
|
|
1077
|
+
* <div mdyGlass [intensity]="'high'">...</div>
|
|
1078
|
+
*/
|
|
1079
|
+
declare class MdyGlassDirective {
|
|
1080
|
+
/** Optional override for the blur amount (e.g., '10px' or 'blur(10px)') */
|
|
1081
|
+
readonly blur: _angular_core.InputSignal<string | undefined>;
|
|
1082
|
+
/** Intensity of the glass effect. Themes can use this to adjust blur/opacity. */
|
|
1083
|
+
readonly intensity: _angular_core.InputSignal<"low" | "medium" | "high">;
|
|
1084
|
+
/** Optional background color override to tint the glass. */
|
|
1085
|
+
readonly glassColor: _angular_core.InputSignal<string | undefined>;
|
|
1086
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyGlassDirective, never>;
|
|
1087
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyGlassDirective, "[mdyGlass]", never, { "blur": { "alias": "blur"; "required": false; "isSignal": true; }; "intensity": { "alias": "intensity"; "required": false; "isSignal": true; }; "glassColor": { "alias": "glassColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
/** Async options loader: receives the current search query. */
|
|
1091
|
+
type MdyOptionsLoader<TValue = unknown> = (query: string) => Promise<ReadonlyArray<MdySelectOption<TValue>>>;
|
|
1092
|
+
/**
|
|
1093
|
+
* Server-side option loading for select/multiselect.
|
|
1094
|
+
*
|
|
1095
|
+
* Runs the loader on every (debounced) search-query change — including the
|
|
1096
|
+
* initial empty query — with the control's loading state driven for the
|
|
1097
|
+
* whole debounce+fetch window and last-wins semantics on stale responses.
|
|
1098
|
+
*
|
|
1099
|
+
* ```html
|
|
1100
|
+
* <mdy-control-select
|
|
1101
|
+
* name="city"
|
|
1102
|
+
* searchable
|
|
1103
|
+
* [mdyLoadOptions]="searchCities"
|
|
1104
|
+
* [mdyLoadOptionsDebounce]="300"
|
|
1105
|
+
* />
|
|
1106
|
+
* ```
|
|
1107
|
+
* ```ts
|
|
1108
|
+
* searchCities: MdyOptionsLoader<string> = async (q) =>
|
|
1109
|
+
* (await api.cities(q)).map(c => ({ value: c.id, label: c.name }));
|
|
1110
|
+
* ```
|
|
1111
|
+
*/
|
|
1112
|
+
declare class MdyLoadOptionsDirective {
|
|
1113
|
+
private readonly control;
|
|
1114
|
+
readonly mdyLoadOptions: _angular_core.InputSignal<MdyOptionsLoader<unknown>>;
|
|
1115
|
+
/** Milliseconds of typing inactivity before the loader runs. Default 300. */
|
|
1116
|
+
readonly mdyLoadOptionsDebounce: _angular_core.InputSignal<number>;
|
|
1117
|
+
private _runId;
|
|
1118
|
+
private _timer;
|
|
1119
|
+
/**
|
|
1120
|
+
* Reload only when the query changes: an inline-lambda loader gets a new
|
|
1121
|
+
* identity on every change detection and would otherwise refetch in a
|
|
1122
|
+
* loop (R22). A loader identity change alone does not retrigger.
|
|
1123
|
+
*/
|
|
1124
|
+
private _lastQuery;
|
|
1125
|
+
constructor();
|
|
1126
|
+
private _schedule;
|
|
1127
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyLoadOptionsDirective, never>;
|
|
1128
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyLoadOptionsDirective, "[mdyLoadOptions]", never, { "mdyLoadOptions": { "alias": "mdyLoadOptions"; "required": true; "isSignal": true; }; "mdyLoadOptionsDebounce": { "alias": "mdyLoadOptionsDebounce"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
/**
|
|
1132
|
+
* A simple, zero-dependency live announcer for sending polite
|
|
1133
|
+
* messages to screen readers when UI state changes (e.g. popups open/close).
|
|
1134
|
+
*/
|
|
1135
|
+
declare class MdyA11yAnnouncer implements OnDestroy {
|
|
1136
|
+
private ariaLiveElement;
|
|
1137
|
+
private pendingTimer;
|
|
1138
|
+
constructor();
|
|
1139
|
+
/**
|
|
1140
|
+
* Announces a message to screen readers.
|
|
1141
|
+
*/
|
|
1142
|
+
announce(message: string): void;
|
|
1143
|
+
ngOnDestroy(): void;
|
|
1144
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyA11yAnnouncer, never>;
|
|
1145
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<MdyA11yAnnouncer>;
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
/**
|
|
1149
|
+
* Abstract base class for components that have an overlay popup (select, pickers).
|
|
1150
|
+
*
|
|
1151
|
+
* Handles:
|
|
1152
|
+
* - Open/close state management via `open` signal.
|
|
1153
|
+
* - Dynamic positioning (above/below/overlay) via `computeOverlayPosition`.
|
|
1154
|
+
* - Outside click detection to close the popup.
|
|
1155
|
+
* - `wrapper` viewChild for position calculations.
|
|
1156
|
+
*/
|
|
1157
|
+
declare abstract class MdyOverlayControl<TValue> extends MdyBaseControl<TValue> {
|
|
1158
|
+
/** Signal tracking if the overlay is currently open. */
|
|
1159
|
+
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
1160
|
+
/** Computed position of the overlay (below, above, or fixed overlay for mobile). */
|
|
1161
|
+
protected readonly position: _angular_core.WritableSignal<OverlayPosition>;
|
|
1162
|
+
/** Computed alignment of the overlay (left, right). */
|
|
1163
|
+
protected readonly alignment: _angular_core.WritableSignal<OverlayAlignment>;
|
|
1164
|
+
/** Whether the overlay should match the anchor width or expand based on content. */
|
|
1165
|
+
readonly widthMode: _angular_core.InputSignal<"match-anchor" | "auto-content">;
|
|
1166
|
+
/** Minimum horizontal space required for the overlay. Default 250px. */
|
|
1167
|
+
readonly minWidth: _angular_core.InputSignal<number>;
|
|
1168
|
+
/** Viewport coordinates for fixed positioning. */
|
|
1169
|
+
protected readonly coords: _angular_core.WritableSignal<{
|
|
1170
|
+
readonly top?: number | undefined;
|
|
1171
|
+
readonly bottom?: number | undefined;
|
|
1172
|
+
readonly left?: number | undefined;
|
|
1173
|
+
readonly right?: number | undefined;
|
|
1174
|
+
readonly width?: number | undefined;
|
|
1175
|
+
}>;
|
|
1176
|
+
/**
|
|
1177
|
+
* Max-height of the overlay panel in px, frozen at open time.
|
|
1178
|
+
* Set once in openOverlay(), never updated during scroll.
|
|
1179
|
+
* Exposed as --mdy-overlay-max-height on the host.
|
|
1180
|
+
*/
|
|
1181
|
+
protected readonly maxHeight: _angular_core.WritableSignal<number>;
|
|
1182
|
+
/** The wrapper element used to anchor the overlay and detect outside clicks. */
|
|
1183
|
+
protected readonly wrapperRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
|
|
1184
|
+
/** Reference to the host element for position calculation. */
|
|
1185
|
+
protected readonly hostRef: ElementRef<any>;
|
|
1186
|
+
protected readonly announcer: MdyA11yAnnouncer;
|
|
1187
|
+
private readonly overlayI18n;
|
|
1188
|
+
constructor();
|
|
1189
|
+
/**
|
|
1190
|
+
* Override to provide a custom anchor for overlay positioning.
|
|
1191
|
+
*
|
|
1192
|
+
* - Return an `HTMLElement` for live rect computation + scroll-aware space.
|
|
1193
|
+
* - Return a `DOMRect` for a virtual/custom anchor area (viewport-only space).
|
|
1194
|
+
* - Return `null` (default) to use the host element.
|
|
1195
|
+
*
|
|
1196
|
+
* @example
|
|
1197
|
+
* // Anchor to a specific inner element instead of the whole host:
|
|
1198
|
+
* protected override overlayAnchor(): OverlayAnchor | null {
|
|
1199
|
+
* return this.inputRef()?.nativeElement ?? null;
|
|
1200
|
+
* }
|
|
1201
|
+
*
|
|
1202
|
+
* @example
|
|
1203
|
+
* // Anchor to a custom area:
|
|
1204
|
+
* protected override overlayAnchor(): OverlayAnchor | null {
|
|
1205
|
+
* return new DOMRect(x, y, width, height);
|
|
1206
|
+
* }
|
|
1207
|
+
*/
|
|
1208
|
+
protected overlayAnchor(): OverlayAnchor | null;
|
|
1209
|
+
private get anchor();
|
|
1210
|
+
/**
|
|
1211
|
+
* Toggles the overlay state.
|
|
1212
|
+
* Pass the triggering UIEvent (mouse, touch, keyboard) so the popup can
|
|
1213
|
+
* anchor to the correct corner and resolve the scroll ancestor via event.target.
|
|
1214
|
+
*/
|
|
1215
|
+
protected toggleOverlay(event?: Event): void;
|
|
1216
|
+
/** Minimum space required below or above to anchor the overlay. Default 128px. */
|
|
1217
|
+
protected readonly minSpace: number;
|
|
1218
|
+
/** Preferred vertical position. Defaults to 'below'. */
|
|
1219
|
+
protected readonly preferredPosition: "above" | "below";
|
|
1220
|
+
protected openOverlay(event?: Event): void;
|
|
1221
|
+
private scrollFrameId;
|
|
1222
|
+
private resizeFrameId;
|
|
1223
|
+
protected readonly handleScroll: () => void;
|
|
1224
|
+
protected readonly handleResize: () => void;
|
|
1225
|
+
/** Computes max-height for the overlay given a resolved position and coords. */
|
|
1226
|
+
private computeMaxHeight;
|
|
1227
|
+
/** Recalculates the position of the currently open overlay. */
|
|
1228
|
+
protected updatePosition(): void;
|
|
1229
|
+
/** Closes the overlay. */
|
|
1230
|
+
protected closeOverlay(): void;
|
|
1231
|
+
/** Removes all document/window listeners registered while open. */
|
|
1232
|
+
private teardownGlobalListeners;
|
|
1233
|
+
/**
|
|
1234
|
+
* Hook called just before the overlay opens.
|
|
1235
|
+
* Useful for syncing draft values or search queries.
|
|
1236
|
+
*/
|
|
1237
|
+
protected onBeforeOpen(): void;
|
|
1238
|
+
/** Bound handler registered on document only while the overlay is open (B31). */
|
|
1239
|
+
private readonly handleDocumentClick;
|
|
1240
|
+
/** Escape closes the open overlay regardless of where focus is (R19). */
|
|
1241
|
+
private readonly handleDocumentKeydown;
|
|
1242
|
+
/**
|
|
1243
|
+
* Handler for document clicks while the overlay is open.
|
|
1244
|
+
* Closes the overlay if the click is outside the wrapper element.
|
|
1245
|
+
*/
|
|
1246
|
+
protected onDocumentClick(event: Event): void;
|
|
1247
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyOverlayControl<any>, never>;
|
|
1248
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyOverlayControl<any>, never, never, { "widthMode": { "alias": "widthMode"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1251
|
+
/**
|
|
1252
|
+
* Abstract base class for controls that have both an overlay and a list of options.
|
|
1253
|
+
*
|
|
1254
|
+
* Centralizes:
|
|
1255
|
+
* - `options` input
|
|
1256
|
+
* - `searchable` input
|
|
1257
|
+
* - `overrideOptions` signal (for dynamic/conditional options)
|
|
1258
|
+
* - `searchQuery` signal
|
|
1259
|
+
* - `effectiveOptions` computed (merges input + override)
|
|
1260
|
+
* - `resetSelection` logic
|
|
1261
|
+
*/
|
|
1262
|
+
declare abstract class MdyOptionsOverlayControl<TValue, TOptionValue = unknown> extends MdyOverlayControl<TValue> implements MdyOptionsControl<TOptionValue> {
|
|
1263
|
+
/** The list of options available for selection. */
|
|
1264
|
+
readonly options: _angular_core.InputSignal<readonly MdySelectOption<TOptionValue>[]>;
|
|
1265
|
+
/** Whether the options are currently being loaded asynchronously. */
|
|
1266
|
+
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1267
|
+
/** Customizable loading text. Defaults to i18n messages. */
|
|
1268
|
+
readonly loadingText: _angular_core.InputSignal<string | null>;
|
|
1269
|
+
/** Whether a search input should be displayed in the dropdown/overlay. */
|
|
1270
|
+
readonly searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1271
|
+
/** Internal options override (used by conditional/filter directives). */
|
|
1272
|
+
readonly overrideOptions: _angular_core.WritableSignal<readonly MdySelectOption<TOptionValue>[] | null>;
|
|
1273
|
+
/** Internal loading override (used by async directives). */
|
|
1274
|
+
readonly loadingOverride: _angular_core.WritableSignal<boolean | null>;
|
|
1275
|
+
/** Current search query string. */
|
|
1276
|
+
readonly searchQuery: _angular_core.WritableSignal<string>;
|
|
1277
|
+
/** Emits every time the search input changes — consumable by host directives. */
|
|
1278
|
+
readonly searchChanged: _angular_core.OutputEmitterRef<string>;
|
|
1279
|
+
/**
|
|
1280
|
+
* Effective options used for rendering: uses `overrideOptions` if provided,
|
|
1281
|
+
* otherwise falls back to the `options` input.
|
|
1282
|
+
*/
|
|
1283
|
+
protected readonly effectiveOptions: _angular_core.Signal<readonly MdySelectOption<TOptionValue>[]>;
|
|
1284
|
+
/**
|
|
1285
|
+
* Effective loading state: uses `loadingOverride` if provided,
|
|
1286
|
+
* otherwise falls back to the `loading` input.
|
|
1287
|
+
*/
|
|
1288
|
+
readonly effectiveLoading: _angular_core.Signal<boolean>;
|
|
1289
|
+
/** Reset the control value to its empty state. */
|
|
1290
|
+
abstract resetSelection(): void;
|
|
1291
|
+
closeOverlay(): void;
|
|
1292
|
+
protected onSearchInput(event: Event): void;
|
|
1293
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyOptionsOverlayControl<any, any>, never>;
|
|
1294
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyOptionsOverlayControl<any, any>, never, never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; }, { "searchChanged": "searchChanged"; }, never, never, true, never>;
|
|
1295
|
+
}
|
|
1296
|
+
|
|
1297
|
+
/**
|
|
1298
|
+
* Opt-in directive to enable Material-style floating labels for all descendant
|
|
1299
|
+
* modyra controls.
|
|
1300
|
+
*
|
|
1301
|
+
* Usage:
|
|
1302
|
+
* ```html
|
|
1303
|
+
* <mdy-form [mdyFloatingLabels]="true" [mdyFloatingLabelsDensity]="-3">
|
|
1304
|
+
* ...
|
|
1305
|
+
* </mdy-form>
|
|
1306
|
+
* ```
|
|
1307
|
+
*/
|
|
1308
|
+
declare class MdyFloatingLabelsDirective {
|
|
1309
|
+
/** Enables or disables floating labels for descendants. Defaults to the value of `MDY_FLOATING_LABELS_DEFAULT`. */
|
|
1310
|
+
readonly mdyFloatingLabels: _angular_core.InputSignal<boolean>;
|
|
1311
|
+
/**
|
|
1312
|
+
* Density scaling for the floating labels, replicating M3 density behavior.
|
|
1313
|
+
* 0 is standard M3 (56px), negative values make it more compact.
|
|
1314
|
+
* Defaults to the value of `MDY_FLOATING_LABELS_DENSITY_DEFAULT`.
|
|
1315
|
+
*/
|
|
1316
|
+
readonly mdyFloatingLabelsDensity: _angular_core.InputSignal<number>;
|
|
1317
|
+
constructor();
|
|
1318
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyFloatingLabelsDirective, never>;
|
|
1319
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyFloatingLabelsDirective, "mdy-form[mdyFloatingLabels], form[mdyFloatingLabels]", never, { "mdyFloatingLabels": { "alias": "mdyFloatingLabels"; "required": false; "isSignal": true; }; "mdyFloatingLabelsDensity": { "alias": "mdyFloatingLabelsDensity"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1320
|
+
}
|
|
1321
|
+
|
|
1322
|
+
/**
|
|
1323
|
+
* Checkbox renderer component.
|
|
1324
|
+
*
|
|
1325
|
+
* ```html
|
|
1326
|
+
* <mdy-control-checkbox name="acceptTerms" label="I accept the terms" />
|
|
1327
|
+
* ```
|
|
1328
|
+
*/
|
|
1329
|
+
declare class MdyCheckboxComponent extends MdyBaseControl<boolean> {
|
|
1330
|
+
protected readonly fieldId: string;
|
|
1331
|
+
protected onChange(event: Event): void;
|
|
1332
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyCheckboxComponent, never>;
|
|
1333
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyCheckboxComponent, "mdy-control-checkbox", never, {}, {}, never, never, true, never>;
|
|
1334
|
+
}
|
|
1335
|
+
|
|
1336
|
+
/**
|
|
1337
|
+
* Color picker renderer component.
|
|
1338
|
+
*
|
|
1339
|
+
* ```html
|
|
1340
|
+
* <mdy-control-colors name="primaryColor" label="Brand Color" />
|
|
1341
|
+
* ```
|
|
1342
|
+
*/
|
|
1343
|
+
declare class MdyColorsComponent extends MdyOverlayControl<string> {
|
|
1344
|
+
protected readonly i18n: packages_core_dist.MdyI18nMessages;
|
|
1345
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1346
|
+
readonly presets: _angular_core.InputSignal<readonly string[]>;
|
|
1347
|
+
protected readonly fieldId: string;
|
|
1348
|
+
/** Separate id for the HEX text input — the accessible label target. */
|
|
1349
|
+
protected readonly hexInputId: string;
|
|
1350
|
+
protected onBeforeOpen(): void;
|
|
1351
|
+
protected onBlur(event: FocusEvent): void;
|
|
1352
|
+
protected onInput(event: Event): void;
|
|
1353
|
+
protected onHexBlur(event: FocusEvent): void;
|
|
1354
|
+
protected onTextInput(event: Event): void;
|
|
1355
|
+
protected selectColor(color: string): void;
|
|
1356
|
+
/** Case-insensitive hex comparison: #FFF and #fff are the same color (B26). */
|
|
1357
|
+
protected isActiveColor(color: string): boolean;
|
|
1358
|
+
private updateValue;
|
|
1359
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyColorsComponent, never>;
|
|
1360
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyColorsComponent, "mdy-control-colors", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
/**
|
|
1364
|
+
* A single day cell in the calendar grid.
|
|
1365
|
+
*
|
|
1366
|
+
* Handles rendering, selection highlight, today indicator,
|
|
1367
|
+
* disabled state, and click/keyboard interaction.
|
|
1368
|
+
*
|
|
1369
|
+
* ```html
|
|
1370
|
+
* <mdy-calendar-cell
|
|
1371
|
+
* [cell]="cell"
|
|
1372
|
+
* [isSelected]="true"
|
|
1373
|
+
* [isToday]="false"
|
|
1374
|
+
* [isFocused]="false"
|
|
1375
|
+
* [isDisabled]="false"
|
|
1376
|
+
* (picked)="onPick($event)"
|
|
1377
|
+
* />
|
|
1378
|
+
* ```
|
|
1379
|
+
*/
|
|
1380
|
+
declare class MdyCalendarCellComponent {
|
|
1381
|
+
readonly cell: _angular_core.InputSignal<CalendarCell>;
|
|
1382
|
+
readonly isSelected: _angular_core.InputSignal<boolean>;
|
|
1383
|
+
readonly isToday: _angular_core.InputSignal<boolean>;
|
|
1384
|
+
readonly isFocused: _angular_core.InputSignal<boolean>;
|
|
1385
|
+
readonly isDisabled: _angular_core.InputSignal<boolean>;
|
|
1386
|
+
/** Emits the picked date when the cell is activated. */
|
|
1387
|
+
readonly picked: _angular_core.OutputEmitterRef<CalendarDate>;
|
|
1388
|
+
private readonly elementRef;
|
|
1389
|
+
/** Focuses the host element of this cell. */
|
|
1390
|
+
focus(): void;
|
|
1391
|
+
protected onSelect(): void;
|
|
1392
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyCalendarCellComponent, never>;
|
|
1393
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyCalendarCellComponent, "mdy-calendar-cell", never, { "cell": { "alias": "cell"; "required": true; "isSignal": true; }; "isSelected": { "alias": "isSelected"; "required": false; "isSignal": true; }; "isToday": { "alias": "isToday"; "required": false; "isSignal": true; }; "isFocused": { "alias": "isFocused"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; }, { "picked": "picked"; }, never, never, true, never>;
|
|
1394
|
+
}
|
|
1395
|
+
|
|
1396
|
+
/**
|
|
1397
|
+
* Month grid component — renders the 7-column × 6-row calendar body.
|
|
1398
|
+
*
|
|
1399
|
+
* Receives the currently displayed year/month, selected date, focused date,
|
|
1400
|
+
* and min/max bounds. Emits when a date is picked or focus changes via
|
|
1401
|
+
* keyboard navigation.
|
|
1402
|
+
*
|
|
1403
|
+
* ```html
|
|
1404
|
+
* <mdy-calendar-grid
|
|
1405
|
+
* [year]="2026"
|
|
1406
|
+
* [month]="3"
|
|
1407
|
+
* [selectedDate]="selected"
|
|
1408
|
+
* [focusedDate]="focused"
|
|
1409
|
+
* [minDate]="min"
|
|
1410
|
+
* [maxDate]="max"
|
|
1411
|
+
* (datePicked)="onPick($event)"
|
|
1412
|
+
* />
|
|
1413
|
+
* ```
|
|
1414
|
+
*/
|
|
1415
|
+
declare class MdyCalendarGridComponent {
|
|
1416
|
+
readonly year: _angular_core.InputSignal<number>;
|
|
1417
|
+
readonly month: _angular_core.InputSignal<number>;
|
|
1418
|
+
readonly selectedDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1419
|
+
readonly focusedDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1420
|
+
readonly minDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1421
|
+
readonly maxDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1422
|
+
/** Emits the date the user picked (clicked or pressed Enter/Space). */
|
|
1423
|
+
readonly datePicked: _angular_core.OutputEmitterRef<CalendarDate>;
|
|
1424
|
+
private readonly cellsRef;
|
|
1425
|
+
/** Focuses the cell corresponding to the given date. */
|
|
1426
|
+
focusDate(date: CalendarDate): void;
|
|
1427
|
+
private readonly locale;
|
|
1428
|
+
private readonly todayDate;
|
|
1429
|
+
/** 42 cells for the month grid. */
|
|
1430
|
+
private readonly cells;
|
|
1431
|
+
/** Cells split into 6 rows of 7. */
|
|
1432
|
+
protected readonly rows: _angular_core.Signal<readonly (readonly CalendarCell[])[]>;
|
|
1433
|
+
/** Day-of-week header names ordered by firstDayOfWeek. */
|
|
1434
|
+
protected readonly orderedDayNames: _angular_core.Signal<readonly string[]>;
|
|
1435
|
+
/** Short day names for aria-label on weekday headers. */
|
|
1436
|
+
protected readonly orderedDayNamesShort: _angular_core.Signal<readonly string[]>;
|
|
1437
|
+
protected isCellSelected(cell: CalendarCell): boolean;
|
|
1438
|
+
protected isCellToday(cell: CalendarCell): boolean;
|
|
1439
|
+
protected isCellFocused(cell: CalendarCell): boolean;
|
|
1440
|
+
protected isCellDisabled(cell: CalendarCell): boolean;
|
|
1441
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyCalendarGridComponent, never>;
|
|
1442
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyCalendarGridComponent, "mdy-calendar-grid", never, { "year": { "alias": "year"; "required": true; "isSignal": true; }; "month": { "alias": "month"; "required": true; "isSignal": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "focusedDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, { "datePicked": "datePicked"; }, never, never, true, never>;
|
|
1443
|
+
}
|
|
1444
|
+
|
|
1445
|
+
/**
|
|
1446
|
+
* Calendar header — displays the current month/year label and
|
|
1447
|
+
* navigation arrows (prev/next month).
|
|
1448
|
+
*
|
|
1449
|
+
* ```html
|
|
1450
|
+
* <mdy-calendar-header
|
|
1451
|
+
* [year]="2026"
|
|
1452
|
+
* [month]="3"
|
|
1453
|
+
* (previousMonth)="goPrev()"
|
|
1454
|
+
* (nextMonth)="goNext()"
|
|
1455
|
+
* />
|
|
1456
|
+
* ```
|
|
1457
|
+
*/
|
|
1458
|
+
declare class MdyCalendarHeaderComponent {
|
|
1459
|
+
readonly year: _angular_core.InputSignal<number>;
|
|
1460
|
+
/** 1-based month (1 = January). */
|
|
1461
|
+
readonly month: _angular_core.InputSignal<number>;
|
|
1462
|
+
readonly previousMonth: _angular_core.OutputEmitterRef<void>;
|
|
1463
|
+
readonly nextMonth: _angular_core.OutputEmitterRef<void>;
|
|
1464
|
+
readonly toggleView: _angular_core.OutputEmitterRef<void>;
|
|
1465
|
+
private readonly locale;
|
|
1466
|
+
protected readonly i18n: packages_core_dist.MdyI18nMessages;
|
|
1467
|
+
/** Localized month name (e.g. "March", "Marzo"). */
|
|
1468
|
+
protected readonly monthLabel: _angular_core.Signal<string>;
|
|
1469
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyCalendarHeaderComponent, never>;
|
|
1470
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyCalendarHeaderComponent, "mdy-calendar-header", never, { "year": { "alias": "year"; "required": true; "isSignal": true; }; "month": { "alias": "month"; "required": true; "isSignal": true; }; }, { "previousMonth": "previousMonth"; "nextMonth": "nextMonth"; "toggleView": "toggleView"; }, never, never, true, never>;
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
type CalendarView$1 = "calendar" | "month" | "year";
|
|
1474
|
+
/**
|
|
1475
|
+
* Calendar container — orchestrates header navigation, grid rendering,
|
|
1476
|
+
* keyboard navigation, and date selection.
|
|
1477
|
+
*
|
|
1478
|
+
* This component owns the "current view" state (year/month) and the
|
|
1479
|
+
* focused-date for roving keyboard navigation. It does **not** manage
|
|
1480
|
+
* the form field value — that responsibility stays in the renderer.
|
|
1481
|
+
*
|
|
1482
|
+
* ```html
|
|
1483
|
+
* <mdy-calendar
|
|
1484
|
+
* [selectedDate]="selected"
|
|
1485
|
+
* [minDate]="min"
|
|
1486
|
+
* [maxDate]="max"
|
|
1487
|
+
* (datePicked)="onPick($event)"
|
|
1488
|
+
* />
|
|
1489
|
+
* ```
|
|
1490
|
+
*/
|
|
1491
|
+
declare class MdyCalendarComponent {
|
|
1492
|
+
readonly selectedDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1493
|
+
readonly minDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1494
|
+
readonly maxDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1495
|
+
protected readonly view: _angular_core.WritableSignal<CalendarView$1>;
|
|
1496
|
+
private readonly grid;
|
|
1497
|
+
private readonly injector;
|
|
1498
|
+
constructor();
|
|
1499
|
+
/** Manually focuses the currently focused date cell. */
|
|
1500
|
+
focusFocusedDate(): void;
|
|
1501
|
+
/** Accessible label for the dialog. Falls back to the i18n default. */
|
|
1502
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1503
|
+
private readonly i18n;
|
|
1504
|
+
protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
|
|
1505
|
+
/** Emits when the user confirms a date. */
|
|
1506
|
+
readonly datePicked: _angular_core.OutputEmitterRef<CalendarDate>;
|
|
1507
|
+
/** Emits on Escape — parent must close the popup. */
|
|
1508
|
+
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
1509
|
+
/** Year currently displayed. */
|
|
1510
|
+
protected readonly viewYear: _angular_core.WritableSignal<number>;
|
|
1511
|
+
/** Month (1-based) currently displayed. */
|
|
1512
|
+
protected readonly viewMonth: _angular_core.WritableSignal<number>;
|
|
1513
|
+
/** Date that has keyboard focus (roving tabindex). */
|
|
1514
|
+
protected readonly focusedDate: _angular_core.WritableSignal<CalendarDate>;
|
|
1515
|
+
/**
|
|
1516
|
+
* Sync the view to the selected date when the popup opens.
|
|
1517
|
+
* Called by the parent renderer after opening.
|
|
1518
|
+
* Resets view to 'calendar'.
|
|
1519
|
+
*/
|
|
1520
|
+
syncView(date: CalendarDate | null): void;
|
|
1521
|
+
protected onToggleView(): void;
|
|
1522
|
+
protected onMonthSelected(month: number): void;
|
|
1523
|
+
protected onYearSelected(year: number): void;
|
|
1524
|
+
protected goToPreviousMonth(): void;
|
|
1525
|
+
protected goToNextMonth(): void;
|
|
1526
|
+
private navigateMonth;
|
|
1527
|
+
protected onDatePicked(date: CalendarDate): void;
|
|
1528
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1529
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyCalendarComponent, never>;
|
|
1530
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyCalendarComponent, "mdy-calendar", never, { "selectedDate": { "alias": "selectedDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "datePicked": "datePicked"; "closed": "closed"; }, never, never, true, never>;
|
|
1531
|
+
}
|
|
1532
|
+
|
|
1533
|
+
/**
|
|
1534
|
+
* Date picker renderer — M3-style docked calendar picker.
|
|
1535
|
+
* Integrated with MdyControlLabelComponent.
|
|
1536
|
+
*/
|
|
1537
|
+
declare class MdyDatePickerComponent extends MdyOverlayControl<string | null> {
|
|
1538
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1539
|
+
readonly minDate: _angular_core.InputSignal<string | null>;
|
|
1540
|
+
readonly maxDate: _angular_core.InputSignal<string | null>;
|
|
1541
|
+
readonly variant: _angular_core.InputSignal<"docked" | "modal">;
|
|
1542
|
+
/**
|
|
1543
|
+
* How the selected date is rendered in the input:
|
|
1544
|
+
* `"localized"` uses `Intl` with the active MDY_DATE_LOCALE,
|
|
1545
|
+
* `"iso"` shows the raw `YYYY-MM-DD` value. Typing accepts ISO in both modes.
|
|
1546
|
+
*/
|
|
1547
|
+
readonly displayFormat: _angular_core.InputSignal<"iso" | "localized">;
|
|
1548
|
+
protected readonly minSpace = 450;
|
|
1549
|
+
protected readonly fieldId: string;
|
|
1550
|
+
protected readonly i18n: packages_core_dist.MdyI18nMessages;
|
|
1551
|
+
private readonly calendarRef;
|
|
1552
|
+
private readonly locale;
|
|
1553
|
+
private readonly injector;
|
|
1554
|
+
protected readonly tempSelectedDate: _angular_core.WritableSignal<CalendarDate | null>;
|
|
1555
|
+
protected readonly displayValue: _angular_core.Signal<string>;
|
|
1556
|
+
protected readonly modalDisplayValue: _angular_core.Signal<string>;
|
|
1557
|
+
protected readonly parsedSelectedDate: _angular_core.Signal<CalendarDate | null>;
|
|
1558
|
+
protected readonly parsedMinDate: _angular_core.Signal<CalendarDate | null>;
|
|
1559
|
+
protected readonly parsedMaxDate: _angular_core.Signal<CalendarDate | null>;
|
|
1560
|
+
protected onBeforeOpen(): void;
|
|
1561
|
+
protected applySelection(): void;
|
|
1562
|
+
protected onDatePicked(date: CalendarDate, forceApply?: boolean): void;
|
|
1563
|
+
protected onInputChange(event: Event): void;
|
|
1564
|
+
protected onInputBlur(event: FocusEvent): void;
|
|
1565
|
+
/** Manual input honours [minDate]/[maxDate] like the calendar does. */
|
|
1566
|
+
private isWithinRange;
|
|
1567
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyDatePickerComponent, never>;
|
|
1568
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyDatePickerComponent, "mdy-control-datepicker", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
/**
|
|
1572
|
+
* Date range picker renderer — compact two-input calendar picker
|
|
1573
|
+
* for selecting a start and end date. Integrated with MdyControlLabelComponent.
|
|
1574
|
+
*/
|
|
1575
|
+
declare class MdyDateRangePickerComponent extends MdyOverlayControl<MdyDateRange | null> {
|
|
1576
|
+
readonly startPlaceholder: _angular_core.InputSignal<string>;
|
|
1577
|
+
readonly endPlaceholder: _angular_core.InputSignal<string>;
|
|
1578
|
+
readonly minDate: _angular_core.InputSignal<string | null>;
|
|
1579
|
+
readonly maxDate: _angular_core.InputSignal<string | null>;
|
|
1580
|
+
readonly variant: _angular_core.InputSignal<"docked" | "modal">;
|
|
1581
|
+
readonly dateFilter: _angular_core.InputSignal<((date: string) => boolean) | null>;
|
|
1582
|
+
protected readonly minSpace = 450;
|
|
1583
|
+
protected readonly fieldId: string;
|
|
1584
|
+
/** Which input was last focused — drives calendar sync. */
|
|
1585
|
+
protected readonly lastFocused: _angular_core.WritableSignal<"end" | "start">;
|
|
1586
|
+
private readonly calendarRef;
|
|
1587
|
+
private readonly locale;
|
|
1588
|
+
private readonly injector;
|
|
1589
|
+
protected readonly i18n: packages_core_dist.MdyI18nMessages;
|
|
1590
|
+
protected readonly tempStart: _angular_core.WritableSignal<CalendarDate | null>;
|
|
1591
|
+
protected readonly tempEnd: _angular_core.WritableSignal<CalendarDate | null>;
|
|
1592
|
+
protected readonly displayStart: _angular_core.Signal<string>;
|
|
1593
|
+
protected readonly displayEnd: _angular_core.Signal<string>;
|
|
1594
|
+
protected readonly modalDisplayValue: _angular_core.Signal<string>;
|
|
1595
|
+
protected readonly parsedStart: _angular_core.Signal<CalendarDate | null>;
|
|
1596
|
+
protected readonly parsedEnd: _angular_core.Signal<CalendarDate | null>;
|
|
1597
|
+
protected readonly parsedMinDate: _angular_core.Signal<CalendarDate | null>;
|
|
1598
|
+
protected readonly parsedMaxDate: _angular_core.Signal<CalendarDate | null>;
|
|
1599
|
+
/** Sync calendar view to current value after DOM renders. */
|
|
1600
|
+
protected onBeforeOpen(): void;
|
|
1601
|
+
protected applySelection(): void;
|
|
1602
|
+
protected onRangePicked(range: {
|
|
1603
|
+
readonly start: CalendarDate;
|
|
1604
|
+
readonly end: CalendarDate;
|
|
1605
|
+
}, forceApply?: boolean): void;
|
|
1606
|
+
protected onStartInput(event: Event): void;
|
|
1607
|
+
protected onStartBlur(event: FocusEvent): void;
|
|
1608
|
+
protected onEndInput(event: Event): void;
|
|
1609
|
+
protected onEndBlur(event: FocusEvent): void;
|
|
1610
|
+
/**
|
|
1611
|
+
* Commit the range, enforcing end >= start, the optional [dateFilter],
|
|
1612
|
+
* and the [minDate]/[maxDate] bounds — manual typing must not accept a
|
|
1613
|
+
* date the calendar would forbid (B17).
|
|
1614
|
+
*/
|
|
1615
|
+
private commitRange;
|
|
1616
|
+
/** True when the ISO date lies inside [minDate, maxDate]. */
|
|
1617
|
+
private isWithinBounds;
|
|
1618
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyDateRangePickerComponent, never>;
|
|
1619
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyDateRangePickerComponent, "mdy-control-daterange", never, { "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
/**
|
|
1623
|
+
* Range-aware month grid — renders a 7-column × 6-row calendar body
|
|
1624
|
+
* with visual highlighting for the selected date range.
|
|
1625
|
+
*
|
|
1626
|
+
* Each cell can be: range-start, range-end, in-range, or none.
|
|
1627
|
+
* A hover date is used to show a preview range while the user
|
|
1628
|
+
* picks the second endpoint.
|
|
1629
|
+
*
|
|
1630
|
+
* ```html
|
|
1631
|
+
* <mdy-range-calendar-grid
|
|
1632
|
+
* [year]="2026"
|
|
1633
|
+
* [month]="3"
|
|
1634
|
+
* [rangeStart]="start"
|
|
1635
|
+
* [rangeEnd]="end"
|
|
1636
|
+
* [hoverDate]="hover"
|
|
1637
|
+
* [focusedDate]="focused"
|
|
1638
|
+
* [minDate]="min"
|
|
1639
|
+
* [maxDate]="max"
|
|
1640
|
+
* (datePicked)="onPick($event)"
|
|
1641
|
+
* (dateHovered)="onHover($event)"
|
|
1642
|
+
* />
|
|
1643
|
+
* ```
|
|
1644
|
+
*/
|
|
1645
|
+
declare class MdyRangeCalendarGridComponent {
|
|
1646
|
+
readonly year: _angular_core.InputSignal<number>;
|
|
1647
|
+
readonly month: _angular_core.InputSignal<number>;
|
|
1648
|
+
readonly rangeStart: _angular_core.InputSignal<CalendarDate | null>;
|
|
1649
|
+
readonly rangeEnd: _angular_core.InputSignal<CalendarDate | null>;
|
|
1650
|
+
/** Hover date used to preview the range before second click. */
|
|
1651
|
+
readonly hoverDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1652
|
+
readonly focusedDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1653
|
+
readonly minDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1654
|
+
readonly maxDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1655
|
+
readonly dateFilter: _angular_core.InputSignal<((date: string) => boolean) | null>;
|
|
1656
|
+
/** Emits the date the user picked (clicked or pressed Enter/Space). */
|
|
1657
|
+
readonly datePicked: _angular_core.OutputEmitterRef<CalendarDate>;
|
|
1658
|
+
/** Emits when the user hovers over a cell. */
|
|
1659
|
+
readonly dateHovered: _angular_core.OutputEmitterRef<CalendarDate>;
|
|
1660
|
+
private readonly cellBtns;
|
|
1661
|
+
/** Focuses the grid cell corresponding to the given date. */
|
|
1662
|
+
focusDate(date: CalendarDate): void;
|
|
1663
|
+
private readonly locale;
|
|
1664
|
+
private readonly todayDate;
|
|
1665
|
+
/** 42 cells for the month grid. */
|
|
1666
|
+
private readonly cells;
|
|
1667
|
+
/** Cells split into 6 rows of 7. */
|
|
1668
|
+
protected readonly rows: _angular_core.Signal<readonly (readonly CalendarCell[])[]>;
|
|
1669
|
+
/** Day-of-week header names ordered by firstDayOfWeek. */
|
|
1670
|
+
protected readonly orderedDayNames: _angular_core.Signal<readonly string[]>;
|
|
1671
|
+
/** Short day names for aria-label on weekday headers. */
|
|
1672
|
+
protected readonly orderedDayNamesShort: _angular_core.Signal<readonly string[]>;
|
|
1673
|
+
/**
|
|
1674
|
+
* Effective range, computed from rangeStart + (rangeEnd or hoverDate).
|
|
1675
|
+
* Always normalised so `[0] <= [1]`.
|
|
1676
|
+
*/
|
|
1677
|
+
private readonly effectiveRange;
|
|
1678
|
+
protected isCellToday(cell: CalendarCell): boolean;
|
|
1679
|
+
protected isCellFocused(cell: CalendarCell): boolean;
|
|
1680
|
+
protected isCellDisabled(cell: CalendarCell): boolean;
|
|
1681
|
+
/** True for either range endpoint. */
|
|
1682
|
+
protected isCellRangeEndpoint(cell: CalendarCell): boolean;
|
|
1683
|
+
/** True for the range start date specifically. */
|
|
1684
|
+
protected isCellRangeStart(cell: CalendarCell): boolean;
|
|
1685
|
+
/** True for the range end date specifically. */
|
|
1686
|
+
protected isCellRangeEnd(cell: CalendarCell): boolean;
|
|
1687
|
+
/** True for dates strictly between start and end. */
|
|
1688
|
+
protected isCellInRange(cell: CalendarCell): boolean;
|
|
1689
|
+
protected onCellClick(cell: CalendarCell): void;
|
|
1690
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyRangeCalendarGridComponent, never>;
|
|
1691
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyRangeCalendarGridComponent, "mdy-range-calendar-grid", never, { "year": { "alias": "year"; "required": true; "isSignal": true; }; "month": { "alias": "month"; "required": true; "isSignal": true; }; "rangeStart": { "alias": "rangeStart"; "required": false; "isSignal": true; }; "rangeEnd": { "alias": "rangeEnd"; "required": false; "isSignal": true; }; "hoverDate": { "alias": "hoverDate"; "required": false; "isSignal": true; }; "focusedDate": { "alias": "focusedDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; }, { "datePicked": "datePicked"; "dateHovered": "dateHovered"; }, never, never, true, never>;
|
|
1692
|
+
}
|
|
1693
|
+
|
|
1694
|
+
type CalendarView = "calendar" | "month" | "year";
|
|
1695
|
+
/**
|
|
1696
|
+
* Range calendar container — orchestrates header navigation, grid rendering,
|
|
1697
|
+
* keyboard navigation, and two-step date range selection.
|
|
1698
|
+
*/
|
|
1699
|
+
declare class MdyRangeCalendarComponent {
|
|
1700
|
+
readonly rangeStart: _angular_core.InputSignal<CalendarDate | null>;
|
|
1701
|
+
readonly rangeEnd: _angular_core.InputSignal<CalendarDate | null>;
|
|
1702
|
+
readonly minDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1703
|
+
readonly maxDate: _angular_core.InputSignal<CalendarDate | null>;
|
|
1704
|
+
readonly dateFilter: _angular_core.InputSignal<((date: string) => boolean) | null>;
|
|
1705
|
+
/** Accessible label for the dialog. Falls back to the i18n default. */
|
|
1706
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1707
|
+
private readonly i18n;
|
|
1708
|
+
protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
|
|
1709
|
+
readonly rangePicked: _angular_core.OutputEmitterRef<{
|
|
1710
|
+
readonly start: CalendarDate;
|
|
1711
|
+
readonly end: CalendarDate;
|
|
1712
|
+
}>;
|
|
1713
|
+
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
1714
|
+
private readonly grid;
|
|
1715
|
+
private readonly injector;
|
|
1716
|
+
constructor();
|
|
1717
|
+
focusFocusedDate(): void;
|
|
1718
|
+
protected readonly view: _angular_core.WritableSignal<CalendarView>;
|
|
1719
|
+
protected readonly viewYear: _angular_core.WritableSignal<number>;
|
|
1720
|
+
protected readonly viewMonth: _angular_core.WritableSignal<number>;
|
|
1721
|
+
protected readonly focusedDate: _angular_core.WritableSignal<CalendarDate>;
|
|
1722
|
+
protected readonly hoverDate: _angular_core.WritableSignal<CalendarDate | null>;
|
|
1723
|
+
private readonly phase;
|
|
1724
|
+
protected readonly pendingStart: _angular_core.WritableSignal<CalendarDate | null>;
|
|
1725
|
+
protected readonly pendingEnd: _angular_core.WritableSignal<CalendarDate | null>;
|
|
1726
|
+
protected readonly phaseHint: _angular_core.Signal<string>;
|
|
1727
|
+
syncView(start: CalendarDate | null, end: CalendarDate | null): void;
|
|
1728
|
+
protected onToggleView(): void;
|
|
1729
|
+
protected onMonthSelected(month: number): void;
|
|
1730
|
+
protected onYearSelected(year: number): void;
|
|
1731
|
+
protected goToPreviousMonth(): void;
|
|
1732
|
+
protected goToNextMonth(): void;
|
|
1733
|
+
private navigateMonth;
|
|
1734
|
+
protected onDatePicked(date: CalendarDate): void;
|
|
1735
|
+
protected onDateHovered(date: CalendarDate): void;
|
|
1736
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1737
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyRangeCalendarComponent, never>;
|
|
1738
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyRangeCalendarComponent, "mdy-range-calendar", never, { "rangeStart": { "alias": "rangeStart"; "required": false; "isSignal": true; }; "rangeEnd": { "alias": "rangeEnd"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "rangePicked": "rangePicked"; "closed": "closed"; }, never, never, true, never>;
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
/**
|
|
1742
|
+
* File Upload renderer component.
|
|
1743
|
+
*/
|
|
1744
|
+
declare class MdyFileComponent extends MdyBaseControl<File | File[] | null> {
|
|
1745
|
+
readonly accept: _angular_core.InputSignal<string>;
|
|
1746
|
+
readonly multiple: _angular_core.InputSignal<boolean>;
|
|
1747
|
+
/** Maximum size per file in bytes (0 = no limit). Applies to picker and drop. */
|
|
1748
|
+
readonly maxFileSize: _angular_core.InputSignal<number>;
|
|
1749
|
+
/** Maximum number of files when [multiple] (0 = no limit). */
|
|
1750
|
+
readonly maxFiles: _angular_core.InputSignal<number>;
|
|
1751
|
+
readonly fileSelected: _angular_core.OutputEmitterRef<File | File[] | null>;
|
|
1752
|
+
/** Emits the files rejected by accept/maxFileSize/maxFiles filtering. */
|
|
1753
|
+
readonly filesRejected: _angular_core.OutputEmitterRef<readonly File[]>;
|
|
1754
|
+
protected readonly i18n: packages_core_dist.MdyI18nMessages;
|
|
1755
|
+
protected readonly fieldId: string;
|
|
1756
|
+
protected readonly dragOver: _angular_core.WritableSignal<boolean>;
|
|
1757
|
+
private readonly fileInput;
|
|
1758
|
+
protected readonly fileNames: _angular_core.Signal<string[]>;
|
|
1759
|
+
protected onFileChange(event: Event): void;
|
|
1760
|
+
protected onDragOver(event: DragEvent): void;
|
|
1761
|
+
protected onDrop(event: DragEvent): void;
|
|
1762
|
+
protected clear(): void;
|
|
1763
|
+
private processFiles;
|
|
1764
|
+
/** Mirrors the native input's accept matching: .ext, type/*, exact MIME. */
|
|
1765
|
+
private matchesAccept;
|
|
1766
|
+
private withinSizeLimit;
|
|
1767
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyFileComponent, never>;
|
|
1768
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyFileComponent, "mdy-control-file", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; }, { "fileSelected": "fileSelected"; "filesRejected": "filesRejected"; }, never, never, true, never>;
|
|
1769
|
+
}
|
|
1770
|
+
|
|
1771
|
+
/**
|
|
1772
|
+
* Shared base for dropdown renderers (select, multiselect).
|
|
1773
|
+
*
|
|
1774
|
+
* Owns the non-UI-specific concerns that the two renderers share:
|
|
1775
|
+
* i18n, injector, overlay min-space, option template query, selection
|
|
1776
|
+
* output, search-query lifecycle, and the reset contract. Subclasses
|
|
1777
|
+
* remain responsible for their specific value model, keyboard handling,
|
|
1778
|
+
* filtering and templates.
|
|
1779
|
+
*/
|
|
1780
|
+
declare abstract class MdyDropdownBase<TValue, TOptionValue = unknown> extends MdyOptionsOverlayControl<TValue, TOptionValue> implements MdyOptionsControl<TOptionValue> {
|
|
1781
|
+
/** Internationalized strings used by dropdown UI. */
|
|
1782
|
+
protected readonly i18n: packages_core_dist.MdyI18nMessages;
|
|
1783
|
+
/** Injector for Angular effects and `afterNextRender` calls. */
|
|
1784
|
+
protected readonly injector: Injector;
|
|
1785
|
+
/** Minimum viewport space required to anchor the dropdown. */
|
|
1786
|
+
protected readonly minSpace = 250;
|
|
1787
|
+
/** Emitted when the user selects or toggles an option. */
|
|
1788
|
+
readonly selectionChange: _angular_core.OutputEmitterRef<MdySelectOption<TOptionValue>>;
|
|
1789
|
+
/** Custom option template provided via `<ng-template mdyOption>`. */
|
|
1790
|
+
protected readonly optionTpl: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
1791
|
+
/** Stable field id used for labels, ARIA and option ids. */
|
|
1792
|
+
protected abstract readonly fieldId: string;
|
|
1793
|
+
/** Resets the control value to its empty state. */
|
|
1794
|
+
abstract resetSelection(): void;
|
|
1795
|
+
/** Reset the search query every time the overlay opens. */
|
|
1796
|
+
protected onBeforeOpen(): void;
|
|
1797
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyDropdownBase<any, any>, never>;
|
|
1798
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyDropdownBase<any, any>, never, never, {}, { "selectionChange": "selectionChange"; }, ["optionTpl"], never, true, never>;
|
|
1799
|
+
}
|
|
1800
|
+
|
|
1801
|
+
/**
|
|
1802
|
+
* Multiselect renderer component.
|
|
1803
|
+
* Renders selectable filter chips and delivers ReadonlyArray<TValue>.
|
|
1804
|
+
*/
|
|
1805
|
+
declare class MdyMultiselectComponent<TValue = string> extends MdyDropdownBase<ReadonlyArray<TValue>, TValue> implements MdyOptionsControl<TValue> {
|
|
1806
|
+
readonly mode: _angular_core.InputSignal<"single" | "multi">;
|
|
1807
|
+
/**
|
|
1808
|
+
* Optional filter predicate applied to options before display.
|
|
1809
|
+
* Receives the option *value* and returns `true` to show the option.
|
|
1810
|
+
* When absent, all options are shown.
|
|
1811
|
+
*/
|
|
1812
|
+
readonly filterFn: _angular_core.InputSignal<((value: TValue) => boolean) | undefined>;
|
|
1813
|
+
protected readonly fieldId: string;
|
|
1814
|
+
/** Options after applying the optional `filterFn` predicate. */
|
|
1815
|
+
protected readonly filteredOptions: _angular_core.Signal<readonly _modyra_angular.MdySelectOption<TValue>[]>;
|
|
1816
|
+
/** Options available in the search overlay (filtered by predicate + query + mode). */
|
|
1817
|
+
protected readonly searchResults: _angular_core.Signal<readonly _modyra_angular.MdySelectOption<TValue>[]>;
|
|
1818
|
+
private readonly overlayInputRef;
|
|
1819
|
+
/**
|
|
1820
|
+
* Pre-computed count map for multi-mode.
|
|
1821
|
+
* Keyed by String(value): matching is loose, consistent with the select
|
|
1822
|
+
* renderer (B20), so numeric values survive string round-trips.
|
|
1823
|
+
*/
|
|
1824
|
+
protected readonly counts: _angular_core.Signal<Map<string, number>>;
|
|
1825
|
+
/** Pre-computed selection set for single-mode (loose String matching, B20). */
|
|
1826
|
+
protected readonly selectedSet: _angular_core.Signal<Set<string>>;
|
|
1827
|
+
protected onBeforeOpen(): void;
|
|
1828
|
+
/**
|
|
1829
|
+
* Override to check against the full host element rather than the narrow
|
|
1830
|
+
* #wrapper (header div). The overlay panel is a DOM child of the host even
|
|
1831
|
+
* when position:fixed, so host.contains() correctly excludes panel clicks.
|
|
1832
|
+
*/
|
|
1833
|
+
protected onDocumentClick(event: Event): void;
|
|
1834
|
+
protected isSelected(optValue: TValue): boolean;
|
|
1835
|
+
protected onToggle(optValue: TValue): void;
|
|
1836
|
+
protected countOf(optValue: TValue): number;
|
|
1837
|
+
protected increment(optValue: TValue): void;
|
|
1838
|
+
protected decrement(optValue: TValue): void;
|
|
1839
|
+
resetSelection(): void;
|
|
1840
|
+
protected onOverlaySelect(optValue: TValue): void;
|
|
1841
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyMultiselectComponent<any>, never>;
|
|
1842
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyMultiselectComponent<any>, "mdy-control-multiselect", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "filterFn": { "alias": "filterFn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1843
|
+
}
|
|
1844
|
+
|
|
1845
|
+
/**
|
|
1846
|
+
* Number input renderer component.
|
|
1847
|
+
*/
|
|
1848
|
+
declare class MdyNumberComponent extends MdyBaseControl<number | null> {
|
|
1849
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1850
|
+
readonly minValue: _angular_core.InputSignal<number | null>;
|
|
1851
|
+
readonly maxValue: _angular_core.InputSignal<number | null>;
|
|
1852
|
+
readonly step: _angular_core.InputSignal<number>;
|
|
1853
|
+
readonly showSpinButtons: _angular_core.InputSignal<boolean>;
|
|
1854
|
+
protected readonly fieldId: string;
|
|
1855
|
+
protected onInput(event: Event): void;
|
|
1856
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyNumberComponent, never>;
|
|
1857
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyNumberComponent, "mdy-control-number", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showSpinButtons": { "alias": "showSpinButtons"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
/**
|
|
1861
|
+
* Radio Group renderer component.
|
|
1862
|
+
*/
|
|
1863
|
+
declare class MdyRadioGroupComponent<TValue = unknown> extends MdyBaseControl<TValue | null> {
|
|
1864
|
+
readonly options: _angular_core.InputSignal<readonly MdySelectOption<TValue>[]>;
|
|
1865
|
+
readonly layout: _angular_core.InputSignal<"vertical" | "horizontal">;
|
|
1866
|
+
protected readonly fieldId: string;
|
|
1867
|
+
protected onSelectionChange(value: TValue): void;
|
|
1868
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyRadioGroupComponent<any>, never>;
|
|
1869
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyRadioGroupComponent<any>, "mdy-control-radio", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1870
|
+
}
|
|
1871
|
+
|
|
1872
|
+
/**
|
|
1873
|
+
* Segmented Button renderer component.
|
|
1874
|
+
*/
|
|
1875
|
+
declare class MdySegmentedButtonComponent<TValue = unknown> extends MdyBaseControl<TValue | null> {
|
|
1876
|
+
readonly options: _angular_core.InputSignal<readonly MdySelectOption<TValue>[]>;
|
|
1877
|
+
readonly fullWidth: InputSignalWithTransform<boolean, unknown>;
|
|
1878
|
+
protected readonly fieldId: string;
|
|
1879
|
+
protected readonly segmentsCount: _angular_core.Signal<number>;
|
|
1880
|
+
private readonly track;
|
|
1881
|
+
private isDragging;
|
|
1882
|
+
protected onTrackPointerDown(event: PointerEvent): void;
|
|
1883
|
+
protected onTrackPointerMove(event: PointerEvent): void;
|
|
1884
|
+
protected onTrackPointerUp(): void;
|
|
1885
|
+
private updateSelectionFromPointer;
|
|
1886
|
+
protected onSelect(value: TValue): void;
|
|
1887
|
+
/** Roving tabindex: only the selected (or first) segment is tabbable. */
|
|
1888
|
+
protected tabIndexFor(index: number): number;
|
|
1889
|
+
private selectedIndex;
|
|
1890
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1891
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdySegmentedButtonComponent<any>, never>;
|
|
1892
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdySegmentedButtonComponent<any>, "mdy-control-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1893
|
+
}
|
|
1894
|
+
|
|
1895
|
+
/**
|
|
1896
|
+
* Select renderer component.
|
|
1897
|
+
*
|
|
1898
|
+
* When a custom `<ng-template mdyOption>` is provided, renders a fully custom
|
|
1899
|
+
* dropdown with HTML content in options. Otherwise falls back to a native
|
|
1900
|
+
* `<select>` element.
|
|
1901
|
+
*/
|
|
1902
|
+
declare class MdySelectComponent<TValue = string> extends MdyDropdownBase<TValue | null, TValue> implements MdyOptionsControl<TValue> {
|
|
1903
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1904
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1905
|
+
/**
|
|
1906
|
+
* Tagging: in a searchable select, shows a "Create «query»" row when the
|
|
1907
|
+
* query matches no option label. Selecting it emits `optionCreated` —
|
|
1908
|
+
* the consumer adds the option to its list and sets the value.
|
|
1909
|
+
*/
|
|
1910
|
+
readonly allowCreate: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1911
|
+
/** Fires with the trimmed query when the user picks the create row. */
|
|
1912
|
+
readonly optionCreated: _angular_core.OutputEmitterRef<string>;
|
|
1913
|
+
readonly isDisabled: Signal<boolean>;
|
|
1914
|
+
private readonly runtime;
|
|
1915
|
+
private selectAdapter;
|
|
1916
|
+
private readonly _parkedValue;
|
|
1917
|
+
readonly parkedValue: Signal<TValue | null>;
|
|
1918
|
+
constructor();
|
|
1919
|
+
protected readonly fieldId: string;
|
|
1920
|
+
/** Whether the dropdown opens above the trigger. */
|
|
1921
|
+
protected readonly dropUp: Signal<boolean>;
|
|
1922
|
+
/** Whether the dropdown renders as a centered overlay (no space above or below). */
|
|
1923
|
+
protected readonly overlayMode: Signal<boolean>;
|
|
1924
|
+
/** Index of the keyboard-active option (for arrow navigation). */
|
|
1925
|
+
protected readonly activeIndex: Signal<number>;
|
|
1926
|
+
private optionKey;
|
|
1927
|
+
/** The currently selected option object (for rendering in trigger). */
|
|
1928
|
+
protected readonly selectedOption: Signal<MdySelectOption<TValue> | null>;
|
|
1929
|
+
/** Options filtered by the current search query. */
|
|
1930
|
+
protected readonly filteredOptions: Signal<readonly MdySelectOption<TValue>[]>;
|
|
1931
|
+
/** Show the "create" row: tagging enabled, query set, no exact label match. */
|
|
1932
|
+
protected readonly showCreateOption: Signal<boolean>;
|
|
1933
|
+
protected onCreateOption(): void;
|
|
1934
|
+
private readonly searchInputRef;
|
|
1935
|
+
protected openOverlay(event?: Event): void;
|
|
1936
|
+
closeOverlay(): void;
|
|
1937
|
+
protected onBeforeOpen(): void;
|
|
1938
|
+
protected selectOption(opt: MdySelectOption<TValue>): void;
|
|
1939
|
+
protected onBlur(event: FocusEvent): void;
|
|
1940
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1941
|
+
protected onSearchInput(event: Event): void;
|
|
1942
|
+
resetSelection(): void;
|
|
1943
|
+
protected onNativeChange(event: Event): void;
|
|
1944
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdySelectComponent<any>, never>;
|
|
1945
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdySelectComponent<any>, "mdy-control-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; }, { "optionCreated": "optionCreated"; }, never, never, true, never>;
|
|
1946
|
+
}
|
|
1947
|
+
|
|
1948
|
+
/**
|
|
1949
|
+
* Slider renderer component.
|
|
1950
|
+
*/
|
|
1951
|
+
declare class MdySliderComponent extends MdyBaseControl<number> {
|
|
1952
|
+
readonly min: _angular_core.InputSignal<number>;
|
|
1953
|
+
readonly max: _angular_core.InputSignal<number>;
|
|
1954
|
+
readonly step: _angular_core.InputSignal<number>;
|
|
1955
|
+
readonly showValue: _angular_core.InputSignal<boolean>;
|
|
1956
|
+
private readonly rangeInput;
|
|
1957
|
+
protected readonly fieldId: string;
|
|
1958
|
+
constructor();
|
|
1959
|
+
protected onInput(event: Event): void;
|
|
1960
|
+
protected onChange(event: Event): void;
|
|
1961
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdySliderComponent, never>;
|
|
1962
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdySliderComponent, "mdy-control-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1963
|
+
}
|
|
1964
|
+
|
|
1965
|
+
/**
|
|
1966
|
+
* Text input renderer component.
|
|
1967
|
+
*
|
|
1968
|
+
* ```html
|
|
1969
|
+
* <mdy-control-text name="firstName" label="First Name" placeholder="Enter name" />
|
|
1970
|
+
* ```
|
|
1971
|
+
*/
|
|
1972
|
+
declare class MdyTextComponent extends MdyBaseControl<string> implements OnInit {
|
|
1973
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1974
|
+
readonly type: _angular_core.InputSignal<string>;
|
|
1975
|
+
readonly autocomplete: _angular_core.InputSignal<string | null>;
|
|
1976
|
+
protected readonly fieldId: string;
|
|
1977
|
+
private fieldController?;
|
|
1978
|
+
private readonly destroyRef;
|
|
1979
|
+
protected readonly fieldView: _angular_core.Signal<_modyra_widgets.MdyWidgetViewContract | undefined>;
|
|
1980
|
+
protected readonly inputAriaInvalid: _angular_core.Signal<string | number | boolean>;
|
|
1981
|
+
protected readonly inputAriaRequired: _angular_core.Signal<string | number | boolean>;
|
|
1982
|
+
protected readonly inputAriaDescribedby: _angular_core.Signal<string | number | true | null>;
|
|
1983
|
+
ngOnInit(): void;
|
|
1984
|
+
protected onInput(event: Event): void;
|
|
1985
|
+
protected onBlur(): void;
|
|
1986
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyTextComponent, never>;
|
|
1987
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyTextComponent, "mdy-control-text", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1988
|
+
}
|
|
1989
|
+
|
|
1990
|
+
/**
|
|
1991
|
+
* Textarea renderer component.
|
|
1992
|
+
*/
|
|
1993
|
+
declare class MdyTextareaComponent extends MdyBaseControl<string | null> {
|
|
1994
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1995
|
+
readonly rows: _angular_core.InputSignal<number>;
|
|
1996
|
+
protected readonly fieldId: string;
|
|
1997
|
+
protected onInput(event: Event): void;
|
|
1998
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyTextareaComponent, never>;
|
|
1999
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyTextareaComponent, "mdy-control-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2000
|
+
}
|
|
2001
|
+
|
|
2002
|
+
/**
|
|
2003
|
+
* Toggle (switch) renderer component.
|
|
2004
|
+
*/
|
|
2005
|
+
declare class MdyToggleComponent extends MdyBaseControl<boolean> {
|
|
2006
|
+
protected readonly fieldId: string;
|
|
2007
|
+
protected onChange(event: Event): void;
|
|
2008
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyToggleComponent, never>;
|
|
2009
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyToggleComponent, "mdy-control-toggle", never, {}, {}, never, never, true, never>;
|
|
2010
|
+
}
|
|
2011
|
+
|
|
2012
|
+
/**
|
|
2013
|
+
* Timepicker renderer — M3-style input with clock overlay.
|
|
2014
|
+
*/
|
|
2015
|
+
declare class MdyTimepickerComponent extends MdyOverlayControl<string | null> {
|
|
2016
|
+
protected readonly i18n: packages_core_dist.MdyI18nMessages;
|
|
2017
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
2018
|
+
/**
|
|
2019
|
+
* Value and display format: `"12h"` uses `"hh:mm AM/PM"` strings,
|
|
2020
|
+
* `"24h"` uses `"HH:mm"` (00-23). The clock overlay adapts (no AM/PM
|
|
2021
|
+
* toggle, 0-23 hour input) — the field value follows this format.
|
|
2022
|
+
*/
|
|
2023
|
+
readonly format: _angular_core.InputSignal<MdyTimeFormat>;
|
|
2024
|
+
protected readonly minSpace = 450;
|
|
2025
|
+
protected readonly effectivePlaceholder: _angular_core.Signal<string>;
|
|
2026
|
+
protected readonly fieldId: string;
|
|
2027
|
+
protected readonly draftValue: _angular_core.WritableSignal<string | null>;
|
|
2028
|
+
private readonly injector;
|
|
2029
|
+
protected onBeforeOpen(): void;
|
|
2030
|
+
protected onTimePicked(time: string): void;
|
|
2031
|
+
protected confirmPicker(): void;
|
|
2032
|
+
/**
|
|
2033
|
+
* Commit-style parsing on `change` (blur/Enter), not on every keystroke:
|
|
2034
|
+
* updating the value mid-typing made the `[value]` binding rewrite the
|
|
2035
|
+
* input and wipe the user's text (R4). Unparsable text leaves the value
|
|
2036
|
+
* untouched — the blur handler reverts the display.
|
|
2037
|
+
*/
|
|
2038
|
+
protected onInputChange(event: Event): void;
|
|
2039
|
+
protected onInputFocus(event: FocusEvent): void;
|
|
2040
|
+
protected onInputBlur(event: FocusEvent): void;
|
|
2041
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyTimepickerComponent, never>;
|
|
2042
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyTimepickerComponent, "mdy-control-timepicker", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2043
|
+
}
|
|
2044
|
+
|
|
2045
|
+
/**
|
|
2046
|
+
* Lightweight component to render SVGs from the shared icon library.
|
|
2047
|
+
*/
|
|
2048
|
+
declare class MdyIconComponent {
|
|
2049
|
+
private readonly sanitizer;
|
|
2050
|
+
/** Name of the icon to render from the MDY_ICONS registry. */
|
|
2051
|
+
readonly name: _angular_core.InputSignal<"SEARCH" | "CHECKMARK" | "CHEVRON_DOWN" | "CHEVRON_LEFT" | "CHEVRON_RIGHT" | "CLOSE" | "PLUS" | "MINUS" | "CALENDAR" | "CLOCK" | "SPIN_UP" | "SPIN_DOWN" | "ERROR" | "LOADER">;
|
|
2052
|
+
readonly strokeWidth: _angular_core.InputSignal<number>;
|
|
2053
|
+
protected readonly iconData: _angular_core.Signal<{
|
|
2054
|
+
readonly viewBox: "0 0 20 20";
|
|
2055
|
+
readonly content: "<circle cx=\"8.5\" cy=\"8.5\" r=\"5.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/><line x1=\"12.5\" y1=\"12.5\" x2=\"17\" y2=\"17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>";
|
|
2056
|
+
} | {
|
|
2057
|
+
readonly viewBox: "0 0 24 24";
|
|
2058
|
+
readonly content: "<polyline points=\"6 12 10 16 18 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>";
|
|
2059
|
+
} | {
|
|
2060
|
+
readonly viewBox: "0 0 24 24";
|
|
2061
|
+
readonly content: "<path d=\"M7 10l5 5 5-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>";
|
|
2062
|
+
} | {
|
|
2063
|
+
readonly viewBox: "0 0 24 24";
|
|
2064
|
+
readonly content: "<path d=\"M15 18l-6-6 6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>";
|
|
2065
|
+
} | {
|
|
2066
|
+
readonly viewBox: "0 0 24 24";
|
|
2067
|
+
readonly content: "<path d=\"M9 18l6-6-6-6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>";
|
|
2068
|
+
} | {
|
|
2069
|
+
readonly viewBox: "0 0 12 12";
|
|
2070
|
+
readonly content: "<line x1=\"3\" y1=\"3\" x2=\"9\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><line x1=\"9\" y1=\"3\" x2=\"3\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>";
|
|
2071
|
+
} | {
|
|
2072
|
+
readonly viewBox: "0 0 12 12";
|
|
2073
|
+
readonly content: "<line x1=\"3\" y1=\"6\" x2=\"9\" y2=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><line x1=\"6\" y1=\"3\" x2=\"6\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>";
|
|
2074
|
+
} | {
|
|
2075
|
+
readonly viewBox: "0 0 12 12";
|
|
2076
|
+
readonly content: "<line x1=\"3\" y1=\"6\" x2=\"9\" y2=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>";
|
|
2077
|
+
} | {
|
|
2078
|
+
readonly viewBox: "0 0 24 24";
|
|
2079
|
+
readonly content: "<rect x=\"2\" y=\"4\" width=\"20\" height=\"18\" rx=\"2\" ry=\"2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\" stroke=\"currentColor\" stroke-width=\"2\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\" stroke=\"currentColor\" stroke-width=\"2\"/><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\" stroke=\"currentColor\" stroke-width=\"2\"/>";
|
|
2080
|
+
} | {
|
|
2081
|
+
readonly viewBox: "0 0 24 24";
|
|
2082
|
+
readonly content: "<circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><polyline points=\"12 6 12 12 16 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>";
|
|
2083
|
+
} | {
|
|
2084
|
+
readonly viewBox: "0 0 16 16";
|
|
2085
|
+
readonly content: "<polyline points=\"4,10 8,6 12,10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>";
|
|
2086
|
+
} | {
|
|
2087
|
+
readonly viewBox: "0 0 16 16";
|
|
2088
|
+
readonly content: "<polyline points=\"4,6 8,10 12,6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>";
|
|
2089
|
+
} | {
|
|
2090
|
+
readonly viewBox: "0 0 24 24";
|
|
2091
|
+
readonly content: "<circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/><circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"/>";
|
|
2092
|
+
} | {
|
|
2093
|
+
readonly viewBox: "0 0 24 24";
|
|
2094
|
+
readonly content: "<path d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>";
|
|
2095
|
+
}>;
|
|
2096
|
+
protected readonly safeContent: _angular_core.Signal<SafeHtml>;
|
|
2097
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyIconComponent, never>;
|
|
2098
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MdyIconComponent, "mdy-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2099
|
+
}
|
|
2100
|
+
|
|
2101
|
+
/** Declaratively disables a field by name within an MdyDeclarativeAdapter. */
|
|
2102
|
+
declare class MdyDisabledDirective {
|
|
2103
|
+
private readonly registry;
|
|
2104
|
+
private readonly attrName;
|
|
2105
|
+
/** Target field name — resolved from the host's attribute or [name] binding. */
|
|
2106
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
2107
|
+
readonly mdyDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2108
|
+
private readonly fieldName;
|
|
2109
|
+
private _lastField;
|
|
2110
|
+
constructor();
|
|
2111
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyDisabledDirective, never>;
|
|
2112
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyDisabledDirective, "[mdyDisabled]", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "mdyDisabled": { "alias": "mdyDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2113
|
+
}
|
|
2114
|
+
|
|
2115
|
+
/**
|
|
2116
|
+
* Shared base for declarative validator directives.
|
|
2117
|
+
*
|
|
2118
|
+
* Resolves the target field from either the static `name` attribute or a
|
|
2119
|
+
* dynamic `[name]` binding (the directive declares its own `name` input, so
|
|
2120
|
+
* Angular delivers the same binding the renderer receives — B11), and keeps
|
|
2121
|
+
* the registered validators in sync with the directive inputs: every change
|
|
2122
|
+
* re-runs {@link buildValidators} and swaps the previous set via a per-instance
|
|
2123
|
+
* key. On destroy (or when the target field changes) the validators owned by
|
|
2124
|
+
* this instance are removed (B12).
|
|
2125
|
+
*/
|
|
2126
|
+
declare abstract class MdyValidatorBaseDirective {
|
|
2127
|
+
private readonly _registry;
|
|
2128
|
+
private readonly _attrName;
|
|
2129
|
+
/**
|
|
2130
|
+
* Target field name. Populated automatically from the host's `name`
|
|
2131
|
+
* attribute or `[name]` binding — no need to set it explicitly.
|
|
2132
|
+
*/
|
|
2133
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
2134
|
+
private readonly _fieldName;
|
|
2135
|
+
private readonly _key;
|
|
2136
|
+
private _lastField;
|
|
2137
|
+
/**
|
|
2138
|
+
* Returns the current validator set for this directive.
|
|
2139
|
+
* Called inside a reactive context: reading inputs here makes the
|
|
2140
|
+
* registration re-run when they change.
|
|
2141
|
+
* Validators are typed contravariantly (`ValidatorFn<never>`) so concrete
|
|
2142
|
+
* directives can return validators for their specific value type.
|
|
2143
|
+
*/
|
|
2144
|
+
protected abstract buildValidators(): {
|
|
2145
|
+
readonly validators: ReadonlyArray<ValidatorFn<never>>;
|
|
2146
|
+
readonly marksRequired?: boolean;
|
|
2147
|
+
};
|
|
2148
|
+
constructor();
|
|
2149
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyValidatorBaseDirective, never>;
|
|
2150
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyValidatorBaseDirective, never, never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2151
|
+
}
|
|
2152
|
+
|
|
2153
|
+
/**
|
|
2154
|
+
* Validates e-mail format in declarative mode.
|
|
2155
|
+
*
|
|
2156
|
+
* ```html
|
|
2157
|
+
* <mdy-control-text name="email" mdyEmail />
|
|
2158
|
+
* <mdy-control-text name="email" [mdyEmail]="'Formato non valido'" />
|
|
2159
|
+
* ```
|
|
2160
|
+
*/
|
|
2161
|
+
declare class MdyEmailDirective extends MdyValidatorBaseDirective {
|
|
2162
|
+
/** Optional custom error message. */
|
|
2163
|
+
readonly mdyEmail: _angular_core.InputSignal<string | undefined>;
|
|
2164
|
+
protected buildValidators(): {
|
|
2165
|
+
validators: _modyra_core.ValidatorFn<string | null>[];
|
|
2166
|
+
};
|
|
2167
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyEmailDirective, never>;
|
|
2168
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyEmailDirective, "[mdyEmail]", never, { "mdyEmail": { "alias": "mdyEmail"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2169
|
+
}
|
|
2170
|
+
|
|
2171
|
+
/**
|
|
2172
|
+
* Validates maximum length in declarative mode.
|
|
2173
|
+
*
|
|
2174
|
+
* ```html
|
|
2175
|
+
* <mdy-control-text name="bio" [mdyMaxLength]="200" />
|
|
2176
|
+
* <mdy-control-text name="bio" [mdyMaxLength]="200" mdyMaxLengthMessage="Troppo lungo" />
|
|
2177
|
+
* ```
|
|
2178
|
+
*/
|
|
2179
|
+
declare class MdyMaxLengthDirective extends MdyValidatorBaseDirective {
|
|
2180
|
+
readonly mdyMaxLength: _angular_core.InputSignal<string | number>;
|
|
2181
|
+
readonly mdyMaxLengthMessage: _angular_core.InputSignal<string | undefined>;
|
|
2182
|
+
protected buildValidators(): {
|
|
2183
|
+
validators: _modyra_core.ValidatorFn<string | readonly unknown[]>[];
|
|
2184
|
+
};
|
|
2185
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyMaxLengthDirective, never>;
|
|
2186
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyMaxLengthDirective, "[mdyMaxLength]", never, { "mdyMaxLength": { "alias": "mdyMaxLength"; "required": true; "isSignal": true; }; "mdyMaxLengthMessage": { "alias": "mdyMaxLengthMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2187
|
+
}
|
|
2188
|
+
|
|
2189
|
+
/**
|
|
2190
|
+
* Validates numeric maximum in declarative mode.
|
|
2191
|
+
*
|
|
2192
|
+
* ```html
|
|
2193
|
+
* <mdy-control-number name="age" [mdyMax]="99" />
|
|
2194
|
+
* <mdy-control-number name="age" [mdyMax]="99" mdyMaxMessage="Valore troppo alto" />
|
|
2195
|
+
* ```
|
|
2196
|
+
*/
|
|
2197
|
+
declare class MdyMaxDirective extends MdyValidatorBaseDirective {
|
|
2198
|
+
readonly mdyMax: _angular_core.InputSignal<string | number>;
|
|
2199
|
+
readonly mdyMaxMessage: _angular_core.InputSignal<string | undefined>;
|
|
2200
|
+
protected buildValidators(): {
|
|
2201
|
+
validators: _modyra_core.ValidatorFn<number | null>[];
|
|
2202
|
+
};
|
|
2203
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyMaxDirective, never>;
|
|
2204
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyMaxDirective, "[mdyMax]", never, { "mdyMax": { "alias": "mdyMax"; "required": true; "isSignal": true; }; "mdyMaxMessage": { "alias": "mdyMaxMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
/**
|
|
2208
|
+
* Validates minimum length in declarative mode.
|
|
2209
|
+
*
|
|
2210
|
+
* ```html
|
|
2211
|
+
* <mdy-control-text name="username" [mdyMinLength]="3" />
|
|
2212
|
+
* <mdy-control-text name="username" [mdyMinLength]="3" mdyMinLengthMessage="Troppo corto" />
|
|
2213
|
+
* ```
|
|
2214
|
+
*/
|
|
2215
|
+
declare class MdyMinLengthDirective extends MdyValidatorBaseDirective {
|
|
2216
|
+
readonly mdyMinLength: _angular_core.InputSignal<string | number>;
|
|
2217
|
+
readonly mdyMinLengthMessage: _angular_core.InputSignal<string | undefined>;
|
|
2218
|
+
protected buildValidators(): {
|
|
2219
|
+
validators: _modyra_core.ValidatorFn<string | readonly unknown[]>[];
|
|
2220
|
+
};
|
|
2221
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyMinLengthDirective, never>;
|
|
2222
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyMinLengthDirective, "[mdyMinLength]", never, { "mdyMinLength": { "alias": "mdyMinLength"; "required": true; "isSignal": true; }; "mdyMinLengthMessage": { "alias": "mdyMinLengthMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2223
|
+
}
|
|
2224
|
+
|
|
2225
|
+
/**
|
|
2226
|
+
* Validates numeric minimum in declarative mode.
|
|
2227
|
+
*
|
|
2228
|
+
* ```html
|
|
2229
|
+
* <mdy-control-number name="age" [mdyMin]="18" />
|
|
2230
|
+
* <mdy-control-number name="age" [mdyMin]="18" mdyMinMessage="Devi essere maggiorenne" />
|
|
2231
|
+
* ```
|
|
2232
|
+
*/
|
|
2233
|
+
declare class MdyMinDirective extends MdyValidatorBaseDirective {
|
|
2234
|
+
readonly mdyMin: _angular_core.InputSignal<string | number>;
|
|
2235
|
+
readonly mdyMinMessage: _angular_core.InputSignal<string | undefined>;
|
|
2236
|
+
protected buildValidators(): {
|
|
2237
|
+
validators: _modyra_core.ValidatorFn<number | null>[];
|
|
2238
|
+
};
|
|
2239
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyMinDirective, never>;
|
|
2240
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyMinDirective, "[mdyMin]", never, { "mdyMin": { "alias": "mdyMin"; "required": true; "isSignal": true; }; "mdyMinMessage": { "alias": "mdyMinMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2241
|
+
}
|
|
2242
|
+
|
|
2243
|
+
/**
|
|
2244
|
+
* Validates a RegExp pattern in declarative mode.
|
|
2245
|
+
*
|
|
2246
|
+
* ```html
|
|
2247
|
+
* <mdy-control-text name="code" [mdyPattern]="codeRegex" />
|
|
2248
|
+
* <mdy-control-text name="code" [mdyPattern]="codeRegex" mdyPatternMessage="Formato non valido" />
|
|
2249
|
+
* ```
|
|
2250
|
+
*/
|
|
2251
|
+
declare class MdyPatternDirective extends MdyValidatorBaseDirective {
|
|
2252
|
+
readonly mdyPattern: _angular_core.InputSignal<string | RegExp>;
|
|
2253
|
+
readonly mdyPatternMessage: _angular_core.InputSignal<string | undefined>;
|
|
2254
|
+
protected buildValidators(): {
|
|
2255
|
+
validators: _modyra_core.ValidatorFn<string | null>[];
|
|
2256
|
+
};
|
|
2257
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyPatternDirective, never>;
|
|
2258
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyPatternDirective, "[mdyPattern]", never, { "mdyPattern": { "alias": "mdyPattern"; "required": true; "isSignal": true; }; "mdyPatternMessage": { "alias": "mdyPatternMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2259
|
+
}
|
|
2260
|
+
|
|
2261
|
+
/**
|
|
2262
|
+
* Marks a control as required in declarative mode.
|
|
2263
|
+
*
|
|
2264
|
+
* ```html
|
|
2265
|
+
* <mdy-control-text name="email" mdyRequired />
|
|
2266
|
+
* <mdy-control-text name="email" [mdyRequired]="'Email obbligatoria'" />
|
|
2267
|
+
* ```
|
|
2268
|
+
*/
|
|
2269
|
+
declare class MdyRequiredDirective extends MdyValidatorBaseDirective {
|
|
2270
|
+
/** Optional custom error message — pass as binding: [mdyRequired]="'...'" */
|
|
2271
|
+
readonly mdyRequired: _angular_core.InputSignal<string | undefined>;
|
|
2272
|
+
protected buildValidators(): {
|
|
2273
|
+
validators: _modyra_core.ValidatorFn<unknown>[];
|
|
2274
|
+
marksRequired: boolean;
|
|
2275
|
+
};
|
|
2276
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyRequiredDirective, never>;
|
|
2277
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MdyRequiredDirective, "[mdyRequired]", never, { "mdyRequired": { "alias": "mdyRequired"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2278
|
+
}
|
|
2279
|
+
|
|
2280
|
+
/**
|
|
2281
|
+
* Binds the framework-agnostic form engine to Angular's native signals: the
|
|
2282
|
+
* engine's state IS Angular signal state, so templates, `computed`s and
|
|
2283
|
+
* zoneless change detection react to it with no bridging layer.
|
|
2284
|
+
*
|
|
2285
|
+
* Effects need an {@link Injector}; without one the reactivity reports
|
|
2286
|
+
* `canEffect: false` and the engine skips effect-dependent features
|
|
2287
|
+
* (async validators, drafts, history) with a warning — matching the
|
|
2288
|
+
* behavior of constructing the adapter without an injector.
|
|
2289
|
+
*/
|
|
2290
|
+
declare function angularReactivity(injector?: Injector): MdyReactivity;
|
|
2291
|
+
|
|
2292
|
+
/**
|
|
2293
|
+
* Angular runtime for Modyra widget commands.
|
|
2294
|
+
*
|
|
2295
|
+
* Provides framework-specific execution of UI commands produced by headless
|
|
2296
|
+
* widget controllers: focus scheduling after render, scrolling, announcements,
|
|
2297
|
+
* and overlay/open coordination.
|
|
2298
|
+
*/
|
|
2299
|
+
|
|
2300
|
+
/** Maps a widget part name to an element reference. */
|
|
2301
|
+
type MdyElementRefMap = ReadonlyMap<string, ElementRef<HTMLElement> | undefined>;
|
|
2302
|
+
/** Lookup for item elements inside a part (e.g. options inside listbox). */
|
|
2303
|
+
type MdyItemRefLookup = (part: string, key: string) => ElementRef<HTMLElement> | undefined;
|
|
2304
|
+
/** Handlers for command side effects that need host/component cooperation. */
|
|
2305
|
+
interface MdyAngularCommandHandlers {
|
|
2306
|
+
/** Called for open-overlay / close-overlay. */
|
|
2307
|
+
setOpen(open: boolean): void;
|
|
2308
|
+
/** Called for emit-change. */
|
|
2309
|
+
onChange?(): void;
|
|
2310
|
+
/** Called for mark-touched. */
|
|
2311
|
+
onTouched?(): void;
|
|
2312
|
+
/** Called for mark-dirty. */
|
|
2313
|
+
onDirty?(): void;
|
|
2314
|
+
}
|
|
2315
|
+
/**
|
|
2316
|
+
* Executes a list of UI commands in an Angular runtime context.
|
|
2317
|
+
*
|
|
2318
|
+
* Focus/scroll operations are deferred with `afterNextRender` so they run
|
|
2319
|
+
* after the DOM has been updated by change detection.
|
|
2320
|
+
*/
|
|
2321
|
+
declare class MdyWidgetRuntime {
|
|
2322
|
+
private readonly injector;
|
|
2323
|
+
private readonly announcer;
|
|
2324
|
+
execute(commands: readonly MdyUiCommand[], elements: MdyElementRefMap, itemLookup: MdyItemRefLookup, handlers: MdyAngularCommandHandlers): void;
|
|
2325
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MdyWidgetRuntime, never>;
|
|
2326
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<MdyWidgetRuntime>;
|
|
2327
|
+
}
|
|
2328
|
+
|
|
2329
|
+
/**
|
|
2330
|
+
* Angular adapter for the Modyra headless select controller.
|
|
2331
|
+
*
|
|
2332
|
+
* Bridges the framework-agnostic controller with Angular-specific command
|
|
2333
|
+
* execution and signal integration. The host component creates an instance,
|
|
2334
|
+
* feeds it DOM refs and callbacks, and reads the reactive view contract.
|
|
2335
|
+
*/
|
|
2336
|
+
|
|
2337
|
+
interface MdyAngularSelectAdapterOptions<TValue> extends Omit<MdySelectControllerOptions<TValue>, "onChange"> {
|
|
2338
|
+
readonly onChange?: (value: TValue | null) => void;
|
|
2339
|
+
}
|
|
2340
|
+
declare class MdyAngularSelectAdapter<TValue = string> {
|
|
2341
|
+
private readonly controller;
|
|
2342
|
+
private readonly runtime;
|
|
2343
|
+
/** Reactive Angular signal wrapping the controller state. */
|
|
2344
|
+
readonly state: Signal<MdySelectState<TValue>>;
|
|
2345
|
+
/** Reactive Angular signal wrapping the view/ARIA contract. */
|
|
2346
|
+
readonly view: Signal<ReturnType<MdySelectController<TValue>["view"]>>;
|
|
2347
|
+
/** Current open state, useful for binding to the overlay panel. */
|
|
2348
|
+
readonly open: Signal<boolean>;
|
|
2349
|
+
/** Registry of part element refs. */
|
|
2350
|
+
private readonly elements;
|
|
2351
|
+
/** Registry of item element refs keyed by `part:key`. */
|
|
2352
|
+
private readonly itemElements;
|
|
2353
|
+
/** Callbacks to the host component. */
|
|
2354
|
+
private handlers;
|
|
2355
|
+
constructor(options: MdyAngularSelectAdapterOptions<TValue>, runtime: MdyWidgetRuntime, injector: Injector);
|
|
2356
|
+
/** Register a part element ref. */
|
|
2357
|
+
registerPart(name: string, ref: ElementRef<HTMLElement>): void;
|
|
2358
|
+
/** Register an item element ref (e.g. an option). */
|
|
2359
|
+
registerItem(part: string, key: string, ref: ElementRef<HTMLElement>): void;
|
|
2360
|
+
/** Connect host callbacks for command execution. */
|
|
2361
|
+
connectHandlers(handlers: MdyAngularCommandHandlers): void;
|
|
2362
|
+
/** Dispatch an intent and execute the resulting commands. */
|
|
2363
|
+
dispatch(intent: MdySelectIntent): void;
|
|
2364
|
+
/** Set the selected value programmatically. */
|
|
2365
|
+
setValue(value: TValue | null): void;
|
|
2366
|
+
/** Replace the option list. */
|
|
2367
|
+
setOptions(options: readonly MdySelectOption<TValue>[]): void;
|
|
2368
|
+
/** Update the open state programmatically without emitting commands. */
|
|
2369
|
+
setOpen(open: boolean): void;
|
|
2370
|
+
/** Update the disabled state. */
|
|
2371
|
+
setDisabled(disabled: boolean): void;
|
|
2372
|
+
/** Update the readonly state. */
|
|
2373
|
+
setReadonly(readonly: boolean): void;
|
|
2374
|
+
/** Update the invalid state. */
|
|
2375
|
+
setInvalid(invalid: boolean): void;
|
|
2376
|
+
/** Update the loading state. */
|
|
2377
|
+
setLoading(loading: boolean): void;
|
|
2378
|
+
/** Release resources. */
|
|
2379
|
+
destroy(): void;
|
|
2380
|
+
private lookupItem;
|
|
2381
|
+
}
|
|
2382
|
+
|
|
2383
|
+
export { MDY_DATE_LOCALE, MDY_DECLARATIVE_REGISTRY, MDY_DEVTOOLS_HOTKEY, MDY_FLOATING_LABELS, MDY_FLOATING_LABELS_DEFAULT, MDY_FLOATING_LABELS_DENSITY_DEFAULT, MDY_FORM_ADAPTER, MDY_I18N_MESSAGES, MDY_INLINE_ERRORS, MdyA11yAnnouncer, MdyAngularSelectAdapter, MdyBaseControl, MdyCalendarCellComponent, MdyCalendarComponent, MdyCalendarGridComponent, MdyCalendarHeaderComponent, MdyCheckboxComponent, MdyChipsDirective, MdyColorsComponent, MdyConditionalOptionsDirective, MdyControlComponent, MdyControlLabelComponent, MdyDatePickerComponent, MdyDateRangePickerComponent, MdyDeclarativeAdapter, MdyDevtoolsDirective, MdyDisabledDirective, MdyDynamicFormComponent, MdyEmailDirective, MdyErrorListComponent, MdyFileComponent, MdyFloatingLabelsDirective, MdyFormArrayComponent, MdyFormComponent, MdyFormWizardComponent, MdyFormsDevtoolsComponent, MdyFormsDevtoolsOverlayComponent, MdyFormsDevtoolsService, MdyGlassDirective, MdyIconComponent, MdyInlineErrorIconComponent, MdyInlineErrorsDirective, MdyLoadOptionsDirective, MdyMaxDirective, MdyMaxLengthDirective, MdyMinDirective, MdyMinLengthDirective, MdyMultiselectComponent, MdyNumberComponent, MdyOptionDirective, MdyOptionsAutoLoadingDirective, MdyOptionsOverlayControl, MdyOverlayControl, MdyPatternDirective, MdyPrefixDirective, MdyRadioGroupComponent, MdyRangeCalendarComponent, MdyRangeCalendarGridComponent, MdyRequiredDirective, MdySegmentedButtonComponent, MdySelectComponent, MdySliderComponent, MdySuffixDirective, MdySupportingTextDirective, MdyTextComponent, MdyTextareaComponent, MdyTimepickerComponent, MdyToggleComponent, MdyTypedForm, MdyValidatorBaseDirective, MdyWidgetRuntime, MdyWizardStepComponent, angularReactivity, array, field, group, mdyForm, provideModyraLocale };
|
|
2384
|
+
export type { MdyAngularCommandHandlers, MdyAngularSelectAdapterOptions, MdyAnyArrayDescriptor, MdyAnyFieldDescriptor, MdyAnyGroupDescriptor, MdyArrayDescriptor, MdyArrayHandle, MdyArrayItemValue, MdyControlRendererConfig, MdyDeclarativeRegistry, MdyElementRefMap, MdyFieldConfig, MdyFieldDescriptor, MdyFieldHandle, MdyFieldHandleTree, MdyFieldOptions, MdyFieldRef, MdyFieldState, MdyFieldTree, MdyFormAdapter, MdyFormContext, MdyFormOptions, MdyFormPatch, MdyFormSchema, MdyFormState, MdyFormValue, MdyGroupDescriptor, MdyItemHandleTree, MdyItemRefLookup, MdyLocaleOptions, MdyOptionsControl, MdyOptionsLoader, MdyTypedFormLike };
|
|
2385
|
+
//# sourceMappingURL=modyra-angular.d.ts.map
|