@wavemaker-ai/app-ng-runtime 1.0.0-rc.322 → 1.0.0-rc.326

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

@@ -502,6 +502,7 @@
             onDeactivate: () => container.classList.remove('is-active'),
             allowOutsideClick: allowOutsideClick,
             setReturnFocus: setReturnFocusElement,
+            preventScroll: true,
         });
     };
     /**
@@ -3008,6 +3009,9 @@
             this.binditemtarget = this.nativeElement.getAttribute('itemtarget.bind');
             this.binduserrole = this.nativeElement.getAttribute('userrole.bind');
             this.bindisactive = this.nativeElement.getAttribute('isactive.bind');
+            this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe('locale-changed', () => {
+                this._resetNodes();
+            });
         }
         /**
          * constructs individual node for the widget model.
@@ -3148,6 +3152,9 @@
             super.onPropertyChange(key, nv, ov);
         }
         ngOnDestroy() {
+            if (this.cancelLocaleChangeSubscription) {
+                this.cancelLocaleChangeSubscription();
+            }
             // MEMORY LEAK FIX: Cancel debounced function
             if (this._resetNodes && this._resetNodes.cancel) {
                 this._resetNodes.cancel();
@@ -6080,14 +6087,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) {
@@ -6120,14 +6127,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(' ');
         }
@@ -6153,7 +6172,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);
@@ -6176,12 +6195,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"
@@ -6190,7 +6209,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,
     });
 };
 /**
@@ -3006,6 +3007,9 @@ class DatasetAwareNavComponent extends StylableComponent {
         this.binditemtarget = this.nativeElement.getAttribute('itemtarget.bind');
         this.binduserrole = this.nativeElement.getAttribute('userrole.bind');
         this.bindisactive = this.nativeElement.getAttribute('isactive.bind');
+        this.cancelLocaleChangeSubscription = this.getAppInstance().subscribe('locale-changed', () => {
+            this._resetNodes();
+        });
     }
     /**
      * constructs individual node for the widget model.
@@ -3146,6 +3150,9 @@ class DatasetAwareNavComponent extends StylableComponent {
         super.onPropertyChange(key, nv, ov);
     }
     ngOnDestroy() {
+        if (this.cancelLocaleChangeSubscription) {
+            this.cancelLocaleChangeSubscription();
+        }
         // MEMORY LEAK FIX: Cancel debounced function
         if (this._resetNodes && this._resetNodes.cancel) {
             this._resetNodes.cancel();
@@ -6081,14 +6088,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) {
@@ -6121,14 +6128,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(' ');
     }
@@ -6154,7 +6173,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);
@@ -6177,12 +6196,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"
@@ -6191,7 +6210,9 @@ class WmAppIconComponent {
         }
     `
             }]
-    }], null, { iconclass: [{
+    }], null, { icon: [{
+            type: Input
+        }], iconclass: [{
             type: Input
         }], iconurl: [{
             type: Input