@nanahoshi/mona-ui 0.24.4 → 0.24.6

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 (80) hide show
  1. package/README.md +3 -0
  2. package/fesm2022/nanahoshi-mona-ui-auto-complete.mjs +95 -70
  3. package/fesm2022/nanahoshi-mona-ui-calendar.mjs +196 -137
  4. package/fesm2022/nanahoshi-mona-ui-combo-box.mjs +136 -89
  5. package/fesm2022/nanahoshi-mona-ui-date-input.mjs +164 -3
  6. package/fesm2022/nanahoshi-mona-ui-date-picker.mjs +124 -140
  7. package/fesm2022/nanahoshi-mona-ui-datetime-picker.mjs +205 -202
  8. package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs +108 -56
  9. package/fesm2022/nanahoshi-mona-ui-dropdowns.mjs +68 -59
  10. package/fesm2022/nanahoshi-mona-ui-editor.mjs +3 -3
  11. package/fesm2022/nanahoshi-mona-ui-filter.mjs +1 -1
  12. package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-row.component-DLOPRuFv.mjs → nanahoshi-mona-ui-grid-grid-footer-row.component-CD_ODHpU.mjs} +2 -2
  13. package/fesm2022/{nanahoshi-mona-ui-grid-grid-list.component-Dw5U9H0a.mjs → nanahoshi-mona-ui-grid-grid-list.component-0jN7I1jo.mjs} +4 -4
  14. package/fesm2022/{nanahoshi-mona-ui-grid-grid-row.component-D1kyAzD8.mjs → nanahoshi-mona-ui-grid-grid-row.component-BI_iE7pl.mjs} +3 -3
  15. package/fesm2022/{nanahoshi-mona-ui-grid-grid-virtual-list.component-ECK1_smx.mjs → nanahoshi-mona-ui-grid-grid-virtual-list.component-Sa1aAtJ-.mjs} +4 -4
  16. package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-D4lUDbfx.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BvUM9nPt.mjs} +8 -8
  17. package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
  18. package/fesm2022/nanahoshi-mona-ui-i18n-icu.mjs +2 -1
  19. package/fesm2022/nanahoshi-mona-ui-internal-indicator-icon.mjs +2 -2
  20. package/fesm2022/nanahoshi-mona-ui-internal.mjs +4 -2
  21. package/fesm2022/nanahoshi-mona-ui-locales-ar-sa.mjs +2 -1
  22. package/fesm2022/nanahoshi-mona-ui-locales-de-de.mjs +4 -1
  23. package/fesm2022/nanahoshi-mona-ui-locales-es-es.mjs +4 -1
  24. package/fesm2022/nanahoshi-mona-ui-locales-fr-fr.mjs +4 -1
  25. package/fesm2022/nanahoshi-mona-ui-locales-id-id.mjs +2 -1
  26. package/fesm2022/nanahoshi-mona-ui-locales-it-it.mjs +2 -1
  27. package/fesm2022/nanahoshi-mona-ui-locales-ja-jp.mjs +2 -1
  28. package/fesm2022/nanahoshi-mona-ui-locales-ko-kr.mjs +2 -1
  29. package/fesm2022/nanahoshi-mona-ui-locales-pt-br.mjs +2 -1
  30. package/fesm2022/nanahoshi-mona-ui-locales-ru-ru.mjs +2 -1
  31. package/fesm2022/nanahoshi-mona-ui-locales-tr-tr.mjs +2 -1
  32. package/fesm2022/nanahoshi-mona-ui-locales-zh-cn.mjs +2 -1
  33. package/fesm2022/nanahoshi-mona-ui-locales-zh-tw.mjs +2 -1
  34. package/fesm2022/nanahoshi-mona-ui-multi-select.mjs +118 -66
  35. package/fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs +195 -122
  36. package/fesm2022/nanahoshi-mona-ui-pager.mjs +1 -1
  37. package/fesm2022/nanahoshi-mona-ui-time-picker.mjs +149 -167
  38. package/fesm2022/nanahoshi-mona-ui-time-selector.mjs +182 -137
  39. package/i18n/catalogs/en-US.messages.json +2 -1
  40. package/locales/ar-sa/ar-sa.messages.json +2 -1
  41. package/locales/de-de/de-de.messages.json +2 -1
  42. package/locales/es-es/es-es.messages.json +2 -1
  43. package/locales/fr-fr/fr-fr.messages.json +2 -1
  44. package/locales/id-id/id-id.messages.json +2 -1
  45. package/locales/it-it/it-it.messages.json +2 -1
  46. package/locales/ja-jp/ja-jp.messages.json +2 -1
  47. package/locales/ko-kr/ko-kr.messages.json +2 -1
  48. package/locales/pt-br/pt-br.messages.json +2 -1
  49. package/locales/ru-ru/ru-ru.messages.json +2 -1
  50. package/locales/tr-tr/tr-tr.messages.json +2 -1
  51. package/locales/zh-cn/zh-cn.messages.json +2 -1
  52. package/locales/zh-tw/zh-tw.messages.json +2 -1
  53. package/package.json +2 -2
  54. package/types/nanahoshi-mona-ui-auto-complete.d.ts +34 -20
  55. package/types/nanahoshi-mona-ui-calendar.d.ts +30 -11
  56. package/types/nanahoshi-mona-ui-combo-box.d.ts +42 -23
  57. package/types/nanahoshi-mona-ui-date-input.d.ts +74 -3
  58. package/types/nanahoshi-mona-ui-date-picker.d.ts +61 -33
  59. package/types/nanahoshi-mona-ui-datetime-picker.d.ts +79 -38
  60. package/types/nanahoshi-mona-ui-dropdown-list.d.ts +29 -15
  61. package/types/nanahoshi-mona-ui-dropdowns.d.ts +30 -19
  62. package/types/nanahoshi-mona-ui-i18n.d.ts +1 -0
  63. package/types/nanahoshi-mona-ui-internal.d.ts +3 -1
  64. package/types/nanahoshi-mona-ui-locales-ar-sa.d.ts +1 -0
  65. package/types/nanahoshi-mona-ui-locales-de-de.d.ts +1 -0
  66. package/types/nanahoshi-mona-ui-locales-es-es.d.ts +1 -0
  67. package/types/nanahoshi-mona-ui-locales-fr-fr.d.ts +1 -0
  68. package/types/nanahoshi-mona-ui-locales-id-id.d.ts +1 -0
  69. package/types/nanahoshi-mona-ui-locales-it-it.d.ts +1 -0
  70. package/types/nanahoshi-mona-ui-locales-ja-jp.d.ts +1 -0
  71. package/types/nanahoshi-mona-ui-locales-ko-kr.d.ts +1 -0
  72. package/types/nanahoshi-mona-ui-locales-pt-br.d.ts +1 -0
  73. package/types/nanahoshi-mona-ui-locales-ru-ru.d.ts +1 -0
  74. package/types/nanahoshi-mona-ui-locales-tr-tr.d.ts +1 -0
  75. package/types/nanahoshi-mona-ui-locales-zh-cn.d.ts +1 -0
  76. package/types/nanahoshi-mona-ui-locales-zh-tw.d.ts +1 -0
  77. package/types/nanahoshi-mona-ui-multi-select.d.ts +45 -21
  78. package/types/nanahoshi-mona-ui-numeric-text-box.d.ts +57 -16
  79. package/types/nanahoshi-mona-ui-time-picker.d.ts +72 -42
  80. package/types/nanahoshi-mona-ui-time-selector.d.ts +78 -46
