mmhglobal-dynamicform 2.34.0 → 2.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/README.md +20 -0
  2. package/esm2020/lib/components/datalistingfieldbase.component.mjs +2 -2
  3. package/esm2020/lib/embed-components/input-field-addons/input-field-addons.component.mjs +1 -1
  4. package/esm2020/lib/kcard/kcard.component.mjs +1 -1
  5. package/esm2020/lib/services/main.service.mjs +2 -2
  6. package/esm2020/lib/services/zcomponent.debug.service.mjs +2 -2
  7. package/esm2020/lib/sfdatetimepicker/sfdatetimepicker.component.mjs +5 -3
  8. package/esm2020/lib/uiactionbutton/uiactionbutton.component.mjs +1 -1
  9. package/esm2020/lib/uibulletin/uibulletin.component.mjs +1 -1
  10. package/esm2020/lib/zbuttons/zbuttons.component.mjs +1 -1
  11. package/esm2020/lib/zdatetime/zdatetime.component.mjs +1 -1
  12. package/esm2020/lib/zgrid/container/zgrid-container.component.mjs +1 -1
  13. package/esm2020/lib/zgrid/zgrid.binding.directive.mjs +132 -132
  14. package/esm2020/lib/zgrid/zgrid.component.mjs +57 -33
  15. package/esm2020/lib/zgrid/zgrid.service.mjs +62 -58
  16. package/esm2020/lib/zmodal/zmodal-mobile.component.mjs +1 -1
  17. package/esm2020/lib/zmodal/zmodal.component.mjs +1 -1
  18. package/esm2020/lib/zselectmultiple/zselectmultiple.component.mjs +30 -23
  19. package/esm2020/lib/ztree/ztree.component.mjs +1 -1
  20. package/esm2020/lib/ztreelist/ztreelist.component.mjs +1 -1
  21. package/esm2020/lib/zudf/zudf.component.mjs +8 -6
  22. package/esm2020/lib/zworkflowbuttons/zworkflowbuttons.component.mjs +1 -1
  23. package/fesm2015/mmhglobal-dynamicform.mjs +324 -293
  24. package/fesm2015/mmhglobal-dynamicform.mjs.map +1 -1
  25. package/fesm2020/mmhglobal-dynamicform.mjs +303 -262
  26. package/fesm2020/mmhglobal-dynamicform.mjs.map +1 -1
  27. package/lib/sfdatetimepicker/sfdatetimepicker.component.d.ts +1 -0
  28. package/lib/zgrid/zgrid.binding.directive.d.ts +5 -6
  29. package/lib/zgrid/zgrid.component.d.ts +5 -3
  30. package/lib/zgrid/zgrid.service.d.ts +10 -16
  31. package/lib/zselectmultiple/zselectmultiple.component.d.ts +4 -1
  32. package/lib/zudf/zudf.component.d.ts +3 -2
  33. package/package.json +1 -1
@@ -117,7 +117,7 @@ export class ZdatetimeComponent extends InputFieldBase {
117
117
  }
118
118
  }
119
119
  ZdatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdatetimeComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
