@ngneers/controls 0.0.1-next.0 → 0.0.1-next.2

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.
Files changed (119) hide show
  1. package/fesm2022/ngneers-controls-api-ng.mjs +11 -18
  2. package/fesm2022/ngneers-controls-api-ng.mjs.map +1 -1
  3. package/fesm2022/ngneers-controls-api-resize.mjs +7 -0
  4. package/fesm2022/ngneers-controls-api-resize.mjs.map +1 -1
  5. package/fesm2022/ngneers-controls-badge.mjs +160 -0
  6. package/fesm2022/ngneers-controls-badge.mjs.map +1 -0
  7. package/fesm2022/ngneers-controls-base.mjs +85 -8
  8. package/fesm2022/ngneers-controls-base.mjs.map +1 -1
  9. package/fesm2022/{ngneers-controls-calendar-time-CJT5AFlA.mjs → ngneers-controls-calendar-time-paM6WVpV.mjs} +2 -2
  10. package/fesm2022/{ngneers-controls-calendar-time-CJT5AFlA.mjs.map → ngneers-controls-calendar-time-paM6WVpV.mjs.map} +1 -1
  11. package/fesm2022/ngneers-controls-calendar.mjs +13 -6
  12. package/fesm2022/ngneers-controls-calendar.mjs.map +1 -1
  13. package/fesm2022/ngneers-controls-checkbox.mjs +3 -3
  14. package/fesm2022/ngneers-controls-checkbox.mjs.map +1 -1
  15. package/fesm2022/ngneers-controls-color-picker.mjs +336 -0
  16. package/fesm2022/ngneers-controls-color-picker.mjs.map +1 -0
  17. package/fesm2022/ngneers-controls-default-icons.mjs +5 -0
  18. package/fesm2022/ngneers-controls-default-icons.mjs.map +1 -1
  19. package/fesm2022/ngneers-controls-directives.mjs +64 -7
  20. package/fesm2022/ngneers-controls-directives.mjs.map +1 -1
  21. package/fesm2022/ngneers-controls-edit-inplace.mjs +15 -5
  22. package/fesm2022/ngneers-controls-edit-inplace.mjs.map +1 -1
  23. package/fesm2022/ngneers-controls-errors.mjs +203 -148
  24. package/fesm2022/ngneers-controls-errors.mjs.map +1 -1
  25. package/fesm2022/ngneers-controls-filter.mjs +2 -2
  26. package/fesm2022/ngneers-controls-filter.mjs.map +1 -1
  27. package/fesm2022/ngneers-controls-hint.mjs +18 -1
  28. package/fesm2022/ngneers-controls-hint.mjs.map +1 -1
  29. package/fesm2022/ngneers-controls-i18n-translations-de.mjs +17 -0
  30. package/fesm2022/ngneers-controls-i18n-translations-de.mjs.map +1 -1
  31. package/fesm2022/ngneers-controls-i18n-translations-en.mjs +19 -0
  32. package/fesm2022/ngneers-controls-i18n-translations-en.mjs.map +1 -1
  33. package/fesm2022/ngneers-controls-icon.mjs +23 -6
  34. package/fesm2022/ngneers-controls-icon.mjs.map +1 -1
  35. package/fesm2022/ngneers-controls-input-field.mjs +18 -2
  36. package/fesm2022/ngneers-controls-input-field.mjs.map +1 -1
  37. package/fesm2022/ngneers-controls-input.mjs +49 -9
  38. package/fesm2022/ngneers-controls-input.mjs.map +1 -1
  39. package/fesm2022/ngneers-controls-list-box.mjs +2 -2
  40. package/fesm2022/ngneers-controls-list-box.mjs.map +1 -1
  41. package/fesm2022/ngneers-controls-mask-input.mjs +4 -1
  42. package/fesm2022/ngneers-controls-mask-input.mjs.map +1 -1
  43. package/fesm2022/ngneers-controls-number-input.mjs +4 -4
  44. package/fesm2022/ngneers-controls-number-input.mjs.map +1 -1
  45. package/fesm2022/ngneers-controls-otp.mjs +263 -0
  46. package/fesm2022/ngneers-controls-otp.mjs.map +1 -0
  47. package/fesm2022/ngneers-controls-paginator.mjs +36 -9
  48. package/fesm2022/ngneers-controls-paginator.mjs.map +1 -1
  49. package/fesm2022/ngneers-controls-radio.mjs +4 -4
  50. package/fesm2022/ngneers-controls-radio.mjs.map +1 -1
  51. package/fesm2022/ngneers-controls-rating.mjs +180 -0
  52. package/fesm2022/ngneers-controls-rating.mjs.map +1 -0
  53. package/fesm2022/ngneers-controls-scroll-shadow.mjs +33 -7
  54. package/fesm2022/ngneers-controls-scroll-shadow.mjs.map +1 -1
  55. package/fesm2022/ngneers-controls-scroller.mjs +4 -2
  56. package/fesm2022/ngneers-controls-scroller.mjs.map +1 -1
  57. package/fesm2022/ngneers-controls-select-button.mjs +2 -1
  58. package/fesm2022/ngneers-controls-select-button.mjs.map +1 -1
  59. package/fesm2022/ngneers-controls-select.mjs +24 -4
  60. package/fesm2022/ngneers-controls-select.mjs.map +1 -1
  61. package/fesm2022/ngneers-controls-slider.mjs +3 -3
  62. package/fesm2022/ngneers-controls-slider.mjs.map +1 -1
  63. package/fesm2022/ngneers-controls-splitter.mjs +43 -12
  64. package/fesm2022/ngneers-controls-splitter.mjs.map +1 -1
  65. package/fesm2022/ngneers-controls-stepper.mjs +142 -0
  66. package/fesm2022/ngneers-controls-stepper.mjs.map +1 -0
  67. package/fesm2022/ngneers-controls-switch.mjs +3 -3
  68. package/fesm2022/ngneers-controls-switch.mjs.map +1 -1
  69. package/fesm2022/ngneers-controls-table.mjs +282 -15
  70. package/fesm2022/ngneers-controls-table.mjs.map +1 -1
  71. package/fesm2022/ngneers-controls-tabs.mjs +2 -2
  72. package/fesm2022/ngneers-controls-tabs.mjs.map +1 -1
  73. package/fesm2022/ngneers-controls-toggle-button.mjs +3 -3
  74. package/fesm2022/ngneers-controls-toggle-button.mjs.map +1 -1
  75. package/fesm2022/ngneers-controls-tooltip.mjs +16 -28
  76. package/fesm2022/ngneers-controls-tooltip.mjs.map +1 -1
  77. package/fesm2022/ngneers-controls-tree.mjs +2 -2
  78. package/fesm2022/ngneers-controls-tree.mjs.map +1 -1
  79. package/fesm2022/ngneers-controls-utils.mjs +138 -1
  80. package/fesm2022/ngneers-controls-utils.mjs.map +1 -1
  81. package/package.json +22 -2
  82. package/types/ngneers-controls-api-ng.d.ts +12 -9
  83. package/types/ngneers-controls-badge.d.ts +67 -0
  84. package/types/ngneers-controls-base.d.ts +61 -4
  85. package/types/ngneers-controls-breadcrumb.d.ts +17 -0
  86. package/types/ngneers-controls-calendar.d.ts +24 -6
  87. package/types/ngneers-controls-chip.d.ts +17 -0
  88. package/types/ngneers-controls-color-picker.d.ts +119 -0
  89. package/types/ngneers-controls-dialog.d.ts +17 -0
  90. package/types/ngneers-controls-directives.d.ts +31 -2
  91. package/types/ngneers-controls-drawer.d.ts +17 -0
  92. package/types/ngneers-controls-edit-inplace.d.ts +23 -0
  93. package/types/ngneers-controls-errors.d.ts +105 -16
  94. package/types/ngneers-controls-filter.d.ts +30 -13
  95. package/types/ngneers-controls-hint.d.ts +8 -1
  96. package/types/ngneers-controls-i18n-translations-de.d.ts +17 -0
  97. package/types/ngneers-controls-i18n-translations-en.d.ts +17 -0
  98. package/types/ngneers-controls-i18n.d.ts +17 -0
  99. package/types/ngneers-controls-icon.d.ts +2 -2
  100. package/types/ngneers-controls-input-field.d.ts +28 -2
  101. package/types/ngneers-controls-input.d.ts +35 -3
  102. package/types/ngneers-controls-list-box.d.ts +17 -0
  103. package/types/ngneers-controls-mask-input.d.ts +17 -0
  104. package/types/ngneers-controls-otp.d.ts +262 -0
  105. package/types/ngneers-controls-paginator.d.ts +34 -3
  106. package/types/ngneers-controls-rating.d.ts +69 -0
  107. package/types/ngneers-controls-scroll-shadow.d.ts +11 -2
  108. package/types/ngneers-controls-scroller.d.ts +3 -1
  109. package/types/ngneers-controls-select.d.ts +30 -3
  110. package/types/ngneers-controls-snackbar.d.ts +17 -0
  111. package/types/ngneers-controls-splitter.d.ts +26 -2
  112. package/types/ngneers-controls-state.d.ts +2 -2
  113. package/types/ngneers-controls-stepper.d.ts +68 -0
  114. package/types/ngneers-controls-table.d.ts +276 -169
  115. package/types/ngneers-controls-toast.d.ts +17 -0
  116. package/types/ngneers-controls-tooltip.d.ts +0 -1
  117. package/types/ngneers-controls-tree.d.ts +17 -0
  118. package/types/ngneers-controls-upload.d.ts +17 -0
  119. package/types/ngneers-controls-utils.d.ts +27 -2
