@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.
- package/README.md +3 -0
- package/fesm2022/nanahoshi-mona-ui-auto-complete.mjs +95 -70
- package/fesm2022/nanahoshi-mona-ui-calendar.mjs +196 -137
- package/fesm2022/nanahoshi-mona-ui-combo-box.mjs +136 -89
- package/fesm2022/nanahoshi-mona-ui-date-input.mjs +164 -3
- package/fesm2022/nanahoshi-mona-ui-date-picker.mjs +124 -140
- package/fesm2022/nanahoshi-mona-ui-datetime-picker.mjs +205 -202
- package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs +108 -56
- package/fesm2022/nanahoshi-mona-ui-dropdowns.mjs +68 -59
- package/fesm2022/nanahoshi-mona-ui-editor.mjs +3 -3
- package/fesm2022/nanahoshi-mona-ui-filter.mjs +1 -1
- 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
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-list.component-Dw5U9H0a.mjs → nanahoshi-mona-ui-grid-grid-list.component-0jN7I1jo.mjs} +4 -4
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-row.component-D1kyAzD8.mjs → nanahoshi-mona-ui-grid-grid-row.component-BI_iE7pl.mjs} +3 -3
- 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
- package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-D4lUDbfx.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BvUM9nPt.mjs} +8 -8
- package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-i18n-icu.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-internal-indicator-icon.mjs +2 -2
- package/fesm2022/nanahoshi-mona-ui-internal.mjs +4 -2
- package/fesm2022/nanahoshi-mona-ui-locales-ar-sa.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-locales-de-de.mjs +4 -1
- package/fesm2022/nanahoshi-mona-ui-locales-es-es.mjs +4 -1
- package/fesm2022/nanahoshi-mona-ui-locales-fr-fr.mjs +4 -1
- package/fesm2022/nanahoshi-mona-ui-locales-id-id.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-locales-it-it.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-locales-ja-jp.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-locales-ko-kr.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-locales-pt-br.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-locales-ru-ru.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-locales-tr-tr.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-locales-zh-cn.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-locales-zh-tw.mjs +2 -1
- package/fesm2022/nanahoshi-mona-ui-multi-select.mjs +118 -66
- package/fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs +195 -122
- package/fesm2022/nanahoshi-mona-ui-pager.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-time-picker.mjs +149 -167
- package/fesm2022/nanahoshi-mona-ui-time-selector.mjs +182 -137
- package/i18n/catalogs/en-US.messages.json +2 -1
- package/locales/ar-sa/ar-sa.messages.json +2 -1
- package/locales/de-de/de-de.messages.json +2 -1
- package/locales/es-es/es-es.messages.json +2 -1
- package/locales/fr-fr/fr-fr.messages.json +2 -1
- package/locales/id-id/id-id.messages.json +2 -1
- package/locales/it-it/it-it.messages.json +2 -1
- package/locales/ja-jp/ja-jp.messages.json +2 -1
- package/locales/ko-kr/ko-kr.messages.json +2 -1
- package/locales/pt-br/pt-br.messages.json +2 -1
- package/locales/ru-ru/ru-ru.messages.json +2 -1
- package/locales/tr-tr/tr-tr.messages.json +2 -1
- package/locales/zh-cn/zh-cn.messages.json +2 -1
- package/locales/zh-tw/zh-tw.messages.json +2 -1
- package/package.json +2 -2
- package/types/nanahoshi-mona-ui-auto-complete.d.ts +34 -20
- package/types/nanahoshi-mona-ui-calendar.d.ts +30 -11
- package/types/nanahoshi-mona-ui-combo-box.d.ts +42 -23
- package/types/nanahoshi-mona-ui-date-input.d.ts +74 -3
- package/types/nanahoshi-mona-ui-date-picker.d.ts +61 -33
- package/types/nanahoshi-mona-ui-datetime-picker.d.ts +79 -38
- package/types/nanahoshi-mona-ui-dropdown-list.d.ts +29 -15
- package/types/nanahoshi-mona-ui-dropdowns.d.ts +30 -19
- package/types/nanahoshi-mona-ui-i18n.d.ts +1 -0
- package/types/nanahoshi-mona-ui-internal.d.ts +3 -1
- package/types/nanahoshi-mona-ui-locales-ar-sa.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-de-de.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-es-es.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-fr-fr.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-id-id.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-it-it.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-ja-jp.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-ko-kr.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-pt-br.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-ru-ru.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-tr-tr.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-zh-cn.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales-zh-tw.d.ts +1 -0
- package/types/nanahoshi-mona-ui-multi-select.d.ts +45 -21
- package/types/nanahoshi-mona-ui-numeric-text-box.d.ts +57 -16
- package/types/nanahoshi-mona-ui-time-picker.d.ts +72 -42
- package/types/nanahoshi-mona-ui-time-selector.d.ts +78 -46
|
@@ -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
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
|
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.
|
|
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
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
|
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.
|
|
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.
|
|
235
|
+
readonly valuePrimitive: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
219
236
|
constructor();
|
|
220
|
-
|
|
221
|
-
|
|
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"; "
|
|
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
|
|
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
|
|
252
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MultiSelectSummaryTagDirective
|
|
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
|
|
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.
|
|
74
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
61
75
|
/**
|
|
62
|
-
* @description Emits when the
|
|
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.
|
|
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
|
|
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
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
|
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.
|
|
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
|
-
|
|
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>;
|