@magic-xpa/cli 4.800.0-dev480.14 → 4.800.0-dev480.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic-xpa/cli",
-  "version": "4.800.0-dev480.14",
+  "version": "4.800.0-dev480.140",
   "license": "SEE LICENSE IN EULA.pdf",
   "description": "Magic CLI for MagicWeb applications",
   "keywords": [

package/src/schematics/magic-utils/env.js

@@ -25,7 +25,8 @@ exports.dependencies = [
     { name: "hammerjs", version: '^2.0.8' },
     { name: "ngx-infinite-scroll", version: '^6.0.0' },
     { name: "ng-dynamic-component", version: '^7.0.1' },
-    { name: "rxjs-compat", version: "^6.6.0" }
+    { name: "rxjs-compat", version: "^6.6.0" },
+    { name: "ngx-currency", version: "^2.5.2" }
 ];
 exports.devDependencies = [
     { name: "@types/stacktrace-js", version: '^0.0.32' }

package/src/schematics/magic-utils/env.js.map

@@ -1 +1 @@
-{"version":3,"file":"env.js","sourceRoot":"","sources":["env.ts"],"names":[],"mappings":";;;AAKa,QAAA,YAAY,GAAW,gBAAgB,CAAC;AACxC,QAAA,oBAAoB,GAAG,oBAAoB,CAAC;AAC5C,QAAA,mBAAmB,GAAI,kBAAkB,CAAC;AAC1C,QAAA,UAAU,GAAa,OAAO,CAAC;AAC/B,QAAA,gBAAgB,GAAO,+BAA+B,CAAC;AACvD,QAAA,2BAA2B,GAAI,oBAAoB,CAAC;AACpD,QAAA,aAAa,GAAI,KAAK,oBAAY,gBAAgB,CAAC;AACnD,QAAA,WAAW,GAAM,KAAK,oBAAY,cAAc,CAAC;AAE9D,MAAa,aAAa;IACxB,YAAY,OAAc,EAAE,UAAiB;QAC3C,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;IAC5B,CAAC;CAGF;AAPD,sCAOC;AAEU,QAAA,YAAY,GAAG;IAExB,wBAAwB;IACxB,EAAC,IAAI,EAAE,mBAAmB,EAAI,OAAO,EAAE,SAAS,EAAC;IACjD,EAAC,IAAI,EAAE,cAAc,EAAS,OAAO,EAAE,SAAS,EAAC;IACjD,EAAC,IAAI,EAAE,qBAAqB,EAAE,OAAO,EAAE,SAAS,EAAC;IACjD,EAAC,IAAI,EAAE,cAAc,EAAS,OAAO,EAAE,QAAQ,EAAC;IAChD,EAAC,IAAI,EAAE,UAAU,EAAa,OAAO,EAAE,QAAQ,EAAC;IAEhD,EAAC,IAAI,EAAE,qBAAqB,EAAG,OAAO,EAAE,QAAQ,EAAC;IACjD,EAAC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,QAAQ,EAAC;IACjD,EAAC,IAAI,EAAE,aAAa,EAAW,OAAO,EAAE,QAAQ,EAAC;CAClD,CAAC;AAEW,QAAA,eAAe,GAAG;IAC7B,EAAC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,SAAS,EAAC;CACnD,CAAC;AACW,QAAA,GAAG,GAAU,EAAS,CAAC","sourcesContent":["// TODO(PK): hard-code for now, will query npm repo\n// to get this info in the future\nimport { MagicMetadata } from \"./metadata.class\";\nimport { IEnv } from \"../../types/interfaces/env.interface\";\n\nexport const METADATA_DIR         = `magic-metadata`;\nexport const GEN_COMPONENTS_ARRAY = 'magicGenComponents';\nexport const GEN_COMPONENTS_HASH  = 'magicGenCmpsHash';\nexport const GEN_FOLDER           = 'magic';\nexport const MAGIC_CLI_FOLDER     = './node_modules/@magic-xpa/cli';\nexport const GEN_LAZY_LOAD_MODULES_ARRAY  = 'LazyLoadModulesMap';\nexport const manifest_path  = `./${METADATA_DIR}/manifest.json`;\nexport const config_path    = `./${METADATA_DIR}/config.json`;\n\nexport class Idependencies {\n  constructor(setName:string, setVersion:string){\n    this.name = setName;\n    this.version = setVersion;\n  }\n  name:string;\n  version:string;\n}\n\nexport var dependencies = [\n\n  // material dependencies\n  {name: \"@angular/material\"  , version: '^10.0.0'},\n  {name: \"@angular/cdk\"       , version: '^10.0.0'},\n  {name: \"@angular/animations\", version: '^10.0.0'},\n  {name: \"font-awesome\"       , version: '^4.7.0'},\n  {name: \"hammerjs\"           , version: '^2.0.8'},\n\n  {name: \"ngx-infinite-scroll\" , version: '^6.0.0'},\n  {name: \"ng-dynamic-component\", version: '^7.0.1'},\n  {name: \"rxjs-compat\"         , version: \"^6.6.0\"}\n];\n\nexport const devDependencies = [\n  {name: \"@types/stacktrace-js\", version: '^0.0.32'}\n];\nexport const env : IEnv = {} as any;\n\n"]}
+{"version":3,"file":"env.js","sourceRoot":"","sources":["env.ts"],"names":[],"mappings":";;;AAKa,QAAA,YAAY,GAAW,gBAAgB,CAAC;AACxC,QAAA,oBAAoB,GAAG,oBAAoB,CAAC;AAC5C,QAAA,mBAAmB,GAAI,kBAAkB,CAAC;AAC1C,QAAA,UAAU,GAAa,OAAO,CAAC;AAC/B,QAAA,gBAAgB,GAAO,+BAA+B,CAAC;AACvD,QAAA,2BAA2B,GAAI,oBAAoB,CAAC;AACpD,QAAA,aAAa,GAAI,KAAK,oBAAY,gBAAgB,CAAC;AACnD,QAAA,WAAW,GAAM,KAAK,oBAAY,cAAc,CAAC;AAE9D,MAAa,aAAa;IACxB,YAAY,OAAc,EAAE,UAAiB;QAC3C,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;IAC5B,CAAC;CAGF;AAPD,sCAOC;AAEU,QAAA,YAAY,GAAG;IAExB,wBAAwB;IACxB,EAAC,IAAI,EAAE,mBAAmB,EAAI,OAAO,EAAE,SAAS,EAAC;IACjD,EAAC,IAAI,EAAE,cAAc,EAAS,OAAO,EAAE,SAAS,EAAC;IACjD,EAAC,IAAI,EAAE,qBAAqB,EAAE,OAAO,EAAE,SAAS,EAAC;IACjD,EAAC,IAAI,EAAE,cAAc,EAAS,OAAO,EAAE,QAAQ,EAAC;IAChD,EAAC,IAAI,EAAE,UAAU,EAAa,OAAO,EAAE,QAAQ,EAAC;IAEhD,EAAC,IAAI,EAAE,qBAAqB,EAAG,OAAO,EAAE,QAAQ,EAAC;IACjD,EAAC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,QAAQ,EAAC;IACjD,EAAC,IAAI,EAAE,aAAa,EAAW,OAAO,EAAE,QAAQ,EAAC;IACjD,EAAC,IAAI,EAAE,cAAc,EAAU,OAAO,EAAE,QAAQ,EAAC;CAClD,CAAC;AAEW,QAAA,eAAe,GAAG;IAC7B,EAAC,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,SAAS,EAAC;CACnD,CAAC;AACW,QAAA,GAAG,GAAU,EAAS,CAAC","sourcesContent":["// TODO(PK): hard-code for now, will query npm repo\n// to get this info in the future\nimport { MagicMetadata } from \"./metadata.class\";\nimport { IEnv } from \"../../types/interfaces/env.interface\";\n\nexport const METADATA_DIR         = `magic-metadata`;\nexport const GEN_COMPONENTS_ARRAY = 'magicGenComponents';\nexport const GEN_COMPONENTS_HASH  = 'magicGenCmpsHash';\nexport const GEN_FOLDER           = 'magic';\nexport const MAGIC_CLI_FOLDER     = './node_modules/@magic-xpa/cli';\nexport const GEN_LAZY_LOAD_MODULES_ARRAY  = 'LazyLoadModulesMap';\nexport const manifest_path  = `./${METADATA_DIR}/manifest.json`;\nexport const config_path    = `./${METADATA_DIR}/config.json`;\n\nexport class Idependencies {\n  constructor(setName:string, setVersion:string){\n    this.name = setName;\n    this.version = setVersion;\n  }\n  name:string;\n  version:string;\n}\n\nexport var dependencies = [\n\n  // material dependencies\n  {name: \"@angular/material\"  , version: '^10.0.0'},\n  {name: \"@angular/cdk\"       , version: '^10.0.0'},\n  {name: \"@angular/animations\", version: '^10.0.0'},\n  {name: \"font-awesome\"       , version: '^4.7.0'},\n  {name: \"hammerjs\"           , version: '^2.0.8'},\n\n  {name: \"ngx-infinite-scroll\" , version: '^6.0.0'},\n  {name: \"ng-dynamic-component\", version: '^7.0.1'},\n  {name: \"rxjs-compat\"         , version: \"^6.6.0\"},\n  {name: \"ngx-currency\"        , version: \"^2.5.2\"}\n];\n\nexport const devDependencies = [\n  {name: \"@types/stacktrace-js\", version: '^0.0.32'}\n];\nexport const env : IEnv = {} as any;\n\n"]}

package/src/schematics/magic-utils/env.ts

@@ -32,7 +32,8 @@ export var dependencies = [
 
   {name: "ngx-infinite-scroll" , version: '^6.0.0'},
   {name: "ng-dynamic-component", version: '^7.0.1'},
-  {name: "rxjs-compat"         , version: "^6.6.0"}
+  {name: "rxjs-compat"         , version: "^6.6.0"},
+  {name: "ngx-currency"        , version: "^2.5.2"}
 ];
 
 export const devDependencies = [

package/src/schematics/mg-add/files/src/app/magic/magic.gen.lib.module.ts

@@ -26,6 +26,22 @@ import {MatNativeDateModule} from "@angular/material/core";
 import {MatTabsModule} from "@angular/material/tabs";
 import {MatTooltipModule} from "@angular/material/tooltip";
 import {MatButtonModule} from "@angular/material/button";
+import {CurrencyMaskInputMode, NgxCurrencyModule } from "ngx-currency";
+
+export const customCurrencyMaskConfig = {
+  align: "right",
+  allowNegative: true,
+  allowZero: true,
+  decimal: ".",
+  precision: 2,
+  prefix: "",
+  suffix: "",
+  thousands: ",",
+  nullable: true,
+  min: null,
+  max: null,
+  inputMode: CurrencyMaskInputMode.FINANCIAL
+};
 
 @NgModule({
   declarations: [
@@ -45,6 +61,7 @@ import {MatButtonModule} from "@angular/material/button";
     MagicModule,
     DynamicModule,
     InfiniteScrollModule,
+    NgxCurrencyModule.forRoot(customCurrencyMaskConfig),
 
     // Material Modules
     MatTableModule,

package/src/types/interfaces/control.d.ts

@@ -52,6 +52,7 @@ export interface Control {
         web_style?: TableWebStyle;
         row_editing_type?: RowEditingTypes;
         mgformat?: string;
+        currency?: string;
         directive?: string;
         validator?: string;
         formatter?: string;

package/src/types/interfaces/control.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.js","sourceRoot":"","sources":["control.ts"],"names":[],"mappings":"","sourcesContent":["import {HorizontalAlignments} from '../enums/horizontal-alignments.enum';\nimport {\n  CtrlImageStyle,\n  MgControlType,\n  SideType,\n  StorageAttributeType,\n  TableWebStyle,\n  RowEditingTypes,\n  WindowPosition,\n  WindowType\n} from \"../enums/Enums\";\nimport {CtrlButtonTypeGui} from '../enums/Enums';\n\nexport interface Exp\n{\n\thas_exp?: boolean\n}\n\nexport interface Boolean_Exp extends Exp\n{\n\tvalue?: boolean,\n}\n\nexport interface Number_Exp extends Exp\n{\n\tvalue?: number,\n}\n\nexport interface String_Exp extends Exp\n{\n\tvalue?: string,\n}\n\nexport interface Control {\n\tcontrolType: MgControlType\n\tclasses?: string\n\thasClassExpression?: boolean\n\tstyle: {\n\t\tfont?: Number_Exp,\n\t\tcolor?: Number_Exp,\n\t\tborder?: Boolean_Exp,\n\t\tborder_style?: Number_Exp,\n\t\tfocus_color?: Number_Exp,\n\t\talignment: {\n\t\t\thorizontal?: HorizontalAlignments,\n\t\t\tvertical?: number,\n\t\t},\n        line_divider?:Boolean_Exp;\n        multiline_edit?: boolean,\n\t},\n\tprops: {\n\t\tid: string,\n\t\tname?: string,\n    component_uniquename?: string;\n    component_path?:string;\n    visible?: Exp,\n\t\tenabled?: Exp,\n\t\ttab_order?: Number_Exp,\n\t\tpassword_edit?: Boolean_Exp,\n\t\tbutton_style?:CtrlButtonTypeGui,\n    is_table_child?: boolean,\n    table_row_height?: number,\n    table_title_height?: number,\n    scroll_bar?: boolean;\n    no_modifiable_descendants?: boolean;\n    modifiable?: Boolean_Exp,\n\t\tlayer?: number,\n    tab_control_side?: SideType;\n    attribute?: StorageAttributeType;\n    web_style?: TableWebStyle;\n    row_editing_type?: RowEditingTypes;\n    mgformat?: string;\n    directive?: string;\n    validator?: string;\n    formatter?: string;\n    window_type?: WindowType;\n    is_router_outlet?: boolean;\n    default_outlet?: boolean;\n    wallpaper?: string;\n    wallpaper_style?: CtrlImageStyle;\n    sortable?: boolean;\n    common_line_id?: number;\n    dataexp?:boolean;\n    showsecs?:boolean;\n    enum_id:string; // simple enum name, for method calls\n    directive_id:string; // enum name as {{id}} for things such as directive name or formcontrol name\n\t}\n\n\thint: {\n\t\ttext?: String_Exp,\n\t}\n\tcoordinates:{\n        x?:\tnumber,\n        y?:\tnumber,\n        width:\tnumber,\n        height?:\tnumber\n\t}\n\tchildren: null | Control[],\n\n\n\t/// incode members:\n\t// class_name_in_css: string;\n\n}\n"]}
+{"version":3,"file":"control.js","sourceRoot":"","sources":["control.ts"],"names":[],"mappings":"","sourcesContent":["import {HorizontalAlignments} from '../enums/horizontal-alignments.enum';\nimport {\n  CtrlImageStyle,\n  MgControlType,\n  SideType,\n  StorageAttributeType,\n  TableWebStyle,\n  RowEditingTypes,\n  WindowPosition,\n  WindowType\n} from \"../enums/Enums\";\nimport {CtrlButtonTypeGui} from '../enums/Enums';\n\nexport interface Exp\n{\n\thas_exp?: boolean\n}\n\nexport interface Boolean_Exp extends Exp\n{\n\tvalue?: boolean,\n}\n\nexport interface Number_Exp extends Exp\n{\n\tvalue?: number,\n}\n\nexport interface String_Exp extends Exp\n{\n\tvalue?: string,\n}\n\nexport interface Control {\n\tcontrolType: MgControlType\n\tclasses?: string\n\thasClassExpression?: boolean\n\tstyle: {\n\t\tfont?: Number_Exp,\n\t\tcolor?: Number_Exp,\n\t\tborder?: Boolean_Exp,\n\t\tborder_style?: Number_Exp,\n\t\tfocus_color?: Number_Exp,\n\t\talignment: {\n\t\t\thorizontal?: HorizontalAlignments,\n\t\t\tvertical?: number,\n\t\t},\n        line_divider?:Boolean_Exp;\n        multiline_edit?: boolean,\n\t},\n\tprops: {\n\t\tid: string,\n\t\tname?: string,\n    component_uniquename?: string;\n    component_path?:string;\n    visible?: Exp,\n\t\tenabled?: Exp,\n\t\ttab_order?: Number_Exp,\n\t\tpassword_edit?: Boolean_Exp,\n\t\tbutton_style?:CtrlButtonTypeGui,\n    is_table_child?: boolean,\n    table_row_height?: number,\n    table_title_height?: number,\n    scroll_bar?: boolean;\n    no_modifiable_descendants?: boolean;\n    modifiable?: Boolean_Exp,\n\t\tlayer?: number,\n    tab_control_side?: SideType;\n    attribute?: StorageAttributeType;\n    web_style?: TableWebStyle;\n    row_editing_type?: RowEditingTypes;\n    mgformat?: string;\n    currency?:string;\n    directive?: string;\n    validator?: string;\n    formatter?: string;\n    window_type?: WindowType;\n    is_router_outlet?: boolean;\n    default_outlet?: boolean;\n    wallpaper?: string;\n    wallpaper_style?: CtrlImageStyle;\n    sortable?: boolean;\n    common_line_id?: number;\n    dataexp?:boolean;\n    showsecs?:boolean;\n    enum_id:string; // simple enum name, for method calls\n    directive_id:string; // enum name as {{id}} for things such as directive name or formcontrol name\n\t}\n\n\thint: {\n\t\ttext?: String_Exp,\n\t}\n\tcoordinates:{\n        x?:\tnumber,\n        y?:\tnumber,\n        width:\tnumber,\n        height?:\tnumber\n\t}\n\tchildren: null | Control[],\n\n\n\t/// incode members:\n\t// class_name_in_css: string;\n\n}\n"]}

package/src/types/interfaces/control.ts

@@ -70,6 +70,7 @@ export interface Control {
     web_style?: TableWebStyle;
     row_editing_type?: RowEditingTypes;
     mgformat?: string;
+    currency?:string;
     directive?: string;
     validator?: string;
     formatter?: string;

package/templates/themes/basicHTML/edit.ejs

@@ -23,13 +23,21 @@
 
                 <% } else { %>
                 <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) { %> type='number'
-                        <% }else { %>
+                  <% if (ctrl.props.attribute == StorageAttributeType.Numeric) { %>
+                    <% if (ctrl.props.currency) { %>
+                      currencyMask [options]="mg.getNumericPicture(mg.getPicture(<%- ctrl.props.enum_id %>))"
+                    <% } else { %>
+                      type='number'
+                    <% } %>
+                  <% }else { %>
                         <% } %>
 
                         <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
@@ -48,11 +56,19 @@
                   <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 %><%}%>}}
+                     <% 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: %>
@@ -64,6 +80,9 @@
        <%}%>
 
        <input
+       <% if (ctrl.props.show_zoom_button  ){ %>
+         style="width: 70%"
+         <% } %>
           type="date"
           <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
           <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
@@ -90,7 +109,7 @@
        <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
      </label>
      <%}%>
-
+       <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
         <% break;
 
         case StorageAttributeType.Time: %>
@@ -101,6 +120,9 @@
        <%}%>
 
         <input
