npm - @sd-angular/core - Versions diffs - 1.0.10 → 1.0.15 - Mend

@sd-angular/core 1.0.10 → 1.0.15

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 (527) hide show

package/grid/sd-angular-core-grid.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"SdGridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":61,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":70,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":71,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":72,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":73,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":74,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":75,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":76,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":77,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":78,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":79,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/upload-excel","name":"SdUploadExcelModule","line":80,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/form","name":"SdFormModule","line":81,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/service","name":"SdServiceModule","line":82,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdGrid"},{"__symbolic":"reference","name":"SdGridConfig"},{"__symbolic":"reference","name":"SdGridDesktopColumnEdit"},{"__symbolic":"reference","name":"SdGridDesktopColumnView"},{"__symbolic":"reference","name":"SdGridDesktopInlineFilter"},{"__symbolic":"reference","name":"SdGridMobileItemView"},{"__symbolic":"reference","name":"SdGridPopupEditor"},{"__symbolic":"reference","name":"SdGridPopupExportExcel"},{"__symbolic":"reference","name":"SdGridPopupFilter"},{"__symbolic":"reference","name":"SdGridPopupQuickFilterDetail"},{"__symbolic":"reference","name":"SdGridSubInformation"},{"__symbolic":"reference","name":"SdGridImportExcel"},{"__symbolic":"reference","name":"GridDesktopColumnChildrenViewComponent"},{"__symbolic":"reference","name":"CellDesktopClassNamePipe"},{"__symbolic":"reference","name":"CellMobileClassNamePipe"},{"__symbolic":"reference","name":"ColumnCommandFilterPipe"},{"__symbolic":"reference","name":"ColumnHtmlTemplatePipe"},{"__symbolic":"reference","name":"ColumnTitlePipe"},{"__symbolic":"reference","name":"ColumnValuesPipe"},{"__symbolic":"reference","name":"CommandDisabledPipe"},{"__symbolic":"reference","name":"CommandFilterPipe"},{"__symbolic":"reference","name":"CommandHidden"},{"__symbolic":"reference","name":"CommandIconPipe"},{"__symbolic":"reference","name":"CommandTitlePipe"},{"__symbolic":"reference","name":"SdDynamicItems"},{"__symbolic":"reference","name":"EditorDynamicItemPipe"},{"__symbolic":"reference","name":"EditorHandlerPipe"},{"__symbolic":"reference","name":"EditorSubInformationHandlerPipe"},{"__symbolic":"reference","name":"EditorValidatePipe"},{"__symbolic":"reference","name":"FilterMobilePipe"},{"__symbolic":"reference","name":"MobileCommandFilterPipe"},{"__symbolic":"reference","name":"MobileViewHtmlTemplatePipe"},{"__symbolic":"reference","name":"ValueTransformPipe"},{"__symbolic":"reference","name":"EditorPopupVisiblePipe"},{"__symbolic":"reference","name":"SdCellDefDirective"},{"__symbolic":"reference","name":"SdCellEditorDefDirective"},{"__symbolic":"reference","name":"SdCellFooterDevDirective"},{"__symbolic":"reference","name":"SdSubHeaderDefDirective"}],"exports":[{"__symbolic":"reference","name":"SdGrid"},{"__symbolic":"reference","name":"SdCellDefDirective"},{"__symbolic":"reference","name":"SdCellEditorDefDirective"},{"__symbolic":"reference","name":"SdCellFooterDevDirective"},{"__symbolic":"reference","name":"SdSubHeaderDefDirective"}],"providers":[{"__symbolic":"reference","name":"HandlerLocal"},{"__symbolic":"reference","name":"HandlerDotnet"},{"__symbolic":"reference","name":"EditorHandlerPipe"}]}]}],"members":{}},"SdGrid":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":66,"character":1},"arguments":[{"selector":"sd-grid","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":70,"character":19},"member":"OnPush"},"template":"<div class=\"clearfix\"></div>\r\n<ng-container ngIf=\"!isMobileOrTablet && !gridOption?.filter?.disabled\">\r\n <div class=\"row mx-0 mt-5\">\r\n <div\r\n ngIf=\"gridOption?.key && gridOption?.filter?.multiple !== false && (!gridOption?.filter?.quickFilterVisibility \|\| gridOption?.filter?.quickFilterVisibility === 'inline')\"\r\n class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <mat-form-field class=\"sd-md\" appearance=\"outline\" style=\"width: 100%;\">\r\n <mat-label>{{'Quick filters' \| sdTranslate}}</mat-label>\r\n <mat-select [(ngModel)]=\"selectedQuickFilter\" (selectionChange)=\"onSelectQuickFilter($event?.value)\" #matSelect>\r\n <mat-option value=\"\">{{'Please select' \| sdTranslate}}</mat-option>\r\n <mat-option ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n <div style=\"display:flex; justify-content: space-between\">\r\n <span>{{quickFilter.code}}</span>\r\n <div>\r\n <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n fontIcon=\"fa-pencil\"></mat-icon>\r\n <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n fontIcon=\"fa-trash-o\"></mat-icon>\r\n </div>\r\n </div>\r\n </mat-option>\r\n <mat-option>\r\n <div (click)=\"onCreateQuickFilter($event)\">\r\n <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n <span>{{'Create quick filter' \| sdTranslate}}</span>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <sd-grid-desktop-inline-filter class=\"c-display-contents\" [columns]=\"gridOption.columns\" [filter]=\"filter\"\r\n [externalFilter]=\"externalFilter\" (sdChange)=\"updateFilter()\" [inlineExternal]=\"inlineExternal\"\r\n [inlineColumn]=\"inlineColumn\" [filterOption]=\"gridOption.filter\">\r\n </sd-grid-desktop-inline-filter>\r\n </div>\r\n</ng-container>\r\n<div ngIf=\"!isMobileOrTablet; else elseMobileOrTablet\" class=\"sd-box\"\r\n [ngClass]=\"{'box-shadow-none': gridOption.hideFooter}\">\r\n <ng-container ngTemplateOutlet=\"gridViewContent\"></ng-container>\r\n <div [ngClass]=\"{'d-none': gridOption.hideFooter}\" class=\"sd-box-footer clearfix\">\r\n <div style=\"display: flex; align-items: center; align-content: space-between;\">\r\n <div style=\"flex: 1;\">\r\n <sd-button ngIf=\"sdGridPopupFilter\" class=\"mr-6\" [title]=\"'Filter' \| sdTranslate\" icon=\"filter_list\" size=\"sm\"\r\n (action)=\"onFilterPopup()\"></sd-button>\r\n <sd-button ngIf=\"!gridOption?.hideReload\" class=\"mr-6\" [title]=\"'Reload' \| sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\"></sd-button>\r\n <sd-button ngIf=\"gridOption.onImportExcel\" class=\"mr-6\" [title]=\"'Import' \| sdTranslate\" icon=\"publish\"\r\n size=\"sm\" (action)=\"sdGridImportExcel.open()\"></sd-button>\r\n <ng-container ngIf=\"sdGridPopupExportExcel\">\r\n <sd-button ngIf=\"!gridOption.key\" class=\"mr-6\" [title]=\"'Export' \| sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n (action)=\"sdGridPopupExportExcel.exportDefault()\" [disabled]=\"!viewItems?.length\">\r\n </sd-button>\r\n <sd-button ngIf=\"gridOption.key\" class=\"mr-6\" [title]=\"'Export' \| sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" [disabled]=\"!viewItems?.length\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"sdGridPopupExportExcel.exportDefault()\" type=\"button\">\r\n <mat-icon>get_app</mat-icon>\r\n <span> {{'Export all columns' \| sdTranslate}}</span>\r\n </button>\r\n <button mat-menu-item (click)=\"sdGridPopupExportExcel.open()\" type=\"button\">\r\n <mat-icon>settings</mat-icon>\r\n <span> {{'Configure' \| sdTranslate}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button ngIf=\"gridOption.export?.bigExport\" class=\"mr-6\" [title]=\"'Big export' \| sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" (action)=\"bigExport()\" [disabled]=\"!viewItems?.length\">\r\n </sd-button>\r\n <sd-button ngIf=\"gridOption.key\" class=\"mr-6\" [title]=\"'Configure' \| sdTranslate\" icon=\"settings\" size=\"sm\"\r\n (action)=\"sdGridConfig.open()\"></sd-button>\r\n </div>\r\n <div style=\"flex: 1;\">\r\n <mat-paginator [length]=\"total\" [pageSize]=\"gridOption.paginate?.pageSize\" hidePageSize>\r\n </mat-paginator>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<ng-template #elseMobileOrTablet>\r\n <div class=\"sd-box c-mobile-box\">\r\n <div ngIf=\"!gridOption?.mobileOrTablet?.useGridView\" class=\"sd-box-body c-mobile-body\"\r\n [ngClass]=\"{'c-loading': isLoading}\" #gridBody>\r\n <i [ngClass]=\"{'d-none': !isLoading}\" class=\"fa fa-4x fa-spinner fa-pulse c-loading-icon\"></i>\r\n <ng-container ngFor=\"let item of viewItems\">\r\n <div class=\"c-mobile-item\" [ngClass]=\"{'c-mobile-item-selected':item.isChecked}\">\r\n <sd-grid-mobile-item-view [gridOption]=\"gridOption\" [item]=\"item\" (check)=\"onCheck(item)\">\r\n </sd-grid-mobile-item-view>\r\n <div class=\"p-2\" ngIf=\"gridOption?.subInformation && item?.subInformation?.isOpened\">\r\n <sd-grid-sub-information [subItems]=\"item?.subInformation?.subItems\" [option]=\"gridOption?.subInformation\">\r\n </sd-grid-sub-information>\r\n </div>\r\n <div class=\"c-mobile-command\">\r\n <div>\r\n <i ngIf=\"gridOption?.subInformation && item.subInformation?.isLoading\"\r\n class=\"fa fa-spinner fa-spin ml-1 c-mobile-action\" (click)=\"expandOrCollapse(item)\"></i>\r\n <i ngIf=\"gridOption?.subInformation && !item.subInformation?.isLoading\" class=\"fa ml-1 c-mobile-action\"\r\n [ngClass]=\"{'fa-plus': !item.subInformation?.isOpened, 'fa-minus': item.subInformation?.isOpened}\"\r\n (click)=\"expandOrCollapse(item)\"></i>\r\n </div>\r\n <ng-container ngIf=\"gridOption.commands \| mobileCommandFilter:item \| async; $implicit as filteredCommands\">\r\n <div ngIf=\"filteredCommands.length\">\r\n <button [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button type=\"button\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <!-- <i [matMenuTriggerFor]=\"menu\" class=\"fa fa-navicon fa-fw c-mobile-action\"></i> -->\r\n <mat-menu #menu=\"matMenu\">\r\n <button ngFor=\"let command of filteredCommands\" mat-menu-item (click)=\"command.click(item)\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\" type=\"button\">\r\n <i ngIf=\"!command.fontSet\" class=\"{{command.icon \| commandIcon:item}}\"></i>\r\n <mat-icon ngIf=\"command.fontSet\" [fontSet]=\"command.fontSet\">{{command.icon \| commandIcon:item}}\r\n </mat-icon>\r\n <span> {{command.title \| commandTitle:item}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container ngIf=\"gridOption?.mobileOrTablet?.useGridView\">\r\n <ng-container ngTemplateOutlet=\"gridViewContent\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'d-none': gridOption.hideFooter}\" class=\"sd-box-footer clearfix\">\r\n <sd-button icon=\"more_horiz\" size=\"sm\" [matMenuTriggerFor]=\"mobileAction\"></sd-button>\r\n <mat-menu #mobileAction=\"matMenu\">\r\n <button ngIf=\"sdGridPopupFilter\" mat-menu-item (click)=\"onFilterPopup()\" type=\"button\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span> {{'Filter' \| sdTranslate}}</span>\r\n </button>\r\n <button ngIf=\"!gridOption?.hideReload\" mat-menu-item (click)=\"reload()\" type=\"button\">\r\n <mat-icon>refresh</mat-icon>\r\n <span> {{'Reload' \| sdTranslate}}</span>\r\n </button>\r\n <button ngIf=\"gridOption.onImportExcel\" mat-menu-item (click)=\"sdGridImportExcel.open()\" type=\"button\">\r\n <mat-icon>publish</mat-icon>\r\n <span> {{'Import' \| sdTranslate}}</span>\r\n </button>\r\n <button ngIf=\"sdGridPopupExportExcel\" mat-menu-item (click)=\"sdGridPopupExportExcel.open()\" type=\"button\"\r\n [disabled]=\"!viewItems?.length\">\r\n <mat-icon>get_app</mat-icon>\r\n <span> {{'Export' \| sdTranslate}}</span>\r\n </button>\r\n <button ngIf=\"gridOption.key\" mat-menu-item (click)=\"sdGridConfig.open()\" type=\"button\">\r\n <mat-icon>settings</mat-icon>\r\n <span> {{'Configure' \| sdTranslate}}</span>\r\n </button>\r\n </mat-menu>\r\n <ng-container ngIf=\"gridOption?.key && gridOption?.filter?.multiple !== false && !gridOption?.filter?.disabled\">\r\n <sd-button icon=\"filter_list\" size=\"sm\" [matMenuTriggerFor]=\"mobileQuickFilter\"></sd-button>\r\n <mat-menu #mobileQuickFilter=\"matMenu\">\r\n <button mat-menu-item ngFor=\"let quickFilter of quickFilters\" (click)=\"onSelectQuickFilter(quickFilter.code)\"\r\n type=\"button\" style=\"display:flex; justify-content: space-between\">\r\n <span>{{quickFilter.code}}</span>\r\n <div>\r\n <mat-icon class=\"mr-1\" (click)=\"onEditQuickFilter($event, quickFilter)\">edit</mat-icon>\r\n <mat-icon class=\"mr-0\" (click)=\"onDeleteQuickFilter($event, quickFilter)\">delete</mat-icon>\r\n </div>\r\n </button>\r\n <button mat-menu-item (click)=\"onCreateQuickFilter($event)\" type=\"button\">\r\n <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n <span>{{'Create quick filter' \| sdTranslate}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <div class=\"row mr-0 ml-0 text-right pull-right\">\r\n <mat-paginator [length]=\"total\" [pageSize]=\"gridOption.paginate?.pageSize\" hidePageSize>\r\n </mat-paginator>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<!-- Modal Configure Grid -->\r\n<sd-grid-config (sdChange)=\"loadConfig($event)\" #sdGridConfig></sd-grid-config>\r\n<sd-grid-popup-editor (save)=\"onSave($event)\" #sdGridPopupEditor></sd-grid-popup-editor>\r\n<!-- Import Excel -->\r\n<sd-grid-import-excel ngIf=\"gridOption?.onImportExcel\" [key]=\"gridOption?.key\" [columns]=\"gridOption?.columns\"\r\n [accept]=\"gridOption?.onImportExcel\" #sdGridImportExcel></sd-grid-import-excel>\r\n<sd-grid-popup-export-excel ngIf=\"!gridOption.export?.disabled\" [key]=\"gridOption?.key\" [columns]=\"gridOption?.columns\"\r\n [extendColumns]=\"gridOption?.export?.columns\" [fileName]=\"gridOption?.export?.fileName\"\r\n [exportOption]=\"gridOption?.export\" [validator]=\"gridOption?.export?.validator\"\r\n (exportByTemplate)=\"onExportByTemplate($event)\" #sdGridPopupExportExcel>\r\n</sd-grid-popup-export-excel>\r\n<sd-grid-popup-filter\r\n ngIf=\"!gridOption?.filter?.disabled && (isMobileOrTablet \|\| gridOption?.filter?.type === 'popup')\"\r\n [key]=\"gridOption?.key\" (accept)=\"updateFilter($event)\" [filterOption]=\"gridOption?.filter\" (clear)=\"onClearFilter()\"\r\n (loadInlineFilter)=\"onFilterConfigurationLoaded($event)\" #sdGridPopupFilter>\r\n</sd-grid-popup-filter>\r\n\r\n<ng-template #gridViewContent>\r\n <div class=\"sd-box-body p-0\">\r\n <div class=\"row mx-0\">\r\n <div [ngClass]=\"{'c-loading': isLoading}\" class=\"table-responsive\" #gridBody style=\"position: relative;\">\r\n <i [ngClass]=\"{'d-none': !isLoading}\" class=\"fa fa-5x fa-spinner fa-pulse c-loading-icon\"></i>\r\n <table ngIf=\"gridOption\" class=\"table c-table\"\r\n [ngClass]=\"{'c-loading-margin': isLoading, 'c-bordered': configuration?.style?.bordered, 'c-stripped': configuration?.style?.bordered}\"\r\n style=\"border:0!important;\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th class=\"position-sticky c-sticky-all align-middle p-0\" style=\"width:4px; min-width: 4px;\" #fixedHeader>\r\n </th>\r\n <th ngIf=\"configuration?.style?.bordered\" class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\"\r\n #fixedHeader></th>\r\n <th ngIf=\"gridOption?.subInformation\" class=\"position-sticky c-sticky-all align-middle text-center p-0\"\r\n style=\"width:30px;min-width: 30px;line-height: 3rem\" #fixedHeader>\r\n </th>\r\n <th ngIf=\"gridOption?.subInformation && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <th ngIf=\"gridOption?.checkable && viewItems?.length\"\r\n class=\"position-sticky c-sticky-all align-middle text-center p-0 w-20\" style=\"width:20px;\" #fixedHeader>\r\n <mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"isCheckedAll\"\r\n (change)=\"checkAll(isCheckedAll)\"></mat-checkbox>\r\n </th>\r\n <th ngIf=\"gridOption?.checkable && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <th ngIf=\"gridOption?.commands?.length && viewItems?.length\"\r\n class=\"position-sticky align-middle text-center p-0 c-sticky-all c-w-1\" #fixedHeader>\r\n </th>\r\n <th ngIf=\"gridOption.commands?.length && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <th ngIf=\"gridOption.editor?.addable \|\| gridOption.editor?.editable\"\r\n class=\"position-sticky c-sticky-all align-middle text-center p-0\"\r\n style=\"width:60px;min-width:60px;max-width:60px;line-height: 1.5\" #fixedHeader>\r\n <div ngIf=\"gridOption.editor.addable\" class=\"align-middle text-center\">\r\n <button ngIf=\"!gridOption.editor.limit \|\| (gridOption.editor.limit > items.length)\" type=\"button\"\r\n (click)=\"onCreate()\" aria-label=\"Add\" mat-icon-button type=\"button\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n </th>\r\n <th ngIf=\"gridOption.editor && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <th ngIf=\"gridOption?.numberable\" class=\"position-sticky c-sticky-all align-middle text-center p-0\"\r\n style=\"width:20px;\" #fixedHeader>\r\n #\r\n </th>\r\n <th ngIf=\"gridOption?.numberable && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <ng-container ngFor=\"let column of fixedColumns\">\r\n <th class=\"position-sticky align-middle cursor-pointer c-cell c-sticky-all\" #fixedHeader\r\n [ngStyle]=\"{'width':column.width ? column.width : '','max-width': column.width ? column.width : '','min-width': !column.width \|\| column.width === 'auto' ? '200px' : column.width}\">\r\n <span [title]=\"column.title\" class=\"c-header-title\" (click)=\"sort(column)\">\r\n {{column.title}}\r\n <i ngIf=\"column.type !== 'children' && column.type !== 'image' && gridOption.sortable !== false && column.sortable !== false && orderBy !== column.field\"\r\n class=\"fa fa-sort fa-fw\"></i>\r\n <i ngIf=\"orderBy === column.field && orderDirection == 'ASC'\" class=\"fa fa-sort-asc fa-fw\"></i>\r\n <i ngIf=\"orderBy === column.field && orderDirection == 'DESC'\" class=\"fa fa-sort-desc fa-fw\"></i>\r\n </span>\r\n <ng-container\r\n ngIf=\"!gridOption?.filter?.disabled && gridOption?.filter?.columnInline !== 'outside' && !column?.filter?.disabled && (inlineColumn[column.field] \|\| gridOption?.filter?.type === 'inline')\">\r\n <sd-input size=\"sm\"\r\n ngIf=\"column.type === 'string' \|\| column.type === 'number' \|\| column.type === 'children'\"\r\n [(model)]=\"filter[column.field]\" (keyupEnter)=\"updateFilter()\">\r\n </sd-input>\r\n <sd-select ngIf=\"column.type === 'bool'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\"\r\n [items]=\"[{value: 1, display: column.trueValue \|\| 'TRUE'}, {value: 0, display: column.falseValue \|\| 'FALSE'}]\"\r\n valueField=\"value\" displayField=\"display\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'values'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n [filtered]=\"column?.editor?.autocomplete\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'radio'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\" [items]=\"column.values\" [valueField]=\"column.valueField\"\r\n [displayField]=\"column.displayField\">\r\n </sd-select>\r\n <sd-date-time size=\"sm\"\r\n ngIf=\"column.type === 'date' \|\| column.type === 'datetime' \|\| column.type === 'time'\"\r\n [(model)]=\"filter[column.field]\" (sdChange)=\"updateFilter()\" type=\"date\">\r\n </sd-date-time>\r\n </ng-container>\r\n </th>\r\n <th ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n </ng-container>\r\n <th ngFor=\"let column of normalColumns\"\r\n class=\"position-sticky align-middle cursor-pointer border-top-0 border-bottom-0 c-cell c-sticky-top c-normal-column\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '','max-width': column.width ? column.width : '','min-width': !column.width \|\| column.width === 'auto' ? '200px' : column.width}\">\r\n <span [title]=\"column.title\" class=\"c-header-title\" (click)=\"sort(column)\">\r\n {{column.title}}\r\n <i ngIf=\"column.type !== 'children' && gridOption.sortable !== false && column.sortable !== false && orderBy !== column.field\"\r\n class=\"fa fa-sort fa-fw\"></i>\r\n <i ngIf=\"orderBy == column.field && orderDirection == 'ASC'\" class=\"fa fa-sort-asc fa-fw\"></i>\r\n <i ngIf=\"orderBy == column.field && orderDirection == 'DESC'\" class=\"fa fa-sort-desc fa-fw\"></i>\r\n </span>\r\n <ng-container\r\n ngIf=\"!gridOption?.filter?.disabled && gridOption?.filter?.columnInline !== 'outside' && !column?.filter?.disabled && (inlineColumn[column.field] \|\| gridOption?.filter?.type === 'inline')\">\r\n <sd-input size=\"sm\"\r\n ngIf=\"column.type === 'string' \|\| column.type === 'number' \|\| column.type === 'children'\"\r\n [(model)]=\"filter[column.field]\" (keyupEnter)=\"updateFilter()\">\r\n </sd-input>\r\n <sd-select ngIf=\"column.type === 'bool'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\"\r\n [items]=\"[{value: 1, display: column.trueValue \|\| 'TRUE'}, {value: 0, display: column.falseValue \|\| 'FALSE'}]\"\r\n valueField=\"value\" displayField=\"display\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'values'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n [filtered]=\"column?.editor?.autocomplete\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'radio'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\" [items]=\"column.values\" [valueField]=\"column.valueField\"\r\n [displayField]=\"column.displayField\">\r\n </sd-select>\r\n <sd-date-time size=\"sm\"\r\n ngIf=\"column.type === 'date' \|\| column.type === 'datetime' \|\| column.type === 'time'\"\r\n [(model)]=\"filter[column.field]\" (sdChange)=\"updateFilter()\" type=\"date\">\r\n </sd-date-time>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container ngFor=\"let item of viewItems; index as idx; trackBy: trackById\">\r\n <tr>\r\n <td class=\"position-sticky c-sticky-left p-0\"\r\n [ngClass]=\"{'c-error': ((gridOption.editor?.type === 'inline' \|\| item.editingStatus) && item.editorHandler?.errorMessage), \r\n 'c-selected': !((gridOption.editor?.type === 'inline' \|\| item.editingStatus) && item.editorHandler?.errorMessage) && selectedItem === item}\"\r\n style=\"width:4px;min-width: 4px;left:0\" matTooltipPosition=\"after\"\r\n [matTooltip]=\"item.editingStatus ? item.editorHandler?.errorMessage:''\" #fixedBody>\r\n </td>\r\n <td ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.subInformation\" class=\"position-sticky text-center align-middle p-0 c-sticky-left\"\r\n style=\"width:30px;min-width: 30px;line-height: 3rem\" #fixedBody>\r\n <button ngIf=\"!item.editingStatus\" (click)=\"expandOrCollapse(item)\" type=\"button\" class=\"c-btn-icon\">\r\n <i ngIf=\"item.subInformation?.isLoading\" class=\"fa fa-spinner fa-spin\"></i>\r\n <i ngIf=\"!item.subInformation?.isLoading\" class=\"fa\"\r\n [ngClass]=\"{'fa-caret-right': !item.subInformation?.isOpened, 'fa-caret-down': item.subInformation?.isOpened}\"></i>\r\n </button>\r\n </td>\r\n <td ngIf=\"gridOption.subInformation && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.checkable && viewItems?.length\"\r\n class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n <div ngIf=\"!item.editingStatus\" class=\"align-middle text-center w-20\" style=\"width:20px;\">\r\n <mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"item.isChecked\"\r\n (change)=\"onCheck(item, true)\"></mat-checkbox>\r\n </div>\r\n </td>\r\n <td ngIf=\"gridOption.checkable && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.commands?.length && viewItems?.length\"\r\n class=\"position-sticky align-middle px-2 py-0 c-sticky-left c-w-1\" #fixedBody>\r\n <div ngIf=\"!item.editingStatus\" class=\"d-flex align-middle text-center justify-content-center\">\r\n <ng-container\r\n ngIf=\"gridOption.commands \| commandFilter:item \| async; $implicit as filteredCommands\">\r\n <section ngFor=\"let command of filteredCommands\">\r\n <ng-container ngIf=\"!command.children?.length; else elseCommandChildren\">\r\n <button ngIf=\"!command.fontSet\" (click)=\"command.click(item)\" type=\"button\"\r\n class=\"c-btn-icon\" [matTooltip]=\"command.title \| commandTitle:item\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <i class=\"{{command.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button ngIf=\"command.fontSet\" [matTooltip]=\"command.title \| commandTitle:item\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\" (click)=\"command.click(item)\"\r\n type=\"button\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon [fontSet]=\"command.fontSet\">{{command.icon \| commandIcon:item}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-template #elseCommandChildren>\r\n <button ngIf=\"command.icon\" [matMenuTriggerFor]=\"menu\" type=\"button\" class=\"c-btn-icon\"\r\n [matTooltip]=\"command.title\" [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <i class=\"{{command.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button ngIf=\"!command.icon\" mat-icon-button [matMenuTriggerFor]=\"menu\" type=\"button\"\r\n class=\"c-btn-icon-30\" [matTooltip]=\"command.title\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container ngFor=\"let childCommand of command.children\">\r\n <button ngIf=\"!(item \| commandHidden:childCommand \| async)\" type=\"button\" mat-menu-item\r\n [disabled]=\"childCommand.disabled \| commandDisabled:item\"\r\n (click)=\"childCommand.click(item)\">\r\n <i ngIf=\"!childCommand.fontSet\" class=\"{{childCommand.icon \| commandIcon:item}}\"></i>\r\n <mat-icon ngIf=\"childCommand.fontSet\" [fontSet]=\"childCommand.fontSet\">\r\n {{childCommand.icon \| commandIcon:item}}</mat-icon>\r\n <span> {{childCommand.title \| commandTitle:item}}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-template>\r\n </section>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td ngIf=\"gridOption.commands?.length && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.editor?.addable \|\| gridOption.editor?.editable\"\r\n class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n <div class=\"align-middle text-center\"\r\n style=\"width:60px;min-width:60px;max-width:60px;line-height: 1.5\">\r\n <button\r\n ngIf=\"!item.editingStatus && gridOption.editor?.type !== 'inline' && gridOption.editor?.editable\"\r\n [disabled]=\"item.editorHandler?.disabled\" (click)=\"onUpdate(item, true)\" aria-label=\"Edit\"\r\n type=\"button\" mat-icon-button>\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button ngIf=\"item.editingStatus && gridOption.editor?.type !== 'inline'\"\r\n [disabled]=\"item.editorHandler?.errorMessage \|\| item.editorHandler?.saving\" (click)=\"onSave(item)\"\r\n type=\"button\" aria-label=\"Save\" mat-icon-button>\r\n <mat-icon>save</mat-icon>\r\n </button>\r\n <button ngIf=\"item.editingStatus \|\| gridOption.editor?.type === 'inline'\" (click)=\"onCancel(item)\"\r\n aria-label=\"Cancel\" mat-icon-button\r\n [disabled]=\"gridOption.editor?.type === 'inline' && item.editorHandler?.disabled\" type=\"button\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </div>\r\n </td>\r\n <td ngIf=\"gridOption.editor && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.numberable\" class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n <div ngIf=\"!item.editingStatus\" class=\"align-middle text-center\" style=\"width:20px;\">\r\n <!-- {{gridOption.paginate?.pageSize (currentPage - 1) + idx + 1}} -->\r\n {{idx + 1}}\r\n </div>\r\n </td>\r\n <td ngIf=\"gridOption.numberable && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <ng-template ngFor let-column [ngForOf]=\"fixedColumns\">\r\n <td class=\"position-sticky align-middle c-cell c-sticky-left\"\r\n [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number' && column.type !== 'children', 'text-right': column.type === 'number'}\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '','min-width': !column.width \|\| column.width === 'auto' ? '200px' : column.width}\"\r\n (click)=\"rowHandler.click(item)\" #fixedBody>\r\n <ng-container ngIf=\"column.type !== 'children';else elseColumnChildren\">\r\n <ng-container ngIf=\"item[column.field] \| editorHandler:item:gridOption\">\r\n <div\r\n ngIf=\"item.editorHandler[column.field].visible && gridOption.editor?.validate && !(item[column.field] \| editorValidate:item:gridOption.editor.validate \| async)\">\r\n </div>\r\n <ng-container ngIf=\"item.editorHandler[column.field].visible;else columnView\">\r\n <div style=\"width: 100%\">\r\n <ng-container ngIf=\"cellEditorDef[column.field]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellEditorDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n <sd-grid-desktop-column-edit ngIf=\"!cellEditorDef[column.field]\" [column]=\"column\"\r\n [item]=\"item\" (sdChange)=\"onEditorChange()\">\r\n </sd-grid-desktop-column-edit>\r\n </div>\r\n </ng-container>\r\n <ng-template #columnView>\r\n <div class=\"align-middle\" (dblclick)=\"rowHandler.dblClick(item)\">\r\n <ng-container ngIf=\"cellDef[column.field]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n <sd-grid-desktop-column-view ngIf=\"!cellDef[column.field]\" [column]=\"column\" [item]=\"item\">\r\n </sd-grid-desktop-column-view>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #elseColumnChildren>\r\n <sd-grid-desktop-column-children-view [column]=\"column\" [item]=\"item\">\r\n </sd-grid-desktop-column-children-view>\r\n </ng-template>\r\n </td>\r\n <td ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n </ng-template>\r\n <td ngFor=\"let column of normalColumns\" class=\"align-middle c-cell c-normal-column\"\r\n (click)=\"rowHandler.click(item)\"\r\n [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number' && column.type !== 'children', 'text-right': column.type === 'number'}\"\r\n (dblclick)=\"rowHandler.dblClick(item)\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '', 'min-width': !column.width \|\| column.width === 'auto' ? '200px' : column.width}\">\r\n <ng-container ngIf=\"column.type !== 'children';else elseColumnChildren\">\r\n <ng-container ngIf=\"item[column.field] \| editorHandler:item:gridOption\">\r\n <div\r\n ngIf=\"item.editorHandler[column.field].visible && gridOption.editor?.validate && !(item[column.field] \| editorValidate:item:gridOption.editor.validate \| async)\">\r\n </div>\r\n <ng-container ngIf=\"item.editorHandler[column.field].visible;else columnView\">\r\n <div style=\"width: 100%\">\r\n <ng-container ngIf=\"cellEditorDef[column.field]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellEditorDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n <sd-grid-desktop-column-edit ngIf=\"!cellEditorDef[column.field]\" [column]=\"column\"\r\n [item]=\"item\" (sdChange)=\"onEditorChange()\">\r\n </sd-grid-desktop-column-edit>\r\n </div>\r\n </ng-container>\r\n <ng-template #columnView>\r\n <div class=\"align-middle\" (dblclick)=\"rowHandler.dblClick(item)\">\r\n <ng-container ngIf=\"cellDef[column.field]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n <sd-grid-desktop-column-view ngIf=\"!cellDef[column.field]\" [column]=\"column\" [item]=\"item\">\r\n </sd-grid-desktop-column-view>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #elseColumnChildren>\r\n <sd-grid-desktop-column-children-view [column]=\"column\" [item]=\"item\">\r\n </sd-grid-desktop-column-children-view>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n <tr ngIf=\"gridOption?.subInformation && item?.subInformation?.isOpened\" class=\"c-no-hover\">\r\n <td class=\"p-10\" colspan=\"100\">\r\n <sd-grid-sub-information [subItems]=\"item?.subInformation?.subItems\"\r\n [option]=\"gridOption?.subInformation\">\r\n </sd-grid-sub-information>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <ng-container ngIf=\"viewItems?.length\">\r\n <ng-container ngFor=\"let footerIndex of footerRows\">\r\n <tr>\r\n <td class=\"position-sticky c-sticky-left p-0\" style=\"width:4px;min-width: 4px;left:0\" #fixedBody>\r\n </td>\r\n <td ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.subInformation\"\r\n class=\"position-sticky text-center align-middle p-0 c-sticky-left\"\r\n style=\"width:30px;min-width: 30px;line-height: 3rem\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.subInformation && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.checkable && viewItems?.length\"\r\n class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.checkable && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.commands?.length && viewItems?.length\"\r\n class=\"position-sticky align-middle px-2 py-0 c-sticky-left c-w-1\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.commands?.length && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.editor?.addable \|\| gridOption.editor?.editable\"\r\n class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.editor && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.numberable\" class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.numberable && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <ng-template ngFor let-column [ngForOf]=\"fixedColumns\">\r\n <td class=\"position-sticky align-middle p-0 c-sticky-left\" #fixedBody>\r\n <ng-container ngIf=\"cellFooterDef[column.field] && cellFooterDef[column.field][footerIndex]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellFooterDef[column.field][footerIndex].templateRef;context:{items: viewItems, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n <td ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n </ng-template>\r\n <td ngFor=\"let column of normalColumns\" class=\"align-middle p-0 c-normal-column\">\r\n <ng-container ngIf=\"cellFooterDef[column.field] && cellFooterDef[column.field][footerIndex]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellFooterDef[column.field][footerIndex].templateRef;context:{items: viewItems, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n <tr ngIf=\"!viewItems?.length && !isLoading\">\r\n <td class=\"c-empty\" colspan=\"100\">\r\n <mat-icon>cloud_off</mat-icon>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>","styles":[".c-table.table{margin-bottom:5px}.c-table.table td.c-empty,.c-table.table th.c-empty{background-color:#fff;border:none!important;text-align:center}.c-table.table td.c-empty mat-icon,.c-table.table th.c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}.c-table.table.c-bordered,.c-table.table.c-bordered td,.c-table.table.c-bordered th{border:1px solid #dee2e6!important}.c-table.table.c-bordered td.c-empty,.c-table.table.c-bordered th.c-empty{background-color:#fff;border:none!important;text-align:center}.c-table.table.c-bordered td.c-empty mat-icon,.c-table.table.c-bordered th.c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}.c-table.table.c-bordered td.c-normal-column,.c-table.table.c-bordered th.c-normal-column{border-left:none!important}.c-table.table.c-bordered td.c-sticky-spliter,.c-table.table.c-bordered th.c-sticky-spliter{background-color:#dee2e6!important;border:none!important;display:table-cell;max-width:1px!important;min-width:1px!important;width:1px!important}.c-table.table.c-bordered td.c-sticky-left,.c-table.table.c-bordered th.c-sticky-left{border-left:0!important;border-right:0!important}.c-table.table.c-bordered td.c-sticky-all,.c-table.table.c-bordered th.c-sticky-all{border:0!important}.c-table.table thead.thead-light th{background-color:#eceff1;border-top:none!important;color:#2f3136;font-size:14px!important;height:40px;min-width:0}.c-table.table thead.thead-light th.c-cell{padding:3px 5px!important}.c-table.table thead.thead-light th .mat-checkbox label{margin-bottom:0}.c-table.table tbody tr:not(.c-no-hover):hover,.c-table.table tbody tr:not(.c-no-hover):hover td.c-sticky-left{background-color:#e3f2fd!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd){background-color:#fafafa}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left{background-color:#fafafa!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left.c-sticky-spliter{background-color:#dee2e6!important;border:none!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left.c-selected{background-color:#2962ff!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left.c-error{background-color:#f82c13!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n){background-color:#fff}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left{background-color:#fff!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left.c-sticky-spliter{background-color:#dee2e6!important;border:none!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left.c-selected{background-color:#2962ff!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left.c-error{background-color:#f82c13!important}.c-table.table tbody td{font-size:13px!important;min-height:25px;min-width:0}.c-table.table tbody td.c-cell{padding:3px 5px!important}.grid-header{overflow-x:hidden;overflow-y:hidden}.c-cell-padding{padding:3px 5px!important}.c-header-title{font-weight:500;text-transform:capitalize}span.c-header-title{display:block;overflow:hidden!important;padding:0 .3rem;text-overflow:ellipsis;white-space:nowrap}.status{border-radius:1.5rem;display:inline-block;font-weight:500;padding:4px 8px;text-align:center;text-transform:uppercase}.status.c-desktop-status{width:100%}.status.c-align-left{text-align:left!important}.status-success{color:#43a047}.status-danger{color:#f44336}.page-item{cursor:pointer}.sumarize{background-color:#00bcd4;border-radius:10rem;color:#fff;display:inline-block;font-size:12px;font-weight:500;line-height:1;padding:8px 12px;text-align:center;text-transform:uppercase;white-space:normal}.cursor-pointer{cursor:pointer}.c-overflow-x-hidden{overflow-x:hidden}.c-grid-header,.c-overflow-y-hidden{overflow-y:hidden}.c-grid-header{overflow-x:hidden}.c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}.c-sticky-top{top:0!important;z-index:20}.c-sticky-left{left:0;z-index:20}.c-sticky-all{left:0;top:0!important;z-index:30}.c-sticky-spliter{background-color:#dee2e6!important;border:none!important;z-index:40!important}.c-badge:not(.c-children){border-radius:10rem;display:block!important;font-size:12px;font-weight:500;margin:0 auto;max-width:80%;padding:.3rem!important}.c-badge.c-children{font-size:14px;font-weight:500;padding:5px!important}.blinker{-webkit-animation:blinker .5s linear infinite;animation:blinker .5s linear infinite;color:#1c87c9;font-weight:500}@-webkit-keyframes blinker{50%{opacity:0}}@keyframes blinker{50%{opacity:0}}.c-loading{opacity:.4}.c-loading-icon{left:calc(50% - 2.5rem);position:-webkit-sticky;position:sticky;top:calc(50% - 2.5rem)}.c-loading-margin{margin-top:-5rem}fieldset.c-fieldset-mobile{border:1px solid #e0e0e0;border-radius:5px;padding:3px 5px}legend.c-legend-mobile{border-bottom:none;font-size:16px;font-weight:500;margin:0 10px;padding:0 5px;width:auto}.c-mobile-box{border-top:none!important;box-shadow:0 0 3px 0 rgba(0,0,0,.3)}.c-mobile-body{margin-bottom:5px;margin-top:5px;overflow-x:auto}.c-mobile-item{border:1px solid #fff;border-radius:5px;box-shadow:0 0 3px 0 rgba(0,0,0,.3);margin:8px 0;padding:5px}.c-mobile-item.c-mobile-item-selected{border:2px solid #2962ff!important}.c-mobile-item:nth-of-type(odd){background-color:#fafafa}.c-mobile-item:nth-of-type(2n){background-color:#fff}.c-mobile-row{margin-bottom:3px;margin-top:0}.c-desktop-title{font-size:13px;line-height:1.7}.c-desktop-title,.c-mobile-title{color:#212529;font-weight:700;margin-right:3px}.c-mobile-title{font-size:14px}.c-children,.c-mobile-value{color:#212529;font-size:14px;overflow-wrap:break-word}.c-mobile-badge{font-size:14px;font-weight:500;padding:5px!important}.c-mobile-command{align-items:center;border-top:1px solid #f4f4f4;display:flex;justify-content:space-between;padding:5px 3px 0}.c-mobile-action{font-size:18px!important}.c-mobile-checkable{margin:5px 0 5px -5px!important}.c-m-3{margin:3px!important}.c-m-5{margin:5px!important}.c-w-1{min-width:1px;width:1px}.c-display-contents{display:contents}.w-20{width:20px!important}.c-btn-icon-30{height:30px;line-height:30px;width:30px}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:16px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}:host td .mat-icon-button,:host th .mat-icon-button{height:24px;line-height:24px;width:24px}:host td .mat-icon-button .material-icons,:host th .mat-icon-button .material-icons{font-size:20px}:host ::ng-deep .mat-paginator-container{height:32px;min-height:32px}:host ::ng-deep .mat-paginator-container .mat-icon-button{height:28px;line-height:28px;width:28px}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-checkbox label{margin-bottom:0}"]}]}],"members":{"fixedHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":115,"character":3},"arguments":["fixedHeader"]}]}],"fixedBodies":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":116,"character":3},"arguments":["fixedBody"]}]}],"fixedGridContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":118,"character":3},"arguments":["fixedGridContainer"]}]}],"gridFixedBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":119,"character":3},"arguments":["gridFixedBody"]}]}],"gridContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":121,"character":3},"arguments":["gridContainer"]}]}],"gridHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":122,"character":3},"arguments":["gridHeader"]}]}],"gridBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":123,"character":3},"arguments":["gridBody"]}]}],"sdGridConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":125,"character":3},"arguments":["sdGridConfig",{"static":true}]}]}],"sdGridPopupEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":126,"character":3},"arguments":["sdGridPopupEditor"]}]}],"sdGridPopupFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":128,"character":3},"arguments":["sdGridPopupFilter"]}]}],"matSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":129,"character":3},"arguments":["matSelect"]}]}],"sdGridPopupExportExcel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":131,"character":3},"arguments":["sdGridPopupExportExcel"]}]}],"sdGridImportExcel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":132,"character":3},"arguments":["sdGridImportExcel"]}]}],"cellDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":134,"character":3},"arguments":[{"__symbolic":"reference","name":"SdCellDefDirective"}]}]}],"cellEditorDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":139,"character":3},"arguments":[{"__symbolic":"reference","name":"SdCellEditorDefDirective"}]}]}],"cellFooterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":144,"character":3},"arguments":[{"__symbolic":"reference","name":"SdCellFooterDevDirective"}]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":152,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":152,"character":13}]}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":301,"character":5},"arguments":[{"__symbolic":"reference","name":"GRID_CONFIG"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":301,"character":26}}],null,null,null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"IGridConfiguration"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":302,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":303,"character":19},{"__symbolic":"reference","name":"HandlerLocal"},{"__symbolic":"reference","name":"HandlerDotnet"},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":306,"character":30},{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":307,"character":22},{"__symbolic":"reference","module":"@sd-angular/core/loading","name":"SdLoadingService","line":308,"character":28},{"__symbolic":"reference","module":"@sd-angular/core/api","name":"SdApiService","line":309,"character":24},{"__symbolic":"reference","module":"@sd-angular/core/excel","name":"SdExcelService","line":310,"character":26},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":311,"character":27},{"__symbolic":"reference","name":"EditorHandlerPipe"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"reloadItem":[{"__symbolic":"method"}],"blink":[{"__symbolic":"method"}],"stopBlink":[{"__symbolic":"method"}],"generateViewItems":[{"__symbolic":"method"}],"getItems":[{"__symbolic":"method"}],"checkAll":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"setHeight":[{"__symbolic":"method"}],"loadConfig":[{"__symbolic":"method"}],"initFilter":[{"__symbolic":"method"}],"initDictionaryColumnValues":[{"__symbolic":"method"}],"generateEditorHandlers":[{"__symbolic":"method"}],"generateEditorHanlder":[{"__symbolic":"method"}],"trackById":[{"__symbolic":"method"}],"onFilterPopup":[{"__symbolic":"method"}]}},"SdGridOption":{"__symbolic":"interface"},"SdGridCommand":{"__symbolic":"interface"},"SdGridColumn":{"__symbolic":"interface"},"SdGridExternalFilter":{"__symbolic":"interface"},"defaultGridOption":{"type":{"__symbolic":"reference","name":"undefined"},"items":[],"filter":{"type":"inline","disabled":false},"sortable":true,"paginate":{"pageSize":50,"pageCount":5},"commands":[],"columns":[]},"SdGridBaseOption":{"__symbolic":"interface"},"GridBaseOptionExport":{"__symbolic":"interface"},"GridBaseOptionFilter":{"__symbolic":"interface"},"GridCommandNoChildren":{"__symbolic":"interface"},"GridCommandWithChildren":{"__symbolic":"interface"},"EditorHandler":{"__symbolic":"interface"},"GridItem":{"__symbolic":"interface"},"ColumnCommand":{"__symbolic":"interface"},"GridColumnChild":{"__symbolic":"interface"},"GridColumnChildren":{"__symbolic":"interface"},"SubOption":{"__symbolic":"interface"},"DynamicEditorItem":{"__symbolic":"interface"},"MobileConfiguration":{"__symbolic":"interface"},"SdGridConfig":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"sd-grid-config","template":"<sd-modal [title]=\"'Configuration' \| sdTranslate\" #modal>\r\n <sd-modal-body ngIf=\"storage\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 col-6\">\r\n <sd-input [label]=\"'Page size' \| sdTranslate\" [(model)]=\"storage.pageSize\" type=\"number\" step=\"1\">\r\n </sd-input>\r\n </div>\r\n </div>\r\n <div class=\"sd-box sd-box-primary\">\r\n <div class=\"sd-box-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table table-striped table-sm table-hover table-bordered c-table\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th class=\"text-center\" style=\"width: 50px\">#</th>\r\n <th sdDesktop class=\"text-center\" style=\"width: 80px\"></th>\r\n <!-- <th class=\"text-uppercase\" style=\"width: 120px\">Field </th> -->\r\n <th class=\"text-uppercase\">{{'Title' \| sdTranslate}}</th>\r\n <th sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Width' \| sdTranslate}}</th>\r\n <th class=\"text-uppercase\" style=\"width: 80px\">{{'Hidden' \| sdTranslate}}</th>\r\n <th sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Freeze' \| sdTranslate}}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr ngFor=\"let column of storage.columnConfigs; let idx = index\">\r\n <td class=\"align-middle text-center\">\r\n {{idx+1}}\r\n </td>\r\n <td sdDesktop class=\"align-middle text-center\">\r\n <button type=\"button\" [disabled]=\"idx==0\" type=\"button\" class=\"c-btn-icon\" placement=\"top\"\r\n matTooltip=\"Up\" (click)=\"moveColumnUp(idx)\">\r\n <i class=\"fa fa-arrow-up text-primary\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" [disabled]=\"idx==storage.columnConfigs.length-1\" type=\"button\"\r\n class=\"c-btn-icon\" placement=\"top\" matTooltip=\"Down\" (click)=\"moveColumnDown(idx)\">\r\n <i class=\"fa fa-arrow-down text-primary\" aria-hidden=\"true\"></i>\r\n </button>\r\n </td>\r\n <!-- <td class=\"align-middle\">{{column.originColumn.field}}</td> -->\r\n <td class=\"align-middle\">\r\n <input type=\"text\" placeholder=\"{{column.originColumn.title}}\" [(ngModel)]=\"column.title\"\r\n class=\"form-control form-control-sm\">\r\n </td>\r\n <td sdDesktop class=\"align-middle\">\r\n <input type=\"text\" placeholder=\"{{column.originColumn.width}}\" [(ngModel)]=\"column.width\"\r\n class=\"form-control form-control-sm\">\r\n </td>\r\n <td class=\"align-middle text-center\">\r\n <mat-slide-toggle [(ngModel)]=\"column.hidden\" color=\"primary\"></mat-slide-toggle>\r\n </td>\r\n <td sdDesktop class=\"align-middle text-center\">\r\n <mat-slide-toggle [(ngModel)]=\"column.fixed\" color=\"primary\"></mat-slide-toggle>\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </sd-modal-body>\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' \| sdTranslate\" size=\"sm\"></sd-button>\r\n <sd-button (action)=\"save()\" icon=\"save\" [title]=\"'Save' \| sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' \| sdTranslate\"\r\n width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"save()\" icon=\"save\" [title]=\"'Save' \| sdTranslate\"\r\n color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>","styles":[".c-btn-icon{background:none!important;border:none;opacity:.8}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}.table td,.table th{padding:.2rem!important}.c-table.table{margin-bottom:5px}"]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["modal"]}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":30,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":31,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/setting","name":"SdSettingService","line":32,"character":28},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":33,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"setOption":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"moveColumnUp":[{"__symbolic":"method"}],"moveColumnDown":[{"__symbolic":"method"}],"emitOnChange":[{"__symbolic":"method"}]}},"OriginColumn":{"__symbolic":"interface"},"ConfigOption":{"__symbolic":"interface"},"ConfigResult":{"__symbolic":"interface"},"ConfigStorage":{"__symbolic":"interface"},"ConfigColumn":{"__symbolic":"interface"},"GridDesktopColumnChildrenViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-desktop-column-children-view","template":"<ng-container ngIf=\"column.children?.length\">\r\n <div class=\"row mx-n2 c-cell-padding\">\r\n <div ngFor=\"let childColumn of column.children \| filterMobile:item\" class=\"px-2\"\r\n [ngClass]=\"{'col-sm-6': childColumn?.colSpan === 1, 'col-sm-12': !childColumn?.colSpan \|\| childColumn?.colSpan === 2}\">\r\n <span class=\"c-title\">\r\n {{item \| columnTitle:childColumn.title:childColumn.dynamicTitle \| async}}:\r\n </span>\r\n <span ngIf=\"childColumn.type === 'string'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| valueTransform:item:childColumn}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| valueTransform:item:childColumn}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'number'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| valueTransform:item:childColumn}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| valueTransform:item:childColumn}}\r\n </ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'datetime'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.timeDifferent \| async}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n <span matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'\">{{item[childColumn.field] \| sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.timeDifferent \| async}}</span>\r\n </ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'date'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| sdTimeDifferent:'dd/MM/yyyy':childColumn.timeDifferent \| async}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n <span matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[childColumn.field] \| date:'dd/MM/yyyy'\">{{item[childColumn.field] \| sdTimeDifferent:'dd/MM/yyyy':childColumn.timeDifferent \| async}}</span>\r\n </ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'time'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| date:'HH:mm'}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| date:'HH:mm'}}\r\n </ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'bool'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n <strong ngIf=\"item[childColumn.field]\" class=\"text-success\">{{childColumn.trueValue \|\| 'True'}}</strong>\r\n <strong ngIf=\"!item[childColumn.field]\" class=\"text-danger\">{{childColumn.falseValue \|\| 'False'}}</strong>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'color'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"><input disabled=\"true\"\r\n type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n <ng-container ngIf=\"childColumn.type === 'values'\">\r\n <ng-container ngIf=\"childColumn?.dictionary[item[childColumn.field]] as dic; else elseNotInDic\">\r\n <span ngIf=\"dic.color \|\| dic.backgroundColor; else elseNoStatus\" class=\"status c-children\"\r\n [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n {{dic.text}}\r\n </span>\r\n <ng-template #elseNoStatus>\r\n <span [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n {{dic.text}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #elseNotInDic>\r\n <span [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n {{item[childColumn.field]}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <span ngIf=\"childColumn.type === 'radio'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field]}}</span>\r\n <img ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\" [width]=\"childColumn.display?.width\"\r\n [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">\r\n </div>\r\n </div>\r\n</ng-container>","styles":[".c-title{color:#212529;font-size:13px;font-weight:700;line-height:1.7;margin-right:3px}.c-badge{border-radius:10rem;color:#212529;display:block!important;font-size:14px;font-weight:500;margin:0 auto;max-width:80%;padding:5px!important}.c-badge a{color:#fff}.c-children{color:#212529;font-size:14px;overflow-wrap:break-word}.status{border-radius:1.5rem;display:inline-block;font-weight:500;padding:4px 8px;text-align:left!important;text-transform:uppercase}.status-success{color:#4caf50}.status-danger{color:#f82c13}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:20px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}"]}]}],"members":{"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdGridDesktopColumnEdit":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sd-grid-desktop-column-edit","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":19},"member":"OnPush"},"template":"<ng-container ngIf=\"column && item\">\r\n <div ngIf=\"column.type === 'string'\">\r\n <div ngIf=\"column.editor?.item;else elseUseInput\">\r\n <sd-select ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n [items]=\"item[column.editor?.item?.dependOnField] \| sdDynamicItems:dynamicItems\"\r\n [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n [items]=\"item[column.editor?.item?.dependOnField] \| sdDynamicItems:dynamicItems\"\r\n [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n </sd-autocomplete>\r\n </div>\r\n <ng-template #elseUseInput>\r\n <sd-input size=\"sm\" ngIf=\"column.editor?.click\" [(model)]=\"item[column.field]\"\r\n (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n (sdChange)=\"onEditorChange(column,item,item[column.field])\" (sdClick)=\"column.editor.click(item)\"></sd-input>\r\n <sd-input size=\"sm\" ngIf=\"!column.editor?.click\" [(model)]=\"item[column.field]\"\r\n (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input>\r\n </ng-template>\r\n </div>\r\n <div ngIf=\"column.type === 'color'\">\r\n <sd-input size=\"sm\" type=\"color\" [(model)]=\"item[column.field]\"\r\n (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n </sd-input>\r\n </div>\r\n <div ngIf=\"column.type === 'number'\">\r\n <sd-input-currency size=\"sm\" [(model)]=\"item[column.field]\"\r\n (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input-currency>\r\n </div>\r\n <div ngIf=\"column.type === 'date'\">\r\n <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"date\"></sd-date-time>\r\n </div>\r\n <div class=\"text-center\" ngIf=\"column.type === 'datetime'\">\r\n <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"datetime\"></sd-date-time>\r\n </div>\r\n <div class=\"text-center\" ngIf=\"column.type === 'time'\">\r\n <sd-time [(model)]=\"item[column.field]\"></sd-time>\r\n <!-- <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"time\"></sd-grid-date-picker-control> -->\r\n </div>\r\n <div class=\"align-middle text-center\" ngIf=\"column.type === 'bool'\">\r\n <sd-switch [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n </sd-switch>\r\n </div>\r\n <div ngIf=\"column.type === 'values'\">\r\n <div ngIf=\"column.editor?.item;else elseUseValues\">\r\n <sd-select ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n [items]=\"item[column.editor?.item?.dependOnField] \| sdDynamicItems:dynamicItems\"\r\n [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n [items]=\"item[column.editor?.item?.dependOnField] \| sdDynamicItems:dynamicItems\"\r\n [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n </sd-autocomplete>\r\n </div>\r\n <ng-template #elseUseValues>\r\n <sd-select ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n </sd-autocomplete>\r\n </ng-template>\r\n </div>\r\n <div ngIf=\"column.type === 'radio'\">\r\n <section class=\"mt-5 ml-5\">\r\n <mat-radio-group class=\"d-flex\" [(ngModel)]=\"item[column.field]\"\r\n (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n <mat-radio-button ngIf=\"!column.editor?.required\" color=\"warn\" class=\"mr-5\" value=\"\">\r\n {{'Please select' \| sdTranslate}}\r\n </mat-radio-button>\r\n <mat-radio-button color=\"primary\" class=\"mr-5\" ngFor=\"let data of column.values\"\r\n [value]=\"data[column.valueField]\">\r\n {{data[column.displayField]}}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n </div>\r\n <div class=\"align-middle text-center\" ngIf=\"column.type === 'image'\">\r\n <img [src]=\"item[column.field]\" [width]=\"column.display?.width\" [height]=\"column.display?.height\"\r\n style=\"margin: 5px 0\" (click)=\"column.click && column.click(item[column.field], item)\">\r\n </div>\r\n</ng-container>","styles":[".c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}"]}]}],"members":{"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":14,"character":17}]}]}},"SdGridDesktopColumnView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-desktop-column-view","template":"<ng-container ngIf=\"column && item\">\r\n <ng-container ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n <div (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'cursor-pointer':column.click}\"\r\n [innerHTML]=\"(item[column.field] \| columnHtmlTemplate:item:column.htmlTemplate) \| safeHtml\">\r\n </div>\r\n </ng-container>\r\n <ng-template #useDefaultView>\r\n <div ngIf=\"column.type === 'string'\">\r\n <span [className]=\"item[column.field] \| cellDesktopClassName:item:column\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[column.field]}\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| valueTransform:item:column}}</a>\r\n <ng-container ngIf=\"!column.click\">{{item[column.field] \| valueTransform:item:column}}</ng-container>\r\n </span>\r\n <ng-container ngIf=\"column.commands \| columnCommandFilter:item \| async; $implicit as filteredColumnCommands\">\r\n <button ngFor=\"let columnCommand of filteredColumnCommands\" (click)=\"columnCommand.click(item)\" type=\"button\"\r\n class=\"c-btn-icon\" [matTooltip]=\"columnCommand.title \| commandTitle:item\">\r\n <i class=\"{{columnCommand.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n </ng-container>\r\n </div>\r\n <div ngIf=\"column.type === 'color'\">\r\n <input disabled=\"true\" type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"\r\n (change)=\"column.editor?.change && column.editor.change(item)\">\r\n </div>\r\n <div ngIf=\"column.type === 'number'\">\r\n <span [className]=\"item[column.field] \| cellDesktopClassName:item:column\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[column.field]}\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| valueTransform:item:column}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| valueTransform:item:column}}</ng-container>\r\n </span>\r\n </div>\r\n <div ngIf=\"column.type === 'date'\" class=\"text-center\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] \| date:'dd/MM/yyyy'\">\r\n {{item[column.field] \| sdTimeDifferent:'dd/MM/yyyy':column.timeDifferent \| async}}\r\n </div>\r\n <div ngIf=\"column.type === 'datetime'\" class=\"text-center\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] \| date:'dd/MM/yyyy HH:mm'\">\r\n {{item[column.field] \| sdTimeDifferent:'dd/MM/yyyy HH:mm':column.timeDifferent \| async}}\r\n </div>\r\n <div ngIf=\"column.type === 'time'\" class=\"text-center\">\r\n {{item[column.field] \| date:'HH:mm'}}\r\n </div>\r\n <div class=\"align-middle text-center\" ngIf=\"column.type === 'bool'\">\r\n <span ngIf=\"!item.editorHandler[column.field].visible && item[column.field]\"\r\n class=\"status status-success\">{{column.trueValue \|\| 'True'}}</span>\r\n <span ngIf=\"!item.editorHandler[column.field].visible && !item[column.field]\"\r\n class=\"status status-danger\">{{column.falseValue \|\| 'False'}}</span>\r\n </div>\r\n <div ngIf=\"column.type === 'values'\">\r\n <ng-container ngIf=\"item[column.field] \| columnValues:column.values; $implicit as valueData\">\r\n <div ngIf=\"valueData.color \|\| valueData.backgroundColor; else elseNoStatus\" class=\"status\"\r\n [ngStyle]=\"{'color':valueData.color, 'background-color': valueData.backgroundColor}\">\r\n {{valueData.text}}\r\n </div>\r\n <ng-template #elseNoStatus>\r\n <div class=\"text-left\">\r\n {{valueData.text}}\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n <div ngIf=\"column.type === 'radio'\">\r\n {{item[column.field]}}\r\n </div>\r\n <div class=\"align-middle text-center\" ngIf=\"column.type === 'image'\">\r\n <img ngIf=\"item[column.field]\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n [height]=\"column.display?.height\" style=\"margin: 5px 0;object-fit: contain;\"\r\n (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'c-clickable':column.click}\">\r\n <i ngIf=\"!item[column.field]\" class=\"fa fa-picture-o fa-fw c-img\" [ngClass]=\"{'c-clickable':column.click}\"\r\n (click)=\"column.click && column.click(item[column.field], item)\"></i>\r\n </div>\r\n </ng-template>\r\n</ng-container>","styles":[".c-badge{border-radius:10rem;display:block!important;font-size:12px;font-weight:500;margin:0 auto;max-width:80%;padding:.3rem!important}.c-badge a{color:#fff}.status{border-radius:1.5rem;display:inline-block;font-weight:500;padding:4px 8px;text-align:center;text-transform:uppercase;width:100%}.status-success{color:#4caf50}.status-danger{color:#f82c13}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:20px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}.c-clickable{cursor:pointer}.c-img{font-size:30px;opacity:.5}.c-img.c-clickable:hover{opacity:.9}"]}]}],"members":{"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdGridDesktopInlineFilter":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-desktop-inline-filter","template":"<ng-container ngIf=\"filterOption?.multiple !== false\">\r\n <ng-container ngIf=\"columns?.length && filterOption?.columnInline === 'outside'\">\r\n <ng-container ngFor=\"let item of columns\">\r\n <ng-container\r\n ngIf=\"item.type !== 'children' && item.type !== 'image' && !item?.filter?.disabled && item.priority !== 'low'\">\r\n <ng-container ngIf=\"inlineColumn[item.field] \|\| inlineColumn[item.field] === undefined\">\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'string'\" type=\"text\"\r\n [(model)]=\"filter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'number'\" type=\"number\"\r\n [(model)]=\"filter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select ngIf=\"item.type === 'values' && !item?.editor?.autocomplete\" [label]=\"item.title\"\r\n [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.type === 'values' && item?.editor?.autocomplete\"\r\n [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-autocomplete>\r\n <sd-date-time ngIf=\"item.type === 'date' \|\| item.type === 'datetime' \|\| item.type === 'time'\"\r\n [label]=\"item.title\" [(model)]=\"filter[item.field]\" type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n ngIf=\"item.type === 'children' && item.children?.length && !item?.filter?.disabled && item.priority !== 'low'\">\r\n <ng-container ngFor=\"let childColumn of item.children\">\r\n <ng-container\r\n ngIf=\"inlineColumn[childColumn.field] && !childColumn?.filter?.disabled && childColumn.priority !== 'low' && childColumn.type !== 'image'\">\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-input [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'number'\" type=\"number\"\r\n [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-select [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:childColumn.trueValue \|\| 'True' },\r\n {value:'0',display:childColumn.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'radio'\"\r\n [items]=\"childColumn.values\" [valueField]=\"childColumn.valueField\"\r\n [displayField]=\"childColumn.displayField\" [(model)]=\"filter[childColumn.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select ngIf=\"childColumn.type === 'values' && !item?.editor?.autocomplete\"\r\n [label]=\"childColumn.title\" [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"childColumn.type === 'values' && item?.editor?.autocomplete\"\r\n [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-autocomplete>\r\n <sd-date-time\r\n ngIf=\"childColumn.type === 'date' \|\| childColumn.type === 'datetime' \|\| childColumn.type === 'time'\"\r\n [label]=\"childColumn.title\" [(model)]=\"filter[childColumn.field]\" type=\"date\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container ngIf=\"filterOption?.externalFilters?.length\">\r\n <ng-container ngFor=\"let item of filterOption.externalFilters\">\r\n <ng-container\r\n ngIf=\"(inlineExternal[item.field] \|\| inlineExternal[item.field] === undefined) && item.priority !== 'low'\">\r\n <div ngIf=\"item.type !=='daterange' && item.type !=='numberrange';else elseFilterRange\"\r\n class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'string'\" type=\"text\"\r\n [(model)]=\"externalFilter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'number'\" type=\"number\"\r\n [(model)]=\"externalFilter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'custom'\"\r\n [(model)]=\"externalFilter[displayKey + item.field]\"\r\n (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <ng-container ngIf=\"item.type === 'values'\">\r\n <sd-select ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\" multiple=\"true\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-autocomplete>\r\n <sd-select ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\" filtered=\"true\" multiple=\"true\">\r\n </sd-select>\r\n <sd-select ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n </ng-container>\r\n <sd-date-time [label]=\"item.title\" ngIf=\"item.type ==='date'\"\r\n [(model)]=\"externalFilter[item.field]\" type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n <sd-date-range [label]=\"item.title\" ngIf=\"item.type ==='daterangefull'\"\r\n [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-range>\r\n </div>\r\n <ng-template #elseFilterRange>\r\n <ng-container ngIf=\"item.type ==='daterange' && externalFilter[item.field]\">\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n [maxDate]=\"externalFilter[item.field].to \|\| item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n </div>\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n [minDate]=\"item.minDate \|\| externalFilter[item.field].from\" [maxDate]=\"item.maxDate\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n </div>\r\n </ng-container>\r\n <ng-container ngIf=\"item.type ==='numberrange' && externalFilter[item.field]\">\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-input>\r\n </div>\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-input>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>","styles":[""]}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"externalFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"filterOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"inlineExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"inlineColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdGridMobileItemView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-mobile-item-view","template":"<ng-container ngIf=\"gridOption && item\">\r\n <ng-container ngIf=\"gridOption?.mobileOrTablet?.htmlTemplate\">\r\n <div\r\n [innerHTML]=\"(item \| mobileViewHtmlTempate:gridOption.columns:gridOption?.mobileOrTablet?.htmlTemplate) \| safeHtml\"\r\n (click)=\"onCheck(item)\">\r\n </div>\r\n </ng-container>\r\n <ng-container ngIf=\"!gridOption?.mobileOrTablet?.htmlTemplate\">\r\n <ng-container ngFor=\"let column of gridOption.columns \| filterMobile:item\">\r\n <div ngIf=\"column.type !== 'children'\" class=\"row c-row\" (click)=\"onCheck(item)\">\r\n <div class=\"col-5\">\r\n <span class=\"c-title\">\r\n {{item \| columnTitle:column.title:column.dynamicTitle \| async}}:\r\n </span>\r\n </div>\r\n <div class=\"col-7\">\r\n <ng-container ngIf=\"column.type === 'string'\">\r\n <span ngIf=\"!column.htmlTemplate; else elseUseTemplate\"\r\n [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field]}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field]}}</ng-container>\r\n </span>\r\n <ng-template #elseUseTemplate>\r\n <span class=\"c-value\"\r\n [innerHTML]=\"(item[column.field] \| columnHtmlTemplate:item:column.htmlTemplate) \| safeHtml\"></span>\r\n </ng-template>\r\n <ng-container\r\n ngIf=\"column.commands \| columnCommandFilter:item \| async; $implicit as filteredColumnCommands\">\r\n <button ngFor=\"let columnCommand of filteredColumnCommands\" (click)=\"columnCommand.click(item)\"\r\n type=\"button\" class=\"c-btn-icon\" [matTooltip]=\"columnCommand.title \| commandTitle:item\">\r\n <i class=\"{{columnCommand.icon \| commandIcon:item}}\" aria-hidden=\"true\" style=\"font-size: 14px;\"></i>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <span ngIf=\"column.type === 'number'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| valueTransform:item:column}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| valueTransform:item:column}}</ng-container>\r\n </span>\r\n <span ngIf=\"column.type === 'datetime'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| date:'dd/MM/yyyy HH:mm'}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| date:'dd/MM/yyyy HH:mm'}}</ng-container>\r\n </span>\r\n <span ngIf=\"column.type === 'date'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| date:'dd/MM/yyyy'}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| date:'dd/MM/yyyy'}}</ng-container>\r\n </span>\r\n <span ngIf=\"column.type === 'time'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| date:'HH:mm'}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| date:'HH:mm'}}</ng-container>\r\n </span>\r\n <span ngIf=\"column.type === 'bool'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">\r\n <strong ngIf=\"item[column.field]\"\r\n class=\"text-success\">{{column.trueValue \|\| 'True'}}</strong>\r\n <strong ngIf=\"!item[column.field]\"\r\n class=\"text-danger\">{{column.falseValue \|\| 'False'}}</strong>\r\n </span>\r\n <span ngIf=\"column.type === 'color'\" class=\"c-value\"><input disabled=\"true\" type=\"color\"\r\n class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"></span>\r\n <ng-container ngIf=\"column.type === 'values'\">\r\n <ng-container ngIf=\"column?.dictionary[item[column.field]] as dic; else elseNotInDic\">\r\n <span ngIf=\"dic.color \|\| dic.backgroundColor; else elseNoStatus\" class=\"status c-status\"\r\n [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n {{dic.text}}\r\n </span>\r\n <ng-template #elseNoStatus>\r\n <span class=\"c-value\">\r\n {{dic.text}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #elseNotInDic>\r\n <span class=\"c-value\">\r\n {{item[column.field]}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <span ngIf=\"column.type === 'radio'\" class=\"c-value\">{{item[column.field]}}</span>\r\n <img ngIf=\"column.type === 'image'\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n [height]=\"column.display?.height\" style=\"margin: 5px 0\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">\r\n </div>\r\n </div>\r\n <ng-container ngIf=\"column.type === 'children' && column.children?.length\">\r\n <div class=\"row c-row\" ngFor=\"let childColumn of column.children \| filterMobile:item\" (click)=\"onCheck(item)\">\r\n <div class=\"col-5\">\r\n <span class=\"c-title\">\r\n {{childColumn.title}}:\r\n </span>\r\n </div>\r\n <div class=\"col-7\">\r\n <ng-container ngIf=\"childColumn.type === 'string'\">\r\n <span ngIf=\"!childColumn.htmlTemplate; else elseUseTemplate\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\"><a\r\n ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field]}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field]}}</ng-container>\r\n </span>\r\n <ng-template #elseUseTemplate>\r\n <span class=\"c-value\"\r\n [innerHTML]=\"(item[childColumn.field] \| columnHtmlTemplate:item:childColumn.htmlTemplate) \| safeHtml\"></span>\r\n </ng-template>\r\n </ng-container>\r\n <span ngIf=\"childColumn.type === 'number'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| valueTransform:item:childColumn}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| valueTransform:item:childColumn}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'datetime'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'date'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| date:'dd/MM/yyyy'}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| date:'dd/MM/yyyy'}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'time'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| date:'HH:mm'}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| date:'HH:mm'}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'bool'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n <strong ngIf=\"item[childColumn.field]\"\r\n class=\"text-success\">{{childColumn.trueValue \|\| 'True'}}</strong>\r\n <strong ngIf=\"!item[childColumn.field]\"\r\n class=\"text-danger\">{{childColumn.falseValue \|\| 'False'}}</strong>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'color'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"><input disabled=\"true\"\r\n type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n <ng-container ngIf=\"childColumn.type === 'values'\">\r\n <ng-container ngIf=\"childColumn?.dictionary[item[childColumn.field]] as dic; else elseNotInDic\">\r\n <span ngIf=\"dic.color \|\| dic.backgroundColor; else elseNoStatus\" class=\"status c-status\"\r\n [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n {{dic.text}}\r\n </span>\r\n <ng-template #elseNoStatus>\r\n <span class=\"c-value\">\r\n {{dic.text}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #elseNotInDic>\r\n <span class=\"c-value\">\r\n {{item[childColumn.field]}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <span ngIf=\"childColumn.type === 'radio'\" class=\"c-value\">{{item[childColumn.field]}}</span>\r\n <img ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>","styles":[".c-status{display:inline-block;font-weight:500;text-align:left;text-transform:uppercase}.c-row{margin:0 -8px 3px}.c-title{font-weight:700;margin-right:3px}.c-title,.c-value{color:#212529;font-size:14px}.c-value{overflow-wrap:break-word}.c-badge{font-size:14px;font-weight:500;padding:5px!important}"]}]}],"members":{"gridOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"check":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdGridPopupEditor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-popup-editor","template":"<sd-modal [title]=\"(isModified ? 'Edit' : 'Create')\" width=\"sm\" #modal>\r\n <sd-modal-body ngIf=\"item && columns?.length\">\r\n <form #formEditor=\"ngForm\">\r\n <ng-container ngFor=\"let column of columns\">\r\n <div ngIf=\"column \| editorPopupVisible:item\" class=\"row\">\r\n <div class=\"col-12\">\r\n <sd-input ngIf=\"column.type === 'string'\" [(model)]=\"item[column.field]\"></sd-input>\r\n <sd-input ngIf=\"column.type === 'number'\" [(model)]=\"item[column.field]\" type=\"number\">\r\n </sd-input>\r\n <sd-select ngIf=\"column.type === 'values'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n </sd-select>\r\n <sd-switch ngIf=\"column.type === 'boolean'\" [(model)]=\"item[column.field]\">\r\n </sd-switch>\r\n <sd-select ngIf=\"column.type === 'radio'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n </sd-select>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </form>\r\n </sd-modal-body>\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' \| sdTranslate\" size=\"sm\"></sd-button>\r\n <sd-button (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' \| sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' \| sdTranslate\"\r\n width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' \| sdTranslate\"\r\n color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>"}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":10,"character":3},"arguments":["modal"]}]}],"save":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"SdGridPopupExportExcel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"sd-grid-popup-export-excel","template":"<sd-modal width=\"sm\" [title]=\"'Export excel' \| sdTranslate\" #modal>\r\n <sd-modal-body>\r\n <mat-radio-group class=\"c-radio-group\" [ngModel]=\"selectedExcelConfig.name\" (change)=\"onChangeRadio($event)\">\r\n <mat-radio-button class=\"c-radio-button\" ngFor=\"let excelConfig of excelConfigs\" [value]=\"excelConfig.name\"\r\n color=\"primary\">\r\n {{excelConfig.name}}\r\n </mat-radio-button>\r\n <mat-radio-button class=\"c-radio-button\" [value]=\"newExcelConfig\" color=\"accent\">\r\n {{'New template' \| sdTranslate}}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n <div ngIf=\"selectedExcelConfig.name === newExcelConfig\">\r\n <mat-chip-list selectable=\"true\" multiple=\"true\">\r\n <ng-container ngFor=\"let column of exportableColumns\">\r\n <mat-chip [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\r\n {{column.title}}\r\n </mat-chip>\r\n </ng-container>\r\n </mat-chip-list>\r\n </div>\r\n </sd-modal-body>\r\n <sd-modal-footer>\r\n <ng-container sdDesktop>\r\n <div class=\"float-right\" ngIf=\"selectedExcelConfig && selectedExcelConfig.name !== newExcelConfig\">\r\n <sd-button ngIf=\"selectedExcelConfig.removable\" class=\"mr-5\" [title]=\"'Delete' \| sdTranslate\" icon=\"delete\"\r\n (action)=\"removeTemplate(selectedExcelConfig)\" size=\"sm\">\r\n </sd-button>\r\n <sd-button [title]=\"'Export' \| sdTranslate\" icon=\"get_app\" (action)=\"onExportByTemplate(selectedExcelConfig)\"\r\n size=\"sm\" color=\"primary\">\r\n </sd-button>\r\n </div>\r\n <div class=\"float-right\" ngIf=\"selectedExcelConfig?.name === newExcelConfig\">\r\n <sd-button class=\"mr-5\" [title]=\"'Add template' \| sdTranslate\" icon=\"add\" (action)=\"uploadTemplate()\" size=\"sm\">\r\n </sd-button>\r\n <sd-button [title]=\"'Download' \| sdTranslate\" icon=\"get_app\" (action)=\"newTemplate()\" size=\"sm\" color=\"primary\">\r\n </sd-button>\r\n </div>\r\n </ng-container>\r\n <ng-container sdMobileTablet>\r\n <ng-container ngIf=\"selectedExcelConfig && selectedExcelConfig.name !== newExcelConfig\">\r\n <sd-button ngIf=\"selectedExcelConfig.removable\" style=\"flex: 1; padding-right: 5px;\"\r\n [title]=\"'Delete' \| sdTranslate\" icon=\"delete\" (action)=\"removeTemplate(selectedExcelConfig)\" size=\"sm\"\r\n width=\"100%\">\r\n </sd-button>\r\n <sd-button style=\"flex: 1;\" [ngClass]=\"{'pl-5':selectedExcelConfig.removable}\" [title]=\"'Export' \| sdTranslate\"\r\n icon=\"get_app\" (action)=\"onExportByTemplate(selectedExcelConfig)\" size=\"sm\" color=\"primary\" width=\"100%\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container ngIf=\"selectedExcelConfig?.name === newExcelConfig\">\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" [title]=\"'Add template' \| sdTranslate\" icon=\"add\"\r\n (action)=\"uploadTemplate()\" size=\"sm\" width=\"100%\">\r\n </sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" [title]=\"'Download' \| sdTranslate\" icon=\"get_app\"\r\n (action)=\"newTemplate()\" size=\"sm\" color=\"primary\" width=\"100%\">\r\n </sd-button>\r\n </ng-container>\r\n </ng-container>\r\n </sd-modal-footer>\r\n</sd-modal>","styles":[".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}"]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["modal"]}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"extendColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"fileName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"exportOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"exportByTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":57,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/loading","name":"SdLoadingService","line":58,"character":28},{"__symbolic":"reference","module":"@sd-angular/core/excel","name":"SdExcelService","line":59,"character":26},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":60,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":61,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"loadConfiguration":[{"__symbolic":"method"}]}},"ExcelConfiguration":{"__symbolic":"interface"},"SdGridPopupFilter":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"sd-grid-popup-filter","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":25,"character":17},"member":"None"},"template":"<sd-modal width=\"sm\" [title]=\"'Filter' \| sdTranslate\" #modal>\r\n <sd-modal-body>\r\n <div\r\n ngIf=\"key && filterOption?.multiple !== false && (!filterOption?.quickFilterVisibility \|\| filterOption?.quickFilterVisibility === 'popup')\">\r\n <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n <mat-label>{{'Quick filters' \| sdTranslate}}</mat-label>\r\n <mat-select [(ngModel)]=\"selectedCode\" (selectionChange)=\"onSelectionChange($event)\" #matSelect>\r\n <mat-option value=\"\">{{'Please select' \| sdTranslate}}</mat-option>\r\n <mat-option ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n <div style=\"display:flex; justify-content: space-between\">\r\n <span>{{quickFilter.code}}</span>\r\n <div>\r\n <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n fontIcon=\"fa-pencil\"></mat-icon>\r\n <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n fontIcon=\"fa-trash-o\"></mat-icon>\r\n </div>\r\n </div>\r\n </mat-option>\r\n <mat-option [value]=\"newQuickFilter\">\r\n <div (click)=\"onCreateQuickFilter($event)\">\r\n <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n <span>{{'Create quick filter' \| sdTranslate}}</span>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <ng-container ngIf=\"filterOption?.multiple === false\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{'Select field' \| sdTranslate}}</mat-label>\r\n <mat-select [(ngModel)]=\"selectedField\">\r\n <mat-option value=\"\">{{'Please select' \| sdTranslate}}</mat-option>\r\n <mat-option ngFor=\"let item of externalFilters\" [value]=\"'external' + item.field\">\r\n {{item.title}}\r\n </mat-option>\r\n <ng-container ngFor=\"let item of columns\">\r\n <mat-option ngIf=\"item.type !== 'children'\" [value]=\"'column' + item.field\">\r\n {{item.title}}\r\n </mat-option>\r\n <ng-container ngIf=\"item.type === 'children' && item.children?.length\">\r\n <ng-container ngFor=\"let childColumn of item.children\">\r\n <mat-option [value]=\"'column' + childColumn.field\">\r\n {{childColumn.title}}\r\n </mat-option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n <ng-container ngFor=\"let item of externalFilters\">\r\n <div ngIf=\"filterOption?.multiple !== false \|\| selectedField === 'external' + item.field\"\r\n class=\"d-flex align-items-baseline\">\r\n <ng-container ngIf=\"filterOption?.multiple !== false\">\r\n <div sdDesktop class=\"c-checkable\">\r\n <sd-switch [(model)]=\"inlineExternal[item.field]\" (sdChange)=\"onInlineChange()\">\r\n </sd-switch>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'string'\" type=\"text\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'number'\" type=\"number\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-select>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n </sd-select>\r\n <ng-container ngIf=\"item.type === 'values'\">\r\n <sd-select ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n multiple=\"true\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-autocomplete>\r\n <sd-select ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" filtered=\"true\" multiple=\"true\">\r\n </sd-select>\r\n <sd-select ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n </sd-select>\r\n </ng-container>\r\n <sd-input ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n [(model)]=\"externalFilter[displayKey + item.field]\"\r\n (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\">\r\n </sd-input>\r\n <sd-date-time [label]=\"item.title\" ngIf=\"item.type ==='date'\"\r\n [(model)]=\"externalFilter[item.field]\" type=\"date\">\r\n </sd-date-time>\r\n <sd-date-range [label]=\"item.title\" ngIf=\"item.type ==='daterangefull'\"\r\n [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\"\r\n [min]=\"item.minDate\" [max]=\"item.maxDate\">\r\n </sd-date-range>\r\n <ng-container ngIf=\"item.type ==='daterange'\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n [maxDate]=\"externalFilter[item.field].to \|\| item.maxDate\">\r\n </sd-date-time>\r\n </div>\r\n <div class=\"col-6\">\r\n <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n [minDate]=\"item.minDate \|\| externalFilter[item.field].from\" [maxDate]=\"item.maxDate\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"row\" ngIf=\"item.type ==='numberrange'\">\r\n <div class=\"col-6\">\r\n <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\">\r\n </sd-input>\r\n </div>\r\n <div class=\"col-6\">\r\n <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\">\r\n </sd-input>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container ngFor=\"let column of columns\">\r\n <div class=\"d-flex align-items-baseline\"\r\n ngIf=\"column.type !== 'children' && (filterOption?.multiple !== false \|\| selectedField === 'column' + column.field)\">\r\n <ng-container ngIf=\"filterOption?.multiple !== false\">\r\n <div sdDesktop class=\"c-checkable\">\r\n <sd-switch [(model)]=\"inlineColumn[column.field]\" (sdChange)=\"onInlineChange()\">\r\n </sd-switch>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n [(model)]=\"filter[column.field]\">\r\n </sd-input>\r\n <sd-input ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n [(model)]=\"filter[column.field]\">\r\n </sd-input>\r\n <sd-select ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue \|\| 'True' },\r\n {value:'0',display:column.falseValue \|\| 'False' }]\" [(model)]=\"filter[column.field]\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'radio'\" [label]=\"column.title\" [items]=\"column.values\"\r\n [valueField]=\"column.valueField\" [displayField]=\"column.displayField\" [(model)]=\"filter[column.field]\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n </sd-autocomplete>\r\n <sd-date-time ngIf=\"column.type ==='date' \|\| column.type==='datetime' \|\|\r\n column.type==='time'\" [label]=\"column.title\" [(model)]=\" filter[column.field]\" type=\"date\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n <ng-container ngIf=\"column.type === 'children' && column.children?.length\">\r\n <ng-container ngFor=\"let childColumn of column.children\">\r\n <div class=\"d-flex align-items-baseline\"\r\n ngIf=\"filterOption?.multiple !== false \|\| selectedField === 'column' + childColumn.field\">\r\n <ng-container ngIf=\"filterOption?.multiple !== false\">\r\n <div sdDesktop class=\"c-checkable\">\r\n <sd-switch [(model)]=\"inlineColumn[childColumn.field]\" (sdChange)=\"onInlineChange()\">\r\n </sd-switch>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n [(model)]=\"filter[childColumn.field]\">\r\n </sd-input>\r\n <sd-input [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'number'\" type=\" number\"\r\n [(model)]=\"filter[childColumn.field]\">\r\n </sd-input>\r\n <sd-select [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:column.trueValue \|\| 'True' },\r\n {value:'0',display:childColumn.falseValue \|\| 'False' }]\" [(model)]=\"filter[childColumn.field]\">\r\n </sd-select>\r\n <sd-select [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'radio'\"\r\n [items]=\"childColumn.values\" [valueField]=\"childColumn.valueField\"\r\n [displayField]=\"childColumn.displayField\" [(model)]=\"filter[childColumn.field]\">\r\n </sd-select>\r\n <sd-autocomplete [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'values'\"\r\n [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n [(model)]=\"filter[childColumn.field]\">\r\n </sd-autocomplete>\r\n <sd-date-time [label]=\"childColumn.title\" ngIf=\"childColumn.type ==='date' \|\| childColumn.type==='datetime' \|\|\r\n childColumn.type==='time'\" [(model)]=\" filter[childColumn.field]\" type=\"date\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </sd-modal-body>\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"onClear()\" icon=\"clear\" [title]=\"'Clear filter' \| sdTranslate\" size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' \| sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onClear()\" icon=\"clear\"\r\n [title]=\"'Clear filter' \| sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' \| sdTranslate\"\r\n color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>\r\n<sd-grid-popup-quick-filter-detail #popupQuickFilterDetail (accept)=\"onAcceptQuickFilter($event)\">\r\n</sd-grid-popup-quick-filter-detail>","styles":[".c-fa-icon{color:grey;font-size:20px}.c-checkable{width:50px}.c-filterable{flex:1}"]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":3},"arguments":["modal"]}]}],"popupQuickFilterDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["popupQuickFilterDetail"]}]}],"matSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":3},"arguments":["matSelect"]}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"filterOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":3}}]}],"loadInlineFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"inlineExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"inlineColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":55,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":56,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/setting","name":"SdSettingService","line":57,"character":28},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":58,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":59,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onAccept":[{"__symbolic":"method"}],"onClear":[{"__symbolic":"method"}],"updateConfiguration":[{"__symbolic":"method"}]}},"QuickFilter":{"__symbolic":"class","members":{}},"FilterConfiguration":{"__symbolic":"interface"},"SdGridPopupQuickFilterDetail":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"sd-grid-popup-quick-filter-detail","template":"<sd-modal width=\"sm\" [title]=\"(page === 1 ? 'Select filtered fields':'Input filtered fields') \| sdTranslate\" #modal>\r\n <sd-modal-body>\r\n <div class=\"row\">\r\n <ng-container ngIf=\"page === 1\">\r\n <div ngFor=\"let field of selectableFields\" class=\"col-12\">\r\n <sd-switch [(model)]=\"selectedField[field.id]\" [label]=\"field.title\" (sdChange)=\"onSelectFields()\">\r\n </sd-switch>\r\n </div>\r\n </ng-container>\r\n <ng-container ngIf=\"page === 2\">\r\n <div class=\"col-12\" ngFor=\"let item of fields\">\r\n <ng-container ngIf=\"item.group === 'external'\">\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'string'\" type=\"text\"\r\n [(model)]=\"externalFilter[item.code]\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'number'\" type=\"number\"\r\n [(model)]=\"externalFilter[item.code]\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"externalFilter[item.code]\">\r\n </sd-select>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n </sd-select>\r\n <ng-container ngIf=\"item.type === 'values'\">\r\n <sd-select ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n multiple=\"true\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n </sd-autocomplete>\r\n <sd-select ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n filtered=\"true\" multiple=\"true\">\r\n </sd-select>\r\n <sd-select ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n </sd-select>\r\n </ng-container>\r\n <sd-input ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n [(model)]=\"externalFilter[displayKey + item.code]\"\r\n (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.code, displayKey + item.code)\">\r\n </sd-input>\r\n <sd-date-time [label]=\"item.title\" ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.code]\"\r\n type=\"date\">\r\n </sd-date-time>\r\n <sd-date-range [label]=\"item.title\" ngIf=\"item.type ==='daterangefull'\"\r\n [(from)]=\"externalFilter[item.code].from\" [(to)]=\"externalFilter[item.code].to\" [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\">\r\n </sd-date-range>\r\n <ng-container ngIf=\"item.type ==='daterange'\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.code].from\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n [maxDate]=\"externalFilter[item.code].to \|\| item.maxDate\">\r\n </sd-date-time>\r\n </div>\r\n <div class=\"col-6\">\r\n <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.code].to\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n [minDate]=\"item.minDate \|\| externalFilter[item.code].from\" [maxDate]=\"item.maxDate\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"row\" ngIf=\"item.type ==='numberrange'\">\r\n <div class=\"col-6\">\r\n <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].from\">\r\n </sd-input>\r\n </div>\r\n <div class=\"col-6\">\r\n <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].to\">\r\n </sd-input>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container ngIf=\"item.group === 'column'\">\r\n <sd-input ngIf=\"item.type === 'string'\" [label]=\"item.title\" type=\"text\" [(model)]=\"filter[item.code]\">\r\n </sd-input>\r\n <sd-input ngIf=\"item.type === 'number'\" [label]=\"item.title\" type=\" number\" [(model)]=\"filter[item.code]\">\r\n </sd-input>\r\n <sd-select ngIf=\"item.type === 'bool'\" [label]=\"item.title\" [items]=\"[{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" [(model)]=\"filter[item.code]\">\r\n </sd-select>\r\n <sd-select ngIf=\"item.type === 'radio'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.code]\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.type === 'values' && item.editor?.autocomplete\" [label]=\"item.title\"\r\n [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n </sd-autocomplete>\r\n <sd-select ngIf=\"item.type === 'values' && !item.editor?.autocomplete\" [label]=\"item.title\"\r\n [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n </sd-select>\r\n <sd-date-time ngIf=\"item.type ==='date' \|\| item.type==='datetime' \|\|\r\n item.type==='time'\" [label]=\"item.title\" [(model)]=\" filter[item.code]\" type=\"date\">\r\n </sd-date-time>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </sd-modal-body>\r\n <ng-container ngIf=\"page === 1\">\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"clear\" [title]=\"'Cancel' \| sdTranslate\" size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"page = 2\" icon=\"arrow_forward\" [title]=\"'Next' \| sdTranslate\" color=\"primary\"\r\n iconSuffix=\"true\" [disabled]=\"!fields.length\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"clear\"\r\n [title]=\"'Cancel' \| sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"page = 2\" icon=\"arrow_forward\"\r\n [title]=\"'Next' \| sdTranslate\" color=\"primary\" width=\"100%\" iconSuffix=\"true\" [disabled]=\"!fields.length\"\r\n size=\"sm\">\r\n </sd-button>\r\n </sd-modal-footer>\r\n </ng-container>\r\n <ng-container ngIf=\"page === 2\">\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"page = 1\" icon=\"arrow_back\" [title]=\"'Back' \| sdTranslate\" size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' \| sdTranslate\" color=\"primary\" size=\"sm\">\r\n </sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"page = 1\" icon=\"arrow_back\"\r\n [title]=\"'Back' \| sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' \| sdTranslate\"\r\n color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n </ng-container>\r\n</sd-modal>","styles":[""]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":21,"character":3},"arguments":["modal"]}]}],"quickFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":36,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":37,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":38,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}]}},"SdGridSubInformation":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-grid-sub-information","template":"<div class=\"clearfix\"></div>\r\n<ng-container ngIf=\"option?.columns\">\r\n <div ngIf=\"!isMobileOrTablet\" class=\"sd-box box-shadow-none\">\r\n <div class=\"sd-box-body p-0\">\r\n <div class=\"row mx-0\">\r\n <div class=\"table-responsive\" style=\"position: relative;\" [ngStyle]=\"{'height': height}\">\r\n <table class=\"table table-hover table-striped table-bordered c-table\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th class=\"position-sticky c-sticky-all align-middle p-0\" style=\"width:4px; min-width: 4px;\">\r\n </th>\r\n <th class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\"></th>\r\n <th ngIf=\"option?.commands?.length\"\r\n class=\"position-sticky align-middle text-center p-0 c-sticky-top c-w-1\">\r\n </th>\r\n <th ngFor=\"let column of option.columns\" class=\"position-sticky c-sticky-top\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '','min-width':column.width ? column.width : '300px'}\">\r\n <span [title]=\"column.title\" class=\"c-header-title cursor-pointer\"\r\n [ngStyle]=\"{'width':column.width ? column.width : ''}\">\r\n {{column.title \| sdTranslate}}\r\n </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container ngFor=\"let item of subItems; trackBy: trackById\">\r\n <tr>\r\n <td class=\"position-sticky c-sticky-left p-0\">\r\n </td>\r\n <td class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\"></td>\r\n <td ngIf=\"option.commands?.length\" class=\"align-middle px-2 py-0 c-w-1\">\r\n <div class=\"d-flex align-middle text-center justify-content-center\">\r\n <ng-container\r\n ngIf=\"option.commands \| commandFilter:item \| async; $implicit as filteredCommands\">\r\n <section ngFor=\"let command of filteredCommands\">\r\n <ng-container ngIf=\"!command.children?.length; else elseCommandChildren\">\r\n <button ngIf=\"!command.fontSet\" (click)=\"command.click(item)\" type=\"button\"\r\n class=\"c-btn-icon\" [matTooltip]=\"command.title \| commandTitle:item\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <i class=\"{{command.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button ngIf=\"command.fontSet\" [matTooltip]=\"command.title \| commandTitle:item\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\" (click)=\"command.click(item)\"\r\n aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon [fontSet]=\"command.fontSet\">{{command.icon \| commandIcon:item}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-template #elseCommandChildren>\r\n <button ngIf=\"command.icon\" [matMenuTriggerFor]=\"menu\" type=\"button\" class=\"c-btn-icon\"\r\n [matTooltip]=\"command.title\" [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <i class=\"{{command.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button ngIf=\"!command.icon\" mat-icon-button [matMenuTriggerFor]=\"menu\" type=\"button\"\r\n class=\"c-btn-icon-30\" [matTooltip]=\"command.title\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container ngFor=\"let childCommand of command.children\">\r\n <button ngIf=\"!(item \| commandHidden:childCommand \| async)\" mat-menu-item\r\n [disabled]=\"childCommand.disabled \| commandDisabled:item\"\r\n (click)=\"childCommand.click(item)\">\r\n <i ngIf=\"!childCommand.fontSet\" class=\"{{childCommand.icon \| commandIcon:item}}\"></i>\r\n <mat-icon ngIf=\"childCommand.fontSet\" [fontSet]=\"childCommand.fontSet\">\r\n {{childCommand.icon \| commandIcon:item}}</mat-icon>\r\n <span> {{childCommand.title \| commandTitle:item}}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-template>\r\n </section>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td ngFor=\"let column of option.columns\" class=\"align-middle\"\r\n [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number', 'text-right': column.type === 'number'}\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '', 'min-width':column.width ? column.width : '300px'}\">\r\n <ng-container ngIf=\"!column.children?.length\">\r\n <ng-container ngIf=\"item[column.field] \| editorSubInformationHandler:item:option.columns\">\r\n <ng-container ngIf=\"item.editorHandler[column.field].visible;else columnView\">\r\n <sd-grid-desktop-column-edit [column]=\"column\" [item]=\"item\" (sdChange)=\"onEditorChange()\">\r\n </sd-grid-desktop-column-edit>\r\n </ng-container>\r\n <ng-template #columnView>\r\n <sd-grid-desktop-column-view [column]=\"column\" [item]=\"item\"></sd-grid-desktop-column-view>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <div ngIf=\"column.children?.length\" class=\"row mx-0\">\r\n <div ngFor=\"let childColumn of column.children \| filterMobile:item\"\r\n [ngClass]=\"{'col-sm-6': childColumn?.colSpan === 1, 'col-sm-12': !childColumn?.colSpan \|\| childColumn?.colSpan === 2}\">\r\n <span class=\"c-mobile-title\">• {{childColumn.title}}:</span>\r\n <span ngIf=\"childColumn.type === 'string'\" class=\"c-mobile-value\"\r\n [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n 'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field]}}</span>\r\n <span ngIf=\"childColumn.type === 'number'\" class=\"c-mobile-value\"\r\n [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n 'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field] \| valueTransform:item:childColumn}}</span>\r\n <span ngIf=\"childColumn.type === 'datetime'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'}}</span>\r\n <span ngIf=\"childColumn.type === 'date'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'dd/MM/yyyy'}}</span>\r\n <span ngIf=\"childColumn.type === 'time'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'HH:mm'}}</span>\r\n <span ngIf=\"childColumn.type === 'bool'\" class=\"c-mobile-value\">\r\n <span ngIf=\"item[childColumn.field]\"\r\n class=\"status status-success\">{{childColumn.trueValue \|\| 'True'}}</span>\r\n <span ngIf=\"!item[childColumn.field]\"\r\n class=\"status status-danger\">{{childColumn.falseValue \|\| 'False'}}</span>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\"\r\n type=\"color\" class=\"form-control form-control-sm\"\r\n [(ngModel)]=\"item[childColumn.field]\"></span>\r\n <span ngIf=\"childColumn.type === 'values'\" class=\"status c-mobile-value\"\r\n [ngStyle]=\"{'color':childColumn?.dictionary[item[childColumn.field]]?.color}\">\r\n {{!!childColumn?.dictionary[item[childColumn.field]] ? childColumn?.dictionary[item[childColumn.field]]?.text : item[childColumn.field]}}\r\n </span>\r\n <span ngIf=\"childColumn.type === 'radio'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field]}}</span>\r\n <img ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\"\r\n style=\"margin: 5px 0\">\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div ngIf=\"isMobileOrTablet\" class=\"sd-box c-mobile-box\">\r\n <div class=\"sd-box-body c-mobile-body\" [ngStyle]=\"{'height': height}\">\r\n <ng-container ngFor=\"let item of subItems\">\r\n <div class=\"c-mobile-item\">\r\n <ng-container ngFor=\"let column of option.columns \| filterMobile:item\">\r\n <div ngIf=\"item[column.field]\" class=\"c-mobile-row\">\r\n <span class=\"c-mobile-title\">• {{column.title}}:</span>\r\n <span ngIf=\"column.type === 'string'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-mobile-badge':item.badge && item.badge[column.field], \r\n 'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[column.field]}\">{{item[column.field]}}</span>\r\n <span ngIf=\"column.type === 'number'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-mobile-badge':item.badge && item.badge[column.field], \r\n 'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[column.field]}\">{{item[column.field] \| number : '1.0-2'}}</span>\r\n <span ngIf=\"column.type === 'datetime'\"\r\n class=\"c-mobile-value\">{{item[column.field] \| date:'dd/MM/yyyy HH:mm'}}</span>\r\n <span ngIf=\"column.type === 'date'\"\r\n class=\"c-mobile-value\">{{item[column.field] \| date:'dd/MM/yyyy'}}</span>\r\n <span ngIf=\"column.type === 'time'\" class=\"c-mobile-value\">{{item[column.field] \| date:'HH:mm'}}</span>\r\n <span ngIf=\"column.type === 'bool'\" class=\"c-mobile-value\">\r\n <span ngIf=\"item[column.field]\" class=\"status status-success\">{{column.trueValue \|\| 'True'}}</span>\r\n <span ngIf=\"!item[column.field]\" class=\"status status-danger\">{{column.falseValue \|\| 'False'}}</span>\r\n </span>\r\n <span ngIf=\"column.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\" type=\"color\"\r\n class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"></span>\r\n <span ngIf=\"column.type === 'values'\" class=\"status c-mobile-value\"\r\n [ngStyle]=\"{'color':column?.dictionary[item[column.field]]?.color}\">\r\n {{!!column?.dictionary[item[column.field]] ? column?.dictionary[item[column.field]]?.text : item[column.field]}}\r\n </span>\r\n <span ngIf=\"column.type === 'radio'\" class=\"c-mobile-value\">{{item[column.field]}}</span>\r\n <img ngIf=\"column.type === 'image'\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n [height]=\"column.display?.height\" style=\"margin: 5px 0\">\r\n </div>\r\n <ng-container ngIf=\"column.children?.length\">\r\n <div class=\"c-mobile-row\" ngFor=\"let childColumn of column.children \| filterMobile:item\">\r\n <span class=\"c-mobile-title\">• {{childColumn.title}}:</span>\r\n <span ngIf=\"childColumn.type === 'string'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n 'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field]}}</span>\r\n <span ngIf=\"childColumn.type === 'number'\" class=\"c-mobile-value\"\r\n [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n 'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field] \| number : '1.0-2'}}</span>\r\n <span ngIf=\"childColumn.type === 'datetime'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'}}</span>\r\n <span ngIf=\"childColumn.type === 'date'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'dd/MM/yyyy'}}</span>\r\n <span ngIf=\"childColumn.type === 'time'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'HH:mm'}}</span>\r\n <span ngIf=\"childColumn.type === 'bool'\" class=\"c-mobile-value\">\r\n <span ngIf=\"item[childColumn.field]\"\r\n class=\"status status-success\">{{childColumn.trueValue \|\| 'True'}}</span>\r\n <span ngIf=\"!item[childColumn.field]\"\r\n class=\"status status-danger\">{{childColumn.falseValue \|\| 'False'}}</span>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\" type=\"color\"\r\n class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n <span ngIf=\"childColumn.type === 'values'\" class=\"status c-mobile-value\"\r\n [ngStyle]=\"{'color':childColumn?.dictionary[item[childColumn.field]]?.color}\">\r\n {{!!childColumn?.dictionary[item[childColumn.field]] ? childColumn?.dictionary[item[childColumn.field]]?.text : item[childColumn.field]}}\r\n </span>\r\n <span ngIf=\"childColumn.type === 'radio'\" class=\"c-mobile-value\">{{item[childColumn.field]}}</span>\r\n <img ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\">\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-container>","styles":[".grid-header{overflow-x:hidden;overflow-y:hidden}.c-table.table{margin-bottom:5px}td,th{font-size:13px;min-width:0;padding:3px 5px}.c-cell-padding{padding:3px 5px!important}.c-header-title{font-weight:500;text-transform:capitalize}span.c-header-title{display:block;overflow:hidden!important;padding:0 .3rem;text-overflow:ellipsis;white-space:nowrap}thead th{border-top:none;height:auto;min-height:20px;padding:5px}tbody td{height:25px;min-height:25px}.status{border-radius:1.5rem;color:#16759b;display:inline-block;font-weight:500;padding:2px 5px;text-align:center;text-transform:uppercase}.status-success{color:#43a047}.status-danger{color:#f44336}.cursor-pointer{cursor:pointer}label.custom-control.custom-checkbox{margin:0}.c-overflow-x-hidden{overflow-x:hidden}.c-grid-header,.c-overflow-y-hidden{overflow-y:hidden}.c-grid-header{overflow-x:hidden}.c-th-xs{height:49px;min-height:49px}.c-td-xs,.c-th-xs{font-size:.8rem;line-height:1.15;min-width:0;padding:.1rem!important}.c-td-xs{height:1.5rem;min-height:1.5rem}.c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}.c-sticky-top{top:0!important;z-index:20}.c-sticky-left{z-index:20}.c-sticky-all,.c-sticky-left{border-left:none!important;border-right:none!important;left:0!important}.c-sticky-all{top:0!important;z-index:30}.c-sticky-spliter{background-color:#dee2e6;border:none;min-width:1px;width:1px;z-index:40}.table-striped tbody tr:nth-of-type(2n) .c-sticky-left{background-color:#fff}.table-striped tbody tr:nth-of-type(odd) .c-sticky-left{background-color:#f2f2f2}.table-responsive>.table-bordered{border:1px solid #dee2e6!important}.c-badge{border-radius:10rem;display:block!important;font-size:.8rem;font-weight:500;padding:.3rem!important}.c-m-3{margin:3px!important}.c-m-5{margin:5px!important}.c-w-1{width:1px}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:16px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}"]}]}],"members":{"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"subItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":17,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":18,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"updateFilter":[{"__symbolic":"method"}],"trackById":[{"__symbolic":"method"}]}},"SdCellDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdCellDef]"}]}],"members":{"sdCellDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"SdCellEditorDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdCellEditorDef]"}]}],"members":{"sdCellEditorDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"SdCellFooterDevDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdCellFooterDef]"}]}],"members":{"sdCellFooterDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"SdGridFilterInfo":{"__symbolic":"interface"},"IGridConfiguration":{"__symbolic":"interface"},"GRID_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":17,"character":31},"arguments":["grid.configuration"]},"IHandlerServer":{"__symbolic":"interface"},"IHandlerLocal":{"__symbolic":"interface"},"HandlerDotnet":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1}}],"members":{}},"HandlerLocal":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":8,"character":32}]}]}},"CellDesktopClassNamePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"cellDesktopClassName"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CellMobileClassNamePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"cellMobileClassName"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ColumnCommandFilterPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"columnCommandFilter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ColumnHtmlTemplatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"columnHtmlTemplate"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":8,"character":29}]}],"transform":[{"__symbolic":"method"}]}},"ColumnTitlePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"columnTitle"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ColumnValuesPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"columnValues"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityService","line":15,"character":38}]}],"transform":[{"__symbolic":"method"}]},"statics":{"cache":{}}},"CommandDisabledPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandDisabled"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CommandFilterPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandFilter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CommandHidden":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandHidden"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CommandIconPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandIcon"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CommandTitlePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandTitle"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"SdDynamicItems":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":1,"character":1},"arguments":[{"name":"sdDynamicItems"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorDynamicItemPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorDynamicItem"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorHandlerPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorHandler"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorPopupVisiblePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorPopupVisible"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorSubInformationHandlerPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorSubInformationHandler"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorValidatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorValidate"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"FilterMobilePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"filterMobile","pure":false}]}],"members":{"transform":[{"__symbolic":"method"}]}},"MobileCommandFilterPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"mobileCommandFilter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"MobileViewHtmlTemplatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"mobileViewHtmlTempate"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ValueTransformPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"valueTransform"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"DecimalPipe","line":7,"character":35}]}],"transform":[{"__symbolic":"method"}]}},"SdGridImportExcel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-import-excel","template":"<sd-upload-excel ngIf=\"option\" [option]=\"option\" #control></sd-upload-excel>"}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":136,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/upload-excel","name":"SdUploadExcel","line":136,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdSubHeaderDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdSubHeaderDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}}},"origins":{"SdGridModule":"./src/lib/grid.module","SdGrid":"./src/lib/grid.component","SdGridOption":"./src/lib/grid.model","SdGridCommand":"./src/lib/grid.model","SdGridColumn":"./src/lib/grid.model","SdGridExternalFilter":"./src/lib/grid.model","defaultGridOption":"./src/lib/grid.model","SdGridBaseOption":"./src/lib/grid.model","GridBaseOptionExport":"./src/lib/grid.model","GridBaseOptionFilter":"./src/lib/grid.model","GridCommandNoChildren":"./src/lib/grid.model","GridCommandWithChildren":"./src/lib/grid.model","EditorHandler":"./src/lib/grid.model","GridItem":"./src/lib/grid.model","ColumnCommand":"./src/lib/grid.model","GridColumnChild":"./src/lib/grid.model","GridColumnChildren":"./src/lib/grid.model","SubOption":"./src/lib/grid.model","DynamicEditorItem":"./src/lib/grid.model","MobileConfiguration":"./src/lib/grid.model","SdGridConfig":"./src/lib/components/grid-config/grid-config.component","OriginColumn":"./src/lib/components/grid-config/grid-config.model","ConfigOption":"./src/lib/components/grid-config/grid-config.model","ConfigResult":"./src/lib/components/grid-config/grid-config.model","ConfigStorage":"./src/lib/components/grid-config/grid-config.model","ConfigColumn":"./src/lib/components/grid-config/grid-config.model","GridDesktopColumnChildrenViewComponent":"./src/lib/components/grid-desktop-column-children-view/grid-desktop-column-children-view.component","SdGridDesktopColumnEdit":"./src/lib/components/grid-desktop-column-edit/grid-desktop-column-edit.component","SdGridDesktopColumnView":"./src/lib/components/grid-desktop-column-view/grid-desktop-column-view.component","SdGridDesktopInlineFilter":"./src/lib/components/grid-desktop-inline-filter/grid-desktop-inline-filter.component","SdGridMobileItemView":"./src/lib/components/grid-mobile-item-view/grid-mobile-item-view.component","SdGridPopupEditor":"./src/lib/components/grid-popup-editor/grid-popup-editor.component","SdGridPopupExportExcel":"./src/lib/components/grid-popup-export-excel/grid-popup-export-excel.component","ExcelConfiguration":"./src/lib/components/grid-popup-export-excel/grid-popup-export-excel.model","SdGridPopupFilter":"./src/lib/components/grid-popup-filter/grid-popup-filter.component","QuickFilter":"./src/lib/components/grid-popup-filter/grid-popup-filter.model","FilterConfiguration":"./src/lib/components/grid-popup-filter/grid-popup-filter.model","SdGridPopupQuickFilterDetail":"./src/lib/components/grid-popup-quick-filter-detail/grid-popup-quick-filter-detail.component","SdGridSubInformation":"./src/lib/components/grid-sub-information/grid-sub-information.component","SdCellDefDirective":"./src/lib/directives/cell-def.directive","SdCellEditorDefDirective":"./src/lib/directives/cell-editor-def.directive","SdCellFooterDevDirective":"./src/lib/directives/cell-footer-def.directive","SdGridFilterInfo":"./src/lib/models/filter-info.model","IGridConfiguration":"./src/lib/models/grid-configuration.model","GRID_CONFIG":"./src/lib/models/grid-configuration.model","IHandlerServer":"./src/lib/models/handler","IHandlerLocal":"./src/lib/models/handler","HandlerDotnet":"./src/lib/models/handler-dotnet","HandlerLocal":"./src/lib/models/handler-local","CellDesktopClassNamePipe":"./src/lib/pipes/cell-desktop-class-name.pipe","CellMobileClassNamePipe":"./src/lib/pipes/cell-mobile-class-name.pipe","ColumnCommandFilterPipe":"./src/lib/pipes/column-command-filter.pipe","ColumnHtmlTemplatePipe":"./src/lib/pipes/column-html-template.pipe","ColumnTitlePipe":"./src/lib/pipes/column-title.pipe","ColumnValuesPipe":"./src/lib/pipes/column-values.pipe","CommandDisabledPipe":"./src/lib/pipes/command-disabled.pipe","CommandFilterPipe":"./src/lib/pipes/command-filter.pipe","CommandHidden":"./src/lib/pipes/command-hidden.pipe","CommandIconPipe":"./src/lib/pipes/command-icon.pipe","CommandTitlePipe":"./src/lib/pipes/command-title.pipe","SdDynamicItems":"./src/lib/pipes/dynamic-items.pipe","EditorDynamicItemPipe":"./src/lib/pipes/editor-dynamic-item.pipe","EditorHandlerPipe":"./src/lib/pipes/editor-handler.pipe","EditorPopupVisiblePipe":"./src/lib/pipes/editor-popup-visible.pipe","EditorSubInformationHandlerPipe":"./src/lib/pipes/editor-sub-information-handler.pipe","EditorValidatePipe":"./src/lib/pipes/editor-validate.pipe","FilterMobilePipe":"./src/lib/pipes/filter-mobile.pipe","MobileCommandFilterPipe":"./src/lib/pipes/mobile-command-filter","MobileViewHtmlTemplatePipe":"./src/lib/pipes/mobile-view-html-template.pipe","ValueTransformPipe":"./src/lib/pipes/value-transform.pipe","SdGridImportExcel":"./src/lib/components/grid-import-excel/grid-import-excel.component","SdSubHeaderDefDirective":"./src/lib/directives/sub-information-header-def.directive"},"importAs":"@sd-angular/core/grid"}
1	+ {"__symbolic":"module","version":4,"metadata":{"SdGridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":61,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":63,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":64,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":65,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":66,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":70,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":71,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":72,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":73,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":74,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":75,"character":4},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":76,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":77,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":78,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":79,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/upload-excel","name":"SdUploadExcelModule","line":80,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/form","name":"SdFormModule","line":81,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/service","name":"SdServiceModule","line":82,"character":4}],"declarations":[{"__symbolic":"reference","name":"SdGrid"},{"__symbolic":"reference","name":"SdGridConfig"},{"__symbolic":"reference","name":"SdGridDesktopColumnEdit"},{"__symbolic":"reference","name":"SdGridDesktopColumnView"},{"__symbolic":"reference","name":"SdGridDesktopInlineFilter"},{"__symbolic":"reference","name":"SdGridMobileItemView"},{"__symbolic":"reference","name":"SdGridPopupEditor"},{"__symbolic":"reference","name":"SdGridPopupExportExcel"},{"__symbolic":"reference","name":"SdGridPopupFilter"},{"__symbolic":"reference","name":"SdGridPopupQuickFilterDetail"},{"__symbolic":"reference","name":"SdGridSubInformation"},{"__symbolic":"reference","name":"SdGridImportExcel"},{"__symbolic":"reference","name":"GridDesktopColumnChildrenViewComponent"},{"__symbolic":"reference","name":"CellDesktopClassNamePipe"},{"__symbolic":"reference","name":"CellMobileClassNamePipe"},{"__symbolic":"reference","name":"ColumnCommandFilterPipe"},{"__symbolic":"reference","name":"ColumnHtmlTemplatePipe"},{"__symbolic":"reference","name":"ColumnTitlePipe"},{"__symbolic":"reference","name":"ColumnValuesPipe"},{"__symbolic":"reference","name":"CommandDisabledPipe"},{"__symbolic":"reference","name":"CommandFilterPipe"},{"__symbolic":"reference","name":"CommandHidden"},{"__symbolic":"reference","name":"CommandIconPipe"},{"__symbolic":"reference","name":"CommandTitlePipe"},{"__symbolic":"reference","name":"SdDynamicItems"},{"__symbolic":"reference","name":"EditorDynamicItemPipe"},{"__symbolic":"reference","name":"EditorHandlerPipe"},{"__symbolic":"reference","name":"EditorSubInformationHandlerPipe"},{"__symbolic":"reference","name":"EditorValidatePipe"},{"__symbolic":"reference","name":"FilterMobilePipe"},{"__symbolic":"reference","name":"MobileCommandFilterPipe"},{"__symbolic":"reference","name":"MobileViewHtmlTemplatePipe"},{"__symbolic":"reference","name":"ValueTransformPipe"},{"__symbolic":"reference","name":"EditorPopupVisiblePipe"},{"__symbolic":"reference","name":"SdCellDefDirective"},{"__symbolic":"reference","name":"SdCellEditorDefDirective"},{"__symbolic":"reference","name":"SdCellFooterDevDirective"},{"__symbolic":"reference","name":"SdSubHeaderDefDirective"}],"exports":[{"__symbolic":"reference","name":"SdGrid"},{"__symbolic":"reference","name":"SdCellDefDirective"},{"__symbolic":"reference","name":"SdCellEditorDefDirective"},{"__symbolic":"reference","name":"SdCellFooterDevDirective"},{"__symbolic":"reference","name":"SdSubHeaderDefDirective"}],"providers":[{"__symbolic":"reference","name":"HandlerLocal"},{"__symbolic":"reference","name":"HandlerDotnet"},{"__symbolic":"reference","name":"EditorHandlerPipe"}]}]}],"members":{}},"SdGrid":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":66,"character":1},"arguments":[{"selector":"sd-grid","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":70,"character":19},"member":"OnPush"},"template":"<div class=\"clearfix\"></div>\r\n<ng-container ngIf=\"!isMobileOrTablet && !gridOption?.filter?.disabled\">\r\n <div class=\"row mx-0 mt-5\">\r\n <div\r\n ngIf=\"gridOption?.key && gridOption?.filter?.multiple !== false && (!gridOption?.filter?.quickFilterVisibility \|\| gridOption?.filter?.quickFilterVisibility === 'inline')\"\r\n class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <mat-form-field class=\"sd-md\" appearance=\"outline\" style=\"width: 100%;\">\r\n <mat-label>{{'Quick filters' \| sdTranslate}}</mat-label>\r\n <mat-select [(ngModel)]=\"selectedQuickFilter\" (selectionChange)=\"onSelectQuickFilter($event?.value)\" #matSelect>\r\n <mat-option value=\"\">{{'Please select' \| sdTranslate}}</mat-option>\r\n <mat-option ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n <div style=\"display:flex; justify-content: space-between\">\r\n <span>{{quickFilter.code}}</span>\r\n <div>\r\n <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n fontIcon=\"fa-pencil\"></mat-icon>\r\n <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n fontIcon=\"fa-trash-o\"></mat-icon>\r\n </div>\r\n </div>\r\n </mat-option>\r\n <mat-option>\r\n <div (click)=\"onCreateQuickFilter($event)\">\r\n <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n <span>{{'Create quick filter' \| sdTranslate}}</span>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <sd-grid-desktop-inline-filter class=\"c-display-contents\" [columns]=\"gridOption.columns\" [filter]=\"filter\"\r\n [externalFilter]=\"externalFilter\" (sdChange)=\"updateFilter()\" [inlineExternal]=\"inlineExternal\"\r\n [inlineColumn]=\"inlineColumn\" [filterOption]=\"gridOption.filter\">\r\n </sd-grid-desktop-inline-filter>\r\n </div>\r\n</ng-container>\r\n<div ngIf=\"!isMobileOrTablet; else elseMobileOrTablet\" class=\"sd-box\"\r\n [ngClass]=\"{'box-shadow-none': gridOption.hideFooter}\">\r\n <ng-container ngTemplateOutlet=\"gridViewContent\"></ng-container>\r\n <div [ngClass]=\"{'d-none': gridOption.hideFooter}\" class=\"sd-box-footer clearfix\">\r\n <div style=\"display: flex; align-items: center; align-content: space-between;\">\r\n <div style=\"flex: 1;\">\r\n <sd-button ngIf=\"sdGridPopupFilter\" class=\"mr-6\" [title]=\"'Filter' \| sdTranslate\" icon=\"filter_list\" size=\"sm\"\r\n (action)=\"onFilterPopup()\"></sd-button>\r\n <sd-button ngIf=\"!gridOption?.hideReload\" class=\"mr-6\" [title]=\"'Reload' \| sdTranslate\" icon=\"refresh\"\r\n size=\"sm\" (action)=\"reload()\"></sd-button>\r\n <sd-button ngIf=\"gridOption.onImportExcel\" class=\"mr-6\" [title]=\"'Import' \| sdTranslate\" icon=\"publish\"\r\n size=\"sm\" (action)=\"sdGridImportExcel.open()\"></sd-button>\r\n <ng-container ngIf=\"sdGridPopupExportExcel\">\r\n <sd-button ngIf=\"!gridOption.key\" class=\"mr-6\" [title]=\"'Export' \| sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n (action)=\"sdGridPopupExportExcel.exportDefault()\" [disabled]=\"!viewItems?.length\">\r\n </sd-button>\r\n <sd-button ngIf=\"gridOption.key\" class=\"mr-6\" [title]=\"'Export' \| sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n [matMenuTriggerFor]=\"menu\" [disabled]=\"!viewItems?.length\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"sdGridPopupExportExcel.exportDefault()\" type=\"button\">\r\n <mat-icon>get_app</mat-icon>\r\n <span> {{'Export all columns' \| sdTranslate}}</span>\r\n </button>\r\n <button mat-menu-item (click)=\"sdGridPopupExportExcel.open()\" type=\"button\">\r\n <mat-icon>settings</mat-icon>\r\n <span> {{'Configure' \| sdTranslate}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button ngIf=\"gridOption.export?.bigExport\" class=\"mr-6\" [title]=\"'Big export' \| sdTranslate\" icon=\"get_app\"\r\n size=\"sm\" (action)=\"bigExport()\" [disabled]=\"!viewItems?.length\">\r\n </sd-button>\r\n <sd-button ngIf=\"gridOption.key\" class=\"mr-6\" [title]=\"'Configure' \| sdTranslate\" icon=\"settings\" size=\"sm\"\r\n (action)=\"sdGridConfig.open()\"></sd-button>\r\n </div>\r\n <div style=\"flex: 1;\">\r\n <mat-paginator [length]=\"total\" [pageSize]=\"gridOption.paginate?.pageSize\" hidePageSize>\r\n </mat-paginator>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<ng-template #elseMobileOrTablet>\r\n <div class=\"sd-box c-mobile-box\">\r\n <div ngIf=\"!gridOption?.mobileOrTablet?.useGridView\" class=\"sd-box-body c-mobile-body\"\r\n [ngClass]=\"{'c-loading': isLoading}\" #gridBody>\r\n <i [ngClass]=\"{'d-none': !isLoading}\" class=\"fa fa-4x fa-spinner fa-pulse c-loading-icon\"></i>\r\n <ng-container ngFor=\"let item of viewItems\">\r\n <div class=\"c-mobile-item\" [ngClass]=\"{'c-mobile-item-selected':item.isChecked}\">\r\n <sd-grid-mobile-item-view [gridOption]=\"gridOption\" [item]=\"item\" (check)=\"onCheck(item)\">\r\n </sd-grid-mobile-item-view>\r\n <div class=\"p-2\" ngIf=\"gridOption?.subInformation && item?.subInformation?.isOpened\">\r\n <sd-grid-sub-information [subItems]=\"item?.subInformation?.subItems\" [option]=\"gridOption?.subInformation\">\r\n </sd-grid-sub-information>\r\n </div>\r\n <div class=\"c-mobile-command\">\r\n <div>\r\n <i ngIf=\"gridOption?.subInformation && item.subInformation?.isLoading\"\r\n class=\"fa fa-spinner fa-spin ml-1 c-mobile-action\" (click)=\"expandOrCollapse(item)\"></i>\r\n <i ngIf=\"gridOption?.subInformation && !item.subInformation?.isLoading\" class=\"fa ml-1 c-mobile-action\"\r\n [ngClass]=\"{'fa-plus': !item.subInformation?.isOpened, 'fa-minus': item.subInformation?.isOpened}\"\r\n (click)=\"expandOrCollapse(item)\"></i>\r\n </div>\r\n <ng-container ngIf=\"gridOption.commands \| mobileCommandFilter:item \| async; $implicit as filteredCommands\">\r\n <div ngIf=\"filteredCommands.length\">\r\n <button [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button type=\"button\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <!-- <i [matMenuTriggerFor]=\"menu\" class=\"fa fa-navicon fa-fw c-mobile-action\"></i> -->\r\n <mat-menu #menu=\"matMenu\">\r\n <button ngFor=\"let command of filteredCommands\" mat-menu-item (click)=\"command.click(item)\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\" type=\"button\">\r\n <i ngIf=\"!command.fontSet\" class=\"{{command.icon \| commandIcon:item}}\"></i>\r\n <mat-icon ngIf=\"command.fontSet\" [fontSet]=\"command.fontSet\">{{command.icon \| commandIcon:item}}\r\n </mat-icon>\r\n <span> {{command.title \| commandTitle:item}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container ngIf=\"gridOption?.mobileOrTablet?.useGridView\">\r\n <ng-container ngTemplateOutlet=\"gridViewContent\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'d-none': gridOption.hideFooter}\" class=\"sd-box-footer clearfix\">\r\n <sd-button icon=\"more_horiz\" size=\"sm\" [matMenuTriggerFor]=\"mobileAction\"></sd-button>\r\n <mat-menu #mobileAction=\"matMenu\">\r\n <button ngIf=\"sdGridPopupFilter\" mat-menu-item (click)=\"onFilterPopup()\" type=\"button\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span> {{'Filter' \| sdTranslate}}</span>\r\n </button>\r\n <button ngIf=\"!gridOption?.hideReload\" mat-menu-item (click)=\"reload()\" type=\"button\">\r\n <mat-icon>refresh</mat-icon>\r\n <span> {{'Reload' \| sdTranslate}}</span>\r\n </button>\r\n <button ngIf=\"gridOption.onImportExcel\" mat-menu-item (click)=\"sdGridImportExcel.open()\" type=\"button\">\r\n <mat-icon>publish</mat-icon>\r\n <span> {{'Import' \| sdTranslate}}</span>\r\n </button>\r\n <button ngIf=\"sdGridPopupExportExcel\" mat-menu-item (click)=\"sdGridPopupExportExcel.open()\" type=\"button\"\r\n [disabled]=\"!viewItems?.length\">\r\n <mat-icon>get_app</mat-icon>\r\n <span> {{'Export' \| sdTranslate}}</span>\r\n </button>\r\n <button ngIf=\"gridOption.key\" mat-menu-item (click)=\"sdGridConfig.open()\" type=\"button\">\r\n <mat-icon>settings</mat-icon>\r\n <span> {{'Configure' \| sdTranslate}}</span>\r\n </button>\r\n </mat-menu>\r\n <ng-container ngIf=\"gridOption?.key && gridOption?.filter?.multiple !== false && !gridOption?.filter?.disabled\">\r\n <sd-button icon=\"filter_list\" size=\"sm\" [matMenuTriggerFor]=\"mobileQuickFilter\"></sd-button>\r\n <mat-menu #mobileQuickFilter=\"matMenu\">\r\n <button mat-menu-item ngFor=\"let quickFilter of quickFilters\" (click)=\"onSelectQuickFilter(quickFilter.code)\"\r\n type=\"button\" style=\"display:flex; justify-content: space-between\">\r\n <span>{{quickFilter.code}}</span>\r\n <div>\r\n <mat-icon class=\"mr-1\" (click)=\"onEditQuickFilter($event, quickFilter)\">edit</mat-icon>\r\n <mat-icon class=\"mr-0\" (click)=\"onDeleteQuickFilter($event, quickFilter)\">delete</mat-icon>\r\n </div>\r\n </button>\r\n <button mat-menu-item (click)=\"onCreateQuickFilter($event)\" type=\"button\">\r\n <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n <span>{{'Create quick filter' \| sdTranslate}}</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <div class=\"row mr-0 ml-0 text-right pull-right\">\r\n <mat-paginator [length]=\"total\" [pageSize]=\"gridOption.paginate?.pageSize\" hidePageSize>\r\n </mat-paginator>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<!-- Modal Configure Grid -->\r\n<sd-grid-config (sdChange)=\"loadConfig($event)\" #sdGridConfig></sd-grid-config>\r\n<sd-grid-popup-editor (save)=\"onSave($event)\" #sdGridPopupEditor></sd-grid-popup-editor>\r\n<!-- Import Excel -->\r\n<sd-grid-import-excel ngIf=\"gridOption?.onImportExcel\" [key]=\"gridOption?.key\" [columns]=\"gridOption?.columns\"\r\n [accept]=\"gridOption?.onImportExcel\" #sdGridImportExcel></sd-grid-import-excel>\r\n<sd-grid-popup-export-excel ngIf=\"!gridOption.export?.disabled\" [key]=\"gridOption?.key\" [columns]=\"gridOption?.columns\"\r\n [extendColumns]=\"gridOption?.export?.columns\" [fileName]=\"gridOption?.export?.fileName\"\r\n [exportOption]=\"gridOption?.export\" [validator]=\"gridOption?.export?.validator\"\r\n (exportByTemplate)=\"onExportByTemplate($event)\" #sdGridPopupExportExcel>\r\n</sd-grid-popup-export-excel>\r\n<sd-grid-popup-filter\r\n ngIf=\"!gridOption?.filter?.disabled && (isMobileOrTablet \|\| gridOption?.filter?.type === 'popup')\"\r\n [key]=\"gridOption?.key\" (accept)=\"updateFilter($event)\" [filterOption]=\"gridOption?.filter\" (clear)=\"onClearFilter()\"\r\n (loadInlineFilter)=\"onFilterConfigurationLoaded($event)\" #sdGridPopupFilter>\r\n</sd-grid-popup-filter>\r\n\r\n<ng-template #gridViewContent>\r\n <div class=\"sd-box-body p-0\">\r\n <div class=\"row mx-0\">\r\n <div [ngClass]=\"{'c-loading': isLoading}\" class=\"table-responsive\" #gridBody style=\"position: relative;\">\r\n <i [ngClass]=\"{'d-none': !isLoading}\" class=\"fa fa-5x fa-spinner fa-pulse c-loading-icon\"></i>\r\n <table ngIf=\"gridOption\" class=\"table c-table\"\r\n [ngClass]=\"{'c-loading-margin': isLoading, 'c-bordered': configuration?.style?.bordered, 'c-stripped': configuration?.style?.bordered}\"\r\n style=\"border:0!important;\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th class=\"position-sticky c-sticky-all align-middle p-0\" style=\"width:4px; min-width: 4px;\" #fixedHeader>\r\n </th>\r\n <th ngIf=\"configuration?.style?.bordered\" class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\"\r\n #fixedHeader></th>\r\n <th ngIf=\"gridOption?.subInformation\" class=\"position-sticky c-sticky-all align-middle text-center p-0\"\r\n style=\"width:30px;min-width: 30px;line-height: 3rem\" #fixedHeader>\r\n </th>\r\n <th ngIf=\"gridOption?.subInformation && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <th ngIf=\"gridOption?.checkable && viewItems?.length\"\r\n class=\"position-sticky c-sticky-all align-middle text-center p-0 w-20\" style=\"width:20px;\" #fixedHeader>\r\n <mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"isCheckedAll\"\r\n (change)=\"checkAll(isCheckedAll)\"></mat-checkbox>\r\n </th>\r\n <th ngIf=\"gridOption?.checkable && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <th ngIf=\"gridOption?.commands?.length && viewItems?.length\"\r\n class=\"position-sticky align-middle text-center p-0 c-sticky-all c-w-1\" #fixedHeader>\r\n </th>\r\n <th ngIf=\"gridOption.commands?.length && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <th ngIf=\"gridOption.editor?.addable \|\| gridOption.editor?.editable\"\r\n class=\"position-sticky c-sticky-all align-middle text-center p-0\"\r\n style=\"width:60px;min-width:60px;max-width:60px;line-height: 1.5\" #fixedHeader>\r\n <div ngIf=\"gridOption.editor.addable\" class=\"align-middle text-center\">\r\n <button ngIf=\"!gridOption.editor.limit \|\| (gridOption.editor.limit > items.length)\" type=\"button\"\r\n (click)=\"onCreate()\" aria-label=\"Add\" mat-icon-button type=\"button\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n </th>\r\n <th ngIf=\"gridOption.editor && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <th ngIf=\"gridOption?.numberable\" class=\"position-sticky c-sticky-all align-middle text-center p-0\"\r\n style=\"width:20px;\" #fixedHeader>\r\n #\r\n </th>\r\n <th ngIf=\"gridOption?.numberable && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n <ng-container ngFor=\"let column of fixedColumns\">\r\n <th class=\"position-sticky align-middle cursor-pointer c-cell c-sticky-all\" #fixedHeader\r\n [ngStyle]=\"{'width':column.width ? column.width : '','max-width': column.width ? column.width : '','min-width': !column.width \|\| column.width === 'auto' ? '200px' : column.width}\">\r\n <span [title]=\"column.title\" class=\"c-header-title\" (click)=\"sort(column)\">\r\n {{column.title}}\r\n <i ngIf=\"column.type !== 'children' && column.type !== 'image' && gridOption.sortable !== false && column.sortable !== false && orderBy !== column.field\"\r\n class=\"fa fa-sort fa-fw\"></i>\r\n <i ngIf=\"orderBy === column.field && orderDirection == 'ASC'\" class=\"fa fa-sort-asc fa-fw\"></i>\r\n <i ngIf=\"orderBy === column.field && orderDirection == 'DESC'\" class=\"fa fa-sort-desc fa-fw\"></i>\r\n </span>\r\n <ng-container\r\n ngIf=\"!gridOption?.filter?.disabled && gridOption?.filter?.columnInline !== 'outside' && !column?.filter?.disabled && (inlineColumn[column.field] \|\| gridOption?.filter?.type === 'inline')\">\r\n <sd-input size=\"sm\"\r\n ngIf=\"column.type === 'string' \|\| column.type === 'number' \|\| column.type === 'children'\"\r\n [(model)]=\"filter[column.field]\" (keyupEnter)=\"updateFilter()\">\r\n </sd-input>\r\n <sd-select ngIf=\"column.type === 'bool'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\"\r\n [items]=\"[{value: 1, display: column.trueValue \|\| 'TRUE'}, {value: 0, display: column.falseValue \|\| 'FALSE'}]\"\r\n valueField=\"value\" displayField=\"display\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'values'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n [filtered]=\"column?.editor?.autocomplete\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'radio'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\" [items]=\"column.values\" [valueField]=\"column.valueField\"\r\n [displayField]=\"column.displayField\">\r\n </sd-select>\r\n <sd-date-time size=\"sm\"\r\n ngIf=\"column.type === 'date' \|\| column.type === 'datetime' \|\| column.type === 'time'\"\r\n [(model)]=\"filter[column.field]\" (sdChange)=\"updateFilter()\" type=\"date\">\r\n </sd-date-time>\r\n </ng-container>\r\n </th>\r\n <th ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\" #fixedHeader></th>\r\n </ng-container>\r\n <th ngFor=\"let column of normalColumns\"\r\n class=\"position-sticky align-middle cursor-pointer border-top-0 border-bottom-0 c-cell c-sticky-top c-normal-column\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '','max-width': column.width ? column.width : '','min-width': !column.width \|\| column.width === 'auto' ? '200px' : column.width}\">\r\n <span [title]=\"column.title\" class=\"c-header-title\" (click)=\"sort(column)\">\r\n {{column.title}}\r\n <i ngIf=\"column.type !== 'children' && gridOption.sortable !== false && column.sortable !== false && orderBy !== column.field\"\r\n class=\"fa fa-sort fa-fw\"></i>\r\n <i ngIf=\"orderBy == column.field && orderDirection == 'ASC'\" class=\"fa fa-sort-asc fa-fw\"></i>\r\n <i ngIf=\"orderBy == column.field && orderDirection == 'DESC'\" class=\"fa fa-sort-desc fa-fw\"></i>\r\n </span>\r\n <ng-container\r\n ngIf=\"!gridOption?.filter?.disabled && gridOption?.filter?.columnInline !== 'outside' && !column?.filter?.disabled && (inlineColumn[column.field] \|\| gridOption?.filter?.type === 'inline')\">\r\n <sd-input size=\"sm\"\r\n ngIf=\"column.type === 'string' \|\| column.type === 'number' \|\| column.type === 'children'\"\r\n [(model)]=\"filter[column.field]\" (keyupEnter)=\"updateFilter()\">\r\n </sd-input>\r\n <sd-select ngIf=\"column.type === 'bool'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\"\r\n [items]=\"[{value: 1, display: column.trueValue \|\| 'TRUE'}, {value: 0, display: column.falseValue \|\| 'FALSE'}]\"\r\n valueField=\"value\" displayField=\"display\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'values'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n [filtered]=\"column?.editor?.autocomplete\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'radio'\" size=\"sm\" [(model)]=\"filter[column.field]\"\r\n (sdChange)=\"updateFilter()\" [items]=\"column.values\" [valueField]=\"column.valueField\"\r\n [displayField]=\"column.displayField\">\r\n </sd-select>\r\n <sd-date-time size=\"sm\"\r\n ngIf=\"column.type === 'date' \|\| column.type === 'datetime' \|\| column.type === 'time'\"\r\n [(model)]=\"filter[column.field]\" (sdChange)=\"updateFilter()\" type=\"date\">\r\n </sd-date-time>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container ngFor=\"let item of viewItems; index as idx; trackBy: trackById\">\r\n <tr>\r\n <td class=\"position-sticky c-sticky-left p-0\"\r\n [ngClass]=\"{'c-error': ((gridOption.editor?.type === 'inline' \|\| item.editingStatus) && item.editorHandler?.errorMessage), \r\n 'c-selected': !((gridOption.editor?.type === 'inline' \|\| item.editingStatus) && item.editorHandler?.errorMessage) && selectedItem === item}\"\r\n style=\"width:4px;min-width: 4px;left:0\" matTooltipPosition=\"after\"\r\n [matTooltip]=\"item.editingStatus ? item.editorHandler?.errorMessage:''\" #fixedBody>\r\n </td>\r\n <td ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.subInformation\" class=\"position-sticky text-center align-middle p-0 c-sticky-left\"\r\n style=\"width:30px;min-width: 30px;line-height: 3rem\" #fixedBody>\r\n <button ngIf=\"!item.editingStatus\" (click)=\"expandOrCollapse(item)\" type=\"button\" class=\"c-btn-icon\">\r\n <i ngIf=\"item.subInformation?.isLoading\" class=\"fa fa-spinner fa-spin\"></i>\r\n <i ngIf=\"!item.subInformation?.isLoading\" class=\"fa\"\r\n [ngClass]=\"{'fa-caret-right': !item.subInformation?.isOpened, 'fa-caret-down': item.subInformation?.isOpened}\"></i>\r\n </button>\r\n </td>\r\n <td ngIf=\"gridOption.subInformation && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.checkable && viewItems?.length\"\r\n class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n <div ngIf=\"!item.editingStatus\" class=\"align-middle text-center w-20\" style=\"width:20px;\">\r\n <mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"item.isChecked\"\r\n (change)=\"onCheck(item, true)\"></mat-checkbox>\r\n </div>\r\n </td>\r\n <td ngIf=\"gridOption.checkable && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.commands?.length && viewItems?.length\"\r\n class=\"position-sticky align-middle px-2 py-0 c-sticky-left c-w-1\" #fixedBody>\r\n <div ngIf=\"!item.editingStatus\" class=\"d-flex align-middle text-center justify-content-center\">\r\n <ng-container\r\n ngIf=\"gridOption.commands \| commandFilter:item \| async; $implicit as filteredCommands\">\r\n <section ngFor=\"let command of filteredCommands\">\r\n <ng-container ngIf=\"!command.children?.length; else elseCommandChildren\">\r\n <button ngIf=\"!command.fontSet\" (click)=\"command.click(item)\" type=\"button\"\r\n class=\"c-btn-icon\" [matTooltip]=\"command.title \| commandTitle:item\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <i class=\"{{command.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button ngIf=\"command.fontSet\" [matTooltip]=\"command.title \| commandTitle:item\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\" (click)=\"command.click(item)\"\r\n type=\"button\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon [fontSet]=\"command.fontSet\">{{command.icon \| commandIcon:item}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-template #elseCommandChildren>\r\n <button ngIf=\"command.icon\" [matMenuTriggerFor]=\"menu\" type=\"button\" class=\"c-btn-icon\"\r\n [matTooltip]=\"command.title\" [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <i class=\"{{command.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button ngIf=\"!command.icon\" mat-icon-button [matMenuTriggerFor]=\"menu\" type=\"button\"\r\n class=\"c-btn-icon-30\" [matTooltip]=\"command.title\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container ngFor=\"let childCommand of command.children\">\r\n <button ngIf=\"!(item \| commandHidden:childCommand \| async)\" type=\"button\" mat-menu-item\r\n [disabled]=\"childCommand.disabled \| commandDisabled:item\"\r\n (click)=\"childCommand.click(item)\">\r\n <i ngIf=\"!childCommand.fontSet\" class=\"{{childCommand.icon \| commandIcon:item}}\"></i>\r\n <mat-icon ngIf=\"childCommand.fontSet\" [fontSet]=\"childCommand.fontSet\">\r\n {{childCommand.icon \| commandIcon:item}}</mat-icon>\r\n <span> {{childCommand.title \| commandTitle:item}}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-template>\r\n </section>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td ngIf=\"gridOption.commands?.length && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.editor?.addable \|\| gridOption.editor?.editable\"\r\n class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n <div class=\"align-middle text-center\"\r\n style=\"width:60px;min-width:60px;max-width:60px;line-height: 1.5\">\r\n <button\r\n ngIf=\"!item.editingStatus && gridOption.editor?.type !== 'inline' && gridOption.editor?.editable\"\r\n [disabled]=\"item.editorHandler?.disabled\" (click)=\"onUpdate(item, true)\" aria-label=\"Edit\"\r\n type=\"button\" mat-icon-button>\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button ngIf=\"item.editingStatus && gridOption.editor?.type !== 'inline'\"\r\n [disabled]=\"item.editorHandler?.errorMessage \|\| item.editorHandler?.saving\" (click)=\"onSave(item)\"\r\n type=\"button\" aria-label=\"Save\" mat-icon-button>\r\n <mat-icon>save</mat-icon>\r\n </button>\r\n <button ngIf=\"item.editingStatus \|\| gridOption.editor?.type === 'inline'\" (click)=\"onCancel(item)\"\r\n aria-label=\"Cancel\" mat-icon-button\r\n [disabled]=\"gridOption.editor?.type === 'inline' && item.editorHandler?.disabled\" type=\"button\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </div>\r\n </td>\r\n <td ngIf=\"gridOption.editor && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.numberable\" class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n <div ngIf=\"!item.editingStatus\" class=\"align-middle text-center\" style=\"width:20px;\">\r\n <!-- {{gridOption.paginate?.pageSize (currentPage - 1) + idx + 1}} -->\r\n {{idx + 1}}\r\n </div>\r\n </td>\r\n <td ngIf=\"gridOption.numberable && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <ng-template ngFor let-column [ngForOf]=\"fixedColumns\">\r\n <td class=\"position-sticky align-middle c-cell c-sticky-left\"\r\n [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number' && column.type !== 'children', 'text-right': column.type === 'number'}\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '','min-width': !column.width \|\| column.width === 'auto' ? '200px' : column.width}\"\r\n (click)=\"rowHandler.click(item)\" #fixedBody>\r\n <ng-container ngIf=\"column.type !== 'children';else elseColumnChildren\">\r\n <ng-container ngIf=\"item[column.field] \| editorHandler:item:gridOption\">\r\n <div\r\n ngIf=\"item.editorHandler[column.field].visible && gridOption.editor?.validate && !(item[column.field] \| editorValidate:item:gridOption.editor.validate \| async)\">\r\n </div>\r\n <ng-container ngIf=\"item.editorHandler[column.field].visible;else columnView\">\r\n <div style=\"width: 100%\">\r\n <ng-container ngIf=\"cellEditorDef[column.field]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellEditorDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n <sd-grid-desktop-column-edit ngIf=\"!cellEditorDef[column.field]\" [column]=\"column\"\r\n [item]=\"item\" (sdChange)=\"onEditorChange()\">\r\n </sd-grid-desktop-column-edit>\r\n </div>\r\n </ng-container>\r\n <ng-template #columnView>\r\n <div class=\"align-middle\" (dblclick)=\"rowHandler.dblClick(item)\">\r\n <ng-container ngIf=\"cellDef[column.field]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n <sd-grid-desktop-column-view ngIf=\"!cellDef[column.field]\" [column]=\"column\" [item]=\"item\">\r\n </sd-grid-desktop-column-view>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #elseColumnChildren>\r\n <sd-grid-desktop-column-children-view [column]=\"column\" [item]=\"item\">\r\n </sd-grid-desktop-column-children-view>\r\n </ng-template>\r\n </td>\r\n <td ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n </ng-template>\r\n <td ngFor=\"let column of normalColumns\" class=\"align-middle c-cell c-normal-column\"\r\n (click)=\"rowHandler.click(item)\"\r\n [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number' && column.type !== 'children', 'text-right': column.type === 'number'}\"\r\n (dblclick)=\"rowHandler.dblClick(item)\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '', 'min-width': !column.width \|\| column.width === 'auto' ? '200px' : column.width}\">\r\n <ng-container ngIf=\"column.type !== 'children';else elseColumnChildren\">\r\n <ng-container ngIf=\"item[column.field] \| editorHandler:item:gridOption\">\r\n <div\r\n ngIf=\"item.editorHandler[column.field].visible && gridOption.editor?.validate && !(item[column.field] \| editorValidate:item:gridOption.editor.validate \| async)\">\r\n </div>\r\n <ng-container ngIf=\"item.editorHandler[column.field].visible;else columnView\">\r\n <div style=\"width: 100%\">\r\n <ng-container ngIf=\"cellEditorDef[column.field]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellEditorDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n <sd-grid-desktop-column-edit ngIf=\"!cellEditorDef[column.field]\" [column]=\"column\"\r\n [item]=\"item\" (sdChange)=\"onEditorChange()\">\r\n </sd-grid-desktop-column-edit>\r\n </div>\r\n </ng-container>\r\n <ng-template #columnView>\r\n <div class=\"align-middle\" (dblclick)=\"rowHandler.dblClick(item)\">\r\n <ng-container ngIf=\"cellDef[column.field]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellDef[column.field].templateRef;context:{item: item, idx: idx, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n <sd-grid-desktop-column-view ngIf=\"!cellDef[column.field]\" [column]=\"column\" [item]=\"item\">\r\n </sd-grid-desktop-column-view>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #elseColumnChildren>\r\n <sd-grid-desktop-column-children-view [column]=\"column\" [item]=\"item\">\r\n </sd-grid-desktop-column-children-view>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n <tr ngIf=\"gridOption?.subInformation && item?.subInformation?.isOpened\" class=\"c-no-hover\">\r\n <td class=\"p-10\" colspan=\"100\">\r\n <sd-grid-sub-information [subItems]=\"item?.subInformation?.subItems\"\r\n [option]=\"gridOption?.subInformation\">\r\n </sd-grid-sub-information>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <ng-container ngIf=\"viewItems?.length\">\r\n <ng-container ngFor=\"let footerIndex of footerRows\">\r\n <tr>\r\n <td class=\"position-sticky c-sticky-left p-0\" style=\"width:4px;min-width: 4px;left:0\" #fixedBody>\r\n </td>\r\n <td ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.subInformation\"\r\n class=\"position-sticky text-center align-middle p-0 c-sticky-left\"\r\n style=\"width:30px;min-width: 30px;line-height: 3rem\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.subInformation && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.checkable && viewItems?.length\"\r\n class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.checkable && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.commands?.length && viewItems?.length\"\r\n class=\"position-sticky align-middle px-2 py-0 c-sticky-left c-w-1\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.commands?.length && viewItems?.length && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.editor?.addable \|\| gridOption.editor?.editable\"\r\n class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.editor && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <td ngIf=\"gridOption.numberable\" class=\"position-sticky c-sticky-left align-middle p-0\" #fixedBody>\r\n </td>\r\n <td ngIf=\"gridOption.numberable && configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n <ng-template ngFor let-column [ngForOf]=\"fixedColumns\">\r\n <td class=\"position-sticky align-middle p-0 c-sticky-left\" #fixedBody>\r\n <ng-container ngIf=\"cellFooterDef[column.field] && cellFooterDef[column.field][footerIndex]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellFooterDef[column.field][footerIndex].templateRef;context:{items: viewItems, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n <td ngIf=\"configuration?.style?.bordered\"\r\n class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\" #fixedBody></td>\r\n </ng-template>\r\n <td ngFor=\"let column of normalColumns\" class=\"align-middle p-0 c-normal-column\">\r\n <ng-container ngIf=\"cellFooterDef[column.field] && cellFooterDef[column.field][footerIndex]\">\r\n <ng-container\r\n ngTemplateOutlet=\"cellFooterDef[column.field][footerIndex].templateRef;context:{items: viewItems, column:column}\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n <tr ngIf=\"!viewItems?.length && !isLoading\">\r\n <td class=\"c-empty\" colspan=\"100\">\r\n <mat-icon>cloud_off</mat-icon>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>","styles":[".text-black400{color:#757575}.c-table.table{margin-bottom:5px}.c-table.table td.c-empty,.c-table.table th.c-empty{background-color:#fff;border:none!important;text-align:center}.c-table.table td.c-empty mat-icon,.c-table.table th.c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}.c-table.table.c-bordered,.c-table.table.c-bordered td,.c-table.table.c-bordered th{border:1px solid #dee2e6!important}.c-table.table.c-bordered td.c-empty,.c-table.table.c-bordered th.c-empty{background-color:#fff;border:none!important;text-align:center}.c-table.table.c-bordered td.c-empty mat-icon,.c-table.table.c-bordered th.c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}.c-table.table.c-bordered td.c-normal-column,.c-table.table.c-bordered th.c-normal-column{border-left:none!important}.c-table.table.c-bordered td.c-sticky-spliter,.c-table.table.c-bordered th.c-sticky-spliter{background-color:#dee2e6!important;border:none!important;display:table-cell;max-width:1px!important;min-width:1px!important;width:1px!important}.c-table.table.c-bordered td.c-sticky-left,.c-table.table.c-bordered th.c-sticky-left{border-left:0!important;border-right:0!important}.c-table.table.c-bordered td.c-sticky-all,.c-table.table.c-bordered th.c-sticky-all{border:0!important}.c-table.table thead.thead-light th{background-color:#eceff1;border-top:none!important;color:#2f3136;font-size:14px!important;height:40px;min-width:0}.c-table.table thead.thead-light th.c-cell{padding:3px 5px!important}.c-table.table thead.thead-light th .mat-checkbox label{margin-bottom:0}.c-table.table tbody tr:not(.c-no-hover):hover,.c-table.table tbody tr:not(.c-no-hover):hover td.c-sticky-left{background-color:#e3f2fd!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd){background-color:#fafafa}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left{background-color:#fafafa!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left.c-sticky-spliter{background-color:#dee2e6!important;border:none!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left.c-selected{background-color:#2962ff!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(odd) .c-sticky-left.c-error{background-color:#f82c13!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n){background-color:#fff}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left{background-color:#fff!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left.c-sticky-spliter{background-color:#dee2e6!important;border:none!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left.c-selected{background-color:#2962ff!important}.c-table.table tbody tr:not(.c-no-hover):nth-of-type(2n) .c-sticky-left.c-error{background-color:#f82c13!important}.c-table.table tbody td{font-size:13px!important;min-height:25px;min-width:0}.c-table.table tbody td.c-cell{padding:3px 5px!important}.grid-header{overflow-x:hidden;overflow-y:hidden}.c-cell-padding{padding:3px 5px!important}.c-header-title{font-weight:500;text-transform:capitalize}span.c-header-title{display:block;overflow:hidden!important;padding:0 .3rem;text-overflow:ellipsis;white-space:nowrap}.status{border-radius:1.5rem;display:inline-block;font-weight:500;padding:4px 8px;text-align:center;text-transform:uppercase}.status.c-desktop-status{width:100%}.status.c-align-left{text-align:left!important}.status-success{color:#43a047}.status-danger{color:#f44336}.page-item{cursor:pointer}.sumarize{background-color:#00bcd4;border-radius:10rem;color:#fff;display:inline-block;font-size:12px;font-weight:500;line-height:1;padding:8px 12px;text-align:center;text-transform:uppercase;white-space:normal}.cursor-pointer{cursor:pointer}.c-overflow-x-hidden{overflow-x:hidden}.c-grid-header,.c-overflow-y-hidden{overflow-y:hidden}.c-grid-header{overflow-x:hidden}.c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}.c-sticky-top{top:0!important;z-index:20}.c-sticky-left{left:0;z-index:20}.c-sticky-all{left:0;top:0!important;z-index:30}.c-sticky-spliter{background-color:#dee2e6!important;border:none!important;z-index:40!important}.c-badge:not(.c-children){border-radius:10rem;display:block!important;font-size:12px;font-weight:500;margin:0 auto;max-width:80%;padding:.3rem!important}.c-badge.c-children{font-size:14px;font-weight:500;padding:5px!important}.blinker{-webkit-animation:blinker .5s linear infinite;animation:blinker .5s linear infinite;color:#1c87c9;font-weight:500}@-webkit-keyframes blinker{50%{opacity:0}}@keyframes blinker{50%{opacity:0}}.c-loading{opacity:.4}.c-loading-icon{left:calc(50% - 2.5rem);position:-webkit-sticky;position:sticky;top:calc(50% - 2.5rem)}.c-loading-margin{margin-top:-5rem}fieldset.c-fieldset-mobile{border:1px solid #e0e0e0;border-radius:5px;padding:3px 5px}legend.c-legend-mobile{border-bottom:none;font-size:16px;font-weight:500;margin:0 10px;padding:0 5px;width:auto}.c-mobile-box{border-top:none!important;box-shadow:0 0 3px 0 rgba(0,0,0,.3)}.c-mobile-body{margin-bottom:5px;margin-top:5px;overflow-x:auto}.c-mobile-item{border:1px solid #fff;border-radius:5px;box-shadow:0 0 3px 0 rgba(0,0,0,.3);margin:8px 0;padding:5px}.c-mobile-item.c-mobile-item-selected{border:2px solid #2962ff!important}.c-mobile-item:nth-of-type(odd){background-color:#fafafa}.c-mobile-item:nth-of-type(2n){background-color:#fff}.c-mobile-row{margin-bottom:3px;margin-top:0}.c-desktop-title{font-size:13px;line-height:1.7}.c-desktop-title,.c-mobile-title{color:#212529;font-weight:700;margin-right:3px}.c-mobile-title{font-size:14px}.c-children,.c-mobile-value{color:#212529;font-size:14px;overflow-wrap:break-word}.c-mobile-badge{font-size:14px;font-weight:500;padding:5px!important}.c-mobile-command{align-items:center;border-top:1px solid #f4f4f4;display:flex;justify-content:space-between;padding:5px 3px 0}.c-mobile-action{font-size:18px!important}.c-mobile-checkable{margin:5px 0 5px -5px!important}.c-m-3{margin:3px!important}.c-m-5{margin:5px!important}.c-w-1{min-width:1px;width:1px}.c-display-contents{display:contents}.w-20{width:20px!important}.c-btn-icon-30{height:30px;line-height:30px;width:30px}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:16px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}:host td .mat-icon-button,:host th .mat-icon-button{height:24px;line-height:24px;width:24px}:host td .mat-icon-button .material-icons,:host th .mat-icon-button .material-icons{font-size:20px}:host ::ng-deep .mat-paginator-container{height:32px;min-height:32px}:host ::ng-deep .mat-paginator-container .mat-icon-button{height:28px;line-height:28px;width:28px}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-checkbox label{margin-bottom:0}"]}]}],"members":{"fixedHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":115,"character":3},"arguments":["fixedHeader"]}]}],"fixedBodies":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":116,"character":3},"arguments":["fixedBody"]}]}],"fixedGridContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":118,"character":3},"arguments":["fixedGridContainer"]}]}],"gridFixedBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":119,"character":3},"arguments":["gridFixedBody"]}]}],"gridContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":121,"character":3},"arguments":["gridContainer"]}]}],"gridHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":122,"character":3},"arguments":["gridHeader"]}]}],"gridBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":123,"character":3},"arguments":["gridBody"]}]}],"sdGridConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":125,"character":3},"arguments":["sdGridConfig",{"static":true}]}]}],"sdGridPopupEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":126,"character":3},"arguments":["sdGridPopupEditor"]}]}],"sdGridPopupFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":128,"character":3},"arguments":["sdGridPopupFilter"]}]}],"matSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":129,"character":3},"arguments":["matSelect"]}]}],"sdGridPopupExportExcel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":131,"character":3},"arguments":["sdGridPopupExportExcel"]}]}],"sdGridImportExcel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":132,"character":3},"arguments":["sdGridImportExcel"]}]}],"cellDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":134,"character":3},"arguments":[{"__symbolic":"reference","name":"SdCellDefDirective"}]}]}],"cellEditorDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":139,"character":3},"arguments":[{"__symbolic":"reference","name":"SdCellEditorDefDirective"}]}]}],"cellFooterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":144,"character":3},"arguments":[{"__symbolic":"reference","name":"SdCellFooterDevDirective"}]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":152,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":152,"character":13}]}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":301,"character":5},"arguments":[{"__symbolic":"reference","name":"GRID_CONFIG"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":301,"character":26}}],null,null,null,null,null,null,null,null,null,null,null],"parameters":[{"__symbolic":"reference","name":"IGridConfiguration"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":302,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":303,"character":19},{"__symbolic":"reference","name":"HandlerLocal"},{"__symbolic":"reference","name":"HandlerDotnet"},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":306,"character":30},{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":307,"character":22},{"__symbolic":"reference","module":"@sd-angular/core/loading","name":"SdLoadingService","line":308,"character":28},{"__symbolic":"reference","module":"@sd-angular/core/api","name":"SdApiService","line":309,"character":24},{"__symbolic":"reference","module":"@sd-angular/core/excel","name":"SdExcelService","line":310,"character":26},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":311,"character":27},{"__symbolic":"reference","name":"EditorHandlerPipe"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"reloadItem":[{"__symbolic":"method"}],"blink":[{"__symbolic":"method"}],"stopBlink":[{"__symbolic":"method"}],"generateViewItems":[{"__symbolic":"method"}],"getItems":[{"__symbolic":"method"}],"checkAll":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"setHeight":[{"__symbolic":"method"}],"loadConfig":[{"__symbolic":"method"}],"initFilter":[{"__symbolic":"method"}],"initDictionaryColumnValues":[{"__symbolic":"method"}],"generateEditorHandlers":[{"__symbolic":"method"}],"generateEditorHanlder":[{"__symbolic":"method"}],"trackById":[{"__symbolic":"method"}],"onFilterPopup":[{"__symbolic":"method"}]}},"SdGridOption":{"__symbolic":"interface"},"SdGridCommand":{"__symbolic":"interface"},"SdGridColumn":{"__symbolic":"interface"},"SdGridExternalFilter":{"__symbolic":"interface"},"defaultGridOption":{"type":{"__symbolic":"reference","name":"undefined"},"items":[],"filter":{"type":"inline","disabled":false},"sortable":true,"paginate":{"pageSize":50,"pageCount":5},"commands":[],"columns":[]},"SdGridBaseOption":{"__symbolic":"interface"},"GridBaseOptionExport":{"__symbolic":"interface"},"GridBaseOptionFilter":{"__symbolic":"interface"},"GridCommandNoChildren":{"__symbolic":"interface"},"GridCommandWithChildren":{"__symbolic":"interface"},"EditorHandler":{"__symbolic":"interface"},"GridItem":{"__symbolic":"interface"},"ColumnCommand":{"__symbolic":"interface"},"GridColumnChild":{"__symbolic":"interface"},"GridColumnChildren":{"__symbolic":"interface"},"SubOption":{"__symbolic":"interface"},"DynamicEditorItem":{"__symbolic":"interface"},"MobileConfiguration":{"__symbolic":"interface"},"SdGridConfig":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"sd-grid-config","template":"<sd-modal [title]=\"'Configuration' \| sdTranslate\" #modal>\r\n <sd-modal-body ngIf=\"storage\">\r\n <div class=\"row\">\r\n <div class=\"col-md-3 col-6\">\r\n <sd-input [label]=\"'Page size' \| sdTranslate\" [(model)]=\"storage.pageSize\" type=\"number\" step=\"1\">\r\n </sd-input>\r\n </div>\r\n </div>\r\n <div class=\"sd-box sd-box-primary\">\r\n <div class=\"sd-box-body p-0\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table table-striped table-sm table-hover table-bordered c-table\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th class=\"text-center\" style=\"width: 50px\">#</th>\r\n <th sdDesktop class=\"text-center\" style=\"width: 80px\"></th>\r\n <!-- <th class=\"text-uppercase\" style=\"width: 120px\">Field </th> -->\r\n <th class=\"text-uppercase\">{{'Title' \| sdTranslate}}</th>\r\n <th sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Width' \| sdTranslate}}</th>\r\n <th class=\"text-uppercase\" style=\"width: 80px\">{{'Hidden' \| sdTranslate}}</th>\r\n <th sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Freeze' \| sdTranslate}}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr ngFor=\"let column of storage.columnConfigs; let idx = index\">\r\n <td class=\"align-middle text-center\">\r\n {{idx+1}}\r\n </td>\r\n <td sdDesktop class=\"align-middle text-center\">\r\n <button type=\"button\" [disabled]=\"idx==0\" type=\"button\" class=\"c-btn-icon\" placement=\"top\"\r\n matTooltip=\"Up\" (click)=\"moveColumnUp(idx)\">\r\n <i class=\"fa fa-arrow-up text-primary\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button type=\"button\" [disabled]=\"idx==storage.columnConfigs.length-1\" type=\"button\"\r\n class=\"c-btn-icon\" placement=\"top\" matTooltip=\"Down\" (click)=\"moveColumnDown(idx)\">\r\n <i class=\"fa fa-arrow-down text-primary\" aria-hidden=\"true\"></i>\r\n </button>\r\n </td>\r\n <!-- <td class=\"align-middle\">{{column.originColumn.field}}</td> -->\r\n <td class=\"align-middle\">\r\n <input type=\"text\" placeholder=\"{{column.originColumn.title}}\" [(ngModel)]=\"column.title\"\r\n class=\"form-control form-control-sm\">\r\n </td>\r\n <td sdDesktop class=\"align-middle\">\r\n <input type=\"text\" placeholder=\"{{column.originColumn.width}}\" [(ngModel)]=\"column.width\"\r\n class=\"form-control form-control-sm\">\r\n </td>\r\n <td class=\"align-middle text-center\">\r\n <mat-slide-toggle [(ngModel)]=\"column.hidden\" color=\"primary\"></mat-slide-toggle>\r\n </td>\r\n <td sdDesktop class=\"align-middle text-center\">\r\n <mat-slide-toggle [(ngModel)]=\"column.fixed\" color=\"primary\"></mat-slide-toggle>\r\n </td>\r\n </tr>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </sd-modal-body>\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' \| sdTranslate\" size=\"sm\"></sd-button>\r\n <sd-button (action)=\"save()\" icon=\"save\" [title]=\"'Save' \| sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' \| sdTranslate\"\r\n width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"save()\" icon=\"save\" [title]=\"'Save' \| sdTranslate\"\r\n color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>","styles":[".c-btn-icon{background:none!important;border:none;opacity:.8}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}.table td,.table th{padding:.2rem!important}.c-table.table{margin-bottom:5px}"]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["modal"]}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":30,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":31,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/setting","name":"SdSettingService","line":32,"character":28},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":33,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"setOption":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"moveColumnUp":[{"__symbolic":"method"}],"moveColumnDown":[{"__symbolic":"method"}],"emitOnChange":[{"__symbolic":"method"}]}},"OriginColumn":{"__symbolic":"interface"},"ConfigOption":{"__symbolic":"interface"},"ConfigResult":{"__symbolic":"interface"},"ConfigStorage":{"__symbolic":"interface"},"ConfigColumn":{"__symbolic":"interface"},"GridDesktopColumnChildrenViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-desktop-column-children-view","template":"<ng-container ngIf=\"column.children?.length\">\r\n <div class=\"row mx-n2 c-cell-padding\">\r\n <div ngFor=\"let childColumn of column.children \| filterMobile:item\" class=\"px-2\"\r\n [ngClass]=\"{'col-sm-6': childColumn?.colSpan === 1, 'col-sm-12': !childColumn?.colSpan \|\| childColumn?.colSpan === 2}\">\r\n <span class=\"c-title\">\r\n {{item \| columnTitle:childColumn.title:childColumn.dynamicTitle \| async}}:\r\n </span>\r\n <span ngIf=\"childColumn.type === 'string'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| valueTransform:item:childColumn}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| valueTransform:item:childColumn}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'number'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| valueTransform:item:childColumn}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| valueTransform:item:childColumn}}\r\n </ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'datetime'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.timeDifferent \| async}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n <span matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'\">{{item[childColumn.field] \| sdTimeDifferent:'dd/MM/yyyy HH:mm':childColumn.timeDifferent \| async}}</span>\r\n </ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'date'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| sdTimeDifferent:'dd/MM/yyyy':childColumn.timeDifferent \| async}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n <span matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[childColumn.field] \| date:'dd/MM/yyyy'\">{{item[childColumn.field] \| sdTimeDifferent:'dd/MM/yyyy':childColumn.timeDifferent \| async}}</span>\r\n </ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'time'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| date:'HH:mm'}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| date:'HH:mm'}}\r\n </ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'bool'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n <strong ngIf=\"item[childColumn.field]\" class=\"text-success\">{{childColumn.trueValue \|\| 'True'}}</strong>\r\n <strong ngIf=\"!item[childColumn.field]\" class=\"text-danger\">{{childColumn.falseValue \|\| 'False'}}</strong>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'color'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"><input disabled=\"true\"\r\n type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n <ng-container ngIf=\"childColumn.type === 'values'\">\r\n <ng-container ngIf=\"childColumn?.dictionary[item[childColumn.field]] as dic; else elseNotInDic\">\r\n <span ngIf=\"dic.color \|\| dic.backgroundColor; else elseNoStatus\" class=\"status c-children\"\r\n [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n {{dic.text}}\r\n </span>\r\n <ng-template #elseNoStatus>\r\n <span [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n {{dic.text}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #elseNotInDic>\r\n <span [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n {{item[childColumn.field]}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <span ngIf=\"childColumn.type === 'radio'\"\r\n [className]=\"item[childColumn.field] \| cellDesktopClassName:item:childColumn:true\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field]}}</span>\r\n <img ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\" [width]=\"childColumn.display?.width\"\r\n [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">\r\n </div>\r\n </div>\r\n</ng-container>","styles":[".text-black400{color:#757575}.c-title{color:#212529;font-size:13px;font-weight:700;line-height:1.7;margin-right:3px}.c-badge{border-radius:10rem;color:#212529;display:block!important;font-size:14px;font-weight:500;margin:0 auto;max-width:80%;padding:5px!important}.c-badge a{color:#fff}.c-children{color:#212529;font-size:14px;overflow-wrap:break-word}.status{border-radius:1.5rem;display:inline-block;font-weight:500;padding:4px 8px;text-align:left!important;text-transform:uppercase}.status-success{color:#4caf50}.status-danger{color:#f82c13}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:20px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}"]}]}],"members":{"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdGridDesktopColumnEdit":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"sd-grid-desktop-column-edit","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":19},"member":"OnPush"},"template":"<ng-container ngIf=\"column && item\">\r\n <div ngIf=\"column.type === 'string'\">\r\n <div ngIf=\"column.editor?.item;else elseUseInput\">\r\n <sd-select ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n [items]=\"item[column.editor?.item?.dependOnField] \| sdDynamicItems:dynamicItems\"\r\n [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n [items]=\"item[column.editor?.item?.dependOnField] \| sdDynamicItems:dynamicItems\"\r\n [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n </sd-autocomplete>\r\n </div>\r\n <ng-template #elseUseInput>\r\n <sd-input size=\"sm\" ngIf=\"column.editor?.click\" [(model)]=\"item[column.field]\"\r\n (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n (sdChange)=\"onEditorChange(column,item,item[column.field])\" (sdClick)=\"column.editor.click(item)\"></sd-input>\r\n <sd-input size=\"sm\" ngIf=\"!column.editor?.click\" [(model)]=\"item[column.field]\"\r\n (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input>\r\n </ng-template>\r\n </div>\r\n <div ngIf=\"column.type === 'color'\">\r\n <sd-input size=\"sm\" type=\"color\" [(model)]=\"item[column.field]\"\r\n (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n </sd-input>\r\n </div>\r\n <div ngIf=\"column.type === 'number'\">\r\n <sd-input-currency size=\"sm\" [(model)]=\"item[column.field]\"\r\n (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input-currency>\r\n </div>\r\n <div ngIf=\"column.type === 'date'\">\r\n <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"date\"></sd-date-time>\r\n </div>\r\n <div class=\"text-center\" ngIf=\"column.type === 'datetime'\">\r\n <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"datetime\"></sd-date-time>\r\n </div>\r\n <div class=\"text-center\" ngIf=\"column.type === 'time'\">\r\n <sd-time [(model)]=\"item[column.field]\"></sd-time>\r\n <!-- <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"time\"></sd-grid-date-picker-control> -->\r\n </div>\r\n <div class=\"align-middle text-center\" ngIf=\"column.type === 'bool'\">\r\n <sd-switch [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n </sd-switch>\r\n </div>\r\n <div ngIf=\"column.type === 'values'\">\r\n <div ngIf=\"column.editor?.item;else elseUseValues\">\r\n <sd-select ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n [items]=\"item[column.editor?.item?.dependOnField] \| sdDynamicItems:dynamicItems\"\r\n [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n [items]=\"item[column.editor?.item?.dependOnField] \| sdDynamicItems:dynamicItems\"\r\n [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n </sd-autocomplete>\r\n </div>\r\n <ng-template #elseUseValues>\r\n <sd-select ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n </sd-autocomplete>\r\n </ng-template>\r\n </div>\r\n <div ngIf=\"column.type === 'radio'\">\r\n <section class=\"mt-5 ml-5\">\r\n <mat-radio-group class=\"d-flex\" [(ngModel)]=\"item[column.field]\"\r\n (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n <mat-radio-button ngIf=\"!column.editor?.required\" color=\"warn\" class=\"mr-5\" value=\"\">\r\n {{'Please select' \| sdTranslate}}\r\n </mat-radio-button>\r\n <mat-radio-button color=\"primary\" class=\"mr-5\" ngFor=\"let data of column.values\"\r\n [value]=\"data[column.valueField]\">\r\n {{data[column.displayField]}}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n </div>\r\n <div class=\"align-middle text-center\" ngIf=\"column.type === 'image'\">\r\n <img [src]=\"item[column.field]\" [width]=\"column.display?.width\" [height]=\"column.display?.height\"\r\n style=\"margin: 5px 0\" (click)=\"column.click && column.click(item[column.field], item)\">\r\n </div>\r\n</ng-container>","styles":[".c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}"]}]}],"members":{"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":14,"character":17}]}]}},"SdGridDesktopColumnView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-desktop-column-view","template":"<ng-container ngIf=\"column && item\">\r\n <ng-container ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n <div (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'cursor-pointer':column.click}\"\r\n [innerHTML]=\"(item[column.field] \| columnHtmlTemplate:item:column.htmlTemplate) \| safeHtml\">\r\n </div>\r\n </ng-container>\r\n <ng-template #useDefaultView>\r\n <div ngIf=\"column.type === 'string'\">\r\n <span [className]=\"item[column.field] \| cellDesktopClassName:item:column\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[column.field]}\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| valueTransform:item:column}}</a>\r\n <ng-container ngIf=\"!column.click\">{{item[column.field] \| valueTransform:item:column}}</ng-container>\r\n </span>\r\n <ng-container ngIf=\"column.commands \| columnCommandFilter:item \| async; $implicit as filteredColumnCommands\">\r\n <button ngFor=\"let columnCommand of filteredColumnCommands\" (click)=\"columnCommand.click(item)\" type=\"button\"\r\n class=\"c-btn-icon\" [matTooltip]=\"columnCommand.title \| commandTitle:item\">\r\n <i class=\"{{columnCommand.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n </ng-container>\r\n </div>\r\n <div ngIf=\"column.type === 'color'\">\r\n <input disabled=\"true\" type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"\r\n (change)=\"column.editor?.change && column.editor.change(item)\">\r\n </div>\r\n <div ngIf=\"column.type === 'number'\">\r\n <span [className]=\"item[column.field] \| cellDesktopClassName:item:column\"\r\n [ngClass]=\"{'blinker': item.blinker && item.blinker[column.field]}\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| valueTransform:item:column}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| valueTransform:item:column}}</ng-container>\r\n </span>\r\n </div>\r\n <div ngIf=\"column.type === 'date'\" class=\"text-center\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] \| date:'dd/MM/yyyy'\">\r\n {{item[column.field] \| sdTimeDifferent:'dd/MM/yyyy':column.timeDifferent \| async}}\r\n </div>\r\n <div ngIf=\"column.type === 'datetime'\" class=\"text-center\" matTooltipPosition=\"above\"\r\n [matTooltip]=\"item[column.field] \| date:'dd/MM/yyyy HH:mm'\">\r\n {{item[column.field] \| sdTimeDifferent:'dd/MM/yyyy HH:mm':column.timeDifferent \| async}}\r\n </div>\r\n <div ngIf=\"column.type === 'time'\" class=\"text-center\">\r\n {{item[column.field] \| date:'HH:mm'}}\r\n </div>\r\n <div class=\"align-middle text-center\" ngIf=\"column.type === 'bool'\">\r\n <span ngIf=\"!item.editorHandler[column.field].visible && item[column.field]\"\r\n class=\"status status-success\">{{column.trueValue \|\| 'True'}}</span>\r\n <span ngIf=\"!item.editorHandler[column.field].visible && !item[column.field]\"\r\n class=\"status status-danger\">{{column.falseValue \|\| 'False'}}</span>\r\n </div>\r\n <div ngIf=\"column.type === 'values'\">\r\n <ng-container ngIf=\"item[column.field] \| columnValues:column.values; $implicit as valueData\">\r\n <div ngIf=\"valueData.color \|\| valueData.backgroundColor; else elseNoStatus\" class=\"status\"\r\n [ngStyle]=\"{'color':valueData.color, 'background-color': valueData.backgroundColor}\">\r\n {{valueData.text}}\r\n </div>\r\n <ng-template #elseNoStatus>\r\n <div class=\"text-left\">\r\n {{valueData.text}}\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n <div ngIf=\"column.type === 'radio'\">\r\n {{item[column.field]}}\r\n </div>\r\n <div class=\"align-middle text-center\" ngIf=\"column.type === 'image'\">\r\n <img ngIf=\"item[column.field]\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n [height]=\"column.display?.height\" style=\"margin: 5px 0;object-fit: contain;\"\r\n (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'c-clickable':column.click}\">\r\n <i ngIf=\"!item[column.field]\" class=\"fa fa-picture-o fa-fw c-img\" [ngClass]=\"{'c-clickable':column.click}\"\r\n (click)=\"column.click && column.click(item[column.field], item)\"></i>\r\n </div>\r\n </ng-template>\r\n</ng-container>","styles":[".text-black400{color:#757575}.c-badge{border-radius:10rem;display:block!important;font-size:12px;font-weight:500;margin:0 auto;max-width:80%;padding:.3rem!important}.c-badge a{color:#fff}.status{border-radius:1.5rem;display:inline-block;font-weight:500;padding:4px 8px;text-align:center;text-transform:uppercase;width:100%}.status-success{color:#4caf50}.status-danger{color:#f82c13}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:20px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}.c-clickable{cursor:pointer}.c-img{font-size:30px;opacity:.5}.c-img.c-clickable:hover{opacity:.9}"]}]}],"members":{"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdGridDesktopInlineFilter":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-desktop-inline-filter","template":"<ng-container ngIf=\"filterOption?.multiple !== false\">\r\n <ng-container ngIf=\"columns?.length && filterOption?.columnInline === 'outside'\">\r\n <ng-container ngFor=\"let item of columns\">\r\n <ng-container\r\n ngIf=\"item.type !== 'children' && item.type !== 'image' && !item?.filter?.disabled && item.priority !== 'low'\">\r\n <ng-container ngIf=\"inlineColumn[item.field] \|\| inlineColumn[item.field] === undefined\">\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'string'\" type=\"text\"\r\n [(model)]=\"filter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'number'\" type=\"number\"\r\n [(model)]=\"filter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select ngIf=\"item.type === 'values' && !item?.editor?.autocomplete\" [label]=\"item.title\"\r\n [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.type === 'values' && item?.editor?.autocomplete\"\r\n [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-autocomplete>\r\n <sd-date-time ngIf=\"item.type === 'date' \|\| item.type === 'datetime' \|\| item.type === 'time'\"\r\n [label]=\"item.title\" [(model)]=\"filter[item.field]\" type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container\r\n ngIf=\"item.type === 'children' && item.children?.length && !item?.filter?.disabled && item.priority !== 'low'\">\r\n <ng-container ngFor=\"let childColumn of item.children\">\r\n <ng-container\r\n ngIf=\"inlineColumn[childColumn.field] && !childColumn?.filter?.disabled && childColumn.priority !== 'low' && childColumn.type !== 'image'\">\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-input [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'number'\" type=\"number\"\r\n [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-select [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:childColumn.trueValue \|\| 'True' },\r\n {value:'0',display:childColumn.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'radio'\"\r\n [items]=\"childColumn.values\" [valueField]=\"childColumn.valueField\"\r\n [displayField]=\"childColumn.displayField\" [(model)]=\"filter[childColumn.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select ngIf=\"childColumn.type === 'values' && !item?.editor?.autocomplete\"\r\n [label]=\"childColumn.title\" [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"childColumn.type === 'values' && item?.editor?.autocomplete\"\r\n [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-autocomplete>\r\n <sd-date-time\r\n ngIf=\"childColumn.type === 'date' \|\| childColumn.type === 'datetime' \|\| childColumn.type === 'time'\"\r\n [label]=\"childColumn.title\" [(model)]=\"filter[childColumn.field]\" type=\"date\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container ngIf=\"filterOption?.externalFilters?.length\">\r\n <ng-container ngFor=\"let item of filterOption.externalFilters\">\r\n <ng-container\r\n ngIf=\"(inlineExternal[item.field] \|\| inlineExternal[item.field] === undefined) && item.priority !== 'low'\">\r\n <div ngIf=\"item.type !=='daterange' && item.type !=='numberrange';else elseFilterRange\"\r\n class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'string'\" type=\"text\"\r\n [(model)]=\"externalFilter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'number'\" type=\"number\"\r\n [(model)]=\"externalFilter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'custom'\"\r\n [(model)]=\"externalFilter[displayKey + item.field]\"\r\n (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-input>\r\n <ng-container ngIf=\"item.type === 'values'\">\r\n <sd-select ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\" multiple=\"true\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-autocomplete>\r\n <sd-select ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\" filtered=\"true\" multiple=\"true\">\r\n </sd-select>\r\n <sd-select ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-select>\r\n </ng-container>\r\n <sd-date-time [label]=\"item.title\" ngIf=\"item.type ==='date'\"\r\n [(model)]=\"externalFilter[item.field]\" type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n <sd-date-range [label]=\"item.title\" ngIf=\"item.type ==='daterangefull'\"\r\n [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-range>\r\n </div>\r\n <ng-template #elseFilterRange>\r\n <ng-container ngIf=\"item.type ==='daterange' && externalFilter[item.field]\">\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n [maxDate]=\"externalFilter[item.field].to \|\| item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n </div>\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n [minDate]=\"item.minDate \|\| externalFilter[item.field].from\" [maxDate]=\"item.maxDate\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-date-time>\r\n </div>\r\n </ng-container>\r\n <ng-container ngIf=\"item.type ==='numberrange' && externalFilter[item.field]\">\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-input>\r\n </div>\r\n <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\"\r\n (sdChange)=\"onUpdateFilter()\">\r\n </sd-input>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>","styles":[""]}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"externalFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"filterOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"inlineExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"inlineColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"sdChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdGridMobileItemView":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-mobile-item-view","template":"<ng-container ngIf=\"gridOption && item\">\r\n <ng-container ngIf=\"gridOption?.mobileOrTablet?.htmlTemplate\">\r\n <div\r\n [innerHTML]=\"(item \| mobileViewHtmlTempate:gridOption.columns:gridOption?.mobileOrTablet?.htmlTemplate) \| safeHtml\"\r\n (click)=\"onCheck(item)\">\r\n </div>\r\n </ng-container>\r\n <ng-container ngIf=\"!gridOption?.mobileOrTablet?.htmlTemplate\">\r\n <ng-container ngFor=\"let column of gridOption.columns \| filterMobile:item\">\r\n <div ngIf=\"column.type !== 'children'\" class=\"row c-row\" (click)=\"onCheck(item)\">\r\n <div class=\"col-5\">\r\n <span class=\"c-title\">\r\n {{item \| columnTitle:column.title:column.dynamicTitle \| async}}:\r\n </span>\r\n </div>\r\n <div class=\"col-7\">\r\n <ng-container ngIf=\"column.type === 'string'\">\r\n <span ngIf=\"!column.htmlTemplate; else elseUseTemplate\"\r\n [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field]}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field]}}</ng-container>\r\n </span>\r\n <ng-template #elseUseTemplate>\r\n <span class=\"c-value\"\r\n [innerHTML]=\"(item[column.field] \| columnHtmlTemplate:item:column.htmlTemplate) \| safeHtml\"></span>\r\n </ng-template>\r\n <ng-container\r\n ngIf=\"column.commands \| columnCommandFilter:item \| async; $implicit as filteredColumnCommands\">\r\n <button ngFor=\"let columnCommand of filteredColumnCommands\" (click)=\"columnCommand.click(item)\"\r\n type=\"button\" class=\"c-btn-icon\" [matTooltip]=\"columnCommand.title \| commandTitle:item\">\r\n <i class=\"{{columnCommand.icon \| commandIcon:item}}\" aria-hidden=\"true\" style=\"font-size: 14px;\"></i>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <span ngIf=\"column.type === 'number'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| valueTransform:item:column}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| valueTransform:item:column}}</ng-container>\r\n </span>\r\n <span ngIf=\"column.type === 'datetime'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| date:'dd/MM/yyyy HH:mm'}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| date:'dd/MM/yyyy HH:mm'}}</ng-container>\r\n </span>\r\n <span ngIf=\"column.type === 'date'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| date:'dd/MM/yyyy'}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| date:'dd/MM/yyyy'}}</ng-container>\r\n </span>\r\n <span ngIf=\"column.type === 'time'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\">\r\n <a ngIf=\"column.click\" href=\"javascript:;\"\r\n (click)=\"column.click(item[column.field], item)\">{{item[column.field] \| date:'HH:mm'}}</a>\r\n <ng-container ngIf=\"!column.click\">\r\n {{item[column.field] \| date:'HH:mm'}}</ng-container>\r\n </span>\r\n <span ngIf=\"column.type === 'bool'\" [className]=\"item[column.field] \| cellMobileClassName:item:column\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">\r\n <strong ngIf=\"item[column.field]\"\r\n class=\"text-success\">{{column.trueValue \|\| 'True'}}</strong>\r\n <strong ngIf=\"!item[column.field]\"\r\n class=\"text-danger\">{{column.falseValue \|\| 'False'}}</strong>\r\n </span>\r\n <span ngIf=\"column.type === 'color'\" class=\"c-value\"><input disabled=\"true\" type=\"color\"\r\n class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"></span>\r\n <ng-container ngIf=\"column.type === 'values'\">\r\n <ng-container ngIf=\"column?.dictionary[item[column.field]] as dic; else elseNotInDic\">\r\n <span ngIf=\"dic.color \|\| dic.backgroundColor; else elseNoStatus\" class=\"status c-status\"\r\n [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n {{dic.text}}\r\n </span>\r\n <ng-template #elseNoStatus>\r\n <span class=\"c-value\">\r\n {{dic.text}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #elseNotInDic>\r\n <span class=\"c-value\">\r\n {{item[column.field]}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <span ngIf=\"column.type === 'radio'\" class=\"c-value\">{{item[column.field]}}</span>\r\n <img ngIf=\"column.type === 'image'\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n [height]=\"column.display?.height\" style=\"margin: 5px 0\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">\r\n </div>\r\n </div>\r\n <ng-container ngIf=\"column.type === 'children' && column.children?.length\">\r\n <div class=\"row c-row\" ngFor=\"let childColumn of column.children \| filterMobile:item\" (click)=\"onCheck(item)\">\r\n <div class=\"col-5\">\r\n <span class=\"c-title\">\r\n {{childColumn.title}}:\r\n </span>\r\n </div>\r\n <div class=\"col-7\">\r\n <ng-container ngIf=\"childColumn.type === 'string'\">\r\n <span ngIf=\"!childColumn.htmlTemplate; else elseUseTemplate\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\"><a\r\n ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field]}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field]}}</ng-container>\r\n </span>\r\n <ng-template #elseUseTemplate>\r\n <span class=\"c-value\"\r\n [innerHTML]=\"(item[childColumn.field] \| columnHtmlTemplate:item:childColumn.htmlTemplate) \| safeHtml\"></span>\r\n </ng-template>\r\n </ng-container>\r\n <span ngIf=\"childColumn.type === 'number'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| valueTransform:item:childColumn}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| valueTransform:item:childColumn}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'datetime'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'date'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| date:'dd/MM/yyyy'}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| date:'dd/MM/yyyy'}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'time'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\">\r\n <a ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] \| date:'HH:mm'}}</a>\r\n <ng-container ngIf=\"!childColumn.click\">\r\n {{item[childColumn.field] \| date:'HH:mm'}}</ng-container>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'bool'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n <strong ngIf=\"item[childColumn.field]\"\r\n class=\"text-success\">{{childColumn.trueValue \|\| 'True'}}</strong>\r\n <strong ngIf=\"!item[childColumn.field]\"\r\n class=\"text-danger\">{{childColumn.falseValue \|\| 'False'}}</strong>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'color'\"\r\n [className]=\"item[childColumn.field] \| cellMobileClassName:item:childColumn\"\r\n (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"><input disabled=\"true\"\r\n type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n <ng-container ngIf=\"childColumn.type === 'values'\">\r\n <ng-container ngIf=\"childColumn?.dictionary[item[childColumn.field]] as dic; else elseNotInDic\">\r\n <span ngIf=\"dic.color \|\| dic.backgroundColor; else elseNoStatus\" class=\"status c-status\"\r\n [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n {{dic.text}}\r\n </span>\r\n <ng-template #elseNoStatus>\r\n <span class=\"c-value\">\r\n {{dic.text}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #elseNotInDic>\r\n <span class=\"c-value\">\r\n {{item[childColumn.field]}}\r\n </span>\r\n </ng-template>\r\n </ng-container>\r\n <span ngIf=\"childColumn.type === 'radio'\" class=\"c-value\">{{item[childColumn.field]}}</span>\r\n <img ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n (click)=\"column.click && column.click(item[column.field], item)\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>","styles":[".c-status{display:inline-block;font-weight:500;text-align:left;text-transform:uppercase}.c-row{margin:0 -8px 3px}.c-title{font-weight:700;margin-right:3px}.c-title,.c-value{color:#212529;font-size:14px}.c-value{overflow-wrap:break-word}.c-badge{font-size:14px;font-weight:500;padding:5px!important}"]}]}],"members":{"gridOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"check":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdGridPopupEditor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-popup-editor","template":"<sd-modal [title]=\"(isModified ? 'Edit' : 'Create')\" width=\"sm\" #modal>\r\n <sd-modal-body ngIf=\"item && columns?.length\">\r\n <form #formEditor=\"ngForm\">\r\n <ng-container ngFor=\"let column of columns\">\r\n <div ngIf=\"column \| editorPopupVisible:item\" class=\"row\">\r\n <div class=\"col-12\">\r\n <sd-input ngIf=\"column.type === 'string'\" [(model)]=\"item[column.field]\"></sd-input>\r\n <sd-input ngIf=\"column.type === 'number'\" [(model)]=\"item[column.field]\" type=\"number\">\r\n </sd-input>\r\n <sd-select ngIf=\"column.type === 'values'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n </sd-select>\r\n <sd-switch ngIf=\"column.type === 'boolean'\" [(model)]=\"item[column.field]\">\r\n </sd-switch>\r\n <sd-select ngIf=\"column.type === 'radio'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n </sd-select>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </form>\r\n </sd-modal-body>\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' \| sdTranslate\" size=\"sm\"></sd-button>\r\n <sd-button (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' \| sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' \| sdTranslate\"\r\n width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' \| sdTranslate\"\r\n color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>"}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":10,"character":3},"arguments":["modal"]}]}],"save":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"SdGridPopupExportExcel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"sd-grid-popup-export-excel","template":"<sd-modal width=\"sm\" [title]=\"'Export excel' \| sdTranslate\" #modal>\r\n <sd-modal-body>\r\n <mat-radio-group class=\"c-radio-group\" [ngModel]=\"selectedExcelConfig.name\" (change)=\"onChangeRadio($event)\">\r\n <mat-radio-button class=\"c-radio-button\" ngFor=\"let excelConfig of excelConfigs\" [value]=\"excelConfig.name\"\r\n color=\"primary\">\r\n {{excelConfig.name}}\r\n </mat-radio-button>\r\n <mat-radio-button class=\"c-radio-button\" [value]=\"newExcelConfig\" color=\"accent\">\r\n {{'New template' \| sdTranslate}}\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n <div ngIf=\"selectedExcelConfig.name === newExcelConfig\">\r\n <mat-chip-list selectable=\"true\" multiple=\"true\">\r\n <ng-container ngFor=\"let column of exportableColumns\">\r\n <mat-chip [selected]=\"selected[column.field]\" (click)=\"selected[column.field] = !selected[column.field]\">\r\n {{column.title}}\r\n </mat-chip>\r\n </ng-container>\r\n </mat-chip-list>\r\n </div>\r\n </sd-modal-body>\r\n <sd-modal-footer>\r\n <ng-container sdDesktop>\r\n <div class=\"float-right\" ngIf=\"selectedExcelConfig && selectedExcelConfig.name !== newExcelConfig\">\r\n <sd-button ngIf=\"selectedExcelConfig.removable\" class=\"mr-5\" [title]=\"'Delete' \| sdTranslate\" icon=\"delete\"\r\n (action)=\"removeTemplate(selectedExcelConfig)\" size=\"sm\">\r\n </sd-button>\r\n <sd-button [title]=\"'Export' \| sdTranslate\" icon=\"get_app\" (action)=\"onExportByTemplate(selectedExcelConfig)\"\r\n size=\"sm\" color=\"primary\">\r\n </sd-button>\r\n </div>\r\n <div class=\"float-right\" ngIf=\"selectedExcelConfig?.name === newExcelConfig\">\r\n <sd-button class=\"mr-5\" [title]=\"'Add template' \| sdTranslate\" icon=\"add\" (action)=\"uploadTemplate()\" size=\"sm\">\r\n </sd-button>\r\n <sd-button [title]=\"'Download' \| sdTranslate\" icon=\"get_app\" (action)=\"newTemplate()\" size=\"sm\" color=\"primary\">\r\n </sd-button>\r\n </div>\r\n </ng-container>\r\n <ng-container sdMobileTablet>\r\n <ng-container ngIf=\"selectedExcelConfig && selectedExcelConfig.name !== newExcelConfig\">\r\n <sd-button ngIf=\"selectedExcelConfig.removable\" style=\"flex: 1; padding-right: 5px;\"\r\n [title]=\"'Delete' \| sdTranslate\" icon=\"delete\" (action)=\"removeTemplate(selectedExcelConfig)\" size=\"sm\"\r\n width=\"100%\">\r\n </sd-button>\r\n <sd-button style=\"flex: 1;\" [ngClass]=\"{'pl-5':selectedExcelConfig.removable}\" [title]=\"'Export' \| sdTranslate\"\r\n icon=\"get_app\" (action)=\"onExportByTemplate(selectedExcelConfig)\" size=\"sm\" color=\"primary\" width=\"100%\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-container ngIf=\"selectedExcelConfig?.name === newExcelConfig\">\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" [title]=\"'Add template' \| sdTranslate\" icon=\"add\"\r\n (action)=\"uploadTemplate()\" size=\"sm\" width=\"100%\">\r\n </sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" [title]=\"'Download' \| sdTranslate\" icon=\"get_app\"\r\n (action)=\"newTemplate()\" size=\"sm\" color=\"primary\" width=\"100%\">\r\n </sd-button>\r\n </ng-container>\r\n </ng-container>\r\n </sd-modal-footer>\r\n</sd-modal>","styles":[".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}"]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["modal"]}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"extendColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"fileName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"validator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"exportOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"exportByTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":57,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/loading","name":"SdLoadingService","line":58,"character":28},{"__symbolic":"reference","module":"@sd-angular/core/excel","name":"SdExcelService","line":59,"character":26},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":60,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":61,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"loadConfiguration":[{"__symbolic":"method"}]}},"ExcelConfiguration":{"__symbolic":"interface"},"SdGridPopupFilter":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"sd-grid-popup-filter","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":25,"character":17},"member":"None"},"template":"<sd-modal width=\"sm\" [title]=\"'Filter' \| sdTranslate\" #modal>\r\n <sd-modal-body>\r\n <div\r\n ngIf=\"key && filterOption?.multiple !== false && (!filterOption?.quickFilterVisibility \|\| filterOption?.quickFilterVisibility === 'popup')\">\r\n <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n <mat-label>{{'Quick filters' \| sdTranslate}}</mat-label>\r\n <mat-select [(ngModel)]=\"selectedCode\" (selectionChange)=\"onSelectionChange($event)\" #matSelect>\r\n <mat-option value=\"\">{{'Please select' \| sdTranslate}}</mat-option>\r\n <mat-option ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n <div style=\"display:flex; justify-content: space-between\">\r\n <span>{{quickFilter.code}}</span>\r\n <div>\r\n <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n fontIcon=\"fa-pencil\"></mat-icon>\r\n <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n fontIcon=\"fa-trash-o\"></mat-icon>\r\n </div>\r\n </div>\r\n </mat-option>\r\n <mat-option [value]=\"newQuickFilter\">\r\n <div (click)=\"onCreateQuickFilter($event)\">\r\n <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n <span>{{'Create quick filter' \| sdTranslate}}</span>\r\n </div>\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <ng-container ngIf=\"filterOption?.multiple === false\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>{{'Select field' \| sdTranslate}}</mat-label>\r\n <mat-select [(ngModel)]=\"selectedField\">\r\n <mat-option value=\"\">{{'Please select' \| sdTranslate}}</mat-option>\r\n <mat-option ngFor=\"let item of externalFilters\" [value]=\"'external' + item.field\">\r\n {{item.title}}\r\n </mat-option>\r\n <ng-container ngFor=\"let item of columns\">\r\n <mat-option ngIf=\"item.type !== 'children'\" [value]=\"'column' + item.field\">\r\n {{item.title}}\r\n </mat-option>\r\n <ng-container ngIf=\"item.type === 'children' && item.children?.length\">\r\n <ng-container ngFor=\"let childColumn of item.children\">\r\n <mat-option [value]=\"'column' + childColumn.field\">\r\n {{childColumn.title}}\r\n </mat-option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n <ng-container ngFor=\"let item of externalFilters\">\r\n <div ngIf=\"filterOption?.multiple !== false \|\| selectedField === 'external' + item.field\"\r\n class=\"d-flex align-items-baseline\">\r\n <ng-container ngIf=\"filterOption?.multiple !== false\">\r\n <div sdDesktop class=\"c-checkable\">\r\n <sd-switch [(model)]=\"inlineExternal[item.field]\" (sdChange)=\"onInlineChange()\">\r\n </sd-switch>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'string'\" type=\"text\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'number'\" type=\"number\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-select>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n </sd-select>\r\n <ng-container ngIf=\"item.type === 'values'\">\r\n <sd-select ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n multiple=\"true\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-autocomplete>\r\n <sd-select ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n [(model)]=\"externalFilter[item.field]\" filtered=\"true\" multiple=\"true\">\r\n </sd-select>\r\n <sd-select ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n </sd-select>\r\n </ng-container>\r\n <sd-input ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n [(model)]=\"externalFilter[displayKey + item.field]\"\r\n (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\">\r\n </sd-input>\r\n <sd-date-time [label]=\"item.title\" ngIf=\"item.type ==='date'\"\r\n [(model)]=\"externalFilter[item.field]\" type=\"date\">\r\n </sd-date-time>\r\n <sd-date-range [label]=\"item.title\" ngIf=\"item.type ==='daterangefull'\"\r\n [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\"\r\n [min]=\"item.minDate\" [max]=\"item.maxDate\">\r\n </sd-date-range>\r\n <ng-container ngIf=\"item.type ==='daterange'\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n [maxDate]=\"externalFilter[item.field].to \|\| item.maxDate\">\r\n </sd-date-time>\r\n </div>\r\n <div class=\"col-6\">\r\n <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n [minDate]=\"item.minDate \|\| externalFilter[item.field].from\" [maxDate]=\"item.maxDate\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"row\" ngIf=\"item.type ==='numberrange'\">\r\n <div class=\"col-6\">\r\n <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\">\r\n </sd-input>\r\n </div>\r\n <div class=\"col-6\">\r\n <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\">\r\n </sd-input>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container ngFor=\"let column of columns\">\r\n <div class=\"d-flex align-items-baseline\"\r\n ngIf=\"column.type !== 'children' && (filterOption?.multiple !== false \|\| selectedField === 'column' + column.field)\">\r\n <ng-container ngIf=\"filterOption?.multiple !== false\">\r\n <div sdDesktop class=\"c-checkable\">\r\n <sd-switch [(model)]=\"inlineColumn[column.field]\" (sdChange)=\"onInlineChange()\">\r\n </sd-switch>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n [(model)]=\"filter[column.field]\">\r\n </sd-input>\r\n <sd-input ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n [(model)]=\"filter[column.field]\">\r\n </sd-input>\r\n <sd-select ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue \|\| 'True' },\r\n {value:'0',display:column.falseValue \|\| 'False' }]\" [(model)]=\"filter[column.field]\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'radio'\" [label]=\"column.title\" [items]=\"column.values\"\r\n [valueField]=\"column.valueField\" [displayField]=\"column.displayField\" [(model)]=\"filter[column.field]\">\r\n </sd-select>\r\n <sd-select ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n </sd-autocomplete>\r\n <sd-date-time ngIf=\"column.type ==='date' \|\| column.type==='datetime' \|\|\r\n column.type==='time'\" [label]=\"column.title\" [(model)]=\" filter[column.field]\" type=\"date\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n <ng-container ngIf=\"column.type === 'children' && column.children?.length\">\r\n <ng-container ngFor=\"let childColumn of column.children\">\r\n <div class=\"d-flex align-items-baseline\"\r\n ngIf=\"filterOption?.multiple !== false \|\| selectedField === 'column' + childColumn.field\">\r\n <ng-container ngIf=\"filterOption?.multiple !== false\">\r\n <div sdDesktop class=\"c-checkable\">\r\n <sd-switch [(model)]=\"inlineColumn[childColumn.field]\" (sdChange)=\"onInlineChange()\">\r\n </sd-switch>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n [(model)]=\"filter[childColumn.field]\">\r\n </sd-input>\r\n <sd-input [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'number'\" type=\" number\"\r\n [(model)]=\"filter[childColumn.field]\">\r\n </sd-input>\r\n <sd-select [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:column.trueValue \|\| 'True' },\r\n {value:'0',display:childColumn.falseValue \|\| 'False' }]\" [(model)]=\"filter[childColumn.field]\">\r\n </sd-select>\r\n <sd-select [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'radio'\"\r\n [items]=\"childColumn.values\" [valueField]=\"childColumn.valueField\"\r\n [displayField]=\"childColumn.displayField\" [(model)]=\"filter[childColumn.field]\">\r\n </sd-select>\r\n <sd-autocomplete [label]=\"childColumn.title\" ngIf=\"childColumn.type === 'values'\"\r\n [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n [(model)]=\"filter[childColumn.field]\">\r\n </sd-autocomplete>\r\n <sd-date-time [label]=\"childColumn.title\" ngIf=\"childColumn.type ==='date' \|\| childColumn.type==='datetime' \|\|\r\n childColumn.type==='time'\" [(model)]=\" filter[childColumn.field]\" type=\"date\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </sd-modal-body>\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"onClear()\" icon=\"clear\" [title]=\"'Clear filter' \| sdTranslate\" size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' \| sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onClear()\" icon=\"clear\"\r\n [title]=\"'Clear filter' \| sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' \| sdTranslate\"\r\n color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>\r\n<sd-grid-popup-quick-filter-detail #popupQuickFilterDetail (accept)=\"onAcceptQuickFilter($event)\">\r\n</sd-grid-popup-quick-filter-detail>","styles":[".c-fa-icon{color:grey;font-size:20px}.c-checkable{width:50px}.c-filterable{flex:1}"]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":3},"arguments":["modal"]}]}],"popupQuickFilterDetail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["popupQuickFilterDetail"]}]}],"matSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":3},"arguments":["matSelect"]}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"filterOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":3}}]}],"loadInlineFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":3}}]}],"inlineExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"inlineColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":55,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":56,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/setting","name":"SdSettingService","line":57,"character":28},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":58,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":59,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onAccept":[{"__symbolic":"method"}],"onClear":[{"__symbolic":"method"}],"updateConfiguration":[{"__symbolic":"method"}]}},"QuickFilter":{"__symbolic":"class","members":{}},"FilterConfiguration":{"__symbolic":"interface"},"SdGridPopupQuickFilterDetail":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"sd-grid-popup-quick-filter-detail","template":"<sd-modal width=\"sm\" [title]=\"(page === 1 ? 'Select filtered fields':'Input filtered fields') \| sdTranslate\" #modal>\r\n <sd-modal-body>\r\n <div class=\"row\">\r\n <ng-container ngIf=\"page === 1\">\r\n <div ngFor=\"let field of selectableFields\" class=\"col-12\">\r\n <sd-switch [(model)]=\"selectedField[field.id]\" [label]=\"field.title\" (sdChange)=\"onSelectFields()\">\r\n </sd-switch>\r\n </div>\r\n </ng-container>\r\n <ng-container ngIf=\"page === 2\">\r\n <div class=\"col-12\" ngFor=\"let item of fields\">\r\n <ng-container ngIf=\"item.group === 'external'\">\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'string'\" type=\"text\"\r\n [(model)]=\"externalFilter[item.code]\">\r\n </sd-input>\r\n <sd-input [label]=\"item.title\" ngIf=\"item.type === 'number'\" type=\"number\"\r\n [(model)]=\"externalFilter[item.code]\">\r\n </sd-input>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n [(model)]=\"externalFilter[item.code]\">\r\n </sd-select>\r\n <sd-select [label]=\"item.title\" ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n </sd-select>\r\n <ng-container ngIf=\"item.type === 'values'\">\r\n <sd-select ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n multiple=\"true\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n </sd-autocomplete>\r\n <sd-select ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n filtered=\"true\" multiple=\"true\">\r\n </sd-select>\r\n <sd-select ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n </sd-select>\r\n </ng-container>\r\n <sd-input ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n [(model)]=\"externalFilter[displayKey + item.code]\"\r\n (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.code, displayKey + item.code)\">\r\n </sd-input>\r\n <sd-date-time [label]=\"item.title\" ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.code]\"\r\n type=\"date\">\r\n </sd-date-time>\r\n <sd-date-range [label]=\"item.title\" ngIf=\"item.type ==='daterangefull'\"\r\n [(from)]=\"externalFilter[item.code].from\" [(to)]=\"externalFilter[item.code].to\" [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\">\r\n </sd-date-range>\r\n <ng-container ngIf=\"item.type ==='daterange'\">\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.code].from\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n [maxDate]=\"externalFilter[item.code].to \|\| item.maxDate\">\r\n </sd-date-time>\r\n </div>\r\n <div class=\"col-6\">\r\n <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.code].to\"\r\n [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n [minDate]=\"item.minDate \|\| externalFilter[item.code].from\" [maxDate]=\"item.maxDate\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"row\" ngIf=\"item.type ==='numberrange'\">\r\n <div class=\"col-6\">\r\n <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].from\">\r\n </sd-input>\r\n </div>\r\n <div class=\"col-6\">\r\n <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].to\">\r\n </sd-input>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container ngIf=\"item.group === 'column'\">\r\n <sd-input ngIf=\"item.type === 'string'\" [label]=\"item.title\" type=\"text\" [(model)]=\"filter[item.code]\">\r\n </sd-input>\r\n <sd-input ngIf=\"item.type === 'number'\" [label]=\"item.title\" type=\" number\" [(model)]=\"filter[item.code]\">\r\n </sd-input>\r\n <sd-select ngIf=\"item.type === 'bool'\" [label]=\"item.title\" [items]=\"[{value:'1',display:item.trueValue \|\| 'True' },\r\n {value:'0',display:item.falseValue \|\| 'False' }]\" [(model)]=\"filter[item.code]\">\r\n </sd-select>\r\n <sd-select ngIf=\"item.type === 'radio'\" [label]=\"item.title\" [items]=\"item.values\"\r\n [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.code]\">\r\n </sd-select>\r\n <sd-autocomplete ngIf=\"item.type === 'values' && item.editor?.autocomplete\" [label]=\"item.title\"\r\n [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n </sd-autocomplete>\r\n <sd-select ngIf=\"item.type === 'values' && !item.editor?.autocomplete\" [label]=\"item.title\"\r\n [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n </sd-select>\r\n <sd-date-time ngIf=\"item.type ==='date' \|\| item.type==='datetime' \|\|\r\n item.type==='time'\" [label]=\"item.title\" [(model)]=\" filter[item.code]\" type=\"date\">\r\n </sd-date-time>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </sd-modal-body>\r\n <ng-container ngIf=\"page === 1\">\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"clear\" [title]=\"'Cancel' \| sdTranslate\" size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"page = 2\" icon=\"arrow_forward\" [title]=\"'Next' \| sdTranslate\" color=\"primary\"\r\n iconSuffix=\"true\" [disabled]=\"!fields.length\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"clear\"\r\n [title]=\"'Cancel' \| sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"page = 2\" icon=\"arrow_forward\"\r\n [title]=\"'Next' \| sdTranslate\" color=\"primary\" width=\"100%\" iconSuffix=\"true\" [disabled]=\"!fields.length\"\r\n size=\"sm\">\r\n </sd-button>\r\n </sd-modal-footer>\r\n </ng-container>\r\n <ng-container ngIf=\"page === 2\">\r\n <sd-modal-footer sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"page = 1\" icon=\"arrow_back\" [title]=\"'Back' \| sdTranslate\" size=\"sm\">\r\n </sd-button>\r\n <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' \| sdTranslate\" color=\"primary\" size=\"sm\">\r\n </sd-button>\r\n </sd-modal-footer>\r\n <sd-modal-footer sdMobileTablet>\r\n <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"page = 1\" icon=\"arrow_back\"\r\n [title]=\"'Back' \| sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' \| sdTranslate\"\r\n color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n </sd-modal-footer>\r\n </ng-container>\r\n</sd-modal>","styles":[""]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":21,"character":3},"arguments":["modal"]}]}],"quickFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":36,"character":19},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":37,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/translate","name":"SdTranslateService","line":38,"character":30}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}]}},"SdGridSubInformation":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-grid-sub-information","template":"<div class=\"clearfix\"></div>\r\n<ng-container ngIf=\"option?.columns\">\r\n <div ngIf=\"!isMobileOrTablet\" class=\"sd-box box-shadow-none\">\r\n <div class=\"sd-box-body p-0\">\r\n <div class=\"row mx-0\">\r\n <div class=\"table-responsive\" style=\"position: relative;\" [ngStyle]=\"{'height': height}\">\r\n <table class=\"table table-hover table-striped table-bordered c-table\">\r\n <thead class=\"thead-light\">\r\n <tr>\r\n <th class=\"position-sticky c-sticky-all align-middle p-0\" style=\"width:4px; min-width: 4px;\">\r\n </th>\r\n <th class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-all\"></th>\r\n <th ngIf=\"option?.commands?.length\"\r\n class=\"position-sticky align-middle text-center p-0 c-sticky-top c-w-1\">\r\n </th>\r\n <th ngFor=\"let column of option.columns\" class=\"position-sticky c-sticky-top\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '','min-width':column.width ? column.width : '300px'}\">\r\n <span [title]=\"column.title\" class=\"c-header-title cursor-pointer\"\r\n [ngStyle]=\"{'width':column.width ? column.width : ''}\">\r\n {{column.title \| sdTranslate}}\r\n </span>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container ngFor=\"let item of subItems; trackBy: trackById\">\r\n <tr>\r\n <td class=\"position-sticky c-sticky-left p-0\">\r\n </td>\r\n <td class=\"position-sticky h-100 p-0 c-sticky-spliter c-sticky-left\"></td>\r\n <td ngIf=\"option.commands?.length\" class=\"align-middle px-2 py-0 c-w-1\">\r\n <div class=\"d-flex align-middle text-center justify-content-center\">\r\n <ng-container\r\n ngIf=\"option.commands \| commandFilter:item \| async; $implicit as filteredCommands\">\r\n <section ngFor=\"let command of filteredCommands\">\r\n <ng-container ngIf=\"!command.children?.length; else elseCommandChildren\">\r\n <button ngIf=\"!command.fontSet\" (click)=\"command.click(item)\" type=\"button\"\r\n class=\"c-btn-icon\" [matTooltip]=\"command.title \| commandTitle:item\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <i class=\"{{command.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button ngIf=\"command.fontSet\" [matTooltip]=\"command.title \| commandTitle:item\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\" (click)=\"command.click(item)\"\r\n aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon [fontSet]=\"command.fontSet\">{{command.icon \| commandIcon:item}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-template #elseCommandChildren>\r\n <button ngIf=\"command.icon\" [matMenuTriggerFor]=\"menu\" type=\"button\" class=\"c-btn-icon\"\r\n [matTooltip]=\"command.title\" [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <i class=\"{{command.icon \| commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n </button>\r\n <button ngIf=\"!command.icon\" mat-icon-button [matMenuTriggerFor]=\"menu\" type=\"button\"\r\n class=\"c-btn-icon-30\" [matTooltip]=\"command.title\"\r\n [disabled]=\"command.disabled \| commandDisabled:item\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <ng-container ngFor=\"let childCommand of command.children\">\r\n <button ngIf=\"!(item \| commandHidden:childCommand \| async)\" mat-menu-item\r\n [disabled]=\"childCommand.disabled \| commandDisabled:item\"\r\n (click)=\"childCommand.click(item)\">\r\n <i ngIf=\"!childCommand.fontSet\" class=\"{{childCommand.icon \| commandIcon:item}}\"></i>\r\n <mat-icon ngIf=\"childCommand.fontSet\" [fontSet]=\"childCommand.fontSet\">\r\n {{childCommand.icon \| commandIcon:item}}</mat-icon>\r\n <span> {{childCommand.title \| commandTitle:item}}</span>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n </ng-template>\r\n </section>\r\n </ng-container>\r\n </div>\r\n </td>\r\n <td ngFor=\"let column of option.columns\" class=\"align-middle\"\r\n [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number', 'text-right': column.type === 'number'}\"\r\n [ngStyle]=\"{'width':column.width ? column.width : '', 'min-width':column.width ? column.width : '300px'}\">\r\n <ng-container ngIf=\"!column.children?.length\">\r\n <ng-container ngIf=\"item[column.field] \| editorSubInformationHandler:item:option.columns\">\r\n <ng-container ngIf=\"item.editorHandler[column.field].visible;else columnView\">\r\n <sd-grid-desktop-column-edit [column]=\"column\" [item]=\"item\" (sdChange)=\"onEditorChange()\">\r\n </sd-grid-desktop-column-edit>\r\n </ng-container>\r\n <ng-template #columnView>\r\n <sd-grid-desktop-column-view [column]=\"column\" [item]=\"item\"></sd-grid-desktop-column-view>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <div ngIf=\"column.children?.length\" class=\"row mx-0\">\r\n <div ngFor=\"let childColumn of column.children \| filterMobile:item\"\r\n [ngClass]=\"{'col-sm-6': childColumn?.colSpan === 1, 'col-sm-12': !childColumn?.colSpan \|\| childColumn?.colSpan === 2}\">\r\n <span class=\"c-mobile-title\">• {{childColumn.title}}:</span>\r\n <span ngIf=\"childColumn.type === 'string'\" class=\"c-mobile-value\"\r\n [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n 'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field]}}</span>\r\n <span ngIf=\"childColumn.type === 'number'\" class=\"c-mobile-value\"\r\n [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n 'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field] \| valueTransform:item:childColumn}}</span>\r\n <span ngIf=\"childColumn.type === 'datetime'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'}}</span>\r\n <span ngIf=\"childColumn.type === 'date'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'dd/MM/yyyy'}}</span>\r\n <span ngIf=\"childColumn.type === 'time'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'HH:mm'}}</span>\r\n <span ngIf=\"childColumn.type === 'bool'\" class=\"c-mobile-value\">\r\n <span ngIf=\"item[childColumn.field]\"\r\n class=\"status status-success\">{{childColumn.trueValue \|\| 'True'}}</span>\r\n <span ngIf=\"!item[childColumn.field]\"\r\n class=\"status status-danger\">{{childColumn.falseValue \|\| 'False'}}</span>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\"\r\n type=\"color\" class=\"form-control form-control-sm\"\r\n [(ngModel)]=\"item[childColumn.field]\"></span>\r\n <span ngIf=\"childColumn.type === 'values'\" class=\"status c-mobile-value\"\r\n [ngStyle]=\"{'color':childColumn?.dictionary[item[childColumn.field]]?.color}\">\r\n {{!!childColumn?.dictionary[item[childColumn.field]] ? childColumn?.dictionary[item[childColumn.field]]?.text : item[childColumn.field]}}\r\n </span>\r\n <span ngIf=\"childColumn.type === 'radio'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field]}}</span>\r\n <img ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\"\r\n style=\"margin: 5px 0\">\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div ngIf=\"isMobileOrTablet\" class=\"sd-box c-mobile-box\">\r\n <div class=\"sd-box-body c-mobile-body\" [ngStyle]=\"{'height': height}\">\r\n <ng-container ngFor=\"let item of subItems\">\r\n <div class=\"c-mobile-item\">\r\n <ng-container ngFor=\"let column of option.columns \| filterMobile:item\">\r\n <div ngIf=\"item[column.field]\" class=\"c-mobile-row\">\r\n <span class=\"c-mobile-title\">• {{column.title}}:</span>\r\n <span ngIf=\"column.type === 'string'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-mobile-badge':item.badge && item.badge[column.field], \r\n 'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[column.field]}\">{{item[column.field]}}</span>\r\n <span ngIf=\"column.type === 'number'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-mobile-badge':item.badge && item.badge[column.field], \r\n 'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[column.field]}\">{{item[column.field] \| number : '1.0-2'}}</span>\r\n <span ngIf=\"column.type === 'datetime'\"\r\n class=\"c-mobile-value\">{{item[column.field] \| date:'dd/MM/yyyy HH:mm'}}</span>\r\n <span ngIf=\"column.type === 'date'\"\r\n class=\"c-mobile-value\">{{item[column.field] \| date:'dd/MM/yyyy'}}</span>\r\n <span ngIf=\"column.type === 'time'\" class=\"c-mobile-value\">{{item[column.field] \| date:'HH:mm'}}</span>\r\n <span ngIf=\"column.type === 'bool'\" class=\"c-mobile-value\">\r\n <span ngIf=\"item[column.field]\" class=\"status status-success\">{{column.trueValue \|\| 'True'}}</span>\r\n <span ngIf=\"!item[column.field]\" class=\"status status-danger\">{{column.falseValue \|\| 'False'}}</span>\r\n </span>\r\n <span ngIf=\"column.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\" type=\"color\"\r\n class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"></span>\r\n <span ngIf=\"column.type === 'values'\" class=\"status c-mobile-value\"\r\n [ngStyle]=\"{'color':column?.dictionary[item[column.field]]?.color}\">\r\n {{!!column?.dictionary[item[column.field]] ? column?.dictionary[item[column.field]]?.text : item[column.field]}}\r\n </span>\r\n <span ngIf=\"column.type === 'radio'\" class=\"c-mobile-value\">{{item[column.field]}}</span>\r\n <img ngIf=\"column.type === 'image'\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n [height]=\"column.display?.height\" style=\"margin: 5px 0\">\r\n </div>\r\n <ng-container ngIf=\"column.children?.length\">\r\n <div class=\"c-mobile-row\" ngFor=\"let childColumn of column.children \| filterMobile:item\">\r\n <span class=\"c-mobile-title\">• {{childColumn.title}}:</span>\r\n <span ngIf=\"childColumn.type === 'string'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n 'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field]}}</span>\r\n <span ngIf=\"childColumn.type === 'number'\" class=\"c-mobile-value\"\r\n [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n 'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n 'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n 'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n 'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n 'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n 'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n 'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n 'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n 'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field] \| number : '1.0-2'}}</span>\r\n <span ngIf=\"childColumn.type === 'datetime'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'dd/MM/yyyy HH:mm'}}</span>\r\n <span ngIf=\"childColumn.type === 'date'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'dd/MM/yyyy'}}</span>\r\n <span ngIf=\"childColumn.type === 'time'\"\r\n class=\"c-mobile-value\">{{item[childColumn.field] \| date:'HH:mm'}}</span>\r\n <span ngIf=\"childColumn.type === 'bool'\" class=\"c-mobile-value\">\r\n <span ngIf=\"item[childColumn.field]\"\r\n class=\"status status-success\">{{childColumn.trueValue \|\| 'True'}}</span>\r\n <span ngIf=\"!item[childColumn.field]\"\r\n class=\"status status-danger\">{{childColumn.falseValue \|\| 'False'}}</span>\r\n </span>\r\n <span ngIf=\"childColumn.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\" type=\"color\"\r\n class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n <span ngIf=\"childColumn.type === 'values'\" class=\"status c-mobile-value\"\r\n [ngStyle]=\"{'color':childColumn?.dictionary[item[childColumn.field]]?.color}\">\r\n {{!!childColumn?.dictionary[item[childColumn.field]] ? childColumn?.dictionary[item[childColumn.field]]?.text : item[childColumn.field]}}\r\n </span>\r\n <span ngIf=\"childColumn.type === 'radio'\" class=\"c-mobile-value\">{{item[childColumn.field]}}</span>\r\n <img ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\">\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-container>","styles":[".grid-header{overflow-x:hidden;overflow-y:hidden}.c-table.table{margin-bottom:5px}td,th{font-size:13px;min-width:0;padding:3px 5px}.c-cell-padding{padding:3px 5px!important}.c-header-title{font-weight:500;text-transform:capitalize}span.c-header-title{display:block;overflow:hidden!important;padding:0 .3rem;text-overflow:ellipsis;white-space:nowrap}thead th{border-top:none;height:auto;min-height:20px;padding:5px}tbody td{height:25px;min-height:25px}.status{border-radius:1.5rem;color:#16759b;display:inline-block;font-weight:500;padding:2px 5px;text-align:center;text-transform:uppercase}.status-success{color:#43a047}.status-danger{color:#f44336}.cursor-pointer{cursor:pointer}label.custom-control.custom-checkbox{margin:0}.c-overflow-x-hidden{overflow-x:hidden}.c-grid-header,.c-overflow-y-hidden{overflow-y:hidden}.c-grid-header{overflow-x:hidden}.c-th-xs{height:49px;min-height:49px}.c-td-xs,.c-th-xs{font-size:.8rem;line-height:1.15;min-width:0;padding:.1rem!important}.c-td-xs{height:1.5rem;min-height:1.5rem}.c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}.c-sticky-top{top:0!important;z-index:20}.c-sticky-left{z-index:20}.c-sticky-all,.c-sticky-left{border-left:none!important;border-right:none!important;left:0!important}.c-sticky-all{top:0!important;z-index:30}.c-sticky-spliter{background-color:#dee2e6;border:none;min-width:1px;width:1px;z-index:40}.table-striped tbody tr:nth-of-type(2n) .c-sticky-left{background-color:#fff}.table-striped tbody tr:nth-of-type(odd) .c-sticky-left{background-color:#f2f2f2}.table-responsive>.table-bordered{border:1px solid #dee2e6!important}.c-badge{border-radius:10rem;display:block!important;font-size:.8rem;font-weight:500;padding:.3rem!important}.c-m-3{margin:3px!important}.c-m-5{margin:5px!important}.c-w-1{width:1px}.c-btn-icon{background:none!important;border:none;display:inline-flex;height:16px;opacity:.8;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}"]}]}],"members":{"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"subItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":17,"character":17},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":18,"character":19}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"updateFilter":[{"__symbolic":"method"}],"trackById":[{"__symbolic":"method"}]}},"SdCellDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdCellDef]"}]}],"members":{"sdCellDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"SdCellEditorDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdCellEditorDef]"}]}],"members":{"sdCellEditorDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"SdCellFooterDevDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdCellFooterDef]"}]}],"members":{"sdCellFooterDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"SdGridFilterInfo":{"__symbolic":"interface"},"IGridConfiguration":{"__symbolic":"interface"},"GRID_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":17,"character":31},"arguments":["grid.configuration"]},"IHandlerServer":{"__symbolic":"interface"},"IHandlerLocal":{"__symbolic":"interface"},"HandlerDotnet":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1}}],"members":{}},"HandlerLocal":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":8,"character":32}]}]}},"CellDesktopClassNamePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"cellDesktopClassName"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CellMobileClassNamePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"cellMobileClassName"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ColumnCommandFilterPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"columnCommandFilter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ColumnHtmlTemplatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"columnHtmlTemplate"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":8,"character":29}]}],"transform":[{"__symbolic":"method"}]}},"ColumnTitlePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"columnTitle"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ColumnValuesPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"columnValues"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sd-angular/core/utility","name":"SdUtilityService","line":15,"character":38}]}],"transform":[{"__symbolic":"method"}]},"statics":{"cache":{}}},"CommandDisabledPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandDisabled"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CommandFilterPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandFilter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CommandHidden":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandHidden"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CommandIconPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandIcon"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"CommandTitlePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"commandTitle"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"SdDynamicItems":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":1,"character":1},"arguments":[{"name":"sdDynamicItems"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorDynamicItemPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorDynamicItem"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorHandlerPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorHandler"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorPopupVisiblePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorPopupVisible"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorSubInformationHandlerPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorSubInformationHandler"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"EditorValidatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"editorValidate"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"FilterMobilePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"filterMobile","pure":false}]}],"members":{"transform":[{"__symbolic":"method"}]}},"MobileCommandFilterPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"mobileCommandFilter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"MobileViewHtmlTemplatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"mobileViewHtmlTempate"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ValueTransformPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"valueTransform"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"DecimalPipe","line":7,"character":35}]}],"transform":[{"__symbolic":"method"}]}},"SdGridImportExcel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-grid-import-excel","template":"<sd-upload-excel ngIf=\"option\" [option]=\"option\" #control></sd-upload-excel>"}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"accept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":136,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/upload-excel","name":"SdUploadExcel","line":136,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"SdSubHeaderDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdSubHeaderDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}}},"origins":{"SdGridModule":"./src/lib/grid.module","SdGrid":"./src/lib/grid.component","SdGridOption":"./src/lib/grid.model","SdGridCommand":"./src/lib/grid.model","SdGridColumn":"./src/lib/grid.model","SdGridExternalFilter":"./src/lib/grid.model","defaultGridOption":"./src/lib/grid.model","SdGridBaseOption":"./src/lib/grid.model","GridBaseOptionExport":"./src/lib/grid.model","GridBaseOptionFilter":"./src/lib/grid.model","GridCommandNoChildren":"./src/lib/grid.model","GridCommandWithChildren":"./src/lib/grid.model","EditorHandler":"./src/lib/grid.model","GridItem":"./src/lib/grid.model","ColumnCommand":"./src/lib/grid.model","GridColumnChild":"./src/lib/grid.model","GridColumnChildren":"./src/lib/grid.model","SubOption":"./src/lib/grid.model","DynamicEditorItem":"./src/lib/grid.model","MobileConfiguration":"./src/lib/grid.model","SdGridConfig":"./src/lib/components/grid-config/grid-config.component","OriginColumn":"./src/lib/components/grid-config/grid-config.model","ConfigOption":"./src/lib/components/grid-config/grid-config.model","ConfigResult":"./src/lib/components/grid-config/grid-config.model","ConfigStorage":"./src/lib/components/grid-config/grid-config.model","ConfigColumn":"./src/lib/components/grid-config/grid-config.model","GridDesktopColumnChildrenViewComponent":"./src/lib/components/grid-desktop-column-children-view/grid-desktop-column-children-view.component","SdGridDesktopColumnEdit":"./src/lib/components/grid-desktop-column-edit/grid-desktop-column-edit.component","SdGridDesktopColumnView":"./src/lib/components/grid-desktop-column-view/grid-desktop-column-view.component","SdGridDesktopInlineFilter":"./src/lib/components/grid-desktop-inline-filter/grid-desktop-inline-filter.component","SdGridMobileItemView":"./src/lib/components/grid-mobile-item-view/grid-mobile-item-view.component","SdGridPopupEditor":"./src/lib/components/grid-popup-editor/grid-popup-editor.component","SdGridPopupExportExcel":"./src/lib/components/grid-popup-export-excel/grid-popup-export-excel.component","ExcelConfiguration":"./src/lib/components/grid-popup-export-excel/grid-popup-export-excel.model","SdGridPopupFilter":"./src/lib/components/grid-popup-filter/grid-popup-filter.component","QuickFilter":"./src/lib/components/grid-popup-filter/grid-popup-filter.model","FilterConfiguration":"./src/lib/components/grid-popup-filter/grid-popup-filter.model","SdGridPopupQuickFilterDetail":"./src/lib/components/grid-popup-quick-filter-detail/grid-popup-quick-filter-detail.component","SdGridSubInformation":"./src/lib/components/grid-sub-information/grid-sub-information.component","SdCellDefDirective":"./src/lib/directives/cell-def.directive","SdCellEditorDefDirective":"./src/lib/directives/cell-editor-def.directive","SdCellFooterDevDirective":"./src/lib/directives/cell-footer-def.directive","SdGridFilterInfo":"./src/lib/models/filter-info.model","IGridConfiguration":"./src/lib/models/grid-configuration.model","GRID_CONFIG":"./src/lib/models/grid-configuration.model","IHandlerServer":"./src/lib/models/handler","IHandlerLocal":"./src/lib/models/handler","HandlerDotnet":"./src/lib/models/handler-dotnet","HandlerLocal":"./src/lib/models/handler-local","CellDesktopClassNamePipe":"./src/lib/pipes/cell-desktop-class-name.pipe","CellMobileClassNamePipe":"./src/lib/pipes/cell-mobile-class-name.pipe","ColumnCommandFilterPipe":"./src/lib/pipes/column-command-filter.pipe","ColumnHtmlTemplatePipe":"./src/lib/pipes/column-html-template.pipe","ColumnTitlePipe":"./src/lib/pipes/column-title.pipe","ColumnValuesPipe":"./src/lib/pipes/column-values.pipe","CommandDisabledPipe":"./src/lib/pipes/command-disabled.pipe","CommandFilterPipe":"./src/lib/pipes/command-filter.pipe","CommandHidden":"./src/lib/pipes/command-hidden.pipe","CommandIconPipe":"./src/lib/pipes/command-icon.pipe","CommandTitlePipe":"./src/lib/pipes/command-title.pipe","SdDynamicItems":"./src/lib/pipes/dynamic-items.pipe","EditorDynamicItemPipe":"./src/lib/pipes/editor-dynamic-item.pipe","EditorHandlerPipe":"./src/lib/pipes/editor-handler.pipe","EditorPopupVisiblePipe":"./src/lib/pipes/editor-popup-visible.pipe","EditorSubInformationHandlerPipe":"./src/lib/pipes/editor-sub-information-handler.pipe","EditorValidatePipe":"./src/lib/pipes/editor-validate.pipe","FilterMobilePipe":"./src/lib/pipes/filter-mobile.pipe","MobileCommandFilterPipe":"./src/lib/pipes/mobile-command-filter","MobileViewHtmlTemplatePipe":"./src/lib/pipes/mobile-view-html-template.pipe","ValueTransformPipe":"./src/lib/pipes/value-transform.pipe","SdGridImportExcel":"./src/lib/components/grid-import-excel/grid-import-excel.component","SdSubHeaderDefDirective":"./src/lib/directives/sub-information-header-def.directive"},"importAs":"@sd-angular/core/grid"}