@magic-xpa/cli 4.1300.0-dev4130.23 → 4.1300.0-dev4130.234

package/templates/component/view.component.ts

@@ -25,9 +25,8 @@ import { MgDisplayedColumns} from "./<%- id %>.mg.controls.g";
  <% } else {%>
   import {TaskBaseMagicComponent, magicProviders} from  "@magic-xpa/angular";
 <%}%>
-<% if(isModal) { %>
-  import {MagicModalInterface} from  "@magic-xpa/angular";
-<%}%>
+  import {MagicModalProperties} from  "@magic-xpa/angular";
+<%= '\n' %>
 
 @Component({
     selector: '<%= selector %>',
@@ -36,9 +35,11 @@ import { MgDisplayedColumns} from "./<%- id %>.mg.controls.g";
     templateUrl: './<%- id %>.component.html'
 })
 
-export class <%- id %> extends <% if(useMatGrid) { %>  BaseMatTableMagicComponent <% } else {%> TaskBaseMagicComponent     <%}%> <% if(isModal) { %> implements MagicModalInterface <% }%>
+export class <%- id %> extends <% if(useMatGrid) { %>  BaseMatTableMagicComponent <% } else {%> TaskBaseMagicComponent     <%}%>
 
 {
+  magicModalProperties: MagicModalProperties = new MagicModalProperties("<%- id %>", true, 0, 0, "300px", "300px", true, true, true, true);
+
   <% if(!magicConfig.no_controls_accessor) { %>
   mgc = MgControlName;
   mgcp = MgCustomProperties;
@@ -55,58 +56,6 @@ export class <%- id %> extends <% if(useMatGrid) { %>  BaseMatTableMagicComponen
   }
   <%}-%>
 
-  <% if(isModal) { -%>
-    private static readonly formName: string = "<%- id %>";
-    private static readonly showTitleBar: boolean = true;
-    private static readonly x: number = 0;
-    private static readonly y: number = 0;
-    private static readonly width: string = "300px";
-    private static readonly height: string = "300px";
-    private static readonly isCenteredToWindow: boolean = true;
-    private static readonly shouldCloseOnBackgroundClick: boolean = true;
-    private static readonly isResizable: boolean = true;
-    private static readonly isMovable: boolean = true;
-
-    X() {
-        return <%- id %>.x;
-    }
-
-    Y() {
-        return <%- id %>.y;
-    }
-
-    Width(): string {
-        return <%- id %>.width;
-    }
-
-    Height(): string {
-        return <%- id %>.height;
-    }
-
-    IsCenteredToWindow() {
-        return <%- id %>.isCenteredToWindow;
-    }
-
-    FormName() {
-        return <%- id %>.formName;
-    }
-
-    ShowTitleBar() {
-        return <%- id %>.showTitleBar;
-    }
-
-    ShouldCloseOnBackgroundClick() {
-      return <%- id %>.shouldCloseOnBackgroundClick;
-    }
-
-    IsResizable() {
-      return <%- id %>.isResizable;
-    }
-
-    IsMovable() {
-      return <%- id %>.isMovable;
-    }
-    <%}-%>
     <% if(useMatGrid) { -%>
     override displayedColumns = this.mgdp;
     <%}-%>

package/templates/themes/basicHTML/combobox.ejs

@@ -6,32 +6,35 @@
 
   <%# show combo box in table only while we on row edit  %>
   <% if (ctrl.props.is_table_child) { %>
-  <div *ngIf="mg.isRowInRowEditing(row)">
+  @if (mg.isRowInRowEditing(row)) {
+  <div>
     <%}%>
         <select
                 <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
                 <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
                 <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %> required <%}%>
         >
-            <option
-                    *ngFor="let o of mg.getItemListValues(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>);"
-                    [selected]="o.index == mg.getValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)"
-                    [value] = "o.index"
-            >
+            @for (o of mg.getItemListValues(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>); track $index) {
+            <option [selected]="o.index == mg.getValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)"
+                    [value] = "o.index">
                 {{o.displayValue}}
             </option>
+            }
         </select>
             <% if (ctrl.props.must_input || ctrl.props.validator != null) {%>
     <mgError [magic]=<%- ctrl.props.directive_id %>> </mgError>
             <%}%>
   <% if (ctrl.props.is_table_child) { %>
      </div>
+     }
 
      <%# show lable in table only while we on row read only  %>
-     <div *ngIf="!mg.isRowInRowEditing(row)">
+     @if (!mg.isRowInRowEditing(row)) {
+     <div>
           <label <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
           {{ mg.getDisplayValue(<%- ctrl.props.enum_id %>, row.rowId) }}
           </label>
      </div>
+     }
   <%}%>
 </div>

