@m1z23r/ngx-ui 1.1.12 → 1.1.13

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, Injectable, computed, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, input, output, ChangeDetectionStrategy, Component, ElementRef, HostListener, effect, Directive, model, Pipe, contentChildren, ViewChild, TemplateRef, contentChild, viewChild } from '@angular/core';
-import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import { inject, PLATFORM_ID, signal, Injectable, computed, InjectionToken, ApplicationRef, EnvironmentInjector, createComponent, Injector, input, output, ChangeDetectionStrategy, Component, ElementRef, HostListener, effect, Directive, model, Pipe, contentChildren, ViewChild, TemplateRef, contentChild, viewChild, DestroyRef } from '@angular/core';
+import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, DecimalPipe } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
@@ -1444,6 +1444,7 @@ class DropdownComponent {
     menuRef;
     elementRef = inject(ElementRef);
     positionCleanup = null;
+    contextMenuPosition = null;
     trigger = contentChild(DropdownTriggerDirective, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     items = contentChildren(DropdownItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : []));
     constructor() {
@@ -1529,6 +1530,17 @@ class DropdownComponent {
     open() {
         if (this.isOpen())
             return;
+        this.contextMenuPosition = null;
+        this.isOpen.set(true);
+        this.focusedIndex.set(-1);
+        this.portalMenu();
+    }
+    /** Opens the dropdown at specific coordinates (for context menus) */
+    openAt(x, y) {
+        if (this.isOpen()) {
+            this.close();
+        }
+        this.contextMenuPosition = { x, y };
         this.isOpen.set(true);
         this.focusedIndex.set(-1);
         this.portalMenu();
@@ -1539,6 +1551,7 @@ class DropdownComponent {
         this.unportalMenu();
         this.isOpen.set(false);
         this.focusedIndex.set(-1);
+        this.contextMenuPosition = null;
     }
     focusNext() {
         const menuItems = this.items();
@@ -1593,9 +1606,29 @@ class DropdownComponent {
         this.removePositionListeners();
     }
     updateMenuPosition() {
-        const trigger = this.triggerRef?.nativeElement;
         const menu = this.menuRef?.nativeElement;
-        if (!trigger || !menu)
+        if (!menu)
+            return;
+        menu.style.position = 'fixed';
+        menu.style.zIndex = '99999';
+        menu.style.margin = '0';
+        // Context menu mode: position at cursor
+        if (this.contextMenuPosition) {
+            const { x, y } = this.contextMenuPosition;
+            const menuWidth = menu.scrollWidth;
+            const menuHeight = menu.scrollHeight;
+            // Adjust if menu would go off-screen
+            const adjustedX = x + menuWidth > window.innerWidth ? window.innerWidth - menuWidth - 4 : x;
+            const adjustedY = y + menuHeight > window.innerHeight ? window.innerHeight - menuHeight - 4 : y;
+            menu.style.left = `${Math.max(4, adjustedX)}px`;
+            menu.style.top = `${Math.max(4, adjustedY)}px`;
+            menu.style.right = 'auto';
+            menu.style.bottom = 'auto';
+            return;
+        }
+        // Standard dropdown mode: position relative to trigger
+        const trigger = this.triggerRef?.nativeElement;
+        if (!trigger)
             return;
         const triggerRect = trigger.getBoundingClientRect();
         const menuHeight = menu.scrollHeight;
@@ -1607,9 +1640,6 @@ class DropdownComponent {
             ? spaceAbove >= menuHeight + gap || spaceAbove > spaceBelow
             : spaceBelow < menuHeight + gap && spaceAbove > spaceBelow;
         const alignEnd = this.position().endsWith('end');
-        menu.style.position = 'fixed';
-        menu.style.zIndex = '99999';
-        menu.style.margin = '0';
         if (openAbove) {
             menu.style.top = 'auto';
             menu.style.bottom = `${window.innerHeight - triggerRect.top + gap}px`;
@@ -1676,6 +1706,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ui-dropdown-divider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-dropdown-divider\" role=\"separator\"></div>\n", styles: [":host{display:block}.ui-dropdown-divider{height:1px;margin:var(--ui-spacing-xs) 0;background-color:var(--ui-border)}\n"] }]
         }] });
 
+class ContextMenuDirective {
+    uiContextMenu = input.required(...(ngDevMode ? [{ debugName: "uiContextMenu" }] : []));
+    onContextMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.uiContextMenu().openAt(event.clientX, event.clientY);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: ContextMenuDirective, isStandalone: true, selector: "[uiContextMenu]", inputs: { uiContextMenu: { classPropertyName: "uiContextMenu", publicName: "uiContextMenu", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ContextMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiContextMenu]',
+                    standalone: true,
+                }]
+        }], propDecorators: { uiContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiContextMenu", required: true }] }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }] } });
+
 class CheckboxComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -4727,6 +4778,356 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ui-sidebar-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"ui-sidebar-toggle\"\n        type=\"button\"\n        [class.ui-sidebar-toggle--mobile-only]=\"mobileOnly()\"\n        [attr.aria-expanded]=\"sidebarService.isMobile() ? sidebarService.mobileOpen() : !sidebarService.collapsed()\"\n        aria-label=\"Toggle sidebar\"\n        (click)=\"sidebarService.toggle()\">\n  <svg class=\"ui-sidebar-toggle__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n    <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n    <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\n    <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\n  </svg>\n</button>\n", styles: [".ui-sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:transparent;border:none;border-radius:var(--ui-radius-md);cursor:pointer;color:var(--ui-text);transition:background-color var(--ui-transition-fast)}.ui-sidebar-toggle:hover{background-color:var(--ui-bg-hover)}.ui-sidebar-toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-sidebar-toggle__icon{width:24px;height:24px}.ui-sidebar-toggle--mobile-only{display:none}@media(max-width:767px){.ui-sidebar-toggle--mobile-only{display:inline-flex}}\n"] }]
         }], propDecorators: { mobileOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOnly", required: false }] }] } });
 
+class SplitPaneComponent {
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    minSize = input(0, ...(ngDevMode ? [{ debugName: "minSize" }] : []));
+    maxSize = input(100, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
+    /** @internal */
+    _index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
+    /** @internal */
+    _computedSize = signal(0, ...(ngDevMode ? [{ debugName: "_computedSize" }] : []));
+    _parent = null;
+    elementRef = inject(ElementRef);
+    flexStyle = computed(() => {
+        const size = this._computedSize();
+        return `0 0 ${size}%`;
+    }, ...(ngDevMode ? [{ debugName: "flexStyle" }] : []));
+    orderStyle = computed(() => {
+        return this._index() * 2;
+    }, ...(ngDevMode ? [{ debugName: "orderStyle" }] : []));
+    /** @internal */
+    _setParent(parent, index) {
+        this._parent = parent;
+        this._index.set(index);
+    }
+    /** @internal */
+    _setComputedSize(size) {
+        this._computedSize.set(size);
+    }
+    /** @internal */
+    _getParent() {
+        return this._parent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SplitPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: SplitPaneComponent, isStandalone: true, selector: "ui-split-pane", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flex": "flexStyle()", "style.order": "orderStyle()" }, classAttribute: "ui-split-pane" }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;overflow:auto;min-width:0;min-height:0;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SplitPaneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-split-pane', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ui-split-pane',
+                        '[style.flex]': 'flexStyle()',
+                        '[style.order]': 'orderStyle()',
+                    }, template: "<ng-content />\n", styles: [":host{display:block;overflow:auto;min-width:0;min-height:0;height:100%}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }] } });
+
+class SplitComponent {
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    gutterSize = input('md', ...(ngDevMode ? [{ debugName: "gutterSize" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    sizeChange = output();
+    dragStart = output();
+    dragEnd = output();
+    panes = contentChildren(SplitPaneComponent, ...(ngDevMode ? [{ debugName: "panes" }] : []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    paneSizes = signal([], ...(ngDevMode ? [{ debugName: "paneSizes" }] : []));
+    gutterIndices = computed(() => {
+        const count = this.panes().length;
+        return count > 1 ? Array.from({ length: count - 1 }, (_, i) => i) : [];
+    }, ...(ngDevMode ? [{ debugName: "gutterIndices" }] : []));
+    elementRef = inject(ElementRef);
+    platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    dragGutterIndex = -1;
+    dragStartPos = 0;
+    dragStartSizes = [];
+    mouseMoveHandler = (e) => this.onMouseMove(e);
+    mouseUpHandler = () => this.onMouseUp();
+    constructor() {
+        // Single effect to handle pane setup and size distribution
+        effect(() => {
+            const paneList = this.panes();
+            if (paneList.length === 0)
+                return;
+            // Set parent reference and index on each pane
+            paneList.forEach((pane, index) => {
+                pane._setParent(this, index);
+            });
+            // Calculate sizes based on inputs
+            const sizes = this.calculateSizes(paneList);
+            // Apply sizes to each pane
+            sizes.forEach((size, index) => {
+                paneList[index]._setComputedSize(size);
+            });
+            // Store sizes for drag operations
+            this.paneSizes.set(sizes);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.cleanupListeners();
+        });
+    }
+    gutterSizeClass = computed(() => {
+        return `ui-split__gutter--${this.gutterSize()}`;
+    }, ...(ngDevMode ? [{ debugName: "gutterSizeClass" }] : []));
+    onGutterMouseDown(event, gutterIndex) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragGutterIndex = gutterIndex;
+        this.dragStartPos = this.orientation() === 'horizontal' ? event.clientX : event.clientY;
+        this.dragStartSizes = [...this.paneSizes()];
+        this.isDragging.set(true);
+        this.dragStart.emit(gutterIndex);
+        if (isPlatformBrowser(this.platformId)) {
+            this.document.addEventListener('mousemove', this.mouseMoveHandler);
+            this.document.addEventListener('mouseup', this.mouseUpHandler);
+        }
+    }
+    onGutterKeyDown(event, gutterIndex) {
+        if (this.disabled())
+            return;
+        const step = 1;
+        const sizes = [...this.paneSizes()];
+        const paneList = this.panes();
+        const leftPane = paneList[gutterIndex];
+        const rightPane = paneList[gutterIndex + 1];
+        let delta = 0;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                delta = -step;
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                delta = step;
+                break;
+            case 'Home':
+                event.preventDefault();
+                delta = -(sizes[gutterIndex] - leftPane.minSize());
+                break;
+            case 'End':
+                event.preventDefault();
+                delta = sizes[gutterIndex + 1] - rightPane.minSize();
+                break;
+            default:
+                return;
+        }
+        const newLeftSize = Math.max(leftPane.minSize(), Math.min(leftPane.maxSize(), sizes[gutterIndex] + delta));
+        const actualDelta = newLeftSize - sizes[gutterIndex];
+        const newRightSize = Math.max(rightPane.minSize(), Math.min(rightPane.maxSize(), sizes[gutterIndex + 1] - actualDelta));
+        sizes[gutterIndex] = newLeftSize;
+        sizes[gutterIndex + 1] = newRightSize;
+        this.paneSizes.set(sizes);
+        leftPane._setComputedSize(newLeftSize);
+        rightPane._setComputedSize(newRightSize);
+        this.sizeChange.emit({ gutterIndex, sizes: [...sizes] });
+    }
+    onMouseMove(event) {
+        if (!this.isDragging())
+            return;
+        const container = this.elementRef.nativeElement;
+        const containerRect = container.getBoundingClientRect();
+        const containerSize = this.orientation() === 'horizontal' ? containerRect.width : containerRect.height;
+        const currentPos = this.orientation() === 'horizontal' ? event.clientX : event.clientY;
+        const deltaPixels = currentPos - this.dragStartPos;
+        const deltaPercent = (deltaPixels / containerSize) * 100;
+        const paneList = this.panes();
+        const leftPane = paneList[this.dragGutterIndex];
+        const rightPane = paneList[this.dragGutterIndex + 1];
+        let newLeftSize = this.dragStartSizes[this.dragGutterIndex] + deltaPercent;
+        let newRightSize = this.dragStartSizes[this.dragGutterIndex + 1] - deltaPercent;
+        // Apply min/max constraints
+        if (newLeftSize < leftPane.minSize()) {
+            const diff = leftPane.minSize() - newLeftSize;
+            newLeftSize = leftPane.minSize();
+            newRightSize += diff;
+        }
+        else if (newLeftSize > leftPane.maxSize()) {
+            const diff = newLeftSize - leftPane.maxSize();
+            newLeftSize = leftPane.maxSize();
+            newRightSize += diff;
+        }
+        if (newRightSize < rightPane.minSize()) {
+            const diff = rightPane.minSize() - newRightSize;
+            newRightSize = rightPane.minSize();
+            newLeftSize -= diff;
+        }
+        else if (newRightSize > rightPane.maxSize()) {
+            const diff = newRightSize - rightPane.maxSize();
+            newRightSize = rightPane.maxSize();
+            newLeftSize -= diff;
+        }
+        // Final clamp
+        newLeftSize = Math.max(leftPane.minSize(), Math.min(leftPane.maxSize(), newLeftSize));
+        newRightSize = Math.max(rightPane.minSize(), Math.min(rightPane.maxSize(), newRightSize));
+        const sizes = [...this.paneSizes()];
+        sizes[this.dragGutterIndex] = newLeftSize;
+        sizes[this.dragGutterIndex + 1] = newRightSize;
+        this.paneSizes.set(sizes);
+        leftPane._setComputedSize(newLeftSize);
+        rightPane._setComputedSize(newRightSize);
+        this.sizeChange.emit({ gutterIndex: this.dragGutterIndex, sizes: [...sizes] });
+    }
+    onMouseUp() {
+        if (!this.isDragging())
+            return;
+        this.cleanupListeners();
+        this.isDragging.set(false);
+        this.dragEnd.emit(this.dragGutterIndex);
+        this.dragGutterIndex = -1;
+    }
+    cleanupListeners() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.document.removeEventListener('mousemove', this.mouseMoveHandler);
+            this.document.removeEventListener('mouseup', this.mouseUpHandler);
+        }
+    }
+    calculateSizes(paneList) {
+        if (paneList.length === 0) {
+            return [];
+        }
+        const sizes = [];
+        let totalExplicit = 0;
+        let implicitCount = 0;
+        paneList.forEach((pane) => {
+            const size = pane.size();
+            if (size !== undefined) {
+                totalExplicit += size;
+                sizes.push(size);
+            }
+            else {
+                implicitCount++;
+                sizes.push(-1); // placeholder
+            }
+        });
+        // Calculate remaining space for implicit panes
+        const remaining = Math.max(0, 100 - totalExplicit);
+        const implicitSize = implicitCount > 0 ? remaining / implicitCount : 0;
+        // Replace placeholders
+        for (let i = 0; i < sizes.length; i++) {
+            if (sizes[i] === -1) {
+                sizes[i] = implicitSize;
+            }
+        }
+        // Normalize if total exceeds 100
+        const total = sizes.reduce((a, b) => a + b, 0);
+        if (total > 0 && Math.abs(total - 100) > 0.01) {
+            const scale = 100 / total;
+            for (let i = 0; i < sizes.length; i++) {
+                sizes[i] *= scale;
+            }
+        }
+        return sizes;
+    }
+    /** @internal - Get current sizes for external access */
+    _getSizes() {
+        return [...this.paneSizes()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SplitComponent, isStandalone: true, selector: "ui-split", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizeChange: "sizeChange", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { properties: { "class.ui-split--horizontal": "orientation() === \"horizontal\"", "class.ui-split--vertical": "orientation() === \"vertical\"", "class.ui-split--disabled": "disabled()", "class.ui-split--dragging": "isDragging()" }, classAttribute: "ui-split" }, queries: [{ propertyName: "panes", predicate: SplitPaneComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n@for (gutterIndex of gutterIndices(); track gutterIndex) {\n  <div\n    class=\"ui-split__gutter\"\n    [class]=\"gutterSizeClass()\"\n    [style.order]=\"gutterIndex * 2 + 1\"\n    role=\"separator\"\n    tabindex=\"0\"\n    [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n    [attr.aria-valuenow]=\"paneSizes()[gutterIndex] | number:'1.0-1'\"\n    [attr.aria-valuemin]=\"panes()[gutterIndex]?.minSize()\"\n    [attr.aria-valuemax]=\"panes()[gutterIndex]?.maxSize()\"\n    (mousedown)=\"onGutterMouseDown($event, gutterIndex)\"\n    (keydown)=\"onGutterKeyDown($event, gutterIndex)\"\n  >\n    <div class=\"ui-split__gutter-handle\"></div>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden}:host.ui-split--horizontal{flex-direction:row}:host.ui-split--vertical{flex-direction:column}:host.ui-split--disabled .ui-split__gutter{cursor:default;pointer-events:none}:host.ui-split--dragging{-webkit-user-select:none;user-select:none}.ui-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background-color:var(--ui-bg-secondary);transition:background-color var(--ui-transition-fast)}.ui-split__gutter:hover,.ui-split__gutter:focus{background-color:var(--ui-bg-tertiary)}.ui-split__gutter:hover .ui-split__gutter-handle,.ui-split__gutter:focus .ui-split__gutter-handle{background-color:var(--ui-primary)}.ui-split__gutter:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ui-primary)}:host(.ui-split--horizontal) .ui-split__gutter--sm{width:4px}:host(.ui-split--horizontal) .ui-split__gutter--md{width:8px}:host(.ui-split--horizontal) .ui-split__gutter--lg{width:12px}:host(.ui-split--vertical) .ui-split__gutter--sm{height:4px}:host(.ui-split--vertical) .ui-split__gutter--md{height:8px}:host(.ui-split--vertical) .ui-split__gutter--lg{height:12px}:host(.ui-split--horizontal) .ui-split__gutter{cursor:col-resize}:host(.ui-split--vertical) .ui-split__gutter{cursor:row-resize}:host(.ui-split--dragging.ui-split--horizontal){cursor:col-resize}:host(.ui-split--dragging.ui-split--vertical){cursor:row-resize}.ui-split__gutter-handle{background-color:var(--ui-border);border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast)}:host(.ui-split--horizontal) .ui-split__gutter-handle{width:2px;height:24px}:host(.ui-split--vertical) .ui-split__gutter-handle{width:24px;height:2px}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SplitComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-split', standalone: true, imports: [DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ui-split',
+                        '[class.ui-split--horizontal]': 'orientation() === "horizontal"',
+                        '[class.ui-split--vertical]': 'orientation() === "vertical"',
+                        '[class.ui-split--disabled]': 'disabled()',
+                        '[class.ui-split--dragging]': 'isDragging()',
+                    }, template: "<ng-content />\n@for (gutterIndex of gutterIndices(); track gutterIndex) {\n  <div\n    class=\"ui-split__gutter\"\n    [class]=\"gutterSizeClass()\"\n    [style.order]=\"gutterIndex * 2 + 1\"\n    role=\"separator\"\n    tabindex=\"0\"\n    [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n    [attr.aria-valuenow]=\"paneSizes()[gutterIndex] | number:'1.0-1'\"\n    [attr.aria-valuemin]=\"panes()[gutterIndex]?.minSize()\"\n    [attr.aria-valuemax]=\"panes()[gutterIndex]?.maxSize()\"\n    (mousedown)=\"onGutterMouseDown($event, gutterIndex)\"\n    (keydown)=\"onGutterKeyDown($event, gutterIndex)\"\n  >\n    <div class=\"ui-split__gutter-handle\"></div>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden}:host.ui-split--horizontal{flex-direction:row}:host.ui-split--vertical{flex-direction:column}:host.ui-split--disabled .ui-split__gutter{cursor:default;pointer-events:none}:host.ui-split--dragging{-webkit-user-select:none;user-select:none}.ui-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background-color:var(--ui-bg-secondary);transition:background-color var(--ui-transition-fast)}.ui-split__gutter:hover,.ui-split__gutter:focus{background-color:var(--ui-bg-tertiary)}.ui-split__gutter:hover .ui-split__gutter-handle,.ui-split__gutter:focus .ui-split__gutter-handle{background-color:var(--ui-primary)}.ui-split__gutter:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ui-primary)}:host(.ui-split--horizontal) .ui-split__gutter--sm{width:4px}:host(.ui-split--horizontal) .ui-split__gutter--md{width:8px}:host(.ui-split--horizontal) .ui-split__gutter--lg{width:12px}:host(.ui-split--vertical) .ui-split__gutter--sm{height:4px}:host(.ui-split--vertical) .ui-split__gutter--md{height:8px}:host(.ui-split--vertical) .ui-split__gutter--lg{height:12px}:host(.ui-split--horizontal) .ui-split__gutter{cursor:col-resize}:host(.ui-split--vertical) .ui-split__gutter{cursor:row-resize}:host(.ui-split--dragging.ui-split--horizontal){cursor:col-resize}:host(.ui-split--dragging.ui-split--vertical){cursor:row-resize}.ui-split__gutter-handle{background-color:var(--ui-border);border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast)}:host(.ui-split--horizontal) .ui-split__gutter-handle{width:2px;height:24px}:host(.ui-split--vertical) .ui-split__gutter-handle{width:24px;height:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], panes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SplitPaneComponent), { isSignal: true }] }] } });
+
+class TreeNodeComponent {
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
+    indent = input(16, ...(ngDevMode ? [{ debugName: "indent" }] : []));
+    nodeClick = output();
+    nodeExpand = output();
+    nodeCollapse = output();
+    _expanded = signal(null, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
+    isExpanded = computed(() => {
+        const manualState = this._expanded();
+        if (manualState !== null) {
+            return manualState;
+        }
+        return this.node().expanded ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    hasChildren = computed(() => {
+        const children = this.node().children;
+        return children && children.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
+    paddingLeft = computed(() => this.level() * this.indent(), ...(ngDevMode ? [{ debugName: "paddingLeft" }] : []));
+    toggle(event) {
+        event.stopPropagation();
+        if (!this.hasChildren())
+            return;
+        const newState = !this.isExpanded();
+        this._expanded.set(newState);
+        if (newState) {
+            this.nodeExpand.emit(this.node());
+        }
+        else {
+            this.nodeCollapse.emit(this.node());
+        }
+    }
+    onClick(event) {
+        event.stopPropagation();
+        this.nodeClick.emit(this.node());
+    }
+    onDoubleClick(event) {
+        event.stopPropagation();
+        if (this.hasChildren()) {
+            this.toggle(event);
+        }
+    }
+    /** @internal - forward events from child nodes */
+    _onChildNodeClick(node) {
+        this.nodeClick.emit(node);
+    }
+    /** @internal */
+    _onChildNodeExpand(node) {
+        this.nodeExpand.emit(node);
+    }
+    /** @internal */
+    _onChildNodeCollapse(node) {
+        this.nodeCollapse.emit(node);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeNodeComponent, isStandalone: true, selector: "ui-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, ngImport: i0, template: "<div\n  class=\"ui-tree-node\"\n  [style.padding-left.px]=\"paddingLeft()\"\n>\n  <div\n    class=\"ui-tree-node__content\"\n    [class.ui-tree-node__content--selected]=\"false\"\n    (click)=\"onClick($event)\"\n    (dblclick)=\"onDoubleClick($event)\"\n  >\n    <button\n      type=\"button\"\n      class=\"ui-tree-node__toggle\"\n      [class.ui-tree-node__toggle--hidden]=\"!hasChildren()\"\n      [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n      (click)=\"toggle($event)\"\n      [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n      [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n    >\n      <svg\n        class=\"ui-tree-node__chevron\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 4L10 8L6 12\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n    @if (node().icon) {\n      <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n    }\n    <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n  </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n  @for (child of node().children; track child) {\n    <ui-tree-node\n      [node]=\"child\"\n      [level]=\"level() + 1\"\n      [indent]=\"indent()\"\n      (nodeClick)=\"_onChildNodeClick($event)\"\n      (nodeExpand)=\"_onChildNodeExpand($event)\"\n      (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n    />\n  }\n}\n", styles: [":host{display:block}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__toggle--hidden{visibility:hidden}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"ui-tree-node\"\n  [style.padding-left.px]=\"paddingLeft()\"\n>\n  <div\n    class=\"ui-tree-node__content\"\n    [class.ui-tree-node__content--selected]=\"false\"\n    (click)=\"onClick($event)\"\n    (dblclick)=\"onDoubleClick($event)\"\n  >\n    <button\n      type=\"button\"\n      class=\"ui-tree-node__toggle\"\n      [class.ui-tree-node__toggle--hidden]=\"!hasChildren()\"\n      [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n      (click)=\"toggle($event)\"\n      [attr.aria-expanded]=\"hasChildren() ? isExpanded() : null\"\n      [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n    >\n      <svg\n        class=\"ui-tree-node__chevron\"\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 4L10 8L6 12\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </button>\n    @if (node().icon) {\n      <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n    }\n    <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n  </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n  @for (child of node().children; track child) {\n    <ui-tree-node\n      [node]=\"child\"\n      [level]=\"level() + 1\"\n      [indent]=\"indent()\"\n      (nodeClick)=\"_onChildNodeClick($event)\"\n      (nodeExpand)=\"_onChildNodeExpand($event)\"\n      (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n    />\n  }\n}\n", styles: [":host{display:block}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__toggle--hidden{visibility:hidden}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}\n"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }] } });
+
+class TreeComponent {
+    nodes = input([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    indent = input(16, ...(ngDevMode ? [{ debugName: "indent" }] : []));
+    nodeClick = output();
+    nodeExpand = output();
+    nodeCollapse = output();
+    /** @internal */
+    _onNodeClick(node) {
+        this.nodeClick.emit(node);
+    }
+    /** @internal */
+    _onNodeExpand(node) {
+        this.nodeExpand.emit(node);
+    }
+    /** @internal */
+    _onNodeCollapse(node) {
+        this.nodeCollapse.emit(node);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeComponent, isStandalone: true, selector: "ui-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, ngImport: i0, template: "<div class=\"ui-tree\">\n  @for (node of nodes(); track node) {\n    <ui-tree-node\n      [node]=\"node\"\n      [level]=\"0\"\n      [indent]=\"indent()\"\n      (nodeClick)=\"_onNodeClick($event)\"\n      (nodeExpand)=\"_onNodeExpand($event)\"\n      (nodeCollapse)=\"_onNodeCollapse($event)\"\n    />\n  }\n</div>\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tree', standalone: true, imports: [TreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-tree\">\n  @for (node of nodes(); track node) {\n    <ui-tree-node\n      [node]=\"node\"\n      [level]=\"0\"\n      [indent]=\"indent()\"\n      (nodeClick)=\"_onNodeClick($event)\"\n      (nodeExpand)=\"_onNodeExpand($event)\"\n      (nodeCollapse)=\"_onNodeCollapse($event)\"\n    />\n  }\n</div>\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }] } });
+
 /*
  * Public API Surface of @m1z23r/ngx-ui
  */
@@ -4736,5 +5137,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SwitchComponent, TabActivePipe, TabComponent, TabIconDirective, TableComponent, TabsComponent, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TabActivePipe, TabComponent, TabIconDirective, TableComponent, TabsComponent, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map