mmhglobal-dynamicform 2.23.3 → 2.23.4

package/esm2020/lib/zcard/zcard.component.mjs

@@ -27,9 +27,9 @@ export class ZcardComponent extends ContainerFieldBase {
         this.componentService.decrementComponentCounterForField(this.data);
     }
 }
-ZcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcardComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZcardComponent, selector: "app-zcard", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\" [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <kendo-panelbar class=\"zcard e1tag-container-style1\" keepItemContent=\"true\" [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\"\r\n                         [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n          <fa-icon [icon]=\"componentProperties.icon || 'folder'\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">{{componentProperties.title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <app-zdiv class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\" [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}:host ::ng-deep kendo-panelbar.zcard{border:none;background:transparent}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link{background:var(--ion-color-primary);text-transform:none;border-radius:var(--ion-container-border-radius);padding:10px 16px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-icon{color:var(--ion-color-primary-contrast);padding-right:10px;font-size:11pt}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-title{color:var(--ion-color-primary-contrast);font-weight:600;font-size:16px;padding-top:3px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link>.k-icon{color:var(--ion-color-primary-contrast);font-size:20px;font-weight:900}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-hover{background:rgba(var(--ion-color-primary-rgb),.9);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected{background:var(--ion-color-primary)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link{border-radius:var(--ion-container-border-radius) var(--ion-container-border-radius) 0px 0px;background:rgba(var(--ion-color-primary-rgb),.25)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover{background:rgba(var(--ion-color-primary-rgb),.35);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .k-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .k-icon{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-panelbar.zcard .k-content.k-panelbar-content{border-radius:0px 0px var(--ion-container-border-radius) var(--ion-container-border-radius);padding:5px 5px 20px 0;animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes slide-bottom{0%{transform:translateY(-50px);opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{transform:translateY(0);opacity:1}}\n"], components: [{ type: i2.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse"], exportAs: ["kendoPanelbar"] }, { type: i2.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { 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: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i5.ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { type: i2.PanelBarContentDirective, selector: "[kendoPanelBarContent]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcardComponent, decorators: [{
+ZcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcardComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ZcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZcardComponent, selector: "app-zcard", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\" [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <kendo-panelbar class=\"zcard e1tag-container-style1\" keepItemContent=\"true\" [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\"\r\n                         [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n          <fa-icon [icon]=\"componentProperties.icon || 'folder'\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">{{componentProperties.title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <app-zdiv class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\" [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}:host ::ng-deep kendo-panelbar.zcard{border:none;background:transparent}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link{background:var(--ion-color-primary);text-transform:none;border-radius:var(--ion-container-border-radius);padding:10px 16px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-icon{color:var(--ion-color-primary-contrast);padding-right:10px;font-size:11pt}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-title{color:var(--ion-color-primary-contrast);font-weight:600;font-size:16px;padding-top:3px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link>.k-icon{color:var(--ion-color-primary-contrast);font-size:20px;font-weight:900}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-hover{background:rgba(var(--ion-color-primary-rgb),.9);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected{background:var(--ion-color-primary)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link{border-radius:var(--ion-container-border-radius) var(--ion-container-border-radius) 0px 0px;background:rgba(var(--ion-color-primary-rgb),.25)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover{background:rgba(var(--ion-color-primary-rgb),.35);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .k-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .k-icon{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-panelbar.zcard .k-content.k-panelbar-content{border-radius:0px 0px var(--ion-container-border-radius) var(--ion-container-border-radius);padding:5px 5px 20px 0;animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes slide-bottom{0%{transform:translateY(-50px);opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{transform:translateY(0);opacity:1}}\n"], components: [{ type: i2.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse"], exportAs: ["kendoPanelbar"] }, { type: i2.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { 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: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i5.ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { type: i2.PanelBarContentDirective, selector: "[kendoPanelBarContent]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcardComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zcard", template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\" [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <kendo-panelbar class=\"zcard e1tag-container-style1\" keepItemContent=\"true\" [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\"\r\n                         [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n          <fa-icon [icon]=\"componentProperties.icon || 'folder'\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">{{componentProperties.title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <app-zdiv class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\" [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}:host ::ng-deep kendo-panelbar.zcard{border:none;background:transparent}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link{background:var(--ion-color-primary);text-transform:none;border-radius:var(--ion-container-border-radius);padding:10px 16px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-icon{color:var(--ion-color-primary-contrast);padding-right:10px;font-size:11pt}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-title{color:var(--ion-color-primary-contrast);font-weight:600;font-size:16px;padding-top:3px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link>.k-icon{color:var(--ion-color-primary-contrast);font-size:20px;font-weight:900}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-hover{background:rgba(var(--ion-color-primary-rgb),.9);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected{background:var(--ion-color-primary)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link{border-radius:var(--ion-container-border-radius) var(--ion-container-border-radius) 0px 0px;background:rgba(var(--ion-color-primary-rgb),.25)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover{background:rgba(var(--ion-color-primary-rgb),.35);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .k-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .k-icon{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-panelbar.zcard .k-content.k-panelbar-content{border-radius:0px 0px var(--ion-container-border-radius) var(--ion-container-border-radius);padding:5px 5px 20px 0;animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes slide-bottom{0%{transform:translateY(-50px);opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{transform:translateY(0);opacity:1}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }]; } });

package/esm2020/lib/zchart/zchart.component.mjs

@@ -213,9 +213,9 @@ export class ZchartComponent extends DataListingFieldBase {
         return this.callComponentEvent({ value, category }, this.options.customTooltipFunc);
     }
 }
-ZchartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZchartComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZchartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZchartComponent, selector: "app-zchart", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-chart [renderAs]=\"options.renderAs\" [pannable]=\"options.pannable\" [zoomable]=\"options.zoomable\"\r\n               [categoryAxis]=\"options.categoryAxis\"\r\n               (render)=\"onRender($event)\"\r\n               (axisLabelClick)=\"onAxisLabelClick($event)\"\r\n               (legendItemClick)=\"onLegendItemClick($event)\"\r\n               (legendItemHover)=\"onLegendItemHover($event)\"\r\n               (plotAreaClick)=\"onPlotAreaClick($event)\"\r\n               (plotAreaHover)=\"onPlotAreaHover($event)\"\r\n               (seriesClick)=\"onSeriesClick($event)\"\r\n               (seriesHover)=\"onSeriesHover($event)\"\r\n               class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chart-title *ngIf=\"options.title\" [text]=\"options.title\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\"></kendo-chart-title>\r\n    <kendo-chart-legend [position]=\"options.legendPosition\" [orientation]=\"options.legendOrientation\" class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></kendo-chart-legend>\r\n    <kendo-chart-tooltip [format]=\"options.tooltipFormat\" class=\"e1tag-style4\" [style]=\"componentProperties.style.style4\"></kendo-chart-tooltip>\r\n    <kendo-chart-series class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">\r\n      <kendo-chart-series-item *ngFor=\"let item of options.series\"\r\n                               [aggregate]=\"options.aggregateType\"\r\n                               [type]=\"item.type || options.dataType\" [style]=\"item.style || options.dataStyle\"\r\n                               [color]=\"item.color || options.color\"\r\n                               [labels]=\"item.labels || options.labels\"\r\n                               [field]=\"options.dataField\" [categoryField]=\"options.categoryField\"\r\n                               [data]=\"item.data\" [name]=\"item.name\">\r\n        <kendo-chart-series-item-tooltip kendoChartSeriesTooltipTemplate *ngIf=\"options.customTooltipFunc\" [background]=\"options.customTooltipOptions.background\">\r\n          <ng-template let-value=\"value\" let-category=\"category\">\r\n            <div [innerHTML]=\"getToolTip(value, category) | htmlSanitize\" class=\"e1tag-style6\" [style]=\"componentProperties.style.style6\"></div>\r\n          </ng-template>\r\n        </kendo-chart-series-item-tooltip>\r\n      </kendo-chart-series-item>\r\n    </kendo-chart-series>\r\n  </kendo-chart>\r\n</div>\r\n", styles: [""], components: [{ type: i2.ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick"], exportAs: ["kendoChart"] }, { type: i2.TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { type: i2.LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title"] }, { type: i2.TooltipComponent, selector: "kendo-chart-tooltip", inputs: ["background", "border", "color", "font", "format", "opacity", "padding", "shared", "visible"] }, { type: i2.SeriesComponent, selector: "kendo-chart-series" }, { type: i2.SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { type: i2.SeriesTooltipComponent, selector: "kendo-chart-series-item-tooltip", inputs: ["background", "border", "color", "font", "format", "padding", "visible"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.SeriesTooltipTemplateDirective, selector: "[kendoChartSeriesTooltipTemplate]" }], pipes: { "htmlSanitize": i4.HtmlSanitizePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZchartComponent, decorators: [{
+ZchartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZchartComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ZchartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZchartComponent, selector: "app-zchart", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-chart [renderAs]=\"options.renderAs\" [pannable]=\"options.pannable\" [zoomable]=\"options.zoomable\"\r\n               [categoryAxis]=\"options.categoryAxis\"\r\n               (render)=\"onRender($event)\"\r\n               (axisLabelClick)=\"onAxisLabelClick($event)\"\r\n               (legendItemClick)=\"onLegendItemClick($event)\"\r\n               (legendItemHover)=\"onLegendItemHover($event)\"\r\n               (plotAreaClick)=\"onPlotAreaClick($event)\"\r\n               (plotAreaHover)=\"onPlotAreaHover($event)\"\r\n               (seriesClick)=\"onSeriesClick($event)\"\r\n               (seriesHover)=\"onSeriesHover($event)\"\r\n               class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chart-title *ngIf=\"options.title\" [text]=\"options.title\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\"></kendo-chart-title>\r\n    <kendo-chart-legend [position]=\"options.legendPosition\" [orientation]=\"options.legendOrientation\" class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></kendo-chart-legend>\r\n    <kendo-chart-tooltip [format]=\"options.tooltipFormat\" class=\"e1tag-style4\" [style]=\"componentProperties.style.style4\"></kendo-chart-tooltip>\r\n    <kendo-chart-series class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">\r\n      <kendo-chart-series-item *ngFor=\"let item of options.series\"\r\n                               [aggregate]=\"options.aggregateType\"\r\n                               [type]=\"item.type || options.dataType\" [style]=\"item.style || options.dataStyle\"\r\n                               [color]=\"item.color || options.color\"\r\n                               [labels]=\"item.labels || options.labels\"\r\n                               [field]=\"options.dataField\" [categoryField]=\"options.categoryField\"\r\n                               [data]=\"item.data\" [name]=\"item.name\">\r\n        <kendo-chart-series-item-tooltip kendoChartSeriesTooltipTemplate *ngIf=\"options.customTooltipFunc\" [background]=\"options.customTooltipOptions.background\">\r\n          <ng-template let-value=\"value\" let-category=\"category\">\r\n            <div [innerHTML]=\"getToolTip(value, category) | htmlSanitize\" class=\"e1tag-style6\" [style]=\"componentProperties.style.style6\"></div>\r\n          </ng-template>\r\n        </kendo-chart-series-item-tooltip>\r\n      </kendo-chart-series-item>\r\n    </kendo-chart-series>\r\n  </kendo-chart>\r\n</div>\r\n", styles: [""], components: [{ type: i2.ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick"], exportAs: ["kendoChart"] }, { type: i2.TitleComponent, selector: "kendo-chart-title", inputs: ["align", "background", "border", "color", "font", "margin", "padding", "position", "text", "visible"] }, { type: i2.LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title"] }, { type: i2.TooltipComponent, selector: "kendo-chart-tooltip", inputs: ["background", "border", "color", "font", "format", "opacity", "padding", "shared", "visible"] }, { type: i2.SeriesComponent, selector: "kendo-chart-series" }, { type: i2.SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "style", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { type: i2.SeriesTooltipComponent, selector: "kendo-chart-series-item-tooltip", inputs: ["background", "border", "color", "font", "format", "padding", "visible"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.SeriesTooltipTemplateDirective, selector: "[kendoChartSeriesTooltipTemplate]" }], pipes: { "htmlSanitize": i4.HtmlSanitizePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZchartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zchart', template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-chart [renderAs]=\"options.renderAs\" [pannable]=\"options.pannable\" [zoomable]=\"options.zoomable\"\r\n               [categoryAxis]=\"options.categoryAxis\"\r\n               (render)=\"onRender($event)\"\r\n               (axisLabelClick)=\"onAxisLabelClick($event)\"\r\n               (legendItemClick)=\"onLegendItemClick($event)\"\r\n               (legendItemHover)=\"onLegendItemHover($event)\"\r\n               (plotAreaClick)=\"onPlotAreaClick($event)\"\r\n               (plotAreaHover)=\"onPlotAreaHover($event)\"\r\n               (seriesClick)=\"onSeriesClick($event)\"\r\n               (seriesHover)=\"onSeriesHover($event)\"\r\n               class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chart-title *ngIf=\"options.title\" [text]=\"options.title\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\"></kendo-chart-title>\r\n    <kendo-chart-legend [position]=\"options.legendPosition\" [orientation]=\"options.legendOrientation\" class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></kendo-chart-legend>\r\n    <kendo-chart-tooltip [format]=\"options.tooltipFormat\" class=\"e1tag-style4\" [style]=\"componentProperties.style.style4\"></kendo-chart-tooltip>\r\n    <kendo-chart-series class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">\r\n      <kendo-chart-series-item *ngFor=\"let item of options.series\"\r\n                               [aggregate]=\"options.aggregateType\"\r\n                               [type]=\"item.type || options.dataType\" [style]=\"item.style || options.dataStyle\"\r\n                               [color]=\"item.color || options.color\"\r\n                               [labels]=\"item.labels || options.labels\"\r\n                               [field]=\"options.dataField\" [categoryField]=\"options.categoryField\"\r\n                               [data]=\"item.data\" [name]=\"item.name\">\r\n        <kendo-chart-series-item-tooltip kendoChartSeriesTooltipTemplate *ngIf=\"options.customTooltipFunc\" [background]=\"options.customTooltipOptions.background\">\r\n          <ng-template let-value=\"value\" let-category=\"category\">\r\n            <div [innerHTML]=\"getToolTip(value, category) | htmlSanitize\" class=\"e1tag-style6\" [style]=\"componentProperties.style.style6\"></div>\r\n          </ng-template>\r\n        </kendo-chart-series-item-tooltip>\r\n      </kendo-chart-series-item>\r\n    </kendo-chart-series>\r\n  </kendo-chart>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }]; } });

package/esm2020/lib/zcheckbox/zcheckbox.component.mjs

@@ -30,9 +30,9 @@ export class ZcheckboxComponent extends InputFieldBase {
         return false;
     }
 }
-ZcheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcheckboxComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZcheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZcheckboxComponent, selector: "app-zcheckbox", viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zcheckbox-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-checkbox *ngIf=\"!data.UseKendoSwitch && isMobileScreen()\" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                color=\"primary\"\r\n                [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (ionChange)=\"onChange($event, $event.detail.checked)\" [style]=\"componentProperties.style.style1\"\r\n                class=\"e1tag-style1\"></ion-checkbox>\r\n  <!--Need to upgrade to latest kendo lib for the checkbox disabled to work-->\r\n  <div class=\"temp-for-k-checkbox\" *ngIf=\"!data.UseKendoSwitch && !isMobileScreen()\">\r\n    <input *ngIf=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\" disabled\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n    <input *ngIf=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n  </div>\r\n  <kendo-switch *ngIf=\"data.UseKendoSwitch \" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                [size]=\"data.Size ? data.Size : 'small'\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\" #checkbox>\r\n  </kendo-switch>\r\n</div>\r\n", styles: [".ionItem{display:flex;flex-flow:row wrap}.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)}.temp-for-k-checkbox{margin-top:4px}:host ::ng-deep ion-item .k-checkbox{margin:6px 0 0 1.5px;height:22px;width:22px}:host ::ng-deep ion-item .k-checkbox:checked,:host ::ng-deep ion-item .k-checkbox.k-checked{margin:6px 0 0 1.5px;height:22px;width:22px;background-color:var(--ion-color-primary);border:0px;outline:0}:host ::ng-deep ion-item .divcheckbox{justify-content:space-between;order:1}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container{background-color:var(--ion-color-primary)}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container:hover,:host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-hover :host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-state-hover{background-color:var(--ion-color-primary-shade)}\n"], components: [{ type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { type: i3.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcheckboxComponent, decorators: [{
+ZcheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcheckboxComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ZcheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZcheckboxComponent, selector: "app-zcheckbox", viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zcheckbox-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-checkbox *ngIf=\"!data.UseKendoSwitch && isMobileScreen()\" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                color=\"primary\"\r\n                [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (ionChange)=\"onChange($event, $event.detail.checked)\" [style]=\"componentProperties.style.style1\"\r\n                class=\"e1tag-style1\"></ion-checkbox>\r\n  <!--Need to upgrade to latest kendo lib for the checkbox disabled to work-->\r\n  <div class=\"temp-for-k-checkbox\" *ngIf=\"!data.UseKendoSwitch && !isMobileScreen()\">\r\n    <input *ngIf=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\" disabled\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n    <input *ngIf=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n  </div>\r\n  <kendo-switch *ngIf=\"data.UseKendoSwitch \" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                [size]=\"data.Size ? data.Size : 'small'\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\" #checkbox>\r\n  </kendo-switch>\r\n</div>\r\n", styles: [".ionItem{display:flex;flex-flow:row wrap}.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)}.temp-for-k-checkbox{margin-top:4px}:host ::ng-deep ion-item .k-checkbox{margin:6px 0 0 1.5px;height:22px;width:22px}:host ::ng-deep ion-item .k-checkbox:checked,:host ::ng-deep ion-item .k-checkbox.k-checked{margin:6px 0 0 1.5px;height:22px;width:22px;background-color:var(--ion-color-primary);border:0px;outline:0}:host ::ng-deep ion-item .divcheckbox{justify-content:space-between;order:1}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container{background-color:var(--ion-color-primary)}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container:hover,:host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-hover :host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-state-hover{background-color:var(--ion-color-primary-shade)}\n"], components: [{ type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { type: i3.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zcheckbox", template: "<div [formGroup]=\"form\" class=\"zcheckbox-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-checkbox *ngIf=\"!data.UseKendoSwitch && isMobileScreen()\" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                color=\"primary\"\r\n                [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (ionChange)=\"onChange($event, $event.detail.checked)\" [style]=\"componentProperties.style.style1\"\r\n                class=\"e1tag-style1\"></ion-checkbox>\r\n  <!--Need to upgrade to latest kendo lib for the checkbox disabled to work-->\r\n  <div class=\"temp-for-k-checkbox\" *ngIf=\"!data.UseKendoSwitch && !isMobileScreen()\">\r\n    <input *ngIf=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\" disabled\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n    <input *ngIf=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n  </div>\r\n  <kendo-switch *ngIf=\"data.UseKendoSwitch \" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                [size]=\"data.Size ? data.Size : 'small'\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\" #checkbox>\r\n  </kendo-switch>\r\n</div>\r\n", styles: [".ionItem{display:flex;flex-flow:row wrap}.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)}.temp-for-k-checkbox{margin-top:4px}:host ::ng-deep ion-item .k-checkbox{margin:6px 0 0 1.5px;height:22px;width:22px}:host ::ng-deep ion-item .k-checkbox:checked,:host ::ng-deep ion-item .k-checkbox.k-checked{margin:6px 0 0 1.5px;height:22px;width:22px;background-color:var(--ion-color-primary);border:0px;outline:0}:host ::ng-deep ion-item .divcheckbox{justify-content:space-between;order:1}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container{background-color:var(--ion-color-primary)}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container:hover,:host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-hover :host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-state-hover{background-color:var(--ion-color-primary-shade)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }]; }, propDecorators: { checkbox: [{

package/esm2020/lib/zchip/zchip.component.mjs

@@ -107,9 +107,9 @@ export class ZChipComponent extends InputFieldBase {
         this.dataSource.splice(index, 1);
     }
 }
-ZChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZChipComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-ZChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZChipComponent, selector: "app-zchip", viewQueries: [{ propertyName: "chipList", first: true, predicate: ChipListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div kendoTooltip class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chip-list [selection]=\"data.Multiple ? 'multiple' : 'single'\"\r\n      (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\"\r\n      class=\"e1tag-style2\">\r\n      <kendo-chip *ngFor=\"let chip of dataSource\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n        [removable]=\"chip.Removable\" (remove)=\"onRemove(chip)\"\r\n        (mouseover)=\"mouseover($event, chip)\" (contentClick)=\"onItemClick($event, chip)\"\r\n        [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <div class=\"e1-chip-content-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n          <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\" [style]=\"componentProperties.style.style5\"\r\n            class=\"e1tag-style5\"></div>\r\n          <!-- <div *ngIf=\"chip.Label\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{chip.Label}}</div> -->\r\n          <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"\r\n            [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></fa-icon>\r\n        </div>\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background:white;border:1px solid #d1d1d1}:host ::ng-deep kendo-chip-list .k-chip-filled.k-selected,:host ::ng-deep kendo-chip-list .k-chip.k-selected{background:rgba(var(--ion-color-primary-rgb),.2);color:#000;box-shadow:0 0 1px 1px #613b9a}.e1-chip-content-container{display:flex;gap:5px;margin:2px 4px}\n"], components: [{ type: i3.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i3.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i8.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": i9.HtmlSanitizePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZChipComponent, decorators: [{
+ZChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZChipComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
+ZChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZChipComponent, selector: "app-zchip", viewQueries: [{ propertyName: "chipList", first: true, predicate: ChipListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div kendoTooltip class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chip-list [selection]=\"data.Multiple ? 'multiple' : 'single'\"\r\n      (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\"\r\n      class=\"e1tag-style2\">\r\n      <kendo-chip *ngFor=\"let chip of dataSource\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n        [removable]=\"chip.Removable\" (remove)=\"onRemove(chip)\"\r\n        (mouseover)=\"mouseover($event, chip)\" (contentClick)=\"onItemClick($event, chip)\"\r\n        [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <div class=\"e1-chip-content-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n          <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\" [style]=\"componentProperties.style.style5\"\r\n            class=\"e1tag-style5\"></div>\r\n          <!-- <div *ngIf=\"chip.Label\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{chip.Label}}</div> -->\r\n          <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"\r\n            [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></fa-icon>\r\n        </div>\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background:white;border:1px solid #d1d1d1}:host ::ng-deep kendo-chip-list .k-chip-filled.k-selected,:host ::ng-deep kendo-chip-list .k-chip.k-selected{background:rgba(var(--ion-color-primary-rgb),.2);color:#000;box-shadow:0 0 1px 1px #613b9a}.e1-chip-content-container{display:flex;gap:5px;margin:2px 4px}\n"], components: [{ type: i3.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i3.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i8.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": i9.HtmlSanitizePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zchip', template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div kendoTooltip class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chip-list [selection]=\"data.Multiple ? 'multiple' : 'single'\"\r\n      (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\"\r\n      class=\"e1tag-style2\">\r\n      <kendo-chip *ngFor=\"let chip of dataSource\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n        [removable]=\"chip.Removable\" (remove)=\"onRemove(chip)\"\r\n        (mouseover)=\"mouseover($event, chip)\" (contentClick)=\"onItemClick($event, chip)\"\r\n        [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <div class=\"e1-chip-content-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n          <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\" [style]=\"componentProperties.style.style5\"\r\n            class=\"e1tag-style5\"></div>\r\n          <!-- <div *ngIf=\"chip.Label\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{chip.Label}}</div> -->\r\n          <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"\r\n            [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></fa-icon>\r\n        </div>\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background:white;border:1px solid #d1d1d1}:host ::ng-deep kendo-chip-list .k-chip-filled.k-selected,:host ::ng-deep kendo-chip-list .k-chip.k-selected{background:rgba(var(--ion-color-primary-rgb),.2);color:#000;box-shadow:0 0 1px 1px #613b9a}.e1-chip-content-container{display:flex;gap:5px;margin:2px 4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FontAweSomeService }]; }, propDecorators: { chipList: [{

package/esm2020/lib/zcodeeditor/zcodeeditor.component.mjs

@@ -151,9 +151,9 @@ export class ZcodeeditorComponent {
         });
     }
 }
-ZcodeeditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcodeeditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZcodeeditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZcodeeditorComponent, selector: "app-zcodeeditor", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label *ngIf=\"data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\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>\r\n  <!-- <div ace-editor\r\n       [(text)]=\"text\"\r\n       ></div> -->\r\n  <ace-editor [readOnly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" #editor [ngStyle]=\"getEditorStyle()\" (textChanged)=\"onTextChange($event)\" [text]=\"getValue() | editorfilter\" [theme]=\"theme\" [mode]=\"mode\"></ace-editor>\r\n\r\n    <!-- <ngx-monaco-editor #editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"></ngx-monaco-editor> -->\r\n  </div>\r\n\r\n</div>", styles: [""], components: [{ type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2.AceEditorComponent, selector: "ace-editor", inputs: ["style", "options", "readOnly", "theme", "mode", "value", "text", "autoUpdateContent", "durationBeforeCallback"], outputs: ["textChanged", "textChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "editorfilter": i5.EditorFilter } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcodeeditorComponent, decorators: [{
+ZcodeeditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcodeeditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZcodeeditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZcodeeditorComponent, selector: "app-zcodeeditor", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label *ngIf=\"data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\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>\r\n  <!-- <div ace-editor\r\n       [(text)]=\"text\"\r\n       ></div> -->\r\n  <ace-editor [readOnly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" #editor [ngStyle]=\"getEditorStyle()\" (textChanged)=\"onTextChange($event)\" [text]=\"getValue() | editorfilter\" [theme]=\"theme\" [mode]=\"mode\"></ace-editor>\r\n\r\n    <!-- <ngx-monaco-editor #editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"></ngx-monaco-editor> -->\r\n  </div>\r\n\r\n</div>", styles: [""], components: [{ type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2.AceEditorComponent, selector: "ace-editor", inputs: ["style", "options", "readOnly", "theme", "mode", "value", "text", "autoUpdateContent", "durationBeforeCallback"], outputs: ["textChanged", "textChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "editorfilter": i5.EditorFilter } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcodeeditorComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zcodeeditor", template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label *ngIf=\"data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\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>\r\n  <!-- <div ace-editor\r\n       [(text)]=\"text\"\r\n       ></div> -->\r\n  <ace-editor [readOnly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" #editor [ngStyle]=\"getEditorStyle()\" (textChanged)=\"onTextChange($event)\" [text]=\"getValue() | editorfilter\" [theme]=\"theme\" [mode]=\"mode\"></ace-editor>\r\n\r\n    <!-- <ngx-monaco-editor #editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"></ngx-monaco-editor> -->\r\n  </div>\r\n\r\n</div>", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{

package/esm2020/lib/zcodeeditor/zcodeeditor.pipe.mjs

@@ -48,9 +48,9 @@ export class EditorFilter {
         // cache = null; // Enable garbage collection
     }
 }
-EditorFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EditorFilter, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-EditorFilter.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EditorFilter, name: "editorfilter", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EditorFilter, decorators: [{
+EditorFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: EditorFilter, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+EditorFilter.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: EditorFilter, name: "editorfilter", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: EditorFilter, decorators: [{
             type: Pipe,
             args: [{
                     name: 'editorfilter',

package/esm2020/lib/zcolorpicker/zcolorpicker.component.mjs

@@ -35,9 +35,9 @@ export class ZcolorpickerComponent extends InputFieldBase {
         }
     }
 }
-ZcolorpickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcolorpickerComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-ZcolorpickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZcolorpickerComponent, selector: "app-zcolorpicker", viewQueries: [{ propertyName: "colorpicker", first: true, predicate: ["colorpicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zcolorpicker-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n      <kendo-colorpicker #colorpicker\r\n        [id]=\"data.Value\"\r\n        [formControlName]=\"data.Value\"\r\n        [style]=\"componentProperties.style.style1\"\r\n        [views]=\"view\"\r\n        [value]=\"value\"\r\n        [format] = \"format\"\r\n        [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        (valueChange) = \"changeColor($event)\"\r\n        (close)=\"onClose()\"\r\n        ></kendo-colorpicker>\r\n</div>\r\n", styles: [""], components: [{ type: i3.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcolorpickerComponent, decorators: [{
+ZcolorpickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcolorpickerComponent, deps: [{ token: i1.ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
+ZcolorpickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZcolorpickerComponent, selector: "app-zcolorpicker", viewQueries: [{ propertyName: "colorpicker", first: true, predicate: ["colorpicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zcolorpicker-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n      <kendo-colorpicker #colorpicker\r\n        [id]=\"data.Value\"\r\n        [formControlName]=\"data.Value\"\r\n        [style]=\"componentProperties.style.style1\"\r\n        [views]=\"view\"\r\n        [value]=\"value\"\r\n        [format] = \"format\"\r\n        [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        (valueChange) = \"changeColor($event)\"\r\n        (close)=\"onClose()\"\r\n        ></kendo-colorpicker>\r\n</div>\r\n", styles: [""], components: [{ type: i3.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcolorpickerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zcolorpicker", template: "<div [formGroup]=\"form\" class=\"zcolorpicker-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n      <kendo-colorpicker #colorpicker\r\n        [id]=\"data.Value\"\r\n        [formControlName]=\"data.Value\"\r\n        [style]=\"componentProperties.style.style1\"\r\n        [views]=\"view\"\r\n        [value]=\"value\"\r\n        [format] = \"format\"\r\n        [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        (valueChange) = \"changeColor($event)\"\r\n        (close)=\"onClose()\"\r\n        ></kendo-colorpicker>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }, { type: i2.FontAweSomeService }]; }, propDecorators: { colorpicker: [{

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

@@ -54,9 +54,9 @@ export class ZdaterangeComponent {
         });
     }
 }
-ZdaterangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdaterangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZdaterangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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", "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.4.0", ngImport: i0, type: ZdaterangeComponent, decorators: [{
+ZdaterangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdaterangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZdaterangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", 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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{

package/esm2020/lib/zdatetime/dateIonicFormatParser.pipe.mjs

@@ -28,9 +28,9 @@ export class DateIonicFormatParser {
             .replace("a", "A");
     }
 }
-DateIonicFormatParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateIonicFormatParser, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DateIonicFormatParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateIonicFormatParser, name: "dateFormatIonic" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateIonicFormatParser, decorators: [{
+DateIonicFormatParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DateIonicFormatParser, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DateIonicFormatParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DateIonicFormatParser, name: "dateFormatIonic" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DateIonicFormatParser, decorators: [{
             type: Pipe,
             args: [{
                     name: "dateFormatIonic",

package/esm2020/lib/zdatetime/dateIonicMinMaxDate.pipe.mjs

@@ -10,9 +10,9 @@ export class DateIonicMinMaxParser {
         return new Date(localTime).toISOString();
     }
 }
-DateIonicMinMaxParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateIonicMinMaxParser, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DateIonicMinMaxParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateIonicMinMaxParser, name: "dateMinMaxIonic" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateIonicMinMaxParser, decorators: [{
+DateIonicMinMaxParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DateIonicMinMaxParser, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DateIonicMinMaxParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DateIonicMinMaxParser, name: "dateMinMaxIonic" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DateIonicMinMaxParser, decorators: [{
             type: Pipe,
             args: [{
                     name: "dateMinMaxIonic",

package/esm2020/lib/zdatetime/dateKendoFormatParser.pipe.mjs

@@ -28,9 +28,9 @@ export class DateKendoFormatParser {
             .replace("A", "a");
     }
 }
-DateKendoFormatParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateKendoFormatParser, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DateKendoFormatParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateKendoFormatParser, name: "dateFormatKendo" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DateKendoFormatParser, decorators: [{
+DateKendoFormatParser.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DateKendoFormatParser, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DateKendoFormatParser.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DateKendoFormatParser, name: "dateFormatKendo" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DateKendoFormatParser, decorators: [{
             type: Pipe,
             args: [{
                     name: "dateFormatKendo",

package/esm2020/lib/zdatetime/dateParser.pipe.mjs

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

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

@@ -112,9 +112,9 @@ export class ZdatetimeComponent extends InputFieldBase {
         return false;
     }
 }
-ZdatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdatetimeComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZdatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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", "highlightedDates", "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", "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.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 } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdatetimeComponent, decorators: [{
+ZdatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdatetimeComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+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 } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", 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()\"\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"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }]; }, propDecorators: { datepicker: [{

package/esm2020/lib/zdiv/zdiv.component.mjs

@@ -70,9 +70,9 @@ export class ZdivComponent extends ContainerFieldBase {
         }
     }
 }
-ZdivComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdivComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZdivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZdivComponent, selector: "app-zdiv", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\" [ngClass]=\"data.Class\" (click)=\"onClick($event)\" #zdiv>\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of data.Value\"\r\n                    [field]=\"field\"\r\n                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zdiv\"></app-context-menu>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"], components: [{ type: i2.ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }, { type: i3.ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdivComponent, decorators: [{
+ZdivComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdivComponent, deps: [{ token: i1.ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+ZdivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZdivComponent, selector: "app-zdiv", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\" [ngClass]=\"data.Class\" (click)=\"onClick($event)\" #zdiv>\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of data.Value\"\r\n                    [field]=\"field\"\r\n                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zdiv\"></app-context-menu>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"], components: [{ type: i2.ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }, { type: i3.ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdivComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zdiv', template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\" [ngClass]=\"data.Class\" (click)=\"onClick($event)\" #zdiv>\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of data.Value\"\r\n                    [field]=\"field\"\r\n                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zdiv\"></app-context-menu>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ZComponentService }]; } });

package/esm2020/lib/zdiv/zdiv.pipe.mjs

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