+        <% if (ctrl.props.show_zoom_button  ){ %>
+          style="width: 70%"
+          <% } %>
                 type="time"
                 <%- include('../../attributes/common/base/formControlName', {ctrl : ctrl}) %>
                 <%- include('../../attributes/common/base_attributes', {ctrl : ctrl}) %>
@@ -125,7 +147,7 @@
        <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
      </label>
      <%}%>
-
+       <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
         <% break;
     } %>
     <% } else { %>
@@ -134,6 +156,8 @@
         <% if (ctrl.props.formatter) { %>| <%- ctrl.props.formatter %> : <%- ctrl.props.enum_id %><%}%>}}
 
     </label>
+
+       <%- include('./zoom-button.ejs', {ctrl : ctrl}) %>
     <%}%>
 
 <% if(ctrl.props.is_table_child){ %>

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

@@ -0,0 +1,28 @@
+<% if(ctrl.props.show_zoom_button){ %>
+
+  <button   style="min-width: auto; margin: auto"
+
+
+  <%- include('../../attributes/common/base/id',            {ctrl : ctrl})%>
+
+  <%- include('../../attributes/common/base/visible',       {ctrl : ctrl})%>
+  <%- include('../../attributes/common/base/tooltip',       {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/imageFileName', {ctrl : ctrl})%>
+
+  <% if (ctrl.props.enabled){ %>
+      [disabled]="mg.isDisabled(<%= ctrl.props.enum_id %>)"
+    <% } %>
+
+  <% if(ctrl.props.zoom_button_tooltip && ctrl.props.zoom_button_tooltip.has_exp){ %>
+    <% if(ctrl.controlType === MgControlType.CTRL_TYPE_TABLE && !(ctrl.web_style && ctrl.web_style === TableWebStyle.RepeatableItems) || (ctrl.controlType !== MgControlType.CTRL_TYPE_TABLE && theme === "material")){ %>
+      [matTooltip]="mg.getZoomButtonTitle(<%= ctrl.props.enum_id %><% if(ctrl.props.is_table_child && (ctrl.controlType !== MgControlType.CTRL_TYPE_COLUMN)){ %>, row.rowId<% } %>)"
+    <% } else { %>
+      [title]="mg.getZoomButtonTitle(<%= ctrl.props.enum_id %><% if(ctrl.props.is_table_child && (ctrl.controlType !== MgControlType.CTRL_TYPE_COLUMN)){ %>, row.rowId<% } %>)"
+      <% } %>
+    <% } %>
+  >...</button>
+<% } %>

package/templates/themes/material/edit.ejs

@@ -9,8 +9,14 @@
 <% switch (ctrl.props.attribute) {
 default: %>
 
-    <mat-form-field <%- include(`../../attributes/common/container_attributes`, {ctrl : ctrl}) %>
-      <% if(ctrl.props.is_table_child){ %> *ngIf="mg.isRowInRowEditing(row)" <%}%>
+    <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>
 
@@ -18,11 +24,14 @@ default: %>
     <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
       <% } %>
@@ -34,7 +43,7 @@ default: %>
       <%- ctrl.props.validator %>
       <% } %>
     >
-                  </textarea>
+	            </textarea>
     <% } else { %>
 
       <input
@@ -44,8 +53,11 @@ default: %>
 
       matInput
       <% if (ctrl.props.attribute == StorageAttributeType.Numeric) { %>
-      type='number'
-      <% } %>
+        <% 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' %> <%}%>
@@ -76,18 +88,33 @@ default: %>
 
      <% 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 %><%}%>}}
