mmhglobal-dynamicform 2.0.0-beta.37 → 2.0.0-beta.39

package/README.md

@@ -3,6 +3,12 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 
 ## Changelog
+`2.39beta`<br/>
+[zgrid] - fix bug on inline edit where initial data is empty, and later on set data using local data source.<br/>
+
+`2.38beta`<br/>
+[ztexteditor] - fix toolbar format error.<br/>
+
 `2.37beta`<br/>
 [zcard] - enhance styling and animation.<br/>
 enhance component style to support latest kendo component version (update on k-state class).<br/>

package/esm2020/lib/zdaterange/zdaterange.component.mjs

@@ -53,7 +53,7 @@ export class ZdaterangeComponent {
     }
 }
 ZdaterangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZdaterangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZdaterangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZdaterangeComponent, selector: "app-zdaterange", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "zdaterange", first: true, predicate: ["zdaterange"], descendants: true }], ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}} <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      <kendo-daterange #zdaterange class=\"ion-row\">\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">Start</span> -->\r\n        <kendo-dateinput style=\"flex: 1;\" kendoDateRangeStartInput [(value)]=\"range.start\"\r\n        class=\"notmobile-input-field\"\r\n        [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"></kendo-dateinput>\r\n        <!-- </label> -->\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">End</span> -->\r\n        <!-- <kendo-dateinput style=\"flex: 1;\" kendoDateRangeEndInput [(value)]=\"range.end\"></kendo-dateinput> -->\r\n        <!-- </label> -->\r\n\r\n        <kendo-daterange-popup [animate]=\"false\"></kendo-daterange-popup>\r\n      </kendo-daterange>\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: [":host ::ng-deep kendo-daterange{font-size:var(--content-font-size)}:host ::ng-deep kendo-daterange .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-daterange:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}.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-dateinput{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{padding-top:5px;font-size:14px}\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.DateRangeComponent, selector: "kendo-daterange" }, { type: i2.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i2.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { 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: i2.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }] });
+ZdaterangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZdaterangeComponent, selector: "app-zdaterange", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "zdaterange", first: true, predicate: ["zdaterange"], descendants: true }], ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}} <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      <kendo-daterange #zdaterange class=\"ion-row\">\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">Start</span> -->\r\n        <kendo-dateinput style=\"flex: 1;\" kendoDateRangeStartInput [(value)]=\"range.start\"\r\n        class=\"notmobile-input-field\"\r\n        [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"></kendo-dateinput>\r\n        <!-- </label> -->\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">End</span> -->\r\n        <!-- <kendo-dateinput style=\"flex: 1;\" kendoDateRangeEndInput [(value)]=\"range.end\"></kendo-dateinput> -->\r\n        <!-- </label> -->\r\n\r\n        <kendo-daterange-popup [animate]=\"false\"></kendo-daterange-popup>\r\n      </kendo-daterange>\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: [":host ::ng-deep kendo-daterange{font-size:var(--content-font-size)}:host ::ng-deep kendo-daterange .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-daterange:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}.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-dateinput{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{padding-top:5px;font-size:14px}\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.DateRangeComponent, selector: "kendo-daterange" }, { type: i2.DateInputComponent, selector: "kendo-dateinput", inputs: ["pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i2.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { 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: i2.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZdaterangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zdaterange', template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}} <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      <kendo-daterange #zdaterange class=\"ion-row\">\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">Start</span> -->\r\n        <kendo-dateinput style=\"flex: 1;\" kendoDateRangeStartInput [(value)]=\"range.start\"\r\n        class=\"notmobile-input-field\"\r\n        [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"></kendo-dateinput>\r\n        <!-- </label> -->\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">End</span> -->\r\n        <!-- <kendo-dateinput style=\"flex: 1;\" kendoDateRangeEndInput [(value)]=\"range.end\"></kendo-dateinput> -->\r\n        <!-- </label> -->\r\n\r\n        <kendo-daterange-popup [animate]=\"false\"></kendo-daterange-popup>\r\n      </kendo-daterange>\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: [":host ::ng-deep kendo-daterange{font-size:var(--content-font-size)}:host ::ng-deep kendo-daterange .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-daterange:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}.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-dateinput{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{padding-top:5px;font-size:14px}\n"] }]

