@magic-xpa/cli 4.1201.0-dev4121.306 → 4.1201.0-dev4121.308

package/templates/themes/material/base_attributes_date.ejs

@@ -1,8 +1,8 @@
-<%- include('../../attributes/common/base/rtol',          {ctrl : ctrl})%>
-<%- include('../../attributes/common/base/visible',       {ctrl : ctrl})%>
-<%- include('../../attributes/common/base/tabindex',      {ctrl : ctrl})%>
-<%- include('../../attributes/common/base/class',         {ctrl : ctrl})%>
-<%- include('../../attributes/common/base/wallpaper',     {ctrl : ctrl})%>
-<%- include('../../attributes/common/base/imageFileName', {ctrl : ctrl})%>
-<%- include('../../attributes/common/base/testingId',     {ctrl : ctrl})%>
-<%- include('../../attributes/common/base/control_type',  {ctrl : ctrl})%>
+<%- include('../../attributes/common/base/rtol',          {ctrl : ctrl})%>
+<%- include('../../attributes/common/base/visible',       {ctrl : ctrl})%>
+<%- include('../../attributes/common/base/tabindex',      {ctrl : ctrl})%>
+<%- include('../../attributes/common/base/class',         {ctrl : ctrl})%>
+<%- include('../../attributes/common/base/wallpaper',     {ctrl : ctrl})%>
+<%- include('../../attributes/common/base/imageFileName', {ctrl : ctrl})%>
+<%- include('../../attributes/common/base/testingId',     {ctrl : ctrl})%>
+<%- include('../../attributes/common/base/control_type',  {ctrl : ctrl})%>

package/templates/themes/material/combobox.ejs

@@ -1,58 +1,60 @@
-<div
-  <% if (ctrl.props.is_table_child && (typeof ctrl.props.web_style === "undefined" || ctrl.props.web_style === TableWebStyle.MatGrid)) { %>
-  [formGroup]="mg.getFormGroupByRow(row.rowId)"
-  <%}%>
->
-
-  <%# show combo box in table only while we on row edit  %>
-  <% if (ctrl.props.is_table_child) { %>
-  <div *ngIf="mg.isRowInRowEditing(row)">
-    <%}%>
-
-    <% if (ctrl.props.editable) { %>
-          <editable-combo
-                <%- 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) { %>
-                required
-                <% } %>
-                placeholder="Type/Select an option"
-          >
-          </editable-combo>
-    <% }else { %>
-
-    <mat-form-field   <%- include('../../attributes/common/container_attributes', {ctrl : ctrl}) %>>
-        <mat-select
-                <%- 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) { %>
-                required
-                <% } %>
-        >
-            <mat-option
-                    *ngFor="let o of mg.getItemListValues(<%- ctrl.props.enum_id %><% if(ctrl.props.is_table_child){ %>, row.rowId<%}%>);"
-
-                    [value]="o.index"
-            >
-                {{o.displayValue}}
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-
-    <% } %>
-
-    <% 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)">
-         <label <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>>
-             {{ mg.getDisplayValue(<%- ctrl.props.enum_id %>, row.rowId) }}
-          </label>
-     </div>
-     <%}%>
-
-  </div>
+<div
+  <% if (ctrl.props.is_table_child && (typeof ctrl.props.web_style === "undefined" || ctrl.props.web_style === TableWebStyle.MatGrid)) { %>
+  [formGroup]="mg.getFormGroupByRow(row.rowId)"
+  <%}%>
+>
+
+  <%# show combo box in table only while we on row edit  %>
+  <% if (ctrl.props.is_table_child) { %>
+  @if (mg.isRowInRowEditing(row)) {
+  <div>
+    <%}%>
+
+    <% if (ctrl.props.editable) { %>
+          <editable-combo
+                <%- 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) { %>
+                required
+                <% } %>
+                placeholder="Type/Select an option"
+          >
+          </editable-combo>
+    <% }else { %>
+
+    <mat-form-field   <%- include('../../attributes/common/container_attributes', {ctrl : ctrl}) %>>
+        <mat-select
+                <%- 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) { %>
+                required
+                <% } %>
+        >
+            @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>
+
+    <% } %>
+
+    <% 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  %>
+     @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