120
- ZdatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZdatetimeComponent, selector: "app-zdatetime", viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "timepicker", first: true, predicate: ["timepicker"], descendants: true }, { propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n <ion-datetime *ngIf=\"isMobileScreen()\"\r\n [id]=\"data.Value\"\r\n [formControlName]=\"data.Value\" (ionChange)=\"onChange($event.detail.value)\"\r\n [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n [placeholder]=\"data.PlaceHolder\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n style=\"padding: 8px 0px;\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n </ion-datetime>\r\n <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n <kendo-datepicker *ngSwitchCase=\"'zshortdate'\"\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" [activeView]=\"'year'\"\r\n [bottomView]=\"'year'\" #datepicker>\r\n </kendo-datepicker>\r\n <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\"\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n calendarType=\"classic\" #datetimepicker>\r\n </kendo-datetimepicker>\r\n <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\"\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n #timepicker>\r\n </kendo-timepicker>\r\n <kendo-datepicker *ngSwitchDefault\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n #datepicker>\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", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dateMinMaxIonic": i6.DateIonicMinMaxParser, "dateFormatIonic": i7.DateIonicFormatParser, "dateParser": i8.DateParserFilter, "dateFormatKendo": i9.DateKendoFormatParser } });
120
+ ZdatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZdatetimeComponent, selector: "app-zdatetime", viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "timepicker", first: true, predicate: ["timepicker"], descendants: true }, { propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n <ion-datetime *ngIf=\"isMobileScreen()\"\r\n [id]=\"data.Value\"\r\n [formControlName]=\"data.Value\" (ionChange)=\"onChange($event.detail.value)\"\r\n [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n [placeholder]=\"data.PlaceHolder\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n style=\"padding: 8px 0px;\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n </ion-datetime>\r\n <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n <kendo-datepicker *ngSwitchCase=\"'zshortdate'\"\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" [activeView]=\"'year'\"\r\n [bottomView]=\"'year'\" #datepicker>\r\n </kendo-datepicker>\r\n <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\"\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n calendarType=\"classic\" #datetimepicker>\r\n </kendo-datetimepicker>\r\n <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\"\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n #timepicker>\r\n </kendo-timepicker>\r\n <kendo-datepicker *ngSwitchDefault\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n #datepicker>\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dateMinMaxIonic": i6.DateIonicMinMaxParser, "dateFormatIonic": i7.DateIonicFormatParser, "dateParser": i8.DateParserFilter, "dateFormatKendo": i9.DateKendoFormatParser } });
121
121
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdatetimeComponent, decorators: [{
122
122
  type: Component,
123
123
  args: [{ selector: "app-zdatetime", template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n <ion-datetime *ngIf=\"isMobileScreen()\"\r\n [id]=\"data.Value\"\r\n [formControlName]=\"data.Value\" (ionChange)=\"onChange($event.detail.value)\"\r\n [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n [placeholder]=\"data.PlaceHolder\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n style=\"padding: 8px 0px;\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n </ion-datetime>\r\n <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n <kendo-datepicker *ngSwitchCase=\"'zshortdate'\"\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" [activeView]=\"'year'\"\r\n [bottomView]=\"'year'\" #datepicker>\r\n </kendo-datepicker>\r\n <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\"\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n calendarType=\"classic\" #datetimepicker>\r\n </kendo-datetimepicker>\r\n <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\"\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n #timepicker>\r\n </kendo-timepicker>\r\n <kendo-datepicker *ngSwitchDefault\r\n [id]=\"data.Value\"\r\n [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n #datepicker>\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"] }]
@@ -90,7 +90,7 @@ export class ZgridContainerComponent extends FieldBase {
90
90
  }
91
91
  }
92
92
  ZgridContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgridContainerComponent, deps: [{ token: i1.ZComponentService }, { token: i2.MainService }], target: i0.ɵɵFactoryTarget.Component });