+       <% 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: %>
-     <mat-form-field <%- include(`../../attributes/common/container_attributes`, {ctrl : ctrl}) %>
-                     <%- include('../../attributes/common/base/id', {ctrl : ctrl}) %>
+       <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)"
@@ -123,9 +150,14 @@ case StorageAttributeType.Date: %>
       </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<%}%>)
@@ -143,6 +175,8 @@ case StorageAttributeType.Date: %>
   {{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){ %>

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

@@ -0,0 +1,27 @@
+<% if(ctrl.props.show_zoom_button){ %>
+
+  <button  mat-raised-button color="primary" style="min-width: auto;"
+
+
+  <%- include('../../attributes/common/base/id',            {ctrl : ctrl})%>
+
+  <%- include('../../attributes/common/base/visible',       {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/imageFileName', {ctrl : ctrl})%>
+
+  <% if (ctrl.props.enabled){ %>
+      [disabled]="mg.isDisabled(<%= ctrl.props.enum_id %>)"
+    <% } %>
+
+  <% if(ctrl.props.zoom_button_tooltip && ctrl.props.zoom_button_tooltip.has_exp){ %>
+    <% if(ctrl.controlType === MgControlType.CTRL_TYPE_TABLE && !(ctrl.web_style && ctrl.web_style === TableWebStyle.RepeatableItems) || (ctrl.controlType !== MgControlType.CTRL_TYPE_TABLE && theme === "material")){ %>
+      [matTooltip]="mg.getZoomButtonTitle(<%= ctrl.props.enum_id %><% if(ctrl.props.is_table_child && (ctrl.controlType !== MgControlType.CTRL_TYPE_COLUMN)){ %>, row.rowId<% } %>)"
+    <% } else { %>
+      [title]="mg.getZoomButtonTitle(<%= ctrl.props.enum_id %><% if(ctrl.props.is_table_child && (ctrl.controlType !== MgControlType.CTRL_TYPE_COLUMN)){ %>, row.rowId<% } %>)"
+      <% } %>
+    <% } %>
+  >...</button>
+<% } %>