mmhglobal-dynamicform 2.23.2 → 2.23.4

package/esm2020/lib/zgrid/zgrid.popup.anchor-target.directive.mjs

@@ -5,9 +5,9 @@ export class ZGridPopupAnchorDirective {
         this.element = element;
     }
 }
-ZGridPopupAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZGridPopupAnchorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ZGridPopupAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: ZGridPopupAnchorDirective, selector: "[popupAnchor]", exportAs: ["popupAnchor"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZGridPopupAnchorDirective, decorators: [{
+ZGridPopupAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridPopupAnchorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ZGridPopupAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.3", type: ZGridPopupAnchorDirective, selector: "[popupAnchor]", exportAs: ["popupAnchor"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridPopupAnchorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[popupAnchor]',

package/esm2020/lib/zgrid/zgrid.service.mjs

@@ -98,9 +98,9 @@ export class ZGridService {
         return null;
     }
 }
-ZGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZGridService, deps: [{ token: i1.OfflineDatabaseService }], target: i0.ɵɵFactoryTarget.Injectable });
-ZGridService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZGridService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZGridService, decorators: [{
+ZGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridService, deps: [{ token: i1.OfflineDatabaseService }], target: i0.ɵɵFactoryTarget.Injectable });
+ZGridService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2020/lib/zimg/zimg.component.mjs

@@ -52,9 +52,9 @@ export class ZimgComponent extends InputFieldBase {
         }
     }
 }
-ZimgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZimgComponent, deps: [{ token: i1.ZComponentService }, { token: i2.AttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-ZimgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZimgComponent, selector: "app-zimg", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zimg-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <img *ngIf=\"imgSource\" class=\"e1tag-style1\" [src]=\"imgSource\" [style]=\"componentProperties.style.style1\"\r\n       (click)=\"onItemClick($event)\" />\r\n</div>\r\n", styles: [""], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZimgComponent, decorators: [{
+ZimgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZimgComponent, deps: [{ token: i1.ZComponentService }, { token: i2.AttachmentService }], target: i0.ɵɵFactoryTarget.Component });
+ZimgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZimgComponent, selector: "app-zimg", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zimg-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <img *ngIf=\"imgSource\" class=\"e1tag-style1\" [src]=\"imgSource\" [style]=\"componentProperties.style.style1\"\r\n       (click)=\"onItemClick($event)\" />\r\n</div>\r\n", styles: [""], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZimgComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zimg", template: "<div [formGroup]=\"form\" class=\"zimg-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <img *ngIf=\"imgSource\" class=\"e1tag-style1\" [src]=\"imgSource\" [style]=\"componentProperties.style.style1\"\r\n       (click)=\"onItemClick($event)\" />\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.AttachmentService }]; } });

package/esm2020/lib/zinput-container/zinput-container.component.mjs

@@ -78,9 +78,9 @@ export class ZInputContainerComponent extends FieldBase {
         }
     }
 }
-ZInputContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZInputContainerComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZInputContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZInputContainerComponent, selector: "app-zinput-container", usesInheritance: true, ngImport: i0, template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n            *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n    <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n               [style]=\"componentProperties.containerStyle.style2\">\r\n      {{componentProperties.label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\" class=\"required-icon\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"input-value-field\">\r\n      <div class=\"input-fields-options\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n      </div>\r\n      <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n      <!-- <app-field-suffix-element [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\"></app-field-suffix-element> -->\r\n    </div>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"desktop-input-container e1tag-container-style\" [formGroup]=\"form\"\r\n     [style]=\"componentProperties.containerStyle.style\"\r\n     *ngIf=\"!isMobileScreen() && !isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [fxLayout]=\"data.FieldLayoutType !== 1 ? 'column' : 'row'\"\r\n     fxLayoutAlign=\"space-between stretch\" [class.editMode]=\"(data['_EditMode'].value)\"\r\n     #zinputcontainer>\r\n  <kendo-label class=\"input-label e1tag-container-style1\" [for]=\"data.Name\" [text]=\"componentProperties.label\"\r\n               *ngIf=\"data.ShowLabel\" [style]=\"componentProperties.containerStyle.style1\"\r\n               [fxFlex]=\"componentProperties.labelFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.labelFlexLayoutSize.xs\"\r\n               [fxFlex.sm]=\"componentProperties.labelFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.labelFlexLayoutSize.md\"\r\n               [fxFlex.lg]=\"componentProperties.labelFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.labelFlexLayoutSize.xl\">\r\n    <kendo-label *ngIf=\"data['_EditMode'].value && (!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                 text=\"*\" class=\"required-icon\">\r\n    </kendo-label>\r\n    <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n                            [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n  </kendo-label>\r\n  <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n       [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n       [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n       [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n    <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n         [style]=\"componentProperties.containerStyle.style3\">\r\n      <!-- TODO: Add 1 more layer for this switch case-->\r\n      <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n                              [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n      <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n                              [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n                            [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n    <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n    <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n                 [style]=\"componentProperties.containerStyle.style6\"\r\n                 [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zinputcontainer\"></app-context-menu>\r\n</div>\r\n", styles: [".required-icon{color:var(--ion-color-danger);padding-left:3px}.desktop-input-container{padding:8px 0;min-height:calc(var(--input-field-height) + 5px)!important;margin:1px 0;display:inline-flex}.desktop-input-container .input-label{font-size:var(--content-font-size);display:flex;padding-left:20px}.desktop-input-container>.input-value-container{margin:auto}.desktop-input-container>.input-value-container .input-value-field{display:flex}.desktop-input-container>.input-value-container .input-value-field .input-fields-options{flex-grow:10}.desktop-input-container>.input-value-container .input-value-field app-field-suffix-icon{margin:auto}.desktop-input-container>.input-value-container .input-value{font-size:calc(var(--content-font-size) + 2px);font-weight:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.mobile-input-container .input-value-field{width:100%}.tooltipsinfo-icon{padding-left:10px;color:var(--ion-color-primary-tint)}\n"], components: [{ type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.ZtextComponent, selector: "app-ztext" }, { type: i4.ZselectmultipleComponent, selector: "app-zselectmultiple" }, { type: i5.ZdatetimeComponent, selector: "app-zdatetime" }, { type: i6.ZpostselectinputComponent, selector: "app-zpostselectinput" }, { type: i7.ZcheckboxComponent, selector: "app-zcheckbox" }, { type: i8.ZnumericComponent, selector: "app-znumeric" }, { type: i9.ZtextareaComponent, selector: "app-ztextarea" }, { type: i10.ZuploadComponent, selector: "app-zupload" }, { type: i11.ZimgComponent, selector: "app-zimg" }, { type: i12.ZtexteditorComponent, selector: "app-ztexteditor" }, { type: i13.ZcolorpickerComponent, selector: "app-zcolorpicker" }, { type: i14.InputErrorMessageComponent, selector: "app-error" }, { type: i15.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i16.InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: ["position", "addOn"] }, { type: i17.ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i18.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i20.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i21.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i21.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i21.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i18.AsyncPipe, "inputText": i22.ZInputParser } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZInputContainerComponent, decorators: [{
+ZInputContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZInputContainerComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ZInputContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZInputContainerComponent, selector: "app-zinput-container", usesInheritance: true, ngImport: i0, template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n            *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n    <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n               [style]=\"componentProperties.containerStyle.style2\">\r\n      {{componentProperties.label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\" class=\"required-icon\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"input-value-field\">\r\n      <div class=\"input-fields-options\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n      </div>\r\n      <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n      <!-- <app-field-suffix-element [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\"></app-field-suffix-element> -->\r\n    </div>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"desktop-input-container e1tag-container-style\" [formGroup]=\"form\"\r\n     [style]=\"componentProperties.containerStyle.style\"\r\n     *ngIf=\"!isMobileScreen() && !isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [fxLayout]=\"data.FieldLayoutType !== 1 ? 'column' : 'row'\"\r\n     fxLayoutAlign=\"space-between stretch\" [class.editMode]=\"(data['_EditMode'].value)\"\r\n     #zinputcontainer>\r\n  <kendo-label class=\"input-label e1tag-container-style1\" [for]=\"data.Name\" [text]=\"componentProperties.label\"\r\n               *ngIf=\"data.ShowLabel\" [style]=\"componentProperties.containerStyle.style1\"\r\n               [fxFlex]=\"componentProperties.labelFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.labelFlexLayoutSize.xs\"\r\n               [fxFlex.sm]=\"componentProperties.labelFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.labelFlexLayoutSize.md\"\r\n               [fxFlex.lg]=\"componentProperties.labelFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.labelFlexLayoutSize.xl\">\r\n    <kendo-label *ngIf=\"data['_EditMode'].value && (!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                 text=\"*\" class=\"required-icon\">\r\n    </kendo-label>\r\n    <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n                            [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n  </kendo-label>\r\n  <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n       [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n       [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n       [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n    <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n         [style]=\"componentProperties.containerStyle.style3\">\r\n      <!-- TODO: Add 1 more layer for this switch case-->\r\n      <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n                              [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n      <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n                              [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n                            [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n    <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n    <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n                 [style]=\"componentProperties.containerStyle.style6\"\r\n                 [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zinputcontainer\"></app-context-menu>\r\n</div>\r\n", styles: [".required-icon{color:var(--ion-color-danger);padding-left:3px}.desktop-input-container{padding:8px 0;min-height:calc(var(--input-field-height) + 5px)!important;margin:1px 0;display:inline-flex}.desktop-input-container .input-label{font-size:var(--content-font-size);display:flex;padding-left:20px}.desktop-input-container>.input-value-container{margin:auto}.desktop-input-container>.input-value-container .input-value-field{display:flex}.desktop-input-container>.input-value-container .input-value-field .input-fields-options{flex-grow:10}.desktop-input-container>.input-value-container .input-value-field app-field-suffix-icon{margin:auto}.desktop-input-container>.input-value-container .input-value{font-size:calc(var(--content-font-size) + 2px);font-weight:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.mobile-input-container .input-value-field{width:100%}.tooltipsinfo-icon{padding-left:10px;color:var(--ion-color-primary-tint)}\n"], components: [{ type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.ZtextComponent, selector: "app-ztext" }, { type: i4.ZselectmultipleComponent, selector: "app-zselectmultiple" }, { type: i5.ZdatetimeComponent, selector: "app-zdatetime" }, { type: i6.ZpostselectinputComponent, selector: "app-zpostselectinput" }, { type: i7.ZcheckboxComponent, selector: "app-zcheckbox" }, { type: i8.ZnumericComponent, selector: "app-znumeric" }, { type: i9.ZtextareaComponent, selector: "app-ztextarea" }, { type: i10.ZuploadComponent, selector: "app-zupload" }, { type: i11.ZimgComponent, selector: "app-zimg" }, { type: i12.ZtexteditorComponent, selector: "app-ztexteditor" }, { type: i13.ZcolorpickerComponent, selector: "app-zcolorpicker" }, { type: i14.InputErrorMessageComponent, selector: "app-error" }, { type: i15.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i16.InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: ["position", "addOn"] }, { type: i17.ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i18.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i19.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i18.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i20.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i21.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i21.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i21.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i18.AsyncPipe, "inputText": i22.ZInputParser } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZInputContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zinput-container", template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n            *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n    <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n               [style]=\"componentProperties.containerStyle.style2\">\r\n      {{componentProperties.label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\" class=\"required-icon\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"input-value-field\">\r\n      <div class=\"input-fields-options\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n      </div>\r\n      <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n      <!-- <app-field-suffix-element [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\"></app-field-suffix-element> -->\r\n    </div>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"desktop-input-container e1tag-container-style\" [formGroup]=\"form\"\r\n     [style]=\"componentProperties.containerStyle.style\"\r\n     *ngIf=\"!isMobileScreen() && !isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [fxLayout]=\"data.FieldLayoutType !== 1 ? 'column' : 'row'\"\r\n     fxLayoutAlign=\"space-between stretch\" [class.editMode]=\"(data['_EditMode'].value)\"\r\n     #zinputcontainer>\r\n  <kendo-label class=\"input-label e1tag-container-style1\" [for]=\"data.Name\" [text]=\"componentProperties.label\"\r\n               *ngIf=\"data.ShowLabel\" [style]=\"componentProperties.containerStyle.style1\"\r\n               [fxFlex]=\"componentProperties.labelFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.labelFlexLayoutSize.xs\"\r\n               [fxFlex.sm]=\"componentProperties.labelFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.labelFlexLayoutSize.md\"\r\n               [fxFlex.lg]=\"componentProperties.labelFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.labelFlexLayoutSize.xl\">\r\n    <kendo-label *ngIf=\"data['_EditMode'].value && (!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                 text=\"*\" class=\"required-icon\">\r\n    </kendo-label>\r\n    <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n                            [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n  </kendo-label>\r\n  <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n       [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n       [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n       [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n    <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n         [style]=\"componentProperties.containerStyle.style3\">\r\n      <!-- TODO: Add 1 more layer for this switch case-->\r\n      <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n                              [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n      <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n                              [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n                            [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n    <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n    <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n                 [style]=\"componentProperties.containerStyle.style6\"\r\n                 [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zinputcontainer\"></app-context-menu>\r\n</div>\r\n", styles: [".required-icon{color:var(--ion-color-danger);padding-left:3px}.desktop-input-container{padding:8px 0;min-height:calc(var(--input-field-height) + 5px)!important;margin:1px 0;display:inline-flex}.desktop-input-container .input-label{font-size:var(--content-font-size);display:flex;padding-left:20px}.desktop-input-container>.input-value-container{margin:auto}.desktop-input-container>.input-value-container .input-value-field{display:flex}.desktop-input-container>.input-value-container .input-value-field .input-fields-options{flex-grow:10}.desktop-input-container>.input-value-container .input-value-field app-field-suffix-icon{margin:auto}.desktop-input-container>.input-value-container .input-value{font-size:calc(var(--content-font-size) + 2px);font-weight:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.mobile-input-container .input-value-field{width:100%}.tooltipsinfo-icon{padding-left:10px;color:var(--ion-color-primary-tint)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }]; } });

package/esm2020/lib/zinput-container/zinput-container.pipe.mjs

@@ -119,9 +119,9 @@ export class ZInputParser {
         }
     }
 }
-ZInputParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZInputParser, deps: [{ token: i1.ResourceApiService }, { token: i1.CacheService }, { token: i1.WebApiService }, { token: i2.ZComponentService }], target: i0.ɵɵFactoryTarget.Pipe });
-ZInputParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZInputParser, name: "inputText" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZInputParser, decorators: [{
+ZInputParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZInputParser, deps: [{ token: i1.ResourceApiService }, { token: i1.CacheService }, { token: i1.WebApiService }, { token: i2.ZComponentService }], target: i0.ɵɵFactoryTarget.Pipe });
+ZInputParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZInputParser, name: "inputText" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZInputParser, decorators: [{
             type: Pipe,
             args: [{
                     name: "inputText",

package/esm2020/lib/zlabel/zlabel.component.mjs

@@ -28,9 +28,9 @@ export class ZlabelComponent extends InputFieldBase {
         this.componentService.decrementComponentCounterForField(this.data);
     }
 }
-ZlabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZlabelComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-ZlabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZlabelComponent, selector: "app-zlabel", usesInheritance: true, ngImport: i0, template: "<ion-item [formGroup]=\"form\"\r\n          *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getClass(form, data)\" [style.--min-height]=\"data.Height\"\r\n          [style.cursor]=\"data.OnItemClick ? 'pointer' : 'auto'\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n          (click)=\"onItemClick($event, data)\">\r\n  <div class=\"content-container e1tag-style1\" [style]=\"componentProperties.style.style1\" #zlabelDiv>\r\n    <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\" *ngIf=\"componentProperties.icon\"\r\n             [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n               [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n      {{componentProperties.label}}\r\n    </ion-label>\r\n    <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n         class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zlabelDiv\"></app-context-menu>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}.medium-list{--min-height: 20px;padding:5px 0}ion-item{font-size:var(--content-font-size)}.content-container{width:100%}\n"], components: [{ type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i5.ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "htmlSanitize": i9.HtmlSanitizePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZlabelComponent, decorators: [{
+ZlabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZlabelComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
+ZlabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZlabelComponent, selector: "app-zlabel", usesInheritance: true, ngImport: i0, template: "<ion-item [formGroup]=\"form\"\r\n          *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getClass(form, data)\" [style.--min-height]=\"data.Height\"\r\n          [style.cursor]=\"data.OnItemClick ? 'pointer' : 'auto'\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n          (click)=\"onItemClick($event, data)\">\r\n  <div class=\"content-container e1tag-style1\" [style]=\"componentProperties.style.style1\" #zlabelDiv>\r\n    <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\" *ngIf=\"componentProperties.icon\"\r\n             [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n               [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n      {{componentProperties.label}}\r\n    </ion-label>\r\n    <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n         class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zlabelDiv\"></app-context-menu>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}.medium-list{--min-height: 20px;padding:5px 0}ion-item{font-size:var(--content-font-size)}.content-container{width:100%}\n"], components: [{ type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i5.ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "htmlSanitize": i9.HtmlSanitizePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZlabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zlabel', template: "<ion-item [formGroup]=\"form\"\r\n          *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getClass(form, data)\" [style.--min-height]=\"data.Height\"\r\n          [style.cursor]=\"data.OnItemClick ? 'pointer' : 'auto'\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n          (click)=\"onItemClick($event, data)\">\r\n  <div class=\"content-container e1tag-style1\" [style]=\"componentProperties.style.style1\" #zlabelDiv>\r\n    <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\" *ngIf=\"componentProperties.icon\"\r\n             [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n               [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n      {{componentProperties.label}}\r\n    </ion-label>\r\n    <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n         class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zlabelDiv\"></app-context-menu>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}.medium-list{--min-height: 20px;padding:5px 0}ion-item{font-size:var(--content-font-size)}.content-container{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FontAweSomeService }]; } });

package/esm2020/lib/zloop/zloop.component.mjs

@@ -114,9 +114,9 @@ export class ZloopComponent extends ContainerFieldBase {
         }
     }
 }
-ZloopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZloopComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
-ZloopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZloopComponent, selector: "app-zloop", usesInheritance: true, ngImport: i0, template: "<div [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style zloop-container\"\r\n    *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n    *ngFor=\"let field of clonedFields\"\r\n    [field]=\"field\"\r\n    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".zloop-container{display:flex}@media (min-width: 357px){.zloop-container>app-zformcontrol.col-xs-1{width:8.333%}.zloop-container>app-zformcontrol.col-xs-2{width:16.666%}.zloop-container>app-zformcontrol.col-xs-3{width:25%}.zloop-container>app-zformcontrol.col-xs-4{width:33.333%}.zloop-container>app-zformcontrol.col-xs-5{width:41.666%}.zloop-container>app-zformcontrol.col-xs-6{width:50%}.zloop-container>app-zformcontrol.col-xs-8{width:66.666%}.zloop-container>app-zformcontrol.col-xs-9{width:75%}.zloop-container>app-zformcontrol.col-xs-10{width:83.333%}.zloop-container>app-zformcontrol.col-xs-11{width:91.667%}.zloop-container>app-zformcontrol.col-xs-12{width:100%}}@media (min-width: 576px){.zloop-container>app-zformcontrol.col-sm-1{width:8.333%}.zloop-container>app-zformcontrol.col-sm-2{width:16.666%}.zloop-container>app-zformcontrol.col-sm-3{width:25%}.zloop-container>app-zformcontrol.col-sm-4{width:33.333%}.zloop-container>app-zformcontrol.col-sm-5{width:41.666%}.zloop-container>app-zformcontrol.col-sm-6{width:50%}.zloop-container>app-zformcontrol.col-sm-7{width:58.333%}.zloop-container>app-zformcontrol.col-sm-8{width:66.666%}.zloop-container>app-zformcontrol.col-sm-9{width:75%}.zloop-container>app-zformcontrol.col-sm-10{width:83.333%}.zloop-container>app-zformcontrol.col-sm-11{width:91.667%}.zloop-container>app-zformcontrol.col-sm-12{width:100%}}@media (min-width: 768px){.zloop-container>app-zformcontrol.col-1,.zloop-container>app-zformcontrol.col-md-1{width:8.333%}.zloop-container>app-zformcontrol.col-2,.zloop-container>app-zformcontrol.col-md-2{width:16.666%}.zloop-container>app-zformcontrol.col-3,.zloop-container>app-zformcontrol.col-md-3{width:25%}.zloop-container>app-zformcontrol.col-4,.zloop-container>app-zformcontrol.col-md-4{width:33.333%}.zloop-container>app-zformcontrol.col-5,.zloop-container>app-zformcontrol.col-md-5{width:41.666%}.zloop-container>app-zformcontrol.col-6,.zloop-container>app-zformcontrol.col-md-6{width:50%}.zloop-container>app-zformcontrol.col-7,.zloop-container>app-zformcontrol.col-md-7{width:58.333%}.zloop-container>app-zformcontrol.col-8,.zloop-container>app-zformcontrol.col-md-8{width:66.666%}.zloop-container>app-zformcontrol.col-9,.zloop-container>app-zformcontrol.col-md-9{width:75%}.zloop-container>app-zformcontrol.col-10,.zloop-container>app-zformcontrol.col-md-10{width:83.333%}.zloop-container>app-zformcontrol.col-11,.zloop-container>app-zformcontrol.col-md-11{width:91.667%}.zloop-container>app-zformcontrol.col-12,.zloop-container>app-zformcontrol.col-md-12{width:100%}}@media (min-width: 992px){.zloop-container>app-zformcontrol.col-lg-1{width:8.333%}.zloop-container>app-zformcontrol.col-lg-2{width:16.666%}.zloop-container>app-zformcontrol.col-lg-3{width:25%}.zloop-container>app-zformcontrol.col-lg-4{width:33.333%}.zloop-container>app-zformcontrol.col-lg-5{width:41.666%}.zloop-container>app-zformcontrol.col-lg-6{width:50%}.zloop-container>app-zformcontrol.col-lg-7{width:58.333%}.zloop-container>app-zformcontrol.col-lg-8{width:66.666%}.zloop-container>app-zformcontrol.col-lg-9{width:75%}.zloop-container>app-zformcontrol.col-lg-10{width:83.333%}.zloop-container>app-zformcontrol.col-lg-11{width:91.667%}.zloop-container>app-zformcontrol.col-lg-12{width:100%}}@media (min-width: 1200px){.zloop-container>app-zformcontrol.col-xl-1{width:8.333%}.zloop-container>app-zformcontrol.col-xl-2{width:16.666%}.zloop-container>app-zformcontrol.col-xl-3{width:25%}.zloop-container>app-zformcontrol.col-xl-4{width:33.333%}.zloop-container>app-zformcontrol.col-xl-5{width:41.666%}.zloop-container>app-zformcontrol.col-xl-6{width:50%}.zloop-container>app-zformcontrol.col-xl-7{width:58.333%}.zloop-container>app-zformcontrol.col-xl-8{width:66.666%}.zloop-container>app-zformcontrol.col-xl-9{width:75%}.zloop-container>app-zformcontrol.col-xl-10{width:83.333%}.zloop-container>app-zformcontrol.col-xl-11{width:91.667%}.zloop-container>app-zformcontrol.col-xl-12{width:100%}}\n"], components: [{ type: i3.ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZloopComponent, decorators: [{
+ZloopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZloopComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
+ZloopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZloopComponent, selector: "app-zloop", usesInheritance: true, ngImport: i0, template: "<div [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style zloop-container\"\r\n    *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n    *ngFor=\"let field of clonedFields\"\r\n    [field]=\"field\"\r\n    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".zloop-container{display:flex}@media (min-width: 357px){.zloop-container>app-zformcontrol.col-xs-1{width:8.333%}.zloop-container>app-zformcontrol.col-xs-2{width:16.666%}.zloop-container>app-zformcontrol.col-xs-3{width:25%}.zloop-container>app-zformcontrol.col-xs-4{width:33.333%}.zloop-container>app-zformcontrol.col-xs-5{width:41.666%}.zloop-container>app-zformcontrol.col-xs-6{width:50%}.zloop-container>app-zformcontrol.col-xs-8{width:66.666%}.zloop-container>app-zformcontrol.col-xs-9{width:75%}.zloop-container>app-zformcontrol.col-xs-10{width:83.333%}.zloop-container>app-zformcontrol.col-xs-11{width:91.667%}.zloop-container>app-zformcontrol.col-xs-12{width:100%}}@media (min-width: 576px){.zloop-container>app-zformcontrol.col-sm-1{width:8.333%}.zloop-container>app-zformcontrol.col-sm-2{width:16.666%}.zloop-container>app-zformcontrol.col-sm-3{width:25%}.zloop-container>app-zformcontrol.col-sm-4{width:33.333%}.zloop-container>app-zformcontrol.col-sm-5{width:41.666%}.zloop-container>app-zformcontrol.col-sm-6{width:50%}.zloop-container>app-zformcontrol.col-sm-7{width:58.333%}.zloop-container>app-zformcontrol.col-sm-8{width:66.666%}.zloop-container>app-zformcontrol.col-sm-9{width:75%}.zloop-container>app-zformcontrol.col-sm-10{width:83.333%}.zloop-container>app-zformcontrol.col-sm-11{width:91.667%}.zloop-container>app-zformcontrol.col-sm-12{width:100%}}@media (min-width: 768px){.zloop-container>app-zformcontrol.col-1,.zloop-container>app-zformcontrol.col-md-1{width:8.333%}.zloop-container>app-zformcontrol.col-2,.zloop-container>app-zformcontrol.col-md-2{width:16.666%}.zloop-container>app-zformcontrol.col-3,.zloop-container>app-zformcontrol.col-md-3{width:25%}.zloop-container>app-zformcontrol.col-4,.zloop-container>app-zformcontrol.col-md-4{width:33.333%}.zloop-container>app-zformcontrol.col-5,.zloop-container>app-zformcontrol.col-md-5{width:41.666%}.zloop-container>app-zformcontrol.col-6,.zloop-container>app-zformcontrol.col-md-6{width:50%}.zloop-container>app-zformcontrol.col-7,.zloop-container>app-zformcontrol.col-md-7{width:58.333%}.zloop-container>app-zformcontrol.col-8,.zloop-container>app-zformcontrol.col-md-8{width:66.666%}.zloop-container>app-zformcontrol.col-9,.zloop-container>app-zformcontrol.col-md-9{width:75%}.zloop-container>app-zformcontrol.col-10,.zloop-container>app-zformcontrol.col-md-10{width:83.333%}.zloop-container>app-zformcontrol.col-11,.zloop-container>app-zformcontrol.col-md-11{width:91.667%}.zloop-container>app-zformcontrol.col-12,.zloop-container>app-zformcontrol.col-md-12{width:100%}}@media (min-width: 992px){.zloop-container>app-zformcontrol.col-lg-1{width:8.333%}.zloop-container>app-zformcontrol.col-lg-2{width:16.666%}.zloop-container>app-zformcontrol.col-lg-3{width:25%}.zloop-container>app-zformcontrol.col-lg-4{width:33.333%}.zloop-container>app-zformcontrol.col-lg-5{width:41.666%}.zloop-container>app-zformcontrol.col-lg-6{width:50%}.zloop-container>app-zformcontrol.col-lg-7{width:58.333%}.zloop-container>app-zformcontrol.col-lg-8{width:66.666%}.zloop-container>app-zformcontrol.col-lg-9{width:75%}.zloop-container>app-zformcontrol.col-lg-10{width:83.333%}.zloop-container>app-zformcontrol.col-lg-11{width:91.667%}.zloop-container>app-zformcontrol.col-lg-12{width:100%}}@media (min-width: 1200px){.zloop-container>app-zformcontrol.col-xl-1{width:8.333%}.zloop-container>app-zformcontrol.col-xl-2{width:16.666%}.zloop-container>app-zformcontrol.col-xl-3{width:25%}.zloop-container>app-zformcontrol.col-xl-4{width:33.333%}.zloop-container>app-zformcontrol.col-xl-5{width:41.666%}.zloop-container>app-zformcontrol.col-xl-6{width:50%}.zloop-container>app-zformcontrol.col-xl-7{width:58.333%}.zloop-container>app-zformcontrol.col-xl-8{width:66.666%}.zloop-container>app-zformcontrol.col-xl-9{width:75%}.zloop-container>app-zformcontrol.col-xl-10{width:83.333%}.zloop-container>app-zformcontrol.col-xl-11{width:91.667%}.zloop-container>app-zformcontrol.col-xl-12{width:100%}}\n"], components: [{ type: i3.ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZloopComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zloop', template: "<div [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style zloop-container\"\r\n    *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n    *ngFor=\"let field of clonedFields\"\r\n    [field]=\"field\"\r\n    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".zloop-container{display:flex}@media (min-width: 357px){.zloop-container>app-zformcontrol.col-xs-1{width:8.333%}.zloop-container>app-zformcontrol.col-xs-2{width:16.666%}.zloop-container>app-zformcontrol.col-xs-3{width:25%}.zloop-container>app-zformcontrol.col-xs-4{width:33.333%}.zloop-container>app-zformcontrol.col-xs-5{width:41.666%}.zloop-container>app-zformcontrol.col-xs-6{width:50%}.zloop-container>app-zformcontrol.col-xs-8{width:66.666%}.zloop-container>app-zformcontrol.col-xs-9{width:75%}.zloop-container>app-zformcontrol.col-xs-10{width:83.333%}.zloop-container>app-zformcontrol.col-xs-11{width:91.667%}.zloop-container>app-zformcontrol.col-xs-12{width:100%}}@media (min-width: 576px){.zloop-container>app-zformcontrol.col-sm-1{width:8.333%}.zloop-container>app-zformcontrol.col-sm-2{width:16.666%}.zloop-container>app-zformcontrol.col-sm-3{width:25%}.zloop-container>app-zformcontrol.col-sm-4{width:33.333%}.zloop-container>app-zformcontrol.col-sm-5{width:41.666%}.zloop-container>app-zformcontrol.col-sm-6{width:50%}.zloop-container>app-zformcontrol.col-sm-7{width:58.333%}.zloop-container>app-zformcontrol.col-sm-8{width:66.666%}.zloop-container>app-zformcontrol.col-sm-9{width:75%}.zloop-container>app-zformcontrol.col-sm-10{width:83.333%}.zloop-container>app-zformcontrol.col-sm-11{width:91.667%}.zloop-container>app-zformcontrol.col-sm-12{width:100%}}@media (min-width: 768px){.zloop-container>app-zformcontrol.col-1,.zloop-container>app-zformcontrol.col-md-1{width:8.333%}.zloop-container>app-zformcontrol.col-2,.zloop-container>app-zformcontrol.col-md-2{width:16.666%}.zloop-container>app-zformcontrol.col-3,.zloop-container>app-zformcontrol.col-md-3{width:25%}.zloop-container>app-zformcontrol.col-4,.zloop-container>app-zformcontrol.col-md-4{width:33.333%}.zloop-container>app-zformcontrol.col-5,.zloop-container>app-zformcontrol.col-md-5{width:41.666%}.zloop-container>app-zformcontrol.col-6,.zloop-container>app-zformcontrol.col-md-6{width:50%}.zloop-container>app-zformcontrol.col-7,.zloop-container>app-zformcontrol.col-md-7{width:58.333%}.zloop-container>app-zformcontrol.col-8,.zloop-container>app-zformcontrol.col-md-8{width:66.666%}.zloop-container>app-zformcontrol.col-9,.zloop-container>app-zformcontrol.col-md-9{width:75%}.zloop-container>app-zformcontrol.col-10,.zloop-container>app-zformcontrol.col-md-10{width:83.333%}.zloop-container>app-zformcontrol.col-11,.zloop-container>app-zformcontrol.col-md-11{width:91.667%}.zloop-container>app-zformcontrol.col-12,.zloop-container>app-zformcontrol.col-md-12{width:100%}}@media (min-width: 992px){.zloop-container>app-zformcontrol.col-lg-1{width:8.333%}.zloop-container>app-zformcontrol.col-lg-2{width:16.666%}.zloop-container>app-zformcontrol.col-lg-3{width:25%}.zloop-container>app-zformcontrol.col-lg-4{width:33.333%}.zloop-container>app-zformcontrol.col-lg-5{width:41.666%}.zloop-container>app-zformcontrol.col-lg-6{width:50%}.zloop-container>app-zformcontrol.col-lg-7{width:58.333%}.zloop-container>app-zformcontrol.col-lg-8{width:66.666%}.zloop-container>app-zformcontrol.col-lg-9{width:75%}.zloop-container>app-zformcontrol.col-lg-10{width:83.333%}.zloop-container>app-zformcontrol.col-lg-11{width:91.667%}.zloop-container>app-zformcontrol.col-lg-12{width:100%}}@media (min-width: 1200px){.zloop-container>app-zformcontrol.col-xl-1{width:8.333%}.zloop-container>app-zformcontrol.col-xl-2{width:16.666%}.zloop-container>app-zformcontrol.col-xl-3{width:25%}.zloop-container>app-zformcontrol.col-xl-4{width:33.333%}.zloop-container>app-zformcontrol.col-xl-5{width:41.666%}.zloop-container>app-zformcontrol.col-xl-6{width:50%}.zloop-container>app-zformcontrol.col-xl-7{width:58.333%}.zloop-container>app-zformcontrol.col-xl-8{width:66.666%}.zloop-container>app-zformcontrol.col-xl-9{width:75%}.zloop-container>app-zformcontrol.col-xl-10{width:83.333%}.zloop-container>app-zformcontrol.col-xl-11{width:91.667%}.zloop-container>app-zformcontrol.col-xl-12{width:100%}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FieldService }]; } });

package/esm2020/lib/zmfb/zmfb.component.mjs

@@ -185,9 +185,9 @@ export class ZmfbComponent extends ButtonFieldBase {
         }
     }
 }
-ZmfbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmfbComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
-ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmfbComponent, selector: "app-zmfb", usesInheritance: true, ngImport: i0, template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\" *ngIf=\"dialOpen\" [style]=\"componentProperties.style.style1\"></div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\" class=\"e1tag-style2\" dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\" [align]=\"align\" [dialItems]=\"items\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\" (close)=\"onClose($event)\" (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\" [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\" class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\" [themeColor]=\"buttonColor\" class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"], components: [{ type: i3.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i5.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmfbComponent, decorators: [{
+ZmfbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmfbComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
+ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmfbComponent, selector: "app-zmfb", usesInheritance: true, ngImport: i0, template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\" *ngIf=\"dialOpen\" [style]=\"componentProperties.style.style1\"></div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\" class=\"e1tag-style2\" dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\" [align]=\"align\" [dialItems]=\"items\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\" (close)=\"onClose($event)\" (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\" [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\" class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\" [themeColor]=\"buttonColor\" class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"], components: [{ type: i3.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i5.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmfbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zmfb', template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\" *ngIf=\"dialOpen\" [style]=\"componentProperties.style.style1\"></div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\" class=\"e1tag-style2\" dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\" [align]=\"align\" [dialItems]=\"items\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\" (close)=\"onClose($event)\" (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\" [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\" class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\" [themeColor]=\"buttonColor\" class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.WorkflowService }]; } });

package/esm2020/lib/zmodal/zmodal-mobile.component.mjs

@@ -113,9 +113,9 @@ export class ZmodalMobileComponent {
         return this.zcoreService.isDebugSession();
     }
 }
-ZmodalMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalMobileComponent, deps: [{ token: i1.WebApiService }, { token: i1.ZCoreService }, { token: i1.ComponentErrorHandlerService }, { token: i1.FieldService }, { token: i2.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZmodalMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmodalMobileComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i5.UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i3.IonRow, selector: "ion-row" }, { type: i3.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i6.ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i9.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i7.JsonPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalMobileComponent, decorators: [{
+ZmodalMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalMobileComponent, deps: [{ token: i1.WebApiService }, { token: i1.ZCoreService }, { token: i1.ComponentErrorHandlerService }, { token: i1.FieldService }, { token: i2.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ZmodalMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalMobileComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i5.UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i3.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i3.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i3.IonRow, selector: "ion-row" }, { type: i3.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i3.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i6.ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i9.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i7.JsonPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zmodal", template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.WebApiService }, { type: i1.ZCoreService }, { type: i1.ComponentErrorHandlerService }, { type: i1.FieldService }, { type: i2.ZComponentService }]; }, propDecorators: { modalParams: [{

package/esm2020/lib/zmodal/zmodal.component.mjs

@@ -118,9 +118,9 @@ export class ZmodalComponent extends DialogContentBase {
         return this.componentService.isMobileScreen();
     }
 }
-ZmodalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalComponent, deps: [{ token: i1.DialogRef }, { token: i2.ModalController }, { token: i3.ZCoreService }, { token: i3.WebApiService }, { token: i3.ResourceApiService }, { token: i3.ComponentErrorHandlerService }, { token: i3.FieldService }, { token: i2.Platform }, { token: i3.AlertService }, { token: i4.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZmodalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmodalComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i6.UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2.IonRow, selector: "ion-row" }, { type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i7.ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i8.JsonPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalComponent, decorators: [{
+ZmodalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalComponent, deps: [{ token: i1.DialogRef }, { token: i2.ModalController }, { token: i3.ZCoreService }, { token: i3.WebApiService }, { token: i3.ResourceApiService }, { token: i3.ComponentErrorHandlerService }, { token: i3.FieldService }, { token: i2.Platform }, { token: i3.AlertService }, { token: i4.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ZmodalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i6.UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2.IonRow, selector: "ion-row" }, { type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i7.ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i8.JsonPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zmodal', template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.ModalController }, { type: i3.ZCoreService }, { type: i3.WebApiService }, { type: i3.ResourceApiService }, { type: i3.ComponentErrorHandlerService }, { type: i3.FieldService }, { type: i2.Platform }, { type: i3.AlertService }, { type: i4.ZComponentService }]; }, propDecorators: { modalParams: [{

package/esm2020/lib/znumeric/znumeric.component.mjs

@@ -98,9 +98,9 @@ export class ZnumericComponent extends InputFieldBase {
         }
     }
 }
-ZnumericComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZnumericComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZnumericComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZnumericComponent, selector: "app-znumeric", viewQueries: [{ propertyName: "numeric", first: true, predicate: ["numeric"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"znumeric-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <!-- Ion Input for Mobile Screen -->\r\n  <ion-input *ngIf=\"isMobileScreen()\"\r\n             #znumericField\r\n             class=\"e1tag-style1\"\r\n             [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n             [formControlName]=\"data.Value\"\r\n             [id]=\"data.Value\"\r\n             [inputmode]=\"inputMode\"\r\n             [max]=\"maxValue\"\r\n             [min]=\"minValue\"\r\n             [placeholder]=\"data.PlaceHolder\"\r\n             [step]=\"data.StepValue\"\r\n             [style]=\"componentProperties.style.style1\"\r\n             type=\"number\"\r\n             [value]=\"0 | znumeric : form : data\">\r\n  </ion-input>\r\n\r\n  <!-- Kendo NumericTextBox for Non-Mobile Screen -->\r\n  <kendo-numerictextbox *ngIf=\"!isMobileScreen()\"\r\n                        #numeric\r\n                        class=\"input-field e1tag-style1\"\r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [decimals]=\"data.DecimalPlace\"\r\n                        [formControlName]=\"data.Value\"\r\n                        [format]=\"data.FormatOptions\"\r\n                        [id]=\"data.Value\"\r\n                        [max]=\"maxValue\"\r\n                        [min]=\"minValue\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [spinners]=\"data.ShowSpinners\"\r\n                        [changeValueOnScroll] = \"data.ChangeValueOnScroll\"\r\n                        [step]=\"data.StepValue\"\r\n                        [style]=\"componentProperties.style.style1\"\r\n                        [value]=\"0 | znumeric : form : data\"\r\n                        (valueChange)=\"onChange(null, $event)\"\r\n                        [autoCorrect]=\"data.AutoCorrect\">\r\n  </kendo-numerictextbox>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-numerictextbox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-numerictextbox>input{text-align:right}:host ::ng-deep kendo-numerictextbox.left-aligned>input{text-align:left}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-numerictextbox{color:var(--z-text-color)}\n"], components: [{ type: i2.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NumericValueAccessor, selector: "ion-input[type=number]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "znumeric": i6.ZNumericParser } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZnumericComponent, decorators: [{
+ZnumericComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZnumericComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ZnumericComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZnumericComponent, selector: "app-znumeric", viewQueries: [{ propertyName: "numeric", first: true, predicate: ["numeric"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"znumeric-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <!-- Ion Input for Mobile Screen -->\r\n  <ion-input *ngIf=\"isMobileScreen()\"\r\n             #znumericField\r\n             class=\"e1tag-style1\"\r\n             [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n             [formControlName]=\"data.Value\"\r\n             [id]=\"data.Value\"\r\n             [inputmode]=\"inputMode\"\r\n             [max]=\"maxValue\"\r\n             [min]=\"minValue\"\r\n             [placeholder]=\"data.PlaceHolder\"\r\n             [step]=\"data.StepValue\"\r\n             [style]=\"componentProperties.style.style1\"\r\n             type=\"number\"\r\n             [value]=\"0 | znumeric : form : data\">\r\n  </ion-input>\r\n\r\n  <!-- Kendo NumericTextBox for Non-Mobile Screen -->\r\n  <kendo-numerictextbox *ngIf=\"!isMobileScreen()\"\r\n                        #numeric\r\n                        class=\"input-field e1tag-style1\"\r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [decimals]=\"data.DecimalPlace\"\r\n                        [formControlName]=\"data.Value\"\r\n                        [format]=\"data.FormatOptions\"\r\n                        [id]=\"data.Value\"\r\n                        [max]=\"maxValue\"\r\n                        [min]=\"minValue\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [spinners]=\"data.ShowSpinners\"\r\n                        [changeValueOnScroll] = \"data.ChangeValueOnScroll\"\r\n                        [step]=\"data.StepValue\"\r\n                        [style]=\"componentProperties.style.style1\"\r\n                        [value]=\"0 | znumeric : form : data\"\r\n                        (valueChange)=\"onChange(null, $event)\"\r\n                        [autoCorrect]=\"data.AutoCorrect\">\r\n  </kendo-numerictextbox>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-numerictextbox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-numerictextbox>input{text-align:right}:host ::ng-deep kendo-numerictextbox.left-aligned>input{text-align:left}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-numerictextbox{color:var(--z-text-color)}\n"], components: [{ type: i2.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NumericValueAccessor, selector: "ion-input[type=number]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "znumeric": i6.ZNumericParser } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZnumericComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-znumeric', template: "<div [formGroup]=\"form\" class=\"znumeric-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <!-- Ion Input for Mobile Screen -->\r\n  <ion-input *ngIf=\"isMobileScreen()\"\r\n             #znumericField\r\n             class=\"e1tag-style1\"\r\n             [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n             [formControlName]=\"data.Value\"\r\n             [id]=\"data.Value\"\r\n             [inputmode]=\"inputMode\"\r\n             [max]=\"maxValue\"\r\n             [min]=\"minValue\"\r\n             [placeholder]=\"data.PlaceHolder\"\r\n             [step]=\"data.StepValue\"\r\n             [style]=\"componentProperties.style.style1\"\r\n             type=\"number\"\r\n             [value]=\"0 | znumeric : form : data\">\r\n  </ion-input>\r\n\r\n  <!-- Kendo NumericTextBox for Non-Mobile Screen -->\r\n  <kendo-numerictextbox *ngIf=\"!isMobileScreen()\"\r\n                        #numeric\r\n                        class=\"input-field e1tag-style1\"\r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [decimals]=\"data.DecimalPlace\"\r\n                        [formControlName]=\"data.Value\"\r\n                        [format]=\"data.FormatOptions\"\r\n                        [id]=\"data.Value\"\r\n                        [max]=\"maxValue\"\r\n                        [min]=\"minValue\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [spinners]=\"data.ShowSpinners\"\r\n                        [changeValueOnScroll] = \"data.ChangeValueOnScroll\"\r\n                        [step]=\"data.StepValue\"\r\n                        [style]=\"componentProperties.style.style1\"\r\n                        [value]=\"0 | znumeric : form : data\"\r\n                        (valueChange)=\"onChange(null, $event)\"\r\n                        [autoCorrect]=\"data.AutoCorrect\">\r\n  </kendo-numerictextbox>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-numerictextbox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-numerictextbox>input{text-align:right}:host ::ng-deep kendo-numerictextbox.left-aligned>input{text-align:left}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-numerictextbox{color:var(--z-text-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }]; }, propDecorators: { numeric: [{

package/esm2020/lib/znumeric/znumeric.component.pipe.mjs

@@ -7,9 +7,9 @@ export class ZNumericParser {
         return Number(dataValue);
     }
 }
-ZNumericParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZNumericParser, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ZNumericParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZNumericParser, name: "znumeric" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZNumericParser, decorators: [{
+ZNumericParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZNumericParser, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ZNumericParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZNumericParser, name: "znumeric" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZNumericParser, decorators: [{
             type: Pipe,
             args: [{
                     name: "znumeric",