93
- ZgridContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgridContainerComponent, selector: "app-zgrid-container", host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "formPage", first: true, predicate: ["formPage"], descendants: true, read: ViewContainerRef }, { propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType === 'style2'\">\r\n <kendo-drawer-container [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\">\r\n <kendo-drawer #drawer mode=\"overlay\" [position]=\"'end'\" [mini]=\"false\" [animation]=\"{duration: 800}\" [expanded]=\"isShowFormPage\"\r\n [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1\" [width]=\"innerWidth\"\r\n (expandedChange)=\"onExpandChange($event)\">\r\n <ng-template kendoDrawerTemplate>\r\n <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n <div class=\"formHeader\">\r\n <label class=\"formHeader-title\">Employee Profile</label>\r\n <ion-button size=\"small\" fill=\"clear\" color=\"medium\" (click)=\"drawer.toggle()\">\r\n <fa-icon class=\"close-btn-icon\" icon=\"times\"></fa-icon>\r\n </ion-button>\r\n </div>\r\n <ng-container #formPage></ng-container>\r\n </div>\r\n </ng-template>\r\n </kendo-drawer>\r\n\r\n <kendo-drawer-content [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n (showFormPage)=\"drawer.toggle($event)\">\r\n </app-zgrid>\r\n </kendo-drawer-content>\r\n </kendo-drawer-container>\r\n</div>\r\n\r\n\r\n<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType !== 'style2'\">\r\n <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n (showFormPage)=\"toggleFormPage($event)\">\r\n </app-zgrid>\r\n <div>\r\n <div *ngIf=\"!group.isLoading\" [class.embeddedFormPage]=\"isShowFormPage\">\r\n <ng-container #formPage></ng-container>\r\n </div>\r\n <div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n <app-page-loader></app-page-loader>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-drawer{box-shadow:-1px 0 11px 1px var(--ion-color-primary);background:#f1f9ff}:host ::ng-deep kendo-drawer .k-drawer-wrapper{padding:10px;padding-top:calc(var(--ion-header-height) + 10px)}:host ::ng-deep kendo-drawer .formHeader{display:flex}:host ::ng-deep kendo-drawer .formHeader>.formHeader-title{margin:10px 0 0 20px;font-size:calc(var(--page-title-font-size) + 2px);font-weight:600;flex-grow:1}:host ::ng-deep kendo-drawer .formHeader .close-btn-icon{font-size:calc(var(--page-title-font-size) + 4px)}.embeddedFormPage{min-height:1200px;padding:8px 10px 20px;background:#ffffff;border-radius:5px;box-shadow:0 -3px 9px 4px #0167ae;margin:30px 15px 15px}\n"], components: [{ type: i3.DrawerContainerComponent, selector: "kendo-drawer-container" }, { type: i3.DrawerComponent, selector: "kendo-drawer", inputs: ["mode", "position", "mini", "expanded", "width", "miniWidth", "autoCollapse", "items", "isItemExpanded", "animation"], outputs: ["expand", "collapse", "select", "expandedChange"], exportAs: ["kendoDrawer"] }, { type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3.DrawerContentComponent, selector: "kendo-drawer-content" }, { type: i6.ZgridComponent, selector: "app-zgrid" }, { type: i7.PageLoaderComponent, selector: "app-page-loader" }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DrawerTemplateDirective, selector: "[kendoDrawerTemplate]" }] });
93
+ ZgridContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgridContainerComponent, selector: "app-zgrid-container", host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "formPage", first: true, predicate: ["formPage"], descendants: true, read: ViewContainerRef }, { propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType === 'style2'\">\r\n <kendo-drawer-container [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\">\r\n <kendo-drawer #drawer mode=\"overlay\" [position]=\"'end'\" [mini]=\"false\" [animation]=\"{duration: 800}\" [expanded]=\"isShowFormPage\"\r\n [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1\" [width]=\"innerWidth\"\r\n (expandedChange)=\"onExpandChange($event)\">\r\n <ng-template kendoDrawerTemplate>\r\n <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n <div class=\"formHeader\">\r\n <label class=\"formHeader-title\">Employee Profile</label>\r\n <ion-button size=\"small\" fill=\"clear\" color=\"medium\" (click)=\"drawer.toggle()\">\r\n <fa-icon class=\"close-btn-icon\" icon=\"times\"></fa-icon>\r\n </ion-button>\r\n </div>\r\n <ng-container #formPage></ng-container>\r\n </div>\r\n </ng-template>\r\n </kendo-drawer>\r\n\r\n <kendo-drawer-content [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n (showFormPage)=\"drawer.toggle($event)\">\r\n </app-zgrid>\r\n </kendo-drawer-content>\r\n </kendo-drawer-container>\r\n</div>\r\n\r\n\r\n<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType !== 'style2'\">\r\n <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n (showFormPage)=\"toggleFormPage($event)\">\r\n </app-zgrid>\r\n <div>\r\n <div *ngIf=\"!group.isLoading\" [class.embeddedFormPage]=\"isShowFormPage\">\r\n <ng-container #formPage></ng-container>\r\n </div>\r\n <div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n <app-page-loader></app-page-loader>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-drawer{box-shadow:-1px 0 11px 1px var(--ion-color-primary);background:#f1f9ff}:host ::ng-deep kendo-drawer .k-drawer-wrapper{padding:10px;padding-top:calc(var(--ion-header-height) + 10px)}:host ::ng-deep kendo-drawer .formHeader{display:flex}:host ::ng-deep kendo-drawer .formHeader>.formHeader-title{margin:10px 0 0 20px;font-size:calc(var(--page-title-font-size) + 2px);font-weight:600;flex-grow:1}:host ::ng-deep kendo-drawer .formHeader .close-btn-icon{font-size:calc(var(--page-title-font-size) + 4px)}.embeddedFormPage{min-height:1200px;padding:8px 10px 20px;background:#ffffff;border-radius:5px;box-shadow:0 -3px 9px 4px #0167ae;margin:30px 15px 15px}\n"], components: [{ type: i3.DrawerContainerComponent, selector: "kendo-drawer-container" }, { type: i3.DrawerComponent, selector: "kendo-drawer", inputs: ["mode", "position", "mini", "expanded", "width", "miniWidth", "autoCollapse", "items", "isItemExpanded", "animation"], outputs: ["expand", "collapse", "select", "expandedChange"], exportAs: ["kendoDrawer"] }, { type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3.DrawerContentComponent, selector: "kendo-drawer-content" }, { type: i6.ZgridComponent, selector: "app-zgrid" }, { type: i7.PageLoaderComponent, selector: "app-page-loader" }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DrawerTemplateDirective, selector: "[kendoDrawerTemplate]" }] });
94
94
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgridContainerComponent, decorators: [{
95
95
  type: Component,
96
96
  args: [{ selector: "app-zgrid-container", template: "<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType === 'style2'\">\r\n <kendo-drawer-container [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\">\r\n <kendo-drawer #drawer mode=\"overlay\" [position]=\"'end'\" [mini]=\"false\" [animation]=\"{duration: 800}\" [expanded]=\"isShowFormPage\"\r\n [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1\" [width]=\"innerWidth\"\r\n (expandedChange)=\"onExpandChange($event)\">\r\n <ng-template kendoDrawerTemplate>\r\n <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n <div class=\"formHeader\">\r\n <label class=\"formHeader-title\">Employee Profile</label>\r\n <ion-button size=\"small\" fill=\"clear\" color=\"medium\" (click)=\"drawer.toggle()\">\r\n <fa-icon class=\"close-btn-icon\" icon=\"times\"></fa-icon>\r\n </ion-button>\r\n </div>\r\n <ng-container #formPage></ng-container>\r\n </div>\r\n </ng-template>\r\n </kendo-drawer>\r\n\r\n <kendo-drawer-content [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n (showFormPage)=\"drawer.toggle($event)\">\r\n </app-zgrid>\r\n </kendo-drawer-content>\r\n </kendo-drawer-container>\r\n</div>\r\n\r\n\r\n<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType !== 'style2'\">\r\n <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n (showFormPage)=\"toggleFormPage($event)\">\r\n </app-zgrid>\r\n <div>\r\n <div *ngIf=\"!group.isLoading\" [class.embeddedFormPage]=\"isShowFormPage\">\r\n <ng-container #formPage></ng-container>\r\n </div>\r\n <div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n <app-page-loader></app-page-loader>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-drawer{box-shadow:-1px 0 11px 1px var(--ion-color-primary);background:#f1f9ff}:host ::ng-deep kendo-drawer .k-drawer-wrapper{padding:10px;padding-top:calc(var(--ion-header-height) + 10px)}:host ::ng-deep kendo-drawer .formHeader{display:flex}:host ::ng-deep kendo-drawer .formHeader>.formHeader-title{margin:10px 0 0 20px;font-size:calc(var(--page-title-font-size) + 2px);font-weight:600;flex-grow:1}:host ::ng-deep kendo-drawer .formHeader .close-btn-icon{font-size:calc(var(--page-title-font-size) + 4px)}.embeddedFormPage{min-height:1200px;padding:8px 10px 20px;background:#ffffff;border-radius:5px;box-shadow:0 -3px 9px 4px #0167ae;margin:30px 15px 15px}\n"] }]