@@ -161,6 +161,9 @@ declare class NgnEditInplace extends EditInplaceTemplates {
161
161
  segmentRange: string;
162
162
  optionSeparator: string;
163
163
  };
164
+ otp: {
165
+ cellLabel: string;
166
+ };
164
167
  drawer: {
165
168
  close: string;
166
169
  };
@@ -218,6 +221,8 @@ declare class NgnEditInplace extends EditInplaceTemplates {
218
221
  selectedCount: string;
219
222
  page: string;
220
223
  resultCount: string;
224
+ retry: string;
225
+ loadError: string;
221
226
  };
222
227
  state: {
223
228
  loading: string;
@@ -226,8 +231,26 @@ declare class NgnEditInplace extends EditInplaceTemplates {
226
231
  error: string;
227
232
  cancelled: string;
228
233
  };
234
+ errors: {
235
+ pending: string;
236
+ required: string;
237
+ email: string;
238
+ minlength: string;
239
+ maxlength: string;
240
+ minLength: string;
241
+ maxLength: string;
242
+ min: string;
243
+ max: string;
244
+ pattern: string;
245
+ };
229
246
  }, "_">;
230
247
  protected readonly closeContent: () => void;
248
+ /**
249
+ * Closes the edit view from a user confirm (Enter / confirm button). Marks the
250
+ * control touched first, so `ngnErrorsShowOn="touched"` reveals errors after an
251
+ * inline confirm — not just after blurring out of the control (see {@link focusOut}).
252
+ */
253
+ protected readonly confirmEdit: () => void;
231
254
  /**
232
255
  * Controls the visibility of the content.
233
256
  */
