@nanahoshi/mona-ui 0.18.5 → 0.19.0

package/fesm2022/nanahoshi-mona-ui-internal-list.mjs

@@ -3,6 +3,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, signal, computed, Injectable, inject, input, ElementRef, output, ChangeDetectionStrategy, Component, DestroyRef, viewChild, contentChild, TemplateRef, effect, untracked, afterNextRender } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
 import { FilterInputComponent } from '@nanahoshi/mona-ui/internal/filter-input';
 import { PlaceholderComponent } from '@nanahoshi/mona-ui/placeholder';
@@ -15,6 +16,10 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { CheckboxDirective } from '@nanahoshi/mona-ui/check-box';
 
+const LIST_DEFAULT_MESSAGES = {
+    noData: "No data"
+};
+
 class ListFooterTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: ListFooterTemplateDirective, isStandalone: true, selector: "ng-template[monaListFooterTemplate]", ngImport: i0 }); }
@@ -934,10 +939,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class ListComponent {
     #destroyRef;
     #hostElementRef;
+    #i18n;
     #typeaheadKey$;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#typeaheadKey$ = new Subject();
         this.filterInput = viewChild(FilterInputComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
@@ -958,13 +965,13 @@ class ListComponent {
         this.headerTemplate = contentChild(ListHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.hostTabIndex = computed(() => (this.listService.focusableItem() ? -1 : 0), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hostTabIndex" }] : /* istanbul ignore next */ []));
-        this.itemTemplate = contentChild(ListItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.innerListClasses = computed(() => {
             const classes = listInnerListThemeVariants();
             const listClass = this.listClass();
             return twMerge(classes, listClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "innerListClasses" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(ListItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.listHeight = computed(() => {
             const height = this.height();
             if (height == null) {
@@ -1010,6 +1017,7 @@ class ListComponent {
             return width;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("list", LIST_DEFAULT_MESSAGES);
         this.noDataTemplate = contentChild(ListNoDataTemplateDirective, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.viewportHeight = computed(() => {
             const listHeight = this.listHeight();
@@ -1303,7 +1311,7 @@ class ListComponent {
         this.itemSelect.emit({ item, source: { via: "mouse" } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListComponent, isStandalone: true, selector: "mona-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, listClass: { classPropertyName: "listClass", publicName: "listClass", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, listItemClass: { classPropertyName: "listItemClass", publicName: "listItemClass", isSignal: true, isRequired: false, transformFunction: null }, listItemStyle: { classPropertyName: "listItemStyle", publicName: "listItemStyle", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "attr.tabindex": "hostTabIndex()", "class": "classes()", "style.height": "listHeight()", "style.max-height": "listMaxHeight()", "style.max-width": "listMaxWidth()", "style.width": "listWidth()" } }, queries: [{ propertyName: "footerTemplate", first: true, predicate: ListFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n}\n@if (listService.filterableOptions().enabled && listService.filterInputVisible()) {\n    <div class=\"p-2\">\n        <mona-filter-input\n            [filter]=\"listService.filterText()\"\n            [debounce]=\"listService.filterableOptions().debounce\"\n            [placeholder]=\"listService.filterPlaceholder()\"\n            [size]=\"size()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n@if (listService.virtualScrollOptions().enabled) {\n    @if (listService.viewItems().length !== 0) {\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"listService.virtualScrollOptions().height\"\n            [style.height]=\"viewportHeight()\">\n            <ul\n                [class]=\"innerListClasses()\"\n                [style]=\"listStyle()\"\n                [tabIndex]=\"-1\"\n                [id]=\"listId()\"\n                role=\"listbox\"\n                [attr.aria-label]=\"ariaLabel() || null\"\n                [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n                <ng-container *cdkVirtualFor=\"let item of listService.viewItems()\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-container>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder text=\"No data\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n} @else {\n    @if (listService.viewItems().length !== 0) {\n        <ul\n            [class]=\"innerListClasses()\"\n            [style]=\"listStyle()\"\n            [tabIndex]=\"-1\"\n            [id]=\"listId()\"\n            role=\"listbox\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n            @for (item of listService.viewItems(); track item.uid) {\n                <ng-container\n                    [ngTemplateOutlet]=\"listItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n            }\n        </ul>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder text=\"No data\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n}\n@if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n}\n\n<ng-template #listItemTemplate let-item>\n    @if (item.header) {\n        <li [class]=\"groupHeaderClasses()\" [style]=\"listItemStyle()\">\n            <mona-list-item [item]=\"item\" [template]=\"groupHeaderTemplate()\"></mona-list-item>\n        </li>\n    } @else {\n        <li\n            [class]=\"listItemClass()\"\n            [class.px-0.5]=\"true\"\n            [style]=\"listItemStyle()\"\n            [id]=\"item.uid\"\n            [attr.data-uid]=\"item.uid\"\n            (click)=\"onListItemClick(item)\"\n            monaListItem\n            [item]=\"item\">\n            <mona-list-item\n                [item]=\"item\"\n                [template]=\"itemTemplate()\"\n                (checked)=\"onListItemCheck(item)\"></mona-list-item>\n        </li>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: ListItemComponent, selector: "mona-list-item", inputs: ["item", "template"], outputs: ["checked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListItemDirective, selector: "li[monaListItem]", inputs: ["item"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListComponent, isStandalone: true, selector: "mona-list", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, listClass: { classPropertyName: "listClass", publicName: "listClass", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, listItemClass: { classPropertyName: "listItemClass", publicName: "listItemClass", isSignal: true, isRequired: false, transformFunction: null }, listItemStyle: { classPropertyName: "listItemStyle", publicName: "listItemStyle", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "attr.tabindex": "hostTabIndex()", "class": "classes()", "style.height": "listHeight()", "style.max-height": "listMaxHeight()", "style.max-width": "listMaxWidth()", "style.width": "listWidth()" } }, queries: [{ propertyName: "footerTemplate", first: true, predicate: ListFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n}\n@if (listService.filterableOptions().enabled && listService.filterInputVisible()) {\n    <div class=\"p-2\">\n        <mona-filter-input\n            [filter]=\"listService.filterText()\"\n            [debounce]=\"listService.filterableOptions().debounce\"\n            [placeholder]=\"listService.filterPlaceholder()\"\n            [size]=\"size()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n@if (listService.virtualScrollOptions().enabled) {\n    @if (listService.viewItems().length !== 0) {\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"listService.virtualScrollOptions().height\"\n            [style.height]=\"viewportHeight()\">\n            <ul\n                [class]=\"innerListClasses()\"\n                [style]=\"listStyle()\"\n                [tabIndex]=\"-1\"\n                [id]=\"listId()\"\n                role=\"listbox\"\n                [attr.aria-label]=\"ariaLabel() || null\"\n                [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n                <ng-container *cdkVirtualFor=\"let item of listService.viewItems()\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-container>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder [text]=\"messages().noData\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n} @else {\n    @if (listService.viewItems().length !== 0) {\n        <ul\n            [class]=\"innerListClasses()\"\n            [style]=\"listStyle()\"\n            [tabIndex]=\"-1\"\n            [id]=\"listId()\"\n            role=\"listbox\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n            @for (item of listService.viewItems(); track item.uid) {\n                <ng-container\n                    [ngTemplateOutlet]=\"listItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n            }\n        </ul>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder [text]=\"messages().noData\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n}\n@if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n}\n\n<ng-template #listItemTemplate let-item>\n    @if (item.header) {\n        <li [class]=\"groupHeaderClasses()\" [style]=\"listItemStyle()\">\n            <mona-list-item [item]=\"item\" [template]=\"groupHeaderTemplate()\"></mona-list-item>\n        </li>\n    } @else {\n        <li\n            [class]=\"listItemClass()\"\n            [class.px-0.5]=\"true\"\n            [style]=\"listItemStyle()\"\n            [id]=\"item.uid\"\n            [attr.data-uid]=\"item.uid\"\n            (click)=\"onListItemClick(item)\"\n            monaListItem\n            [item]=\"item\">\n            <mona-list-item\n                [item]=\"item\"\n                [template]=\"itemTemplate()\"\n                (checked)=\"onListItemCheck(item)\"></mona-list-item>\n        </li>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: ListItemComponent, selector: "mona-list-item", inputs: ["item", "template"], outputs: ["checked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ListItemDirective, selector: "li[monaListItem]", inputs: ["item"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -1323,7 +1331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[style.max-height]": "listMaxHeight()",
                         "[style.max-width]": "listMaxWidth()",
                         "[style.width]": "listWidth()"
-                    }, template: "@if (headerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n}\n@if (listService.filterableOptions().enabled && listService.filterInputVisible()) {\n    <div class=\"p-2\">\n        <mona-filter-input\n            [filter]=\"listService.filterText()\"\n            [debounce]=\"listService.filterableOptions().debounce\"\n            [placeholder]=\"listService.filterPlaceholder()\"\n            [size]=\"size()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n@if (listService.virtualScrollOptions().enabled) {\n    @if (listService.viewItems().length !== 0) {\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"listService.virtualScrollOptions().height\"\n            [style.height]=\"viewportHeight()\">\n            <ul\n                [class]=\"innerListClasses()\"\n                [style]=\"listStyle()\"\n                [tabIndex]=\"-1\"\n                [id]=\"listId()\"\n                role=\"listbox\"\n                [attr.aria-label]=\"ariaLabel() || null\"\n                [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n                <ng-container *cdkVirtualFor=\"let item of listService.viewItems()\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-container>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder text=\"No data\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n} @else {\n    @if (listService.viewItems().length !== 0) {\n        <ul\n            [class]=\"innerListClasses()\"\n            [style]=\"listStyle()\"\n            [tabIndex]=\"-1\"\n            [id]=\"listId()\"\n            role=\"listbox\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n            @for (item of listService.viewItems(); track item.uid) {\n                <ng-container\n                    [ngTemplateOutlet]=\"listItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n            }\n        </ul>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder text=\"No data\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n}\n@if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n}\n\n<ng-template #listItemTemplate let-item>\n    @if (item.header) {\n        <li [class]=\"groupHeaderClasses()\" [style]=\"listItemStyle()\">\n            <mona-list-item [item]=\"item\" [template]=\"groupHeaderTemplate()\"></mona-list-item>\n        </li>\n    } @else {\n        <li\n            [class]=\"listItemClass()\"\n            [class.px-0.5]=\"true\"\n            [style]=\"listItemStyle()\"\n            [id]=\"item.uid\"\n            [attr.data-uid]=\"item.uid\"\n            (click)=\"onListItemClick(item)\"\n            monaListItem\n            [item]=\"item\">\n            <mona-list-item\n                [item]=\"item\"\n                [template]=\"itemTemplate()\"\n                (checked)=\"onListItemCheck(item)\"></mona-list-item>\n        </li>\n    }\n</ng-template>\n" }]
+                    }, template: "@if (headerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n}\n@if (listService.filterableOptions().enabled && listService.filterInputVisible()) {\n    <div class=\"p-2\">\n        <mona-filter-input\n            [filter]=\"listService.filterText()\"\n            [debounce]=\"listService.filterableOptions().debounce\"\n            [placeholder]=\"listService.filterPlaceholder()\"\n            [size]=\"size()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n@if (listService.virtualScrollOptions().enabled) {\n    @if (listService.viewItems().length !== 0) {\n        <cdk-virtual-scroll-viewport\n            [itemSize]=\"listService.virtualScrollOptions().height\"\n            [style.height]=\"viewportHeight()\">\n            <ul\n                [class]=\"innerListClasses()\"\n                [style]=\"listStyle()\"\n                [tabIndex]=\"-1\"\n                [id]=\"listId()\"\n                role=\"listbox\"\n                [attr.aria-label]=\"ariaLabel() || null\"\n                [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n                <ng-container *cdkVirtualFor=\"let item of listService.viewItems()\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </ng-container>\n            </ul>\n        </cdk-virtual-scroll-viewport>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder [text]=\"messages().noData\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n} @else {\n    @if (listService.viewItems().length !== 0) {\n        <ul\n            [class]=\"innerListClasses()\"\n            [style]=\"listStyle()\"\n            [tabIndex]=\"-1\"\n            [id]=\"listId()\"\n            role=\"listbox\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-multiselectable]=\"listService.selectableOptions().mode === 'multiple' || null\">\n            @for (item of listService.viewItems(); track item.uid) {\n                <ng-container\n                    [ngTemplateOutlet]=\"listItemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n            }\n        </ul>\n    } @else if (noDataTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n    } @else {\n        <mona-placeholder [text]=\"messages().noData\" class=\"w-full h-full flex items-center justify-center\"></mona-placeholder>\n    }\n}\n@if (footerTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n}\n\n<ng-template #listItemTemplate let-item>\n    @if (item.header) {\n        <li [class]=\"groupHeaderClasses()\" [style]=\"listItemStyle()\">\n            <mona-list-item [item]=\"item\" [template]=\"groupHeaderTemplate()\"></mona-list-item>\n        </li>\n    } @else {\n        <li\n            [class]=\"listItemClass()\"\n            [class.px-0.5]=\"true\"\n            [style]=\"listItemStyle()\"\n            [id]=\"item.uid\"\n            [attr.data-uid]=\"item.uid\"\n            (click)=\"onListItemClick(item)\"\n            monaListItem\n            [item]=\"item\">\n            <mona-list-item\n                [item]=\"item\"\n                [template]=\"itemTemplate()\"\n                (checked)=\"onListItemCheck(item)\"></mona-list-item>\n        </li>\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { filterInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FilterInputComponent), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], virtualScrollViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], focusOnMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnMount", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], listClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listClass", required: false }] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: false }] }], listItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemClass", required: false }] }], listItemStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemStyle", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 /*
@@ -1334,5 +1342,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ListComponent, ListFooterTemplateDirective, ListGroupHeaderTemplateDirective, ListHeaderTemplateDirective, ListItem, ListItemTemplateDirective, ListNoDataTemplateDirective, ListService };
+export { LIST_DEFAULT_MESSAGES, ListComponent, ListFooterTemplateDirective, ListGroupHeaderTemplateDirective, ListHeaderTemplateDirective, ListItem, ListItemTemplateDirective, ListNoDataTemplateDirective, ListService };
 //# sourceMappingURL=nanahoshi-mona-ui-internal-list.mjs.map

package/fesm2022/nanahoshi-mona-ui-internal-tree.mjs

@@ -2,6 +2,7 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import { Directive, signal, computed, untracked, effect, Injectable, Pipe, inject, DestroyRef, input, ChangeDetectionStrategy, Component, DOCUMENT, NgZone, ElementRef, afterRenderEffect, contentChild, TemplateRef, afterNextRender } from '@angular/core';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MonaI18nService, injectComponentDirection } from '@nanahoshi/mona-ui/i18n';
 import { Subject, BehaviorSubject, ReplaySubject, switchMap, debounceTime, distinctUntilChanged, Observable, take, filter, tap, map, asapScheduler, fromEvent, takeWhile } from 'rxjs';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { ImmutableSet, List, from, sequenceEqual, contains, EnumerableSet, forEach } from '@mirei/ts-collections';
@@ -1198,7 +1199,7 @@ const treeDropHintBaseThemeVariants = cva(`
     `);
 const treeDropHintIconThemeVariants = cva(`
         absolute flex items-center justify-center
-        -top-3.25 -left-3.5 text-xl
+        -top-3.25 -start-3.5 text-xl rtl:rotate-180
     `);
 const treeNodeBaseThemeVariants = cva(`
         cursor-default px-2 py-1 text-foreground
@@ -1245,6 +1246,13 @@ const treeNodeExpanderThemeVariants = cva(`
         cursor-pointer text-sm text-foreground
     `);
 
+const TREE_DEFAULT_MESSAGES = {
+    collapse: "Collapse",
+    expand: "Expand",
+    filter: "Filter",
+    filterTree: "Filter tree"
+};
+
 class NodeEvent extends PreventableEvent {
     #node;
     constructor(type, node, event) {
@@ -1568,6 +1576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class SubTreeComponent {
     constructor() {
         this.#document = inject(DOCUMENT);
+        this.#i18n = inject(MonaI18nService);
         this.#zone = inject(NgZone);
         this.listClass = computed(() => {
             return subTreeListThemeVariants();
@@ -1577,6 +1586,7 @@ class SubTreeComponent {
             return subTreeListItemThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("treeView", TREE_DEFAULT_MESSAGES);
         this.nodeContainerClass = computed(() => {
             return treeNodeContainerThemeVariants();
         }, /* @ts-ignore */
@@ -1607,12 +1617,8 @@ class SubTreeComponent {
         ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
     }
     #document;
+    #i18n;
     #zone;
-    nodeAnimationDisabled() {
-        return (!this.treeService.animationEnabled() ||
-            this.treeService.animationTemporarilyDisabled() ||
-            this.treeService.filterText().length !== 0);
-    }
     onExpandStateChange(node) {
         const expanded = this.treeService.isExpanded(node);
         if (!expanded) {
@@ -1688,6 +1694,11 @@ class SubTreeComponent {
             this.#zone.runOutsideAngular(() => asapScheduler.schedule(() => this.treeService.animationTemporarilyDisabled.set(false)));
         });
     }
+    nodeAnimationDisabled() {
+        return (!this.treeService.animationEnabled() ||
+            this.treeService.animationTemporarilyDisabled() ||
+            this.treeService.filterText().length !== 0);
+    }
     focusNode(node) {
         this.treeService.navigatedNode.set(node);
         const element = this.#document
@@ -1699,7 +1710,7 @@ class SubTreeComponent {
         element.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SubTreeComponent, isStandalone: true, selector: "mona-sub-tree", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <i class=\"ri-loader-2-line\"></i>\n                        } @else if (nodeComponent.expanded()) {\n                            <i class=\"ri-arrow-down-s-fill\"></i>\n                        } @else {\n                            <i class=\"ri-arrow-right-s-fill\"></i>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-up-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-down-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <i class=\"ri-add-line\"></i>\n                            }\n                            @default {\n                                <i class=\"ri-prohibited-2-line\"></i>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "component", type: SubTreeComponent, selector: "mona-sub-tree", inputs: ["depth", "nodes", "parent"] }, { kind: "component", type: TreeNodeComponent, selector: "mona-tree-node", inputs: ["depth", "node"] }, { 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: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "pipe", type: TreeNodeElementIdPipe, name: "treeNodeElementId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SubTreeComponent, isStandalone: true, selector: "mona-sub-tree", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? messages().collapse : messages().expand) + ' ' + nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <i class=\"ri-loader-2-line\"></i>\n                        } @else if (nodeComponent.expanded()) {\n                            <i class=\"ri-arrow-down-s-fill\"></i>\n                        } @else {\n                            <i class=\"ri-arrow-right-s-fill rtl:rotate-180\"></i>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-up-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-down-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <i class=\"ri-add-line\"></i>\n                            }\n                            @default {\n                                <i class=\"ri-prohibited-2-line\"></i>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "component", type: SubTreeComponent, selector: "mona-sub-tree", inputs: ["depth", "nodes", "parent"] }, { kind: "component", type: TreeNodeComponent, selector: "mona-tree-node", inputs: ["depth", "node"] }, { 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: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "pipe", type: TreeNodeElementIdPipe, name: "treeNodeElementId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubTreeComponent, decorators: [{
             type: Component,
@@ -1711,17 +1722,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         CdkDragPreview,
                         CheckBoxComponent,
                         TreeNodeElementIdPipe
-                    ], template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <i class=\"ri-loader-2-line\"></i>\n                        } @else if (nodeComponent.expanded()) {\n                            <i class=\"ri-arrow-down-s-fill\"></i>\n                        } @else {\n                            <i class=\"ri-arrow-right-s-fill\"></i>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-up-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-down-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <i class=\"ri-add-line\"></i>\n                            }\n                            @default {\n                                <i class=\"ri-prohibited-2-line\"></i>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"] }]
+                    ], template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? messages().collapse : messages().expand) + ' ' + nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <i class=\"ri-loader-2-line\"></i>\n                        } @else if (nodeComponent.expanded()) {\n                            <i class=\"ri-arrow-down-s-fill\"></i>\n                        } @else {\n                            <i class=\"ri-arrow-right-s-fill rtl:rotate-180\"></i>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-up-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <i class=\"ri-arrow-down-line\"></i>\n                                } @else {\n                                    <i class=\"ri-prohibited-2-line\"></i>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <i class=\"ri-add-line\"></i>\n                            }\n                            @default {\n                                <i class=\"ri-prohibited-2-line\"></i>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"] }]
         }], propDecorators: { depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: true }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }] } });
 
 class TreeDropHintComponent {
+    #direction;
     #dropPositionChange;
     #hostElementRef;
+    #i18n;
     constructor() {
+        this.#direction = injectComponentDirection();
         this.#dropPositionChange = toSignal(inject(TreeService).dropPositionChange$, {
             initialValue: null
         });
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             return treeDropHintBaseThemeVariants();
         }, /* @ts-ignore */
@@ -1741,19 +1758,20 @@ class TreeDropHintComponent {
             }
             const rect = nodeElement.getBoundingClientRect();
             const position = dropPositionData.position;
-            const leftOffset = 0;
+            const isRtl = this.isRtl();
+            const left = isRtl ? `${rect.right - 40}px` : `${rect.left}px`;
             if (position === "before") {
                 return {
                     display: "flex",
-                    top: `${rect.top}px`,
-                    left: `${rect.left + leftOffset}px`
+                    left,
+                    top: `${rect.top}px`
                 };
             }
             else if (position === "after") {
                 return {
                     display: "flex",
-                    top: `${rect.bottom}px`,
-                    left: `${rect.left + leftOffset}px`
+                    left,
+                    top: `${rect.bottom}px`
                 };
             }
             else {
@@ -1775,27 +1793,33 @@ class TreeDropHintComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeDropHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: TreeDropHintComponent, isStandalone: true, selector: "mona-tree-drop-hint", host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<i [class]=\"iconClass()\"></i>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: TreeDropHintComponent, isStandalone: true, selector: "mona-tree-drop-hint", host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<i [class]=\"iconClass()\"></i>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeDropHintComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tree-drop-hint", changeDetection: ChangeDetectionStrategy.Eager, host: {
+            args: [{ selector: "mona-tree-drop-hint", host: {
                         "[class]": "baseClass()"
                     }, template: "<i [class]=\"iconClass()\"></i>\n" }]
         }], ctorParameters: () => [] });
 
 class TreeComponent {
     #destroyRef;
+    #direction;
     #focusMonitor;
     #hostElementRef;
+    #i18n;
     #zone;
     #lastNavigatedNode;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
         this.#focusMonitor = inject(FocusMonitor);
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#zone = inject(NgZone);
         this.#lastNavigatedNode = null;
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.activeDescendantId = computed(() => {
             const node = this.treeService.navigatedNode();
             return node === null ? null : this.treeService.getNodeElementId(node.uid);
@@ -1807,10 +1831,10 @@ class TreeComponent {
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.ariaLabel = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.treeService = inject(TreeService);
-        this.nodeTemplate = contentChild(TreeNodeTemplateDirective, { ...(ngDevMode ? { debugName: "nodeTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.data = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+        this.nodeTemplate = contentChild(TreeNodeTemplateDirective, { ...(ngDevMode ? { debugName: "nodeTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.treeService = inject(TreeService);
         effect(() => {
             const node = this.treeService.navigatedNode();
             untracked(() => {
@@ -1929,6 +1953,9 @@ class TreeComponent {
             .pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe(event => {
             const navigatedNode = this.treeService.navigatedNode();
+            const isRtl = this.isRtl();
+            const collapseKey = isRtl ? "ArrowRight" : "ArrowLeft";
+            const expandKey = isRtl ? "ArrowLeft" : "ArrowRight";
             if (event.key === "ArrowUp") {
                 event.preventDefault();
                 this.treeService.navigate("previous");
@@ -1937,7 +1964,7 @@ class TreeComponent {
                 event.preventDefault();
                 this.treeService.navigate("next");
             }
-            else if (event.key === "ArrowLeft") {
+            else if (event.key === collapseKey) {
                 event.preventDefault();
                 if (!navigatedNode || !navigatedNode.nodeItem.hasChildren) {
                     return;
@@ -1949,7 +1976,7 @@ class TreeComponent {
                 }
                 this.treeService.navigatedNode.set(navigatedNode);
             }
-            else if (event.key === "ArrowRight") {
+            else if (event.key === expandKey) {
                 event.preventDefault();
                 if (!navigatedNode || !navigatedNode.nodeItem.hasChildren) {
                     return;
@@ -2040,7 +2067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-multiselectable]": "treeService.selectableOptions().mode === 'multiple' || null",
                         "[attr.aria-activedescendant]": "activeDescendantId()"
                     }, template: "<mona-sub-tree [nodes]=\"treeService.viewNodeSet()\" [parent]=\"null\" [depth]=\"0\"></mona-sub-tree>\n@if (treeService.dragging() && treeService.dropAllowed()) {\n    <mona-tree-drop-hint></mona-tree-drop-hint>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], nodeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TreeNodeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], nodeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TreeNodeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 /**
  * Moves a node within a generic flat tree structure that uses parentId references.
@@ -2168,5 +2195,5 @@ function moveTreeNode(treeData, event, idKey, childrenKey) {
  * Generated bundle index. Do not edit.
  */
 
-export { InternalNodeDragEvent, NodeCheckEvent, NodeClickEvent, NodeDragEndEvent, NodeDragEvent, NodeDragStartEvent, NodeDropEvent, NodeDropEventSansTree, NodeEvent, NodeSelectEvent, TreeComponent, TreeNode, TreeNodeTemplateDirective, TreeService, moveFlatTreeNode, moveTreeNode };
+export { InternalNodeDragEvent, NodeCheckEvent, NodeClickEvent, NodeDragEndEvent, NodeDragEvent, NodeDragStartEvent, NodeDropEvent, NodeDropEventSansTree, NodeEvent, NodeSelectEvent, TREE_DEFAULT_MESSAGES, TreeComponent, TreeNode, TreeNodeTemplateDirective, TreeService, moveFlatTreeNode, moveTreeNode };
 //# sourceMappingURL=nanahoshi-mona-ui-internal-tree.mjs.map