@@ -1,204 +1,208 @@
-<% if(ctrl.props.is_table_child){ %>
-   <div [formGroup]="mg.getFormGroupByRow(row.rowId)"
-        style="display: flex; flex-direction: row">
-<%}%>
-
-
-<% if ((typeof ctrl.props.dataexp === "undefined") && ((typeof ctrl.props.modifiable === "undefined" || ctrl.props.modifiable === true || ctrl.props.modifiable.has_exp)))
-{ %>
-<% switch (ctrl.props.attribute) {
-default: %>
-
-    <div>
-    <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>
-
-    <% if (ctrl.style && ctrl.style.multiline_edit ){ %>
-    <textarea
-      matInput
-      <% if (ctrl.props.attribute == StorageAttributeType.Numeric) { %>
-      <% if (ctrl.props.currency) { %> currencyMask [options]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
-      <% } else { %>
-      type='number'
-      <% } %> <%} %>
-      <%- include(`../../attributes/common/control_attributes`, {ctrl : ctrl}) %>
-      <%- include('../../attributes/common/input_attributes', {ctrl : ctrl}) %>
-      <% if (ctrl.props.mgformat) { %><%- ctrl.props.mgformat %> <%}%>
-
-      <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %>
-      required
-      <% } %>
-      <% if (ctrl.props.directive) { %>
-      <%- ctrl.props.directive %>
-      <% } %>
-      <%- ' '%>
-      <% if (ctrl.props.validator) { %>
-      <%- ctrl.props.validator %>
-      <% } %>
-    >
-	            </textarea>
-    <% } 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 %>))"
-        <% } else { %>
-          type='number'
-        <% } %> <% } %>
-      <% if (ctrl.props.attribute == StorageAttributeType.Time) { %>
-      type='time'
-        <% if (ctrl.props.showsecs) { %><%- 'step=1' %> <%}%>
-      <% } %>
-
-      <%- include(`../../attributes/common/control_attributes`, {ctrl : ctrl}) %>
-      <%- include('../../attributes/common/input_attributes', {ctrl : ctrl}) %>
-      <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
-      <% if (ctrl.props.auto_complete_mode) { %>
-      [matAutocomplete]="<%= ctrl.props.id %>"
-      <% } %>
-      <% if (ctrl.props.mgformat) { %><%- ctrl.props.mgformat %> <%}%>
-      <% if (ctrl.props.mask) { %>
-          [mask]="mg.getAlphaMask(<%- ctrl.props.enum_id %>)"
-          [showMaskTyped]='true'
-      <% } %>
-      <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %>
-      required
-      <% } %>
-      <% if (ctrl.props.directive) { %>
-      <%- ctrl.props.directive %>
-      <% } %>
-      <%- ' '%>
-      <% if (ctrl.props.validator === "rangevalidator") { %>
-      <%- ctrl.props.validator %>
-      <% } %>
-    >
-
-    <% } %>
-
-    <%- include(`../../attributes/common/input/validation`, {ctrl : ctrl}) %>
-
-    <% 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"
-        >
-            {{o.displayValue}}
-        </mat-option>
-    </mat-autocomplete>
-    <% } %>
-  </div>
-
-    </mat-form-field>
-
-     <% if(ctrl.props.is_table_child){ %>
-     <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<%}%>)
-          <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
-       <% } else { %>
-         {{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}) %>
-       </div>
-<% break;
-
-case StorageAttributeType.Date: %>
-       <div>
-     <mat-form-field
-     <% if (ctrl.props.show_zoom_button  ){ %>
-       style="width: 65%"
-       <% } %>
-       <%- 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){ %>
-         <div style="display: flex; flex-direction: row">
-       <%}%>
-      <input matInput [matDatepicker]="<%- ctrl.props.id %>"
-        <%- include('../../attributes/common/base/id', {ctrl : ctrl}) %>
-        <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
-        <%- include('base_attributes_date', {ctrl : ctrl}) %>
-        <%- include('../../attributes/common/input_attributes', {ctrl : ctrl}) %>
-        <%- ctrl.props.mgformat %>
-        <% if (ctrl.props.validator === "rangevalidator") { %>
-        <%- 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>
-      <mat-datepicker #<%- ctrl.props.id %>></mat-datepicker>
-
-      <% if(ctrl.props.is_table_child){ %>
-      </div>
-      <%}%>
-     </mat-form-field>
-         <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
-
-       </div>
-<% if(ctrl.props.is_table_child){ %>
-<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){ %>
-  <%- include(`../../attributes/common/input/validation`, {ctrl : ctrl}) %>
-<% } %>
-<% break;
-} %>
-<% } else { %>
-<label <%- 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}) %>
-<%}%>
-
-<% if(ctrl.props.is_table_child){ %>
-   </div>
-<%}%>
+<% if(ctrl.props.is_table_child){ %>
+   <div [formGroup]="mg.getFormGroupByRow(row.rowId)"
+        style="display: flex; flex-direction: row">
+<%}%>
+
+
+<% if ((typeof ctrl.props.dataexp === "undefined") && ((typeof ctrl.props.modifiable === "undefined" || ctrl.props.modifiable === true || ctrl.props.modifiable.has_exp)))
+{ %>
+<% switch (ctrl.props.attribute) {
+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})  %>
+    >
+  <div>
+
+    <% if (ctrl.style && ctrl.style.multiline_edit ){ %>
+    <textarea
+      matInput
+      <% if (ctrl.props.attribute == StorageAttributeType.Numeric) { %>
+      <% if (ctrl.props.currency) { %> currencyMask [options]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
+      <% } else { %>
+      type='number'
+      <% } %> <%} %>
+      <%- include(`../../attributes/common/control_attributes`, {ctrl : ctrl}) %>
+      <%- include('../../attributes/common/input_attributes', {ctrl : ctrl}) %>
+      <% if (ctrl.props.mgformat) { %><%- ctrl.props.mgformat %> <%}%>
+
+      <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %>
+      required
+      <% } %>
+      <% if (ctrl.props.directive) { %>
+      <%- ctrl.props.directive %>
+      <% } %>
+      <%- ' '%>
+      <% if (ctrl.props.validator) { %>
+      <%- ctrl.props.validator %>
+      <% } %>
+    >
+	            </textarea>
+    <% } else { %>
+
+      <input
+      matInput
+      <% if (ctrl.props.attribute == StorageAttributeType.Numeric) { %>
+        <% if (ctrl.props.currency) { %>
+          currencyMask [options]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
+        <% } else { %>
+          type='number'
+        <% } %> <% } %>
+      <% if (ctrl.props.attribute == StorageAttributeType.Time) { %>
+      type='time'
+        <% if (ctrl.props.showsecs) { %><%- 'step=1' %> <%}%>
+      <% } %>
+
+      <%- include(`../../attributes/common/control_attributes`, {ctrl : ctrl}) %>
+      <%- include('../../attributes/common/input_attributes', {ctrl : ctrl}) %>
+      <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
+      <% if (ctrl.props.auto_complete_mode) { %>
+      [matAutocomplete]="<%= ctrl.props.id %>"
+      <% } %>
+      <% if (ctrl.props.mgformat) { %><%- ctrl.props.mgformat %> <%}%>
+      <% if (ctrl.props.mask) { %>
+          [mask]="mg.getAlphaMask(<%- ctrl.props.enum_id %>)"
+          [showMaskTyped]='true'
+      <% } %>
+      <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %>
+      required
+      <% } %>
+      <% if (ctrl.props.directive) { %>
+      <%- ctrl.props.directive %>
+      <% } %>
+      <%- ' '%>
+      <% if (ctrl.props.validator === "rangevalidator") { %>
+      <%- ctrl.props.validator %>
+      <% } %>
+    >
+
+    <% } %>
+
+    <%- include(`../../attributes/common/input/validation`, {ctrl : ctrl}) %>
+
+    <% if (ctrl.props.auto_complete_mode) { %>
+    <mat-autocomplete #<%- ctrl.props.id %>="matAutocomplete"
+      <%- include('../../attributes/common/base/id', {ctrl : ctrl}) %>>
+        @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%"
+       <% } %>
+        <%- 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<%}%>)
+          <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
+       <% } else { %>
+         {{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}) %>
+       </div>
+<% break;
+
+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%"
+       <% } %>
+       <%- include(`../../attributes/common/container_attributes`, {ctrl : ctrl}) %>
+                     <%- include('../../attributes/common/base/id', {ctrl : ctrl})  %>
+                    [eventsOnly]=true
+     >
+
+       <% if(ctrl.props.is_table_child){ %>
+         <div style="display: flex; flex-direction: row">
+       <%}%>
+      <input matInput [matDatepicker]="<%- ctrl.props.id %>"
+        <%- include('../../attributes/common/base/id', {ctrl : ctrl}) %>
+        <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
+        <%- include('base_attributes_date', {ctrl : ctrl}) %>
+        <%- include('../../attributes/common/input_attributes', {ctrl : ctrl}) %>
+        <%- ctrl.props.mgformat %>
+        <% if (ctrl.props.validator === "rangevalidator") { %>
+        <%- ctrl.props.validator %>
+        <% } %>
+      >
+      <% 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%"
+  <% } %>
+  <%- 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){ %>
+  <%- include(`../../attributes/common/input/validation`, {ctrl : ctrl}) %>
+<% } %>
+<% break;
+} %>
+<% } else { %>
+<label <%- 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}) %>
+<%}%>
+
+<% if(ctrl.props.is_table_child){ %>
+   </div>
+<%}%>