@@ -255,6 +255,7 @@ declare const MONA_KO_KR_LOCALE: {
255
255
  multiSelect: {
256
256
  clear: string;
257
257
  itemsCount: (count: number) => string;
258
+ removeMoreItems: (count: number) => string;
258
259
  };
259
260
  notification: {
260
261
  close: string;
@@ -255,6 +255,7 @@ declare const MONA_PT_BR_LOCALE: {
255
255
  multiSelect: {
256
256
  clear: string;
257
257
  itemsCount: (count: number) => string;
258
+ removeMoreItems: (count: number) => string;
258
259
  };
259
260
  notification: {
260
261
  close: string;
@@ -255,6 +255,7 @@ declare const MONA_RU_RU_LOCALE: {
255
255
  multiSelect: {
256
256
  clear: string;
257
257
  itemsCount: (count: number) => string;
258
+ removeMoreItems: (count: number) => string;
258
259
  };
259
260
  notification: {
260
261
  close: string;
@@ -255,6 +255,7 @@ declare const MONA_TR_TR_LOCALE: {
255
255
  multiSelect: {
256
256
  clear: string;
257
257
  itemsCount: (count: number) => string;
258
+ removeMoreItems: (count: number) => string;
258
259
  };
259
260
  notification: {
260
261
  close: string;
@@ -255,6 +255,7 @@ declare const MONA_ZH_CN_LOCALE: {
255
255
  multiSelect: {
256
256
  clear: string;
257
257
  itemsCount: (count: number) => string;
258
+ removeMoreItems: (count: number) => string;
258
259
  };
259
260
  notification: {
260
261
  close: string;
@@ -255,6 +255,7 @@ declare const MONA_ZH_TW_LOCALE: {
255
255
  multiSelect: {
256
256
  clear: string;
257
257
  itemsCount: (count: number) => string;
258
+ removeMoreItems: (count: number) => string;
258
259
  };
259
260
  notification: {
260
261
  close: string;
@@ -43,6 +43,9 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
43
43
  protected readonly activeDescendant: _angular_core.Signal<string | null>;
44
44
  protected readonly affixClass: _angular_core.Signal<string>;
45
45
  protected readonly baseClass: _angular_core.Signal<string>;
46
+ protected readonly chipMessages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaChipMessages>;
47
+ protected readonly clearButtonVisible: _angular_core.Signal<boolean>;
48
+ protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
46
49
  protected readonly expanded: _angular_core.Signal<boolean>;
47
50
  protected readonly footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
48
51
  protected readonly groupHeaderTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
@@ -65,7 +68,13 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
65
68
  protected readonly valueTextMap: _angular_core.Signal<_mirei_ts_collections.ImmutableDictionary<ListItem<TData>, string>>;
66
69
  protected readonly visibleTagCount: _angular_core.Signal<number>;
67
70
  /**
68
- * @description Sets the aria-label attribute of the multi select component.
71
+ * @description ID of an element that describes the multi select, such as help text or an error message.
72
+ * @default ""
73
+ */
74
+ readonly ariaDescribedBy: _angular_core.InputSignal<string>;
75
+ /**
76
+ * @description Accessible name for the multi select. Describe what it represents.
77
+ * Falls back to {@link placeholder} when neither this nor {@link ariaLabelledBy} is set.
69
78
  * @default ""
70
79
  */
71
80
  readonly ariaLabel: _angular_core.InputSignal<string>;
@@ -78,12 +87,12 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
78
87
  * @description Closes the popup automatically after an item is selected or deselected.
79
88
  * @default false
80
89
  */
81
- readonly autoClose: _angular_core.InputSignal<boolean>;
90
+ readonly autoClose: _angular_core.InputSignalWithTransform<boolean, unknown>;
82
91
  /**
83
92
  * @description Renders a checkbox next to each item in the popup list to indicate its selected state.
84
93
  * @default false
85
94
  */
86
- readonly checkboxes: _angular_core.InputSignal<boolean>;
95
+ readonly checkboxes: _angular_core.InputSignalWithTransform<boolean, unknown>;
87
96
  /**
88
97
  * @description Emits when the popup is about to close. This event is preventable.
89
98
  */
@@ -101,22 +110,23 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
101
110
  * @description Disables the component, preventing the popup from opening and blocking tag removal.
102
111
  * @default false
103
112
  */
104
- readonly disabled: _angular_core.ModelSignal<boolean>;
113
+ readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
105
114
  /**
106
115
  * @description Marks the multi select as invalid. When bound to a signal form field via `[formField]`,
107
116
  * this is written by the `FormField` directive.
108
117
  * @default false
109
118
  */
110
- readonly invalid: _angular_core.InputSignal<boolean>;
119
+ readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
111
120
  /**
112
121
  * @description A predicate function or the name of the field that determines whether an item is disabled.
113
122
  */
114
123
  readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
115
124
  /**
116
- * @description Sets the loading state of the multi select component.
125
+ * @description Shows a loading indicator, in place of the clear button, and marks the field busy. It doesn't
126
+ * block interaction: the field stays usable while data loads.
117
127
  * @default false
118
128
  */
119
- readonly loading: _angular_core.InputSignal<boolean>;
129
+ readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
120
130
  /**
121
131
  * @description Emits when the popup is about to open. This event is preventable.
122
132
  */
@@ -125,13 +135,20 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
125
135
  * @description Emits after the popup is opened.
126
136
  */
127
137
  readonly opened: _angular_core.OutputEmitterRef<void>;
138
+ /**
139
+ * @description Text shown when nothing is selected. It also names the multi select when neither {@link ariaLabel}
140
+ * nor {@link ariaLabelledBy} is set.
141
+ * @default ""
142
+ */
143
+ readonly placeholder: _angular_core.InputSignal<string>;
128
144
  /**
129
145
  * @description Sets the class of the popup element.
130
146
  * @default ""
131
147
  */
132
148
  readonly popupClass: _angular_core.InputSignal<string>;
133
149
  /**
134
- * @description Sets the height of the popup element.
150
+ * @description Maximum height of the popup, in pixels or as a CSS length. Shorter lists shrink to fit. When
151
+ * unset, the popup is at most 200 pixels tall.
135
152
  * @default null
136
153
  */
137
154
  readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
@@ -144,12 +161,12 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
144
161
  * @description Sets the readonly state of the multi select component.
145
162
  * @default false
146
163
  */
147
- readonly readonly: _angular_core.InputSignal<boolean>;
164
+ readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
148
165
  /**
149
166
  * @description Sets the required state of the multi select component.
150
167
  * @default false
151
168
  */
152
- readonly required: _angular_core.InputSignal<boolean>;
169
+ readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
153
170
  /**
154
171
  * @description Sets the border radius of the multi select component.
155
172
  * @default "medium"
@@ -159,7 +176,7 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
159
176
  * @description Renders a button that clears all selected items when at least one item is selected.
160
177
  * @default false
161
178
  */
162
- readonly showClearButton: _angular_core.InputSignal<boolean>;
179
+ readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
163
180
  /**
164
181
  * @description The size of the multi select component.
165
182
  * @default "medium"
@@ -173,8 +190,8 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
173
190
  */
174
191
  readonly textField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, string>>;
175
192
  /**
176
- * @description Emitted when the multi select is interacted with on blur, selection, remove, or clear.
177
- * The `FormField` directive listens to this to mark the field as touched.
193
+ * @description Emitted when focus leaves the multi select. Moving between it, its chips, its clear button and its
194
+ * popup doesn't count. The `FormField` directive listens to this to mark the field as touched.
178
195
  */
179
196
  readonly touch: _angular_core.OutputEmitterRef<void>;
180
197
  /**
@@ -182,7 +199,7 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
182
199
  * this is written by the `FormField` directive.
183
200
  * @default false
184
201
  */
185
- readonly touched: _angular_core.InputSignal<boolean>;
202
+ readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
186
203
  /**
187
204
  * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
188
205
  * @default ""
@@ -215,10 +232,14 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
215
232
  *
216
233
  * @default false
217
234
  */
218
- readonly valuePrimitive: _angular_core.InputSignal<boolean>;
235
+ readonly valuePrimitive: _angular_core.InputSignalWithTransform<boolean, unknown>;
219
236
  constructor();
220
- focus(): void;
221
- protected onBlur(event?: FocusEvent): void;
237
+ /**
238
+ * @description Moves focus to the multi select.
239
+ * @param options Passed to `HTMLElement.focus()`, for example `{ preventScroll: true }`.
240
+ */
241
+ focus(options?: FocusOptions): void;
242
+ protected onFocusOut(event: FocusEvent): void;
222
243
  protected onItemSelect(): void;
223
244
  protected onPopupPointerDown(event: PointerEvent): void;
224
245
  protected onSelectedItemGroupRemove(event: Event): void;
@@ -231,14 +252,17 @@ declare class MultiSelectComponent<TData = unknown, TValue = TData> implements F
231
252
  private setBackspaceKeySubscription;
232
253
  private setEnterKeySubscription;
233
254
  private setEventListeners;
255
+ private setPopupCloseSubscription;
256
+ private setSpaceKeySubscription;
234
257
  private setSubscriptions;
235
258
  private synchronizeSelection;
259
+ private toggleHighlightedItem;
236
260
  private updateValue;
237
261
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectComponent<any, any>, never>;
238
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent<any, any>, "mona-multi-select", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "checkboxes": { "alias": "checkboxes"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "valuePrimitive": { "alias": "valuePrimitive"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "tagTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
262
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelectComponent<any, any>, "mona-multi-select", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; "checkboxes": { "alias": "checkboxes"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "valuePrimitive": { "alias": "valuePrimitive"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "tagTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownLiveRegionDirective; inputs: {}; outputs: {}; }]>;
239
263
  }
240
264
 
241
- declare class MultiSelectSummaryTagDirective<TData> {
265
+ declare class MultiSelectSummaryTagDirective {
242
266
  #private;
243
267
  private readonly summaryTagTemplate;
244
268
  /**
@@ -248,8 +272,8 @@ declare class MultiSelectSummaryTagDirective<TData> {
248
272
  */
249
273
  readonly tagCount: _angular_core.InputSignal<number>;
250
274
  constructor();
251
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectSummaryTagDirective<any>, never>;
252
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MultiSelectSummaryTagDirective<any>, "mona-multi-select[monaMultiSelectSummaryTag]", never, { "tagCount": { "alias": "monaMultiSelectSummaryTag"; "required": false; "isSignal": true; }; }, {}, ["summaryTagTemplate"], never, true, never>;
275
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelectSummaryTagDirective, never>;
276
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MultiSelectSummaryTagDirective, "mona-multi-select[monaMultiSelectSummaryTag]", never, { "tagCount": { "alias": "monaMultiSelectSummaryTag"; "required": false; "isSignal": true; }; }, {}, ["summaryTagTemplate"], never, true, never>;
253
277
  }
254
278
 
255
279
  declare class MultiSelectSummaryTagTemplateDirective {
@@ -37,6 +37,8 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
37
37
  protected readonly messages: Signal<_nanahoshi_mona_ui_i18n.MonaNumericTextBoxMessages>;
38
38
  protected readonly prefixTemplateList: Signal<readonly TemplateRef<any>[]>;
39
39
  protected readonly rawInputValue: _angular_core.WritableSignal<string>;
40
+ /** Spin buttons on a read-only field would look usable but do nothing, so they are hidden there. */
41
+ protected readonly showSpinners: Signal<boolean>;
40
42
  protected readonly spin$: Subject<NumericTextBoxStepDirection>;
41
43
  protected readonly spinButtonClasses: Signal<string>;
42
44
  protected readonly spinButtonIconSize: Signal<20 | 16 | 14>;
@@ -45,9 +47,21 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
45
47
  protected readonly valueTextBoxRef: Signal<ElementRef<HTMLInputElement>>;
46
48
  protected readonly wheel$: Subject<WheelEvent>;
47
49
  /**
48
- * @description ARIA label for the input.
50
+ * @description ID of an element that provides an extended description for the input, such as a hint or an
51
+ * error message.
52
+ * @default ""
53
+ */
54
+ readonly ariaDescribedBy: _angular_core.InputSignal<string>;
55
+ /**
56
+ * @description Accessible name for the input. Prefer a visible label, linked through {@link inputId} or
57
+ * {@link ariaLabelledBy}.
49
58
  */
50
59
  readonly ariaLabel: _angular_core.InputSignal<string | null>;
60
+ /**
61
+ * @description ID of an external element that provides the accessible name for the input.
62
+ * @default ""
63
+ */
64
+ readonly ariaLabelledBy: _angular_core.InputSignal<string>;
51
65
  /**
52
66
  * @description Number of fractional decimal places to display and accept. Values are truncated to an integer
53
67
  * and clamped to the range 0–20. Non-finite and negative values normalize to 0.
@@ -57,9 +71,10 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
57
71
  /**
58
72
  * @description Sets whether the input is disabled.
59
73
  */
60
- readonly disabled: _angular_core.InputSignal<boolean>;
74
+ readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
61
75
  /**
62
- * @description Emits when the inner input element is blurred.
76
+ * @description Emits when focus leaves the component, after the value has been clamped to the bounds. Moving
77
+ * focus between the input and elements inside the component (such as a prefix template) doesn't count.
63
78
  */
64
79
  readonly inputBlur: _angular_core.OutputEmitterRef<FocusEvent>;
65
80
  /**
@@ -70,24 +85,36 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
70
85
  * @description Emits when the inner input element loses focus.
71
86
  */
72
87
  readonly inputFocusOut: _angular_core.OutputEmitterRef<FocusEvent>;
88
+ /**
89
+ * @description ID of the inner input, so a `<label for>` or `<mona-label for>` can point at it.
90
+ * @default a generated ID
91
+ */
92
+ readonly inputId: _angular_core.InputSignal<string>;
73
93
  /**
74
94
  * @description Marks the text box as invalid. When bound to a signal form field via `[formField]`,
75
95
  * this is written by the `FormField` directive.
76
96
  * @default false
77
97
  */
78
- readonly invalid: _angular_core.InputSignal<boolean>;
98
+ readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
99
+ /**
100
+ * @description Sets whether the input can be empty. When `false`, leaving an empty field sets it to the
101
+ * minimum, or to zero when there is no minimum (clamped to the maximum).
102
+ */
103
+ readonly nullable: _angular_core.InputSignalWithTransform<boolean, unknown>;
79
104
  /**
80
- * @description Sets whether the input can be empty.
105
+ * @description Text shown in the input while it is empty. It isn't a label: it disappears once there is a
106
+ * value.
107
+ * @default ""
81
108
  */
82
- readonly nullable: _angular_core.InputSignal<boolean>;
109
+ readonly placeholder: _angular_core.InputSignal<string>;
83
110
  /**
84
- * @description Sets whether the input is readonly.
111
+ * @description Sets whether the input is readonly. The spin buttons are hidden while it is.
85
112
  */
86
- readonly readonly: _angular_core.InputSignal<boolean>;
113
+ readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
87
114
  /**
88
115
  * @description Sets whether the input is required.
89
116
  */
90
- readonly required: _angular_core.InputSignal<boolean>;
117
+ readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
91
118
  /**
92
119
  * @description Sets the border radius of the input.
93
120
  */
@@ -99,14 +126,14 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
99
126
  /**
100
127
  * @description Sets whether the spin buttons are visible.
101
128
  */
102
- readonly spinners: _angular_core.InputSignal<boolean>;
129
+ readonly spinners: _angular_core.InputSignalWithTransform<boolean, unknown>;
103
130
  /**
104
131
  * @description Tab index of the input.
105
132
  */
106
133
  readonly tabindex: _angular_core.InputSignal<number>;
107
134
  /**
108
- * @description Emitted when the text box is interacted with on blur, value change, or spinner update.
109
- * The `FormField` directive listens to this to mark the field as touched.
135
+ * @description Emitted when focus leaves the component, as a native input is touched on blur. Typing and
136
+ * spinning don't count. The `FormField` directive listens to this to mark the field as touched.
110
137
  */
111
138
  readonly touch: _angular_core.OutputEmitterRef<void>;
112
139
  /**
@@ -114,7 +141,7 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
114
141
  * this is written by the `FormField` directive.
115
142
  * @default false
116
143
  */
117
- readonly touched: _angular_core.InputSignal<boolean>;
144
+ readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
118
145
  /**
119
146
  * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
120
147
  * @default ""
@@ -129,12 +156,22 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
129
156
  abstract readonly minValue: Signal<TValue | null>;
130
157
  abstract readonly value: ModelSignal<TValue | null>;
131
158
  constructor();
159
+ /** Steps the value down by `step` and moves focus to the input. */
132
160
  decrease(): void;
133
- focus(): void;
161
+ /**
162
+ * Moves focus to the input, with the caret at the end.
163
+ * @param options passed to the native `focus()` call, for example `{ preventScroll: true }`.
164
+ */
165
+ focus(options?: FocusOptions): void;
166
+ /** Steps the value up by `step` and moves focus to the input. */
134
167
  increase(): void;
168
+ /** Runs when focus leaves an element inside the component: clamps the value and marks the field touched. */
135
169
  onBlur(event: FocusEvent): void;
136
170
  protected applyRawValue(text: string): void;
137
171
  protected onPaste(event: ClipboardEvent): void;
172
+ protected onSpinPointerDown(event: PointerEvent, direction: NumericTextBoxStepDirection): void;
173
+ /** Limits a value to the min and max bounds. */
174
+ private clampValue;
138
175
  private commitValue;
139
176
  private correctValue;
140
177
  private formatEditValue;
@@ -146,12 +183,13 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
146
183
  private insertLocaleDecimal;
147
184
  private parseValue;
148
185
  private setBeforeInputSubscription;
149
- private setInputFocusSubscription;
150
186
  private setKeydownSubscription;
187
+ private setOwnValue;
151
188
  private setSpinSubscription;
152
189
  private setSubscriptions;
153
190
  private setValueChangeSubscription;
154
191
  private setWheelSubscription;
192
+ private spinToBound;
155
193
  private spinValue;
156
194
  /** Negative when `a < b`, zero when equal, positive when `a > b`. */
157
195
  protected abstract compareValues(a: TValue, b: TValue): number;
@@ -162,7 +200,7 @@ declare abstract class NumericTextBoxBaseComponent<TValue extends number | strin
162
200
  /** The value one step up or down from `value`. */
163
201
  protected abstract stepValue(value: TValue, direction: NumericTextBoxStepDirection): TValue;
164
202
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumericTextBoxBaseComponent<any>, never>;
165
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NumericTextBoxBaseComponent<any>, never, never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "nullable": { "alias": "nullable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "spinners": { "alias": "spinners"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "inputFocusOut": "inputFocusOut"; "touch": "touch"; }, ["prefixTemplateList"], never, true, never>;
203
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NumericTextBoxBaseComponent<any>, never, never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "nullable": { "alias": "nullable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "spinners": { "alias": "spinners"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "inputFocusOut": "inputFocusOut"; "touch": "touch"; }, ["prefixTemplateList"], never, true, never>;
166
204
  }
167
205
 
168
206
  /**
@@ -230,7 +268,10 @@ declare class NumericTextBoxComponent extends NumericTextBoxBaseComponent<number
230
268
  */
231
269
  readonly value: _angular_core.ModelSignal<number | null>;
232
270
  private static calculate;
271
+ /** The number of fraction digits, including those of exponent forms such as `1e-7`. */
233
272
  private static getPrecision;
273
+ /** -0 reads and shows as "-0"; the field treats it as zero. */
274
+ private static withoutNegativeZero;
234
275
  protected compareValues(a: number, b: number): number;
235
276
  protected readEditText(text: string, localeId: string, decimals: number): NumericTextBoxTextResult<number>;
236
277
  protected readLocaleText(text: string, localeId: string, decimals: number): NumericTextBoxTextResult<number>;