package/esm2020/lib/zdatetime/zdatetime.component.mjs

@@ -68,7 +68,7 @@ export class ZdatetimeComponent extends InputFieldBase {
     }
 }
 ZdatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZdatetimeComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZdatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZdatetimeComponent, selector: "app-zdatetime", usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n  <ion-datetime *ngIf=\"isMobileScreen()\" style=\"padding: 8px 0px;\"\r\n    [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n    [placeholder]=\"data.PlaceHolder\" [id]=\"data.Value\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n    [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [formControlName]=\"data.Value\" [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n    (ionChange)=\"onChange($event.detail.value)\">\r\n  </ion-datetime>\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n    <kendo-datepicker *ngSwitchCase=\"'zshortdate'\" [id]=\"data.Value\" [value]=\"form.get(data.Value).value | dateParser\"\r\n      (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\" [activeView]=\"'year'\"\r\n      [bottomView]=\"'year'\" class=\"input-field e1tag-style1\" [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-datepicker>\r\n    <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\" [id]=\"data.Value\"\r\n      [value]=\"form.get(data.Value).value | dateParser\" (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\"\r\n      class=\"input-field e1tag-style1\" [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-datetimepicker>\r\n    <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\" [id]=\"data.Value\"\r\n      [value]=\"form.get(data.Value).value | dateParser\" (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\"\r\n      class=\"input-field e1tag-style1\"\r\n      [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-timepicker>\r\n    <kendo-datepicker *ngSwitchDefault [id]=\"data.Value\" [value]=\"form.get(data.Value).value | dateParser\"\r\n      (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\" class=\"input-field e1tag-style1\" [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-datepicker>\r\n  </div>\r\n</div>\r\n\r\n\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-datepicker{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{font-size:var(--content-font-size)}:host ::ng-deep kendo-dateinput .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datetimepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-timepicker.disabled .k-dateinput .k-dateinput-wrap{background:transparent!important}:host ::ng-deep kendo-datetimepicker:focus-within,:host ::ng-deep kendo-datepicker:focus-within,:host ::ng-deep kendo-timepicker:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}\n"], components: [{ type: i2.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] }, { type: i3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i3.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "focusableId", "title", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { type: i3.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dateFormatIonic": i6.DateIonicFormatParser, "dateMinMaxIonic": i7.DateIonicMinMaxParser, "dateParser": i8.DateParserFilter, "dateFormatKendo": i9.DateKendoFormatParser } });
+ZdatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZdatetimeComponent, selector: "app-zdatetime", usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n  <ion-datetime *ngIf=\"isMobileScreen()\" style=\"padding: 8px 0px;\"\r\n    [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n    [placeholder]=\"data.PlaceHolder\" [id]=\"data.Value\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n    [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [formControlName]=\"data.Value\" [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n    (ionChange)=\"onChange($event.detail.value)\">\r\n  </ion-datetime>\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n    <kendo-datepicker *ngSwitchCase=\"'zshortdate'\" [id]=\"data.Value\" [value]=\"form.get(data.Value).value | dateParser\"\r\n      (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\" [activeView]=\"'year'\"\r\n      [bottomView]=\"'year'\" class=\"input-field e1tag-style1\" [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-datepicker>\r\n    <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\" [id]=\"data.Value\"\r\n      [value]=\"form.get(data.Value).value | dateParser\" (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\"\r\n      class=\"input-field e1tag-style1\" [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-datetimepicker>\r\n    <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\" [id]=\"data.Value\"\r\n      [value]=\"form.get(data.Value).value | dateParser\" (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\"\r\n      class=\"input-field e1tag-style1\"\r\n      [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-timepicker>\r\n    <kendo-datepicker *ngSwitchDefault [id]=\"data.Value\" [value]=\"form.get(data.Value).value | dateParser\"\r\n      (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\" class=\"input-field e1tag-style1\" [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-datepicker>\r\n  </div>\r\n</div>\r\n\r\n\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-datepicker{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{font-size:var(--content-font-size)}:host ::ng-deep kendo-dateinput .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datetimepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-timepicker.disabled .k-dateinput .k-dateinput-wrap{background:transparent!important}:host ::ng-deep kendo-datetimepicker:focus-within,:host ::ng-deep kendo-datepicker:focus-within,:host ::ng-deep kendo-timepicker:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}\n"], components: [{ type: i2.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] }, { type: i3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i3.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { type: i3.TimePickerComponent, selector: "kendo-timepicker", inputs: ["disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dateFormatIonic": i6.DateIonicFormatParser, "dateMinMaxIonic": i7.DateIonicMinMaxParser, "dateParser": i8.DateParserFilter, "dateFormatKendo": i9.DateKendoFormatParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZdatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zdatetime", template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n  <ion-datetime *ngIf=\"isMobileScreen()\" style=\"padding: 8px 0px;\"\r\n    [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n    [placeholder]=\"data.PlaceHolder\" [id]=\"data.Value\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n    [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [formControlName]=\"data.Value\" [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n    (ionChange)=\"onChange($event.detail.value)\">\r\n  </ion-datetime>\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n    <kendo-datepicker *ngSwitchCase=\"'zshortdate'\" [id]=\"data.Value\" [value]=\"form.get(data.Value).value | dateParser\"\r\n      (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\" [activeView]=\"'year'\"\r\n      [bottomView]=\"'year'\" class=\"input-field e1tag-style1\" [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-datepicker>\r\n    <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\" [id]=\"data.Value\"\r\n      [value]=\"form.get(data.Value).value | dateParser\" (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\"\r\n      class=\"input-field e1tag-style1\" [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-datetimepicker>\r\n    <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\" [id]=\"data.Value\"\r\n      [value]=\"form.get(data.Value).value | dateParser\" (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\"\r\n      class=\"input-field e1tag-style1\"\r\n      [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-timepicker>\r\n    <kendo-datepicker *ngSwitchDefault [id]=\"data.Value\" [value]=\"form.get(data.Value).value | dateParser\"\r\n      (valueChange)=\"onChange($event)\" [min]=\"minDate\" [max]=\"maxDate\" class=\"input-field e1tag-style1\" [steps]=\"stepValue\"\r\n      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      [format]=\"data | dateFormatKendo\" [placeholder]=\"data.PlaceHolder\" [style]=\"componentProperties.style.style1\">\r\n    </kendo-datepicker>\r\n  </div>\r\n</div>\r\n\r\n\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-datepicker{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{font-size:var(--content-font-size)}:host ::ng-deep kendo-dateinput .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datetimepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-timepicker.disabled .k-dateinput .k-dateinput-wrap{background:transparent!important}:host ::ng-deep kendo-datetimepicker:focus-within,:host ::ng-deep kendo-datepicker:focus-within,:host ::ng-deep kendo-timepicker:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}\n"] }]

package/esm2020/lib/zgrid/date-range-cell-filter.component.mjs

@@ -92,7 +92,7 @@ DateRangeFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             (click)="clearFilter()">
             <span class="k-icon k-i-filter-clear" style="width:15px"></span>
         </button>
-    `, isInline: true, styles: ["kendo-daterange>kendo-dateinput.range-filter{display:inline-block}.k-button{margin-left:4px}\n"], components: [{ type: i2.DateRangeComponent, selector: "kendo-daterange" }, { type: i2.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }], directives: [{ type: i2.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { type: i2.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, styles: ["kendo-daterange>kendo-dateinput.range-filter{display:inline-block}.k-button{margin-left:4px}\n"], components: [{ type: i2.DateRangeComponent, selector: "kendo-daterange" }, { type: i2.DateInputComponent, selector: "kendo-dateinput", inputs: ["pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }], directives: [{ type: i2.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { type: i2.DateRangeEndInputDirective, selector: "[kendoDateRangeEndInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeFilterCellComponent, decorators: [{
             type: Component,
             args: [{