@magic-xpa/angular 4.1200.0-dev4120.205 → 4.1200.0-dev4120.212

package/fesm2022/magic-xpa-angular.mjs

@@ -1048,35 +1048,41 @@ const _c0$3 = ["modalheader"];
 const _c1$1 = ["modalForeground"];
 function MagicOverlayContainer_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵelementStart(0, "button", 14);
     i0.ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
     i0.ɵɵtext(1, "X");
     i0.ɵɵelementEnd();
 } }
 function MagicOverlayContainer_span_5_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 17, 2);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_5_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "corner")); });
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_5_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "right")); });
     i0.ɵɵelementEnd();
 } }
 function MagicOverlayContainer_span_6_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 18, 3);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_6_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "right")); });
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_6_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "left")); });
     i0.ɵɵelementEnd();
 } }
 function MagicOverlayContainer_span_7_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 19, 4);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_7_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "bottom")); });
+    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_7_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "corner")); });
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_div_8_Template(rf, ctx) { if (rf & 1) {
+function MagicOverlayContainer_span_8_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20, 5);
+    i0.ɵɵelementStart(0, "span", 18);
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_8_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "bottom")); });
+    i0.ɵɵelementEnd();
+} }
+function MagicOverlayContainer_div_9_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19, 2);
     i0.ɵɵtext(2);
-    i0.ɵɵelementStart(3, "button", 21);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_div_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
+    i0.ɵɵelementStart(3, "button", 20);
+    i0.ɵɵlistener("click", function MagicOverlayContainer_div_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
     i0.ɵɵtext(4, "X");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -1123,6 +1129,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     isCenteredToWindow = true;
     static minAllowedWidth = 30;
     static minAllowedHeight = 30;
+    _isRtl = false; // Indicates whether the text direction is right-to-left (RTL)
     /**
      *
      */
@@ -1138,6 +1145,13 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         let comp = this.componentRef.instance;
         this.isCenteredToWindow = comp.IsCenteredToWindow();
     }
+    ngAfterViewInit() {
+        // Detect RTL mode
+        if (this.foregroundElementRef?.nativeElement) {
+            const dir = getComputedStyle(this.foregroundElementRef.nativeElement).direction;
+            this._isRtl = dir === 'rtl';
+        }
+    }
     setViewContainerRef(vcRef) {
         this.modalbodyViewContainerRef = vcRef;
     }
@@ -1153,6 +1167,12 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         else
             return '';
     }
