@ifsworld/granite-components 16.1.0-beta.1 → 16.1.0-beta.2

package/fesm2022/ifsworld-granite-components.mjs

@@ -689,20 +689,20 @@ function throwGraniteMenuMissingError() {
 }
 /**
  * Throws an exception for the case when menu's x-position value isn't valid.
- * In other words, it doesn't match 'before' or 'after'.
+ * In other words, it doesn't match 'before', 'after', or 'center'.
  * @docs-private
  */
 function throwGraniteMenuInvalidPositionX() {
-    throw Error(`xPosition value must be either 'before' or after'.
+    throw Error(`xPosition value must be either 'before', 'after', or 'center'.
       Example: <granite-menu xPosition="before" #menu="graniteMenu"></granite-menu>`);
 }
 /**
  * Throws an exception for the case when menu's y-position value isn't valid.
- * In other words, it doesn't match 'above' or 'below'.
+ * In other words, it doesn't match 'above', 'below', or 'center'.
  * @docs-private
  */
 function throwGraniteMenuInvalidPositionY() {
-    throw Error(`yPosition value must be either 'above' or below'.
+    throw Error(`yPosition value must be either 'above', 'below', or 'center'.
       Example: <granite-menu yPosition="above" #menu="graniteMenu"></granite-menu>`);
 }
 
@@ -885,7 +885,7 @@ class _MenuBaseComponent {
         return this._xPosition;
     }
     set xPosition(value) {
-        if (value !== 'before' && value !== 'after') {
+        if (value !== 'before' && value !== 'after' && value !== 'center') {
             throwGraniteMenuInvalidPositionX();
         }
         this._xPosition = value;
@@ -895,7 +895,7 @@ class _MenuBaseComponent {
         return this._yPosition;
     }
     set yPosition(value) {
-        if (value !== 'above' && value !== 'below') {
+        if (value !== 'above' && value !== 'below' && value !== 'center') {
             throwGraniteMenuInvalidPositionY();
         }
         this._yPosition = value;
@@ -909,6 +909,13 @@ class _MenuBaseComponent {
     }
     constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
+        /**
+         * Custom position configuration for the overlay.
+         * When provided, this overrides the default positioning logic based on
+         * xPosition and yPosition. Uses Angular CDK ConnectedPosition format.
+         * If empty or not provided, falls back to default positioning behavior.
+         */
+        this.cdkConnectedOverlayPosition = [];
         this.openOnHover = true;
         this.scrollStrategy = 'reposition';
         /**
@@ -1206,7 +1213,7 @@ class _MenuBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: _MenuBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: _MenuBaseComponent, isStandalone: true, inputs: { xPosition: "xPosition", yPosition: "yPosition", title: "title", closeLabel: "closeLabel", openOnHover: "openOnHover", scrollStrategy: "scrollStrategy", styles: "styles", touchStyles: "touchStyles", preventParentClose: "preventParentClose" }, outputs: { closed: "closed", opened: "opened" }, queries: [{ propertyName: "customTemplate", first: true, predicate: GraniteMenuCustomTemplateDirective, descendants: true }, { propertyName: "_allItems", predicate: GraniteMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: _MenuBaseComponent, isStandalone: true, inputs: { xPosition: "xPosition", yPosition: "yPosition", cdkConnectedOverlayPosition: "cdkConnectedOverlayPosition", title: "title", closeLabel: "closeLabel", openOnHover: "openOnHover", scrollStrategy: "scrollStrategy", styles: "styles", touchStyles: "touchStyles", preventParentClose: "preventParentClose" }, outputs: { closed: "closed", opened: "opened" }, queries: [{ propertyName: "customTemplate", first: true, predicate: GraniteMenuCustomTemplateDirective, descendants: true }, { propertyName: "_allItems", predicate: GraniteMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: _MenuBaseComponent, decorators: [{
             type: Directive
@@ -1214,6 +1221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }], yPosition: [{
                 type: Input
+            }], cdkConnectedOverlayPosition: [{
+                type: Input
             }], title: [{
                 type: Input
             }], closeLabel: [{
@@ -1816,26 +1825,51 @@ class GraniteMenuTriggerForDirective {
      * @param positionStrategy Strategy whose position to update.
      */
     _setPosition(positionStrategy) {
+        if (this.menu.cdkConnectedOverlayPosition &&
+            this.menu.cdkConnectedOverlayPosition.length > 0) {
+            positionStrategy.withPositions(this.menu.cdkConnectedOverlayPosition);
+            return;
+        }
         const MENU_PANEL_TOP_PADDING = 0;
-        let [originX, originFallbackX] = this.menu.xPosition === 'before' ? ['end', 'start'] : ['start', 'end'];
-        const [overlayY, overlayFallbackY] = this.menu.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
+        let [originX, originFallbackX] = this.menu.xPosition === 'before'
+            ? ['end', 'start']
+            : this.menu.xPosition === 'center'
+                ? ['center', 'center']
+                : ['start', 'end'];
+        const [overlayY, overlayFallbackY] = this.menu.yPosition === 'above'
+            ? ['bottom', 'top']
+            : this.menu.yPosition === 'center'
+                ? ['center', 'center']
+                : ['top', 'bottom'];
         let [originY, originFallbackY] = [overlayY, overlayFallbackY];
         let [overlayX, overlayFallbackX] = [originX, originFallbackX];
         let offsetY = 0;
         if (this.triggersSubmenu()) {
             // When the menu is a sub-menu, it should always align itself
             // to the edges of the trigger, instead of overlapping it.
-            overlayFallbackX = originX =
-                this.menu.xPosition === 'before' ? 'start' : 'end';
-            originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
+            if (this.menu.xPosition === 'center') {
+                overlayFallbackX = originX = 'center';
+                originFallbackX = overlayX = 'center';
+            }
+            else {
+                overlayFallbackX = originX =
+                    this.menu.xPosition === 'before' ? 'start' : 'end';
+                originFallbackX = overlayX = originX === 'end' ? 'start' : 'end';
+            }
             offsetY =
                 overlayY === 'bottom'
                     ? MENU_PANEL_TOP_PADDING
                     : -MENU_PANEL_TOP_PADDING;
         }
         else {
-            originY = overlayY === 'top' ? 'bottom' : 'top';
-            originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
+            if (this.menu.yPosition === 'center') {
+                originY = 'center';
+                originFallbackY = 'center';
+            }
+            else {
+                originY = overlayY === 'top' ? 'bottom' : 'top';
+                originFallbackY = overlayFallbackY === 'top' ? 'bottom' : 'top';
+            }
         }
         positionStrategy.withPositions([
             { originX, originY, overlayX, overlayY, offsetY },