@sd-angular/core 1.3.229 → 1.3.230
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.
- package/bundles/sd-angular-core-table.umd.js +6 -6
- package/bundles/sd-angular-core-table.umd.js.map +1 -1
- package/bundles/sd-angular-core-table.umd.min.js +1 -1
- package/bundles/sd-angular-core-table.umd.min.js.map +1 -1
- package/esm2015/table/src/lib/table.component.js +6 -6
- package/fesm2015/sd-angular-core-table.js +5 -5
- package/fesm2015/sd-angular-core-table.js.map +1 -1
- package/package.json +1 -1
- package/{sd-angular-core-1.3.229.tgz → sd-angular-core-1.3.230.tgz} +0 -0
- package/table/sd-angular-core-table.metadata.json +1 -1
package/package.json
CHANGED
|
Binary file
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"__symbolic":"module","version":4,"exports":[{"from":"./src/lib/table-option.model"},{"from":"./src/lib/table-column.model"},{"from":"./src/lib/table-command.model"},{"from":"./src/lib/table-configuration.model"}],"metadata":{"SdTabelCellDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdTableCellDef]"}]}],"members":{"sdTableCellDef":[{"__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"}]}]}]}},"SdTableFilterDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdTableFilterDef]"}]}],"members":{"sdTableFilterDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"showing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3},"arguments":["defaultShowing"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"MatPaginatorIntlCro":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorIntl","line":49,"character":41},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":48,"character":1}}],"members":{}},"SdTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":66,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":70,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":71,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":72,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":73,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":74,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":75,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":76,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":77,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":78,"character":4},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":79,"character":4},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkTableModule","line":80,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":81,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/form","name":"SdFormModule","line":82,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/service","name":"SdServiceModule","line":83,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":84,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/group","name":"SdGroupModule","line":85,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"SdTable"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"SdTabelCellDefDirective"},{"__symbolic":"reference","name":"SdTableFilterDefDirective"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"}],"exports":[{"__symbolic":"reference","name":"SdTable"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"SdTabelCellDefDirective"},{"__symbolic":"reference","name":"SdTableFilterDefDirective"},{"__symbolic":"reference","name":"ɵl"}],"providers":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":125,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"DecimalPipe","line":126,"character":4},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkColumnDef","line":127,"character":4},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵg"},{"provide":{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorIntl","line":131,"character":15},"useClass":{"__symbolic":"reference","name":"MatPaginatorIntlCro"}}]}]}],"members":{}},"SdTable":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":43,"character":1},"arguments":[{"selector":"sd-table","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":47,"character":19},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":49,"character":4},"arguments":["detailExpand",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":50,"character":6},"arguments":["collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":50,"character":25},"arguments":[{"height":"0","minHeight":"0","visibility":"hidden"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":51,"character":6},"arguments":["expanded",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":51,"character":24},"arguments":[{"height":"*","visibility":"visible"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":52,"character":6},"arguments":["expanded <=> collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":52,"character":43},"arguments":["225ms cubic-bezier(0.4, 0.0, 0.2, 1)"]}]}]]}],"template":"<ng-container *ngIf=\"configuration\">\r\n <sd-table-filter\r\n *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"tableOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\">\r\n </sd-table-filter>\r\n <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': tableOption?.style?.maxHeight,\r\n 'min-height': tableOption?.style?.minHeight\r\n }\">\r\n <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!tableOption.sort?.enable\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n <ng-template #useExpandCollapse>\r\n <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n mat-icon-button\r\n aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th\r\n class=\"text-center p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!tableOption.selector?.single\"\r\n class=\"c-selection px-15\"\r\n style=\"min-width: 50px; max-width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </th>\r\n <td class=\"text-center p-0\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection px-15\"\r\n style=\"min-width: 50px; max-width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.meta.selector.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\" sticky>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"tableOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns;\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n <div>\r\n <div\r\n aria-hidden=\"true\"\r\n mat-sort-header\r\n [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n *ngIf=\"!item?.sdGroup\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button\r\n *ngIf=\"tableOption.reload?.visible\"\r\n class=\"mr-8\"\r\n title=\"Tải lại\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xuất excel</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xuất CSV</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button\r\n *ngIf=\"popupConfiguration\"\r\n class=\"mr-8\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-table-quick-action>\r\n <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n </ng-container>\r\n</ng-container>\r\n","styles":[".text-black400{color:#757575}:host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex-direction:column;min-height:50px}:host .c-container,:host .c-container .c-table{flex:1;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px rgba(47,49,54,.16)}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host mat-icon.c-icon-add{color:#2962ff!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:0!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}"]}]}],"members":{"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":57,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/table","name":"MatTable","line":57,"character":13}]}]}],"popupConfiguration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":58,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵf"}]}]}],"sdScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdScrollDirective","line":60,"character":13}]}]}],"quickAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":63,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/quick-action","name":"SdQuickAction","line":63,"character":13}]}]}],"tableFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":64,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵj"}]}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":122,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":122,"character":13}]}]}],"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":141,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":141,"character":13}]}]}],"sdSubInformation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":159,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵl"}]}]}],"sdCellDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":163,"character":3},"arguments":[{"__symbolic":"reference","name":"SdTabelCellDefDirective"}]}]}],"sdFooterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":169,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵm"}]}]}],"sdFilterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":176,"character":3},"arguments":[{"__symbolic":"reference","name":"SdTableFilterDefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":196,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵi"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":197,"character":5}}],null,null,null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":194,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/loading","name":"SdLoadingService","line":195,"character":28},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","module":"@sd-angular/core/export","name":"SdExportService","line":200,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":201,"character":27},{"__symbolic":"reference","name":"ɵn"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SdTableQuickFilter":{"__symbolic":"class","members":{}},"SdTableFilterConfiguration":{"__symbolic":"interface"},"SdTableFilterValue":{"__symbolic":"interface"},"SdTableFilterRequest":{"__symbolic":"interface"},"SdTableOptionFilter":{"__symbolic":"interface"},"SdTableExternalFilter":{"__symbolic":"interface"},"SdTableFilterRegister":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-table-quick-action","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<sd-quick-action *ngIf=\"selectedTableItems | selectionActionFilter: tableOption?.selector?.actions as actions\"\r\n [isOpened]=\"actions?.length\">\r\n <div class=\"d-flex align-items-center\" sdMessage>\r\n <div class=\"c-bg-length\">\r\n <span class=\"c-length\">{{ selectedTableItems.length }}</span>\r\n </div>\r\n <div class=\"c-message\">{{ tableOption?.selector?.message || 'dữ liệu được chọn' }}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" (action)=\"onClickAction(action)\"></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"onClickAction(childAction)\"\r\n [disabled]=\"childAction.disabled\">\r\n <mat-icon *ngIf=\"childAction.icon\" [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n <sd-button class=\"ml-5\" icon=\"close\" color=\"secondary\" type=\"outline\" size=\"sm\"\r\n (action)=\"onClear()\" width=\"35px\"></sd-button>\r\n </div>\r\n</sd-quick-action>","styles":[".c-bg-length{align-items:flex-start;background:#2962ff;border-radius:4px 0 0 4px;display:flex;flex-direction:column;height:48px;left:0;min-width:48px;padding:12px 8px;position:static;top:0;width:auto}.c-bg-length .c-length{color:#fff;font-size:16px;font-weight:500;height:24px;left:8px;line-height:24px;min-width:32px;text-align:center;top:12px;width:auto}.c-bg-length .c-length,.c-message{font-family:Roboto;font-style:normal;position:static}.c-message{color:#000;font-size:14px;font-weight:400;height:20px;left:0;line-height:20px;margin:0 0 0 16px;min-width:200px;top:6px}"]}]}],"members":{"tableOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"selectedTableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-desktop-cell","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":8,"character":19},"member":"OnPush"},"template":"<ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"cellDef[column.field].templateRef; context: { item: item.data, column: column }\"> </ng-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"column.cellDef\">\r\n <ng-container *ngTemplateOutlet=\"column.cellDef; context: { item: item.data, column: column }\"> </ng-container>\r\n</ng-container>\r\n<sd-desktop-cell-view *ngIf=\"!cellDef[column.field] && !column.cellDef\" [column]=\"column\" [item]=\"item\"></sd-desktop-cell-view>\r\n"}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"cellDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-desktop-cell-view","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<ng-container *sdLet=\"item.meta.display[column.field] as view\">\r\n <ng-container *ngIf=\"view.isHtml; else useValue\">\r\n <div\r\n *ngIf=\"view.click\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [matTooltip]=\"view.tooltip\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | safeHtml\"></div>\r\n <div\r\n *ngIf=\"!view.click\"\r\n class=\"text-break\"\r\n [matTooltip]=\"view.tooltip\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | safeHtml\"></div>\r\n </ng-container>\r\n <ng-template #useValue>\r\n <ng-container *ngIf=\"!!view.badge; else noBadge\">\r\n <sd-badge\r\n *ngIf=\"view.data\"\r\n [type]=\"view.badge.type\"\r\n [title]=\"view.data\"\r\n [color]=\"view.badge.color\"\r\n [icon]=\"view.badge.icon\"\r\n [tooltip]=\"view.tooltip\"\r\n (sdClick)=\"!!view.click && view.click()\"></sd-badge>\r\n </ng-container>\r\n <ng-template #noBadge>\r\n <div\r\n class=\"text-break\"\r\n [style]=\"view.cellStyle\"\r\n [matTooltip]=\"view.tooltip\">\r\n <a *ngIf=\"!!view.click\" href=\"javascript:;\" (click)=\"view.click()\">{{ view.data }}</a>\r\n <ng-container *ngIf=\"!view.click\">{{ view.data }} </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n</ng-container>\r\n","styles":[".text-black400{color:#757575}.c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-image{-o-object-fit:contain;margin:5px 0;object-fit:contain}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}"]}]}],"members":{"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-desktop-command","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":8,"character":19},"member":"OnPush"},"template":"<ng-container *ngIf=\"item | commandFilter:commands | async; $implicit as filteredCommands\">\r\n <ng-container *ngFor=\"let command of filteredCommands\">\r\n <ng-container *ngIf=\"command?.click; else elseChildren\">\r\n <button (click)=\"command.click(item.data)\" [matTooltip]=\"command | commandTitle:item\" aria-hidden=\"true\"\r\n [disabled]=\"item | commandDisable:command\" mat-icon-button>\r\n <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-template #elseChildren>\r\n <button [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon *ngIf=\"command?.icon\" class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}\r\n </mat-icon>\r\n <mat-icon *ngIf=\"!command?.icon\" class=\"c-icon\">more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childCommand of command.children\" mat-menu-item (click)=\"childCommand.click(item.data)\"\r\n [disabled]=\"item | commandDisable:childCommand\">\r\n <ng-container *ngIf=\"!childCommand.htmlTemplate\">\r\n <mat-icon [fontSet]=\"command.fontSet\" class=\"c-icon\">{{childCommand | commandIcon:item}}\r\n </mat-icon>\r\n <span> {{childCommand | commandTitle:item}}</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"childCommand.htmlTemplate\">\r\n <div [innerHTML]=\"childCommand.htmlTemplate(item.data)\"></div>\r\n </ng-container>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n","styles":[":host{align-items:center;display:flex}mat-icon.c-icon{color:rgba(0,0,0,.54)!important}"]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"commands":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-column-inline-filter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<div class=\"d-flex c-inline-column align-items-end\">\r\n <ng-container *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'lazy-values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\r\n \">\r\n <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n <!-- Only number column icon broken. add mb when not default symbol -->\r\n <sd-button class=\"{{ (column.type === 'number' && inlineSymbol !== 'filter_alt') ? 'mb-4 mr-2 ' :'mr-2 '}}\"\r\n fontSet=\"material-symbols-outlined\" [icon]=\"inlineSymbol\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n <mat-icon fontSet=\"material-symbols-outlined\" class=\"{{column.type === 'number' ? 'mb-8 ':''}}\">{{\r\n operator.symbol }}</mat-icon>\r\n <span> {{ operator.display }}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <sd-input *ngIf=\"column.type === 'string'\" style=\"flex: 1\" size=\"sm\" type=\"text\"\r\n [(model)]=\"columnFilter[column.field]\" (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-input-number *ngIf=\"column.type === 'number'\" style=\"flex: 1\" size=\"sm\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input-number>\r\n <sd-select *ngIf=\"column.type === 'bool'\" style=\"flex: 1\" size=\"sm\" [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n <ng-template sdSelectDisplayDef let-item=\"item\">\r\n <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\">\r\n </sd-badge>\r\n <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\">\r\n </sd-badge>\r\n </ng-template>\r\n </sd-select>\r\n <ng-container *ngIf=\"column.type === 'values'\">\r\n <sd-select *ngIf=\"column?.option?.selection !== 'AUTOCOMPLETE'\" style=\"flex: 1\" size=\"sm\" [items]=\"items\"\r\n [valueField]=\"column.option.valueField\" [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\"\r\n [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"column?.option?.selection === 'AUTOCOMPLETE'\" style=\"flex: 1\" size=\"sm\" [items]=\"items\"\r\n [valueField]=\"column.option.valueField\" [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n </ng-container>\r\n <ng-container *ngIf=\"column.type === 'lazy-values'\">\r\n <sd-select *ngIf=\"column.option?.selection === 'MULTIPLE'\" style=\"flex: 1\" size=\"sm\" [items]=\"items\"\r\n [valueField]=\"column.option.valueField\" [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\"\r\n multiple filtered>\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"!column.option?.selection\" style=\"flex: 1\" size=\"sm\" [items]=\"items\"\r\n [valueField]=\"column.option.valueField\" [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n </ng-container>\r\n <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n <sd-date-range *ngIf=\"!column.filter?.useFilterDate\" style=\"flex: 1\" size=\"sm\"\r\n [(from)]=\"columnFilter[column.field].from\" [(to)]=\"columnFilter[column.field].to\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-range>\r\n <sd-date-time *ngIf=\"column.filter?.useFilterDate\" style=\"flex: 1\" type=\"date\" size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-date-time>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n </ng-template>\r\n</div>","styles":[":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]}]}],"members":{"_value":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3},"arguments":["value"]}]}],"_inlineOperator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3},"arguments":["inlineOperator"]}]}],"inlineOperatorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"operatorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"_columnFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3},"arguments":["columnFilter"]}]}],"cacheValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"_column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3},"arguments":["column"]}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":4}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":58,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"sd-popup-configuration","template":"<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n <sd-modal-body *ngIf=\"configuration\">\r\n <div class=\"c-container\">\r\n <div class=\"c-table\" style=\"max-height: 70vh\">\r\n <table\r\n #table\r\n mat-table\r\n [dataSource]=\"configuration.columns\"\r\n cdkDropList\r\n [cdkDropListData]=\"configuration.columns\"\r\n (cdkDropListDropped)=\"dropTable($event)\">\r\n >\r\n <ng-container matColumnDef=\"stt\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"title\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"width\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"invisible\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"fixed\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n cdkDrag\r\n [cdkDragData]=\"row\"\r\n cdkDragLockAxis=\"y\"\r\n [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n </table>\r\n </div>\r\n </div>\r\n </sd-modal-body>\r\n <sd-modal-footer>\r\n <sd-button class=\"mr-8\" (action)=\"onReset()\" title=\"Mặc định\" color=\"info\" size=\"sm\"> </sd-button>\r\n <sd-button (action)=\"onSave()\" title=\"Lưu\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>\r\n","styles":[".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]}]}],"members":{"tableOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":18,"character":3},"arguments":["modal"]}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":3},"arguments":["table"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":29,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":30,"character":27},{"__symbolic":"reference","name":"ɵg"}]}],"ngOnInit":[{"__symbolic":"method"}],"mouseUp":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":35,"character":3},"arguments":["window:mouseup",["$event"]]}]}],"dropTable":[{"__symbolic":"method"}],"handleMouseDown":[{"__symbolic":"method"}],"handleMouseUp":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":22,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵi"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":22,"character":27}}]],"parameters":[{"__symbolic":"reference","module":"@sd-angular/core/setting","name":"SdSettingService","line":21,"character":28},{"__symbolic":"reference","name":"ɵh"}]}]}},"ɵh":{"__symbolic":"interface"},"ɵi":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":30,"character":32},"arguments":["sd-table.configuration"]},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"sd-table-filter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":19},"member":"OnPush"},"template":"<ng-container *ngIf=\"!filter?.disabled\">\r\n <ng-container *ngIf=\"filter?.enableCollapse; else noCollapse\">\r\n <sd-group class=\"p-12\" [isExpanded]=\"false\" title=\"Tìm kiếm\" expandable>\r\n <div sdGroupBody>\r\n <ng-container *ngTemplateOutlet=\"noCollapse\"></ng-container>\r\n </div>\r\n </sd-group>\r\n </ng-container>\r\n <ng-template #noCollapse>\r\n <div *ngIf=\"!isMobileOrTablet && (externalFilters?.length || filterDefs?.length)\" class=\"row mx-0 mb-8\">\r\n <ng-container *ngIf=\"filter?.sorts?.length\">\r\n <ng-container *ngFor=\"let field of filter?.sorts\">\r\n <ng-container *ngIf=\"externalFilters?.length\">\r\n <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal : field\">\r\n <ng-container *ngTemplateOutlet=\"filterExternal; context: { item: item }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngFor=\"let item of filterDefs\">\r\n <div *ngIf=\"inlineFilterDef[item.sdTableFilterDef] && item.sdTableFilterDef === field\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <ng-container *ngTemplateOutlet=\"item.templateRef; context: { filterDef: filterDef, isInline: true }\"> </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n <ng-container *ngIf=\"externalFilters?.length\">\r\n <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n <ng-container *ngTemplateOutlet=\"filterExternal; context: { item: item }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngFor=\"let item of filterDefs\">\r\n <div *ngIf=\"inlineFilterDef[item.sdTableFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <ng-container *ngTemplateOutlet=\"item.templateRef; context: { filterDef: filterDef, isInline: true }\"> </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #filterExternal let-item=\"item\">\r\n <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <sd-input\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'string'\"\r\n type=\"text\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (keyupEnter)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-input>\r\n <sd-input-number\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'number'\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (keyupEnter)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-input-number>\r\n <sd-select\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'bool'\"\r\n [items]=\"[\r\n { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-select>\r\n <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n [selectAll]=\"item.option.selectAll\"\r\n appearance=\"outline\"\r\n multiple>\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-autocomplete>\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n filtered\r\n appearance=\"outline\"\r\n multiple>\r\n </sd-select>\r\n <sd-select\r\n *ngIf=\"!item.option?.selection\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"item.type === 'lazy-values' && item.option\">\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n filtered>\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"!item.option?.selection\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-autocomplete>\r\n </ng-container>\r\n <sd-date-time\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n [type]=\"item.type\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-date-time>\r\n <sd-date-range\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n [(from)]=\"externalFilter[item.field].from\"\r\n [(to)]=\"externalFilter[item.field].to\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-date-range>\r\n <ng-container *ngIf=\"item.type === 'custom' && item.filterDef\">\r\n <ng-container *ngTemplateOutlet=\"item.filterDef; context: { externalFilter: externalFilter }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n <sd-popup-filter [filterRegister]=\"filterRegister\" [columns]=\"columns\" [externalFilters]=\"externalFilters\" [filterDefs]=\"filterDefs\">\r\n </sd-popup-filter>\r\n </ng-template>\r\n</ng-container>\r\n","styles":[":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]}]}],"members":{"popupFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵk"}]}]}],"_filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["filter"]}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"_externalFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3},"arguments":["externalFilters"]}]}],"filterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"_filterRegister":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3},"arguments":["filterRegister"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":58,"character":27},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":58,"character":69}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"sd-popup-filter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"template":"<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\">\r\n <sd-modal-body class=\"c-popup-filter\">\r\n <ng-container *ngFor=\"let column of columns | sdFilterColumn\">\r\n <div class=\"d-flex align-items-baseline\">\r\n <ng-container>\r\n <div *sdDesktop class=\"c-checkable\">\r\n <mat-slide-toggle [(ngModel)]=\"inlineColumn[column.field]\" color=\"primary\"></mat-slide-toggle>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input\r\n *ngIf=\"column.type === 'string'\"\r\n [label]=\"column.title\"\r\n type=\"text\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n appearance=\"outline\">\r\n </sd-input>\r\n <sd-input\r\n *ngIf=\"column.type === 'number'\"\r\n [label]=\"column.title\"\r\n type=\" number\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n appearance=\"outline\">\r\n </sd-input>\r\n <sd-select\r\n *ngIf=\"column.type === 'bool'\"\r\n [label]=\"column.title\"\r\n [items]=\"[\r\n { value: '1', display: column.trueValue || 'True' },\r\n { value: '0', display: column.falseValue || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n appearance=\"outline\">\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"column.type === 'values' || column.type === 'lazy-values'\"\r\n [label]=\"column.title\"\r\n [items]=\"column.option.items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n appearance=\"outline\">\r\n </sd-autocomplete>\r\n <sd-date-time\r\n *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n [label]=\"column.title\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n type=\"date\"\r\n appearance=\"outline\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n <div class=\"d-flex align-items-baseline\">\r\n <ng-container>\r\n <div *sdDesktop class=\"c-checkable\">\r\n <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'string'\"\r\n type=\"text\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n appearance=\"outline\">\r\n </sd-input>\r\n <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n </sd-input-number>\r\n <sd-select\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'bool'\"\r\n [items]=\"[\r\n { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n appearance=\"outline\">\r\n </sd-select>\r\n <ng-container *ngIf=\"item.type === 'values'\">\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n appearance=\"outline\"\r\n multiple>\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n appearance=\"outline\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-autocomplete>\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n appearance=\"outline\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n filtered=\"true\"\r\n multiple>\r\n </sd-select>\r\n <sd-select\r\n *ngIf=\"!item.option?.selection\"\r\n [label]=\"item.title\"\r\n [items]=\"item.values\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n appearance=\"outline\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-select>\r\n </ng-container>\r\n <sd-date-time\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n [type]=\"item.type\"\r\n appearance=\"outline\">\r\n </sd-date-time>\r\n <sd-date-range\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n [(from)]=\"externalFilter[item.field].from\"\r\n [(to)]=\"externalFilter[item.field].to\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n appearance=\"outline\">\r\n </sd-date-range>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let filter of filterDefs\">\r\n <div class=\"d-flex align-items-baseline\">\r\n <ng-container>\r\n <div *sdDesktop class=\"c-checkable\">\r\n <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdTableFilterDef]\" color=\"primary\"> </mat-slide-toggle>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <ng-container *ngTemplateOutlet=\"filter.templateRef; context: { filterDef: filterDef }\"> </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </sd-modal-body>\r\n <sd-modal-footer *sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"onClear()\" title=\"Mặc định\" size=\"sm\" type=\"link\"> </sd-button>\r\n <sd-button (action)=\"onApply()\" title=\"Đồng ý\" color=\"primary\" size=\"sm\" type=\"fill\"></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()\" title=\"Mặc định\" width=\"100%\" size=\"sm\" type=\"link\"></sd-button>\r\n <sd-button\r\n style=\"flex: 1; padding-left: 5px\"\r\n (action)=\"onApply()\"\r\n title=\"Đồng ý\"\r\n color=\"primary\"\r\n width=\"100%\"\r\n size=\"sm\"\r\n type=\"fill\"></sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>\r\n","styles":[".c-checkable{width:50px}.c-filterable{flex:1}::ng-deep sd-modal-body.c-popup-filter .mat-form-field-wrapper{padding-bottom:0}"]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":14,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/modal","name":"SdModal","line":14,"character":13}]}]}],"filterRegister":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"externalFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"filterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":29,"character":29}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onClear":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdTableExpandDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdTableFooterDef]"}]}],"members":{"sdTableFooterDef":[{"__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"}]}]}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":14,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sd-angular/core/setting","name":"SdSettingService","line":19,"character":38}]}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"commandFilter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"commandDisable"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"commandIcon"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"commandTitle"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"columnTooltip"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transform":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"sdFilterColumn"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"sdFilterExternal"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"selectionActionFilter"}]}],"members":{}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":5,"character":1},"arguments":[{"name":"selectionVisible"}]}],"members":{}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"selectionDisable"}]}],"members":{}},"ɵy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"selectionVisibleSelectAll"}]}],"members":{}},"ɵz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"sdGroup"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"SdTabelCellDefDirective":"./src/lib/directives/sd-table-cell-def.directive","SdTableFilterDefDirective":"./src/lib/directives/sd-table-filter-def.directive","MatPaginatorIntlCro":"./src/lib/table.module","SdTableModule":"./src/lib/table.module","SdTable":"./src/lib/table.component","SdTableQuickFilter":"./src/lib/services/table-filter/table-filter.model","SdTableFilterConfiguration":"./src/lib/services/table-filter/table-filter.model","SdTableFilterValue":"./src/lib/services/table-filter/table-filter.model","SdTableFilterRequest":"./src/lib/services/table-filter/table-filter.model","SdTableOptionFilter":"./src/lib/services/table-filter/table-filter.model","SdTableExternalFilter":"./src/lib/services/table-filter/table-filter.model","SdTableFilterRegister":"./src/lib/services/table-filter/table-filter.model","ɵa":"./src/lib/components/quick-action/quick-action.component","ɵb":"./src/lib/components/desktop-cell/desktop-cell.component","ɵc":"./src/lib/components/desktop-cell-view/desktop-cell-view.component","ɵd":"./src/lib/components/desktop-command/desktop-command.component","ɵe":"./src/lib/components/column-inline-filter/column-inline-filter.component","ɵf":"./src/lib/components/popup-configuration/popup-configuration.component","ɵg":"./src/lib/services/table-configuration.service","ɵh":"./src/lib/models/table-configuration.model","ɵi":"./src/lib/models/table-configuration.model","ɵj":"./src/lib/components/table-filter/table-filter.component","ɵk":"./src/lib/components/popup-filter/popup-filter.component","ɵl":"./src/lib/directives/sd-table-expand-def.directive","ɵm":"./src/lib/directives/sd-table-footer-def.directive","ɵn":"./src/lib/services/table-filter/table-filter.service","ɵo":"./src/lib/pipes/command-filter.pipe","ɵp":"./src/lib/pipes/command-disable.pipe","ɵq":"./src/lib/pipes/command-icon.pipe","ɵr":"./src/lib/pipes/command-title.pipe","ɵs":"./src/lib/pipes/column-tooltip.pipe","ɵt":"./src/lib/pipes/filter-column.pipe","ɵu":"./src/lib/pipes/filter-external.pipe","ɵv":"./src/lib/pipes/selection-action-filter.pipe","ɵw":"./src/lib/pipes/selection-visible.pipe","ɵx":"./src/lib/pipes/selection-disable.pipe","ɵy":"./src/lib/pipes/selection-visible-select-all.pipe","ɵz":"./src/lib/pipes/sd-group.pipe"},"importAs":"@sd-angular/core/table"}
|
|
1
|
+
{"__symbolic":"module","version":4,"exports":[{"from":"./src/lib/table-option.model"},{"from":"./src/lib/table-column.model"},{"from":"./src/lib/table-command.model"},{"from":"./src/lib/table-configuration.model"}],"metadata":{"SdTabelCellDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdTableCellDef]"}]}],"members":{"sdTableCellDef":[{"__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"}]}]}]}},"SdTableFilterDefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdTableFilterDef]"}]}],"members":{"sdTableFilterDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":3}}]}],"showing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3},"arguments":["defaultShowing"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"MatPaginatorIntlCro":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorIntl","line":49,"character":41},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":48,"character":1}}],"members":{}},"SdTableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":66,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":68,"character":4},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":69,"character":4},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":70,"character":4},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":71,"character":4},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":72,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":73,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":74,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":75,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":76,"character":4},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":77,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":78,"character":4},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":79,"character":4},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkTableModule","line":80,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":81,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/form","name":"SdFormModule","line":82,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/service","name":"SdServiceModule","line":83,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdCommonModule","line":84,"character":4},{"__symbolic":"reference","module":"@sd-angular/core/group","name":"SdGroupModule","line":85,"character":4}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"SdTable"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"SdTabelCellDefDirective"},{"__symbolic":"reference","name":"SdTableFilterDefDirective"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"}],"exports":[{"__symbolic":"reference","name":"SdTable"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"SdTabelCellDefDirective"},{"__symbolic":"reference","name":"SdTableFilterDefDirective"},{"__symbolic":"reference","name":"ɵl"}],"providers":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":125,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"DecimalPipe","line":126,"character":4},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkColumnDef","line":127,"character":4},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵg"},{"provide":{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorIntl","line":131,"character":15},"useClass":{"__symbolic":"reference","name":"MatPaginatorIntlCro"}}]}]}],"members":{}},"SdTable":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":43,"character":1},"arguments":[{"selector":"sd-table","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":47,"character":19},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":49,"character":4},"arguments":["detailExpand",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":50,"character":6},"arguments":["collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":50,"character":25},"arguments":[{"height":"0","minHeight":"0","visibility":"hidden"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":51,"character":6},"arguments":["expanded",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":51,"character":24},"arguments":[{"height":"*","visibility":"visible"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":52,"character":6},"arguments":["expanded <=> collapsed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":52,"character":43},"arguments":["225ms cubic-bezier(0.4, 0.0, 0.2, 1)"]}]}]]}],"template":"<ng-container *ngIf=\"configuration\">\r\n <sd-table-filter\r\n *ngIf=\"!tableOption.filter?.disabled && filterRegister\"\r\n [filterRegister]=\"filterRegister\"\r\n [filter]=\"tableOption?.filter\"\r\n [columns]=\"configuration.firstColumns\"\r\n [externalFilters]=\"tableOption?.filter?.externalFilters\"\r\n [filterDefs]=\"filterDefs\">\r\n </sd-table-filter>\r\n <ng-container *ngIf=\"items | sdGroup : tableOption; $implicit as groupedItems\">\r\n <div class=\"c-container\">\r\n <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"c-table\"\r\n sdScroll\r\n [ngStyle]=\"{\r\n 'max-height': tableOption?.style?.maxHeight,\r\n 'min-height': tableOption?.style?.minHeight\r\n }\">\r\n <table mat-table [dataSource]=\"groupedItems\" [trackBy]=\"trackBy\" matSort [matSortDisabled]=\"!tableOption.sort?.enable\" multiTemplateDataRows>\r\n <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n <ng-container *ngIf=\"tableOption?.expand?.always; else useExpandCollapse\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n <ng-template #useExpandCollapse>\r\n <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n <ng-container *ngIf=\"item.isExpanded\">\r\n <ng-container *ngTemplateOutlet=\"sdSubInformation.templateRef; context: { item: item }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 1px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button\r\n *ngIf=\"!element.isExpanding && !tableOption?.expand?.always\"\r\n mat-icon-button\r\n aria-label=\"Expand & Collapse\"\r\n (click)=\"onExpand(element)\">\r\n <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n </button>\r\n <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdSelection\" sticky>\r\n <th\r\n class=\"text-center p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n <ng-container *ngIf=\"items | selectionVisibleSelectAll : tableOption?.selector | async\">\r\n <mat-checkbox\r\n *ngIf=\"!tableOption.selector?.single\"\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"isSelectAll\"\r\n (change)=\"onSelectAll()\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </th>\r\n <td class=\"text-center p-0\" mat-cell *matCellDef=\"let item\">\r\n <ng-container *ngIf=\"item | selectionVisible : tableOption?.selector\">\r\n <mat-checkbox\r\n class=\"c-selection px-15\"\r\n style=\"width: 50px\"\r\n color=\"primary\"\r\n [(ngModel)]=\"item.meta.selector.isSelected\"\r\n (change)=\"onSelect(item)\"\r\n [disabled]=\"selectedTableItems | selectionDisable : item : tableOption?.selector\">\r\n </mat-checkbox>\r\n </ng-container>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdCommand\" sticky>\r\n <th\r\n class=\"p-0\"\r\n mat-header-cell\r\n *matHeaderCellDef\r\n style=\"width: 50px\"\r\n [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-command [commands]=\"tableOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"sdGroup\">\r\n <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\" [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\"></div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n <ng-container\r\n *ngFor=\"let column of configuration.firstColumns;\"\r\n [matColumnDef]=\"column.field\"\r\n [sticky]=\"configuration.fixedColumn[column.field]\">\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n class=\"px-8 py-8 c-th\"\r\n [ngStyle]=\"{ 'min-width': column.width }\"\r\n [attr.rowspan]=\"configuration.multipleHeader && column.type !== 'children-col' ? 2 : 1\"\r\n [attr.colspan]=\"column.type === 'children-col' ? column.children?.length : 1\">\r\n <div>\r\n <div\r\n aria-hidden=\"true\"\r\n mat-sort-header\r\n [disabled]=\"!column.sortable || column.type === 'children-col'\"\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n *ngIf=\"!item?.sdGroup\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n <div>\r\n <div\r\n [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n [class.text-center]=\"column.align === 'center'\"\r\n [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n <sd-column-inline-filter\r\n *ngIf=\"!tableOption.filter?.disabled && !tableOption.filter?.hideInlineFilter && columnOperator\"\r\n [value]=\"columnFilter[column.field]\"\r\n [(inlineOperator)]=\"columnOperator[column.field]\"\r\n (operatorChange)=\"onOperatorChange(column, $event)\"\r\n [columnFilter]=\"columnFilter\"\r\n [cacheValues]=\"cacheValues\"\r\n [column]=\"column\"\r\n (filterChange)=\"onFilterChange()\">\r\n </sd-column-inline-filter>\r\n </div>\r\n </th>\r\n <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n <sd-desktop-cell\r\n class=\"d-block px-8\"\r\n [value]=\"item[column.field]\"\r\n [column]=\"column\"\r\n [item]=\"item\"\r\n [cellDef]=\"cellDef\">\r\n </sd-desktop-cell>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef>\r\n <ng-container *ngIf=\"footerDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"footerDef[column.field].templateRef; context: { items: items, column: column }\">\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </ng-container>\r\n <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\"></tr>\r\n <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\"></tr>\r\n </ng-container>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: configuration.displayedColumns\"\r\n matRipple\r\n class=\"c-row\"\r\n [class.selected]=\"row.meta.selector.isSelected\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-paginator\">\r\n <div class=\"c-action\">\r\n <sd-button\r\n *ngIf=\"tableOption.reload?.visible\"\r\n class=\"mr-8\"\r\n title=\"Tải lại\"\r\n icon=\"refresh\"\r\n size=\"sm\"\r\n (action)=\"reload()\"\r\n [disabled]=\"!items?.length\"\r\n type=\"link\">\r\n </sd-button>\r\n <ng-container *ngIf=\"tableOption.export?.visible && items?.length\">\r\n <ng-container *ngIf=\"isExporting; else unExporting\">\r\n <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" type=\"link\">\r\n </sd-button>\r\n </ng-container>\r\n <ng-template #unExporting>\r\n <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n </ng-template>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"exportExcel()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xuất excel</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportCSV()\" type=\"button\">\r\n <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n <span> Xuất CSV</span>\r\n </button>\r\n </mat-menu>\r\n </ng-container>\r\n <sd-button\r\n *ngIf=\"popupConfiguration\"\r\n class=\"mr-8\"\r\n [title]=\"'Configure' | sdTranslate\"\r\n icon=\"settings\"\r\n size=\"sm\"\r\n (action)=\"popupConfiguration.open()\"\r\n type=\"link\">\r\n </sd-button>\r\n </div>\r\n <mat-paginator\r\n [class.d-none]=\"tableOption.paginate?.hidden\"\r\n [length]=\"total\"\r\n [pageSize]=\"tableOption.paginate?.pageSize\"\r\n [pageSizeOptions]=\"tableOption.paginate?.pages\"\r\n [showFirstLastButtons]=\"tableOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n </div>\r\n </div>\r\n <sd-table-quick-action [tableOption]=\"tableOption\" [selectedTableItems]=\"selectedTableItems\" (clear)=\"onClearSelection(groupedItems)\">\r\n </sd-table-quick-action>\r\n <sd-popup-configuration *ngIf=\"tableOption?.key && tableOption.config?.visible\" [tableOption]=\"tableOption\"> </sd-popup-configuration>\r\n </ng-container>\r\n</ng-container>\r\n","styles":[".text-black400{color:#757575}:host{display:flex;flex-direction:column;height:100%;overflow:auto}:host .c-container{display:flex;flex-direction:column;min-height:50px}:host .c-container,:host .c-container .c-table{flex:1;position:relative}:host .c-container .c-table table{border-collapse:separate;width:100%}:host .c-container .c-table table tr.c-first-header.mat-header-row,:host .c-container .c-table table tr.c-second-header.mat-header-row{height:40px}:host .c-container .c-table table tr.c-detail-row{height:0}:host .c-container .c-table table tr.c-row.activated{background-color:#e5ecff}:host .c-container .c-table table tr.c-row.selected{background-color:#eef2ff}:host .c-container .c-table table tr.c-row:not(.selected):not(.activated):hover{background-color:#f5f5f5}:host .c-container .c-table table tr.c-row td{border-bottom-width:0}:host .c-container .c-table table tr.c-row.c-expandable{cursor:pointer}:host .c-container .c-table table tr.c-row.c-expandable:hover{background:#f5f5f5}:host .c-container .c-table table th.mat-header-cell{background-color:#f2f3f4;border-bottom:0!important}:host .c-container .c-table table td.mat-cell,:host .c-container .c-table table td.mat-footer-cell,:host .c-container .c-table table th.mat-header-cell{border-bottom-color:#f2f2f2!important}:host .c-container .c-table .c-th{color:#212121;font-size:14px;font-weight:500;line-height:20px;vertical-align:middle}:host .c-container .c-table .c-td:first{padding-left:10px}:host .c-container .c-loading{align-items:center;background:rgba(0,0,0,.15);bottom:56px;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:2}:host .c-container .c-paginator{align-items:center;background-color:#fff;display:flex;flex-direction:row;justify-content:space-between}:host .c-container .c-paginator .c-action{padding:5px}:host .c-container .c-empty{background-color:#fff;border:none!important;text-align:center}:host .c-container .c-empty mat-icon{font-size:150px;height:auto;margin-bottom:30px;margin-top:30px;opacity:.2;width:auto}:host button.c-btn-add{background-color:#fff;box-shadow:0 2px 4px rgba(47,49,54,.16)}:host mat-icon.c-icon{color:rgba(0,0,0,.54)!important}:host mat-icon.c-icon-add{color:#2962ff!important}:host .lds-ring{display:inline-block;height:40px;position:relative;width:40px}:host .lds-ring div{-webkit-animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top-color:#cef;box-sizing:border-box;display:block;height:32px;margin:4px;position:absolute;width:32px}:host .lds-ring div:first-child{-webkit-animation-delay:-.45s;animation-delay:-.45s}:host .lds-ring div:nth-child(2){-webkit-animation-delay:-.3s;animation-delay:-.3s}:host .lds-ring div:nth-child(3){-webkit-animation-delay:-.15s;animation-delay:-.15s}@-webkit-keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes lds-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:host ::ng-deep .mat-sort-header-content{display:block;text-align:left;width:100%}:host ::ng-deep .mat-select-arrow{color:#a6a6a6}:host ::ng-deep .mat-sort-header-disabled{background-image:none!important;cursor:default!important;padding-right:0!important}:host ::ng-deep .mat-sort-header-container{align-items:start!important}:host ::ng-deep .mat-sort-header-arrow{margin-top:4px!important}:host ::ng-deep .mat-sort-header{cursor:pointer}:host ::ng-deep .mat-sort-header[aria-sort]{background-position:center right 0;background-repeat:no-repeat;background-size:16px 16px;cursor:pointer;padding-right:24px}:host ::ng-deep .mat-sort-header[aria-sort=none]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=ascending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E\")}:host ::ng-deep .mat-sort-header[aria-sort=descending]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%237A7A7A' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E\")}"]}]}],"members":{"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":57,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/table","name":"MatTable","line":57,"character":13}]}]}],"popupConfiguration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":58,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵf"}]}]}],"sdScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/common","name":"SdScrollDirective","line":60,"character":13}]}]}],"quickAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":63,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/quick-action","name":"SdQuickAction","line":63,"character":13}]}]}],"tableFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":64,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵj"}]}]}],"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":122,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginator","line":122,"character":13}]}]}],"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":141,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSort","line":141,"character":13}]}]}],"sdSubInformation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":159,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵl"}]}]}],"sdCellDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":163,"character":3},"arguments":[{"__symbolic":"reference","name":"SdTabelCellDefDirective"}]}]}],"sdFooterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":169,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵm"}]}]}],"sdFilterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":176,"character":3},"arguments":[{"__symbolic":"reference","name":"SdTableFilterDefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":196,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵi"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":197,"character":5}}],null,null,null,null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":194,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/loading","name":"SdLoadingService","line":195,"character":28},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","module":"@sd-angular/core/export","name":"SdExportService","line":200,"character":27},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":201,"character":27},{"__symbolic":"reference","name":"ɵn"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SdTableQuickFilter":{"__symbolic":"class","members":{}},"SdTableFilterConfiguration":{"__symbolic":"interface"},"SdTableFilterValue":{"__symbolic":"interface"},"SdTableFilterRequest":{"__symbolic":"interface"},"SdTableOptionFilter":{"__symbolic":"interface"},"SdTableExternalFilter":{"__symbolic":"interface"},"SdTableFilterRegister":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-table-quick-action","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<sd-quick-action *ngIf=\"selectedTableItems | selectionActionFilter: tableOption?.selector?.actions as actions\"\r\n [isOpened]=\"actions?.length\">\r\n <div class=\"d-flex align-items-center\" sdMessage>\r\n <div class=\"c-bg-length\">\r\n <span class=\"c-length\">{{ selectedTableItems.length }}</span>\r\n </div>\r\n <div class=\"c-message\">{{ tableOption?.selector?.message || 'dữ liệu được chọn' }}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n <ng-container *ngFor=\"let action of actions\">\r\n <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" (action)=\"onClickAction(action)\"></sd-button>\r\n <ng-container *ngIf=\"action.children?.length\">\r\n <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"onClickAction(childAction)\"\r\n [disabled]=\"childAction.disabled\">\r\n <mat-icon *ngIf=\"childAction.icon\" [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n </mat-icon>\r\n <span> {{ childAction.title }}</span>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-container>\r\n </ng-container>\r\n <sd-button class=\"ml-5\" icon=\"close\" color=\"secondary\" type=\"outline\" size=\"sm\"\r\n (action)=\"onClear()\" width=\"35px\"></sd-button>\r\n </div>\r\n</sd-quick-action>","styles":[".c-bg-length{align-items:flex-start;background:#2962ff;border-radius:4px 0 0 4px;display:flex;flex-direction:column;height:48px;left:0;min-width:48px;padding:12px 8px;position:static;top:0;width:auto}.c-bg-length .c-length{color:#fff;font-size:16px;font-weight:500;height:24px;left:8px;line-height:24px;min-width:32px;text-align:center;top:12px;width:auto}.c-bg-length .c-length,.c-message{font-family:Roboto;font-style:normal;position:static}.c-message{color:#000;font-size:14px;font-weight:400;height:20px;left:0;line-height:20px;margin:0 0 0 16px;min-width:200px;top:6px}"]}]}],"members":{"tableOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"selectedTableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-desktop-cell","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":8,"character":19},"member":"OnPush"},"template":"<ng-container *ngIf=\"cellDef[column.field]\">\r\n <ng-container *ngTemplateOutlet=\"cellDef[column.field].templateRef; context: { item: item.data, column: column }\"> </ng-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"column.cellDef\">\r\n <ng-container *ngTemplateOutlet=\"column.cellDef; context: { item: item.data, column: column }\"> </ng-container>\r\n</ng-container>\r\n<sd-desktop-cell-view *ngIf=\"!cellDef[column.field] && !column.cellDef\" [column]=\"column\" [item]=\"item\"></sd-desktop-cell-view>\r\n"}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"cellDef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-desktop-cell-view","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<ng-container *sdLet=\"item.meta.display[column.field] as view\">\r\n <ng-container *ngIf=\"view.isHtml; else useValue\">\r\n <div\r\n *ngIf=\"view.click\"\r\n (click)=\"view.click()\"\r\n class=\"text-break cursor-pointer\"\r\n [matTooltip]=\"view.tooltip\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | safeHtml\"></div>\r\n <div\r\n *ngIf=\"!view.click\"\r\n class=\"text-break\"\r\n [matTooltip]=\"view.tooltip\"\r\n [style]=\"view.cellStyle\"\r\n [innerHTML]=\"view.data | safeHtml\"></div>\r\n </ng-container>\r\n <ng-template #useValue>\r\n <ng-container *ngIf=\"!!view.badge; else noBadge\">\r\n <sd-badge\r\n *ngIf=\"view.data\"\r\n [type]=\"view.badge.type\"\r\n [title]=\"view.data\"\r\n [color]=\"view.badge.color\"\r\n [icon]=\"view.badge.icon\"\r\n [tooltip]=\"view.tooltip\"\r\n (sdClick)=\"!!view.click && view.click()\"></sd-badge>\r\n </ng-container>\r\n <ng-template #noBadge>\r\n <div\r\n class=\"text-break\"\r\n [style]=\"view.cellStyle\"\r\n [matTooltip]=\"view.tooltip\">\r\n <a *ngIf=\"!!view.click\" href=\"javascript:;\" (click)=\"view.click()\">{{ view.data }}</a>\r\n <ng-container *ngIf=\"!view.click\">{{ view.data }} </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n</ng-container>\r\n","styles":[".text-black400{color:#757575}.c-color-success{color:#4caf50}.c-color-danger{color:#f82c13}.c-image{-o-object-fit:contain;margin:5px 0;object-fit:contain}.c-img{font-size:30px;opacity:.5}.c-img.pointer:hover{opacity:.9}"]}]}],"members":{"column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"sd-desktop-command","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":8,"character":19},"member":"OnPush"},"template":"<ng-container *ngIf=\"item | commandFilter:commands | async; $implicit as filteredCommands\">\r\n <ng-container *ngFor=\"let command of filteredCommands\">\r\n <ng-container *ngIf=\"command?.click; else elseChildren\">\r\n <button (click)=\"command.click(item.data)\" [matTooltip]=\"command | commandTitle:item\" aria-hidden=\"true\"\r\n [disabled]=\"item | commandDisable:command\" mat-icon-button>\r\n <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}</mat-icon>\r\n </button>\r\n </ng-container>\r\n <ng-template #elseChildren>\r\n <button [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button>\r\n <mat-icon *ngIf=\"command?.icon\" class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}\r\n </mat-icon>\r\n <mat-icon *ngIf=\"!command?.icon\" class=\"c-icon\">more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\">\r\n <span>\r\n <button *ngFor=\"let childCommand of command.children\" mat-menu-item (click)=\"childCommand.click(item.data)\"\r\n [disabled]=\"item | commandDisable:childCommand\">\r\n <ng-container *ngIf=\"!childCommand.htmlTemplate\">\r\n <mat-icon [fontSet]=\"command.fontSet\" class=\"c-icon\">{{childCommand | commandIcon:item}}\r\n </mat-icon>\r\n <span> {{childCommand | commandTitle:item}}</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"childCommand.htmlTemplate\">\r\n <div [innerHTML]=\"childCommand.htmlTemplate(item.data)\"></div>\r\n </ng-container>\r\n </button>\r\n </span>\r\n </mat-menu>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n","styles":[":host{align-items:center;display:flex}mat-icon.c-icon{color:rgba(0,0,0,.54)!important}"]}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"commands":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"sd-column-inline-filter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<div class=\"d-flex c-inline-column align-items-end\">\r\n <ng-container *ngIf=\"\r\n column.type === 'string' ||\r\n column.type === 'number' ||\r\n column.type === 'bool' ||\r\n column.type === 'values' ||\r\n column.type === 'lazy-values' ||\r\n column.type === 'date' ||\r\n column.type === 'datetime' ||\r\n column.type === 'time';\r\n else noFilter\r\n \">\r\n <div class=\"d-flex align-items-center\" *ngIf=\"operators.length\">\r\n <!-- Only number column icon broken. add mb when not default symbol -->\r\n <sd-button class=\"{{ (column.type === 'number' && inlineSymbol !== 'filter_alt') ? 'mb-4 mr-2 ' :'mr-2 '}}\"\r\n fontSet=\"material-symbols-outlined\" [icon]=\"inlineSymbol\" size=\"sm\" [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n </sd-button>\r\n <mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n <mat-icon fontSet=\"material-symbols-outlined\" class=\"{{column.type === 'number' ? 'mb-8 ':''}}\">{{\r\n operator.symbol }}</mat-icon>\r\n <span> {{ operator.display }}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <sd-input *ngIf=\"column.type === 'string'\" style=\"flex: 1\" size=\"sm\" type=\"text\"\r\n [(model)]=\"columnFilter[column.field]\" (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input>\r\n <sd-input-number *ngIf=\"column.type === 'number'\" style=\"flex: 1\" size=\"sm\" [(model)]=\"columnFilter[column.field]\"\r\n (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-input-number>\r\n <sd-select *ngIf=\"column.type === 'bool'\" style=\"flex: 1\" size=\"sm\" [items]=\"[\r\n { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n <ng-template sdSelectDisplayDef let-item=\"item\">\r\n <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\">\r\n </sd-badge>\r\n <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\">\r\n </sd-badge>\r\n </ng-template>\r\n </sd-select>\r\n <ng-container *ngIf=\"column.type === 'values'\">\r\n <sd-select *ngIf=\"column?.option?.selection !== 'AUTOCOMPLETE'\" style=\"flex: 1\" size=\"sm\" [items]=\"items\"\r\n [valueField]=\"column.option.valueField\" [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\"\r\n [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"column?.option?.selection === 'AUTOCOMPLETE'\" style=\"flex: 1\" size=\"sm\" [items]=\"items\"\r\n [valueField]=\"column.option.valueField\" [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n </ng-container>\r\n <ng-container *ngIf=\"column.type === 'lazy-values'\">\r\n <sd-select *ngIf=\"column.option?.selection === 'MULTIPLE'\" style=\"flex: 1\" size=\"sm\" [items]=\"items\"\r\n [valueField]=\"column.option.valueField\" [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\"\r\n multiple filtered>\r\n </sd-select>\r\n <sd-autocomplete *ngIf=\"!column.option?.selection\" style=\"flex: 1\" size=\"sm\" [items]=\"items\"\r\n [valueField]=\"column.option.valueField\" [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-autocomplete>\r\n </ng-container>\r\n <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n <sd-date-range *ngIf=\"!column.filter?.useFilterDate\" style=\"flex: 1\" size=\"sm\"\r\n [(from)]=\"columnFilter[column.field].from\" [(to)]=\"columnFilter[column.field].to\" (sdChange)=\"onFilterChange()\"\r\n [disabled]=\"column.filter?.disabled\">\r\n </sd-date-range>\r\n <sd-date-time *ngIf=\"column.filter?.useFilterDate\" style=\"flex: 1\" type=\"date\" size=\"sm\"\r\n [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n </sd-date-time>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #noFilter>\r\n <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n </ng-template>\r\n</div>","styles":[":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]}]}],"members":{"_value":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3},"arguments":["value"]}]}],"_inlineOperator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3},"arguments":["inlineOperator"]}]}],"inlineOperatorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"operatorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"_columnFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3},"arguments":["columnFilter"]}]}],"cacheValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"_column":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3},"arguments":["column"]}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":4}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":58,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"sd-popup-configuration","template":"<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n <sd-modal-body *ngIf=\"configuration\">\r\n <div class=\"c-container\">\r\n <div class=\"c-table\" style=\"max-height: 70vh\">\r\n <table\r\n #table\r\n mat-table\r\n [dataSource]=\"configuration.columns\"\r\n cdkDropList\r\n [cdkDropListData]=\"configuration.columns\"\r\n (cdkDropListDropped)=\"dropTable($event)\">\r\n >\r\n <ng-container matColumnDef=\"stt\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n </svg>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"title\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"width\">\r\n <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"invisible\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"fixed\">\r\n <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n cdkDrag\r\n [cdkDragData]=\"row\"\r\n cdkDragLockAxis=\"y\"\r\n [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n </table>\r\n </div>\r\n </div>\r\n </sd-modal-body>\r\n <sd-modal-footer>\r\n <sd-button class=\"mr-8\" (action)=\"onReset()\" title=\"Mặc định\" color=\"info\" size=\"sm\"> </sd-button>\r\n <sd-button (action)=\"onSave()\" title=\"Lưu\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>\r\n","styles":[".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]}]}],"members":{"tableOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":18,"character":3},"arguments":["modal"]}]}],"table":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":19,"character":3},"arguments":["table"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":29,"character":17},{"__symbolic":"reference","module":"@sd-angular/core/notify","name":"SdNotifyService","line":30,"character":27},{"__symbolic":"reference","name":"ɵg"}]}],"ngOnInit":[{"__symbolic":"method"}],"mouseUp":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":35,"character":3},"arguments":["window:mouseup",["$event"]]}]}],"dropTable":[{"__symbolic":"method"}],"handleMouseDown":[{"__symbolic":"method"}],"handleMouseUp":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":22,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵi"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":22,"character":27}}]],"parameters":[{"__symbolic":"reference","module":"@sd-angular/core/setting","name":"SdSettingService","line":21,"character":28},{"__symbolic":"reference","name":"ɵh"}]}]}},"ɵh":{"__symbolic":"interface"},"ɵi":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":30,"character":32},"arguments":["sd-table.configuration"]},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"sd-table-filter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":19},"member":"OnPush"},"template":"<ng-container *ngIf=\"!filter?.disabled\">\r\n <ng-container *ngIf=\"filter?.enableCollapse; else noCollapse\">\r\n <sd-group class=\"p-12\" [isExpanded]=\"false\" title=\"Tìm kiếm\" expandable>\r\n <div sdGroupBody>\r\n <ng-container *ngTemplateOutlet=\"noCollapse\"></ng-container>\r\n </div>\r\n </sd-group>\r\n </ng-container>\r\n <ng-template #noCollapse>\r\n <div *ngIf=\"!isMobileOrTablet && (externalFilters?.length || filterDefs?.length)\" class=\"row mx-0 mb-8\">\r\n <ng-container *ngIf=\"filter?.sorts?.length\">\r\n <ng-container *ngFor=\"let field of filter?.sorts\">\r\n <ng-container *ngIf=\"externalFilters?.length\">\r\n <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal : field\">\r\n <ng-container *ngTemplateOutlet=\"filterExternal; context: { item: item }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngFor=\"let item of filterDefs\">\r\n <div *ngIf=\"inlineFilterDef[item.sdTableFilterDef] && item.sdTableFilterDef === field\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <ng-container *ngTemplateOutlet=\"item.templateRef; context: { filterDef: filterDef, isInline: true }\"> </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n <ng-container *ngIf=\"externalFilters?.length\">\r\n <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n <ng-container *ngTemplateOutlet=\"filterExternal; context: { item: item }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngFor=\"let item of filterDefs\">\r\n <div *ngIf=\"inlineFilterDef[item.sdTableFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <ng-container *ngTemplateOutlet=\"item.templateRef; context: { filterDef: filterDef, isInline: true }\"> </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #filterExternal let-item=\"item\">\r\n <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n <sd-input\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'string'\"\r\n type=\"text\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (keyupEnter)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-input>\r\n <sd-input-number\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'number'\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (keyupEnter)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-input-number>\r\n <sd-select\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'bool'\"\r\n [items]=\"[\r\n { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-select>\r\n <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n [selectAll]=\"item.option.selectAll\"\r\n appearance=\"outline\"\r\n multiple>\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-autocomplete>\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n filtered\r\n appearance=\"outline\"\r\n multiple>\r\n </sd-select>\r\n <sd-select\r\n *ngIf=\"!item.option?.selection\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"item.type === 'lazy-values' && item.option\">\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\"\r\n multiple\r\n filtered>\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"!item.option?.selection\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-autocomplete>\r\n </ng-container>\r\n <sd-date-time\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n [type]=\"item.type\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-date-time>\r\n <sd-date-range\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n [(from)]=\"externalFilter[item.field].from\"\r\n [(to)]=\"externalFilter[item.field].to\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n (sdChange)=\"onFilter(item)\"\r\n appearance=\"outline\">\r\n </sd-date-range>\r\n <ng-container *ngIf=\"item.type === 'custom' && item.filterDef\">\r\n <ng-container *ngTemplateOutlet=\"item.filterDef; context: { externalFilter: externalFilter }\"> </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n <sd-popup-filter [filterRegister]=\"filterRegister\" [columns]=\"columns\" [externalFilters]=\"externalFilters\" [filterDefs]=\"filterDefs\">\r\n </sd-popup-filter>\r\n </ng-template>\r\n</ng-container>\r\n","styles":[":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]}]}],"members":{"popupFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵk"}]}]}],"_filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["filter"]}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"_externalFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3},"arguments":["externalFilters"]}]}],"filterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"_filterRegister":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3},"arguments":["filterRegister"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":58,"character":27},{"__symbolic":"reference","module":"ngx-device-detector","name":"DeviceDetectorService","line":58,"character":69}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"sd-popup-filter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"template":"<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\">\r\n <sd-modal-body class=\"c-popup-filter\">\r\n <ng-container *ngFor=\"let column of columns | sdFilterColumn\">\r\n <div class=\"d-flex align-items-baseline\">\r\n <ng-container>\r\n <div *sdDesktop class=\"c-checkable\">\r\n <mat-slide-toggle [(ngModel)]=\"inlineColumn[column.field]\" color=\"primary\"></mat-slide-toggle>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input\r\n *ngIf=\"column.type === 'string'\"\r\n [label]=\"column.title\"\r\n type=\"text\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n appearance=\"outline\">\r\n </sd-input>\r\n <sd-input\r\n *ngIf=\"column.type === 'number'\"\r\n [label]=\"column.title\"\r\n type=\" number\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n appearance=\"outline\">\r\n </sd-input>\r\n <sd-select\r\n *ngIf=\"column.type === 'bool'\"\r\n [label]=\"column.title\"\r\n [items]=\"[\r\n { value: '1', display: column.trueValue || 'True' },\r\n { value: '0', display: column.falseValue || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n appearance=\"outline\">\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"column.type === 'values' || column.type === 'lazy-values'\"\r\n [label]=\"column.title\"\r\n [items]=\"column.option.items\"\r\n [valueField]=\"column.option.valueField\"\r\n [displayField]=\"column.option.displayField\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n appearance=\"outline\">\r\n </sd-autocomplete>\r\n <sd-date-time\r\n *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\"\r\n [label]=\"column.title\"\r\n [(model)]=\"columnFilter[column.field]\"\r\n type=\"date\"\r\n appearance=\"outline\">\r\n </sd-date-time>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n <div class=\"d-flex align-items-baseline\">\r\n <ng-container>\r\n <div *sdDesktop class=\"c-checkable\">\r\n <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <sd-input\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'string'\"\r\n type=\"text\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n appearance=\"outline\">\r\n </sd-input>\r\n <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n </sd-input-number>\r\n <sd-select\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'bool'\"\r\n [items]=\"[\r\n { value: '1', display: item.option?.displayOnTrue || 'True' },\r\n { value: '0', display: item.option?.displayOnFalse || 'False' }\r\n ]\"\r\n valueField=\"value\"\r\n displayField=\"display\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n appearance=\"outline\">\r\n </sd-select>\r\n <ng-container *ngIf=\"item.type === 'values'\">\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n appearance=\"outline\"\r\n multiple>\r\n </sd-select>\r\n <sd-autocomplete\r\n *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n appearance=\"outline\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-autocomplete>\r\n <sd-select\r\n *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n [label]=\"item.title\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n appearance=\"outline\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n filtered=\"true\"\r\n multiple>\r\n </sd-select>\r\n <sd-select\r\n *ngIf=\"!item.option?.selection\"\r\n [label]=\"item.title\"\r\n [items]=\"item.values\"\r\n [items]=\"item.option.items\"\r\n [valueField]=\"item.option.valueField\"\r\n [displayField]=\"item.option.displayField\"\r\n appearance=\"outline\"\r\n [(model)]=\"externalFilter[item.field]\">\r\n </sd-select>\r\n </ng-container>\r\n <sd-date-time\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'date' || item.type === 'datetime'\"\r\n [(model)]=\"externalFilter[item.field]\"\r\n [type]=\"item.type\"\r\n appearance=\"outline\">\r\n </sd-date-time>\r\n <sd-date-range\r\n [label]=\"item.title\"\r\n *ngIf=\"item.type === 'daterange' && externalFilter[item.field]\"\r\n [(from)]=\"externalFilter[item.field].from\"\r\n [(to)]=\"externalFilter[item.field].to\"\r\n [min]=\"item.minDate\"\r\n [max]=\"item.maxDate\"\r\n appearance=\"outline\">\r\n </sd-date-range>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let filter of filterDefs\">\r\n <div class=\"d-flex align-items-baseline\">\r\n <ng-container>\r\n <div *sdDesktop class=\"c-checkable\">\r\n <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdTableFilterDef]\" color=\"primary\"> </mat-slide-toggle>\r\n </div>\r\n </ng-container>\r\n <div class=\"c-filterable\">\r\n <ng-container *ngTemplateOutlet=\"filter.templateRef; context: { filterDef: filterDef }\"> </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </sd-modal-body>\r\n <sd-modal-footer *sdDesktop>\r\n <sd-button class=\"mr-auto\" (action)=\"onClear()\" title=\"Mặc định\" size=\"sm\" type=\"link\"> </sd-button>\r\n <sd-button (action)=\"onApply()\" title=\"Đồng ý\" color=\"primary\" size=\"sm\" type=\"fill\"></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()\" title=\"Mặc định\" width=\"100%\" size=\"sm\" type=\"link\"></sd-button>\r\n <sd-button\r\n style=\"flex: 1; padding-left: 5px\"\r\n (action)=\"onApply()\"\r\n title=\"Đồng ý\"\r\n color=\"primary\"\r\n width=\"100%\"\r\n size=\"sm\"\r\n type=\"fill\"></sd-button>\r\n </sd-modal-footer>\r\n</sd-modal>\r\n","styles":[".c-checkable{width:50px}.c-filterable{flex:1}::ng-deep sd-modal-body.c-popup-filter .mat-form-field-wrapper{padding-bottom:0}"]}]}],"members":{"modal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":14,"character":3},"arguments":[{"__symbolic":"reference","module":"@sd-angular/core/modal","name":"SdModal","line":14,"character":13}]}]}],"filterRegister":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"externalFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"filterDefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":29,"character":29}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onClear":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdTableExpandDef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[sdTableFooterDef]"}]}],"members":{"sdTableFooterDef":[{"__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"}]}]}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":14,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@sd-angular/core/setting","name":"SdSettingService","line":19,"character":38}]}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"commandFilter"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"commandDisable"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"commandIcon"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"commandTitle"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"columnTooltip"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transform":[{"__symbolic":"method"}]}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"sdFilterColumn"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"sdFilterExternal"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"selectionActionFilter"}]}],"members":{}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":5,"character":1},"arguments":[{"name":"selectionVisible"}]}],"members":{}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"selectionDisable"}]}],"members":{}},"ɵy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"selectionVisibleSelectAll"}]}],"members":{}},"ɵz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"sdGroup"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"SdTabelCellDefDirective":"./src/lib/directives/sd-table-cell-def.directive","SdTableFilterDefDirective":"./src/lib/directives/sd-table-filter-def.directive","MatPaginatorIntlCro":"./src/lib/table.module","SdTableModule":"./src/lib/table.module","SdTable":"./src/lib/table.component","SdTableQuickFilter":"./src/lib/services/table-filter/table-filter.model","SdTableFilterConfiguration":"./src/lib/services/table-filter/table-filter.model","SdTableFilterValue":"./src/lib/services/table-filter/table-filter.model","SdTableFilterRequest":"./src/lib/services/table-filter/table-filter.model","SdTableOptionFilter":"./src/lib/services/table-filter/table-filter.model","SdTableExternalFilter":"./src/lib/services/table-filter/table-filter.model","SdTableFilterRegister":"./src/lib/services/table-filter/table-filter.model","ɵa":"./src/lib/components/quick-action/quick-action.component","ɵb":"./src/lib/components/desktop-cell/desktop-cell.component","ɵc":"./src/lib/components/desktop-cell-view/desktop-cell-view.component","ɵd":"./src/lib/components/desktop-command/desktop-command.component","ɵe":"./src/lib/components/column-inline-filter/column-inline-filter.component","ɵf":"./src/lib/components/popup-configuration/popup-configuration.component","ɵg":"./src/lib/services/table-configuration.service","ɵh":"./src/lib/models/table-configuration.model","ɵi":"./src/lib/models/table-configuration.model","ɵj":"./src/lib/components/table-filter/table-filter.component","ɵk":"./src/lib/components/popup-filter/popup-filter.component","ɵl":"./src/lib/directives/sd-table-expand-def.directive","ɵm":"./src/lib/directives/sd-table-footer-def.directive","ɵn":"./src/lib/services/table-filter/table-filter.service","ɵo":"./src/lib/pipes/command-filter.pipe","ɵp":"./src/lib/pipes/command-disable.pipe","ɵq":"./src/lib/pipes/command-icon.pipe","ɵr":"./src/lib/pipes/command-title.pipe","ɵs":"./src/lib/pipes/column-tooltip.pipe","ɵt":"./src/lib/pipes/filter-column.pipe","ɵu":"./src/lib/pipes/filter-external.pipe","ɵv":"./src/lib/pipes/selection-action-filter.pipe","ɵw":"./src/lib/pipes/selection-visible.pipe","ɵx":"./src/lib/pipes/selection-disable.pipe","ɵy":"./src/lib/pipes/selection-visible-select-all.pipe","ɵz":"./src/lib/pipes/sd-group.pipe"},"importAs":"@sd-angular/core/table"}
|