npm - mmhglobal-dynamicform - Versions diffs - 1.3.3 → 1.3.4 - Mend

mmhglobal-dynamicform 1.3.3 → 1.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/esm2020/lib/zgrid/zgrid.component.mjs CHANGED Viewed

@@ -829,9 +829,9 @@ export class ZgridComponent {
         return -1;
     }
 }
-ZgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZgridComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.FormBuilder }, { token: i3.AuthService }, { token: i3.WebApiService }, { token: i3.ZGridStatePersistingService }, { token: i3.ToastService }, { token: i3.ZCoreService }, { token: i3.StorageSessionService }, { token: i4.MainService }], target: i0.ɵɵFactoryTarget.Component });
-ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZgridComponent, selector: "app-zgrid", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }], ngImport: i0, template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div>\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\"> \r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{responsive: true, buttonCount: 3, pageSizes: pageSizes, previousNext: previousNext}\"\r\n                [skip]=\"state.skip\"\r\n                [sort]=\"state.sort\"\r\n                [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                [filter]=\"state.filter\"\r\n                [filterable]=\"data.enableFiltering !== false\"\r\n                [resizable]=\"true\"\r\n                [reorderable]=\"true\"\r\n                [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                (cellClick)=\"cellClickHandler($event)\"\r\n                (cellClose)=\"editCellCloseHandler($event)\"\r\n                (dataStateChange)=\"dataStateChange($event)\"\r\n                (pageChange)=\"pageChange($event)\"\r\n                (sortChange)=\"sortChange($event)\"\r\n                (filterChange)=\"filterChange($event)\"\r\n                (columnReorder)=\"columnsOrderChanged($event)\"\r\n                [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                [selectable]=\"selectableSettings\"\r\n                [selectedKeys]=\"mySelection\"\r\n                [ngStyle]=\"getGridStyle()\"\r\n                [trackBy]=\"trackBy\"\r\n                (cancel)=\"cancelHandler($event)\"\r\n                (save)=\"saveHandler($event)\"\r\n                (remove)=\"removeHandler($event)\"\r\n                (edit)=\"editHandler($event)\"\r\n                (add)=\"addHandler($event)\">\r\n      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.EnableGridCommand\">\r\n        <button type=\"button\" kendoButton (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\"><span class=\"k-icon k-i-refresh-sm\"></span>&nbsp;Refresh</button>\r\n        <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\"><span class=\"k-icon k-i-file-excel\"></span>&nbsp;Export Data to Excel</button>\r\n        <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"gridDefaultStateExist\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</button>\r\n        <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand \"><span class=\"k-icon k-i-add\"></span>Add New</button>\r\n      </ng-template>\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [sortable]=\"sortable(col.enableSorting)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         [columnMenu]=\"!col.disableColumnMenu\"\r\n                         [editor]=\"col.editorType\">\r\n        <div [ngSwitch]=\"true\">\r\n          <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-numeric-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n          <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'ztime'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n            <div *ngIf=\"col.filterByDateRange === true\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                <date-range-filter-cell class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </date-range-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngIf=\"col.filterByDateRange === false\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-date-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <div *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-string-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n        <!-- Grid Edit Template -->\r\n        <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n          <div [ngSwitch]=\"col.fieldType\">\r\n            <div *ngSwitchCase=\"'number'\">\r\n              <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n              <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                           popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                           style=\"padding-left: 2px; opacity: 0.5;\">\r\n                <span class=\"k-icon k-i-warning\"></span>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                  {{ col.Name }} required.\r\n                </ion-label>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                  {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                </ion-label>\r\n              </kendo-popup>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n              <kendo-popup [anchor]=\"cellAnchor.input\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                           popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                           style=\"padding-left: 2px; opacity: 0.5;\">\r\n                <span class=\"k-icon k-i-warning\"></span>\r\n                <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                  {{ col.Name }} required.\r\n                </ion-label>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                  {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                </ion-label>\r\n              </kendo-popup>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n          <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ dataItem[col.field] | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ dataItem[col.field] | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ dataItem[col.field]}}\r\n            </span>\r\n          </div>\r\n          <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n      <ion-button color=\"light\" size=\"small\">\r\n      {{ col.ClickableIcons }}\r\n      <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n      </ion-button>\r\n      </span> -->\r\n          <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && inlineEditedFormGroups\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <input type=\"number\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate', 'ztime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n          </div>\r\n          <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n            <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n              ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n              : true;\r\n            else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n              {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n              </fa-icon>\r\n            </span>\r\n            <ng-template #disabledButton>\r\n            </ng-template>\r\n          </span>\r\n          <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n          <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n        {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n      </span> -->\r\n        </ng-template>\r\n        <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n          <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\">\r\n            {{col.aggregateType}}\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ col.aggregateValue | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ col.aggregateValue | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ col.aggregateValue | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-grid-column>\r\n      <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\">\r\n        <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n          <button kendoGridSaveCommand>\r\n            {{ isNew ? 'Save' : 'Update' }}\r\n          </button>\r\n          <button kendoGridCancelCommand [primary]=\"true\">\r\n            {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n          </button>\r\n          <button kendoGridEditCommand>\r\n            {{ \"Edit\" }}\r\n          </button>\r\n          <button kendoGridRemoveCommand>\r\n            {{ \"Remove\" }}\r\n          </button>\r\n        </ng-template>\r\n      </kendo-grid-command-column>\r\n      <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n    </kendo-grid>\r\n    <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-grid .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-grid .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-grid .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid .k-grid-filter,:host ::ng-deep kendo-grid .k-grid .k-header-column-menu,:host ::ng-deep kendo-grid .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-grid .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-grid tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-grid tbody tr:hover,:host ::ng-deep kendo-grid tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-grid .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right}.centerAligned{text-align:center}.gridTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-secondary)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i5.GridComponent, selector: "kendo-grid", inputs: ["data", "scrollable", "selectable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "sort", "group", "navigatable", "rowClass", "rowSticky", "rowSelected", "cellSelected", "isDetailExpanded", "isGroupExpanded", "pageSize", "height", "rowHeight", "detailRowHeight", "filter"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["sortable", "groupable", "editor", "filter", "filterable", "editable", "field", "format"] }, { type: i5.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i5.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i5.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i5.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i5.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i5.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i5.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i5.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: i6.DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field"] }, { type: i5.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i5.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i5.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i5.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i7.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: i8.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "positionMode", "offset", "anchor", "popupClass", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i9.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i7.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: i9.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { type: i10.ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: ["data", "group", "form", "iconList", "buttonList"] }, { type: i11.ZtextareaComponent, selector: "app-ztextarea", inputs: ["data", "group", "form"] }, { type: i12.ZdatetimeComponent, selector: "app-zdatetime", inputs: ["data", "group", "form"] }, { type: i13.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i5.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i5.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }], directives: [{ type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "showAfter", "callout", "closable", "offset", "tooltipTemplate", "showOn", "titleTemplate", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle"], exportAs: ["kendoTooltip"] }, { type: i16.ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i14.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i17.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "role", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i5.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i14.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i14.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i5.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i5.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i5.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i5.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i5.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i5.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "date": i14.DatePipe, "number": i14.DecimalPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZgridComponent, decorators: [{
+ZgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZgridComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.FormBuilder }, { token: i3.AuthService }, { token: i3.WebApiService }, { token: i3.ZGridStatePersistingService }, { token: i3.ToastService }, { token: i3.ZCoreService }, { token: i3.StorageSessionService }, { token: i4.MainService }], target: i0.ɵɵFactoryTarget.Component });
+ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZgridComponent, selector: "app-zgrid", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }], ngImport: i0, template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div>\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\"> \r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{responsive: true, buttonCount: 3, pageSizes: pageSizes, previousNext: previousNext}\"\r\n                [skip]=\"state.skip\"\r\n                [sort]=\"state.sort\"\r\n                [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                [filter]=\"state.filter\"\r\n                [filterable]=\"data.enableFiltering !== false\"\r\n                [resizable]=\"true\"\r\n                [reorderable]=\"true\"\r\n                [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                (cellClick)=\"cellClickHandler($event)\"\r\n                (cellClose)=\"editCellCloseHandler($event)\"\r\n                (dataStateChange)=\"dataStateChange($event)\"\r\n                (pageChange)=\"pageChange($event)\"\r\n                (sortChange)=\"sortChange($event)\"\r\n                (filterChange)=\"filterChange($event)\"\r\n                (columnReorder)=\"columnsOrderChanged($event)\"\r\n                [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                [selectable]=\"selectableSettings\"\r\n                [selectedKeys]=\"mySelection\"\r\n                [ngStyle]=\"getGridStyle()\"\r\n                [trackBy]=\"trackBy\"\r\n                (cancel)=\"cancelHandler($event)\"\r\n                (save)=\"saveHandler($event)\"\r\n                (remove)=\"removeHandler($event)\"\r\n                (edit)=\"editHandler($event)\"\r\n                (add)=\"addHandler($event)\">\r\n      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.EnableGridCommand\">\r\n        <button type=\"button\" kendoButton (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\"><span class=\"k-icon k-i-refresh-sm\"></span>&nbsp;Refresh</button>\r\n        <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\"><span class=\"k-icon k-i-file-excel\"></span>&nbsp;Export Data to Excel</button>\r\n        <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"gridDefaultStateExist\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</button>\r\n        <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand \"><span class=\"k-icon k-i-add\"></span>Add New</button>\r\n      </ng-template>\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [sortable]=\"sortable(col.enableSorting)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         [columnMenu]=\"!col.disableColumnMenu\"\r\n                         [editor]=\"col.editorType\">\r\n        <div [ngSwitch]=\"true\">\r\n          <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-numeric-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n          <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'ztime'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n            <div *ngIf=\"col.filterByDateRange === true\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                <date-range-filter-cell class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </date-range-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngIf=\"col.filterByDateRange === false\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-date-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <div *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-string-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n        <!-- Grid Edit Template -->\r\n        <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n          <div [ngSwitch]=\"col.fieldType\">\r\n            <div *ngSwitchCase=\"'number'\">\r\n              <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n              <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                           popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                           style=\"padding-left: 2px; opacity: 0.5;\">\r\n                <span class=\"k-icon k-i-warning\"></span>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                  {{ col.Name }} required.\r\n                </ion-label>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                  {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                </ion-label>\r\n              </kendo-popup>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n              <kendo-popup [anchor]=\"cellAnchor.input\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                           popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                           style=\"padding-left: 2px; opacity: 0.5;\">\r\n                <span class=\"k-icon k-i-warning\"></span>\r\n                <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                  {{ col.Name }} required.\r\n                </ion-label>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                  {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                </ion-label>\r\n              </kendo-popup>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n          <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ dataItem[col.field] | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ dataItem[col.field] | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ dataItem[col.field]}}\r\n            </span>\r\n          </div>\r\n          <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n      <ion-button color=\"light\" size=\"small\">\r\n      {{ col.ClickableIcons }}\r\n      <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n      </ion-button>\r\n      </span> -->\r\n          <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && inlineEditedFormGroups\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <input type=\"number\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate', 'ztime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n          </div>\r\n          <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n            <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n              ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n              : true;\r\n            else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n              {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n              </fa-icon>\r\n            </span>\r\n            <ng-template #disabledButton>\r\n            </ng-template>\r\n          </span>\r\n          <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n          <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n        {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n      </span> -->\r\n        </ng-template>\r\n        <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n          <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\">\r\n            {{col.aggregateType}}\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ col.aggregateValue | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ col.aggregateValue | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ col.aggregateValue | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-grid-column>\r\n      <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\">\r\n        <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n          <button kendoGridSaveCommand>\r\n            {{ isNew ? 'Save' : 'Update' }}\r\n          </button>\r\n          <button kendoGridCancelCommand [primary]=\"true\">\r\n            {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n          </button>\r\n          <button kendoGridEditCommand>\r\n            {{ \"Edit\" }}\r\n          </button>\r\n          <button kendoGridRemoveCommand>\r\n            {{ \"Remove\" }}\r\n          </button>\r\n        </ng-template>\r\n      </kendo-grid-command-column>\r\n      <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n    </kendo-grid>\r\n    <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-grid .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-grid .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-grid .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid .k-grid-filter,:host ::ng-deep kendo-grid .k-grid .k-header-column-menu,:host ::ng-deep kendo-grid .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-grid .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-grid tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-grid tbody tr:hover,:host ::ng-deep kendo-grid tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-grid .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right}.centerAligned{text-align:center}.gridTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-secondary)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i5.GridComponent, selector: "kendo-grid", inputs: ["data", "scrollable", "selectable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "sort", "group", "navigatable", "rowClass", "rowSticky", "rowSelected", "cellSelected", "isDetailExpanded", "isGroupExpanded", "pageSize", "height", "rowHeight", "detailRowHeight", "filter"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i5.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i5.ColumnComponent, selector: "kendo-grid-column", inputs: ["sortable", "groupable", "editor", "filter", "filterable", "editable", "field", "format"] }, { type: i5.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i5.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i5.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i5.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i5.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i5.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i5.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i5.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: i6.DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field"] }, { type: i5.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i5.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i5.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i5.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i7.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: i8.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "positionMode", "offset", "anchor", "popupClass", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i9.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i7.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: i9.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { type: i10.ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: ["data", "group", "form", "iconList", "buttonList"] }, { type: i11.ZtextareaComponent, selector: "app-ztextarea", inputs: ["data", "group", "form"] }, { type: i12.ZdatetimeComponent, selector: "app-zdatetime", inputs: ["data", "group", "form"] }, { type: i13.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i5.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i5.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }], directives: [{ type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "showAfter", "callout", "closable", "offset", "tooltipTemplate", "showOn", "titleTemplate", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle"], exportAs: ["kendoTooltip"] }, { type: i16.ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i14.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i17.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "role", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i5.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i14.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i14.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i5.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i5.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i5.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i5.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i5.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i5.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "date": i14.DatePipe, "number": i14.DecimalPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZgridComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zgrid", template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div>\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\"> \r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{responsive: true, buttonCount: 3, pageSizes: pageSizes, previousNext: previousNext}\"\r\n                [skip]=\"state.skip\"\r\n                [sort]=\"state.sort\"\r\n                [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                [filter]=\"state.filter\"\r\n                [filterable]=\"data.enableFiltering !== false\"\r\n                [resizable]=\"true\"\r\n                [reorderable]=\"true\"\r\n                [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                (cellClick)=\"cellClickHandler($event)\"\r\n                (cellClose)=\"editCellCloseHandler($event)\"\r\n                (dataStateChange)=\"dataStateChange($event)\"\r\n                (pageChange)=\"pageChange($event)\"\r\n                (sortChange)=\"sortChange($event)\"\r\n                (filterChange)=\"filterChange($event)\"\r\n                (columnReorder)=\"columnsOrderChanged($event)\"\r\n                [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                [selectable]=\"selectableSettings\"\r\n                [selectedKeys]=\"mySelection\"\r\n                [ngStyle]=\"getGridStyle()\"\r\n                [trackBy]=\"trackBy\"\r\n                (cancel)=\"cancelHandler($event)\"\r\n                (save)=\"saveHandler($event)\"\r\n                (remove)=\"removeHandler($event)\"\r\n                (edit)=\"editHandler($event)\"\r\n                (add)=\"addHandler($event)\">\r\n      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.EnableGridCommand\">\r\n        <button type=\"button\" kendoButton (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\"><span class=\"k-icon k-i-refresh-sm\"></span>&nbsp;Refresh</button>\r\n        <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\"><span class=\"k-icon k-i-file-excel\"></span>&nbsp;Export Data to Excel</button>\r\n        <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"gridDefaultStateExist\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</button>\r\n        <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand \"><span class=\"k-icon k-i-add\"></span>Add New</button>\r\n      </ng-template>\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [sortable]=\"sortable(col.enableSorting)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         [columnMenu]=\"!col.disableColumnMenu\"\r\n                         [editor]=\"col.editorType\">\r\n        <div [ngSwitch]=\"true\">\r\n          <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-numeric-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n          <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'ztime'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n            <div *ngIf=\"col.filterByDateRange === true\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                <date-range-filter-cell class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </date-range-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngIf=\"col.filterByDateRange === false\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-date-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <div *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-string-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n        <!-- Grid Edit Template -->\r\n        <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n          <div [ngSwitch]=\"col.fieldType\">\r\n            <div *ngSwitchCase=\"'number'\">\r\n              <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n              <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                           popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                           style=\"padding-left: 2px; opacity: 0.5;\">\r\n                <span class=\"k-icon k-i-warning\"></span>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                  {{ col.Name }} required.\r\n                </ion-label>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                  {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                </ion-label>\r\n              </kendo-popup>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n              <kendo-popup [anchor]=\"cellAnchor.input\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                           popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                           style=\"padding-left: 2px; opacity: 0.5;\">\r\n                <span class=\"k-icon k-i-warning\"></span>\r\n                <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                  {{ col.Name }} required.\r\n                </ion-label>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                  {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                </ion-label>\r\n              </kendo-popup>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n          <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ dataItem[col.field] | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ dataItem[col.field] | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ dataItem[col.field]}}\r\n            </span>\r\n          </div>\r\n          <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n      <ion-button color=\"light\" size=\"small\">\r\n      {{ col.ClickableIcons }}\r\n      <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n      </ion-button>\r\n      </span> -->\r\n          <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && inlineEditedFormGroups\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <input type=\"number\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate', 'ztime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n          </div>\r\n          <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n            <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n              ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n              : true;\r\n            else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n              {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n              </fa-icon>\r\n            </span>\r\n            <ng-template #disabledButton>\r\n            </ng-template>\r\n          </span>\r\n          <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n          <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n        {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n      </span> -->\r\n        </ng-template>\r\n        <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n          <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\">\r\n            {{col.aggregateType}}\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ col.aggregateValue | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ col.aggregateValue | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ col.aggregateValue | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-grid-column>\r\n      <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\">\r\n        <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n          <button kendoGridSaveCommand>\r\n            {{ isNew ? 'Save' : 'Update' }}\r\n          </button>\r\n          <button kendoGridCancelCommand [primary]=\"true\">\r\n            {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n          </button>\r\n          <button kendoGridEditCommand>\r\n            {{ \"Edit\" }}\r\n          </button>\r\n          <button kendoGridRemoveCommand>\r\n            {{ \"Remove\" }}\r\n          </button>\r\n        </ng-template>\r\n      </kendo-grid-command-column>\r\n      <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n    </kendo-grid>\r\n    <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-grid .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-grid .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-grid .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid .k-grid-filter,:host ::ng-deep kendo-grid .k-grid .k-header-column-menu,:host ::ng-deep kendo-grid .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-grid .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-grid tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-grid tbody tr:hover,:host ::ng-deep kendo-grid tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-grid .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right}.centerAligned{text-align:center}.gridTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-secondary)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.FormBuilder }, { type: i3.AuthService }, { type: i3.WebApiService }, { type: i3.ZGridStatePersistingService }, { type: i3.ToastService }, { type: i3.ZCoreService }, { type: i3.StorageSessionService }, { type: i4.MainService }]; }, propDecorators: { data: [{

package/esm2020/lib/zgrid/zgrid.popup.anchor-target.directive.mjs CHANGED Viewed

@@ -5,9 +5,9 @@ export class ZGridPopupAnchorDirective {
         this.element = element;
     }
 }
-ZGridPopupAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZGridPopupAnchorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ZGridPopupAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.4", type: ZGridPopupAnchorDirective, selector: "[popupAnchor]", exportAs: ["popupAnchor"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZGridPopupAnchorDirective, decorators: [{
+ZGridPopupAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZGridPopupAnchorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ZGridPopupAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: ZGridPopupAnchorDirective, selector: "[popupAnchor]", exportAs: ["popupAnchor"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZGridPopupAnchorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[popupAnchor]',

package/esm2020/lib/zimg/zimg.component.mjs CHANGED Viewed

@@ -106,9 +106,9 @@ export class ZimgComponent {
         return iconName;
     }
 }
-ZimgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZimgComponent, deps: [{ token: i1.AttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-ZimgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZimgComponent, selector: "app-zimg", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item>\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">{{data.Label}} <ion-text\r\n      *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <img *ngIf=\"!!getGroupValue(data.Value, group)\" [src]=\"onDataSourceChange()\" [width]=\"imgWidth\" [height]=\"imgHeight\" style=\"border-radius: 50%; margin: 5px auto\" />\r\n  <img *ngIf=\"this.Guid !==undefined && this.Guid !==FileName\" [src]=\"this.Image\" [width]=\"imgWidth\" [height]=\"imgHeight\" style=\"border-radius: 50%; margin: 5px auto\" />\r\n \r\n  <div *ngIf=\"!getGroupValue(data.Value, group)\" (click)=\"onIconClick()\">\r\n    <ion-icon  name=\"getIconName()\" style=\"zoom:4.0;\">\r\n    </ion-icon>\r\n  </div>\r\n</ion-item>", styles: [""], 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: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZimgComponent, decorators: [{
+ZimgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZimgComponent, deps: [{ token: i1.AttachmentService }], target: i0.ɵɵFactoryTarget.Component });
+ZimgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZimgComponent, selector: "app-zimg", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item>\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">{{data.Label}} <ion-text\r\n      *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <img *ngIf=\"!!getGroupValue(data.Value, group)\" [src]=\"onDataSourceChange()\" [width]=\"imgWidth\" [height]=\"imgHeight\" style=\"border-radius: 50%; margin: 5px auto\" />\r\n  <img *ngIf=\"this.Guid !==undefined && this.Guid !==FileName\" [src]=\"this.Image\" [width]=\"imgWidth\" [height]=\"imgHeight\" style=\"border-radius: 50%; margin: 5px auto\" />\r\n \r\n  <div *ngIf=\"!getGroupValue(data.Value, group)\" (click)=\"onIconClick()\">\r\n    <ion-icon  name=\"getIconName()\" style=\"zoom:4.0;\">\r\n    </ion-icon>\r\n  </div>\r\n</ion-item>", styles: [""], 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: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZimgComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zimg", template: "<ion-item>\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">{{data.Label}} <ion-text\r\n      *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <img *ngIf=\"!!getGroupValue(data.Value, group)\" [src]=\"onDataSourceChange()\" [width]=\"imgWidth\" [height]=\"imgHeight\" style=\"border-radius: 50%; margin: 5px auto\" />\r\n  <img *ngIf=\"this.Guid !==undefined && this.Guid !==FileName\" [src]=\"this.Image\" [width]=\"imgWidth\" [height]=\"imgHeight\" style=\"border-radius: 50%; margin: 5px auto\" />\r\n \r\n  <div *ngIf=\"!getGroupValue(data.Value, group)\" (click)=\"onIconClick()\">\r\n    <ion-icon  name=\"getIconName()\" style=\"zoom:4.0;\">\r\n    </ion-icon>\r\n  </div>\r\n</ion-item>", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.AttachmentService }]; }, propDecorators: { data: [{

package/esm2020/lib/zkcard/zkcard.component.mjs CHANGED Viewed

@@ -358,9 +358,9 @@ export class ZkcardComponent {
         this.scrollViewCards.total = this.responseData.data.filter(x => event.includes(x.WFS_StatusName)).length;
     }
 }
-ZkcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZkcardComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.ResourceApiService }, { token: i2.AuthService }, { token: i2.ZGridStatePersistingService }, { token: i2.WebApiService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-ZkcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZkcardComponent, selector: "app-zkcard", ngImport: i0, template: "<!--<kendo-multiselect [data]=\"filterItems\" [value]=\"value\" [placeholder]=\"'Survey Status'\" [filterable]=\"true\"\r\n                   (valueChange)=\"valueChange($event)\"></kendo-multiselect>\r\n&nbsp;-->\r\n<div class=\"survey-card-list\">\r\n  <div *ngFor=\"let card of scrollViewCards.data\">\r\n    <!--<scrollview-card [card]=\"card\"></scrollview-card>-->\r\n    <kendo-card class=\"custom-card-draft\" *ngIf=\"card.WFS_StatusName == 'Draft'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <button class=\"k-button k-navigation\"\r\n                  (click)=\"start(card)\">\r\n            <div style=\"justify-content:space-between\">\r\n              <span> Continue &nbsp;</span>\r\n              <fa-icon [icon]=\"getFontAwesome('play')\"></fa-icon>\r\n            </div>\r\n          </button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-submit\" *ngIf=\"card.WFS_StatusName == 'Submitted'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <button class=\"k-button k-navigation\"\r\n                  (click)=\"start(card)\">\r\n            <div style=\"justify-content:space-between\">\r\n              <span> View &nbsp;</span>\r\n              <fa-icon [icon]=\"getFontAwesome('file-alt')\"></fa-icon>\r\n            </div>\r\n          </button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-new\" *ngIf=\"card.WFS_StatusName == 'New'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>{{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression: \r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <button class=\"k-button k-navigation\"\r\n                  (click)=\"start(card)\">\r\n            <div style=\"justify-content:space-between\">\r\n              <span> Start &nbsp;</span>\r\n              <fa-icon [icon]=\"getFontAwesome('play')\"></fa-icon>\r\n            </div>\r\n          </button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n  </div>\r\n</div>\r\n", styles: [".survey-card-list{display:flex;flex-wrap:wrap;background-color:#f0dcd9;align-items:center;border-radius:10px}.custom-card-submit{margin:20px;border:3px solid;border-color:green;border-radius:15px}.custom-card-draft,.custom-card-new{margin:20px;border:3px solid;border-color:orange;border-radius:15px}\n"], components: [{ type: i3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3.CardHeaderComponent, selector: "kendo-card-header" }, { type: i3.CardBodyComponent, selector: "kendo-card-body" }, { type: i3.CardFooterComponent, selector: "kendo-card-footer" }, { type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "animation", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i3.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CardTitleDirective, selector: "[kendoCardTitle]" }, { type: i3.CardSubtitleDirective, selector: "[kendoCardSubtitle]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZkcardComponent, decorators: [{
+ZkcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZkcardComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.ResourceApiService }, { token: i2.AuthService }, { token: i2.ZGridStatePersistingService }, { token: i2.WebApiService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+ZkcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZkcardComponent, selector: "app-zkcard", ngImport: i0, template: "<!--<kendo-multiselect [data]=\"filterItems\" [value]=\"value\" [placeholder]=\"'Survey Status'\" [filterable]=\"true\"\r\n                   (valueChange)=\"valueChange($event)\"></kendo-multiselect>\r\n&nbsp;-->\r\n<div class=\"survey-card-list\">\r\n  <div *ngFor=\"let card of scrollViewCards.data\">\r\n    <!--<scrollview-card [card]=\"card\"></scrollview-card>-->\r\n    <kendo-card class=\"custom-card-draft\" *ngIf=\"card.WFS_StatusName == 'Draft'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <button class=\"k-button k-navigation\"\r\n                  (click)=\"start(card)\">\r\n            <div style=\"justify-content:space-between\">\r\n              <span> Continue &nbsp;</span>\r\n              <fa-icon [icon]=\"getFontAwesome('play')\"></fa-icon>\r\n            </div>\r\n          </button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-submit\" *ngIf=\"card.WFS_StatusName == 'Submitted'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <button class=\"k-button k-navigation\"\r\n                  (click)=\"start(card)\">\r\n            <div style=\"justify-content:space-between\">\r\n              <span> View &nbsp;</span>\r\n              <fa-icon [icon]=\"getFontAwesome('file-alt')\"></fa-icon>\r\n            </div>\r\n          </button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-new\" *ngIf=\"card.WFS_StatusName == 'New'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>{{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression: \r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <button class=\"k-button k-navigation\"\r\n                  (click)=\"start(card)\">\r\n            <div style=\"justify-content:space-between\">\r\n              <span> Start &nbsp;</span>\r\n              <fa-icon [icon]=\"getFontAwesome('play')\"></fa-icon>\r\n            </div>\r\n          </button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n  </div>\r\n</div>\r\n", styles: [".survey-card-list{display:flex;flex-wrap:wrap;background-color:#f0dcd9;align-items:center;border-radius:10px}.custom-card-submit{margin:20px;border:3px solid;border-color:green;border-radius:15px}.custom-card-draft,.custom-card-new{margin:20px;border:3px solid;border-color:orange;border-radius:15px}\n"], components: [{ type: i3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3.CardHeaderComponent, selector: "kendo-card-header" }, { type: i3.CardBodyComponent, selector: "kendo-card-body" }, { type: i3.CardFooterComponent, selector: "kendo-card-footer" }, { type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "animation", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i3.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CardTitleDirective, selector: "[kendoCardTitle]" }, { type: i3.CardSubtitleDirective, selector: "[kendoCardSubtitle]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZkcardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zkcard', template: "<!--<kendo-multiselect [data]=\"filterItems\" [value]=\"value\" [placeholder]=\"'Survey Status'\" [filterable]=\"true\"\r\n                   (valueChange)=\"valueChange($event)\"></kendo-multiselect>\r\n&nbsp;-->\r\n<div class=\"survey-card-list\">\r\n  <div *ngFor=\"let card of scrollViewCards.data\">\r\n    <!--<scrollview-card [card]=\"card\"></scrollview-card>-->\r\n    <kendo-card class=\"custom-card-draft\" *ngIf=\"card.WFS_StatusName == 'Draft'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <button class=\"k-button k-navigation\"\r\n                  (click)=\"start(card)\">\r\n            <div style=\"justify-content:space-between\">\r\n              <span> Continue &nbsp;</span>\r\n              <fa-icon [icon]=\"getFontAwesome('play')\"></fa-icon>\r\n            </div>\r\n          </button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-submit\" *ngIf=\"card.WFS_StatusName == 'Submitted'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <button class=\"k-button k-navigation\"\r\n                  (click)=\"start(card)\">\r\n            <div style=\"justify-content:space-between\">\r\n              <span> View &nbsp;</span>\r\n              <fa-icon [icon]=\"getFontAwesome('file-alt')\"></fa-icon>\r\n            </div>\r\n          </button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-new\" *ngIf=\"card.WFS_StatusName == 'New'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>{{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression: \r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <button class=\"k-button k-navigation\"\r\n                  (click)=\"start(card)\">\r\n            <div style=\"justify-content:space-between\">\r\n              <span> Start &nbsp;</span>\r\n              <fa-icon [icon]=\"getFontAwesome('play')\"></fa-icon>\r\n            </div>\r\n          </button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n  </div>\r\n</div>\r\n", styles: [".survey-card-list{display:flex;flex-wrap:wrap;background-color:#f0dcd9;align-items:center;border-radius:10px}.custom-card-submit{margin:20px;border:3px solid;border-color:green;border-radius:15px}.custom-card-draft,.custom-card-new{margin:20px;border:3px solid;border-color:orange;border-radius:15px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.ResourceApiService }, { type: i2.AuthService }, { type: i2.ZGridStatePersistingService }, { type: i2.WebApiService }, { type: i1.Router }]; } });

package/esm2020/lib/zlabel/zlabel.component.mjs CHANGED Viewed

@@ -6,12 +6,14 @@ import { Component, Input } from "@angular/core";
 import { ZComponentHelper, ZComponentProperties } from 'mmhglobal-zcore';
 import * as i0 from "@angular/core";
 import * as i1 from "@ionic/angular";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/forms";
+import * as i2 from "@fortawesome/angular-fontawesome";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
 export class ZlabelComponent {
     constructor() {
         this.componentProperties = new ZComponentProperties();
         this.labelText = "";
+        this.labelList = [];
         this.setVisible = (status) => {
             this.componentProperties.isVisible = status;
             this.data.Visible = status;
@@ -19,11 +21,19 @@ export class ZlabelComponent {
         this.setData = (data) => {
             this.labelText = data;
         };
+        this.setLabelFields = (data) => {
+            this.labelList = data;
+        };
     }
     ngOnInit() {
         ZComponentHelper.setComponentProperties(this);
         ZComponentHelper.registerComponent(this);
-        this.labelText = ZComponentHelper.getGroupValue(this.data.Label.toString(), this.group);
+        if (this.data['LabelList']) {
+            this.labelList = this.data['LabelList'];
+        }
+        else {
+            this.labelText = ZComponentHelper.getGroupValue(this.data.Label.toString(), this.group);
+        }
     }
     getReadOnlyValue() {
         const readOnlyValue = ZComponentHelper.getGroupEvalValue.call(this, this.data.ReadOnly);
@@ -46,12 +56,15 @@ export class ZlabelComponent {
     getClass(form, data) {
         return `${ZComponentHelper.getIon_InvalidClass(form, data)} ${data.DivClass}`;
     }
+    getFontAwesome(iconName) {
+        return ZComponentHelper.getFontAwesome(iconName);
+    }
 }
-ZlabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZlabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZlabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZlabelComponent, selector: "app-zlabel", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <ion-label class=\"ion-text-wrap label\" Position=\"Fixed\" [color]=\"data.Color\">{{labelText}}</ion-label>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZlabelComponent, decorators: [{
+ZlabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZlabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZlabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZlabelComponent, selector: "app-zlabel", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <div style=\"flex: 1;\">\r\n      <div *ngIf=\"data.Label\">\r\n        <span *ngIf=\"data.Icon\">\r\n          <fa-icon [icon]=\"data.Icon\" style=\"padding-right: 5px;\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"ion-text-wrap label\" Position=\"Fixed\" [color]=\"data.Color\">{{labelText}}</ion-label>\r\n      </div>\r\n\r\n      <div *ngIf=\"!data.Label\">\r\n        <div *ngFor=\"let label of labelList\">\r\n          <span *ngIf=\"label.Icon\">\r\n            <fa-icon [icon]=\"data.Icon\" style=\"padding-right: 5px;\"></fa-icon>\r\n          </span>\r\n          <ion-label [style]=\"label.StyleExpression\">\r\n            <div [innerHTML]=\"label.Label\"></div>\r\n          </ion-label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZlabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-zlabel', template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <ion-label class=\"ion-text-wrap label\" Position=\"Fixed\" [color]=\"data.Color\">{{labelText}}</ion-label>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}\n"] }]
+            args: [{ selector: 'app-zlabel', template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <div style=\"flex: 1;\">\r\n      <div *ngIf=\"data.Label\">\r\n        <span *ngIf=\"data.Icon\">\r\n          <fa-icon [icon]=\"data.Icon\" style=\"padding-right: 5px;\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"ion-text-wrap label\" Position=\"Fixed\" [color]=\"data.Color\">{{labelText}}</ion-label>\r\n      </div>\r\n\r\n      <div *ngIf=\"!data.Label\">\r\n        <div *ngFor=\"let label of labelList\">\r\n          <span *ngIf=\"label.Icon\">\r\n            <fa-icon [icon]=\"data.Icon\" style=\"padding-right: 5px;\"></fa-icon>\r\n          </span>\r\n          <ion-label [style]=\"label.StyleExpression\">\r\n            <div [innerHTML]=\"label.Label\"></div>\r\n          </ion-label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], group: [{
@@ -59,4 +72,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImpor
             }], form: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiemxhYmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21taGdsb2JhbC1keW5hbWljZm9ybS9zcmMvbGliL3psYWJlbC96bGFiZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbW1oZ2xvYmFsLWR5bmFtaWNmb3JtL3NyYy9saWIvemxhYmVsL3psYWJlbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSwrQkFBK0I7QUFDL0IsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHekQsNkJBQTZCO0FBRTdCLDhCQUE4QjtBQUU5QiwyQ0FBMkM7QUFDM0MsT0FBTyxFQUNPLGdCQUFnQixFQUNaLG9CQUFvQixFQUNyQyxNQUFNLGlCQUFpQixDQUFDOzs7OztBQVF6QixNQUFNLE9BQU8sZUFBZTtJQVMxQjtRQUpBLHdCQUFtQixHQUFHLElBQUksb0JBQW9CLEVBQUUsQ0FBQztRQUVqRCxjQUFTLEdBQUcsRUFBRSxDQUFDO1FBMEJSLGVBQVUsR0FBRyxDQUFDLE1BQWUsRUFBRSxFQUFFO1lBQ3RDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxTQUFTLEdBQUcsTUFBTSxDQUFDO1lBQzVDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztRQUM3QixDQUFDLENBQUE7UUFVTSxZQUFPLEdBQUcsQ0FBQyxJQUFTLEVBQUUsRUFBRTtZQUM3QixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztRQUN4QixDQUFDLENBQUE7SUF2Q2UsQ0FBQztJQUVqQixRQUFRO1FBQ04sZ0JBQWdCLENBQUMsc0JBQXNCLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDOUMsZ0JBQWdCLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDekMsSUFBSSxDQUFDLFNBQVMsR0FBRyxnQkFBZ0IsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFGLENBQUM7SUFFRCxnQkFBZ0I7UUFDZCxNQUFNLGFBQWEsR0FBRyxnQkFBZ0IsQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDeEYsSUFBSSxPQUFPLGFBQWEsS0FBSyxVQUFVLEVBQUU7WUFDdkMsT0FBTyxhQUFhLEVBQUUsQ0FBQztTQUN4QjtRQUNELE9BQU8sYUFBYSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxJQUFJLENBQUMsbUJBQW1CLENBQUMsU0FBUyxLQUFLLElBQUksRUFBRTtZQUMvQyxPQUFPLGdCQUFnQixDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztTQUN6RDthQUFNO1lBQ0wsT0FBTyxJQUFJLENBQUMsbUJBQW1CLENBQUMsU0FBUyxDQUFDO1NBQzNDO0lBQ0gsQ0FBQztJQU9ELG1CQUFtQixDQUFDLElBQWUsRUFBRSxJQUFZO1FBQy9DLE9BQU8sZ0JBQWdCLENBQUMsbUJBQW1CLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQzFELENBQUM7SUFFRCxRQUFRLENBQUMsSUFBZSxFQUFFLElBQVk7UUFDcEMsT0FBTyxHQUFHLGdCQUFnQixDQUFDLG1CQUFtQixDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDaEYsQ0FBQzs7NEdBNUNVLGVBQWU7Z0dBQWYsZUFBZSwwR0NwQjVCLG9ZQU9BOzJGRGFhLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsWUFBWTswRUFLYixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qKioqKioqKioqIEFuZ3VsYXIgKioqKioqKioqKi9cclxuaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuLyoqKioqKioqKiogSW9uaWMgKioqKioqKioqKi9cclxuXHJcbi8qKioqKioqKioqIFBsdWdpbiAqKioqKioqKioqL1xyXG5cclxuLyoqKioqKioqKiogQ29tcG9uZW50ICYgU2VydmljZSAqKioqKioqKioqL1xyXG5pbXBvcnQgeyBcclxuICBaQ29tcG9uZW50LCBaQ29tcG9uZW50SGVscGVyLFxyXG4gIFpGaWVsZCwgWkdyb3VwLCBaQ29tcG9uZW50UHJvcGVydGllcyBcclxufSBmcm9tICdtbWhnbG9iYWwtemNvcmUnO1xyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLXpsYWJlbCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3psYWJlbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vemxhYmVsLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBabGFiZWxDb21wb25lbnQgaW1wbGVtZW50cyBaQ29tcG9uZW50LCBPbkluaXQge1xyXG4gIEBJbnB1dCgpIGRhdGE6IFpGaWVsZDtcclxuICBASW5wdXQoKSBncm91cDogWkdyb3VwO1xyXG4gIEBJbnB1dCgpIGZvcm06IEZvcm1Hcm91cDtcclxuXHJcbiAgY29tcG9uZW50UHJvcGVydGllcyA9IG5ldyBaQ29tcG9uZW50UHJvcGVydGllcygpO1xyXG5cclxuICBsYWJlbFRleHQgPSBcIlwiO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIFpDb21wb25lbnRIZWxwZXIuc2V0Q29tcG9uZW50UHJvcGVydGllcyh0aGlzKTtcclxuICAgIFpDb21wb25lbnRIZWxwZXIucmVnaXN0ZXJDb21wb25lbnQodGhpcyk7XHJcbiAgICB0aGlzLmxhYmVsVGV4dCA9IFpDb21wb25lbnRIZWxwZXIuZ2V0R3JvdXBWYWx1ZSh0aGlzLmRhdGEuTGFiZWwudG9TdHJpbmcoKSwgdGhpcy5ncm91cCk7XHJcbiAgfVxyXG5cclxuICBnZXRSZWFkT25seVZhbHVlKCkge1xyXG4gICAgY29uc3QgcmVhZE9ubHlWYWx1ZSA9IFpDb21wb25lbnRIZWxwZXIuZ2V0R3JvdXBFdmFsVmFsdWUuY2FsbCh0aGlzLCB0aGlzLmRhdGEuUmVhZE9ubHkpO1xyXG4gICAgaWYgKHR5cGVvZiByZWFkT25seVZhbHVlID09PSAnZnVuY3Rpb24nKSB7XHJcbiAgICAgIHJldHVybiByZWFkT25seVZhbHVlKCk7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gcmVhZE9ubHlWYWx1ZTtcclxuICB9XHJcblxyXG4gIGlzVmlzaWJsZSgpIHtcclxuICAgIGlmICh0aGlzLmNvbXBvbmVudFByb3BlcnRpZXMuaXNWaXNpYmxlID09PSBudWxsKSB7XHJcbiAgICAgIHJldHVybiBaQ29tcG9uZW50SGVscGVyLmlzVmlzaWJsZS5jYWxsKHRoaXMsIHRoaXMuZGF0YSk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICByZXR1cm4gdGhpcy5jb21wb25lbnRQcm9wZXJ0aWVzLmlzVmlzaWJsZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHB1YmxpYyBzZXRWaXNpYmxlID0gKHN0YXR1czogYm9vbGVhbikgPT4ge1xyXG4gICAgdGhpcy5jb21wb25lbnRQcm9wZXJ0aWVzLmlzVmlzaWJsZSA9IHN0YXR1cztcclxuICAgIHRoaXMuZGF0YS5WaXNpYmxlID0gc3RhdHVzO1xyXG4gIH1cclxuXHJcbiAgZ2V0SW9uX0ludmFsaWRDbGFzcyhmb3JtOiBGb3JtR3JvdXAsIGRhdGE6IFpGaWVsZCkge1xyXG4gICAgcmV0dXJuIFpDb21wb25lbnRIZWxwZXIuZ2V0SW9uX0ludmFsaWRDbGFzcyhmb3JtLCBkYXRhKTtcclxuICB9XHJcblxyXG4gIGdldENsYXNzKGZvcm06IEZvcm1Hcm91cCwgZGF0YTogWkZpZWxkKSB7XHJcbiAgICByZXR1cm4gYCR7WkNvbXBvbmVudEhlbHBlci5nZXRJb25fSW52YWxpZENsYXNzKGZvcm0sIGRhdGEpfSAke2RhdGEuRGl2Q2xhc3N9YDtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBzZXREYXRhID0gKGRhdGE6IGFueSkgPT4ge1xyXG4gICAgdGhpcy5sYWJlbFRleHQgPSBkYXRhO1xyXG4gIH1cclxufSIsIjxpb24taXRlbSBbZm9ybUdyb3VwXT1cImZvcm1cIiAqbmdJZj1cImNvbXBvbmVudFByb3BlcnRpZXMuaXNWaXNpYmxlXCIgW25nQ2xhc3NdPVwiZ2V0Q2xhc3MoZm9ybSwgZGF0YSlcIj5cclxuICA8ZGl2IGNsYXNzPVwiaW9uLXJvd1wiIHN0eWxlPVwianVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOyB3aWR0aDogMTAwJVwiPlxyXG4gICAgPHNwYW4gc3R5bGU9XCJmbGV4OiAxO1wiPlxyXG4gICAgICA8aW9uLWxhYmVsIGNsYXNzPVwiaW9uLXRleHQtd3JhcCBsYWJlbFwiIFBvc2l0aW9uPVwiRml4ZWRcIiBbY29sb3JdPVwiZGF0YS5Db2xvclwiPnt7bGFiZWxUZXh0fX08L2lvbi1sYWJlbD5cclxuICAgIDwvc3Bhbj5cclxuICA8L2Rpdj5cclxuPC9pb24taXRlbT5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiemxhYmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21taGdsb2JhbC1keW5hbWljZm9ybS9zcmMvbGliL3psYWJlbC96bGFiZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbW1oZ2xvYmFsLWR5bmFtaWNmb3JtL3NyYy9saWIvemxhYmVsL3psYWJlbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSwrQkFBK0I7QUFDL0IsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHekQsNkJBQTZCO0FBRTdCLDhCQUE4QjtBQUU5QiwyQ0FBMkM7QUFDM0MsT0FBTyxFQUNPLGdCQUFnQixFQUNaLG9CQUFvQixFQUNyQyxNQUFNLGlCQUFpQixDQUFDOzs7Ozs7QUFRekIsTUFBTSxPQUFPLGVBQWU7SUFVMUI7UUFMQSx3QkFBbUIsR0FBRyxJQUFJLG9CQUFvQixFQUFFLENBQUM7UUFFakQsY0FBUyxHQUFHLEVBQUUsQ0FBQztRQUNmLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFnQ1IsZUFBVSxHQUFHLENBQUMsTUFBZSxFQUFFLEVBQUU7WUFDdEMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUM7WUFDNUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO1FBQzdCLENBQUMsQ0FBQTtRQWNNLFlBQU8sR0FBRyxDQUFDLElBQVMsRUFBRSxFQUFFO1lBQzdCLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ3hCLENBQUMsQ0FBQTtRQUVNLG1CQUFjLEdBQUcsQ0FBQyxJQUFTLEVBQUUsRUFBRTtZQUNwQyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztRQUN4QixDQUFDLENBQUE7SUFyRGUsQ0FBQztJQUVqQixRQUFRO1FBQ04sZ0JBQWdCLENBQUMsc0JBQXNCLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDOUMsZ0JBQWdCLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFekMsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFO1lBQzFCLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztTQUN6QzthQUNJO1lBQ0gsSUFBSSxDQUFDLFNBQVMsR0FBRyxnQkFBZ0IsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3pGO0lBQ0gsQ0FBQztJQUVELGdCQUFnQjtRQUNkLE1BQU0sYUFBYSxHQUFHLGdCQUFnQixDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN4RixJQUFJLE9BQU8sYUFBYSxLQUFLLFVBQVUsRUFBRTtZQUN2QyxPQUFPLGFBQWEsRUFBRSxDQUFDO1NBQ3hCO1FBQ0QsT0FBTyxhQUFhLENBQUM7SUFDdkIsQ0FBQztJQUVELFNBQVM7UUFDUCxJQUFJLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxTQUFTLEtBQUssSUFBSSxFQUFFO1lBQy9DLE9BQU8sZ0JBQWdCLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQ3pEO2FBQU07WUFDTCxPQUFPLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxTQUFTLENBQUM7U0FDM0M7SUFDSCxDQUFDO0lBT0QsbUJBQW1CLENBQUMsSUFBZSxFQUFFLElBQVk7UUFDL0MsT0FBTyxnQkFBZ0IsQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDMUQsQ0FBQztJQUVELFFBQVEsQ0FBQyxJQUFlLEVBQUUsSUFBWTtRQUNwQyxPQUFPLEdBQUcsZ0JBQWdCLENBQUMsbUJBQW1CLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNoRixDQUFDO0lBRUQsY0FBYyxDQUFDLFFBQWdCO1FBQzdCLE9BQU8sZ0JBQWdCLENBQUMsY0FBYyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ25ELENBQUM7OzRHQXZEVSxlQUFlO2dHQUFmLGVBQWUsMEdDcEI1QixtK0JBdUJBOzJGREhhLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsWUFBWTswRUFLYixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qKioqKioqKioqIEFuZ3VsYXIgKioqKioqKioqKi9cclxuaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuLyoqKioqKioqKiogSW9uaWMgKioqKioqKioqKi9cclxuXHJcbi8qKioqKioqKioqIFBsdWdpbiAqKioqKioqKioqL1xyXG5cclxuLyoqKioqKioqKiogQ29tcG9uZW50ICYgU2VydmljZSAqKioqKioqKioqL1xyXG5pbXBvcnQgeyBcclxuICBaQ29tcG9uZW50LCBaQ29tcG9uZW50SGVscGVyLFxyXG4gIFpGaWVsZCwgWkdyb3VwLCBaQ29tcG9uZW50UHJvcGVydGllcyBcclxufSBmcm9tICdtbWhnbG9iYWwtemNvcmUnO1xyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLXpsYWJlbCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3psYWJlbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vemxhYmVsLmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBabGFiZWxDb21wb25lbnQgaW1wbGVtZW50cyBaQ29tcG9uZW50LCBPbkluaXQge1xyXG4gIEBJbnB1dCgpIGRhdGE6IFpGaWVsZDtcclxuICBASW5wdXQoKSBncm91cDogWkdyb3VwO1xyXG4gIEBJbnB1dCgpIGZvcm06IEZvcm1Hcm91cDtcclxuXHJcbiAgY29tcG9uZW50UHJvcGVydGllcyA9IG5ldyBaQ29tcG9uZW50UHJvcGVydGllcygpO1xyXG5cclxuICBsYWJlbFRleHQgPSBcIlwiO1xyXG4gIGxhYmVsTGlzdCA9IFtdO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIFpDb21wb25lbnRIZWxwZXIuc2V0Q29tcG9uZW50UHJvcGVydGllcyh0aGlzKTtcclxuICAgIFpDb21wb25lbnRIZWxwZXIucmVnaXN0ZXJDb21wb25lbnQodGhpcyk7XHJcbiAgICAgXHJcbiAgICBpZiAodGhpcy5kYXRhWydMYWJlbExpc3QnXSkge1xyXG4gICAgICB0aGlzLmxhYmVsTGlzdCA9IHRoaXMuZGF0YVsnTGFiZWxMaXN0J107XHJcbiAgICB9XHJcbiAgICBlbHNlIHtcclxuICAgICAgdGhpcy5sYWJlbFRleHQgPSBaQ29tcG9uZW50SGVscGVyLmdldEdyb3VwVmFsdWUodGhpcy5kYXRhLkxhYmVsLnRvU3RyaW5nKCksIHRoaXMuZ3JvdXApO1xyXG4gICAgfSBcclxuICB9XHJcblxyXG4gIGdldFJlYWRPbmx5VmFsdWUoKSB7XHJcbiAgICBjb25zdCByZWFkT25seVZhbHVlID0gWkNvbXBvbmVudEhlbHBlci5nZXRHcm91cEV2YWxWYWx1ZS5jYWxsKHRoaXMsIHRoaXMuZGF0YS5SZWFkT25seSk7XHJcbiAgICBpZiAodHlwZW9mIHJlYWRPbmx5VmFsdWUgPT09ICdmdW5jdGlvbicpIHtcclxuICAgICAgcmV0dXJuIHJlYWRPbmx5VmFsdWUoKTtcclxuICAgIH1cclxuICAgIHJldHVybiByZWFkT25seVZhbHVlO1xyXG4gIH1cclxuXHJcbiAgaXNWaXNpYmxlKCkge1xyXG4gICAgaWYgKHRoaXMuY29tcG9uZW50UHJvcGVydGllcy5pc1Zpc2libGUgPT09IG51bGwpIHtcclxuICAgICAgcmV0dXJuIFpDb21wb25lbnRIZWxwZXIuaXNWaXNpYmxlLmNhbGwodGhpcywgdGhpcy5kYXRhKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHJldHVybiB0aGlzLmNvbXBvbmVudFByb3BlcnRpZXMuaXNWaXNpYmxlO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHVibGljIHNldFZpc2libGUgPSAoc3RhdHVzOiBib29sZWFuKSA9PiB7XHJcbiAgICB0aGlzLmNvbXBvbmVudFByb3BlcnRpZXMuaXNWaXNpYmxlID0gc3RhdHVzO1xyXG4gICAgdGhpcy5kYXRhLlZpc2libGUgPSBzdGF0dXM7XHJcbiAgfVxyXG5cclxuICBnZXRJb25fSW52YWxpZENsYXNzKGZvcm06IEZvcm1Hcm91cCwgZGF0YTogWkZpZWxkKSB7XHJcbiAgICByZXR1cm4gWkNvbXBvbmVudEhlbHBlci5nZXRJb25fSW52YWxpZENsYXNzKGZvcm0sIGRhdGEpO1xyXG4gIH1cclxuXHJcbiAgZ2V0Q2xhc3MoZm9ybTogRm9ybUdyb3VwLCBkYXRhOiBaRmllbGQpIHtcclxuICAgIHJldHVybiBgJHtaQ29tcG9uZW50SGVscGVyLmdldElvbl9JbnZhbGlkQ2xhc3MoZm9ybSwgZGF0YSl9ICR7ZGF0YS5EaXZDbGFzc31gO1xyXG4gIH1cclxuXHJcbiAgZ2V0Rm9udEF3ZXNvbWUoaWNvbk5hbWU6IHN0cmluZykge1xyXG4gICAgcmV0dXJuIFpDb21wb25lbnRIZWxwZXIuZ2V0Rm9udEF3ZXNvbWUoaWNvbk5hbWUpO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIHNldERhdGEgPSAoZGF0YTogYW55KSA9PiB7XHJcbiAgICB0aGlzLmxhYmVsVGV4dCA9IGRhdGE7XHJcbiAgfSBcclxuXHJcbiAgcHVibGljIHNldExhYmVsRmllbGRzID0gKGRhdGE6IGFueSkgPT4geyBcclxuICAgIHRoaXMubGFiZWxMaXN0ID0gZGF0YTtcclxuICB9XHJcbn1cclxuIiwiPGlvbi1pdGVtIFtmb3JtR3JvdXBdPVwiZm9ybVwiICpuZ0lmPVwiY29tcG9uZW50UHJvcGVydGllcy5pc1Zpc2libGVcIiBbbmdDbGFzc109XCJnZXRDbGFzcyhmb3JtLCBkYXRhKVwiPlxyXG4gIDxkaXYgY2xhc3M9XCJpb24tcm93XCIgc3R5bGU9XCJqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47IHdpZHRoOiAxMDAlXCI+XHJcbiAgICA8ZGl2IHN0eWxlPVwiZmxleDogMTtcIj5cclxuICAgICAgPGRpdiAqbmdJZj1cImRhdGEuTGFiZWxcIj5cclxuICAgICAgICA8c3BhbiAqbmdJZj1cImRhdGEuSWNvblwiPlxyXG4gICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiZGF0YS5JY29uXCIgc3R5bGU9XCJwYWRkaW5nLXJpZ2h0OiA1cHg7XCI+PC9mYS1pY29uPlxyXG4gICAgICAgIDwvc3Bhbj5cclxuICAgICAgICA8aW9uLWxhYmVsIGNsYXNzPVwiaW9uLXRleHQtd3JhcCBsYWJlbFwiIFBvc2l0aW9uPVwiRml4ZWRcIiBbY29sb3JdPVwiZGF0YS5Db2xvclwiPnt7bGFiZWxUZXh0fX08L2lvbi1sYWJlbD5cclxuICAgICAgPC9kaXY+XHJcblxyXG4gICAgICA8ZGl2ICpuZ0lmPVwiIWRhdGEuTGFiZWxcIj5cclxuICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBsYWJlbCBvZiBsYWJlbExpc3RcIj5cclxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwibGFiZWwuSWNvblwiPlxyXG4gICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJkYXRhLkljb25cIiBzdHlsZT1cInBhZGRpbmctcmlnaHQ6IDVweDtcIj48L2ZhLWljb24+XHJcbiAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgICA8aW9uLWxhYmVsIFtzdHlsZV09XCJsYWJlbC5TdHlsZUV4cHJlc3Npb25cIj5cclxuICAgICAgICAgICAgPGRpdiBbaW5uZXJIVE1MXT1cImxhYmVsLkxhYmVsXCI+PC9kaXY+XHJcbiAgICAgICAgICA8L2lvbi1sYWJlbD5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9pb24taXRlbT5cclxuIl19

package/esm2020/lib/zmfb/zmfb.component.mjs CHANGED Viewed

@@ -200,9 +200,9 @@ export class ZmfbComponent {
         }
     }
 }
-ZmfbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZmfbComponent, deps: [{ token: i1.FieldService }, { token: i1.ResourceApiService }, { token: i1.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
-ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZmfbComponent, selector: "app-zmfb", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div class=\"zmfb-wrap\">\r\n  <div class=\"k-overlay\" *ngIf=\"dialOpen\"></div>\r\n  <kendo-floatingactionbutton icon=\"plus\"\r\n                              [themeColor]=\"buttonColor\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"bottomEnd\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\">\r\n    <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\" [themeColor]=\"buttonColor\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar> \r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [".button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}\n"], components: [{ type: i2.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["positionMode", "dialItemAnimation", "tabIndex", "dialItems", "themeColor", "size", "rounded", "shape", "disabled", "align", "offset", "icon", "iconClass", "buttonClass", "dialClass", "text"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { type: i3.AvatarComponent, selector: "kendo-avatar", inputs: ["border", "shape", "rounded", "size", "themeColor", "fillMode", "fill", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZmfbComponent, decorators: [{
+ZmfbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZmfbComponent, deps: [{ token: i1.FieldService }, { token: i1.ResourceApiService }, { token: i1.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
+ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZmfbComponent, selector: "app-zmfb", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div class=\"zmfb-wrap\">\r\n  <div class=\"k-overlay\" *ngIf=\"dialOpen\"></div>\r\n  <kendo-floatingactionbutton icon=\"plus\"\r\n                              [themeColor]=\"buttonColor\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"bottomEnd\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\">\r\n    <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\" [themeColor]=\"buttonColor\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar> \r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [".button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}\n"], components: [{ type: i2.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["positionMode", "dialItemAnimation", "tabIndex", "dialItems", "themeColor", "size", "rounded", "shape", "disabled", "align", "offset", "icon", "iconClass", "buttonClass", "dialClass", "text"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { type: i3.AvatarComponent, selector: "kendo-avatar", inputs: ["border", "shape", "rounded", "size", "themeColor", "fillMode", "fill", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZmfbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zmfb', template: "<div class=\"zmfb-wrap\">\r\n  <div class=\"k-overlay\" *ngIf=\"dialOpen\"></div>\r\n  <kendo-floatingactionbutton icon=\"plus\"\r\n                              [themeColor]=\"buttonColor\"\r\n                              [positionMode]=\"positionMode\"\r\n                              [align]=\"bottomEnd\"\r\n                              [dialItems]=\"items\"\r\n                              (blur)=\"onBlur()\"\r\n                              (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\"\r\n                              (close)=\"onClose($event)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\">\r\n    <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\" [themeColor]=\"buttonColor\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar> \r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [".button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FieldService }, { type: i1.ResourceApiService }, { type: i1.WorkflowService }]; }, propDecorators: { data: [{

package/esm2020/lib/zmodal/zmodal-mobile.component.mjs CHANGED Viewed

@@ -109,9 +109,9 @@ export class ZmodalMobileComponent {
         return this.zcoreService.isDebugSession();
     }
 }
-ZmodalMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZmodalMobileComponent, deps: [{ token: i1.WebApiService }, { token: i1.ZCoreService }, { token: i1.FieldService }], target: i0.ɵɵFactoryTarget.Component });
-ZmodalMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZmodalMobileComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i4.UiactionbuttonComponent, selector: "app-uiactionbutton", inputs: ["group"] }, { type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2.IonRow, selector: "ion-row" }, { type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i5.ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "json": i6.JsonPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZmodalMobileComponent, decorators: [{
+ZmodalMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZmodalMobileComponent, deps: [{ token: i1.WebApiService }, { token: i1.ZCoreService }, { token: i1.FieldService }], target: i0.ɵɵFactoryTarget.Component });
+ZmodalMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZmodalMobileComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i4.UiactionbuttonComponent, selector: "app-uiactionbutton", inputs: ["group"] }, { type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2.IonRow, selector: "ion-row" }, { type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i5.ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "json": i6.JsonPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZmodalMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zmodal", template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.WebApiService }, { type: i1.ZCoreService }, { type: i1.FieldService }]; }, propDecorators: { modalParams: [{

package/esm2020/lib/zmodal/zmodal.component.mjs CHANGED Viewed

@@ -114,9 +114,9 @@ export class ZmodalComponent extends DialogContentBase {
         return v;
     }
 }
-ZmodalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZmodalComponent, deps: [{ token: i1.DialogRef }, { token: i2.ModalController }, { token: i3.ZCoreService }, { token: i3.WebApiService }, { token: i3.ResourceApiService }, { token: i3.FieldService }, { token: i2.Platform }, { token: i3.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-ZmodalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.4", type: ZmodalComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i5.UiactionbuttonComponent, selector: "app-uiactionbutton", inputs: ["group"] }, { type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2.IonRow, selector: "ion-row" }, { type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i6.ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "json": i7.JsonPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.4", ngImport: i0, type: ZmodalComponent, decorators: [{
+ZmodalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZmodalComponent, deps: [{ token: i1.DialogRef }, { token: i2.ModalController }, { token: i3.ZCoreService }, { token: i3.WebApiService }, { token: i3.ResourceApiService }, { token: i3.FieldService }, { token: i2.Platform }, { token: i3.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+ZmodalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ZmodalComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i5.UiactionbuttonComponent, selector: "app-uiactionbutton", inputs: ["group"] }, { type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2.IonRow, selector: "ion-row" }, { type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i6.ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "json": i7.JsonPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ZmodalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zmodal', template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.DialogRef }, { type: i2.ModalController }, { type: i3.ZCoreService }, { type: i3.WebApiService }, { type: i3.ResourceApiService }, { type: i3.FieldService }, { type: i2.Platform }, { type: i3.AlertService }]; }, propDecorators: { modalParams: [{