@nanahoshi/mona-ui 0.20.0 → 0.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/nanahoshi-mona-ui-auto-complete.mjs +46 -36
- package/fesm2022/nanahoshi-mona-ui-combo-box.mjs +109 -99
- package/fesm2022/nanahoshi-mona-ui-date-picker.mjs +3 -3
- package/fesm2022/nanahoshi-mona-ui-datetime-picker.mjs +3 -3
- package/fesm2022/nanahoshi-mona-ui-dropdown-list.mjs +37 -27
- package/fesm2022/nanahoshi-mona-ui-dropdowns.mjs +5 -4
- 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-cell.component-BuybF7tX.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-ZdcR20RJ.mjs} +7 -4
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Dj-SaNzk.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bu093U9J.mjs} +12 -6
- package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-Dtze5qye.mjs +162 -0
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-B_Gm--X6.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-DFMbXpKb.mjs} +43 -32
- package/fesm2022/nanahoshi-mona-ui-grid-grid-virtual-list.component-xc8ybFkY.mjs +239 -0
- package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CyzJFQIy.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BGfDw6_5.mjs} +543 -294
- package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-list-view.mjs +2 -2
- package/fesm2022/nanahoshi-mona-ui-locales.mjs +26 -13
- package/fesm2022/nanahoshi-mona-ui-multi-select.mjs +46 -38
- package/fesm2022/nanahoshi-mona-ui-pager.mjs +10 -5
- package/fesm2022/nanahoshi-mona-ui-sheet.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-time-picker.mjs +3 -3
- package/package.json +1 -1
- package/types/nanahoshi-mona-ui-auto-complete.d.ts +19 -18
- package/types/nanahoshi-mona-ui-combo-box.d.ts +23 -22
- package/types/nanahoshi-mona-ui-dropdown-list.d.ts +18 -17
- package/types/nanahoshi-mona-ui-dropdowns.d.ts +6 -4
- package/types/nanahoshi-mona-ui-grid.d.ts +80 -40
- package/types/nanahoshi-mona-ui-i18n.d.ts +1 -0
- package/types/nanahoshi-mona-ui-locales.d.ts +13 -0
- package/types/nanahoshi-mona-ui-multi-select.d.ts +20 -19
- package/types/nanahoshi-mona-ui-pager.d.ts +1 -0
- package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-CYAm4l84.mjs +0 -145
- package/fesm2022/nanahoshi-mona-ui-grid-grid-virtual-list.component-X0X487Rm.mjs +0 -233
|
@@ -9,7 +9,7 @@ import { FilterChangeEvent } from '@nanahoshi/mona-ui/common';
|
|
|
9
9
|
import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
|
|
10
10
|
import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective, ListItemTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
|
|
11
11
|
import * as i1 from '@nanahoshi/mona-ui/dropdowns';
|
|
12
|
-
import { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownSuffixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken,
|
|
12
|
+
import { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownSuffixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
|
|
13
13
|
import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
|
|
14
14
|
import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
|
|
15
15
|
import { Subject, filter, debounceTime, identity, take, tap } from 'rxjs';
|
|
@@ -154,11 +154,11 @@ class AutoCompleteComponent {
|
|
|
154
154
|
return autoCompleteTextInputThemeVariants({ rounded });
|
|
155
155
|
}, /* @ts-ignore */
|
|
156
156
|
...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
|
|
157
|
-
this.itemTemplate = contentChild(DropdownItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
158
157
|
this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
|
|
159
158
|
...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
|
|
160
159
|
this.isEmpty = computed(() => !this.#listService.viewItems().any(), /* @ts-ignore */
|
|
161
160
|
...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
|
|
161
|
+
this.itemTemplate = contentChild(DropdownItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
162
162
|
this.listId = createElementControlId();
|
|
163
163
|
this.listPopupClass = computed(() => {
|
|
164
164
|
const rounded = this.rounded();
|
|
@@ -217,11 +217,11 @@ class AutoCompleteComponent {
|
|
|
217
217
|
this.disabled = model(false, /* @ts-ignore */
|
|
218
218
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
219
219
|
/**
|
|
220
|
-
* @description
|
|
221
|
-
* @default
|
|
220
|
+
* @description Defines whether the first matching item should be highlighted while typing.
|
|
221
|
+
* @default true
|
|
222
222
|
*/
|
|
223
|
-
this.
|
|
224
|
-
...(ngDevMode ? [
|
|
223
|
+
this.highlightFirst = input(true, /* @ts-ignore */
|
|
224
|
+
...(ngDevMode ? [{ debugName: "highlightFirst" }] : /* istanbul ignore next */ []));
|
|
225
225
|
/**
|
|
226
226
|
* @description Marks the autocomplete as invalid. When bound to a signal form field via `[formField]`,
|
|
227
227
|
* this is written by the `FormField` directive.
|
|
@@ -230,11 +230,11 @@ class AutoCompleteComponent {
|
|
|
230
230
|
this.invalid = input(false, /* @ts-ignore */
|
|
231
231
|
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
232
232
|
/**
|
|
233
|
-
* @description
|
|
234
|
-
* @default
|
|
233
|
+
* @description Predicate or field name used to determine whether an individual item is disabled.
|
|
234
|
+
* @default undefined
|
|
235
235
|
*/
|
|
236
|
-
this.
|
|
237
|
-
...(ngDevMode ? [{ debugName: "
|
|
236
|
+
this.itemDisabled = input(/* @ts-ignore */
|
|
237
|
+
...(ngDevMode ? [undefined, { debugName: "itemDisabled" }] : /* istanbul ignore next */ []));
|
|
238
238
|
/**
|
|
239
239
|
* @description Displays a loading indicator and prevents interaction while an operation is in progress.
|
|
240
240
|
* @default false
|
|
@@ -327,13 +327,6 @@ class AutoCompleteComponent {
|
|
|
327
327
|
* @default ""
|
|
328
328
|
*/
|
|
329
329
|
this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
|
|
330
|
-
/**
|
|
331
|
-
* @description Property name or accessor used to derive the value from a data item.
|
|
332
|
-
* If null, the item itself is used as the value.
|
|
333
|
-
* @default null
|
|
334
|
-
*/
|
|
335
|
-
this.valueField = input(null, /* @ts-ignore */
|
|
336
|
-
...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
|
|
337
330
|
/**
|
|
338
331
|
* @description Two-way bindable current autocomplete value. Implements `FormValueControl<string | null>`,
|
|
339
332
|
* enabling signal forms `[formField]` binding.
|
|
@@ -341,6 +334,13 @@ class AutoCompleteComponent {
|
|
|
341
334
|
*/
|
|
342
335
|
this.value = model(null, /* @ts-ignore */
|
|
343
336
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
337
|
+
/**
|
|
338
|
+
* @description Property name or accessor used to derive the value from a data item.
|
|
339
|
+
* If null, the item itself is used as the value.
|
|
340
|
+
* @default null
|
|
341
|
+
*/
|
|
342
|
+
this.valueField = input(null, /* @ts-ignore */
|
|
343
|
+
...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
|
|
344
344
|
afterNextRender({
|
|
345
345
|
read: () => {
|
|
346
346
|
this.initialize();
|
|
@@ -352,7 +352,18 @@ class AutoCompleteComponent {
|
|
|
352
352
|
untracked(() => this.#dropdownService.popupTemplate.set(popupTemplate));
|
|
353
353
|
});
|
|
354
354
|
}
|
|
355
|
-
|
|
355
|
+
focus() {
|
|
356
|
+
const input = this.#hostElementRef.nativeElement.querySelector("input");
|
|
357
|
+
if (input) {
|
|
358
|
+
input.focus();
|
|
359
|
+
input.setSelectionRange(input.value.length, input.value.length);
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
onInputBlur(event) {
|
|
363
|
+
const popupElement = this.#dropdownService.popupRef()?.overlayRef.overlayElement;
|
|
364
|
+
if (popupElement && event?.relatedTarget instanceof Node && popupElement.contains(event.relatedTarget)) {
|
|
365
|
+
return;
|
|
366
|
+
}
|
|
356
367
|
this.touch.emit();
|
|
357
368
|
if (this.value() !== this.autoCompleteValue() && !this.#popupRef()) {
|
|
358
369
|
this.updateValue(this.autoCompleteValue());
|
|
@@ -365,6 +376,12 @@ class AutoCompleteComponent {
|
|
|
365
376
|
this.closePopup();
|
|
366
377
|
rxTimeout(this.#destroyRef, () => this.focus());
|
|
367
378
|
}
|
|
379
|
+
onPopupPointerDown(event) {
|
|
380
|
+
const target = event.target;
|
|
381
|
+
if (target?.tagName !== "INPUT") {
|
|
382
|
+
event.preventDefault();
|
|
383
|
+
}
|
|
384
|
+
}
|
|
368
385
|
onValueClear(event) {
|
|
369
386
|
if (this.readonly() || (event instanceof KeyboardEvent && event.key !== "Enter" && event.key !== " ")) {
|
|
370
387
|
return;
|
|
@@ -384,13 +401,6 @@ class AutoCompleteComponent {
|
|
|
384
401
|
closePopup() {
|
|
385
402
|
this.#popupRef()?.close();
|
|
386
403
|
}
|
|
387
|
-
focus() {
|
|
388
|
-
const input = this.#hostElementRef.nativeElement.querySelector("input");
|
|
389
|
-
if (input) {
|
|
390
|
-
input.focus();
|
|
391
|
-
input.setSelectionRange(input.value.length, input.value.length);
|
|
392
|
-
}
|
|
393
|
-
}
|
|
394
404
|
initialize() {
|
|
395
405
|
this.#listService.setNavigableOptions({ enabled: true, mode: "highlight" });
|
|
396
406
|
this.#listService.setSelectableOptions(this.selectableOptions);
|
|
@@ -484,16 +494,16 @@ class AutoCompleteComponent {
|
|
|
484
494
|
}
|
|
485
495
|
});
|
|
486
496
|
}
|
|
487
|
-
setSpaceKeySubscription() {
|
|
488
|
-
this.#dropdownService.beforeKeydown$
|
|
489
|
-
.pipe(filter(e => e.originalEvent?.key === " "), takeUntilDestroyed(this.#destroyRef), tap(e => e.preventDefault()))
|
|
490
|
-
.subscribe();
|
|
491
|
-
}
|
|
492
497
|
setPopupCloseSubscriptions() {
|
|
493
498
|
this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
|
|
494
499
|
this.autoCompleteValue$.next(null);
|
|
495
500
|
});
|
|
496
501
|
}
|
|
502
|
+
setSpaceKeySubscription() {
|
|
503
|
+
this.#dropdownService.beforeKeydown$
|
|
504
|
+
.pipe(filter(e => e.originalEvent?.key === " "), takeUntilDestroyed(this.#destroyRef), tap(e => e.preventDefault()))
|
|
505
|
+
.subscribe();
|
|
506
|
+
}
|
|
497
507
|
setSubscriptions() {
|
|
498
508
|
this.setAutoCompleteValueChangeSubscription();
|
|
499
509
|
this.setArrowKeyNavigationSubscription();
|
|
@@ -513,7 +523,7 @@ class AutoCompleteComponent {
|
|
|
513
523
|
this.value.set(value);
|
|
514
524
|
}
|
|
515
525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AutoCompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
516
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AutoCompleteComponent, isStandalone: true, selector: "mona-auto-complete", inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null },
|
|
526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: AutoCompleteComponent, isStandalone: true, selector: "mona-auto-complete", inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, highlightFirst: { classPropertyName: "highlightFirst", publicName: "highlightFirst", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { properties: { "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.tabindex": "-1", "class": "baseClass()" } }, providers: [
|
|
517
527
|
ListService,
|
|
518
528
|
DropdownService,
|
|
519
529
|
{
|
|
@@ -522,11 +532,11 @@ class AutoCompleteComponent {
|
|
|
522
532
|
multi: false
|
|
523
533
|
},
|
|
524
534
|
{
|
|
525
|
-
provide:
|
|
535
|
+
provide: DROPDOWN_POPUP_INPUT_TOKEN,
|
|
526
536
|
useExisting: forwardRef(() => AutoCompleteComponent),
|
|
527
537
|
multi: false
|
|
528
538
|
}
|
|
529
|
-
], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: DropdownSuffixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n <span [class]=\"affixClass()\">\n <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n </span>\n}\n\n<input\n monaTextBox\n role=\"combobox\"\n [class]=\"inputClass()\"\n [disabled]=\"disabled()\"\n [id]=\"id\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"readonly()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [ngModel]=\"autoCompleteValue()\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-invalid]=\"invalidState() || undefined\"\n [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n (ngModelChange)=\"autoCompleteValue$.next($event)\"\n (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n <mona-indicator-icon\n preset=\"clear\"\n [interactive]=\"true\"\n [label]=\"messages().clear\"\n (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n <span [class]=\"affixClass()\">\n <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n <div [class]=\"listPopupClass()\">\n <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n @if (footerTemplate()) {\n <ng-template monaListFooterTemplate>\n <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n </ng-template>\n }\n @if (groupHeaderTemplate()) {\n <ng-template monaListGroupHeaderTemplate let-group>\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n </ng-template>\n }\n @if (headerTemplate()) {\n <ng-template monaListHeaderTemplate>\n <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n </ng-template>\n }\n @if (itemTemplate()) {\n <ng-template monaListItemTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template monaListNoDataTemplate>\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n </ng-template>\n }\n </mona-list>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
|
|
539
|
+
], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: DropdownSuffixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n <span [class]=\"affixClass()\">\n <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n </span>\n}\n\n<input\n monaTextBox\n role=\"combobox\"\n [class]=\"inputClass()\"\n [disabled]=\"disabled()\"\n [id]=\"id\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"readonly()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [ngModel]=\"autoCompleteValue()\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-invalid]=\"invalidState() || undefined\"\n [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n (ngModelChange)=\"autoCompleteValue$.next($event)\"\n (blur)=\"onInputBlur($event)\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n <mona-indicator-icon\n preset=\"clear\"\n [interactive]=\"true\"\n [label]=\"messages().clear\"\n (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n <span [class]=\"affixClass()\">\n <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n <div [class]=\"listPopupClass()\" (pointerdown)=\"onPopupPointerDown($event)\">\n <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n @if (footerTemplate()) {\n <ng-template monaListFooterTemplate>\n <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n </ng-template>\n }\n @if (groupHeaderTemplate()) {\n <ng-template monaListGroupHeaderTemplate let-group>\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n </ng-template>\n }\n @if (headerTemplate()) {\n <ng-template monaListHeaderTemplate>\n <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n </ng-template>\n }\n @if (itemTemplate()) {\n <ng-template monaListItemTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template monaListNoDataTemplate>\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n </ng-template>\n }\n </mona-list>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
|
|
530
540
|
}
|
|
531
541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
532
542
|
type: Component,
|
|
@@ -539,7 +549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
539
549
|
multi: false
|
|
540
550
|
},
|
|
541
551
|
{
|
|
542
|
-
provide:
|
|
552
|
+
provide: DROPDOWN_POPUP_INPUT_TOKEN,
|
|
543
553
|
useExisting: forwardRef(() => AutoCompleteComponent),
|
|
544
554
|
multi: false
|
|
545
555
|
}
|
|
@@ -566,10 +576,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
566
576
|
"[attr.data-readonly]": "readonly() || null",
|
|
567
577
|
"[attr.tabindex]": "-1",
|
|
568
578
|
"[class]": "baseClass()"
|
|
569
|
-
}, template: "@if (prefixTemplate()) {\n <span [class]=\"affixClass()\">\n <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n </span>\n}\n\n<input\n monaTextBox\n role=\"combobox\"\n [class]=\"inputClass()\"\n [disabled]=\"disabled()\"\n [id]=\"id\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"readonly()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [ngModel]=\"autoCompleteValue()\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-invalid]=\"invalidState() || undefined\"\n [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n (ngModelChange)=\"autoCompleteValue$.next($event)\"\n (blur)=\"onInputBlur()\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n <mona-indicator-icon\n preset=\"clear\"\n [interactive]=\"true\"\n [label]=\"messages().clear\"\n (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n <span [class]=\"affixClass()\">\n <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n <div [class]=\"listPopupClass()\">\n <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n @if (footerTemplate()) {\n <ng-template monaListFooterTemplate>\n <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n </ng-template>\n }\n @if (groupHeaderTemplate()) {\n <ng-template monaListGroupHeaderTemplate let-group>\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n </ng-template>\n }\n @if (headerTemplate()) {\n <ng-template monaListHeaderTemplate>\n <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n </ng-template>\n }\n @if (itemTemplate()) {\n <ng-template monaListItemTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template monaListNoDataTemplate>\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n </ng-template>\n }\n </mona-list>\n </div>\n</ng-template>\n" }]
|
|
579
|
+
}, template: "@if (prefixTemplate()) {\n <span [class]=\"affixClass()\">\n <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n </span>\n}\n\n<input\n monaTextBox\n role=\"combobox\"\n [class]=\"inputClass()\"\n [disabled]=\"disabled()\"\n [id]=\"id\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"readonly()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [ngModel]=\"autoCompleteValue()\"\n [attr.aria-activedescendant]=\"activeDescendant()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-busy]=\"loading()\"\n [attr.aria-controls]=\"listId\"\n [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-invalid]=\"invalidState() || undefined\"\n [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n (ngModelChange)=\"autoCompleteValue$.next($event)\"\n (blur)=\"onInputBlur($event)\" />\n\n@if (showClearButton() && autoCompleteValue() && !loading()) {\n <mona-indicator-icon\n preset=\"clear\"\n [interactive]=\"true\"\n [label]=\"messages().clear\"\n (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n@if (suffixTemplate()) {\n <span [class]=\"affixClass()\">\n <ng-container [ngTemplateOutlet]=\"suffixTemplate()\"></ng-container>\n </span>\n}\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n <div [class]=\"listPopupClass()\" (pointerdown)=\"onPopupPointerDown($event)\">\n <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n @if (footerTemplate()) {\n <ng-template monaListFooterTemplate>\n <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n </ng-template>\n }\n @if (groupHeaderTemplate()) {\n <ng-template monaListGroupHeaderTemplate let-group>\n <ng-container\n [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n </ng-template>\n }\n @if (headerTemplate()) {\n <ng-template monaListHeaderTemplate>\n <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n </ng-template>\n }\n @if (itemTemplate()) {\n <ng-template monaListItemTemplate let-dataItem>\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n </ng-template>\n }\n @if (noDataTemplate()) {\n <ng-template monaListNoDataTemplate>\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n </ng-template>\n }\n </mona-list>\n </div>\n</ng-template>\n" }]
|
|
570
580
|
}], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{
|
|
571
581
|
read: TemplateRef
|
|
572
|
-
}, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], suffixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownSuffixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }],
|
|
582
|
+
}, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], suffixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownSuffixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], highlightFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightFirst", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }] } });
|
|
573
583
|
|
|
574
584
|
/*
|
|
575
585
|
* Public API Surface of @nanahoshi/mona-ui/auto-complete
|