@nanahoshi/mona-ui 0.1.0 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-tooltip.mjs

@@ -2,17 +2,16 @@ import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, Renderer2, computed, linkedSignal, viewChild, TemplateRef, input, output, afterRenderEffect, Component, ElementRef, EnvironmentInjector, signal, createComponent, Directive, ChangeDetectionStrategy } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { themeOverlaySurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { PopupService, fadePopupAnimation } from '@nanahoshi/mona-ui/popup';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { take, takeUntil, Subscription, fromEvent, tap } from 'rxjs';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 
-const tooltipBaseVariants = cva(`
-        flex items-center justify-center relative
-        bg-background border border-border
-        shadow-[0_2px_8px_rgba(0,0,0,0.12)] z-1
+const tooltipBaseThemeVariants = cva(`
+        relative z-1 flex items-center justify-center
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay)
     `, {
     variants: {
         rounded: {
@@ -24,51 +23,32 @@ const tooltipBaseVariants = cva(`
         }
     }
 });
-const tooltipArrowVariants = cva(`
-        absolute w-3 h-3 box-border
-        pointer-events-none
-        transform-center rotate-45
-        z-0 bg-background
-
-        border border-border
-
-        data-[position="top"]:-bottom-1.5
-        data-[position="top"]:border-t-0
-        data-[position="top"]:border-l-0
-        data-[position="top"]:[clip-path:inset(1px_0_0_1px)]
-
-        data-[position="bottom"]:-top-1.5
-        data-[position="bottom"]:border-b-0
-        data-[position="bottom"]:border-r-0
-        data-[position="bottom"]:[clip-path:inset(0_1px_1px_0)]
-
-        data-[position="left"]:-right-1.5
-        data-[position="left"]:border-l-0
-        data-[position="left"]:border-b-0
-        data-[position="left"]:[clip-path:inset(0_0_1px_1px)]
-
-        data-[position="right"]:-left-1.5
-        data-[position="right"]:border-r-0
-        data-[position="right"]:border-t-0
-        data-[position="right"]:[clip-path:inset(1px_1px_0_0)]
-    `);
+const tooltipArrowThemeVariants = cva(`
+        absolute z-0 h-3 w-3 rotate-45 transform-center box-border
+        pointer-events-none
+        ${themeOverlaySurfaceClasses}
+        border border-border shadow-(--shadow-overlay)
 
-const tooltipBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return tooltipBaseVariants;
-        default:
-            return tooltipBaseVariants;
-    }
-};
-const tooltipArrowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return tooltipArrowVariants;
-        default:
-            return tooltipArrowVariants;
-    }
-};
+        data-[position="top"]:-bottom-1.5
+        data-[position="top"]:border-t-0
+        data-[position="top"]:border-l-0
+        data-[position="top"]:[clip-path:inset(1px_0_0_1px)]
+
+        data-[position="bottom"]:-top-1.5
+        data-[position="bottom"]:border-b-0
+        data-[position="bottom"]:border-r-0
+        data-[position="bottom"]:[clip-path:inset(0_1px_1px_0)]
+
+        data-[position="left"]:-right-1.5
+        data-[position="left"]:border-l-0
+        data-[position="left"]:border-b-0
+        data-[position="left"]:[clip-path:inset(0_0_1px_1px)]
+
+        data-[position="right"]:-left-1.5
+        data-[position="right"]:border-r-0
+        data-[position="right"]:border-t-0
+        data-[position="right"]:[clip-path:inset(1px_1px_0_0)]
+    `);
 
 /**
  * Derives the tooltip arrow position from a ConnectionPositionPair.
@@ -143,7 +123,6 @@ class TooltipComponent {
     #document;
     #popupService;
     #renderer;
-    #themeService;
     #currentAnchor;
     #eventSubscription;
     #hideTimeoutId;
@@ -155,7 +134,6 @@ class TooltipComponent {
         this.#document = inject(DOCUMENT);
         this.#popupService = inject(PopupService);
         this.#renderer = inject(Renderer2);
-        this.#themeService = inject(ThemeService);
         this.#currentAnchor = null;
         this.#eventSubscription = null;
         this.#hideTimeoutId = null;
@@ -163,14 +141,12 @@ class TooltipComponent {
         this.#popupRef = null;
         this.#showTimeoutId = null;
         this.arrowClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return tooltipArrowThemeVariants(theme)();
+            return tooltipArrowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return tooltipBaseThemeVariants(theme)({ rounded });
+            return tooltipBaseThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.currentArrowPosition = linkedSignal(() => this.position(), /* @ts-ignore */
@@ -367,11 +343,11 @@ class TooltipComponent {
         return composite;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipComponent, isStandalone: true, selector: "mona-tooltip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hidden: "hidden", shown: "shown" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\r\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\r\n        <div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipComponent, isStandalone: true, selector: "mona-tooltip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hidden: "hidden", shown: "shown" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\n        <div>\n            <ng-content></ng-content>\n        </div>\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\n    </div>\n</ng-template>\n", styles: [":host{display:contents}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tooltip", template: "<ng-template>\r\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\r\n        <div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: "mona-tooltip", template: "<ng-template>\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\n        <div>\n            <ng-content></ng-content>\n        </div>\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\n    </div>\n</ng-template>\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidden: [{ type: i0.Output, args: ["hidden"] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }] } });
 
 class TooltipDirective {
@@ -635,17 +611,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipRounded", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], hidden: [{ type: i0.Output, args: ["hidden"] }], shown: [{ type: i0.Output, args: ["shown"] }] } });
 class TooltipTemplateComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.arrowClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return tooltipArrowThemeVariants(theme)();
+            return tooltipArrowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const userClasses = `p-2`;
-            const variants = tooltipBaseThemeVariants(theme)({ rounded });
+            const variants = tooltipBaseThemeVariants({ rounded });
             return twMerge(variants, userClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
@@ -674,32 +647,31 @@ class TooltipTemplateComponent {
         this.templateRef = viewChild.required(TemplateRef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipTemplateComponent, isStandalone: true, selector: "ng-component", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
-        <ng-template>
-            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
-                <div>
-                    {{ content() }}
-                </div>
-                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
-            </div>
-        </ng-template>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipTemplateComponent, isStandalone: true, selector: "ng-component", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template>
+            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
+                <div>
+                    {{ content() }}
+                </div>
+                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
+            </div>
+        </ng-template>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipTemplateComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.Eager,
-                    template: `
-        <ng-template>
-            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
-                <div>
-                    {{ content() }}
-                </div>
-                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
-            </div>
-        </ng-template>
+                    template: `
+        <ng-template>
+            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
+                <div>
+                    {{ content() }}
+                </div>
+                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
+            </div>
+        </ng-template>
     `
                 }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });

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

@@ -188,11 +188,11 @@ class TreeViewComponent {
         this.treeService.blur$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => this.blur.emit(e));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeViewComponent, isStandalone: true, selector: "mona-tree-view", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, parentIdField: { classPropertyName: "parentIdField", publicName: "parentIdField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", focus: "focus", nodeClick: "nodeClick" }, providers: [TreeService], queries: [{ propertyName: "nodeTemplate", first: true, predicate: TreeViewNodeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (treeService.filterableOptions().enabled) {\r\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\r\n        <mona-filter-input\r\n            [filter]=\"treeService.filterText()\"\r\n            [debounce]=\"treeService.filterableOptions().debounce\"\r\n            [placeholder]=\"treeService.filterPlaceholder()\"\r\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\r\n    </div>\r\n}\r\n<div class=\"flex-1 overflow-auto\">\r\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\r\n        @if (nodeTemplate()) {\r\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\r\n            </ng-template>\r\n        }\r\n    </mona-tree>\r\n</div>\r\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: TreeComponent, selector: "mona-tree", inputs: ["ariaLabel", "data"] }, { kind: "directive", type: TreeNodeTemplateDirective, selector: "ng-template[monaTreeNodeTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeViewComponent, isStandalone: true, selector: "mona-tree-view", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, parentIdField: { classPropertyName: "parentIdField", publicName: "parentIdField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", focus: "focus", nodeClick: "nodeClick" }, providers: [TreeService], queries: [{ propertyName: "nodeTemplate", first: true, predicate: TreeViewNodeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (treeService.filterableOptions().enabled) {\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\n        <mona-filter-input\n            [filter]=\"treeService.filterText()\"\n            [debounce]=\"treeService.filterableOptions().debounce\"\n            [placeholder]=\"treeService.filterPlaceholder()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n<div class=\"flex-1 overflow-auto\">\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\n        @if (nodeTemplate()) {\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\n                <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\n            </ng-template>\n        }\n    </mona-tree>\n</div>\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: TreeComponent, selector: "mona-tree", inputs: ["ariaLabel", "data"] }, { kind: "directive", type: TreeNodeTemplateDirective, selector: "ng-template[monaTreeNodeTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-tree-view", imports: [FilterInputComponent, TreeComponent, TreeNodeTemplateDirective, NgTemplateOutlet], providers: [TreeService], template: "@if (treeService.filterableOptions().enabled) {\r\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\r\n        <mona-filter-input\r\n            [filter]=\"treeService.filterText()\"\r\n            [debounce]=\"treeService.filterableOptions().debounce\"\r\n            [placeholder]=\"treeService.filterPlaceholder()\"\r\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\r\n    </div>\r\n}\r\n<div class=\"flex-1 overflow-auto\">\r\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\r\n        @if (nodeTemplate()) {\r\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\r\n            </ng-template>\r\n        }\r\n    </mona-tree>\r\n</div>\r\n" }]
+            args: [{ selector: "mona-tree-view", imports: [FilterInputComponent, TreeComponent, TreeNodeTemplateDirective, NgTemplateOutlet], providers: [TreeService], template: "@if (treeService.filterableOptions().enabled) {\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\n        <mona-filter-input\n            [filter]=\"treeService.filterText()\"\n            [debounce]=\"treeService.filterableOptions().debounce\"\n            [placeholder]=\"treeService.filterPlaceholder()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n<div class=\"flex-1 overflow-auto\">\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\n        @if (nodeTemplate()) {\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\n                <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\n            </ng-template>\n        }\n    </mona-tree>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { nodeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TreeViewNodeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], parentIdField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentIdField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }] } });
 
 class TreeViewCheckableDirective {