@@ -1,7 +1,45 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { Signal, InjectionToken, Provider } from '@angular/core';
3
- import { NgnHint } from '@ngneers/controls/hint';
4
3
  import { ValidationErrors } from '@angular/forms';
4
+ import { NgnHint } from '@ngneers/controls/hint';
5
+
6
+ /**
7
+ * A paradigm-agnostic, reactive view of the form control sitting on the host
8
+ * element — the compatibility layer `ngnErrors` reads so it never has to branch
9
+ * on which form paradigm is in play.
10
+ *
11
+ * Angular 22 has no single signal API spanning the three paradigms, so this
12
+ * bridges them onto one shape:
13
+ * - **Reactive** (`formControl` / `formControlName`) and **template-driven**
14
+ * (`ngModel`) both expose an `NgControl` → `AbstractControl`.
15
+ * - **Signal forms** (`[formField]`) provide the same `NgControl` via interop,
16
+ * backed by the field's `errors()` / `touched()` / `dirty()` / `pending()`.
17
+ * - **No form**: there is no `AbstractControl`, so `touched` falls back to the
18
+ * control's own `touched` signal (also reflecting an external `[touched]`
19
+ * binding), OR-ed with its `touch` output (blur) for controls that only report
20
+ * blur that way.
21
+ *
22
+ * `AbstractControl` isn't signal-based; its single `events` stream (value /
23
+ * status / touched / pristine) is the one subscription that keeps these signals
24
+ * live — replacing separate `valueChanges` + `statusChanges` watches.
25
+ */
26
+ interface NgnControlState {
27
+ /** Host control name, used to match relevant parent/group errors. */
28
+ readonly name: string | number | null;
29
+ /** Validation errors of the host control (all paradigms), or `null`. */
30
+ readonly errors: Signal<ValidationErrors | null>;
31
+ /** Validation errors of the parent group, when distinct from the host. */
32
+ readonly parentErrors: Signal<ValidationErrors | null>;
33
+ readonly touched: Signal<boolean>;
34
+ readonly dirty: Signal<boolean>;
35
+ readonly pending: Signal<boolean>;
36
+ readonly submitted: Signal<boolean>;
37
+ }
38
+ /**
39
+ * Resolves and reactively tracks the {@link NgnControlState} of the host
40
+ * element. Must be called in an injection context (field/directive constructor).
41
+ */
42
+ declare function injectNgnControlState(): NgnControlState;
5
43
 
