@nanahoshi/mona-ui 0.20.0 → 0.20.1
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-DLqCAee3.mjs} +2 -2
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Dj-SaNzk.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bd2twji1.mjs} +2 -2
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-list.component-CYAm4l84.mjs → nanahoshi-mona-ui-grid-grid-list.component-hakVMhqu.mjs} +5 -5
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-B_Gm--X6.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-CtEs5t9x.mjs} +2 -2
- package/fesm2022/{nanahoshi-mona-ui-grid-grid-virtual-list.component-X0X487Rm.mjs → nanahoshi-mona-ui-grid-grid-virtual-list.component-DoAGYLzr.mjs} +5 -5
- package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CyzJFQIy.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BIK61ieq.mjs} +10 -10
- package/fesm2022/nanahoshi-mona-ui-grid.mjs +1 -1
- package/fesm2022/nanahoshi-mona-ui-list-view.mjs +2 -2
- package/fesm2022/nanahoshi-mona-ui-multi-select.mjs +46 -38
- package/fesm2022/nanahoshi-mona-ui-pager.mjs +1 -1
- 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-multi-select.d.ts +20 -19
|
@@ -736,7 +736,7 @@ class PagerComponent {
|
|
|
736
736
|
}
|
|
737
737
|
}
|
|
738
738
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
739
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PagerComponent, isStandalone: true, selector: "mona-pager", inputs: { firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, pageInput: { classPropertyName: "pageInput", publicName: "pageInput", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, previousNext: { classPropertyName: "previousNext", publicName: "previousNext", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "navigable() ? 0 : null", "class": "baseClasses()" } }, queries: [{ propertyName: "navigationButtonsTemplateList", predicate: PagerNavigationButtonsTemplateDirective, isSignal: true }, { propertyName: "numericButtonsTemplate", first: true, predicate: PagerNumericButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeTemplate", first: true, predicate: PagerPageSizeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "pagerInfoTemplate", first: true, predicate: PagerInfoTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pageSizeDropdownList", first: true, predicate: ["pageSizeDropdownList"], descendants: true, isSignal: true }], ngImport: i0, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n @if (pageListVisible()) {\n <ol [class]=\"listClasses()\">\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n }\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n }\n\n @if (numericButtonsTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n } @else {\n @if (pages().length !== 0) {\n <li [class]=\"pageItemClasses(page() === 1)\">\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [selected]=\"page() === 1\"\n [attr.aria-label]=\"messages().pageLabel(1)\"\n [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n (click)=\"onPageClick(1)\">\n {{ formatPageNumber(1) }}\n </button>\n </li>\n }\n @if (previousJumperVisible()) {\n <li>\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [attr.aria-label]=\"jumpPreviousLabel()\"\n (click)=\"onJumpPreviousClick()\">\n <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n </button>\n </li>\n }\n\n @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [selected]=\"page() === pageItem.page\"\n [attr.aria-label]=\"messages().pageLabel(pageItem.page)\"\n [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n (click)=\"onPageClick(pageItem.page)\">\n {{ pageItem.text }}\n </button>\n </li>\n }\n\n @if (nextJumperVisible()) {\n <li>\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [attr.aria-label]=\"jumpNextLabel()\"\n (click)=\"onJumpNextClick()\">\n <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n </button>\n </li>\n }\n\n @if (pages().length > 1) {\n <li [class]=\"pageItemClasses(page() === pageCount())\">\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [selected]=\"page() === pageCount()\"\n [attr.aria-label]=\"messages().pageLabel(pageCount())\"\n [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n (click)=\"onPageClick(pageCount())\">\n {{ formatPageNumber(pageCount()) }}\n </button>\n </li>\n }\n }\n\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n }\n\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n }\n\n @if (pageInputVisible() && pageInput()) {\n <li>\n <mona-numeric-text-box\n monaPagerFocusable\n [spinners]=\"false\"\n [minValue]=\"1\"\n [maxValue]=\"pageCount()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n </li>\n }\n\n @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n <li>\n @if (pageSizeTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n </ng-container>\n } @else {\n <mona-dropdown-list\n monaPagerFocusable\n [data]=\"pageSizeDropdownData()\"\n [ngModel]=\"pageSize()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n (ngModelChange)=\"onPageSizeValueChange($event)\"\n #pageSizeDropdownList>\n <ng-template monaDropDownListValueTemplate let-item>\n <span>{{ messages().pageSizeLabel(item) }}</span>\n </ng-template>\n <ng-template monaDropDownItemTemplate let-item>\n <span>{{ formatPageNumber(item) }}</span>\n </ng-template>\n </mona-dropdown-list>\n }\n </li>\n }\n </ol>\n }\n @if (infoVisible()) {\n @if (pagerInfoTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n } @else {\n <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n }\n }\n}\n@if (type() === \"input\") {\n <div [class]=\"inputClasses()\">\n @if (pageListVisible()) {\n <ol [class]=\"listClasses()\">\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n }\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n }\n <li class=\"flex items-center gap-2 mx-2\">\n <span>{{ messages().pageText }}</span>\n <mona-numeric-text-box\n monaPagerFocusable\n [spinners]=\"false\"\n [minValue]=\"1\"\n [maxValue]=\"pageCount()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n <span>{{ messages().ofText }}</span>\n <span>{{ formatPageNumber(pageCount()) }}</span>\n </li>\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n }\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n }\n </ol>\n }\n </div>\n @if (infoVisible()) {\n @if (pagerInfoTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n } @else {\n <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n }\n }\n}\n@if (!pageListVisible()) {\n <ol [class]=\"listClasses()\">\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n }\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n }\n @if (pageCount() !== 0) {\n <li>\n <mona-dropdown-list\n monaPagerFocusable\n [data]=\"pageList()\"\n [ngModel]=\"page()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n monaDropDownVirtualScroll\n (ngModelChange)=\"onPageClick($event)\"\n style=\"width: 75px\">\n <ng-template monaDropDownListValueTemplate let-item>\n <span>{{ formatPageNumber(item) }}</span>\n </ng-template>\n <ng-template monaDropDownItemTemplate let-item>\n <span>{{ formatPageNumber(item) }}</span>\n </ng-template>\n </mona-dropdown-list>\n </li>\n }\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n }\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n }\n </ol>\n}\n\n<ng-template #firstPageButton>\n <li>\n @let firstPageTemplate = firstPageNavigationTemplate();\n @if (firstPageTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n totalPages: pageCount(),\n pageSize: pagerPageSize(),\n disabled: page() === 1\n }\">\n </ng-container>\n } @else {\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [attr.aria-label]=\"messages().firstPageLabel\"\n (click)=\"onPageClick(1)\"\n [disabled]=\"page() === 1\">\n <svg lucideChevronsLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n </button>\n }\n </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n <li>\n @let previousPageTemplate = previousPageNavigationTemplate();\n @if (previousPageTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n totalPages: pageCount(),\n pageSize: pagerPageSize(),\n disabled: page() <= 1\n }\">\n </ng-container>\n } @else {\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [disabled]=\"page() <= 1\"\n [attr.aria-label]=\"messages().previousPageLabel\"\n (click)=\"onPreviousPageClick()\">\n <svg lucideChevronLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n </button>\n }\n </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n <li>\n @let nextPageTemplate = nextPageNavigationTemplate();\n @if (nextPageTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n totalPages: pageCount(),\n pageSize: pagerPageSize(),\n disabled: page() < 1 || page() === pageCount()\n }\">\n </ng-container>\n } @else {\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [disabled]=\"page() < 1 || page() === pageCount()\"\n [attr.aria-label]=\"messages().nextPageLabel\"\n (click)=\"onNextPageClick()\">\n <svg lucideChevronRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n </button>\n }\n </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n <li>\n @let lastPageTemplate = lastPageNavigationTemplate();\n @if (lastPageTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n totalPages: pageCount(),\n pageSize: pagerPageSize(),\n disabled: page() === pageCount()\n }\">\n </ng-container>\n } @else {\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [attr.aria-label]=\"messages().lastPageLabel\"\n (click)=\"onPageClick(pageCount())\"\n [disabled]=\"page() === pageCount()\">\n <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n </button>\n }\n </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "valuePrimitive", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[monaPagerFocusable]" }, { kind: "directive", type: DropdownVirtualScrollDirective, selector: " mona-auto-complete[monaDropDownVirtualScroll], mona-dropdown-list[monaDropDownVirtualScroll], mona-combo-box[monaDropDownVirtualScroll], mona-multi-select[monaDropDownVirtualScroll] ", inputs: ["monaDropDownVirtualScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownListValueTemplateDirective, selector: "ng-template[monaDropDownListValueTemplate]" }, { kind: "directive", type: DropdownItemTemplateDirective, selector: " ng-template[monaDropDownItemTemplate], ng-template[monaAutoCompleteItemTemplate], ng-template[monaDropDownListItemTemplate], ng-template[monaComboBoxItemTemplate], ng-template[monaMultiSelectItemTemplate] " }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
|
|
739
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PagerComponent, isStandalone: true, selector: "mona-pager", inputs: { firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, pageInput: { classPropertyName: "pageInput", publicName: "pageInput", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, previousNext: { classPropertyName: "previousNext", publicName: "previousNext", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "navigable() ? 0 : null", "class": "baseClasses()" } }, queries: [{ propertyName: "navigationButtonsTemplateList", predicate: PagerNavigationButtonsTemplateDirective, isSignal: true }, { propertyName: "numericButtonsTemplate", first: true, predicate: PagerNumericButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeTemplate", first: true, predicate: PagerPageSizeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "pagerInfoTemplate", first: true, predicate: PagerInfoTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pageSizeDropdownList", first: true, predicate: ["pageSizeDropdownList"], descendants: true, isSignal: true }], ngImport: i0, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n @if (pageListVisible()) {\n <ol [class]=\"listClasses()\">\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n }\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n }\n\n @if (numericButtonsTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n } @else {\n @if (pages().length !== 0) {\n <li [class]=\"pageItemClasses(page() === 1)\">\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [selected]=\"page() === 1\"\n [attr.aria-label]=\"messages().pageLabel(1)\"\n [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n (click)=\"onPageClick(1)\">\n {{ formatPageNumber(1) }}\n </button>\n </li>\n }\n @if (previousJumperVisible()) {\n <li>\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [attr.aria-label]=\"jumpPreviousLabel()\"\n (click)=\"onJumpPreviousClick()\">\n <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n </button>\n </li>\n }\n\n @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [selected]=\"page() === pageItem.page\"\n [attr.aria-label]=\"messages().pageLabel(pageItem.page)\"\n [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n (click)=\"onPageClick(pageItem.page)\">\n {{ pageItem.text }}\n </button>\n </li>\n }\n\n @if (nextJumperVisible()) {\n <li>\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [attr.aria-label]=\"jumpNextLabel()\"\n (click)=\"onJumpNextClick()\">\n <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n </button>\n </li>\n }\n\n @if (pages().length > 1) {\n <li [class]=\"pageItemClasses(page() === pageCount())\">\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [selected]=\"page() === pageCount()\"\n [attr.aria-label]=\"messages().pageLabel(pageCount())\"\n [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n (click)=\"onPageClick(pageCount())\">\n {{ formatPageNumber(pageCount()) }}\n </button>\n </li>\n }\n }\n\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n }\n\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n }\n\n @if (pageInputVisible() && pageInput()) {\n <li>\n <mona-numeric-text-box\n monaPagerFocusable\n [spinners]=\"false\"\n [minValue]=\"1\"\n [maxValue]=\"pageCount()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n </li>\n }\n\n @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n <li>\n @if (pageSizeTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n </ng-container>\n } @else {\n <mona-dropdown-list\n monaPagerFocusable\n [data]=\"pageSizeDropdownData()\"\n [ngModel]=\"pageSize()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n (ngModelChange)=\"onPageSizeValueChange($event)\"\n #pageSizeDropdownList>\n <ng-template monaDropDownListValueTemplate let-item>\n <span>{{ messages().pageSizeLabel(item) }}</span>\n </ng-template>\n <ng-template monaDropDownItemTemplate let-item>\n <span>{{ formatPageNumber(item) }}</span>\n </ng-template>\n </mona-dropdown-list>\n }\n </li>\n }\n </ol>\n }\n @if (infoVisible()) {\n @if (pagerInfoTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n } @else {\n <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n }\n }\n}\n@if (type() === \"input\") {\n <div [class]=\"inputClasses()\">\n @if (pageListVisible()) {\n <ol [class]=\"listClasses()\">\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n }\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n }\n <li class=\"flex items-center gap-2 mx-2\">\n <span>{{ messages().pageText }}</span>\n <mona-numeric-text-box\n monaPagerFocusable\n [spinners]=\"false\"\n [minValue]=\"1\"\n [maxValue]=\"pageCount()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n <span>{{ messages().ofText }}</span>\n <span>{{ formatPageNumber(pageCount()) }}</span>\n </li>\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n }\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n }\n </ol>\n }\n </div>\n @if (infoVisible()) {\n @if (pagerInfoTemplateRef) {\n <ng-container\n [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n } @else {\n <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n }\n }\n}\n@if (!pageListVisible()) {\n <ol [class]=\"listClasses()\">\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n }\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n }\n @if (pageCount() !== 0) {\n <li>\n <mona-dropdown-list\n monaPagerFocusable\n [data]=\"pageList()\"\n [ngModel]=\"page()\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n monaDropDownVirtualScroll\n (ngModelChange)=\"onPageClick($event)\"\n style=\"width: 75px\">\n <ng-template monaDropDownListValueTemplate let-item>\n <span>{{ formatPageNumber(item) }}</span>\n </ng-template>\n <ng-template monaDropDownItemTemplate let-item>\n <span>{{ formatPageNumber(item) }}</span>\n </ng-template>\n </mona-dropdown-list>\n </li>\n }\n @if (previousNext()) {\n <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n }\n @if (firstLast()) {\n <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n }\n </ol>\n}\n\n<ng-template #firstPageButton>\n <li>\n @let firstPageTemplate = firstPageNavigationTemplate();\n @if (firstPageTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n totalPages: pageCount(),\n pageSize: pagerPageSize(),\n disabled: page() === 1\n }\">\n </ng-container>\n } @else {\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [attr.aria-label]=\"messages().firstPageLabel\"\n (click)=\"onPageClick(1)\"\n [disabled]=\"page() === 1\">\n <svg lucideChevronsLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n </button>\n }\n </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n <li>\n @let previousPageTemplate = previousPageNavigationTemplate();\n @if (previousPageTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n totalPages: pageCount(),\n pageSize: pagerPageSize(),\n disabled: page() <= 1\n }\">\n </ng-container>\n } @else {\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [disabled]=\"page() <= 1\"\n [attr.aria-label]=\"messages().previousPageLabel\"\n (click)=\"onPreviousPageClick()\">\n <svg lucideChevronLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n </button>\n }\n </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n <li>\n @let nextPageTemplate = nextPageNavigationTemplate();\n @if (nextPageTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n totalPages: pageCount(),\n pageSize: pagerPageSize(),\n disabled: page() < 1 || page() === pageCount()\n }\">\n </ng-container>\n } @else {\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [disabled]=\"page() < 1 || page() === pageCount()\"\n [attr.aria-label]=\"messages().nextPageLabel\"\n (click)=\"onNextPageClick()\">\n <svg lucideChevronRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n </button>\n }\n </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n <li>\n @let lastPageTemplate = lastPageNavigationTemplate();\n @if (lastPageTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n totalPages: pageCount(),\n pageSize: pagerPageSize(),\n disabled: page() === pageCount()\n }\">\n </ng-container>\n } @else {\n <button\n monaPagerFocusable\n monaButton\n look=\"ghost\"\n [rounded]=\"rounded()\"\n [size]=\"size()\"\n [attr.aria-label]=\"messages().lastPageLabel\"\n (click)=\"onPageClick(pageCount())\"\n [disabled]=\"page() === pageCount()\">\n <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n </button>\n }\n </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[monaPagerFocusable]" }, { kind: "directive", type: DropdownVirtualScrollDirective, selector: " mona-auto-complete[monaDropDownVirtualScroll], mona-dropdown-list[monaDropDownVirtualScroll], mona-combo-box[monaDropDownVirtualScroll], mona-multi-select[monaDropDownVirtualScroll] ", inputs: ["monaDropDownVirtualScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownListValueTemplateDirective, selector: "ng-template[monaDropDownListValueTemplate]" }, { kind: "directive", type: DropdownItemTemplateDirective, selector: " ng-template[monaDropDownItemTemplate], ng-template[monaAutoCompleteItemTemplate], ng-template[monaDropDownListItemTemplate], ng-template[monaComboBoxItemTemplate], ng-template[monaMultiSelectItemTemplate] " }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
|
|
740
740
|
}
|
|
741
741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, decorators: [{
|
|
742
742
|
type: Component,
|
|
@@ -46,7 +46,7 @@ const sheetHeaderVariants = cva(`flex shrink-0 items-start gap-3 p-4`);
|
|
|
46
46
|
const sheetTitleVariants = cva(`text-lg font-semibold leading-none tracking-tight`);
|
|
47
47
|
const sheetDescriptionVariants = cva(`mt-1.5 text-sm text-muted-foreground`);
|
|
48
48
|
const sheetContentVariants = cva(`
|
|
49
|
-
min-w-0 min-h-0 flex-1 overflow-y-auto overscroll-contain
|
|
49
|
+
min-w-0 min-h-0 flex-1 overflow-y-auto overscroll-contain
|
|
50
50
|
[scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
|
|
51
51
|
`);
|
|
52
52
|
/** 2.75rem keeps the close button at the WCAG 2.5.5 minimum target size. */
|
|
@@ -4,7 +4,7 @@ import { inject, DestroyRef, ElementRef, computed, linkedSignal, signal, viewChi
|
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
5
|
import { ButtonDirective } from '@nanahoshi/mona-ui/button';
|
|
6
6
|
import * as i1 from '@nanahoshi/mona-ui/dropdowns';
|
|
7
|
-
import { DropdownService, dropdownPopupThemeVariants,
|
|
7
|
+
import { DropdownService, dropdownPopupThemeVariants, DROPDOWN_POPUP_INPUT_TOKEN, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
|
|
8
8
|
import { MonaI18nService, gregorianDateTime, getLocaleTimeInputFormat, parseGregorianDate } from '@nanahoshi/mona-ui/i18n';
|
|
9
9
|
import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
|
|
10
10
|
import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
|
|
@@ -440,7 +440,7 @@ class TimePickerComponent {
|
|
|
440
440
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TimePickerComponent, isStandalone: true, selector: "mona-time-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", 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 }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 } }, outputs: { close: "close", closed: "closed", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onTimeInputBlur()" }, properties: { "attr.tabindex": "disabled() ? null : -1", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-disabled": "disabled() || null", "attr.data-expanded": "expanded()", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "class": "baseClass()" } }, providers: [
|
|
441
441
|
DropdownService,
|
|
442
442
|
{
|
|
443
|
-
provide:
|
|
443
|
+
provide: DROPDOWN_POPUP_INPUT_TOKEN,
|
|
444
444
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
445
445
|
multi: false
|
|
446
446
|
}
|
|
@@ -451,7 +451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
451
451
|
args: [{ selector: "mona-time-picker", providers: [
|
|
452
452
|
DropdownService,
|
|
453
453
|
{
|
|
454
|
-
provide:
|
|
454
|
+
provide: DROPDOWN_POPUP_INPUT_TOKEN,
|
|
455
455
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
456
456
|
multi: false
|
|
457
457
|
}
|
package/package.json
CHANGED
|
@@ -47,14 +47,14 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
|
|
|
47
47
|
protected readonly headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
48
48
|
protected readonly id: string;
|
|
49
49
|
protected readonly inputClass: _angular_core.Signal<string>;
|
|
50
|
-
protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
51
50
|
protected readonly invalidState: _angular_core.Signal<boolean>;
|
|
52
51
|
protected readonly isEmpty: _angular_core.Signal<boolean>;
|
|
52
|
+
protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
53
53
|
protected readonly listId: string;
|
|
54
54
|
protected readonly listPopupClass: _angular_core.Signal<string>;
|
|
55
55
|
protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaAutoCompleteMessages>;
|
|
56
56
|
protected readonly noDataTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
57
|
-
protected readonly popupTemplate: _angular_core.Signal<TemplateRef<
|
|
57
|
+
protected readonly popupTemplate: _angular_core.Signal<TemplateRef<unknown>>;
|
|
58
58
|
protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
59
59
|
protected readonly selectableOptions: SelectableOptions;
|
|
60
60
|
protected readonly suffixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
@@ -94,10 +94,10 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
|
|
|
94
94
|
*/
|
|
95
95
|
readonly disabled: _angular_core.ModelSignal<boolean>;
|
|
96
96
|
/**
|
|
97
|
-
* @description
|
|
98
|
-
* @default
|
|
97
|
+
* @description Defines whether the first matching item should be highlighted while typing.
|
|
98
|
+
* @default true
|
|
99
99
|
*/
|
|
100
|
-
readonly
|
|
100
|
+
readonly highlightFirst: _angular_core.InputSignal<boolean>;
|
|
101
101
|
/**
|
|
102
102
|
* @description Marks the autocomplete as invalid. When bound to a signal form field via `[formField]`,
|
|
103
103
|
* this is written by the `FormField` directive.
|
|
@@ -105,10 +105,10 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
|
|
|
105
105
|
*/
|
|
106
106
|
readonly invalid: _angular_core.InputSignal<boolean>;
|
|
107
107
|
/**
|
|
108
|
-
* @description
|
|
109
|
-
* @default
|
|
108
|
+
* @description Predicate or field name used to determine whether an individual item is disabled.
|
|
109
|
+
* @default undefined
|
|
110
110
|
*/
|
|
111
|
-
readonly
|
|
111
|
+
readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
|
|
112
112
|
/**
|
|
113
113
|
* @description Displays a loading indicator and prevents interaction while an operation is in progress.
|
|
114
114
|
* @default false
|
|
@@ -189,37 +189,38 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
|
|
|
189
189
|
* @default ""
|
|
190
190
|
*/
|
|
191
191
|
readonly userClass: _angular_core.InputSignal<string>;
|
|
192
|
-
/**
|
|
193
|
-
* @description Property name or accessor used to derive the value from a data item.
|
|
194
|
-
* If null, the item itself is used as the value.
|
|
195
|
-
* @default null
|
|
196
|
-
*/
|
|
197
|
-
readonly valueField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, unknown>>;
|
|
198
192
|
/**
|
|
199
193
|
* @description Two-way bindable current autocomplete value. Implements `FormValueControl<string | null>`,
|
|
200
194
|
* enabling signal forms `[formField]` binding.
|
|
201
195
|
* @default null
|
|
202
196
|
*/
|
|
203
197
|
readonly value: _angular_core.ModelSignal<string | null>;
|
|
198
|
+
/**
|
|
199
|
+
* @description Property name or accessor used to derive the value from a data item.
|
|
200
|
+
* If null, the item itself is used as the value.
|
|
201
|
+
* @default null
|
|
202
|
+
*/
|
|
203
|
+
readonly valueField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, unknown>>;
|
|
204
204
|
constructor();
|
|
205
|
-
|
|
205
|
+
focus(): void;
|
|
206
|
+
protected onInputBlur(event: FocusEvent): void;
|
|
206
207
|
protected onItemSelect(event: SelectionChangeEvent<TData>): void;
|
|
208
|
+
protected onPopupPointerDown(event: PointerEvent): void;
|
|
207
209
|
protected onValueClear(event: MouseEvent | KeyboardEvent): void;
|
|
208
210
|
private clear;
|
|
209
211
|
private closePopup;
|
|
210
|
-
focus(): void;
|
|
211
212
|
private initialize;
|
|
212
213
|
private notifyFilterChange;
|
|
213
214
|
private setArrowKeyNavigationSubscription;
|
|
214
215
|
private setAutoCompleteValueChangeSubscription;
|
|
215
216
|
private setEnterKeySubscription;
|
|
216
217
|
private setEscapeKeySubscription;
|
|
217
|
-
private setSpaceKeySubscription;
|
|
218
218
|
private setPopupCloseSubscriptions;
|
|
219
|
+
private setSpaceKeySubscription;
|
|
219
220
|
private setSubscriptions;
|
|
220
221
|
private updateValue;
|
|
221
222
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutoCompleteComponent<any>, never>;
|
|
222
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutoCompleteComponent<any>, "mona-auto-complete", 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; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "
|
|
223
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutoCompleteComponent<any>, "mona-auto-complete", 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; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "highlightFirst": { "alias": "highlightFirst"; "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; }; }, { "close": "close"; "closed": "closed"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "suffixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
|
|
223
224
|
}
|
|
224
225
|
|
|
225
226
|
declare const AUTO_COMPLETE_DEFAULT_MESSAGES: MonaAutoCompleteMessages;
|
|
@@ -38,8 +38,8 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
|
|
|
38
38
|
protected readonly activeDescendant: _angular_core.Signal<string | null>;
|
|
39
39
|
protected readonly affixClass: _angular_core.Signal<string>;
|
|
40
40
|
protected readonly baseClass: _angular_core.Signal<string>;
|
|
41
|
-
protected readonly comboBoxValue$: Subject<string | null>;
|
|
42
41
|
protected readonly comboBoxValue: _angular_core.WritableSignal<string>;
|
|
42
|
+
protected readonly comboBoxValue$: Subject<string | null>;
|
|
43
43
|
protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
|
|
44
44
|
protected readonly expanded: _angular_core.Signal<boolean>;
|
|
45
45
|
protected readonly footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
@@ -53,7 +53,7 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
|
|
|
53
53
|
protected readonly listPopupClass: _angular_core.Signal<string>;
|
|
54
54
|
protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaComboBoxMessages>;
|
|
55
55
|
protected readonly noDataTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
56
|
-
protected readonly popupTemplate: _angular_core.Signal<TemplateRef<
|
|
56
|
+
protected readonly popupTemplate: _angular_core.Signal<TemplateRef<unknown>>;
|
|
57
57
|
protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
58
58
|
protected readonly selectableOptions: SelectableOptions;
|
|
59
59
|
protected readonly selectedListItem: _angular_core.Signal<ListItem<any> | null>;
|
|
@@ -97,17 +97,17 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
|
|
|
97
97
|
* @default false
|
|
98
98
|
*/
|
|
99
99
|
readonly disabled: _angular_core.ModelSignal<boolean>;
|
|
100
|
-
/**
|
|
101
|
-
* @description A predicate function or the name of the field that determines whether an item is disabled.
|
|
102
|
-
* @default undefined
|
|
103
|
-
*/
|
|
104
|
-
readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
|
|
105
100
|
/**
|
|
106
101
|
* @description Marks the combo box as invalid. When bound to a signal form field via `[formField]`,
|
|
107
102
|
* this is written by the `FormField` directive.
|
|
108
103
|
* @default false
|
|
109
104
|
*/
|
|
110
105
|
readonly invalid: _angular_core.InputSignal<boolean>;
|
|
106
|
+
/**
|
|
107
|
+
* @description A predicate function or the name of the field that determines whether an item is disabled.
|
|
108
|
+
* @default undefined
|
|
109
|
+
*/
|
|
110
|
+
readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
|
|
111
111
|
/**
|
|
112
112
|
* @description Displays a loading indicator and prevents interaction while an operation is in progress.
|
|
113
113
|
* @default false
|
|
@@ -188,6 +188,14 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
|
|
|
188
188
|
* @default ""
|
|
189
189
|
*/
|
|
190
190
|
readonly userClass: _angular_core.InputSignal<string>;
|
|
191
|
+
/**
|
|
192
|
+
* @description Two-way bindable current selected value. Implements `FormValueControl<TValue | null>`,
|
|
193
|
+
* enabling signal forms `[formField]` binding.
|
|
194
|
+
* Object mode returns the selected data item; primitive mode (see {@link valuePrimitive}) returns the value
|
|
195
|
+
* resolved through {@link valueField}. `null` represents no selection.
|
|
196
|
+
* @default null
|
|
197
|
+
*/
|
|
198
|
+
readonly value: _angular_core.ModelSignal<TValue | null>;
|
|
191
199
|
/**
|
|
192
200
|
* @description Emitted with the entered text when the user presses Enter on unmatched input.
|
|
193
201
|
* Only emitted when {@link allowCustomValue} is true.
|
|
@@ -212,38 +220,31 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
|
|
|
212
220
|
* @default false
|
|
213
221
|
*/
|
|
214
222
|
readonly valuePrimitive: _angular_core.InputSignal<boolean>;
|
|
215
|
-
/**
|
|
216
|
-
* @description Two-way bindable current selected value. Implements `FormValueControl<TValue | null>`,
|
|
217
|
-
* enabling signal forms `[formField]` binding.
|
|
218
|
-
* Object mode returns the selected data item; primitive mode (see {@link valuePrimitive}) returns the value
|
|
219
|
-
* resolved through {@link valueField}. `null` represents no selection.
|
|
220
|
-
* @default null
|
|
221
|
-
*/
|
|
222
|
-
readonly value: _angular_core.ModelSignal<TValue | null>;
|
|
223
223
|
constructor();
|
|
224
|
-
|
|
224
|
+
focus(): void;
|
|
225
|
+
protected onInputBlur(event: FocusEvent): void;
|
|
225
226
|
protected onItemSelect(event: SelectionChangeEvent<TData>): void;
|
|
227
|
+
protected onPopupPointerDown(event: PointerEvent): void;
|
|
226
228
|
protected onValueClear(event: Event): void;
|
|
227
229
|
private clear;
|
|
228
230
|
private closePopup;
|
|
229
|
-
|
|
231
|
+
private getControlValue;
|
|
232
|
+
private handleEnterKey;
|
|
230
233
|
private initialize;
|
|
231
234
|
private notifyFilterChange;
|
|
235
|
+
private selectItem;
|
|
232
236
|
private setArrowNavigationSubscription;
|
|
233
237
|
private setComboboxValueSubscription;
|
|
234
|
-
private handleEnterKey;
|
|
235
|
-
private selectItem;
|
|
236
238
|
private setEscapeKeySubscription;
|
|
237
239
|
private setKeydownSubscription;
|
|
238
240
|
private setNavigatedItemSubscription;
|
|
239
241
|
private setPopupCloseSubscriptions;
|
|
240
242
|
private setSpaceKeySubscription;
|
|
241
243
|
private setSubscriptions;
|
|
242
|
-
private updateValue;
|
|
243
|
-
private getControlValue;
|
|
244
244
|
private synchronizeSelection;
|
|
245
|
+
private updateValue;
|
|
245
246
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboBoxComponent<any, any>, never>;
|
|
246
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboBoxComponent<any, any>, "mona-combo-box", never, { "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "
|
|
247
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboBoxComponent<any, any>, "mona-combo-box", never, { "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "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"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; "valueAdd": "valueAdd"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
|
|
247
248
|
}
|
|
248
249
|
|
|
249
250
|
declare const COMBO_BOX_DEFAULT_MESSAGES: MonaComboBoxMessages;
|
|
@@ -44,14 +44,14 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
|
|
|
44
44
|
protected readonly footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
45
45
|
protected readonly groupHeaderTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
46
46
|
protected readonly headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
47
|
-
protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
48
47
|
protected readonly invalidState: _angular_core.Signal<boolean>;
|
|
49
48
|
protected readonly isEmpty: _angular_core.Signal<boolean>;
|
|
49
|
+
protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
50
50
|
protected readonly listId: string;
|
|
51
51
|
protected readonly listPopupClass: _angular_core.Signal<string>;
|
|
52
52
|
protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaDropdownListMessages>;
|
|
53
53
|
protected readonly noDataTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
54
|
-
protected readonly popupTemplate: _angular_core.Signal<TemplateRef<
|
|
54
|
+
protected readonly popupTemplate: _angular_core.Signal<TemplateRef<unknown>>;
|
|
55
55
|
protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
|
|
56
56
|
protected readonly selectableOptions: SelectableOptions;
|
|
57
57
|
protected readonly selectedDataItem: _angular_core.Signal<NonNullable<TData> | null>;
|
|
@@ -88,16 +88,16 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
|
|
|
88
88
|
* @default false
|
|
89
89
|
*/
|
|
90
90
|
readonly disabled: _angular_core.ModelSignal<boolean>;
|
|
91
|
-
/**
|
|
92
|
-
* @description Predicate or field name used to determine whether an individual item is disabled.
|
|
93
|
-
* @default undefined
|
|
94
|
-
*/
|
|
95
|
-
readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
|
|
96
91
|
/**
|
|
97
92
|
* @description Marks the field as invalid. Set automatically by the `FormField` directive when bound via `[formField]`.
|
|
98
93
|
* @default false
|
|
99
94
|
*/
|
|
100
95
|
readonly invalid: _angular_core.InputSignal<boolean>;
|
|
96
|
+
/**
|
|
97
|
+
* @description Predicate or field name used to determine whether an individual item is disabled.
|
|
98
|
+
* @default undefined
|
|
99
|
+
*/
|
|
100
|
+
readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
|
|
101
101
|
/**
|
|
102
102
|
* @description Displays a loading indicator and prevents interaction while an operation is in progress.
|
|
103
103
|
* @default false
|
|
@@ -177,6 +177,13 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
|
|
|
177
177
|
* @default ""
|
|
178
178
|
*/
|
|
179
179
|
readonly userClass: _angular_core.InputSignal<string>;
|
|
180
|
+
/**
|
|
181
|
+
* @description Currently selected value, two-way bindable and compatible with Signal Forms via `[formField]`.
|
|
182
|
+
* Object mode returns the selected data item; primitive mode (see {@link valuePrimitive}) returns the value
|
|
183
|
+
* resolved through {@link valueField}. `null` represents no selection.
|
|
184
|
+
* @default null
|
|
185
|
+
*/
|
|
186
|
+
readonly value: _angular_core.ModelSignal<TValue | null>;
|
|
180
187
|
/**
|
|
181
188
|
* @description Property name or accessor used to derive the value from a data item.
|
|
182
189
|
* It is used for stable item identity, matching externally supplied values, and primitive
|
|
@@ -196,21 +203,15 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
|
|
|
196
203
|
* @default false
|
|
197
204
|
*/
|
|
198
205
|
readonly valuePrimitive: _angular_core.InputSignal<boolean>;
|
|
199
|
-
/**
|
|
200
|
-
* @description Currently selected value, two-way bindable and compatible with Signal Forms via `[formField]`.
|
|
201
|
-
* Object mode returns the selected data item; primitive mode (see {@link valuePrimitive}) returns the value
|
|
202
|
-
* resolved through {@link valueField}. `null` represents no selection.
|
|
203
|
-
* @default null
|
|
204
|
-
*/
|
|
205
|
-
readonly value: _angular_core.ModelSignal<TValue | null>;
|
|
206
206
|
constructor();
|
|
207
|
+
focus(): void;
|
|
207
208
|
setValue(value: TValue): void;
|
|
208
|
-
protected onBlur(): void;
|
|
209
|
+
protected onBlur(event?: FocusEvent): void;
|
|
209
210
|
protected onItemSelect(event: SelectionChangeEvent<TData>): void;
|
|
211
|
+
protected onPopupPointerDown(event: PointerEvent): void;
|
|
210
212
|
protected onValueClear(event: MouseEvent | KeyboardEvent): void;
|
|
211
213
|
private closePopup;
|
|
212
214
|
private cycleThroughMatchedItems;
|
|
213
|
-
focus(): void;
|
|
214
215
|
private getControlValue;
|
|
215
216
|
private handleEnterKey;
|
|
216
217
|
private handleHomeEndKeys;
|
|
@@ -225,7 +226,7 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
|
|
|
225
226
|
private synchronizeSelection;
|
|
226
227
|
private updateValue;
|
|
227
228
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownListComponent<any, any>, never>;
|
|
228
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownListComponent<any, any>, "mona-dropdown-list", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "
|
|
229
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownListComponent<any, any>, "mona-dropdown-list", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "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"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "valueTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
|
|
229
230
|
}
|
|
230
231
|
|
|
231
232
|
declare class DropdownListValueTemplateDirective {
|
|
@@ -28,11 +28,12 @@ interface DropdownPopupInput {
|
|
|
28
28
|
readonly disabled: InputSignal<boolean>;
|
|
29
29
|
readonly open: OutputEmitterRef<PreventableEvent>;
|
|
30
30
|
readonly opened: OutputEmitterRef<void>;
|
|
31
|
-
readonly readonly: InputSignal<boolean>;
|
|
32
31
|
readonly popupHeight: InputSignal<ListSizeInputType>;
|
|
33
32
|
readonly popupWidth: InputSignal<ListSizeInputType>;
|
|
33
|
+
readonly readonly: InputSignal<boolean>;
|
|
34
|
+
readonly touch: OutputEmitterRef<void>;
|
|
34
35
|
}
|
|
35
|
-
declare const
|
|
36
|
+
declare const DROPDOWN_POPUP_INPUT_TOKEN: InjectionToken<DropdownPopupInput>;
|
|
36
37
|
|
|
37
38
|
declare class DropdownFilterableDirective<TData> {
|
|
38
39
|
#private;
|
|
@@ -148,8 +149,9 @@ declare class DropdownService {
|
|
|
148
149
|
readonly popupCloseStart$: Subject<PopupCloseEvent<unknown>>;
|
|
149
150
|
readonly popupOpenComplete$: Subject<void>;
|
|
150
151
|
readonly popupRef: i0.WritableSignal<PopupRef | null>;
|
|
151
|
-
readonly popupTemplate: i0.WritableSignal<TemplateRef<
|
|
152
|
+
readonly popupTemplate: i0.WritableSignal<TemplateRef<unknown> | null>;
|
|
152
153
|
readonly restoreFocus: i0.WritableSignal<boolean | "auto">;
|
|
154
|
+
readonly touch$: Subject<void>;
|
|
153
155
|
readonly triggerPopupOpen$: Subject<Partial<PopupSettings<unknown, void>>>;
|
|
154
156
|
readonly triggerPopupToggle$: Subject<Partial<PopupSettings<unknown, void>>>;
|
|
155
157
|
static getDefaultPositions(): ConnectionPositionPair[];
|
|
@@ -174,5 +176,5 @@ type DropdownPopupVariantInput = VariantInputs<DropdownPopupVariantProps>;
|
|
|
174
176
|
|
|
175
177
|
declare const DROPDOWNS_DEFAULT_MESSAGES: MonaDropdownsMessages;
|
|
176
178
|
|
|
177
|
-
export { DROPDOWNS_DEFAULT_MESSAGES, DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective,
|
|
179
|
+
export { DROPDOWNS_DEFAULT_MESSAGES, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective, DropdownPrefixTemplateDirective, DropdownService, DropdownSuffixTemplateDirective, DropdownVirtualScrollDirective, dropdownPopupThemeVariants };
|
|
178
180
|
export type { DropdownDataInput, DropdownFieldPredicateType, DropdownFieldSelectorType, DropdownPopupInput, DropdownPopupVariantInput, DropdownPopupVariantProps };
|