package/templates/themes/material/group.ejs

@@ -1,4 +1,4 @@
-<mat-card <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
-        <%- include('../../attributes/common/base/enabled', {ctrl : ctrl}) %>>
-    <%- include(`../container`, {ctrl: ctrl}) %>
+<mat-card <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
+        <%- include('../../attributes/common/base/enabled', {ctrl : ctrl}) %>>
+    <%- include(`../container`, {ctrl: ctrl}) %>
 </mat-card>

package/templates/themes/material/listbox.ejs

@@ -1,22 +1,21 @@
-<div>
-<mat-selection-list
-        <%# attributes of the listbox itself %>
-        multiple
-        <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
-        <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
-        <%- include('../../attributes/common//input_attributes', {ctrl : ctrl}) %>
-        <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %> required <%}%>
-        <%- 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"
-    >
-        {{o.displayValue}}
-    </mat-list-option>
-</mat-selection-list>
-    <% if (ctrl.props.must_input  || ctrl.props.validator != null) {%>
-      <mgError [magic]=<%- ctrl.props.directive_id %>> </mgError>
-    <%}%>
-</div>
+<div>
+<mat-selection-list
+        <%# attributes of the listbox itself %>
+        multiple
+        <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
+        <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
+        <%- include('../../attributes/common//input_attributes', {ctrl : ctrl}) %>
+        <% if (ctrl.props.must_input && !ctrl.props.must_input.has_exp) { %> required <%}%>
+        <%- include('../../attributes/common/base/enabled', {ctrl : ctrl}) %>
+>
+    <%# build of items in listbox %>
+    @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>
+    <%}%>
+</div>