+    /**
+    * Returns boolean to indicate whether the text direction is right-to-left (RTL)
+    */
+    get isRtl() {
+        return this._isRtl;
+    }
     /**
      * Returns CSS styles for the window
      * @returns
@@ -1241,14 +1261,23 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         this.resizing = true;
         this.resizeDirection = direction;
         const element = this.foregroundElementRef.nativeElement;
+        const parentElement = element.parentNode;
         this.originalWidth = element.offsetWidth;
         this.originalHeight = element.offsetHeight;
         this.originalMouseX = event.clientX;
         this.originalMouseY = event.clientY;
-        // Removes auto margin and set left and top style
+        // Removes auto margin and set left, right and top style
         if (this.isCenteredToWindow) {
-            element.style.left = element.offsetLeft + 'px';
-            element.style.top = element.offsetTop + 'px';
+            const left = element.offsetLeft;
+            const top = element.offsetTop;
+            if (this.isRtl) {
+                const right = parentElement.offsetWidth - element.offsetLeft - element.offsetWidth;
+                element.style.right = `${right}px`;
+            }
+            else {
+                element.style.left = `${left}px`;
+            }
+            element.style.top = `${top}px`;
             element.style.margin = '';
             this.isCenteredToWindow = false;
         }
@@ -1269,7 +1298,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         const parentWidth = parentElement.offsetWidth;
         const parentHeight = parentElement.offsetHeight;
         const rect = element.getBoundingClientRect();
-        const left = rect.left;
+        const left = this.isRtl ? (parentWidth - rect.right) : rect.left;
         const top = rect.top;
         // When the user extends the overlay window to its edge, it becomes hard to grab the border for resizing.
         // To improve this, 2px are subtracted from maxAllowedWidth and maxAllowedHeight, making it easier to grab the overlay's border for resizing.
@@ -1277,7 +1306,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         const maxAllowedHeight = parentHeight - top - 2;
         let dx = (event.clientX - this.originalMouseX);
         let dy = (event.clientY - this.originalMouseY);
-        if (this.resizeDirection === 'right' || this.resizeDirection === 'corner') {
+        if (this.resizeDirection === 'right' || (this.resizeDirection === 'corner' && !this.isRtl)) {
             let newWidth = this.originalWidth + dx;
             if (newWidth > maxAllowedWidth)
                 newWidth = maxAllowedWidth;
@@ -1285,6 +1314,17 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
                 newWidth = MagicOverlayContainer.minAllowedWidth;
             element.style.width = `${newWidth}px`;
         }
+        if (this.resizeDirection === 'left' || (this.resizeDirection === 'corner' && this.isRtl)) {
+            const parentLeft = parentElement.getBoundingClientRect().left;
+            const currentRight = rect.right;
+            const maxAllowedWidth = currentRight - parentLeft - 2;
+            let newWidth = this.originalWidth - dx;
+            if (newWidth > maxAllowedWidth)
+                newWidth = maxAllowedWidth;
+            else if (newWidth < MagicOverlayContainer.minAllowedWidth)
+                newWidth = MagicOverlayContainer.minAllowedWidth;
+            element.style.width = `${newWidth}px`;
+        }
         if (this.resizeDirection === 'bottom' || this.resizeDirection === 'corner') {
             let newHeight = this.originalHeight + dy;
             if (newHeight > maxAllowedHeight)
@@ -1312,16 +1352,16 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.foregroundElementRef = _t.first);
         } }, hostBindings: function MagicOverlayContainer_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("mousemove", function MagicOverlayContainer_mousemove_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow)("mouseup", function MagicOverlayContainer_mouseup_HostBindingHandler() { return ctx.onResizeEnd(); }, false, i0.ɵɵresolveWindow);
-        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 8, consts: [["modalForeground", ""], ["modalbody", ""], ["dragHandleCorner", ""], ["dragHandleRight", ""], ["dragHandleBottom", ""], ["modalheader", ""], [1, "boundary-line"], [1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], ["cdkDragBoundary", ".boundary-line", "cdkDrag", "", 1, "modal-foreground", 3, "ngStyle", "cdkDragDisabled"], ["class", "dragHandle corner", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle right", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle bottom", 3, "mousedown", 4, "ngIf"], ["class", "modal-header", "cdkDragHandle", "", 3, "movable", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "dragHandle", "corner", 3, "mousedown"], [1, "dragHandle", "right", 3, "mousedown"], [1, "dragHandle", "bottom", 3, "mousedown"], ["cdkDragHandle", "", 1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 9, consts: [["modalForeground", ""], ["modalbody", ""], ["modalheader", ""], [1, "boundary-line"], [1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], ["cdkDragBoundary", ".boundary-line", "cdkDrag", "", 1, "modal-foreground", 3, "ngStyle", "cdkDragDisabled"], ["class", "dragHandle right", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle left", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle corner", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle bottom", 3, "mousedown", 4, "ngIf"], ["class", "modal-header", "cdkDragHandle", "", 3, "movable", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "dragHandle", "right", 3, "mousedown"], [1, "dragHandle", "left", 3, "mousedown"], [1, "dragHandle", "corner", 3, "mousedown"], [1, "dragHandle", "bottom", 3, "mousedown"], ["cdkDragHandle", "", 1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
+            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
             i0.ɵɵlistener("click", function MagicOverlayContainer_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnBackgroundClick()); });
-            i0.ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 8);
+            i0.ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 9, 0);
-            i0.ɵɵtemplate(5, MagicOverlayContainer_span_5_Template, 2, 0, "span", 10)(6, MagicOverlayContainer_span_6_Template, 2, 0, "span", 11)(7, MagicOverlayContainer_span_7_Template, 2, 0, "span", 12)(8, MagicOverlayContainer_div_8_Template, 5, 3, "div", 13);
-            i0.ɵɵelementStart(9, "div", 14);
-            i0.ɵɵelement(10, "div", 15, 1);
+            i0.ɵɵelementStart(3, "div", 6, 0);
+            i0.ɵɵtemplate(5, MagicOverlayContainer_span_5_Template, 1, 0, "span", 7)(6, MagicOverlayContainer_span_6_Template, 1, 0, "span", 8)(7, MagicOverlayContainer_span_7_Template, 1, 0, "span", 9)(8, MagicOverlayContainer_span_8_Template, 1, 0, "span", 10)(9, MagicOverlayContainer_div_9_Template, 5, 3, "div", 11);
+            i0.ɵɵelementStart(10, "div", 12);
+            i0.ɵɵelement(11, "div", 13, 1);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -1329,7 +1369,9 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", ctx.getStyle())("cdkDragDisabled", !ctx.IsMovable());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵproperty("ngIf", ctx.IsResizable() && !ctx.isRtl);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.IsResizable() && ctx.isRtl);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.IsResizable());
             i0.ɵɵadvance();
@@ -1338,7 +1380,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             i0.ɵɵproperty("ngIf", ctx.getShowTitleBar());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", ctx.getClientAreaStyles());
-        } }, dependencies: [i1.NgIf, i1.NgStyle, i2$1.CdkDragHandle, i2$1.CdkDrag, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}.modal-header.movable[_ngcontent-%COMP%]:active{cursor:move}.container[_ngcontent-%COMP%]{position:relative}.dragHandle[_ngcontent-%COMP%]{position:absolute}.dragHandle.corner[_ngcontent-%COMP%]{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.right[_ngcontent-%COMP%]{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom[_ngcontent-%COMP%]{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line[_ngcontent-%COMP%]{width:100%;height:100%;max-width:100%}"] });
+        } }, dependencies: [i1.NgIf, i1.NgStyle, i2$1.CdkDragHandle, i2$1.CdkDrag, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}.modal-header.movable[_ngcontent-%COMP%]:active{cursor:move}.container[_ngcontent-%COMP%]{position:relative}.dragHandle[_ngcontent-%COMP%]{position:absolute}.dragHandle.corner[_ngcontent-%COMP%]{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}[dir=\"rtl\"][_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%], [dir=\"rtl\"]   [_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%]{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left[_ngcontent-%COMP%]{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right[_ngcontent-%COMP%]{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom[_ngcontent-%COMP%]{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line[_ngcontent-%COMP%]{width:100%;height:100%;max-width:100%}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainer, [{
         type: Component,
@@ -1351,9 +1393,10 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
 
       <div #modalForeground class="modal-foreground" [ngStyle]="getStyle()" cdkDragBoundary=".boundary-line" cdkDrag [cdkDragDisabled]="!IsMovable()">
 
-        <span #dragHandleCorner *ngIf="IsResizable()" class="dragHandle corner" (mousedown)="onResizeStart($event, 'corner')"></span>
-        <span #dragHandleRight *ngIf="IsResizable()" class="dragHandle right" (mousedown)="onResizeStart($event, 'right')"></span>
-        <span #dragHandleBottom *ngIf="IsResizable()" class="dragHandle bottom" (mousedown)="onResizeStart($event, 'bottom')"></span>
+        <span *ngIf="IsResizable() && !isRtl" class="dragHandle right" (mousedown)="onResizeStart($event, 'right')"></span>
+        <span *ngIf="IsResizable() && isRtl" class="dragHandle left" (mousedown)="onResizeStart($event, 'left')"></span>
+        <span *ngIf="IsResizable()" class="dragHandle corner" (mousedown)="onResizeStart($event, 'corner')"></span>
+        <span *ngIf="IsResizable()" class="dragHandle bottom" (mousedown)="onResizeStart($event, 'bottom')"></span>
 
         <div #modalheader class="modal-header" *ngIf="getShowTitleBar()" cdkDragHandle [class.movable]="IsMovable()">
           {{getText()}}
@@ -1366,7 +1409,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         </div>
       </div>
     </div>
-  `, standalone: false, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}.modal-header.movable:active{cursor:move}.container{position:relative}.dragHandle{position:absolute}.dragHandle.corner{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.right{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line{width:100%;height:100%;max-width:100%}\n"] }]
+  `, standalone: false, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}.modal-header.movable:active{cursor:move}.container{position:relative}.dragHandle{position:absolute}.dragHandle.corner{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}:host-context([dir=\"rtl\"]) .dragHandle.corner{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line{width:100%;height:100%;max-width:100%}\n"] }]
     }], () => [], { headerElementRef: [{
             type: ViewChild,
             args: ['modalheader', { static: false }]
@@ -1386,7 +1429,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             type: HostListener,
             args: ['window:mouseup']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 50 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 52 }); })();
 
 /**
  * Service managing overlay windows