@vallift/ngl 0.0.7 → 0.0.9

package/components/button/button.component.d.ts

@@ -5,7 +5,7 @@ export declare class ButtonComponent {
     elementRef: ElementRef<any>;
     document: Document;
     renderer: Renderer2;
-    type: import("@angular/core").InputSignal<"submit" | "button" | "reset">;
+    type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
     disabled: import("@angular/core").InputSignal<boolean>;
     fullWidth: import("@angular/core").InputSignal<boolean>;
     appearance: import("@angular/core").InputSignal<"textType" | "primary" | "outline" | "primaryRounded" | "outlineRounded">;

package/components/context-menu-button/context-menu-button.component.d.ts

@@ -7,7 +7,7 @@ export declare class ContextMenuButtonComponent implements OnDestroy {
     overlay: Overlay;
     dialog: Dialog;
     actions: import("@angular/core").InputSignal<ContextMenuButtonAction[] | undefined>;
-    positionPreference: import("@angular/core").InputSignal<"center" | "topLeft" | "topRight" | "topCenter" | "bottomLeft" | "bottomRight" | "bottomCenter" | "leftTop" | "leftCenter" | "leftBottom" | "rightTop" | "rightCenter" | "rightBottom">;
+    positionPreference: import("@angular/core").InputSignal<"topLeft" | "topRight" | "topCenter" | "bottomLeft" | "bottomRight" | "bottomCenter" | "leftTop" | "leftCenter" | "leftBottom" | "rightTop" | "rightCenter" | "rightBottom" | "center">;
     onActionClicked: import("@angular/core").OutputEmitterRef<string>;
     private basePanelClass;
     private dialogRef?;

package/components/overlay/overlay.service.d.ts

@@ -1,5 +1,4 @@
 import { DialogRef } from '@angular/cdk/dialog';
-import { ConnectedPosition } from '@angular/cdk/overlay';
 import { ComponentType } from '@angular/cdk/portal';
 import { AlertDialogComponent } from './alert-dialog/alert-dialog.component';
 import * as i0 from "@angular/core";
@@ -13,7 +12,7 @@ export declare class OverlayService {
     private basePanelClass;
     modalMaxHeightClass: string;
     openNearElement<T>(component: ComponentType<T>, triggerElement: HTMLElement, options?: {
-        positions?: ConnectedPosition[];
+        positionPreference?: 'topLeft' | 'topRight' | 'topCenter' | 'bottomLeft' | 'bottomRight' | 'bottomCenter' | 'leftTop' | 'leftCenter' | 'leftBottom' | 'rightTop' | 'rightCenter' | 'rightBottom' | 'center';
         disableClose?: boolean;
         data?: any;
         scrollStrategy?: 'noop' | 'block' | 'reposition' | 'close';

package/fesm2022/vallift-ngl.mjs

@@ -775,15 +775,55 @@ class OverlayService {
     basePanelClass = ['bg-white', 'shadow-2'];
     modalMaxHeightClass = 'max-h-[80vh]';
     openNearElement(component, triggerElement, options) {
-        const { positions = [
-            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 }, // Default: Centered Below
-            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 }, // Fallback: Centered Above
-            { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 }, // **New Fallback: Align Left if Overflowing Right**
-            { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 }
-        ], // **New Fallback: Align Left if Overflowing Right and not enough space below**
-        disableClose = false, data, scrollStrategy = 'block', isMobileResponsive = false } = options ?? {};
+        const { positionPreference = 'bottomLeft', disableClose = false, data, scrollStrategy = 'block', isMobileResponsive = false } = options ?? {};
         const isMobile = this.breakpointObserver.isMatched([Breakpoints.XSmall, Breakpoints.Small]);
         let positionStrategy;
+        const positionMappings = {
+            // **BOTTOM POSITIONS**
+            bottomRight: [
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
+            ],
+            bottomCenter: [
+                { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },
+            ],
+            bottomLeft: [
+                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+            ],
+            // **TOP POSITIONS**
+            topRight: [
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 },
+            ],
+            topCenter: [
+                { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },
+            ],
+            topLeft: [
+                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
+            ],
+            // **LEFT POSITIONS**
+            leftBottom: [
+                { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 },
+            ],
+            leftCenter: [
+                { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },
+            ],
+            leftTop: [
+                { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -8 },
+            ],
+            // **RIGHT POSITIONS**
+            rightBottom: [
+                { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
+            ],
+            rightCenter: [
+                { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },
+            ],
+            rightTop: [
+                { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 8 },
+            ],
+            // **CENTER**
+            center: [
+                { originX: 'center', originY: 'center', overlayX: 'center', overlayY: 'center' },
+            ]
+        };
         if (isMobile && isMobileResponsive) {
             positionStrategy = this.overlay.position()
                 .global()
@@ -796,7 +836,7 @@ class OverlayService {
                 .flexibleConnectedTo(triggerElement)
                 .withFlexibleDimensions(false)
                 .withPush(true)
-                .withPositions(positions);
+                .withPositions(positionMappings[positionPreference] || positionMappings.bottomCenter);
         }
         const scrollStrategyMapping = {
             noop: this.overlay.scrollStrategies.noop(),
@@ -1549,13 +1589,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 class CloseButtonComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CloseButtonComponent, isStandalone: true, selector: "app-close-button", ngImport: i0, template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <app-svg-icon src=\"assets/icons/close.svg\" class=\"text-neutral-800\" [size]=\"12\"></app-svg-icon>\n</p>\n", styles: [""], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CloseButtonComponent, isStandalone: true, selector: "app-close-button", ngImport: i0, template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n  </svg>\n\n</p>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CloseButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-close-button', standalone: true, imports: [
                         AppSvgIconComponent
-                    ], template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <app-svg-icon src=\"assets/icons/close.svg\" class=\"text-neutral-800\" [size]=\"12\"></app-svg-icon>\n</p>\n" }]
+                    ], template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n  </svg>\n\n</p>\n" }]
         }] });
 
 class OverlayContextMenuComponent {