@wavemaker-ai/app-ng-runtime 1.0.0-rc.324 → 1.0.0-rc.328

package/components/base/bundles/index.umd.js

@@ -502,6 +502,7 @@
             onDeactivate: () => container.classList.remove('is-active'),
             allowOutsideClick: allowOutsideClick,
             setReturnFocus: setReturnFocusElement,
+            preventScroll: true,
         });
     };
     /**
@@ -5444,25 +5445,33 @@
                 const element = target[0];
                 const parent = element?.parentElement;
                 const parentStyle = parent ? getComputedStyle(parent) : null;
-                const isParentFlex = parentStyle && ['flex', 'inline-flex'].includes(parentStyle.display);
-                let isMainAxis = false;
+                const isLayoutWrapper = parent && (parent.classList.contains('app-page-content') || parent.classList.contains('app-content-column'));
+                const isParentFlex = !isLayoutWrapper && parentStyle && ['flex', 'inline-flex'].includes(parentStyle.display);
+                let isWidthMainAxis = false;
+                let isHeightMainAxis = false;
                 if (isParentFlex) {
                     const flexDir = parentStyle.flexDirection;
                     const isRow = ['row', 'row-reverse'].includes(flexDir);
-                    isMainAxis = (key === 'width' && isRow) || (key === 'height' && !isRow);
+                    isWidthMainAxis = (key === 'width' && isRow); // Parent is a row, so width is the main axis
+                    isHeightMainAxis = (key === 'height' && !isRow); // Parent is a column, so height is the main axis
                 }
                 if (nv === 'fill') {
                     if (!isParentFlex) {
+                        // Not a flex parent: just take the full size.
                         styles[key] = '100%';
                     }
                     else {
                         styles[key] = '';
-                        if (isMainAxis) {
+                        // flex properties are set based on the main axis which is determined by the parent's direction
+                        if (isWidthMainAxis || isHeightMainAxis) {
                             styles['flex-grow'] = '1';
-                            styles['flex-shrink'] = '';
+                            styles['flex-shrink'] = '0';
+                            // flex-basis applies only when width is the main axis (row layout) and width is set to fill
+                            styles['flex-basis'] = isHeightMainAxis ? '' : '0';
                             styles[minKey] = '0';
                         }
                         else {
+                            // Fill in the other direction: just stretch to the parent's size.
                             styles['align-self'] = 'stretch';
                         }
                     }
@@ -5471,8 +5480,9 @@
                     if (nv === 'hug')
                         styles[key] = 'fit-content';
                     if (isParentFlex) {
-                        if (isMainAxis) {
-                            styles['flex-grow'] = '';
+                        if (isWidthMainAxis || isHeightMainAxis) {
+                            // Reset flex properties when width or height is configured as hug.
+                            styles['flex-basis'] = '';
                             styles['flex-shrink'] = '0'; // intentional — don't shrink fixed sizes
                             styles[minKey] = ''; // Need this because flex items default to min-height: auto, meaning they won't shrink smaller than their content.
                         }
@@ -5483,6 +5493,8 @@
                     else {
                         styles['flex-grow'] = '';
                         styles['flex-shrink'] = '0';
+                        styles['flex-basis'] = '';
+                        styles['flex-basis'] = '';
                         styles['align-self'] = '';
                         styles[minKey] = '';
                     }
@@ -6086,14 +6098,14 @@
         i0__namespace.ɵɵelement(0, "i", 0);
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngClass", ctx_r0._svgClasses)("ngStyle", ctx_r0.iconStyle)("iconUrl", ctx_r0.iconurl);
+        i0__namespace.ɵɵproperty("ngClass", ctx_r0._svgClasses)("ngStyle", ctx_r0.iconStyle)("iconUrl", ctx_r0._effectiveIconurl);
     } }
     function WmAppIconComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "img", 1);
         i0__namespace.ɵɵpipe(1, "image");
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("ngClass", ctx_r0._imageClasses)("src", i0__namespace.ɵɵpipeBind1(1, 4, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", ctx_r0.iconStyle);
+        i0__namespace.ɵɵproperty("ngClass", ctx_r0._imageClasses)("src", i0__namespace.ɵɵpipeBind1(1, 4, ctx_r0._effectiveIconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", ctx_r0.iconStyle);
         i0__namespace.ɵɵattribute("alt", ctx_r0.alt || "");
     } }
     function WmAppIconComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
@@ -6126,14 +6138,26 @@
      *   working - the wrapper element is layout-transparent.
      */
     class WmAppIconComponent {
+        get _effectiveIconurl() {
+            if (this.iconurl) {
+                return this.iconurl;
+            }
+            return isSvgIconUrl(this.icon) ? this.icon : null;
+        }
+        get _effectiveIconclass() {
+            if (this.iconclass) {
+                return this.iconclass;
+            }
+            return this.icon && !isSvgIconUrl(this.icon) ? this.icon : null;
+        }
         get _isSvg() {
-            return isSvgIconUrl(this.iconurl);
+            return isSvgIconUrl(this._effectiveIconurl);
         }
         get _isImage() {
-            return !!this.iconurl && !this._isSvg;
+            return !!this._effectiveIconurl && !this._isSvg;
         }
         get _fontClass() {
-            return [this.defaultIconClass, this.iconclass]
+            return [this.defaultIconClass, this._effectiveIconclass]
                 .filter(Boolean)
                 .join(' ');
         }
@@ -6159,7 +6183,7 @@
         static { this.ɵfac = function WmAppIconComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WmAppIconComponent)(); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: WmAppIconComponent, selectors: [["wm-app-icon"]], hostVars: 2, hostBindings: function WmAppIconComponent_HostBindings(rf, ctx) { if (rf & 2) {
                 i0__namespace.ɵɵstyleProp("display", "contents");
-            } }, inputs: { iconclass: "iconclass", iconurl: "iconurl", defaultIconClass: "defaultIconClass", defaultClasses: "defaultClasses", iconStyle: "iconStyle", alt: "alt" }, decls: 3, vars: 1, consts: [["role", "img", "aria-hidden", "true", "data-identifier", "svg", 3, "ngClass", "ngStyle", "iconUrl"], ["data-identifier", "img", 3, "ngClass", "src", "ngStyle"], ["aria-hidden", "true", 3, "ngClass", "ngStyle"]], template: function WmAppIconComponent_Template(rf, ctx) { if (rf & 1) {
+            } }, inputs: { icon: "icon", iconclass: "iconclass", iconurl: "iconurl", defaultIconClass: "defaultIconClass", defaultClasses: "defaultClasses", iconStyle: "iconStyle", alt: "alt" }, decls: 3, vars: 1, consts: [["role", "img", "aria-hidden", "true", "data-identifier", "svg", 3, "ngClass", "ngStyle", "iconUrl"], ["data-identifier", "img", 3, "ngClass", "src", "ngStyle"], ["aria-hidden", "true", 3, "ngClass", "ngStyle"]], template: function WmAppIconComponent_Template(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵconditionalCreate(0, WmAppIconComponent_Conditional_0_Template, 1, 3, "i", 0)(1, WmAppIconComponent_Conditional_1_Template, 2, 6, "img", 1)(2, WmAppIconComponent_Conditional_2_Template, 1, 2, "i", 2);
             } if (rf & 2) {
                 i0__namespace.ɵɵconditional(ctx._isSvg ? 0 : ctx._isImage ? 1 : ctx._fontClass ? 2 : -1);
@@ -6182,12 +6206,12 @@
                aria-hidden="true"
                data-identifier="svg"
                [ngStyle]="iconStyle"
-               [iconUrl]="iconurl"></i>
+               [iconUrl]="_effectiveIconurl"></i>
         } @else if (_isImage) {
             <img [ngClass]="_imageClasses"
                  data-identifier="img"
                  [attr.alt]="alt || ''"
-                 [src]="iconurl | image"
+                 [src]="_effectiveIconurl | image"
                  [ngStyle]="iconStyle"/>
         } @else if (_fontClass) {
             <i [ngClass]="_fontClasses"
@@ -6196,7 +6220,9 @@
         }
     `
                 }]
-        }], null, { iconclass: [{
+        }], null, { icon: [{
+                type: i0.Input
+            }], iconclass: [{
                 type: i0.Input
             }], iconurl: [{
                 type: i0.Input

package/components/base/fesm2022/index.mjs

@@ -492,6 +492,7 @@ const setFocusTrap = (container, allowOutsideClick, setReturnFocusElement) => {
         onDeactivate: () => container.classList.remove('is-active'),
         allowOutsideClick: allowOutsideClick,
         setReturnFocus: setReturnFocusElement,
+        preventScroll: true,
     });
 };
 /**
@@ -5445,25 +5446,33 @@ function AutoLayout(options = {}) {
             const element = target[0];
             const parent = element?.parentElement;
             const parentStyle = parent ? getComputedStyle(parent) : null;
-            const isParentFlex = parentStyle && ['flex', 'inline-flex'].includes(parentStyle.display);
-            let isMainAxis = false;
+            const isLayoutWrapper = parent && (parent.classList.contains('app-page-content') || parent.classList.contains('app-content-column'));
+            const isParentFlex = !isLayoutWrapper && parentStyle && ['flex', 'inline-flex'].includes(parentStyle.display);
+            let isWidthMainAxis = false;
+            let isHeightMainAxis = false;
             if (isParentFlex) {
                 const flexDir = parentStyle.flexDirection;
                 const isRow = ['row', 'row-reverse'].includes(flexDir);
-                isMainAxis = (key === 'width' && isRow) || (key === 'height' && !isRow);
+                isWidthMainAxis = (key === 'width' && isRow); // Parent is a row, so width is the main axis
+                isHeightMainAxis = (key === 'height' && !isRow); // Parent is a column, so height is the main axis
             }
             if (nv === 'fill') {
                 if (!isParentFlex) {
+                    // Not a flex parent: just take the full size.
                     styles[key] = '100%';
                 }
                 else {
                     styles[key] = '';
-                    if (isMainAxis) {
+                    // flex properties are set based on the main axis which is determined by the parent's direction
+                    if (isWidthMainAxis || isHeightMainAxis) {
                         styles['flex-grow'] = '1';
-                        styles['flex-shrink'] = '';
+                        styles['flex-shrink'] = '0';
+                        // flex-basis applies only when width is the main axis (row layout) and width is set to fill
+                        styles['flex-basis'] = isHeightMainAxis ? '' : '0';
                         styles[minKey] = '0';
                     }
                     else {
+                        // Fill in the other direction: just stretch to the parent's size.
                         styles['align-self'] = 'stretch';
                     }
                 }
@@ -5472,8 +5481,9 @@ function AutoLayout(options = {}) {
                 if (nv === 'hug')
                     styles[key] = 'fit-content';
                 if (isParentFlex) {
-                    if (isMainAxis) {
-                        styles['flex-grow'] = '';
+                    if (isWidthMainAxis || isHeightMainAxis) {
+                        // Reset flex properties when width or height is configured as hug.
+                        styles['flex-basis'] = '';
                         styles['flex-shrink'] = '0'; // intentional — don't shrink fixed sizes
                         styles[minKey] = ''; // Need this because flex items default to min-height: auto, meaning they won't shrink smaller than their content.
                     }
@@ -5484,6 +5494,8 @@ function AutoLayout(options = {}) {
                 else {
                     styles['flex-grow'] = '';
                     styles['flex-shrink'] = '0';
+                    styles['flex-basis'] = '';
+                    styles['flex-basis'] = '';
                     styles['align-self'] = '';
                     styles[minKey] = '';
                 }
@@ -6087,14 +6099,14 @@ function WmAppIconComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0._svgClasses)("ngStyle", ctx_r0.iconStyle)("iconUrl", ctx_r0.iconurl);
+    i0.ɵɵproperty("ngClass", ctx_r0._svgClasses)("ngStyle", ctx_r0.iconStyle)("iconUrl", ctx_r0._effectiveIconurl);
 } }
 function WmAppIconComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 1);
     i0.ɵɵpipe(1, "image");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0._imageClasses)("src", i0.ɵɵpipeBind1(1, 4, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", ctx_r0.iconStyle);
+    i0.ɵɵproperty("ngClass", ctx_r0._imageClasses)("src", i0.ɵɵpipeBind1(1, 4, ctx_r0._effectiveIconurl), i0.ɵɵsanitizeUrl)("ngStyle", ctx_r0.iconStyle);
     i0.ɵɵattribute("alt", ctx_r0.alt || "");
 } }
 function WmAppIconComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
@@ -6127,14 +6139,26 @@ function WmAppIconComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
  *   working - the wrapper element is layout-transparent.
  */
 class WmAppIconComponent {
+    get _effectiveIconurl() {
+        if (this.iconurl) {
+            return this.iconurl;
+        }
+        return isSvgIconUrl(this.icon) ? this.icon : null;
+    }
+    get _effectiveIconclass() {
+        if (this.iconclass) {
+            return this.iconclass;
+        }
+        return this.icon && !isSvgIconUrl(this.icon) ? this.icon : null;
+    }
     get _isSvg() {
-        return isSvgIconUrl(this.iconurl);
+        return isSvgIconUrl(this._effectiveIconurl);
     }
     get _isImage() {
-        return !!this.iconurl && !this._isSvg;
+        return !!this._effectiveIconurl && !this._isSvg;
     }
     get _fontClass() {
-        return [this.defaultIconClass, this.iconclass]
+        return [this.defaultIconClass, this._effectiveIconclass]
             .filter(Boolean)
             .join(' ');
     }
@@ -6160,7 +6184,7 @@ class WmAppIconComponent {
     static { this.ɵfac = function WmAppIconComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WmAppIconComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WmAppIconComponent, selectors: [["wm-app-icon"]], hostVars: 2, hostBindings: function WmAppIconComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵstyleProp("display", "contents");
-        } }, inputs: { iconclass: "iconclass", iconurl: "iconurl", defaultIconClass: "defaultIconClass", defaultClasses: "defaultClasses", iconStyle: "iconStyle", alt: "alt" }, decls: 3, vars: 1, consts: [["role", "img", "aria-hidden", "true", "data-identifier", "svg", 3, "ngClass", "ngStyle", "iconUrl"], ["data-identifier", "img", 3, "ngClass", "src", "ngStyle"], ["aria-hidden", "true", 3, "ngClass", "ngStyle"]], template: function WmAppIconComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { icon: "icon", iconclass: "iconclass", iconurl: "iconurl", defaultIconClass: "defaultIconClass", defaultClasses: "defaultClasses", iconStyle: "iconStyle", alt: "alt" }, decls: 3, vars: 1, consts: [["role", "img", "aria-hidden", "true", "data-identifier", "svg", 3, "ngClass", "ngStyle", "iconUrl"], ["data-identifier", "img", 3, "ngClass", "src", "ngStyle"], ["aria-hidden", "true", 3, "ngClass", "ngStyle"]], template: function WmAppIconComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, WmAppIconComponent_Conditional_0_Template, 1, 3, "i", 0)(1, WmAppIconComponent_Conditional_1_Template, 2, 6, "img", 1)(2, WmAppIconComponent_Conditional_2_Template, 1, 2, "i", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx._isSvg ? 0 : ctx._isImage ? 1 : ctx._fontClass ? 2 : -1);
@@ -6183,12 +6207,12 @@ class WmAppIconComponent {
                aria-hidden="true"
                data-identifier="svg"
                [ngStyle]="iconStyle"
-               [iconUrl]="iconurl"></i>
+               [iconUrl]="_effectiveIconurl"></i>
         } @else if (_isImage) {
             <img [ngClass]="_imageClasses"
                  data-identifier="img"
                  [attr.alt]="alt || ''"
-                 [src]="iconurl | image"
+                 [src]="_effectiveIconurl | image"
                  [ngStyle]="iconStyle"/>
         } @else if (_fontClass) {
             <i [ngClass]="_fontClasses"
@@ -6197,7 +6221,9 @@ class WmAppIconComponent {
         }
     `
             }]
-    }], null, { iconclass: [{
+    }], null, { icon: [{
+            type: Input
+        }], iconclass: [{
             type: Input
         }], iconurl: [{
             type: Input