barsa-novin-ray-core 2.3.110 → 2.3.111

package/fesm2022/barsa-novin-ray-core.mjs

@@ -17238,37 +17238,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 class SplitterComponent extends BaseComponent {
     constructor() {
         super(...arguments);
+        this.emptyClass = true;
+        this.isBig = false;
         this._renderer = inject(Renderer2);
         this._portalService = inject(PortalService);
     }
     ngOnInit() {
         super.ngOnInit();
+        if (this.config) {
+            const { Bounds, MaxSize } = this.config;
+            this.elHeight = Bounds.height;
+            if (this.elHeight > 30) {
+                this.isBig = true;
+            }
+            this.flex = Bounds.width;
+            if (MaxSize.width > 0) {
+                this.elMaxWidth = MaxSize.width;
+            }
+        }
         const mousedown$ = fromEvent(this.el.nativeElement, 'mousedown');
         const mousemove$ = fromEvent(document, 'mousemove');
         const mouseup$ = fromEvent(document, 'mouseup');
         mousedown$
             .pipe(tap$1((event) => {
             event.preventDefault();
-            this.toggleResizingState(true);
+            let nextElementSibling = this.el.nativeElement.nextElementSibling;
+            while (nextElementSibling &&
+                nextElementSibling.tagName.toLocaleLowerCase() === 'bnrc-dynamic-layout') {
+                nextElementSibling &&
+                    nextElementSibling.nextElementSibling &&
+                    (nextElementSibling = nextElementSibling.nextElementSibling);
+            }
+            this.toggleResizingState(true, nextElementSibling);
         }), switchMap(() => {
             // تشخیص جهت در لحظه شروع درگ
             const isRtl = getComputedStyle(this.el.nativeElement).direction === 'rtl';
-            let sibling = this.el.nativeElement.previousElementSibling;
-            while (sibling.tagName.toLocaleLowerCase() === 'bnrc-dynamic-layout') {
-                sibling &&
-                    sibling.previousElementSibling &&
-                    (sibling = sibling.previousElementSibling);
-            }
-            const initialRect = sibling?.getBoundingClientRect();
+            let previousElementSibling = this.el.nativeElement.previousElementSibling;
+            while (previousElementSibling &&
+                previousElementSibling.tagName.toLocaleLowerCase() === 'bnrc-dynamic-layout') {
+                previousElementSibling &&
+                    previousElementSibling.previousElementSibling &&
+                    (previousElementSibling = previousElementSibling.previousElementSibling);
+            }
+            let nextElementSibling = this.el.nativeElement.nextElementSibling;
+            while (nextElementSibling &&
+                nextElementSibling.tagName.toLocaleLowerCase() === 'bnrc-dynamic-layout') {
+                nextElementSibling &&
+                    nextElementSibling.nextElementSibling &&
+                    (nextElementSibling = nextElementSibling.nextElementSibling);
+            }
+            const initialRect = previousElementSibling?.getBoundingClientRect();
             return mousemove$.pipe(tap$1((event) => {
-                if (sibling && initialRect) {
-                    this.calculateAndSetWidth(event, sibling, initialRect, isRtl);
+                if (previousElementSibling && initialRect) {
+                    this.calculateAndSetWidth(event, previousElementSibling, nextElementSibling, initialRect, isRtl);
                 }
-            }), takeUntil$1(mouseup$.pipe(tap$1(() => this.toggleResizingState(false)))));
+            }), takeUntil$1(mouseup$.pipe(tap$1(() => this.toggleResizingState(false, nextElementSibling)))));
         }), takeUntil$1(this._onDestroy$))
             .subscribe();
     }