6
44
  /**
7
45
  * Origin of a normalized validation error.
@@ -76,6 +114,24 @@ interface NgnErrorsState {
76
114
  message: string | null;
77
115
  }
78
116
 
117
+ /**
118
+ * Resolves validation errors for the control it sits on and exposes them as
119
+ * normalized, message-mapped signals — ready to bridge into an {@link NgnHint}
120
+ * via {@link NgnErrors.ngnErrorsHint}.
121
+ *
122
+ * Which form paradigm is in play is abstracted away by {@link injectNgnControlState}:
123
+ * template-driven (`ngModel`), reactive (`formControl` / `formControlName`) and
124
+ * signal forms (`[formField]`) all surface as one reactive state, including
125
+ * relevant parent-group errors and a no-form `touched` fallback.
126
+ *
127
+ * `ngnErrorsCustom` layers on additional errors independently of any form, and
128
+ * {@link NgnErrors.ngnErrorsShowOn} controls when messages surface (defaults to
129
+ * `touched`). Error keys map onto the shared message table; signal-forms
130
+ * `minLength` / `maxLength` kinds have their own table entries alongside the
131
+ * classic lowercase `minlength` / `maxlength`.
132
+ *
133
+ * @category control
134
+ */
79
135
  declare class NgnErrors {
80
136
  /**
81
137
  * Hint instance that receives the resolved validation state.
@@ -102,30 +158,52 @@ declare class NgnErrors {
102
158
  * @category inputs
103
159
  */
104
160
  readonly ngnErrorsCustom: _angular_core.InputSignal<NgnErrorsCustom>;
105
- private readonly _ngControl;
106
- private readonly _selfContainer;
107
- private readonly _parentContainer;
108
- private readonly _ngnControl;
161
+ /** Paradigm-agnostic view of the host control (see {@link injectNgnControlState}). */
162
+ private readonly _state;
163
+ private readonly _i18n;
109
164
  private readonly _globalMessages;
110
- private readonly _version;
111
165
  readonly errors: Signal<readonly NgnError[]>;
112
166
  readonly firstError: Signal<NgnError | null>;
113
167
  readonly pending: Signal<boolean>;
168
+ /**
169
+ * Whether the i18n error defaults are loaded. Probes a core key that every
170
+ * locale defines — until the async translation import lands, `_translate`
171
+ * echoes the key path back, which this detects.
172
+ */
173
+ private readonly _i18nReady;
174
+ /**
175
+ * Whether display should wait: some visible error depends on the i18n default
176
+ * (no instance / carried / global message) and translations aren't loaded yet.
177
+ */
178
+ private readonly _awaitingI18n;
114
179
  readonly visible: Signal<boolean>;
115
180
  readonly message: Signal<string | null>;
116
181
  readonly state: Signal<NgnErrorsState>;
117
182
  constructor();
118
- private _watchControl;
119
- private _hostControl;
120
- private _parentControl;
121
- private _rootControl;
122
- private _submittedSource;
123
- private _submitted;
124
183
  private _normalizeGroupErrors;
125
184
  private _normalizeCustomErrors;
126
185
  private _normalizeErrors;
127
186
  private _createCustomEntryError;
128
187
  private _createError;
188
+ /**
189
+ * Resolves a display message for an error, in priority order:
190
+ * per-instance {@link ngnErrorsMessages} → a message carried on the error
191
+ * itself → globally provided messages → the i18n `errors.*` default → the key.
192
+ */
193
+ private _resolveMessage;
194
+ /**
195
+ * Whether an error's message can only come from the i18n default (or the raw
196
+ * key fallback) — i.e. no per-instance, carried, or global message applies.
197
+ * Such errors are held from display until translations load (see
198
+ * {@link _awaitingI18n}); all others show immediately.
199
+ */
200
+ private _dependsOnI18n;
201
+ /**
202
+ * Looks up the i18n `errors.<key>` default, interpolating the error params.
203
+ * Returns `undefined` when the key is unknown or translations aren't loaded —
204
+ * `signal-translate` echoes the flat path back in that case, which we detect.
205
+ */
206
+ private _translate;
129
207
  private _isGroupErrorRelevant;
130
208
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnErrors, never>;
131
209
  static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgnErrors, "[ngnErrors]", ["ngnErrors"], { "ngnErrorsHint": { "alias": "ngnErrorsHint"; "required": false; "isSignal": true; }; "ngnErrorsShowOn": { "alias": "ngnErrorsShowOn"; "required": false; "isSignal": true; }; "ngnErrorsMode": { "alias": "ngnErrorsMode"; "required": false; "isSignal": true; }; "ngnErrorsMessages": { "alias": "ngnErrorsMessages"; "required": false; "isSignal": true; }; "ngnErrorsCustom": { "alias": "ngnErrorsCustom"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -146,10 +224,21 @@ declare function provideNgnErrorsMessages(messages: NgnErrorsMessages): Provider
146
224
  * @category providers
147
225
  */
148
226
  declare function injectNgnErrorsMessages(): NgnErrorsMessages;
149
- declare const defaultNgnErrorsMessages: NgnErrorsMessages;
150
- declare function resolveNgnErrorMessage(context: NgnErrorsMessageContext, messages: NgnErrorsMessages): string;
227
+ /**
228
+ * Resolves a message for the context's key from a user-provided message map,
229
+ * or `undefined` if the map has no (non-null) entry for it. Function resolvers
230
+ * that return `null`/`undefined` are treated as "no message" so resolution can
231
+ * fall through to the next source.
232
+ */
233
+ declare function resolveUserMessage(context: NgnErrorsMessageContext, messages: NgnErrorsMessages): string | undefined;
234
+ /**
235
+ * A message carried on the error itself — a plain-string error value, or a
236
+ * `message` field on the error object (e.g. a signal-forms validator's
237
+ * `{ message }`, or a group error). `undefined` when the error carries none.
238
+ */
239
+ declare function carriedMessage(value: unknown): string | undefined;
151
240
  declare function paramsFromValue(value: unknown): Record<string, unknown>;
152
241
  declare function isRecord(value: unknown): value is Record<string, unknown>;
153
242
 
154
- export { NGN_ERRORS_MESSAGES, NgnErrors, defaultNgnErrorsMessages, injectNgnErrorsMessages, isRecord, paramsFromValue, provideNgnErrorsMessages, resolveNgnErrorMessage };
155
- export type { NgnError, NgnErrorsCustom, NgnErrorsCustomEntry, NgnErrorsMessage, NgnErrorsMessageContext, NgnErrorsMessages, NgnErrorsMode, NgnErrorsShowOn, NgnErrorsSource, NgnErrorsState };
243
+ export { NGN_ERRORS_MESSAGES, NgnErrors, carriedMessage, injectNgnControlState, injectNgnErrorsMessages, isRecord, paramsFromValue, provideNgnErrorsMessages, resolveUserMessage };
244
+ export type { NgnControlState, NgnError, NgnErrorsCustom, NgnErrorsCustomEntry, NgnErrorsMessage, NgnErrorsMessageContext, NgnErrorsMessages, NgnErrorsMode, NgnErrorsShowOn, NgnErrorsSource, NgnErrorsState };
@@ -55,28 +55,28 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
55
55
  readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
56
56
  }, {
57
57
  readonly class: "input-field";
58
- readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
58
+ readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
59
59
  readonly class: "input";
60
60
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
61
61
  readonly projected: true;
62
62
  }]>;
63
63
  }, {
64
64
  readonly class: "value";
65
- readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
65
+ readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
66
66
  readonly class: "input";
67
67
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
68
68
  readonly projected: true;
69
69
  }]>;