package/templates/themes/basicHTML/edit.ejs

@@ -8,7 +8,8 @@
                 <div  >
                 <% if (ctrl.style &&  ctrl.style.multiline_edit ){ %>
 
-                <textarea *ngIf="mg.isRowInRowEditing(row)"
+                @if (mg.isRowInRowEditing(row)) {
+                <textarea
                         type="text"
                         <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
                         <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
@@ -20,20 +21,21 @@
                         <% if (ctrl.props.validator) { %><%- ctrl.props.validator %><%}%>
                 >
                 </textarea>
+                }
 
                 <% } else { %>
+                <% if(ctrl.props.is_table_child){ %>
+                  @if (mg.isRowInRowEditing(row)) {
+                <%}%>
                 <input
                   <% if (ctrl.props.show_zoom_button  ){ %>
                   style="width: 70%"
                   <% } %>
                   <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
-                  <% if(ctrl.props.is_table_child){ %>
-                    *ngIf="mg.isRowInRowEditing(row)"
-                  <%}%>
 
                   <% if (ctrl.props.attribute == StorageAttributeType.Numeric) { %>
                     <% if (ctrl.props.currency) { %>
-                      currencyMask [options]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
+                      [currencyMask]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
                     <% } else { %>
                       type='number'
                     <% } %>
@@ -52,13 +54,16 @@
                         <%- ' '%>
                         <% if (ctrl.props.validator) { %><%- ctrl.props.validator %><%}%>
                 />
+                <% if(ctrl.props.is_table_child){ %>
+                  }
+                <%}%>
                 <% } %>
                   <%- include(`../../attributes/common/input/validation`, {ctrl : ctrl}) %>
 
                   <% if(ctrl.props.is_table_child){ %>
 
+                  @if (!mg.isRowInRowEditing(row)) {
                   <label
-                      *ngIf="!mg.isRowInRowEditing(row)"
                      <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
                      <% if (ctrl.props.currency  ) { %>
                        {{mg.getFormattedValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)
@@ -71,6 +76,7 @@
 
 
                   </label>
+                  }
                   <%}%>
                   <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
                 </div>
@@ -78,8 +84,8 @@
         case StorageAttributeType.Date: %>
 
      <% if(ctrl.props.is_table_child){ %>
+     @if (mg.isRowInRowEditing(row)) {
      <div
-       *ngIf="mg.isRowInRowEditing(row)"
        style="display: flex; flex-direction: row">
        <%}%>
 
@@ -102,24 +108,26 @@
 
        <% if(ctrl.props.is_table_child){ %>
      </div>
+     }
      <%}%>
 
 
      <% if(ctrl.props.is_table_child){ %>
+     @if (!mg.isRowInRowEditing(row)) {
      <label
-       *ngIf="!mg.isRowInRowEditing(row)"
        <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
        {{mg.getValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)
        <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
      </label>
+     }
      <%}%>
        <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
         <% break;
 
         case StorageAttributeType.Time: %>
      <% if(ctrl.props.is_table_child){ %>
+     @if (mg.isRowInRowEditing(row)) {
      <div
-       *ngIf="mg.isRowInRowEditing(row)"
        style="display: flex; flex-direction: row">
        <%}%>
 
@@ -141,15 +149,17 @@
 
        <% if(ctrl.props.is_table_child){ %>
      </div>
+     }
      <%}%>
 
      <% if(ctrl.props.is_table_child){ %>
+     @if (!mg.isRowInRowEditing(row)) {
      <label
-       *ngIf="!mg.isRowInRowEditing(row)"
        <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
        {{mg.getValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)
        <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
      </label>
+     }
      <%}%>
        <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
         <% break;

package/templates/themes/basicHTML/image.ejs

@@ -1,6 +1,7 @@
-
-<div *ngIf="mg.isImageExists(<%- ctrl.props.enum_id %>)">
+@if (mg.isImageExists(<%- ctrl.props.enum_id %>)) {
+<div>
     <img    <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
             <%- include('../../attributes/common/base/enabled', {ctrl : ctrl}) %>
             [src]="mg.getImage(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)" />
 </div>
+}

package/templates/themes/basicHTML/listbox.ejs

@@ -8,12 +8,11 @@
         <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %> required <%}%>
 >
     <%# build of items in listbox %>
-    <option
-            *ngFor="let o of mg.getItemListValues(<%-ctrl.props.enum_id%>);"
-            [value] = "o.index"
-    >
+    @for (o of mg.getItemListValues(<%-ctrl.props.enum_id%>); track $index) {
+    <option [value] = "o.index">
         {{o.displayValue}}
     </option>
+    }
 </select>
     <% if (ctrl.props.must_input || ctrl.props.validator != null) {%>
       <mgError [magic]=<%- ctrl.props.directive_id %>> </mgError>

package/templates/themes/basicHTML/push-button.ejs

@@ -25,4 +25,3 @@ case CtrlButtonTypeGui.Hypertext : %>
   <%- include('../../attributes/common/format.ejs', {ctrl : ctrl}) %>
 </button>
 <% } %> %>
-

package/templates/themes/basicHTML/radio.ejs

@@ -1,9 +1,20 @@
+<%# Wrap in a row-specific formGroup if this radio control is child of a table %>
 <div
+  <% if (ctrl.props.is_table_child && (typeof ctrl.props.web_style === "undefined" || ctrl.props.web_style === TableWebStyle.MatGrid)) { %>
+  [formGroup]="mg.getFormGroupByRow(row.rowId)"
+  <%}%>
+>
+  <%# Render radio buttons group if in edit mode, otherwise render a static display label %>
+  <% if (ctrl.props.is_table_child) { %>
+  @if (mg.isRowInRowEditing(row)) {
+  <% } %>
+  <div
      <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
-     (change)="task.mgOnRadioSelectionChanged(<%-ctrl.props.enum_id%>)"
+     (change)="task.mgOnRadioSelectionChanged(<%-ctrl.props.enum_id%><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)"
      >
-     <div
-        *ngFor="let o of mg.getItemListValues(<%-ctrl.props.enum_id%>);">
+     <%# Get the options and display values, passing the row.rowId if it is a table control %>
+     @for (o of mg.getItemListValues(<%-ctrl.props.enum_id%><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>); track $index) {
+     <div>
         <label>
            <input
                 type="radio"
@@ -14,7 +25,17 @@
            {{o.displayValue}}
         </label>
      </div>
+     }
     <% if (ctrl.props.must_input || ctrl.props.validator != null) {%>
     <mgError [magic]=<%- ctrl.props.directive_id %>> </mgError>
     <%}%>
+  </div>
+  <% if (ctrl.props.is_table_child) { %>
+  }
+  @if (!mg.isRowInRowEditing(row)) {
+  <label <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
+      {{ mg.getDisplayValue(<%- ctrl.props.enum_id %>, row.rowId) }}
+  </label>
+  }
+  <% } %>
 </div>

package/templates/themes/basicHTML/tab.ejs

@@ -12,7 +12,8 @@
         <% }%>
 
         <%# add buttons for each tab page%>
-        <div  *ngFor="let o of mg.getItemListValues(<%-ctrl.props.enum_id%>)">
+        @for (o of mg.getItemListValues(<%-ctrl.props.enum_id%>); track $index) {
+        <div>
             <button class="tab_button"
                     <%- include('../../attributes/common/base/enabled', {ctrl : ctrl}) %>
                     (click)="task.mgOnTabSelectionChanged(<%-ctrl.props.enum_id%>, o.index)"
@@ -21,6 +22,7 @@
                 {{mg.getTabpageText(<%- ctrl.props.enum_id %>, o.index)}}
             </button>
         </div>
+        }
 
         <% if ( tab_side == SideType.Top) { %>
             <%# add tab pages after adding the buttons, so the buttons are at the top%>

package/templates/themes/basicHiddenHTML/radio.ejs

@@ -2,8 +2,8 @@
         <%- include('../../attributes/common/no_control_base_attributes', {ctrl : ctrl}) %>
         magicMark="magicRadio"
 >
-    <div
-            *ngFor="let o of mgGetListboxValues(<%-ctrl.props.enum_id%>);">
+    @for (o of mgGetListboxValues(<%-ctrl.props.enum_id%>); track $index) {
+    <div>
         <label>
             <input
                     type="radio"
@@ -14,4 +14,5 @@
             {{o.displayValue}}
         </label>
     </div>
+    }
 </div>

package/templates/themes/basicHiddenHTML/table.ejs

@@ -7,12 +7,16 @@
      (scrolled)="tableService.onScrollDown()"
      [scrollWindow]="false"
 >
-    <div *ngFor="let row of task.Records.list">
-        <div *ngIf="mg.ifRowCreated(row)" id="row">
+    @for (row of task.Records.list; track $index) {
+        <div>
+        @if (mg.ifRowCreated(row)) {
+        <div id="row">
             <form [formGroup]="mg.getFormGroupByRow(row.rowId)" class="table_row"
                   [ngClass]="{ 'selected': mg.isRowSelected(<%= ctrl.props.enum_id %>, row.rowId)}">
                 <%- include(`../container`, {ctrl: ctrl}) %>
             </form>
         </div>
-    </div>
+        }
+        </div>
+    }
 </div>

package/templates/themes/container.ejs

@@ -6,6 +6,9 @@
         <% if (line_id !== null) {%>
             <% if( typeof child.props.common_line_id === "undefined" || child.props.common_line_id !== line_id) {%>
                 </div>
+                <% if (ctrl.props.web_style === TableWebStyle.MatGrid) { %>
+                }
+                <% } %>
                 <% line_id = null;%>
         <%}}%>
 
@@ -13,7 +16,12 @@
             <% if (line_id === null && typeof child.props.common_line_id !== "undefined" &&
                     child.controlType !== MgControlType.CTRL_TYPE_TAB) { %>
                          <% line_id = child.props.common_line_id; %>
-                        <div style="display: flex; flex-direction: row"  <% if (  ctrl.props.web_style === TableWebStyle.MatGrid) { %>*ngIf="mg.ifRowCreated(row)" <%}%>   >
+                        <% if (ctrl.props.web_style === TableWebStyle.MatGrid) { %>
+                        @if (mg.ifRowCreated(row)) {
+                        <div style="display: flex; flex-direction: row">
+                        <% } else { %>
+                        <div style="display: flex; flex-direction: row">
+                        <% } %>
             <%}%>
 
                 <%- include(`./control`, {child: child}) %>
@@ -23,4 +31,7 @@
     <%# close the line-wrapping div, in case it was left open %>
     <%if (line_id !== null) {%>
         </div>
+        <% if (ctrl.props.web_style === TableWebStyle.MatGrid) { %>
+        }
+        <% } %>
 <%}} %>

package/templates/themes/material/combobox.ejs

@@ -6,11 +6,14 @@
 
   <%# show combo box in table only while we on row edit  %>
   <% if (ctrl.props.is_table_child) { %>
-  <div *ngIf="mg.isRowInRowEditing(row)">
+  @if (mg.isRowInRowEditing(row)) {
+  <div>
     <%}%>
 
     <% if (ctrl.props.editable) { %>
+      <mat-form-field   <%- include('../../attributes/common/container_attributes', {ctrl : ctrl}) %>>
           <editable-combo
+                <%- include('../../attributes/common/base/visible',       {ctrl : ctrl})%>
                 <%- include(`../../attributes/common/control_attributes`, {ctrl : ctrl})%>
                 <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
                 <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %>
@@ -19,6 +22,7 @@
                 placeholder="Type/Select an option"
           >
           </editable-combo>
+      </mat-form-field>
     <% }else { %>
 
     <mat-form-field   <%- include('../../attributes/common/container_attributes', {ctrl : ctrl}) %>>
@@ -29,13 +33,11 @@
                 required
                 <% } %>
         >
-            <mat-option
-                    *ngFor="let o of mg.getItemListValues(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>);"
-
-                    [value]="o.index"
-            >
+            @for (o of mg.getItemListValues(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>); track $index) {
+            <mat-option [value]="o.index">
                 {{o.displayValue}}
             </mat-option>
+            }
         </mat-select>
     </mat-form-field>
 
@@ -47,12 +49,15 @@
 
     <% if (ctrl.props.is_table_child) { %>
     </div>
+    }
     <%# show lable in table only while we on row read only  %>
-     <div *ngIf="!mg.isRowInRowEditing(row)">
+     @if (!mg.isRowInRowEditing(row)) {
+     <div>
          <label <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
              {{ mg.getDisplayValue(<%- ctrl.props.enum_id %>, row.rowId) }}
           </label>
      </div>
+     }
      <%}%>
 
   </div>

package/templates/themes/material/edit.ejs

@@ -10,13 +10,14 @@
 default: %>
 
     <div>
+    <% if(ctrl.props.is_table_child){ %>
+      @if (mg.isRowInRowEditing(row)) {
+    <% } %>
     <mat-form-field
     <% if (ctrl.props.show_zoom_button  ){ %>
       style="width: 65%"
       <% } %>
       <%- include(`../../attributes/common/container_attributes`, {ctrl : ctrl})  %>
-      <% if(ctrl.props.is_table_child){ %>
-        *ngIf="mg.isRowInRowEditing(row)"   <%}%>
     >
   <div>
 
@@ -24,7 +25,7 @@ default: %>
     <textarea
       matInput
       <% if (ctrl.props.attribute == StorageAttributeType.Numeric) { %>
-      <% if (ctrl.props.currency) { %> currencyMask [options]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
+      <% if (ctrl.props.currency) { %> [currencyMask]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
       <% } else { %>
       type='number'
       <% } %> <%} %>
@@ -47,14 +48,10 @@ default: %>
     <% } else { %>
 
       <input
-        <% if(ctrl.props.is_table_child){ %>
-          *ngIf="mg.isRowInRowEditing(row)"
-        <%}%>
-
       matInput
       <% if (ctrl.props.attribute == StorageAttributeType.Numeric) { %>
         <% if (ctrl.props.currency) { %>
-          currencyMask [options]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
+          [currencyMask]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
         <% } else { %>
           type='number'
         <% } %> <% } %>
@@ -93,25 +90,26 @@ default: %>
     <% if (ctrl.props.auto_complete_mode) { %>
     <mat-autocomplete #<%- ctrl.props.id %>="matAutocomplete"
       <%- include('../../attributes/common/base/id', {ctrl : ctrl}) %>>
-        <mat-option
-                *ngFor="let o of mg.getFilteredList(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>);"
-
-                [value]="o.displayValue"
-        >
+        @for (o of mg.getFilteredList(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>); track $index) {
+        <mat-option [value]="o.displayValue">
             {{o.displayValue}}
         </mat-option>
+        }
     </mat-autocomplete>
     <% } %>
   </div>
 
     </mat-form-field>
+    <% if(ctrl.props.is_table_child){ %>
+      }
+    <% } %>
 
      <% if(ctrl.props.is_table_child){ %>
+     @if (!mg.isRowInRowEditing(row)) {
      <label
      <% if (ctrl.props.show_zoom_button  ){ %>
        style="width: 65%"
        <% } %>
-         *ngIf="!mg.isRowInRowEditing(row)"
         <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
        <% if (ctrl.props.currency) { %>
          {{mg.getFormattedValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)
@@ -122,6 +120,7 @@ default: %>
        <%}%>
 
      </label>
+     }
      <%}%>
          <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
        </div>
@@ -129,6 +128,9 @@ default: %>
 
 case StorageAttributeType.Date: %>
        <div>
+     <% if(ctrl.props.is_table_child){ %>
+       @if (mg.isRowInRowEditing(row)) {
+     <%}%>
      <mat-form-field
      <% if (ctrl.props.show_zoom_button  ){ %>
        style="width: 65%"
@@ -136,9 +138,6 @@ case StorageAttributeType.Date: %>
        <%- include(`../../attributes/common/container_attributes`, {ctrl : ctrl}) %>
                      <%- include('../../attributes/common/base/id', {ctrl : ctrl})  %>
                     [eventsOnly]=true
-       <% if(ctrl.props.is_table_child){ %>
-          *ngIf="mg.isRowInRowEditing(row)"
-       <%}%>
      >
 
        <% if(ctrl.props.is_table_child){ %>
@@ -154,35 +153,40 @@ case StorageAttributeType.Date: %>
         <%- ctrl.props.validator %>
         <% } %>
       >
-      <mat-datepicker-toggle matSuffix
-                             [for]="<%- ctrl.props.id %>"
-                             <% if ( child.props.is_table_child ) {%>
-                                 *ngIf="!mg.checkIsReadOnly(<%- ctrl.props.enum_id %>) &&  mg.isRowInRowEditing(row)"
-                             <%} else { %>
-                                 *ngIf="!mg.checkIsReadOnly(<%- ctrl.props.enum_id %>)"
-                             <%}%>
-                              >
-
-      </mat-datepicker-toggle>
+      <% if ( child.props.is_table_child ) {%>
+        @if (!mg.checkIsReadOnly(<%- ctrl.props.enum_id %>) &&  mg.isRowInRowEditing(row)) {
+        <mat-datepicker-toggle matSuffix [for]="<%- ctrl.props.id %>">
+        </mat-datepicker-toggle>
+        }
+      <%} else { %>
+        @if (!mg.checkIsReadOnly(<%- ctrl.props.enum_id %>)) {
+        <mat-datepicker-toggle matSuffix [for]="<%- ctrl.props.id %>">
+        </mat-datepicker-toggle>
+        }
+      <%}%>
       <mat-datepicker #<%- ctrl.props.id %>></mat-datepicker>
 
       <% if(ctrl.props.is_table_child){ %>
       </div>
       <%}%>
      </mat-form-field>
+     <% if(ctrl.props.is_table_child){ %>
+       }
+     <%}%>
          <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
 
        </div>
 <% if(ctrl.props.is_table_child){ %>
+@if (!mg.isRowInRowEditing(row)) {
 <label
 <% if (ctrl.props.show_zoom_button  ){ %>
   style="width: 65%"
   <% } %>
-  *ngIf="!mg.isRowInRowEditing(row)"
   <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
   {{mg.getValue(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>)
   <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
 </label>
+}
 <%}%>
 
 <% if(ctrl.props.validator){ %>

package/templates/themes/material/listbox.ejs

@@ -9,12 +9,11 @@
         <%- include('../../attributes/common/base/enabled', {ctrl : ctrl}) %>
 >
     <%# build of items in listbox %>
-    <mat-list-option
-            *ngFor="let o of mg.getItemListValues(<%-ctrl.props.enum_id%>);"
-            [value] = "o.index"
-    >
+    @for (o of mg.getItemListValues(<%-ctrl.props.enum_id%>); track $index) {
+    <mat-list-option [value] = "o.index">
         {{o.displayValue}}
     </mat-list-option>
+    }
 </mat-selection-list>
     <% if (ctrl.props.must_input  || ctrl.props.validator != null) {%>
       <mgError [magic]=<%- ctrl.props.directive_id %>> </mgError>

package/templates/themes/material/push-button.ejs

@@ -25,4 +25,3 @@ case CtrlButtonTypeGui.Hypertext : %>
         <%- include('../../attributes/common/format.ejs', {ctrl : ctrl}) %>
 </button>
 <% } %> %>
-