-    calculateAndSetWidth(event, sibling, rect, isRtl) {
+    calculateAndSetWidth(event, sibling, nextSibling, rect, isRtl) {
         let newWidth;
         if (isRtl) {
             // در RTL: فاصله لبه راستِ المنت تا موقعیت ماوس
@@ -17279,28 +17307,74 @@ class SplitterComponent extends BaseComponent {
             newWidth = event.clientX - rect.left;
         }
         if ((!this.minWidth || newWidth >= this.minWidth) && (!this.maxWidth || newWidth <= this.maxWidth)) {
+            this._renderer.setStyle(nextSibling, 'overflow', `hidden`);
             this._renderer.setStyle(sibling, 'width', `${newWidth}px`);
             this._renderer.setStyle(sibling, 'flex', 'none');
         }
     }
-    toggleResizingState(isResizing) {
+    toggleResizingState(isResizing, nextSibling) {
         const action = isResizing ? 'addClass' : 'removeClass';
         this._renderer[action](document.body, 'resizing-active');
         this._renderer[action](this.el.nativeElement, 'is-resizing');
         if (!isResizing) {
+            this._renderer.removeClass(nextSibling, 'tw-overflow-hidden');
             this._portalService.windowResize();
         }
+        else {
+            this._renderer.addClass(nextSibling, 'tw-overflow-hidden');
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SplitterComponent, isStandalone: false, selector: "bnrc-splitter", inputs: { minWidth: "minWidth", maxWidth: "maxWidth" }, usesInheritance: true, ngImport: i0, template: `<div class="splitter-line"></div>`, isInline: true, styles: [":host{width:8px;cursor:col-resize;z-index:50;display:flex;justify-content:center;-webkit-user-select:none;user-select:none;transition:background-color .2s}:host:hover,.is-resizing{background-color:#3b82f61a}.splitter-line{width:2px;height:100%;background-color:#e2e8f0}:host:hover .splitter-line,.is-resizing .splitter-line{background-color:#3b82f6;width:4px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SplitterComponent, isStandalone: false, selector: "bnrc-splitter", inputs: { minWidth: "minWidth", maxWidth: "maxWidth", config: "config" }, host: { properties: { "class.empty-space": "this.emptyClass", "class.big": "this.isBig", "style.flex": "this.flex", "style.max-width.px": "this.elMaxWidth", "style.height.px": "this.elHeight" } }, usesInheritance: true, ngImport: i0, template: `<div class="splitter-container">
+        <div class="splitter-line"></div>
+        <div class="grip-handle">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+                <circle cx="9" cy="8" r="1.5" />
+                <circle cx="15" cy="8" r="1.5" />
+                <circle cx="9" cy="12" r="1.5" />
+                <circle cx="15" cy="12" r="1.5" />
+                <circle cx="9" cy="16" r="1.5" />
+                <circle cx="15" cy="16" r="1.5" />
+            </svg>
+        </div>
+    </div>`, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;width:12px;cursor:col-resize;z-index:50;-webkit-user-select:none;user-select:none;position:relative}.splitter-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.splitter-line{width:1px;height:90%;background:linear-gradient(to bottom,transparent 0%,rgba(203,213,225,1) 15%,rgba(203,213,225,1) 85%,transparent 100%);transition:all .2s}.grip-handle{position:absolute;width:24px;height:32px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000000d;transition:all .2s;color:#94a3b8}.grip-handle svg{width:14px;height:14px}:host:hover .splitter-line,.is-resizing .splitter-line{background:linear-gradient(to bottom,transparent 0%,#3b82f6 15%,#3b82f6 85%,transparent 100%);width:2px}:host:hover .grip-handle,.is-resizing .grip-handle{border-color:#3b82f6;color:#3b82f6;box-shadow:0 4px 6px -1px #3b82f633;transform:scale(1.05)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bnrc-splitter', standalone: false, template: `<div class="splitter-line"></div>`, styles: [":host{width:8px;cursor:col-resize;z-index:50;display:flex;justify-content:center;-webkit-user-select:none;user-select:none;transition:background-color .2s}:host:hover,.is-resizing{background-color:#3b82f61a}.splitter-line{width:2px;height:100%;background-color:#e2e8f0}:host:hover .splitter-line,.is-resizing .splitter-line{background-color:#3b82f6;width:4px}\n"] }]
-        }], propDecorators: { minWidth: [{
+            args: [{ selector: 'bnrc-splitter', standalone: false, template: `<div class="splitter-container">
+        <div class="splitter-line"></div>
+        <div class="grip-handle">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+                <circle cx="9" cy="8" r="1.5" />
+                <circle cx="15" cy="8" r="1.5" />
+                <circle cx="9" cy="12" r="1.5" />
+                <circle cx="15" cy="12" r="1.5" />
+                <circle cx="9" cy="16" r="1.5" />
+                <circle cx="15" cy="16" r="1.5" />
+            </svg>
+        </div>
+    </div>`, styles: [":host{display:flex;align-items:center;justify-content:center;width:12px;cursor:col-resize;z-index:50;-webkit-user-select:none;user-select:none;position:relative}.splitter-container{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.splitter-line{width:1px;height:90%;background:linear-gradient(to bottom,transparent 0%,rgba(203,213,225,1) 15%,rgba(203,213,225,1) 85%,transparent 100%);transition:all .2s}.grip-handle{position:absolute;width:24px;height:32px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000000d;transition:all .2s;color:#94a3b8}.grip-handle svg{width:14px;height:14px}:host:hover .splitter-line,.is-resizing .splitter-line{background:linear-gradient(to bottom,transparent 0%,#3b82f6 15%,#3b82f6 85%,transparent 100%);width:2px}:host:hover .grip-handle,.is-resizing .grip-handle{border-color:#3b82f6;color:#3b82f6;box-shadow:0 4px 6px -1px #3b82f633;transform:scale(1.05)}\n"] }]
+        }], propDecorators: { emptyClass: [{
+                type: HostBinding,
+                args: ['class.empty-space']
+            }], isBig: [{
+                type: HostBinding,
+                args: ['class.big']
+            }], flex: [{
+                type: HostBinding,
+                args: ['style.flex']
+            }], elMaxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width.px']
+            }], elHeight: [{
+                type: HostBinding,
+                args: ['style.height.px']
+            }], minWidth: [{
                 type: Input
             }], maxWidth: [{
                 type: Input
+            }], config: [{
+                type: Input
             }] } });
 
 class BaseUlvSettingComponent extends BaseComponent {