70
70
  }, {
71
71
  readonly class: "operator";
72
- readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
72
+ readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
73
73
  readonly class: "input";
74
74
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
75
75
  readonly projected: true;
76
76
  }]>;
77
77
  }, {
78
78
  readonly class: "list-select";
79
- readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
79
+ readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "empty", "placeholder", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
80
80
  readonly class: "popover";
81
81
  readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
82
82
  }, {
@@ -90,7 +90,7 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
90
90
  }]>;
91
91
  }, {
92
92
  readonly class: "filter";
93
- readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
93
+ readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
94
94
  readonly class: "input";
95
95
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
96
96
  readonly projected: true;
@@ -98,7 +98,7 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
98
98
  }]>;
99
99
  }, {
100
100
  readonly class: "operator-select";
101
- readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
101
+ readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "empty", "placeholder", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
102
102
  readonly class: "popover";
103
103
  readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
104
104
  }, {
@@ -112,7 +112,7 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
112
112
  }]>;
113
113
  }, {
114
114
  readonly class: "filter";
115
- readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
115
+ readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
116
116
  readonly class: "input";
117
117
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
118
118
  readonly projected: true;
@@ -137,7 +137,7 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
137
137
  readonly template: _ngneers_controls_themes.ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
138
138
  }, {
139
139
  readonly class: "current-month";
140
- readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
140
+ readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "empty", "placeholder", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
141
141
  readonly class: "popover";
142
142
  readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
143
143
  }, {
@@ -151,7 +151,7 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
151
151
  }]>;
152
152
  }, {
153
153
  readonly class: "filter";
154
- readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
154
+ readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
155
155
  readonly class: "input";
156
156
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
157
157
  readonly projected: true;
@@ -159,7 +159,7 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
159
159
  }]>;
160
160
  }, {
161
161
  readonly class: "current-year";
162
- readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
162
+ readonly template: _ngneers_controls_themes.ControlTemplate<"select", ["root", "combobox", "empty", "placeholder", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
163
163
  readonly class: "popover";
164
164
  readonly template: _ngneers_controls_themes.ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
165
165
  }, {
@@ -173,7 +173,7 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
173
173
  }]>;
174
174
  }, {
175
175
  readonly class: "filter";
176
- readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
176
+ readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
177
177
  readonly class: "input";
178
178
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
179
179
  readonly projected: true;
@@ -181,14 +181,14 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
181
181
  }]>;
182
182
  }, {
183
183
  readonly class: "current-month-field";
184
- readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
184
+ readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
185
185
  readonly class: "input";
186
186
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
187
187
  readonly projected: true;
188
188
  }]>;
189
189
  }, {
190
190
  readonly class: "current-year-field";
191
- readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
191
+ readonly template: _ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
192
192
  readonly class: "input";
193
193
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
194
194
  readonly projected: true;
@@ -310,6 +310,9 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
310
310
  segmentRange: string;
311
311
  optionSeparator: string;
312
312
  };
313
+ otp: {
314
+ cellLabel: string;
315
+ };
313
316
  drawer: {
314
317
  close: string;
315
318
  };
@@ -367,6 +370,8 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
367
370
  selectedCount: string;
368
371
  page: string;
369
372
  resultCount: string;
373
+ retry: string;
374
+ loadError: string;
370
375
  };
371
376
  state: {
372
377
  loading: string;
@@ -375,6 +380,18 @@ declare class NgnFilter<T = unknown> extends ValueControlBase<'filter', NgnFilte
375
380
  error: string;
376
381
  cancelled: string;
377
382
  };
