mmhglobal-dynamicform 1.6.2 → 1.7.0

package/esm2020/lib/ztextarea/ztextarea.component.mjs

@@ -95,9 +95,9 @@ export class ZtextareaComponent {
         }
     }
 }
-ZtextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZtextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtextareaComponent, selector: "app-ztextarea", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getClass(form, data)\">\r\n    <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n        {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n        <span style=\"flex: 1;\">\r\n            <ion-textarea *ngIf=\"isMobileScreen()\"\r\n                          [id]=\"data.Value\"\r\n                          [formControlName]=\"data.Value\"\r\n                          [placeholder]=\"data.PlaceHolder\"\r\n                          [minlength]=\"data.MinLength\"\r\n                          [maxlength]=\"data.MaxLength\"\r\n                          [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          [rows]=\"data.textAreaRows\"></ion-textarea>\r\n            <kendo-textarea *ngIf=\"!isMobileScreen()\"\r\n                            [id]=\"data.Value\"\r\n                            [formControlName]=\"data.Value\"\r\n                            [placeholder]=\"data.PlaceHolder\"\r\n                            [minlength]=\"data.MinLength\"\r\n                            [maxlength]=\"data.MaxLength\"\r\n                            [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                            [rows]=\"data.textAreaRows\"\r\n                            [autoSize]=\"!data.textAreaRows\"\r\n                            resizable=\"none\"\r\n                            [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                            style=\"margin: 7px 0 0 0; width: 100%\"\r\n                            (valueChange)=\"onValueChange($event)\"\r\n                            (click)=\"onClick()\"></kendo-textarea>\r\n        </span>\r\n        <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    </div>\r\n</ion-item>\r\n", styles: [".gridInlineEdit{--background: transparent}.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-textarea{color:var(--z-text-color)}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "value", "wrap"] }, { type: i2.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "tabindex", "resizable", "tabIndex", "size", "rounded", "fillMode", "rows", "cols", "maxlength"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i3.UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtextareaComponent, decorators: [{
+ZtextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZtextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtextareaComponent, selector: "app-ztextarea", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getClass(form, data)\">\r\n    <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n        {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n        <span style=\"flex: 1;\">\r\n            <ion-textarea *ngIf=\"isMobileScreen()\"\r\n                          [id]=\"data.Value\"\r\n                          [formControlName]=\"data.Value\"\r\n                          [placeholder]=\"data.PlaceHolder\"\r\n                          [minlength]=\"data.MinLength\"\r\n                          [maxlength]=\"data.MaxLength\"\r\n                          [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          [rows]=\"data.textAreaRows\"></ion-textarea>\r\n            <kendo-textarea *ngIf=\"!isMobileScreen()\"\r\n                            [id]=\"data.Value\"\r\n                            [formControlName]=\"data.Value\"\r\n                            [placeholder]=\"data.PlaceHolder\"\r\n                            [minlength]=\"data.MinLength\"\r\n                            [maxlength]=\"data.MaxLength\"\r\n                            [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                            [rows]=\"data.textAreaRows\"\r\n                            [autoSize]=\"!data.textAreaRows\"\r\n                            resizable=\"none\"\r\n                            [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                            style=\"margin: 7px 0 0 0; width: 100%\"\r\n                            (valueChange)=\"onValueChange($event)\"\r\n                            (click)=\"onClick()\"></kendo-textarea>\r\n        </span>\r\n        <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    </div>\r\n</ion-item>\r\n", styles: [".gridInlineEdit{--background: transparent}.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-textarea{color:var(--z-text-color)}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "value", "wrap"] }, { type: i2.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "tabindex", "resizable", "tabIndex", "size", "rounded", "fillMode", "rows", "cols", "maxlength"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i3.UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ztextarea', template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getClass(form, data)\">\r\n    <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n        {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n        <span style=\"flex: 1;\">\r\n            <ion-textarea *ngIf=\"isMobileScreen()\"\r\n                          [id]=\"data.Value\"\r\n                          [formControlName]=\"data.Value\"\r\n                          [placeholder]=\"data.PlaceHolder\"\r\n                          [minlength]=\"data.MinLength\"\r\n                          [maxlength]=\"data.MaxLength\"\r\n                          [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          [rows]=\"data.textAreaRows\"></ion-textarea>\r\n            <kendo-textarea *ngIf=\"!isMobileScreen()\"\r\n                            [id]=\"data.Value\"\r\n                            [formControlName]=\"data.Value\"\r\n                            [placeholder]=\"data.PlaceHolder\"\r\n                            [minlength]=\"data.MinLength\"\r\n                            [maxlength]=\"data.MaxLength\"\r\n                            [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                            [rows]=\"data.textAreaRows\"\r\n                            [autoSize]=\"!data.textAreaRows\"\r\n                            resizable=\"none\"\r\n                            [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                            style=\"margin: 7px 0 0 0; width: 100%\"\r\n                            (valueChange)=\"onValueChange($event)\"\r\n                            (click)=\"onClick()\"></kendo-textarea>\r\n        </span>\r\n        <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    </div>\r\n</ion-item>\r\n", styles: [".gridInlineEdit{--background: transparent}.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-textarea{color:var(--z-text-color)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{

package/esm2020/lib/ztexteditor/ztexteditor.component.mjs

@@ -42,9 +42,9 @@ export class ZtexteditorComponent {
         return (h < 250) ? 250 : h;
     }
 }
-ZtexteditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtexteditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtexteditorComponent, selector: "app-ztexteditor", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <div *ngIf=\"data.Title\" class=\"title\">{{data.Title}}</div>\r\n\r\n    <ion-label [attr.for]=\"data.Value\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               position=\"stacked\"\r\n               style=\"margin-bottom:10px;\">\r\n      {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\">\r\n        *\r\n      </ion-text>\r\n    </ion-label>\r\n\r\n    <span style=\"flex: 1;\">\r\n      <kendo-editor [id]=\"data.Value\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [value]=\"value\"\r\n                    [ngStyle]=\"getCompStyle()\"\r\n                    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'hidden'\">\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'basic'\">\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'full'\">\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n          <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n        </kendo-toolbar>\r\n      </kendo-editor>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2.EditorComponent, selector: "kendo-editor", inputs: ["iframe", "applyToWord", "updateInterval", "preserveWhitespace", "resizable", "value", "disabled", "readonly", "schema", "plugins", "placeholder", "pasteCleanupSettings"], outputs: ["valueChange", "focus", "blur"] }, { type: i3.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "tabindex", "resizable", "popupSettings", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i3.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["selection", "look", "disabled", "width"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i3.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "toggleable", "selected", "fillMode", "themeColor", "text", "look", "togglable", "icon", "iconClass", "imageUrl", "style", "className", "title", "disabled"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i2.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["disabled", "view", "value", "icon", "paletteSettings", "editorCommand"] }, { type: i2.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i2.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i2.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i2.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i2.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i2.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i2.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i2.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i2.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i2.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i2.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i2.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i2.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i2.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i2.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i2.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i2.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i2.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i2.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i2.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i2.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i2.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i2.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i2.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i2.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i2.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i2.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i2.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i2.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i2.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }, { type: i2.EditorMergeCellsButtonDirective, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]" }, { type: i2.EditorSplitCellButtonDirective, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtexteditorComponent, decorators: [{
+ZtexteditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtexteditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtexteditorComponent, selector: "app-ztexteditor", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <div *ngIf=\"data.Title\" class=\"title\">{{data.Title}}</div>\r\n\r\n    <ion-label [attr.for]=\"data.Value\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               position=\"stacked\"\r\n               style=\"margin-bottom:10px;\">\r\n      {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\">\r\n        *\r\n      </ion-text>\r\n    </ion-label>\r\n\r\n    <span style=\"flex: 1;\">\r\n      <kendo-editor [id]=\"data.Value\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [value]=\"value\"\r\n                    [ngStyle]=\"getCompStyle()\"\r\n                    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'hidden'\">\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'basic'\">\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'full'\">\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n          <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n        </kendo-toolbar>\r\n      </kendo-editor>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2.EditorComponent, selector: "kendo-editor", inputs: ["iframe", "applyToWord", "updateInterval", "preserveWhitespace", "resizable", "value", "disabled", "readonly", "schema", "plugins", "placeholder", "pasteCleanupSettings"], outputs: ["valueChange", "focus", "blur"] }, { type: i3.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "tabindex", "resizable", "popupSettings", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i3.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["selection", "look", "disabled", "width"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i3.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "toggleable", "selected", "fillMode", "themeColor", "text", "look", "togglable", "icon", "iconClass", "imageUrl", "style", "className", "title", "disabled"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i2.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["disabled", "view", "value", "icon", "paletteSettings", "editorCommand"] }, { type: i2.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i2.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i2.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i2.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i2.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i2.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i2.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i2.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i2.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i2.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i2.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i2.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i2.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i2.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i2.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i2.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i2.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i2.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i2.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i2.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i2.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i2.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i2.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i2.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i2.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i2.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i2.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i2.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i2.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i2.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }, { type: i2.EditorMergeCellsButtonDirective, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]" }, { type: i2.EditorSplitCellButtonDirective, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtexteditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ztexteditor', template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <div *ngIf=\"data.Title\" class=\"title\">{{data.Title}}</div>\r\n\r\n    <ion-label [attr.for]=\"data.Value\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               position=\"stacked\"\r\n               style=\"margin-bottom:10px;\">\r\n      {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\">\r\n        *\r\n      </ion-text>\r\n    </ion-label>\r\n\r\n    <span style=\"flex: 1;\">\r\n      <kendo-editor [id]=\"data.Value\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [value]=\"value\"\r\n                    [ngStyle]=\"getCompStyle()\"\r\n                    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'hidden'\">\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'basic'\">\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'full'\">\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n          <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n          <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n          <kendo-toolbar-buttongroup>\r\n            <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n            <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n          </kendo-toolbar-buttongroup>\r\n        </kendo-toolbar>\r\n      </kendo-editor>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{

package/esm2020/lib/ztree/ztree.component.mjs

@@ -362,9 +362,9 @@ export class ZtreeComponent {
         return text.toLowerCase().indexOf((term || "").toLowerCase()) >= 0;
     }
 }
-ZtreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreeComponent, selector: "app-ztree", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"width:100%\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  kendoTreeViewSelectable\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [selectedKeys]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  textField=\"Name\"\r\n                  (filterChange)=\"handleFilter($event)\">\r\n\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n      <ion-button *ngIf=\"!!data.OnAddNode\"\r\n                  (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6; margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnAddNodeVisible)\"> \r\n        <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6; margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\"> \r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n      </ion-button>\r\n\r\n      <ion-label *ngIf=\"absoluteText\" style=\"position: absolute; top: 14px;\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n      </ion-label>\r\n\r\n      <ion-label *ngIf=\"!absoluteText\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n      </ion-label>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host{--ion-color-primary: #479400;--ion-color-primary-rgb: 56, 128, 255;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #3171e0;--ion-color-primary-tint: #4c8dff}:host ::ng-deep kendo-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;border:1px solid #c8dbf5;background-color:#e3ecf8;color:#0a45ab;font-size:13px;cursor:pointer}:host ::ng-deep kendo-treeview .k-treeview-leaf.k-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;background-color:#a9c3e8!important;color:#0a45ab!important;font-size:13px;cursor:pointer}:host ::ng-deep kendo-treeview .k-treeview-leaf:hover,:host ::ng-deep kendo-treeview .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;background-color:#c9daf2;color:#0a45ab;font-size:13px;cursor:pointer}\n"], components: [{ type: i1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "trackBy", "isDisabled", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "animate", "nodeTemplate", "loadMoreButtonTemplate", "nodes", "hasChildren", "isChecked", "isExpanded", "isSelected", "size", "textField"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["expandOnFilter", "isExpanded", "expandBy", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i1.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i1.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i1.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["loadOnDemand", "childrenField", "nodes", "isVisible"] }, { type: i1.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreeComponent, decorators: [{
+ZtreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreeComponent, selector: "app-ztree", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }], ngImport: i0, template: "<div style=\"width:100%\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  kendoTreeViewSelectable\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [selectedKeys]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  textField=\"Name\"\r\n                  (filterChange)=\"handleFilter($event)\">\r\n\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n      <ion-button *ngIf=\"!!data.OnAddNode\"\r\n                  (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6; margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnAddNodeVisible)\"> \r\n        <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6; margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\"> \r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n      </ion-button>\r\n\r\n      <ion-label *ngIf=\"absoluteText\" style=\"position: absolute; top: 14px;\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n      </ion-label>\r\n\r\n      <ion-label *ngIf=\"!absoluteText\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n      </ion-label>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host{--ion-color-primary: #479400;--ion-color-primary-rgb: 56, 128, 255;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #3171e0;--ion-color-primary-tint: #4c8dff}:host ::ng-deep kendo-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;border:1px solid #c8dbf5;background-color:#e3ecf8;color:#0a45ab;font-size:13px;cursor:pointer}:host ::ng-deep kendo-treeview .k-treeview-leaf.k-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;background-color:#a9c3e8!important;color:#0a45ab!important;font-size:13px;cursor:pointer}:host ::ng-deep kendo-treeview .k-treeview-leaf:hover,:host ::ng-deep kendo-treeview .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;background-color:#c9daf2;color:#0a45ab;font-size:13px;cursor:pointer}\n"], components: [{ type: i1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "trackBy", "isDisabled", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "animate", "nodeTemplate", "loadMoreButtonTemplate", "nodes", "hasChildren", "isChecked", "isExpanded", "isSelected", "size", "textField"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { 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: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["expandOnFilter", "isExpanded", "expandBy", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i1.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i1.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i1.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["loadOnDemand", "childrenField", "nodes", "isVisible"] }, { type: i1.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreeComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ztree", template: "<div style=\"width:100%\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  kendoTreeViewSelectable\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [selectedKeys]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  textField=\"Name\"\r\n                  (filterChange)=\"handleFilter($event)\">\r\n\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n      <ion-button *ngIf=\"!!data.OnAddNode\"\r\n                  (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6; margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnAddNodeVisible)\"> \r\n        <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6; margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\"> \r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n      </ion-button>\r\n\r\n      <ion-label *ngIf=\"absoluteText\" style=\"position: absolute; top: 14px;\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n      </ion-label>\r\n\r\n      <ion-label *ngIf=\"!absoluteText\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n      </ion-label>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host{--ion-color-primary: #479400;--ion-color-primary-rgb: 56, 128, 255;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #3171e0;--ion-color-primary-tint: #4c8dff}:host ::ng-deep kendo-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;border:1px solid #c8dbf5;background-color:#e3ecf8;color:#0a45ab;font-size:13px;cursor:pointer}:host ::ng-deep kendo-treeview .k-treeview-leaf.k-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;background-color:#a9c3e8!important;color:#0a45ab!important;font-size:13px;cursor:pointer}:host ::ng-deep kendo-treeview .k-treeview-leaf:hover,:host ::ng-deep kendo-treeview .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;background-color:#c9daf2;color:#0a45ab;font-size:13px;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{

package/esm2020/lib/ztreelist/ztreelist.component.mjs

@@ -529,9 +529,9 @@ export class ZtreelistComponent {
         return true;
     }
 }
-ZtreelistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreelistComponent, deps: [{ token: i1.FieldService }, { token: i1.WebApiService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreelistComponent, selector: "app-ztreelist", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"treelistTitle\">{{data.Title}}</div>\r\n  <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [ngStyle]=\"getGridStyle()\" [idField]=\"options.idField\" [parentIdField]=\"options.parentIdField\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  [sortable]=\"options.sortable\"\r\n                  [resizable]=\"options.resizable\"\r\n                  [filterable]=\"false\"\r\n                  [reorderable]=\"false\"\r\n                  [columnMenu]=\"options.columnMenu\"\r\n                  [scrollable]=\"options.scrollable\"\r\n                  [aggregate]=\"options.aggregate\"\r\n                  [pageable]=\"options.pageAble\"\r\n                  [pageSize]=\"data.PageSize\"\r\n                  [initiallyExpanded]=\"data.DefaultCollapse === false\"\r\n                  (filterChange)=\"onFilterChange($event)\"\r\n                  kendoTreeListExpandable\r\n                  treelist>\r\n\r\n    <!--\r\n      [filterable]=\"options.filterable\"\r\n    [reorderable]=\"options.resizable\"\r\n      -->\r\n    <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n      <kendo-treelist-column *ngIf=\"!col.command\"\r\n                             [class]=\"col.class\"\r\n                             [expandable]=\"i===0\"\r\n                             [field]=\"col.field\"\r\n                             [title]=\"col.title || col.field\"\r\n                             [width]=\"col.width || 250\"\r\n                             [filterable]=\"filterable(col.enableFiltering)\"\r\n                             [sortable]=\"sortable(col.enableSorting)\"\r\n                             [hidden]=\"!isColumnsVisible(col.visible)\">\r\n        <div [ngSwitch]=\"true\">\r\n          <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n            <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-treelist-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-treelist-numeric-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n          <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n            <div *ngIf=\"col.filterByDateRange === true\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                <date-range-filter-cell class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\r\n                  <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                  <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                  <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                  <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </date-range-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngIf=\"col.filterByDateRange === false\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                  <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                  <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                  <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                  <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-date-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <div *ngSwitchDefault>\r\n            <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-treelist-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n              </kendo-treelist-string-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n        <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n          <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ dataItem[col.field]}}\r\n            </span>\r\n          </div>\r\n          <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <app-zcheckbox style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\" (click)=\"buttonClick(col, cellContext)\"></app-zcheckbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.field)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zdatetime>\r\n            </span>\r\n          </div>\r\n          <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n            <ion-button color=\"light\" size=\"small\">\r\n              {{ dataItem[col.field] }}\r\n              <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n              <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n            </ion-button>\r\n          </span> \r\n        </ng-template>\r\n        <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n          <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <b>\r\n                {{ col.aggregateTitle | titlecase }}  {{ aggregates[col.field][col.aggregateType] | number }}\r\n              </b>\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              <b>\r\n                {{ col.aggregateTitle | titlecase }}  {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n              </b>\r\n            </span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-treelist-column>\r\n      <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\" [width]=\"col.width || 250\">\r\n        <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n          <div [ngClass]=\"col.class\">\r\n            <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\" [kendoTreeListEditCommand]=\"cellContext\"\r\n                    [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                    [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n              <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n              </fa-icon>\r\n              <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-treelist-command-column>\r\n    </ng-container>\r\n\r\n    <!-- <kendo-treelist-command-column width=\"140\">\r\n       <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n           <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                   icon=\"filter-add-expression\" title=\"Add Child\">\r\n           </button>\r\n           <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                   icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n           </button>\r\n       </ng-template>\r\n   </kendo-treelist-command-column> -->\r\n  </kendo-treelist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-treelist .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-grid-header,:host ::ng-deep kendo-treelist .k-grouping-header,:host ::ng-deep kendo-treelist .k-grid-add-row,:host ::ng-deep kendo-treelist .k-grid-footer{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid .k-grid-filter,:host ::ng-deep kendo-treelist .k-grid .k-header-column-menu,:host ::ng-deep kendo-treelist .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-treelist .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-treelist tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-treelist tbody tr:hover,:host ::ng-deep kendo-treelist tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-treelist .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellWrapText .gridCell{white-space:pre-line!important}.treelistTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i3.TreeListComponent, selector: "kendo-treelist", inputs: ["pageSize", "scrollable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "data", "sort", "navigatable", "rowClass", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded", "aria-label", "height", "rowHeight", "filter"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i3.ColumnComponent, selector: "kendo-treelist-column", inputs: ["sortable", "editor", "filter", "filterable", "editable", "expandable", "field", "format"] }, { type: i3.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i4.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i4.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i4.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i4.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i4.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i4.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i4.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i4.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: i5.DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i3.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i3.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i3.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i3.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i3.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i3.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i3.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i3.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i3.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i3.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i3.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i3.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i3.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: i6.ZcheckboxComponent, selector: "app-zcheckbox", inputs: ["data", "group", "form"] }, { type: i7.ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: ["data", "group", "form", "iconList", "buttonList"] }, { type: i8.ZtextareaComponent, selector: "app-ztextarea", inputs: ["data", "group", "form"] }, { type: i9.ZdatetimeComponent, selector: "app-zdatetime", inputs: ["data", "group", "form"] }, { type: i10.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i11.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3.CommandColumnComponent, selector: "kendo-treelist-command-column" }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["initiallyExpanded", "expandedKeys", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i3.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i12.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i12.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i3.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListAddCommand", "kendoTreeListFocusable", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i12.DatePipe, "number": i12.DecimalPipe, "titlecase": i12.TitleCasePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreelistComponent, decorators: [{
+ZtreelistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreelistComponent, deps: [{ token: i1.FieldService }, { token: i1.WebApiService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
+ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreelistComponent, selector: "app-ztreelist", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"treelistTitle\">{{data.Title}}</div>\r\n  <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [ngStyle]=\"getGridStyle()\" [idField]=\"options.idField\" [parentIdField]=\"options.parentIdField\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  [sortable]=\"options.sortable\"\r\n                  [resizable]=\"options.resizable\"\r\n                  [filterable]=\"false\"\r\n                  [reorderable]=\"false\"\r\n                  [columnMenu]=\"options.columnMenu\"\r\n                  [scrollable]=\"options.scrollable\"\r\n                  [aggregate]=\"options.aggregate\"\r\n                  [pageable]=\"options.pageAble\"\r\n                  [pageSize]=\"data.PageSize\"\r\n                  [initiallyExpanded]=\"data.DefaultCollapse === false\"\r\n                  (filterChange)=\"onFilterChange($event)\"\r\n                  kendoTreeListExpandable\r\n                  treelist>\r\n\r\n    <!--\r\n      [filterable]=\"options.filterable\"\r\n    [reorderable]=\"options.resizable\"\r\n      -->\r\n    <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n      <kendo-treelist-column *ngIf=\"!col.command\"\r\n                             [class]=\"col.class\"\r\n                             [expandable]=\"i===0\"\r\n                             [field]=\"col.field\"\r\n                             [title]=\"col.title || col.field\"\r\n                             [width]=\"col.width || 250\"\r\n                             [filterable]=\"filterable(col.enableFiltering)\"\r\n                             [sortable]=\"sortable(col.enableSorting)\"\r\n                             [hidden]=\"!isColumnsVisible(col.visible)\">\r\n        <div [ngSwitch]=\"true\">\r\n          <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n            <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-treelist-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-treelist-numeric-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n          <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n            <div *ngIf=\"col.filterByDateRange === true\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                <date-range-filter-cell class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\r\n                  <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                  <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                  <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                  <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </date-range-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngIf=\"col.filterByDateRange === false\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                  <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                  <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                  <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                  <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-date-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <div *ngSwitchDefault>\r\n            <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-treelist-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n              </kendo-treelist-string-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n        <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n          <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ dataItem[col.field]}}\r\n            </span>\r\n          </div>\r\n          <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <app-zcheckbox style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\" (click)=\"buttonClick(col, cellContext)\"></app-zcheckbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.field)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zdatetime>\r\n            </span>\r\n          </div>\r\n          <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n            <ion-button color=\"light\" size=\"small\">\r\n              {{ dataItem[col.field] }}\r\n              <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n              <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n            </ion-button>\r\n          </span> \r\n        </ng-template>\r\n        <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n          <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <b>\r\n                {{ col.aggregateTitle | titlecase }}  {{ aggregates[col.field][col.aggregateType] | number }}\r\n              </b>\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              <b>\r\n                {{ col.aggregateTitle | titlecase }}  {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n              </b>\r\n            </span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-treelist-column>\r\n      <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\" [width]=\"col.width || 250\">\r\n        <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n          <div [ngClass]=\"col.class\">\r\n            <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\" [kendoTreeListEditCommand]=\"cellContext\"\r\n                    [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                    [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n              <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n              </fa-icon>\r\n              <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-treelist-command-column>\r\n    </ng-container>\r\n\r\n    <!-- <kendo-treelist-command-column width=\"140\">\r\n       <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n           <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                   icon=\"filter-add-expression\" title=\"Add Child\">\r\n           </button>\r\n           <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                   icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n           </button>\r\n       </ng-template>\r\n   </kendo-treelist-command-column> -->\r\n  </kendo-treelist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-treelist .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-grid-header,:host ::ng-deep kendo-treelist .k-grouping-header,:host ::ng-deep kendo-treelist .k-grid-add-row,:host ::ng-deep kendo-treelist .k-grid-footer{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid .k-grid-filter,:host ::ng-deep kendo-treelist .k-grid .k-header-column-menu,:host ::ng-deep kendo-treelist .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-treelist .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-treelist tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-treelist tbody tr:hover,:host ::ng-deep kendo-treelist tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-treelist .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellWrapText .gridCell{white-space:pre-line!important}.treelistTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i3.TreeListComponent, selector: "kendo-treelist", inputs: ["pageSize", "scrollable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "data", "sort", "navigatable", "rowClass", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded", "aria-label", "height", "rowHeight", "filter"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i3.ColumnComponent, selector: "kendo-treelist-column", inputs: ["sortable", "editor", "filter", "filterable", "editable", "expandable", "field", "format"] }, { type: i3.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i4.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i4.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i4.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i4.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i4.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i4.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i4.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i4.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: i5.DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i3.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i3.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i3.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i3.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i3.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i3.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i3.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i3.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i3.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i3.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i3.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i3.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i3.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: i6.ZcheckboxComponent, selector: "app-zcheckbox", inputs: ["data", "group", "form"] }, { type: i7.ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: ["data", "group", "form", "iconList", "buttonList"] }, { type: i8.ZtextareaComponent, selector: "app-ztextarea", inputs: ["data", "group", "form"] }, { type: i9.ZdatetimeComponent, selector: "app-zdatetime", inputs: ["data", "group", "form"] }, { type: i10.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i11.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3.CommandColumnComponent, selector: "kendo-treelist-command-column" }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["initiallyExpanded", "expandedKeys", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i3.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i12.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i12.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i3.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListAddCommand", "kendoTreeListFocusable", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i12.DatePipe, "number": i12.DecimalPipe, "titlecase": i12.TitleCasePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreelistComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ztreelist", template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"treelistTitle\">{{data.Title}}</div>\r\n  <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [ngStyle]=\"getGridStyle()\" [idField]=\"options.idField\" [parentIdField]=\"options.parentIdField\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  [sortable]=\"options.sortable\"\r\n                  [resizable]=\"options.resizable\"\r\n                  [filterable]=\"false\"\r\n                  [reorderable]=\"false\"\r\n                  [columnMenu]=\"options.columnMenu\"\r\n                  [scrollable]=\"options.scrollable\"\r\n                  [aggregate]=\"options.aggregate\"\r\n                  [pageable]=\"options.pageAble\"\r\n                  [pageSize]=\"data.PageSize\"\r\n                  [initiallyExpanded]=\"data.DefaultCollapse === false\"\r\n                  (filterChange)=\"onFilterChange($event)\"\r\n                  kendoTreeListExpandable\r\n                  treelist>\r\n\r\n    <!--\r\n      [filterable]=\"options.filterable\"\r\n    [reorderable]=\"options.resizable\"\r\n      -->\r\n    <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n      <kendo-treelist-column *ngIf=\"!col.command\"\r\n                             [class]=\"col.class\"\r\n                             [expandable]=\"i===0\"\r\n                             [field]=\"col.field\"\r\n                             [title]=\"col.title || col.field\"\r\n                             [width]=\"col.width || 250\"\r\n                             [filterable]=\"filterable(col.enableFiltering)\"\r\n                             [sortable]=\"sortable(col.enableSorting)\"\r\n                             [hidden]=\"!isColumnsVisible(col.visible)\">\r\n        <div [ngSwitch]=\"true\">\r\n          <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n            <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-treelist-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-treelist-numeric-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n          <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n            <div *ngIf=\"col.filterByDateRange === true\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                <date-range-filter-cell class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\r\n                  <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                  <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                  <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                  <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </date-range-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngIf=\"col.filterByDateRange === false\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                  <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                  <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                  <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                  <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-date-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <div *ngSwitchDefault>\r\n            <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-treelist-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n              </kendo-treelist-string-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n        <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n          <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ dataItem[col.field]}}\r\n            </span>\r\n          </div>\r\n          <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <app-zcheckbox style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\" (click)=\"buttonClick(col, cellContext)\"></app-zcheckbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.field)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zdatetime>\r\n            </span>\r\n          </div>\r\n          <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n            <ion-button color=\"light\" size=\"small\">\r\n              {{ dataItem[col.field] }}\r\n              <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n              <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n            </ion-button>\r\n          </span> \r\n        </ng-template>\r\n        <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n          <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <b>\r\n                {{ col.aggregateTitle | titlecase }}  {{ aggregates[col.field][col.aggregateType] | number }}\r\n              </b>\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              <b>\r\n                {{ col.aggregateTitle | titlecase }}  {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n              </b>\r\n            </span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-treelist-column>\r\n      <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\" [width]=\"col.width || 250\">\r\n        <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n          <div [ngClass]=\"col.class\">\r\n            <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\" [kendoTreeListEditCommand]=\"cellContext\"\r\n                    [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                    [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n              <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n              </fa-icon>\r\n              <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-treelist-command-column>\r\n    </ng-container>\r\n\r\n    <!-- <kendo-treelist-command-column width=\"140\">\r\n       <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n           <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                   icon=\"filter-add-expression\" title=\"Add Child\">\r\n           </button>\r\n           <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                   icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n           </button>\r\n       </ng-template>\r\n   </kendo-treelist-command-column> -->\r\n  </kendo-treelist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-treelist .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-grid-header,:host ::ng-deep kendo-treelist .k-grouping-header,:host ::ng-deep kendo-treelist .k-grid-add-row,:host ::ng-deep kendo-treelist .k-grid-footer{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid .k-grid-filter,:host ::ng-deep kendo-treelist .k-grid .k-header-column-menu,:host ::ng-deep kendo-treelist .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-treelist .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-treelist tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-treelist tbody tr:hover,:host ::ng-deep kendo-treelist tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-treelist .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellWrapText .gridCell{white-space:pre-line!important}.treelistTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FieldService }, { type: i1.WebApiService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: i1.AuthService }]; }, propDecorators: { data: [{

package/esm2020/lib/ztrendcard/ztrendcard.component.mjs

@@ -77,9 +77,9 @@ export class ZtrendcardComponent {
         options.value = ZComponentHelper.getGroupEvalValue.call(this, field.Value) || options.value;
     }
 }
-ZtrendcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtrendcardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZtrendcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtrendcardComponent, selector: "app-ztrendcard", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <ion-grid>\r\n    <ion-row>\r\n      <ion-col>\r\n        <!-- <div class=\"trend-btn ion-activatable ripple-parent\" [routerLink]=\"[item.URL]\"> -->\r\n        <div class=\"trend-btn ion-activatable ripple-parent\">\r\n          <ion-label>\r\n            <ion-grid style=\"width: 100%;\">\r\n              <ion-row>\r\n                <ion-col class=\"trend-btn-icon\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <fa-icon [icon]=\"options.icon\" [style.color]=\"options.color\"></fa-icon>\r\n                </ion-col>\r\n                <ion-col class=\"trend-btn-value\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <ion-label>{{ options.value }}</ion-label><br/>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </ion-label>\r\n          <ion-label class=\"trend-btn-label\">{{ options.title }}</ion-label>\r\n          <ion-ripple-effect></ion-ripple-effect>\r\n        </div>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n<div style=\"padding-bottom: 10px;\"></div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".trend-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:8px 0;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.ripple-parent{position:relative;overflow:hidden}.trend-btn-label{text-align:right;font-size:14px;padding-right:20px}.trend-btn-value{text-align:right;zoom:2;vertical-align:middle;padding-top:10px}.trend-btn-icon{text-align:center;zoom:2.5}\n"], components: [{ type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i1.IonRow, selector: "ion-row" }, { type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtrendcardComponent, decorators: [{
+ZtrendcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtrendcardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZtrendcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtrendcardComponent, selector: "app-ztrendcard", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <ion-grid>\r\n    <ion-row>\r\n      <ion-col>\r\n        <!-- <div class=\"trend-btn ion-activatable ripple-parent\" [routerLink]=\"[item.URL]\"> -->\r\n        <div class=\"trend-btn ion-activatable ripple-parent\">\r\n          <ion-label>\r\n            <ion-grid style=\"width: 100%;\">\r\n              <ion-row>\r\n                <ion-col class=\"trend-btn-icon\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <fa-icon [icon]=\"options.icon\" [style.color]=\"options.color\"></fa-icon>\r\n                </ion-col>\r\n                <ion-col class=\"trend-btn-value\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <ion-label>{{ options.value }}</ion-label><br/>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </ion-label>\r\n          <ion-label class=\"trend-btn-label\">{{ options.title }}</ion-label>\r\n          <ion-ripple-effect></ion-ripple-effect>\r\n        </div>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n<div style=\"padding-bottom: 10px;\"></div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".trend-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:8px 0;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.ripple-parent{position:relative;overflow:hidden}.trend-btn-label{text-align:right;font-size:14px;padding-right:20px}.trend-btn-value{text-align:right;zoom:2;vertical-align:middle;padding-top:10px}.trend-btn-icon{text-align:center;zoom:2.5}\n"], components: [{ type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i1.IonRow, selector: "ion-row" }, { type: i1.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: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtrendcardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ztrendcard', template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <ion-grid>\r\n    <ion-row>\r\n      <ion-col>\r\n        <!-- <div class=\"trend-btn ion-activatable ripple-parent\" [routerLink]=\"[item.URL]\"> -->\r\n        <div class=\"trend-btn ion-activatable ripple-parent\">\r\n          <ion-label>\r\n            <ion-grid style=\"width: 100%;\">\r\n              <ion-row>\r\n                <ion-col class=\"trend-btn-icon\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <fa-icon [icon]=\"options.icon\" [style.color]=\"options.color\"></fa-icon>\r\n                </ion-col>\r\n                <ion-col class=\"trend-btn-value\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <ion-label>{{ options.value }}</ion-label><br/>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </ion-label>\r\n          <ion-label class=\"trend-btn-label\">{{ options.title }}</ion-label>\r\n          <ion-ripple-effect></ion-ripple-effect>\r\n        </div>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n<div style=\"padding-bottom: 10px;\"></div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".trend-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:8px 0;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.ripple-parent{position:relative;overflow:hidden}.trend-btn-label{text-align:right;font-size:14px;padding-right:20px}.trend-btn-value{text-align:right;zoom:2;vertical-align:middle;padding-top:10px}.trend-btn-icon{text-align:center;zoom:2.5}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{

package/esm2020/lib/zudf/zudf.component.mjs

@@ -190,9 +190,9 @@ export class ZudfComponent {
         this.formField = [];
     }
 }
-ZudfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZudfComponent, deps: [{ token: i1.AlertService }, { token: i1.AuthService }, { token: i1.FieldService }, { token: i1.ResourceApiService }, { token: i1.ToastService }, { token: i1.WebApiService }], target: i0.ɵɵFactoryTarget.Component });
-ZudfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZudfComponent, selector: "app-zudf", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n   <kendo-card *ngIf=\"data.Title\" width=\"100%\" >\r\n    <kendo-card-header  >\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <div class=\"ion-row\">\r\n        <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          *ngFor=\"let field of formField | divzlayout: data.zlayout\"\r\n                          [field]=\"field\"\r\n                          [group]=\"group\"\r\n                          [form]=\"form\"\r\n                          id=\"zudf{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n        </app-zformcontrol>\r\n      </div>\r\n    </kendo-card-body> \r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of formField | divzlayout: data.zlayout\"\r\n                    [field]=\"field\"\r\n                    [group]=\"group\"\r\n                    [form]=\"form\"\r\n                    id=\"zudf{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}\n"], components: [{ type: i2.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2.CardHeaderComponent, selector: "kendo-card-header" }, { type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.CardBodyComponent, selector: "kendo-card-body" }, { type: i4.ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "divzlayout": i6.DivzLayout } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZudfComponent, decorators: [{
+ZudfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZudfComponent, deps: [{ token: i1.AlertService }, { token: i1.AuthService }, { token: i1.FieldService }, { token: i1.ResourceApiService }, { token: i1.ToastService }, { token: i1.WebApiService }], target: i0.ɵɵFactoryTarget.Component });
+ZudfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZudfComponent, selector: "app-zudf", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n   <kendo-card *ngIf=\"data.Title\" width=\"100%\" >\r\n    <kendo-card-header  >\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <div class=\"ion-row\">\r\n        <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          *ngFor=\"let field of formField | divzlayout: data.zlayout\"\r\n                          [field]=\"field\"\r\n                          [group]=\"group\"\r\n                          [form]=\"form\"\r\n                          id=\"zudf{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n        </app-zformcontrol>\r\n      </div>\r\n    </kendo-card-body> \r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of formField | divzlayout: data.zlayout\"\r\n                    [field]=\"field\"\r\n                    [group]=\"group\"\r\n                    [form]=\"form\"\r\n                    id=\"zudf{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}\n"], components: [{ type: i2.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2.CardHeaderComponent, selector: "kendo-card-header" }, { type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.CardBodyComponent, selector: "kendo-card-body" }, { type: i4.ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "divzlayout": i6.DivzLayout } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZudfComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zudf', template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n   <kendo-card *ngIf=\"data.Title\" width=\"100%\" >\r\n    <kendo-card-header  >\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <div class=\"ion-row\">\r\n        <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          *ngFor=\"let field of formField | divzlayout: data.zlayout\"\r\n                          [field]=\"field\"\r\n                          [group]=\"group\"\r\n                          [form]=\"form\"\r\n                          id=\"zudf{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n        </app-zformcontrol>\r\n      </div>\r\n    </kendo-card-body> \r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of formField | divzlayout: data.zlayout\"\r\n                    [field]=\"field\"\r\n                    [group]=\"group\"\r\n                    [form]=\"form\"\r\n                    id=\"zudf{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.AlertService }, { type: i1.AuthService }, { type: i1.FieldService }, { type: i1.ResourceApiService }, { type: i1.ToastService }, { type: i1.WebApiService }]; }, propDecorators: { data: [{

package/esm2020/lib/zunknown/zunknown.component.mjs

@@ -5,9 +5,9 @@ export class ZunknownComponent {
     constructor() { }
     ngOnInit() { }
 }
-ZunknownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZunknownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZunknownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZunknownComponent, selector: "app-zunknown", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<p>\r\n  Unknown field Type => {{ data.Type}} >> {{data.Name}}\r\n</p>\r\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZunknownComponent, decorators: [{
+ZunknownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZunknownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZunknownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZunknownComponent, selector: "app-zunknown", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<p>\r\n  Unknown field Type => {{ data.Type}} >> {{data.Name}}\r\n</p>\r\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZunknownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zunknown', template: "<p>\r\n  Unknown field Type => {{ data.Type}} >> {{data.Name}}\r\n</p>\r\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{