mmhglobal-dynamicform 1.3.2 → 1.3.5

package/esm2020/lib/zquerybuilder/zquerybuilder.component.mjs

@@ -168,9 +168,9 @@ export class ZquerybuilderComponent {
         }
     }
 }
-ZquerybuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZquerybuilderComponent, deps: [{ token: i1.FieldService }, { token: i1.ResourceApiService }, { token: i1.WebApiService }], target: i0.ɵɵFactoryTarget.Component });
-ZquerybuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZquerybuilderComponent, selector: "app-zquerybuilder", inputs: { classNames: "classNames", data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: QueryBuilderComponent, descendants: true }], ngImport: i0, template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\"\r\n             *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n              color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"qbcontainer\">\r\n    <query-builder [(ngModel)]='queryCtrl'\r\n                   [(config)]='currentConfig'\r\n                   [allowRuleset]='allowRuleset'\r\n                   [allowCollapse]='allowCollapse'\r\n                   [persistValueOnFieldChange]='persistValueOnFieldChange'>\r\n      <!--AND OR Swtich-->\r\n      <ng-container *querySwitchGroup=\"let ruleset; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"ruleset.condition\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"conditionList\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"text-transform: uppercase;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Rule RuleSet Remove Rule Set Button-->\r\n      <ng-container *queryButtonGroup=\"let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet\">\r\n        <!--Add Rule Button-->\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRule()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add</span>\r\n        </ion-button>\r\n        <!--Add RuleSet Button-->\r\n        <ion-button *ngIf=\"addRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add Rule Set</span>\r\n        </ion-button>\r\n        <!--Remove RuleSet Button-->\r\n        <ion-button *ngIf=\"removeRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'times'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule Set</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Remove Rule Button-->\r\n      <ng-container *queryRemoveButton=\"let rule; let removeRule=removeRule\">\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRule(rule)\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'minus'\"\r\n                   style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Name dropdown-->\r\n      <ng-container *queryField=\"let rule; let fields=fields; let onChange=onChange; let getFields=getFields\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.field\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getFields(rule.entity)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Operator dropdown-->\r\n      <ng-container *queryOperator=\"let rule; let operators=operators; let onChange=onChange\" style=\"padding:10px\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.operator\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getOperators(operators, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Text Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'string'; let onChange=onChange\">\r\n        <kendo-textbox [(ngModel)]=\"rule.value\"\r\n                       (ngModelChange)=\"onChange()\"\r\n                       [clearButton]=\"true\"\r\n                       [disabled]=\"isDisabled\"\r\n                       class=\"customTextbox\">\r\n        </kendo-textbox>\r\n      </ng-container>\r\n      <!--TextArea Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'textarea'; let onChange=onChange\">\r\n        <kendo-textarea [(ngModel)]=\"rule.value\"\r\n                        (ngModelChange)=\"onChange()\"\r\n                        [rows]=\"5\"\r\n                        [cols]=\"40\"\r\n                        resizable=\"none\"\r\n                        [disabled]=\"isDisabled\">\r\n        </kendo-textarea>\r\n      </ng-container>\r\n      <!--Number Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'number'; let onChange=onChange\">\r\n        <kendo-numerictextbox [(ngModel)]=\"rule.value\"\r\n                              (ngModelChange)=\"onChange()\"\r\n                              [value]=\"value\"\r\n                              [decimals]=\"0\"\r\n                              [disabled]=\"isDisabled\">\r\n        </kendo-numerictextbox>\r\n      </ng-container>\r\n      <!--Date Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'date'; let onChange=onChange\">\r\n        <kendo-datepicker [(ngModel)]=\"rule.value\"\r\n                          (ngModelChange)=\"onChange()\"\r\n                          calendarType=\"classic\"\r\n                          [value]=\"value\"\r\n                          [disabled]=\"isDisabled\">\r\n        </kendo-datepicker>\r\n      </ng-container>\r\n      <!--Category Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'category'; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.value\"\r\n                            (ngModelChange)=\"onChange()\"\r\n                            [data]=\"getOptionList(options, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--DropDown MultiSelect Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'multiselect'; let onChange=onChange\">\r\n        <kendo-multiselect [(ngModel)]=\"rule.value\"\r\n                           (ngModelChange)=\"onChange()\"\r\n                           [data]=\"getOptionList(options, rule)\"\r\n                           textField=\"name\"\r\n                           valueField=\"value\"\r\n                           [value]=\"value\"\r\n                           [valuePrimitive]=\"true\"\r\n                           [autoClose]=\"false\"\r\n                           style=\"width:30%\"\r\n                           [disabled]=\"isDisabled\">\r\n        </kendo-multiselect>\r\n      </ng-container>\r\n      <!--Boolean Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'boolean'; let onChange=onChange\">\r\n        <input type=\"checkbox\"\r\n               [(ngModel)]=\"rule.value\"\r\n               (ngModelChange)=\"onChange()\"\r\n               class=\"customCheckBox\"\r\n               [disabled]=\"isDisabled\"\r\n               kendoCheckBox />\r\n      </ng-container>\r\n    </query-builder>\r\n    <br>\r\n    <div *ngIf=\"data.ShowQueryResult\">\r\n      <div>\r\n        <label>Query Result</label>\r\n      </div>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                [cols]=\"40\">{{queryCtrl | json}}</textarea>\r\n      <br>\r\n    </div>\r\n    <div style=\"width:100%\" slot=\"end\">\r\n      <ion-button *ngIf=\"!isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(true, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Apply</span>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(false, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Undo Apply</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}.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)}:host ::ng-deep query-builder .k-dropdown .k-dropdown-wrap,:host ::ng-deep query-builder .k-dropdowntree .k-dropdown-wrap{background-color:#fff}:host ::ng-deep query-builder .customTextbox{width:calc(100% - 440px);min-width:230px}:host ::ng-deep query-builder .customCheckBox{width:27px;height:27px}:host ::ng-deep query-builder .buttonadd{background-color:#479400;color:#fff;border-color:#479400}:host ::ng-deep query-builder .buttonremove{background-color:#f04141;color:#fff;border-color:#f04141;margin-top:0}.buttonapply{background-color:#5596e6;color:#fff;border-color:#5596e6}\n"], components: [{ type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.QueryBuilderComponent, selector: "query-builder", inputs: ["data", "allowRuleset", "allowCollapse", "emptyMessage", "config", "persistValueOnFieldChange", "value", "disabled", "classNames", "operatorMap", "parentValue", "parentArrowIconTemplate", "parentInputTemplates", "parentOperatorTemplate", "parentFieldTemplate", "parentEntityTemplate", "parentSwitchGroupTemplate", "parentButtonGroupTemplate", "parentRemoveButtonTemplate", "parentEmptyWarningTemplate", "parentChangeCallback", "parentTouchedCallback"] }, { type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["listHeight", "disabled", "readonly", "filterable", "ignoreCase", "delay", "tabindex", "id", "data", "value", "popupSettings", "itemDisabled", "virtual", "valuePrimitive", "tabIndex", "size", "rounded", "fillMode", "iconClass", "loading", "textField", "valueField", "defaultItem"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "size", "rounded", "fillMode", "tabIndex", "successIcon", "errorIcon", "clearButtonIcon", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i6.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "tabindex", "resizable", "tabIndex", "size", "rounded", "fillMode", "rows", "cols", "maxlength"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i6.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "decimals", "step", "spinners", "rangeValidation", "tabindex", "changeValueOnScroll", "selectOnFocus", "value", "format", "tabIndex", "size", "rounded", "fillMode", "max", "min", "placeholder", "maxlength"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i7.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "format", "twoDigitYearMax", "placeholder", "tabindex", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "popupSettings", "value", "tabIndex", "disabledDates", "size", "rounded", "fillMode", "formatPlaceholder"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i4.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "tabindex", "disabled", "readonly", "filterable", "listHeight", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "data", "value", "tabIndex", "size", "rounded", "fillMode", "placeholder", "itemDisabled", "checkboxes", "virtual", "popupSettings", "valuePrimitive", "loading", "valueField", "textField"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.QuerySwitchGroupDirective, selector: "[querySwitchGroup]" }, { type: i3.QueryButtonGroupDirective, selector: "[queryButtonGroup]" }, { type: i3.QueryRemoveButtonDirective, selector: "[queryRemoveButton]" }, { type: i3.QueryFieldDirective, selector: "[queryField]" }, { type: i3.QueryOperatorDirective, selector: "[queryOperator]" }, { type: i3.QueryInputDirective, selector: "[queryInput]", inputs: ["queryInputType"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }], pipes: { "json": i8.JsonPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZquerybuilderComponent, decorators: [{
+ZquerybuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZquerybuilderComponent, deps: [{ token: i1.FieldService }, { token: i1.ResourceApiService }, { token: i1.WebApiService }], target: i0.ɵɵFactoryTarget.Component });
+ZquerybuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZquerybuilderComponent, selector: "app-zquerybuilder", inputs: { classNames: "classNames", data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: QueryBuilderComponent, descendants: true }], ngImport: i0, template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\"\r\n             *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n              color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"qbcontainer\">\r\n    <query-builder [(ngModel)]='queryCtrl'\r\n                   [(config)]='currentConfig'\r\n                   [allowRuleset]='allowRuleset'\r\n                   [allowCollapse]='allowCollapse'\r\n                   [persistValueOnFieldChange]='persistValueOnFieldChange'>\r\n      <!--AND OR Swtich-->\r\n      <ng-container *querySwitchGroup=\"let ruleset; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"ruleset.condition\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"conditionList\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"text-transform: uppercase;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Rule RuleSet Remove Rule Set Button-->\r\n      <ng-container *queryButtonGroup=\"let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet\">\r\n        <!--Add Rule Button-->\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRule()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add</span>\r\n        </ion-button>\r\n        <!--Add RuleSet Button-->\r\n        <ion-button *ngIf=\"addRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add Rule Set</span>\r\n        </ion-button>\r\n        <!--Remove RuleSet Button-->\r\n        <ion-button *ngIf=\"removeRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'times'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule Set</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Remove Rule Button-->\r\n      <ng-container *queryRemoveButton=\"let rule; let removeRule=removeRule\">\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRule(rule)\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'minus'\"\r\n                   style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Name dropdown-->\r\n      <ng-container *queryField=\"let rule; let fields=fields; let onChange=onChange; let getFields=getFields\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.field\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getFields(rule.entity)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Operator dropdown-->\r\n      <ng-container *queryOperator=\"let rule; let operators=operators; let onChange=onChange\" style=\"padding:10px\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.operator\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getOperators(operators, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Text Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'string'; let onChange=onChange\">\r\n        <kendo-textbox [(ngModel)]=\"rule.value\"\r\n                       (ngModelChange)=\"onChange()\"\r\n                       [clearButton]=\"true\"\r\n                       [disabled]=\"isDisabled\"\r\n                       class=\"customTextbox\">\r\n        </kendo-textbox>\r\n      </ng-container>\r\n      <!--TextArea Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'textarea'; let onChange=onChange\">\r\n        <kendo-textarea [(ngModel)]=\"rule.value\"\r\n                        (ngModelChange)=\"onChange()\"\r\n                        [rows]=\"5\"\r\n                        [cols]=\"40\"\r\n                        resizable=\"none\"\r\n                        [disabled]=\"isDisabled\">\r\n        </kendo-textarea>\r\n      </ng-container>\r\n      <!--Number Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'number'; let onChange=onChange\">\r\n        <kendo-numerictextbox [(ngModel)]=\"rule.value\"\r\n                              (ngModelChange)=\"onChange()\"\r\n                              [value]=\"value\"\r\n                              [decimals]=\"0\"\r\n                              [disabled]=\"isDisabled\">\r\n        </kendo-numerictextbox>\r\n      </ng-container>\r\n      <!--Date Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'date'; let onChange=onChange\">\r\n        <kendo-datepicker [(ngModel)]=\"rule.value\"\r\n                          (ngModelChange)=\"onChange()\"\r\n                          calendarType=\"classic\"\r\n                          [value]=\"value\"\r\n                          [disabled]=\"isDisabled\">\r\n        </kendo-datepicker>\r\n      </ng-container>\r\n      <!--Category Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'category'; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.value\"\r\n                            (ngModelChange)=\"onChange()\"\r\n                            [data]=\"getOptionList(options, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--DropDown MultiSelect Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'multiselect'; let onChange=onChange\">\r\n        <kendo-multiselect [(ngModel)]=\"rule.value\"\r\n                           (ngModelChange)=\"onChange()\"\r\n                           [data]=\"getOptionList(options, rule)\"\r\n                           textField=\"name\"\r\n                           valueField=\"value\"\r\n                           [value]=\"value\"\r\n                           [valuePrimitive]=\"true\"\r\n                           [autoClose]=\"false\"\r\n                           style=\"width:30%\"\r\n                           [disabled]=\"isDisabled\">\r\n        </kendo-multiselect>\r\n      </ng-container>\r\n      <!--Boolean Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'boolean'; let onChange=onChange\">\r\n        <input type=\"checkbox\"\r\n               [(ngModel)]=\"rule.value\"\r\n               (ngModelChange)=\"onChange()\"\r\n               class=\"customCheckBox\"\r\n               [disabled]=\"isDisabled\"\r\n               kendoCheckBox />\r\n      </ng-container>\r\n    </query-builder>\r\n    <br>\r\n    <div *ngIf=\"data.ShowQueryResult\">\r\n      <div>\r\n        <label>Query Result</label>\r\n      </div>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                [cols]=\"40\">{{queryCtrl | json}}</textarea>\r\n      <br>\r\n    </div>\r\n    <div style=\"width:100%\" slot=\"end\">\r\n      <ion-button *ngIf=\"!isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(true, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Apply</span>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(false, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Undo Apply</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}.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)}:host ::ng-deep query-builder .k-dropdown .k-dropdown-wrap,:host ::ng-deep query-builder .k-dropdowntree .k-dropdown-wrap{background-color:#fff}:host ::ng-deep query-builder .customTextbox{width:calc(100% - 440px);min-width:230px}:host ::ng-deep query-builder .customCheckBox{width:27px;height:27px}:host ::ng-deep query-builder .buttonadd{background-color:#479400;color:#fff;border-color:#479400}:host ::ng-deep query-builder .buttonremove{background-color:#f04141;color:#fff;border-color:#f04141;margin-top:0}.buttonapply{background-color:#5596e6;color:#fff;border-color:#5596e6}\n"], components: [{ type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.QueryBuilderComponent, selector: "query-builder", inputs: ["data", "allowRuleset", "allowCollapse", "emptyMessage", "config", "persistValueOnFieldChange", "value", "disabled", "classNames", "operatorMap", "parentValue", "parentArrowIconTemplate", "parentInputTemplates", "parentOperatorTemplate", "parentFieldTemplate", "parentEntityTemplate", "parentSwitchGroupTemplate", "parentButtonGroupTemplate", "parentRemoveButtonTemplate", "parentEmptyWarningTemplate", "parentChangeCallback", "parentTouchedCallback"] }, { type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["listHeight", "disabled", "readonly", "filterable", "ignoreCase", "delay", "tabindex", "id", "data", "value", "popupSettings", "itemDisabled", "virtual", "valuePrimitive", "tabIndex", "size", "rounded", "fillMode", "iconClass", "loading", "textField", "valueField", "defaultItem"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "size", "rounded", "fillMode", "tabIndex", "successIcon", "errorIcon", "clearButtonIcon", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i6.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "tabindex", "resizable", "tabIndex", "size", "rounded", "fillMode", "rows", "cols", "maxlength"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i6.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "decimals", "step", "spinners", "rangeValidation", "tabindex", "changeValueOnScroll", "selectOnFocus", "value", "format", "tabIndex", "size", "rounded", "fillMode", "max", "min", "placeholder", "maxlength"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i7.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "format", "twoDigitYearMax", "placeholder", "tabindex", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "popupSettings", "value", "tabIndex", "disabledDates", "size", "rounded", "fillMode", "formatPlaceholder"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i4.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "tabindex", "disabled", "readonly", "filterable", "listHeight", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "data", "value", "tabIndex", "size", "rounded", "fillMode", "placeholder", "itemDisabled", "checkboxes", "virtual", "popupSettings", "valuePrimitive", "loading", "valueField", "textField"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.QuerySwitchGroupDirective, selector: "[querySwitchGroup]" }, { type: i3.QueryButtonGroupDirective, selector: "[queryButtonGroup]" }, { type: i3.QueryRemoveButtonDirective, selector: "[queryRemoveButton]" }, { type: i3.QueryFieldDirective, selector: "[queryField]" }, { type: i3.QueryOperatorDirective, selector: "[queryOperator]" }, { type: i3.QueryInputDirective, selector: "[queryInput]", inputs: ["queryInputType"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }], pipes: { "json": i8.JsonPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZquerybuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zquerybuilder', template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\"\r\n             *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n              color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"qbcontainer\">\r\n    <query-builder [(ngModel)]='queryCtrl'\r\n                   [(config)]='currentConfig'\r\n                   [allowRuleset]='allowRuleset'\r\n                   [allowCollapse]='allowCollapse'\r\n                   [persistValueOnFieldChange]='persistValueOnFieldChange'>\r\n      <!--AND OR Swtich-->\r\n      <ng-container *querySwitchGroup=\"let ruleset; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"ruleset.condition\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"conditionList\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"text-transform: uppercase;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Rule RuleSet Remove Rule Set Button-->\r\n      <ng-container *queryButtonGroup=\"let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet\">\r\n        <!--Add Rule Button-->\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRule()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add</span>\r\n        </ion-button>\r\n        <!--Add RuleSet Button-->\r\n        <ion-button *ngIf=\"addRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add Rule Set</span>\r\n        </ion-button>\r\n        <!--Remove RuleSet Button-->\r\n        <ion-button *ngIf=\"removeRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'times'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule Set</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Remove Rule Button-->\r\n      <ng-container *queryRemoveButton=\"let rule; let removeRule=removeRule\">\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRule(rule)\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'minus'\"\r\n                   style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Name dropdown-->\r\n      <ng-container *queryField=\"let rule; let fields=fields; let onChange=onChange; let getFields=getFields\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.field\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getFields(rule.entity)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Operator dropdown-->\r\n      <ng-container *queryOperator=\"let rule; let operators=operators; let onChange=onChange\" style=\"padding:10px\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.operator\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getOperators(operators, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Text Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'string'; let onChange=onChange\">\r\n        <kendo-textbox [(ngModel)]=\"rule.value\"\r\n                       (ngModelChange)=\"onChange()\"\r\n                       [clearButton]=\"true\"\r\n                       [disabled]=\"isDisabled\"\r\n                       class=\"customTextbox\">\r\n        </kendo-textbox>\r\n      </ng-container>\r\n      <!--TextArea Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'textarea'; let onChange=onChange\">\r\n        <kendo-textarea [(ngModel)]=\"rule.value\"\r\n                        (ngModelChange)=\"onChange()\"\r\n                        [rows]=\"5\"\r\n                        [cols]=\"40\"\r\n                        resizable=\"none\"\r\n                        [disabled]=\"isDisabled\">\r\n        </kendo-textarea>\r\n      </ng-container>\r\n      <!--Number Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'number'; let onChange=onChange\">\r\n        <kendo-numerictextbox [(ngModel)]=\"rule.value\"\r\n                              (ngModelChange)=\"onChange()\"\r\n                              [value]=\"value\"\r\n                              [decimals]=\"0\"\r\n                              [disabled]=\"isDisabled\">\r\n        </kendo-numerictextbox>\r\n      </ng-container>\r\n      <!--Date Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'date'; let onChange=onChange\">\r\n        <kendo-datepicker [(ngModel)]=\"rule.value\"\r\n                          (ngModelChange)=\"onChange()\"\r\n                          calendarType=\"classic\"\r\n                          [value]=\"value\"\r\n                          [disabled]=\"isDisabled\">\r\n        </kendo-datepicker>\r\n      </ng-container>\r\n      <!--Category Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'category'; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.value\"\r\n                            (ngModelChange)=\"onChange()\"\r\n                            [data]=\"getOptionList(options, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--DropDown MultiSelect Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'multiselect'; let onChange=onChange\">\r\n        <kendo-multiselect [(ngModel)]=\"rule.value\"\r\n                           (ngModelChange)=\"onChange()\"\r\n                           [data]=\"getOptionList(options, rule)\"\r\n                           textField=\"name\"\r\n                           valueField=\"value\"\r\n                           [value]=\"value\"\r\n                           [valuePrimitive]=\"true\"\r\n                           [autoClose]=\"false\"\r\n                           style=\"width:30%\"\r\n                           [disabled]=\"isDisabled\">\r\n        </kendo-multiselect>\r\n      </ng-container>\r\n      <!--Boolean Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'boolean'; let onChange=onChange\">\r\n        <input type=\"checkbox\"\r\n               [(ngModel)]=\"rule.value\"\r\n               (ngModelChange)=\"onChange()\"\r\n               class=\"customCheckBox\"\r\n               [disabled]=\"isDisabled\"\r\n               kendoCheckBox />\r\n      </ng-container>\r\n    </query-builder>\r\n    <br>\r\n    <div *ngIf=\"data.ShowQueryResult\">\r\n      <div>\r\n        <label>Query Result</label>\r\n      </div>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                [cols]=\"40\">{{queryCtrl | json}}</textarea>\r\n      <br>\r\n    </div>\r\n    <div style=\"width:100%\" slot=\"end\">\r\n      <ion-button *ngIf=\"!isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(true, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Apply</span>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(false, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Undo Apply</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}.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)}:host ::ng-deep query-builder .k-dropdown .k-dropdown-wrap,:host ::ng-deep query-builder .k-dropdowntree .k-dropdown-wrap{background-color:#fff}:host ::ng-deep query-builder .customTextbox{width:calc(100% - 440px);min-width:230px}:host ::ng-deep query-builder .customCheckBox{width:27px;height:27px}:host ::ng-deep query-builder .buttonadd{background-color:#479400;color:#fff;border-color:#479400}:host ::ng-deep query-builder .buttonremove{background-color:#f04141;color:#fff;border-color:#f04141;margin-top:0}.buttonapply{background-color:#5596e6;color:#fff;border-color:#5596e6}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FieldService }, { type: i1.ResourceApiService }, { type: i1.WebApiService }]; }, propDecorators: { queryBuilder: [{

package/esm2020/lib/zreport/zreport.component.mjs

@@ -89,9 +89,9 @@ export class ZreportComponent {
         }
     }
 }
-ZreportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZreportComponent, deps: [{ token: i1.ResourceApiService }], target: i0.ɵɵFactoryTarget.Component });
-ZreportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZreportComponent, selector: "app-zreport", inputs: { data: "data", group: "group" }, viewQueries: [{ propertyName: "viewer", first: true, predicate: ["ReportViewer"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isVisible\" width=\"100%\" height=\"800px\">\r\n  <tr-viewer #ReportViewer\r\n             [containerStyle]=\"viewerContainerStyle\"\r\n             [serviceUrl]=\"resourceURL\"\r\n             [reportSource]=\"ReportSource\"\r\n             [viewMode]=\"'INTERACTIVE'\"\r\n             [scaleMode]=\"'SPECIFIC'\"\r\n             [pageMode]=\"'SINGLE_PAGE'\"\r\n             [scale]=\"1.0\"\r\n             [ready]=\"ready(this)\"\r\n             [exportBegin]=\"exportBegin(this)\"\r\n             [exportEnd]=\"exportEnd(this)\"\r\n             [viewerToolTipOpening]=\"viewerToolTipOpening\"\r\n             [enableAccessibility]=\"false\"\r\n             [pageReady] = \"resizeReportView()\"\r\n             [renderingEnd]=\"onRenderingEnd\">\r\n  </tr-viewer>\r\n</div>\r\n", styles: [""], components: [{ type: i2.TelerikReportViewerComponent, selector: "tr-viewer", inputs: ["id", "serviceUrl", "reportServer", "templateUrl", "initialPageAreaImageUrl", "reportSource", "sendEmail", "parameters", "scale", "scaleMode", "viewMode", "pageMode", "persistSession", "parameterEditors", "authenticationToken", "printMode", "selector", "disabledButtonClass", "checkedButtonClass", "enableAccessibility", "searchMetadataOnDemand", "parametersAreaVisible", "documentMapVisible", "ready", "error", "parametersAreaPosition", "documentMapAreaPosition", "exportBegin", "exportEnd", "sendEmailBegin", "sendEmailEnd", "pageReady", "printBegin", "printEnd", "renderingBegin", "renderingEnd", "updateUi", "interactiveActionExecuting", "interactiveActionEnter", "interactiveActionLeave", "viewerToolTipOpening", "containerStyle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZreportComponent, decorators: [{
+ZreportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZreportComponent, deps: [{ token: i1.ResourceApiService }], target: i0.ɵɵFactoryTarget.Component });
+ZreportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZreportComponent, selector: "app-zreport", inputs: { data: "data", group: "group" }, viewQueries: [{ propertyName: "viewer", first: true, predicate: ["ReportViewer"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isVisible\" width=\"100%\" height=\"800px\">\r\n  <tr-viewer #ReportViewer\r\n             [containerStyle]=\"viewerContainerStyle\"\r\n             [serviceUrl]=\"resourceURL\"\r\n             [reportSource]=\"ReportSource\"\r\n             [viewMode]=\"'INTERACTIVE'\"\r\n             [scaleMode]=\"'SPECIFIC'\"\r\n             [pageMode]=\"'SINGLE_PAGE'\"\r\n             [scale]=\"1.0\"\r\n             [ready]=\"ready(this)\"\r\n             [exportBegin]=\"exportBegin(this)\"\r\n             [exportEnd]=\"exportEnd(this)\"\r\n             [viewerToolTipOpening]=\"viewerToolTipOpening\"\r\n             [enableAccessibility]=\"false\"\r\n             [pageReady] = \"resizeReportView()\"\r\n             [renderingEnd]=\"onRenderingEnd\">\r\n  </tr-viewer>\r\n</div>\r\n", styles: [""], components: [{ type: i2.TelerikReportViewerComponent, selector: "tr-viewer", inputs: ["id", "serviceUrl", "reportServer", "templateUrl", "initialPageAreaImageUrl", "reportSource", "sendEmail", "parameters", "scale", "scaleMode", "viewMode", "pageMode", "persistSession", "parameterEditors", "authenticationToken", "printMode", "selector", "disabledButtonClass", "checkedButtonClass", "enableAccessibility", "searchMetadataOnDemand", "parametersAreaVisible", "documentMapVisible", "ready", "error", "parametersAreaPosition", "documentMapAreaPosition", "exportBegin", "exportEnd", "sendEmailBegin", "sendEmailEnd", "pageReady", "printBegin", "printEnd", "renderingBegin", "renderingEnd", "updateUi", "interactiveActionExecuting", "interactiveActionEnter", "interactiveActionLeave", "viewerToolTipOpening", "containerStyle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZreportComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zreport", encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"isVisible\" width=\"100%\" height=\"800px\">\r\n  <tr-viewer #ReportViewer\r\n             [containerStyle]=\"viewerContainerStyle\"\r\n             [serviceUrl]=\"resourceURL\"\r\n             [reportSource]=\"ReportSource\"\r\n             [viewMode]=\"'INTERACTIVE'\"\r\n             [scaleMode]=\"'SPECIFIC'\"\r\n             [pageMode]=\"'SINGLE_PAGE'\"\r\n             [scale]=\"1.0\"\r\n             [ready]=\"ready(this)\"\r\n             [exportBegin]=\"exportBegin(this)\"\r\n             [exportEnd]=\"exportEnd(this)\"\r\n             [viewerToolTipOpening]=\"viewerToolTipOpening\"\r\n             [enableAccessibility]=\"false\"\r\n             [pageReady] = \"resizeReportView()\"\r\n             [renderingEnd]=\"onRenderingEnd\">\r\n  </tr-viewer>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.ResourceApiService }]; }, propDecorators: { viewer: [{

package/esm2020/lib/zreport/zreport.config.mjs

@@ -108,9 +108,9 @@ export class ExportOptions {
         return null;
     }
 }
-ExportOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ExportOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExportOptions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ExportOptions, selector: "app-zreport", ngImport: i0, template: "<div *ngIf=\"isVisible\" width=\"100%\" height=\"800px\">\r\n  <tr-viewer #ReportViewer\r\n             [containerStyle]=\"viewerContainerStyle\"\r\n             [serviceUrl]=\"resourceURL\"\r\n             [reportSource]=\"ReportSource\"\r\n             [viewMode]=\"'INTERACTIVE'\"\r\n             [scaleMode]=\"'SPECIFIC'\"\r\n             [pageMode]=\"'SINGLE_PAGE'\"\r\n             [scale]=\"1.0\"\r\n             [ready]=\"ready(this)\"\r\n             [exportBegin]=\"exportBegin(this)\"\r\n             [exportEnd]=\"exportEnd(this)\"\r\n             [viewerToolTipOpening]=\"viewerToolTipOpening\"\r\n             [enableAccessibility]=\"false\"\r\n             [pageReady] = \"resizeReportView()\"\r\n             [renderingEnd]=\"onRenderingEnd\">\r\n  </tr-viewer>\r\n</div>\r\n", styles: [""], components: [{ type: i1.TelerikReportViewerComponent, selector: "tr-viewer", inputs: ["id", "serviceUrl", "reportServer", "templateUrl", "initialPageAreaImageUrl", "reportSource", "sendEmail", "parameters", "scale", "scaleMode", "viewMode", "pageMode", "persistSession", "parameterEditors", "authenticationToken", "printMode", "selector", "disabledButtonClass", "checkedButtonClass", "enableAccessibility", "searchMetadataOnDemand", "parametersAreaVisible", "documentMapVisible", "ready", "error", "parametersAreaPosition", "documentMapAreaPosition", "exportBegin", "exportEnd", "sendEmailBegin", "sendEmailEnd", "pageReady", "printBegin", "printEnd", "renderingBegin", "renderingEnd", "updateUi", "interactiveActionExecuting", "interactiveActionEnter", "interactiveActionLeave", "viewerToolTipOpening", "containerStyle"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ExportOptions, decorators: [{
+ExportOptions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExportOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ExportOptions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ExportOptions, selector: "app-zreport", ngImport: i0, template: "<div *ngIf=\"isVisible\" width=\"100%\" height=\"800px\">\r\n  <tr-viewer #ReportViewer\r\n             [containerStyle]=\"viewerContainerStyle\"\r\n             [serviceUrl]=\"resourceURL\"\r\n             [reportSource]=\"ReportSource\"\r\n             [viewMode]=\"'INTERACTIVE'\"\r\n             [scaleMode]=\"'SPECIFIC'\"\r\n             [pageMode]=\"'SINGLE_PAGE'\"\r\n             [scale]=\"1.0\"\r\n             [ready]=\"ready(this)\"\r\n             [exportBegin]=\"exportBegin(this)\"\r\n             [exportEnd]=\"exportEnd(this)\"\r\n             [viewerToolTipOpening]=\"viewerToolTipOpening\"\r\n             [enableAccessibility]=\"false\"\r\n             [pageReady] = \"resizeReportView()\"\r\n             [renderingEnd]=\"onRenderingEnd\">\r\n  </tr-viewer>\r\n</div>\r\n", styles: [""], components: [{ type: i1.TelerikReportViewerComponent, selector: "tr-viewer", inputs: ["id", "serviceUrl", "reportServer", "templateUrl", "initialPageAreaImageUrl", "reportSource", "sendEmail", "parameters", "scale", "scaleMode", "viewMode", "pageMode", "persistSession", "parameterEditors", "authenticationToken", "printMode", "selector", "disabledButtonClass", "checkedButtonClass", "enableAccessibility", "searchMetadataOnDemand", "parametersAreaVisible", "documentMapVisible", "ready", "error", "parametersAreaPosition", "documentMapAreaPosition", "exportBegin", "exportEnd", "sendEmailBegin", "sendEmailEnd", "pageReady", "printBegin", "printEnd", "renderingBegin", "renderingEnd", "updateUi", "interactiveActionExecuting", "interactiveActionEnter", "interactiveActionLeave", "viewerToolTipOpening", "containerStyle"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExportOptions, decorators: [{
             type: Component,
             args: [{ selector: "app-zreport", template: "<div *ngIf=\"isVisible\" width=\"100%\" height=\"800px\">\r\n  <tr-viewer #ReportViewer\r\n             [containerStyle]=\"viewerContainerStyle\"\r\n             [serviceUrl]=\"resourceURL\"\r\n             [reportSource]=\"ReportSource\"\r\n             [viewMode]=\"'INTERACTIVE'\"\r\n             [scaleMode]=\"'SPECIFIC'\"\r\n             [pageMode]=\"'SINGLE_PAGE'\"\r\n             [scale]=\"1.0\"\r\n             [ready]=\"ready(this)\"\r\n             [exportBegin]=\"exportBegin(this)\"\r\n             [exportEnd]=\"exportEnd(this)\"\r\n             [viewerToolTipOpening]=\"viewerToolTipOpening\"\r\n             [enableAccessibility]=\"false\"\r\n             [pageReady] = \"resizeReportView()\"\r\n             [renderingEnd]=\"onRenderingEnd\">\r\n  </tr-viewer>\r\n</div>\r\n", styles: [""] }]
         }] });

package/esm2020/lib/zscheduler/zscheduler.component.mjs

@@ -250,9 +250,9 @@ export class ZschedulerComponent {
         }
     }
 }
-ZschedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZschedulerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.StorageSessionService }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ZschedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZschedulerComponent, selector: "app-zscheduler", inputs: { data: "data", group: "group", form: "form", ngStyle: "ngStyle" }, 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\" 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  <kendo-scheduler *ngIf=\"!isLoading\" [kendoSchedulerBinding]=\"events\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\r\n    [selectedViewIndex]=\"selectedViewIndex\" [eventStyles]=\"getEventStyles\" [slotClass]=\"getSlotClass\" \r\n    (slotDblClick)=\"onSlotDblClick($event)\" (eventDblClick)=\"onEventDblClick($event)\" scrollTime=\"08:00\"\r\n    [style.height]=\"(!!data.Height ? [data.Height] : '600px')\">\r\n     <!-- [style.font-size]=\"(!!data.FontSize ? [data.FontSize] : '12px')\"> -->\r\n     \r\n     <!--Note: line-height same with [eventHeight]-->\r\n    <ng-template kendoSchedulerEventTemplate let-event>\r\n      <span style=\"margin-left: -5px;line-height: 25px;\">{{ event.title }}</span>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerToolbarTemplate let-selectedDate=\"selectedDate\">\r\n      <zschedulertoolbar [local]=\"local\" [selectedDate]=\"selectedDate\">\r\n      </zschedulertoolbar>\r\n      <ul kendoSchedulerToolbarViewSelector></ul>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerAllDaySlotTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: 'dd-MMM-yyyy' }}</strong>\r\n    </ng-template>\r\n    <ng-template kendoSchedulerDateHeaderTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: \"ccc\" }}</strong>\r\n    </ng-template>\r\n\r\n  \r\n    <!-- <kendo-scheduler-day-view startTime=\"08:00\">\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view startTime=\"08:00\">\r\n    </kendo-scheduler-week-view> -->\r\n\r\n    <kendo-scheduler-day-view>\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view>\r\n    </kendo-scheduler-week-view>\r\n\r\n    <kendo-scheduler-month-view [eventHeight]=\"25\"> \r\n    </kendo-scheduler-month-view>\r\n\r\n    <!-- <kendo-scheduler-timeline-view>\r\n    </kendo-scheduler-timeline-view> -->\r\n\r\n    <kendo-scheduler-agenda-view>\r\n    </kendo-scheduler-agenda-view>\r\n  </kendo-scheduler>\r\n\r\n</ion-item>", styles: ["ion-item{--padding-start: 0px;--inner-padding-end: 0px}\n"], components: [{ type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.SchedulerComponent, selector: "kendo-scheduler", inputs: ["editable", "selectable", "eventHeight", "columnWidth", "startTime", "endTime", "workDayStart", "workDayEnd", "slotDuration", "slotDivisions", "slotFill", "scrollTime", "currentTimeMarker", "highlightOngoingEvents", "isSlotSelected", "selectedViewIndex", "weekStart", "timezone", "events", "selectedDate", "modelFields", "min", "max", "showWorkHours", "workWeekStart", "workWeekEnd", "group", "resources", "loading", "slotClass", "eventClass", "eventStyles"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport"] }, { type: i4.ZSchedulerToolBarComponent, selector: "zschedulertoolbar", inputs: ["local", "selectedDate"] }, { type: i3.ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]" }, { type: i3.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { type: i3.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { type: i3.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "eventHeight"] }, { type: i3.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }], 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: i3.ShortcutsDirective, selector: "kendo-scheduler" }, { type: i3.DataBindingDirective, selector: "[kendoSchedulerBinding]", inputs: ["kendoSchedulerBinding"] }, { type: i3.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { type: i3.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { type: i3.AllDaySlotTemplateDirective, selector: "[kendoSchedulerAllDaySlotTemplate]" }, { type: i3.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }], pipes: { "kendoDate": i7.DatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZschedulerComponent, decorators: [{
+ZschedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZschedulerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.StorageSessionService }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
+ZschedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZschedulerComponent, selector: "app-zscheduler", inputs: { data: "data", group: "group", form: "form", ngStyle: "ngStyle" }, 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\" 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  <kendo-scheduler *ngIf=\"!isLoading\" [kendoSchedulerBinding]=\"events\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\r\n    [selectedViewIndex]=\"selectedViewIndex\" [eventStyles]=\"getEventStyles\" [slotClass]=\"getSlotClass\" \r\n    (slotDblClick)=\"onSlotDblClick($event)\" (eventDblClick)=\"onEventDblClick($event)\" scrollTime=\"08:00\"\r\n    [style.height]=\"(!!data.Height ? [data.Height] : '600px')\">\r\n     <!-- [style.font-size]=\"(!!data.FontSize ? [data.FontSize] : '12px')\"> -->\r\n     \r\n     <!--Note: line-height same with [eventHeight]-->\r\n    <ng-template kendoSchedulerEventTemplate let-event>\r\n      <span style=\"margin-left: -5px;line-height: 25px;\">{{ event.title }}</span>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerToolbarTemplate let-selectedDate=\"selectedDate\">\r\n      <zschedulertoolbar [local]=\"local\" [selectedDate]=\"selectedDate\">\r\n      </zschedulertoolbar>\r\n      <ul kendoSchedulerToolbarViewSelector></ul>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerAllDaySlotTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: 'dd-MMM-yyyy' }}</strong>\r\n    </ng-template>\r\n    <ng-template kendoSchedulerDateHeaderTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: \"ccc\" }}</strong>\r\n    </ng-template>\r\n\r\n  \r\n    <!-- <kendo-scheduler-day-view startTime=\"08:00\">\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view startTime=\"08:00\">\r\n    </kendo-scheduler-week-view> -->\r\n\r\n    <kendo-scheduler-day-view>\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view>\r\n    </kendo-scheduler-week-view>\r\n\r\n    <kendo-scheduler-month-view [eventHeight]=\"25\"> \r\n    </kendo-scheduler-month-view>\r\n\r\n    <!-- <kendo-scheduler-timeline-view>\r\n    </kendo-scheduler-timeline-view> -->\r\n\r\n    <kendo-scheduler-agenda-view>\r\n    </kendo-scheduler-agenda-view>\r\n  </kendo-scheduler>\r\n\r\n</ion-item>", styles: ["ion-item{--padding-start: 0px;--inner-padding-end: 0px}\n"], components: [{ type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.SchedulerComponent, selector: "kendo-scheduler", inputs: ["editable", "selectable", "eventHeight", "columnWidth", "startTime", "endTime", "workDayStart", "workDayEnd", "slotDuration", "slotDivisions", "slotFill", "scrollTime", "currentTimeMarker", "highlightOngoingEvents", "isSlotSelected", "selectedViewIndex", "weekStart", "timezone", "events", "selectedDate", "modelFields", "min", "max", "showWorkHours", "workWeekStart", "workWeekEnd", "group", "resources", "loading", "slotClass", "eventClass", "eventStyles"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport"] }, { type: i4.ZSchedulerToolBarComponent, selector: "zschedulertoolbar", inputs: ["local", "selectedDate"] }, { type: i3.ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]" }, { type: i3.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { type: i3.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { type: i3.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "eventHeight"] }, { type: i3.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }], 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: i3.ShortcutsDirective, selector: "kendo-scheduler" }, { type: i3.DataBindingDirective, selector: "[kendoSchedulerBinding]", inputs: ["kendoSchedulerBinding"] }, { type: i3.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { type: i3.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { type: i3.AllDaySlotTemplateDirective, selector: "[kendoSchedulerAllDaySlotTemplate]" }, { type: i3.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }], pipes: { "kendoDate": i7.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZschedulerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zscheduler", template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"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  <kendo-scheduler *ngIf=\"!isLoading\" [kendoSchedulerBinding]=\"events\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\r\n    [selectedViewIndex]=\"selectedViewIndex\" [eventStyles]=\"getEventStyles\" [slotClass]=\"getSlotClass\" \r\n    (slotDblClick)=\"onSlotDblClick($event)\" (eventDblClick)=\"onEventDblClick($event)\" scrollTime=\"08:00\"\r\n    [style.height]=\"(!!data.Height ? [data.Height] : '600px')\">\r\n     <!-- [style.font-size]=\"(!!data.FontSize ? [data.FontSize] : '12px')\"> -->\r\n     \r\n     <!--Note: line-height same with [eventHeight]-->\r\n    <ng-template kendoSchedulerEventTemplate let-event>\r\n      <span style=\"margin-left: -5px;line-height: 25px;\">{{ event.title }}</span>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerToolbarTemplate let-selectedDate=\"selectedDate\">\r\n      <zschedulertoolbar [local]=\"local\" [selectedDate]=\"selectedDate\">\r\n      </zschedulertoolbar>\r\n      <ul kendoSchedulerToolbarViewSelector></ul>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerAllDaySlotTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: 'dd-MMM-yyyy' }}</strong>\r\n    </ng-template>\r\n    <ng-template kendoSchedulerDateHeaderTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: \"ccc\" }}</strong>\r\n    </ng-template>\r\n\r\n  \r\n    <!-- <kendo-scheduler-day-view startTime=\"08:00\">\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view startTime=\"08:00\">\r\n    </kendo-scheduler-week-view> -->\r\n\r\n    <kendo-scheduler-day-view>\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view>\r\n    </kendo-scheduler-week-view>\r\n\r\n    <kendo-scheduler-month-view [eventHeight]=\"25\"> \r\n    </kendo-scheduler-month-view>\r\n\r\n    <!-- <kendo-scheduler-timeline-view>\r\n    </kendo-scheduler-timeline-view> -->\r\n\r\n    <kendo-scheduler-agenda-view>\r\n    </kendo-scheduler-agenda-view>\r\n  </kendo-scheduler>\r\n\r\n</ion-item>", styles: ["ion-item{--padding-start: 0px;--inner-padding-end: 0px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.StorageSessionService }, { type: i1.AuthService }]; }, propDecorators: { data: [{

package/esm2020/lib/zscheduler/zscheduler.toolbar.component.mjs

@@ -69,8 +69,8 @@ export class ZSchedulerToolBarComponent {
         }
     }
 }
-ZSchedulerToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZSchedulerToolBarComponent, deps: [{ token: i1.ToolbarService }], target: i0.ɵɵFactoryTarget.Component });
-ZSchedulerToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZSchedulerToolBarComponent, selector: "zschedulertoolbar", inputs: { local: "local", selectedDate: "selectedDate" }, host: { listeners: { "keydown": "keydown($event)", "document:click": "documentClick($event)" } }, ngImport: i0, template: `
+ZSchedulerToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZSchedulerToolBarComponent, deps: [{ token: i1.ToolbarService }], target: i0.ɵɵFactoryTarget.Component });
+ZSchedulerToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZSchedulerToolBarComponent, selector: "zschedulertoolbar", inputs: { local: "local", selectedDate: "selectedDate" }, host: { listeners: { "keydown": "keydown($event)", "document:click": "documentClick($event)" } }, ngImport: i0, template: `
     <div class="k-scheduler-navigation">
       <button class="k-nav-today" (click)="today()">
         Today
@@ -102,7 +102,7 @@ ZSchedulerToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         ></kendo-calendar>
     </kendo-popup>
   `, isInline: true, styles: [":host{margin:5px 0}\n"], components: [{ type: i2.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "positionMode", "offset", "anchor", "popupClass", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i3.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "rangeValidation", "selection", "disabled", "tabindex", "navigation", "activeView", "bottomView", "topView", "animateNavigation", "weekNumber", "focusedDate", "min", "max", "value", "tabIndex", "disabledDates", "type", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "kendoDate": i5.DatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZSchedulerToolBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZSchedulerToolBarComponent, decorators: [{
             type: Component,
             args: [{ selector: "zschedulertoolbar", template: `
     <div class="k-scheduler-navigation">

package/esm2020/lib/zselectmultiple/zselectmultiple.component.mjs

@@ -555,9 +555,9 @@ export class ZselectmultipleComponent {
         return ZComponentHelper.getFontAwesome(iconName);
     }
 }
-ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZselectmultipleComponent, deps: [{ token: i1.ResourceApiService }, { token: i1.WebApiService }, { token: i1.CacheService }], target: i0.ɵɵFactoryTarget.Component });
-ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: { data: "data", group: "group", form: "form", iconList: "iconList", buttonList: "buttonList" }, viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }], ngImport: i0, template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n\r\n  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n               [text]=\"tooltipsDisplayText\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n    <div style=\"flex-grow: 1;\">\r\n      <ionic-selectable #selectComponent item-content\r\n                        searchFailText=\"Nothing found :(\"\r\n                        headerColor=\"primary\"\r\n                        clearButtonText=\"Clear\"\r\n                        [(ngModel)]=\"group.zModel[data.Value]\"\r\n                        [id]=\"data.Value\"\r\n                        [items]=\"getItemsData()\"\r\n                        [itemValueField]=\"itemValueField\"\r\n                        [itemTextField]=\"itemTextField\"\r\n                        [canAddItem]=\"!!data.OnAddItem\"\r\n                        [canClear]=\"true\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [canSearch]=\"!data['disable-search']\"\r\n                        [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                        [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n                        [isMultiple]=\"data.Multiple\"\r\n                        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [shouldStoreItemValue]=\"true\"\r\n                        (onSearch)=\"onSearch($event)\"\r\n                        (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                        (onAddItem)=\"onAddItem($event)\"\r\n                        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate\r\n                     let-item=\"item\"\r\n                     let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\"\r\n                   class=\"isItemSelected\"\r\n                   size=\"sm\"\r\n                   [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n                   [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableCloseButtonTemplate>\r\n          <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n          <fa-icon [icon]=\"'times-circle'\" size=\"md\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n\r\n        <!--<ng-template ionicSelectableFooterTemplate>\r\n          <ion-toolbar>\r\n            <ion-row>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n                  Clear\r\n                </ion-button>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n                  OK\r\n                </ion-button>\r\n              </ion-col>\r\n            </ion-row>\r\n          </ion-toolbar>\r\n        </ng-template>-->\r\n      </ionic-selectable>\r\n    </div>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"tooltipsDisplayText\">\r\n      <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <!-- mobile tooltipsinfo below label-->\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <kendo-combobox *ngIf=\"!data.Multiple\"\r\n                      #comboboxComponent\r\n                      [data]=\"getItemsData()\"\r\n                      [valueField]=\"itemValueField\"\r\n                      [textField]=\"itemTextField\"\r\n                      [formControlName]=\"data.Value\"\r\n                      [valuePrimitive]=\"true\"\r\n                      [placeholder]=\"data.PlaceHolder\"\r\n                      [allowCustom]=\"allowCustomValue\"\r\n                      [suggest]=\"true\"\r\n                      [filterable]=\"!!data.HasInfiniteScroll\"\r\n                      [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                      [loading]=\"isLoading\"\r\n                      (valueChange)=\"onValueChange($event)\"\r\n                      (filterChange)=\"handleFilter($event)\"\r\n                      [virtual]=\"virtual\"\r\n                      (open)=\"handleOpen()\"\r\n                      (close)=\"handleClose()\"\r\n                      (blur)=\"handleBlur()\"\r\n                      style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n        <ng-template kendoTextBoxSuffixTemplate>\r\n\r\n          <!-- For Validation feature -->\r\n          <app-uivalidationmessage [group]=\"group\"\r\n                                   [data]=\"data\"\r\n                                   [form]=\"form\"\r\n                                   class=\"validation-icon\"></app-uivalidationmessage>\r\n        </ng-template>\r\n      </kendo-combobox>\r\n      <kendo-multiselect *ngIf=\"data.Multiple\"\r\n                         [data]=\"getItemsData()\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [textField]=\"itemTextField\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [valuePrimitive]=\"true\"\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [allowCustom]=\"allowCustomValue\"\r\n                         [filterable]=\"!!data.HasInfiniteScroll\"\r\n                         [checkboxes]=\"data.EnableCheckbox\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (valueChange)=\"onValueChange($event)\"\r\n                         (filterChange)=\"handleFilter($event)\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n      </kendo-multiselect>\r\n    </div>\r\n\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n        <span *ngIf=\"!!item && item.Color\"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n          <fa-icon [icon]=\"item.Icon\"\r\n                   [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <ion-button *ngFor=\"let button of buttonList; let i = button\"\r\n                fill=\"outline\"\r\n                color=\"dark\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                class=\"button-container\"\r\n                style=\"margin-top: 7px;\"\r\n                (click)=\"onIconClick(button.click)\"\r\n                [hidden]=\"!button.visible\"\r\n                [disabled]=\"group.isTriggered || button.disabled\">\r\n      <fa-icon *ngIf=\"button.icon\" [icon]=\"getFontAwesome(button.icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.text }}</span>\r\n    </ion-button>\r\n\r\n    <app-uivalidationmessage [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"></app-uivalidationmessage>\r\n\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n  </div>\r\n</ion-item>\r\n", styles: ["fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.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)}.divselectmultiple{justify-content:space-between;width:100%;color:#000}.tooltipsinfo-text{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;margin-left:5px}.tooltipsinfo-text-wide{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;width:100%;padding-bottom:5px}.tooltipsinfo-right{display:grid;grid-template-columns:1.2fr .05fr 1fr;grid-gap:0px}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}\n"], components: [{ type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6.UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }, { type: i7.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "valueNormalizer", "placeholder", "listHeight", "suggest", "clearButton", "disabled", "readonly", "tabindex", "filterable", "data", "value", "valuePrimitive", "popupSettings", "itemDisabled", "tabIndex", "virtual", "size", "rounded", "fillMode", "loading", "textField", "valueField", "iconClass"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i7.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "tabindex", "disabled", "readonly", "filterable", "listHeight", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "data", "value", "tabIndex", "size", "rounded", "fillMode", "placeholder", "itemDisabled", "checkboxes", "virtual", "popupSettings", "valuePrimitive", "loading", "valueField", "textField"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i4.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i4.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i4.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i10.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "showAfter", "callout", "closable", "offset", "tooltipTemplate", "showOn", "titleTemplate", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle"], exportAs: ["kendoTooltip"] }, { type: i11.OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i7.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i12.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZselectmultipleComponent, decorators: [{
+ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZselectmultipleComponent, deps: [{ token: i1.ResourceApiService }, { token: i1.WebApiService }, { token: i1.CacheService }], target: i0.ɵɵFactoryTarget.Component });
+ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: { data: "data", group: "group", form: "form", iconList: "iconList", buttonList: "buttonList" }, viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }], ngImport: i0, template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n\r\n  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n               [text]=\"tooltipsDisplayText\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n    <div style=\"flex-grow: 1;\">\r\n      <ionic-selectable #selectComponent item-content\r\n                        searchFailText=\"Nothing found :(\"\r\n                        headerColor=\"primary\"\r\n                        clearButtonText=\"Clear\"\r\n                        [(ngModel)]=\"group.zModel[data.Value]\"\r\n                        [id]=\"data.Value\"\r\n                        [items]=\"getItemsData()\"\r\n                        [itemValueField]=\"itemValueField\"\r\n                        [itemTextField]=\"itemTextField\"\r\n                        [canAddItem]=\"!!data.OnAddItem\"\r\n                        [canClear]=\"true\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [canSearch]=\"!data['disable-search']\"\r\n                        [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                        [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n                        [isMultiple]=\"data.Multiple\"\r\n                        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [shouldStoreItemValue]=\"true\"\r\n                        (onSearch)=\"onSearch($event)\"\r\n                        (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                        (onAddItem)=\"onAddItem($event)\"\r\n                        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate\r\n                     let-item=\"item\"\r\n                     let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\"\r\n                   class=\"isItemSelected\"\r\n                   size=\"sm\"\r\n                   [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n                   [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableCloseButtonTemplate>\r\n          <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n          <fa-icon [icon]=\"'times-circle'\" size=\"md\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n\r\n        <!--<ng-template ionicSelectableFooterTemplate>\r\n          <ion-toolbar>\r\n            <ion-row>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n                  Clear\r\n                </ion-button>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n                  OK\r\n                </ion-button>\r\n              </ion-col>\r\n            </ion-row>\r\n          </ion-toolbar>\r\n        </ng-template>-->\r\n      </ionic-selectable>\r\n    </div>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"tooltipsDisplayText\">\r\n      <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <!-- mobile tooltipsinfo below label-->\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <kendo-combobox *ngIf=\"!data.Multiple\"\r\n                      #comboboxComponent\r\n                      [data]=\"getItemsData()\"\r\n                      [valueField]=\"itemValueField\"\r\n                      [textField]=\"itemTextField\"\r\n                      [formControlName]=\"data.Value\"\r\n                      [valuePrimitive]=\"true\"\r\n                      [placeholder]=\"data.PlaceHolder\"\r\n                      [allowCustom]=\"allowCustomValue\"\r\n                      [suggest]=\"true\"\r\n                      [filterable]=\"!!data.HasInfiniteScroll\"\r\n                      [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                      [loading]=\"isLoading\"\r\n                      (valueChange)=\"onValueChange($event)\"\r\n                      (filterChange)=\"handleFilter($event)\"\r\n                      [virtual]=\"virtual\"\r\n                      (open)=\"handleOpen()\"\r\n                      (close)=\"handleClose()\"\r\n                      (blur)=\"handleBlur()\"\r\n                      style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n        <ng-template kendoTextBoxSuffixTemplate>\r\n\r\n          <!-- For Validation feature -->\r\n          <app-uivalidationmessage [group]=\"group\"\r\n                                   [data]=\"data\"\r\n                                   [form]=\"form\"\r\n                                   class=\"validation-icon\"></app-uivalidationmessage>\r\n        </ng-template>\r\n      </kendo-combobox>\r\n      <kendo-multiselect *ngIf=\"data.Multiple\"\r\n                         [data]=\"getItemsData()\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [textField]=\"itemTextField\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [valuePrimitive]=\"true\"\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [allowCustom]=\"allowCustomValue\"\r\n                         [filterable]=\"!!data.HasInfiniteScroll\"\r\n                         [checkboxes]=\"data.EnableCheckbox\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (valueChange)=\"onValueChange($event)\"\r\n                         (filterChange)=\"handleFilter($event)\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n      </kendo-multiselect>\r\n    </div>\r\n\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n        <span *ngIf=\"!!item && item.Color\"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n          <fa-icon [icon]=\"item.Icon\"\r\n                   [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <ion-button *ngFor=\"let button of buttonList; let i = button\"\r\n                fill=\"outline\"\r\n                color=\"dark\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                class=\"button-container\"\r\n                style=\"margin-top: 7px;\"\r\n                (click)=\"onIconClick(button.click)\"\r\n                [hidden]=\"!button.visible\"\r\n                [disabled]=\"group.isTriggered || button.disabled\">\r\n      <fa-icon *ngIf=\"button.icon\" [icon]=\"getFontAwesome(button.icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.text }}</span>\r\n    </ion-button>\r\n\r\n    <app-uivalidationmessage [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"></app-uivalidationmessage>\r\n\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n  </div>\r\n</ion-item>\r\n", styles: ["fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.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)}.divselectmultiple{justify-content:space-between;width:100%;color:#000}.tooltipsinfo-text{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;margin-left:5px}.tooltipsinfo-text-wide{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;width:100%;padding-bottom:5px}.tooltipsinfo-right{display:grid;grid-template-columns:1.2fr .05fr 1fr;grid-gap:0px}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}\n"], components: [{ type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6.UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }, { type: i7.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "valueNormalizer", "placeholder", "listHeight", "suggest", "clearButton", "disabled", "readonly", "tabindex", "filterable", "data", "value", "valuePrimitive", "popupSettings", "itemDisabled", "tabIndex", "virtual", "size", "rounded", "fillMode", "loading", "textField", "valueField", "iconClass"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i7.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "tabindex", "disabled", "readonly", "filterable", "listHeight", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "data", "value", "tabIndex", "size", "rounded", "fillMode", "placeholder", "itemDisabled", "checkboxes", "virtual", "popupSettings", "valuePrimitive", "loading", "valueField", "textField"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i4.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i4.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i4.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i10.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "showAfter", "callout", "closable", "offset", "tooltipTemplate", "showOn", "titleTemplate", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle"], exportAs: ["kendoTooltip"] }, { type: i11.OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i7.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i12.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZselectmultipleComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zselectmultiple", template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n\r\n  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n               [text]=\"tooltipsDisplayText\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n    <div style=\"flex-grow: 1;\">\r\n      <ionic-selectable #selectComponent item-content\r\n                        searchFailText=\"Nothing found :(\"\r\n                        headerColor=\"primary\"\r\n                        clearButtonText=\"Clear\"\r\n                        [(ngModel)]=\"group.zModel[data.Value]\"\r\n                        [id]=\"data.Value\"\r\n                        [items]=\"getItemsData()\"\r\n                        [itemValueField]=\"itemValueField\"\r\n                        [itemTextField]=\"itemTextField\"\r\n                        [canAddItem]=\"!!data.OnAddItem\"\r\n                        [canClear]=\"true\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [canSearch]=\"!data['disable-search']\"\r\n                        [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                        [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n                        [isMultiple]=\"data.Multiple\"\r\n                        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [shouldStoreItemValue]=\"true\"\r\n                        (onSearch)=\"onSearch($event)\"\r\n                        (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                        (onAddItem)=\"onAddItem($event)\"\r\n                        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate\r\n                     let-item=\"item\"\r\n                     let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\"\r\n                   class=\"isItemSelected\"\r\n                   size=\"sm\"\r\n                   [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n                   [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableCloseButtonTemplate>\r\n          <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n          <fa-icon [icon]=\"'times-circle'\" size=\"md\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n\r\n        <!--<ng-template ionicSelectableFooterTemplate>\r\n          <ion-toolbar>\r\n            <ion-row>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n                  Clear\r\n                </ion-button>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n                  OK\r\n                </ion-button>\r\n              </ion-col>\r\n            </ion-row>\r\n          </ion-toolbar>\r\n        </ng-template>-->\r\n      </ionic-selectable>\r\n    </div>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"tooltipsDisplayText\">\r\n      <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <!-- mobile tooltipsinfo below label-->\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <kendo-combobox *ngIf=\"!data.Multiple\"\r\n                      #comboboxComponent\r\n                      [data]=\"getItemsData()\"\r\n                      [valueField]=\"itemValueField\"\r\n                      [textField]=\"itemTextField\"\r\n                      [formControlName]=\"data.Value\"\r\n                      [valuePrimitive]=\"true\"\r\n                      [placeholder]=\"data.PlaceHolder\"\r\n                      [allowCustom]=\"allowCustomValue\"\r\n                      [suggest]=\"true\"\r\n                      [filterable]=\"!!data.HasInfiniteScroll\"\r\n                      [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                      [loading]=\"isLoading\"\r\n                      (valueChange)=\"onValueChange($event)\"\r\n                      (filterChange)=\"handleFilter($event)\"\r\n                      [virtual]=\"virtual\"\r\n                      (open)=\"handleOpen()\"\r\n                      (close)=\"handleClose()\"\r\n                      (blur)=\"handleBlur()\"\r\n                      style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n        <ng-template kendoTextBoxSuffixTemplate>\r\n\r\n          <!-- For Validation feature -->\r\n          <app-uivalidationmessage [group]=\"group\"\r\n                                   [data]=\"data\"\r\n                                   [form]=\"form\"\r\n                                   class=\"validation-icon\"></app-uivalidationmessage>\r\n        </ng-template>\r\n      </kendo-combobox>\r\n      <kendo-multiselect *ngIf=\"data.Multiple\"\r\n                         [data]=\"getItemsData()\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [textField]=\"itemTextField\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [valuePrimitive]=\"true\"\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [allowCustom]=\"allowCustomValue\"\r\n                         [filterable]=\"!!data.HasInfiniteScroll\"\r\n                         [checkboxes]=\"data.EnableCheckbox\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (valueChange)=\"onValueChange($event)\"\r\n                         (filterChange)=\"handleFilter($event)\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n      </kendo-multiselect>\r\n    </div>\r\n\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n        <span *ngIf=\"!!item && item.Color\"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n          <fa-icon [icon]=\"item.Icon\"\r\n                   [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <ion-button *ngFor=\"let button of buttonList; let i = button\"\r\n                fill=\"outline\"\r\n                color=\"dark\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                class=\"button-container\"\r\n                style=\"margin-top: 7px;\"\r\n                (click)=\"onIconClick(button.click)\"\r\n                [hidden]=\"!button.visible\"\r\n                [disabled]=\"group.isTriggered || button.disabled\">\r\n      <fa-icon *ngIf=\"button.icon\" [icon]=\"getFontAwesome(button.icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.text }}</span>\r\n    </ion-button>\r\n\r\n    <app-uivalidationmessage [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"></app-uivalidationmessage>\r\n\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n  </div>\r\n</ion-item>\r\n", styles: ["fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.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)}.divselectmultiple{justify-content:space-between;width:100%;color:#000}.tooltipsinfo-text{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;margin-left:5px}.tooltipsinfo-text-wide{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;width:100%;padding-bottom:5px}.tooltipsinfo-right{display:grid;grid-template-columns:1.2fr .05fr 1fr;grid-gap:0px}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ResourceApiService }, { type: i1.WebApiService }, { type: i1.CacheService }]; }, propDecorators: { data: [{

package/esm2020/lib/zselectmultiple/zselectmultiple.directive.mjs

@@ -16,9 +16,9 @@ export class OpenOnFocusDirective {
         }
     }
 }
-OpenOnFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: OpenOnFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-OpenOnFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.4", type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: { openOnFocus: "openOnFocus" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: OpenOnFocusDirective, decorators: [{
+OpenOnFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: OpenOnFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+OpenOnFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: { openOnFocus: "openOnFocus" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: OpenOnFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kendo-combobox[openOnFocus]'

package/esm2020/lib/ztab/ztab.component.mjs

@@ -169,9 +169,9 @@ export class ZtabComponent {
         return ZComponentHelper.getFontAwesome(iconName);
     }
 }
-ZtabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZtabComponent, deps: [{ token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ZtabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZtabComponent, selector: "app-ztab", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "tabstrip", first: true, predicate: ["kendoTabStripInstance"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">  \r\n  <kendo-tabstrip #kendoTabStripInstance [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\">\r\n    <kendo-tabstrip-tab *ngFor=\"let tab of state.currentTabs; let i = index\" [selected]=\"getSelectedTab(i)\" [disabled]=\"!tab.Visible\">\r\n      <ng-template kendoTabTitle *ngIf=\"tab.Visible\" >\r\n        <fa-icon *ngIf=\"!!tab.Icon\" [icon]=\"getFontAwesome(tab.Icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n        {{tab.Label}}\r\n        <ion-badge class=\"tab-item-counter\" color=\"danger\" *ngIf=\"!!tab.Counter\">{{tab.Counter}}</ion-badge>\r\n      </ng-template>\r\n      <ng-template kendoTabContent>       \r\n        <div class=\"ion-row\">\r\n          <app-zformcontrol \r\n            [ngClass]=\"group[field.isVisibleField] ? field.DivClass : \r\n              ((field.Visible === true) ?  field.DivClass : 'flex-hide')\" \r\n            *ngFor=\"let field of data.Value | tabfilter: tab.Index + ''\"\r\n            [field]=\"field\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\">\r\n          </app-zformcontrol>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-tabstrip-tab>\r\n  </kendo-tabstrip>\r\n</div>", styles: [".tab-item-counter{margin-left:4px}\n"], components: [{ type: i2.TabStripComponent, selector: "kendo-tabstrip", inputs: ["animate", "tabPosition", "keepTabContent", "closable", "closeIcon", "height", "scrollable", "tabAlignment"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i2.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["disabled", "title", "cssClass", "cssStyle", "selected", "closable", "closeIcon"], exportAs: ["kendoTabStripTab"] }, { 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.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i5.ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i2.TabContentDirective, selector: "[kendoTabContent]" }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "tabfilter": i7.TabFilter } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZtabComponent, decorators: [{
+ZtabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZtabComponent, deps: [{ token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
+ZtabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZtabComponent, selector: "app-ztab", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "tabstrip", first: true, predicate: ["kendoTabStripInstance"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">  \r\n  <kendo-tabstrip #kendoTabStripInstance [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\">\r\n    <kendo-tabstrip-tab *ngFor=\"let tab of state.currentTabs; let i = index\" [selected]=\"getSelectedTab(i)\" [disabled]=\"!tab.Visible\">\r\n      <ng-template kendoTabTitle *ngIf=\"tab.Visible\" >\r\n        <fa-icon *ngIf=\"!!tab.Icon\" [icon]=\"getFontAwesome(tab.Icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n        {{tab.Label}}\r\n        <ion-badge class=\"tab-item-counter\" color=\"danger\" *ngIf=\"!!tab.Counter\">{{tab.Counter}}</ion-badge>\r\n      </ng-template>\r\n      <ng-template kendoTabContent>       \r\n        <div class=\"ion-row\">\r\n          <app-zformcontrol \r\n            [ngClass]=\"group[field.isVisibleField] ? field.DivClass : \r\n              ((field.Visible === true) ?  field.DivClass : 'flex-hide')\" \r\n            *ngFor=\"let field of data.Value | tabfilter: tab.Index + ''\"\r\n            [field]=\"field\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\">\r\n          </app-zformcontrol>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-tabstrip-tab>\r\n  </kendo-tabstrip>\r\n</div>", styles: [".tab-item-counter{margin-left:4px}\n"], components: [{ type: i2.TabStripComponent, selector: "kendo-tabstrip", inputs: ["animate", "tabPosition", "keepTabContent", "closable", "closeIcon", "height", "scrollable", "tabAlignment"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i2.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["disabled", "title", "cssClass", "cssStyle", "selected", "closable", "closeIcon"], exportAs: ["kendoTabStripTab"] }, { 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.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i5.ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i2.TabContentDirective, selector: "[kendoTabContent]" }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "tabfilter": i7.TabFilter } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZtabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ztab', template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">  \r\n  <kendo-tabstrip #kendoTabStripInstance [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\">\r\n    <kendo-tabstrip-tab *ngFor=\"let tab of state.currentTabs; let i = index\" [selected]=\"getSelectedTab(i)\" [disabled]=\"!tab.Visible\">\r\n      <ng-template kendoTabTitle *ngIf=\"tab.Visible\" >\r\n        <fa-icon *ngIf=\"!!tab.Icon\" [icon]=\"getFontAwesome(tab.Icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n        {{tab.Label}}\r\n        <ion-badge class=\"tab-item-counter\" color=\"danger\" *ngIf=\"!!tab.Counter\">{{tab.Counter}}</ion-badge>\r\n      </ng-template>\r\n      <ng-template kendoTabContent>       \r\n        <div class=\"ion-row\">\r\n          <app-zformcontrol \r\n            [ngClass]=\"group[field.isVisibleField] ? field.DivClass : \r\n              ((field.Visible === true) ?  field.DivClass : 'flex-hide')\" \r\n            *ngFor=\"let field of data.Value | tabfilter: tab.Index + ''\"\r\n            [field]=\"field\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\">\r\n          </app-zformcontrol>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-tabstrip-tab>\r\n  </kendo-tabstrip>\r\n</div>", styles: [".tab-item-counter{margin-left:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.AuthService }]; }, propDecorators: { data: [{

package/esm2020/lib/ztab/ztab.pipe.mjs

@@ -14,9 +14,9 @@ export class TabFilter {
         });
     }
 }
-TabFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: TabFilter, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TabFilter.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: TabFilter, name: "tabfilter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: TabFilter, decorators: [{
+TabFilter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: TabFilter, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TabFilter.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: TabFilter, name: "tabfilter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: TabFilter, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tabfilter',