383
+ errors: {
384
+ pending: string;
385
+ required: string;
386
+ email: string;
387
+ minlength: string;
388
+ maxlength: string;
389
+ minLength: string;
390
+ maxLength: string;
391
+ min: string;
392
+ max: string;
393
+ pattern: string;
394
+ };
378
395
  }, "_">;
379
396
  protected readonly unsafeI18n: (key: string) => _angular_core.Signal<string>;
380
397
  private readonly _destroyRef;
@@ -60,6 +60,13 @@ declare class NgnHint extends NgnBase<'hint'> {
60
60
  private readonly _activeValidationState;
61
61
  private readonly _userContentTemplate;
62
62
  protected readonly hasIconOnlyTooltipContent: _angular_core.Signal<boolean>;
63
+ /**
64
+ * Whether to collapse the host. Only auto-hides when the hint is wired as a
65
+ * validation hint (has a validation state) that is currently not visible and
66
+ * carries no static content of its own — i.e. an empty error slot. Plain hints
67
+ * (no validation state) never auto-hide.
68
+ */
69
+ protected readonly isHidden: _angular_core.Signal<boolean>;
63
70
  /**
64
71
  * Bridge validation state from a companion directive such as ngnErrors.
65
72
  * @category methods
@@ -79,7 +86,7 @@ declare class NgnHint extends NgnBase<'hint'> {
79
86
  * The icon registry key of the default icon for the current kind, or
80
87
  * `undefined` for the neutral `default` kind.
81
88
  */
82
- protected readonly defaultIconKey: _angular_core.Signal<"accordion-collapse" | "accordion-expand" | "breadcrumb-separator" | "breadcrumb-overflow" | "calendar-trigger" | "calendar-previous-month" | "calendar-next-month" | "checkbox-checked" | "checkbox-indeterminate" | "chip-remove" | "dialog-close" | "drawer-close" | "dropdown-toggle" | "edit-confirm" | "filter-active" | "filter-inactive" | "filter-remove" | "hint-info" | "hint-success" | "hint-warning" | "hint-error" | "input-clear" | "menu-submenu" | "paginator-previous" | "paginator-next" | "search" | "sort-neutral" | "sort-ascending" | "sort-descending" | "spin-decrement" | "spin-increment" | "table-group-toggle" | "tabs-scroll-left" | "tabs-scroll-right" | "toast-close" | "snackbar-close" | "upload-trigger" | "upload-done" | "upload-failed" | "upload-retry" | "upload-cancel" | "upload-remove" | undefined>;
89
+ protected readonly defaultIconKey: _angular_core.Signal<"accordion-collapse" | "accordion-expand" | "breadcrumb-separator" | "breadcrumb-overflow" | "calendar-trigger" | "calendar-previous-month" | "calendar-next-month" | "checkbox-checked" | "checkbox-indeterminate" | "chip-remove" | "dialog-close" | "drawer-close" | "dropdown-toggle" | "edit-confirm" | "filter-active" | "filter-inactive" | "filter-remove" | "hint-info" | "hint-success" | "hint-warning" | "hint-error" | "input-clear" | "menu-submenu" | "paginator-previous" | "paginator-next" | "rating-full" | "rating-empty" | "search" | "sort-neutral" | "sort-ascending" | "sort-descending" | "spin-decrement" | "spin-increment" | "stepper-completed" | "table-group-toggle" | "tabs-scroll-left" | "tabs-scroll-right" | "toast-close" | "snackbar-close" | "upload-trigger" | "upload-done" | "upload-failed" | "upload-retry" | "upload-cancel" | "upload-remove" | undefined>;
83
90
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgnHint, never>;
84
91
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgnHint, "ngn-hint", never, { "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "validationState": { "alias": "validationState"; "required": false; "isSignal": true; }; }, {}, ["_userContentTemplate"], ["*"], true, never>;
85
92
  }
@@ -94,6 +94,9 @@ declare const de: {
94
94
  segmentRange: string;
95
95
  optionSeparator: string;
96
96
  };
97
+ otp: {
98
+ cellLabel: string;
99
+ };
97
100
  drawer: {
98
101
  close: string;
99
102
  };
@@ -151,6 +154,8 @@ declare const de: {
151
154
  selectedCount: string;
152
155
  page: string;
153
156
  resultCount: string;
157
+ retry: string;
158
+ loadError: string;
154
159
  };
155
160
  state: {
156
161
  loading: string;
@@ -159,6 +164,18 @@ declare const de: {
159
164
  error: string;
160
165
  cancelled: string;
161
166
  };
167
+ errors: {
168
+ pending: string;
169
+ required: string;
170
+ email: string;
171
+ minlength: string;
172
+ maxlength: string;
173
+ minLength: string;
174
+ maxLength: string;
175
+ min: string;
176
+ max: string;
177
+ pattern: string;
178
+ };
162
179
  };
163
180
 
164
181
  export { de };
@@ -94,6 +94,9 @@ declare const en: {
94
94
  segmentRange: string;
95
95
  optionSeparator: string;
96
96
  };
97
+ otp: {
98
+ cellLabel: string;
99
+ };
97
100
  drawer: {
98
101
  close: string;
99
102
  };
@@ -151,6 +154,8 @@ declare const en: {
151
154
  selectedCount: string;
152
155
  page: string;
153
156
  resultCount: string;
157
+ retry: string;
158
+ loadError: string;
154
159
  };
155
160
  state: {
156
161
  loading: string;
@@ -159,6 +164,18 @@ declare const en: {
159
164
  error: string;
160
165
  cancelled: string;
161
166
  };
167
+ errors: {
168
+ pending: string;
169
+ required: string;
170
+ email: string;
171
+ minlength: string;
172
+ maxlength: string;
173
+ minLength: string;
174
+ maxLength: string;
175
+ min: string;
176
+ max: string;
177
+ pattern: string;
178
+ };
162
179
  };
163
180
 
164
181
  export { en };
@@ -98,6 +98,9 @@ declare const en: {
98
98
  segmentRange: string;
99
99
  optionSeparator: string;
100
100
  };
101
+ otp: {
102
+ cellLabel: string;
103
+ };
101
104
  drawer: {
102
105
  close: string;
103
106
  };
@@ -155,6 +158,8 @@ declare const en: {
155
158
  selectedCount: string;
156
159
  page: string;
157
160
  resultCount: string;
161
+ retry: string;
162
+ loadError: string;
158
163
  };
159
164
  state: {
160
165
  loading: string;
@@ -163,6 +168,18 @@ declare const en: {
163
168
  error: string;
164
169
  cancelled: string;
165
170
  };
171
+ errors: {
172
+ pending: string;
173
+ required: string;
174
+ email: string;
175
+ minlength: string;
176
+ maxlength: string;
177
+ minLength: string;
178
+ maxLength: string;
179
+ min: string;
180
+ max: string;
181
+ pattern: string;
182
+ };
166
183
  };
167
184
 
168
185
  declare const supportedLanguages: readonly ["en", "de"];
@@ -26,7 +26,7 @@ declare class GlobalIconTemplate implements OnDestroy {
26
26
  static ɵprov: _angular_core.ɵɵInjectableDeclaration<GlobalIconTemplate>;
27
27
  }
28
28
 
29
- declare const NGN_ICON_KEYS: readonly ["accordion-collapse", "accordion-expand", "breadcrumb-separator", "breadcrumb-overflow", "calendar-trigger", "calendar-previous-month", "calendar-next-month", "checkbox-checked", "checkbox-indeterminate", "chip-remove", "dialog-close", "drawer-close", "dropdown-toggle", "edit-confirm", "filter-active", "filter-inactive", "filter-remove", "hint-info", "hint-success", "hint-warning", "hint-error", "input-clear", "menu-submenu", "paginator-previous", "paginator-next", "search", "sort-neutral", "sort-ascending", "sort-descending", "spin-decrement", "spin-increment", "table-group-toggle", "tabs-scroll-left", "tabs-scroll-right", "toast-close", "snackbar-close", "upload-trigger", "upload-done", "upload-failed", "upload-retry", "upload-cancel", "upload-remove"];
29
+ declare const NGN_ICON_KEYS: readonly ["accordion-collapse", "accordion-expand", "breadcrumb-separator", "breadcrumb-overflow", "calendar-trigger", "calendar-previous-month", "calendar-next-month", "checkbox-checked", "checkbox-indeterminate", "chip-remove", "dialog-close", "drawer-close", "dropdown-toggle", "edit-confirm", "filter-active", "filter-inactive", "filter-remove", "hint-info", "hint-success", "hint-warning", "hint-error", "input-clear", "menu-submenu", "paginator-previous", "paginator-next", "rating-full", "rating-empty", "search", "sort-neutral", "sort-ascending", "sort-descending", "spin-decrement", "spin-increment", "stepper-completed", "table-group-toggle", "tabs-scroll-left", "tabs-scroll-right", "toast-close", "snackbar-close", "upload-trigger", "upload-done", "upload-failed", "upload-retry", "upload-cancel", "upload-remove"];
30
30
  type NgnIconKey = (typeof NGN_ICON_KEYS)[number];
31
31
  type NgnIconRegistry = Record<NgnIconKey, IconifyIcon | NgnIconEntry>;
32
32
  type NgnCustomIconRegistry = Record<NgnIconKey, IconType>;
@@ -48,7 +48,7 @@ declare class NgnIcon extends NgnBase<'icon'> {
48
48
  * Used as a fallback when {@link icon} is not provided; requires an icon registry.
49
49
  * @default undefined
50
50
  */
51
- readonly defaultIcon: _angular_core.InputSignal<"accordion-collapse" | "accordion-expand" | "breadcrumb-separator" | "breadcrumb-overflow" | "calendar-trigger" | "calendar-previous-month" | "calendar-next-month" | "checkbox-checked" | "checkbox-indeterminate" | "chip-remove" | "dialog-close" | "drawer-close" | "dropdown-toggle" | "edit-confirm" | "filter-active" | "filter-inactive" | "filter-remove" | "hint-info" | "hint-success" | "hint-warning" | "hint-error" | "input-clear" | "menu-submenu" | "paginator-previous" | "paginator-next" | "search" | "sort-neutral" | "sort-ascending" | "sort-descending" | "spin-decrement" | "spin-increment" | "table-group-toggle" | "tabs-scroll-left" | "tabs-scroll-right" | "toast-close" | "snackbar-close" | "upload-trigger" | "upload-done" | "upload-failed" | "upload-retry" | "upload-cancel" | "upload-remove" | undefined>;
51
+ readonly defaultIcon: _angular_core.InputSignal<"accordion-collapse" | "accordion-expand" | "breadcrumb-separator" | "breadcrumb-overflow" | "calendar-trigger" | "calendar-previous-month" | "calendar-next-month" | "checkbox-checked" | "checkbox-indeterminate" | "chip-remove" | "dialog-close" | "drawer-close" | "dropdown-toggle" | "edit-confirm" | "filter-active" | "filter-inactive" | "filter-remove" | "hint-info" | "hint-success" | "hint-warning" | "hint-error" | "input-clear" | "menu-submenu" | "paginator-previous" | "paginator-next" | "rating-full" | "rating-empty" | "search" | "sort-neutral" | "sort-ascending" | "sort-descending" | "spin-decrement" | "spin-increment" | "stepper-completed" | "table-group-toggle" | "tabs-scroll-left" | "tabs-scroll-right" | "toast-close" | "snackbar-close" | "upload-trigger" | "upload-done" | "upload-failed" | "upload-retry" | "upload-cancel" | "upload-remove" | undefined>;
52
52
  /**
53
53
  * The icon to render. Accepts an Iconify data object, a registered icon entry, or a
54
54
  * custom value resolved via the {@link GlobalIconTemplate}. Takes precedence over {@link defaultIcon}.
@@ -10,7 +10,7 @@ import { NgnBase } from '@ngneers/controls/base';
10
10
  * @category control
11
11
  */
12
12
  declare class NgnInputField extends NgnBase<'inputField'> {
13
- protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
13
+ protected readonly theme: _ngneers_controls_api_ng.ControlTemplateInfo<_ngneers_controls_themes.ControlTemplate<"input-field", ["root", "host", "filled", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`, `kind-${string}`], readonly [{
14
14
  readonly class: "input";
15
15
  readonly template: _ngneers_controls_themes.ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
16
16
  readonly projected: true;
@@ -111,6 +111,9 @@ declare class NgnInputField extends NgnBase<'inputField'> {
111
111
  segmentRange: string;
112
112
  optionSeparator: string;
113
113
  };
114
+ otp: {
115
+ cellLabel: string;
116
+ };
114
117
  drawer: {
115
118
  close: string;
116
119
  };
@@ -168,6 +171,8 @@ declare class NgnInputField extends NgnBase<'inputField'> {
168
171
  selectedCount: string;
169
172
  page: string;
170
173
  resultCount: string;
174
+ retry: string;
175
+ loadError: string;
171
176
  };
172
177
  state: {
173
178
  loading: string;
@@ -176,6 +181,18 @@ declare class NgnInputField extends NgnBase<'inputField'> {
176
181
  error: string;
177
182
  cancelled: string;
178
183
  };
184
+ errors: {
185
+ pending: string;
186
+ required: string;
187
+ email: string;
188
+ minlength: string;
189
+ maxlength: string;
190
+ minLength: string;
191
+ maxLength: string;
192
+ min: string;
193
+ max: string;
194
+ pattern: string;
195
+ };
179
196
  }, "_">;
180
197
  /**
181
198
  * Label for the input field
@@ -214,7 +231,10 @@ declare class NgnInputField extends NgnBase<'inputField'> {
214
231
  */
215
232
  readonly tabindex: _angular_core.InputSignal<number>;
216
233
  /**
217
- * Explicitly apply invalid state styling
234
+ * Explicitly apply invalid state styling on the field chrome. The field does
235
+ * not compute validity — it also reflects its projected control's own invalid
236
+ * state (the child's gated `aria-invalid`) via the theme. Set this only to
237
+ * force the invalid look regardless of the child.
218
238
  * @default false
219
239
  */
220
240
  readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -236,6 +256,12 @@ declare class NgnInputField extends NgnBase<'inputField'> {
236
256
  * their placement/order never shadows the actual input.
237
257
  */
238
258
  readonly control: _angular_core.Signal<NgnBase<never> | undefined>;
259
+ /**
260
+ * Whether the projected control holds content. Drives float-label detection
261
+ * component-side (from the control's `empty` signal) so it works for every
262
+ * field control — select, calendar, mask-input — not just native inputs.
263
+ */
264
+ protected readonly filled: _angular_core.Signal<boolean>;
239
265
  /** The primary control's element when it is a native input/textarea. */
240
266
  private readonly _inputElement;
241
267
  constructor();