flx-ui-datatable/flx-ui-datatable.metadata.json

## AUTHOR Felix Kakra Acheampong from (`Orcons Systems`) Ghana

{"__symbolic":"module","version":4,"metadata":{"FlxUiDataTable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ChangeData":[{"__symbolic":"method"}],"reloadData":[{"__symbolic":"method"}],"abortRequest":[{"__symbolic":"method"}]}},"FlxUiDatatableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":19,"character":17},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":19,"character":37},{"__symbolic":"reference","module":"@angular/http","name":"HttpModule","line":19,"character":49},{"__symbolic":"reference","module":"ngx-perfect-scrollbar","name":"PerfectScrollbarModule","line":19,"character":60}],"declarations":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"}],"exports":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵd"}],"providers":[{"__symbolic":"reference","name":"ɵa"},{"provide":{"__symbolic":"reference","module":"ngx-perfect-scrollbar","name":"PERFECT_SCROLLBAR_CONFIG","line":27,"character":15},"useValue":{"suppressScrollX":true}}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/http","name":"Http","line":30,"character":27}]}],"setLazyloadingConfig":[{"__symbolic":"method"}],"getData":[{"__symbolic":"method"}],"postData":[{"__symbolic":"method"}],"setDataUrl":[{"__symbolic":"method"}],"getDataUrl":[{"__symbolic":"method"}],"chageDataTable":[{"__symbolic":"method"}],"createPagination":[{"__symbolic":"method"}],"isLazyLoadingEnabled":[{"__symbolic":"method"}],"loadFlxDataTableData":[{"__symbolic":"method"}],"cancelLoading":[{"__symbolic":"method"}],"setDataSrcKey":[{"__symbolic":"method"}],"getDataLength":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"flx-ui-datatable","template":"<div class=\"col-md-12 flx-ui-datatable-main {{ classes?.maincontainer }}\">\n    <div id=\"export_loading\" class=\"col-md-12 text-center\" style=\"display: none;margin-bottom:0.5em;color:#dddddd;font-size:13px;font-weight:bold;\">Exporting...</div>\n    <div class=\"col-md-12 flx-ui-datatable-header\">\n        <div class=\"container-fluid\">\n            <div class=\"row\">\n                <div class=\"col-xs-3 col-sm-3 pagination-select col-md-2\" style=\"position:relative;z-index: 1;\">\n                    <select class=\"form-control rmsh rmrd {{ classes?.paginationselect }}\" (change)=\"paginateDatatable($event?.target?.value)\">\n                        <option *ngFor=\"let paging of service?.pagination\" [value]=\"paging?.value\">{{ paging?.label }}</option>\n                    </select>\n                </div>\n                <div class=\"col-xs-5 col-sm-5 col-md-2 text-center flx-datatable-pagination rmpd\" style=\"position:relative;z-index: 2;\">\n                    <button mat-icon-button [ngClass]=\"{'flx-pagination-end': disablePrevtButton()}\" (click)=\"nextPrevItem('prev')\" [disabled]=\"disablePrevtButton()\" class=\"flx-ui-datatable-pagination-buttons {{ classes?.paginationButton }}\"><span class=\"fa fa-angle-double-left fa-1x\"></span> <span class=\"flx-datatable-tooltip-prev\" [ngClass]=\"{'flx-pagination-end': disablePrevtButton()}\">Previous</span> </button>\n                        <span *ngIf=\"!isSearching;else searching\">{{ service?.dataOffset | ceil: limit }} / {{ service?.totalItems | ceil: limit }}</span>\n                        <ng-template #searching>\n                            \n                        </ng-template>\n                    <button mat-icon-button [ngClass]=\"{'flx-pagination-end': disableNextButton()}\" (click)=\"nextPrevItem('next')\" [disabled]=\"disableNextButton()\" class=\"flx-ui-datatable-pagination-buttons {{ classes?.paginationButton }}\"><span class=\"fa fa-angle-double-right fa-1x\"></span> <span class=\"flx-datatable-tooltip-next\" [ngClass]=\"{'flx-pagination-end': disableNextButton()}\">Next</span></button>\n                </div>\n                <div [class]=\"'search-bar '+getSearchColumns()\">\n                    <input type=\"text\" *ngIf=\"!isLazyloadingEnabled()\" [style.background]=\"searchBar?.background\" [style.color]=\"searchBar?.textColor\" [ngStyle]=\"{border:searchBar?.borderSize +' solid '+ searchBar?.borderColor} \" (keyup)=\"filterData($event?.target?.value)\" class=\"form-control rmsh rmrd customclass\" [placeholder]=\"searchPlaceholder\">\n                    <form (ngSubmit)=\"searchDataInApi(srch?.value,srch)\" #srch=\"ngForm\" *ngIf=\"isLazyloadingEnabled()\">\n                        <div class=\"input-group\">\n                            <input type=\"text\" required name=\"searchString\" ngModel [style.background]=\"searchBar?.background\" [style.color]=\"searchBar?.textColor\" [ngStyle]=\"{border:searchBar?.borderSize +' solid '+ searchBar?.borderColor} \" class=\"form-control rmsh rmrd {{ classes?.searchbar }}\" [placeholder]=\"searchPlaceholder\">\n                            <span class=\"input-group-addon\">\n                                <button [disabled]=\"!srch?.valid\" type=\"submit\" class=\"btn btn-default btn-clear btn-md\">\n                                    <i class=\"fa fa-search\"></i>\n                                </button>\n                            </span>\n                        </div>\n                    </form>\n                </div>\n                <div class=\"col-md-1 text-right rmpd\" *ngIf=\"hasAddButton\">\n                    <button (click)=\"addButtonClick()\" class=\"{{ classes?.addButton }}\" [style.background]=\"addButton?.background\" [style.borderColor]=\"addButton?.background\" [style.color]=\"addButton?.textColor\"><span class=\"fa fa-plus\"></span> Add</button>\n                </div>\n                <div class=\"col-md-1 text-right rmpd export-cnt\" *ngIf=\"enableDataExports\">\n                    <div class=\"dropdown\">\n                        <button class=\"btn btn-default {{ classes?.exportButton }} dropdown-toggle\" type=\"button\" data-toggle=\"dropdown\">\n                            <i class=\"fa fa-angle-down\"></i>\n                        </button>\n                        <ul class=\"dropdown-menu dropdown-menu-export {{ classes?.exportDropdown }}\">\n                            <li class=\"dropdown-header\">{{ dataExportsConfig?.title }}. <input type=\"checkbox\" (change)=\"checkToExportOption($event?.target?.checked)\" style=\"position: relative;top:0.3em;\"> <sup style=\"font-size:10px;color:#999;\"> All</sup></li> \n                            <li class=\"divider\"></li>\n                            <li class=\"dropdown-submenu\" *ngFor=\"let export of dataExportsConfig?.exportsTo\" (click)=\"exportDocumentsAs(export)\">\n                                <a href=\"javascript:void(0)\" class=\"btn btn-default btn-sm form-control\" *ngIf=\"export=='print'\"><i class=\"glyphicon glyphicon-print\"></i> Print</a>\n                                <a href=\"javascript:void(0)\" class=\"btn btn-default btn-sm form-control\" *ngIf=\"export=='pdf'\" style=\"color:#ff0000\"><i class=\"glyphicon glyphicon-file\"></i> PDF</a>\n                                <a href=\"javascript:void(0)\" class=\"btn btn-default btn-sm form-control\" *ngIf=\"export=='excel'\" style=\"color:#009900;\"><i class=\"glyphicon glyphicon-file\"></i> Excel</a>            \n                                <a href=\"javascript:void(0)\" class=\"btn btn-default btn-sm form-control\" *ngIf=\"export=='word'\" style=\"color:#335599;\"><i class=\"glyphicon glyphicon-file\"></i> Word</a>                        \n                            </li>\n                            <li class=\"divider\"></li>\n                            <li class=\"dropdown-header\">\n                                <span  *ngIf=\"!isExportAll\">{{ (displayData | async)?.length }}</span>\n                                <span  *ngIf=\"isExportAll\">{{ (service?.flxData | async)?.length }}</span> \n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"container-fluid\">\n        <div class=\"row\">\n            <div class=\"col-md-12 rmpd table-responsive flx-tabl-container\">\n                <table class=\"table {{ classes?.tableType }} th-table\">\n                    <thead class=\"{{ classes?.tableHeader }} flx-table-thead\">\n                        <tr>\n                            <!-- Actions buttons header left before numbers -->\n                            <th *ngIf=\"hasActionButtons && (actionButtonsConfig?.position=='left' && actionButtonsConfig?.beforeNumbers)\">{{ actionHeader }} \n                                <input type=\"checkbox\" [checked]=\"service?.multipleDeletion?.length>0\" (change)=\"addRemove($event?.target?.checked)\" *ngIf=\"enableMultipleSelection\">\n                                <button class=\"btn btn-danger btn-xs flx-multiple-deletion-button\" *ngIf=\"enableMultipleSelection && service?.multipleDeletion?.length>0\" (click)=\"confirmDelete()\"><span [class]=\"multipleSelectButton?.icon\"></span> {{ multipleSelectButton?.text }}</button>\n                            </th>\n\n\n                            <th *ngIf=\"!hideNumbers\">N<sup><u>o</u></sup></th>\n\n                            <!-- Actions buttons header left after numbers -->\n                            <th *ngIf=\"hasActionButtons && (actionButtonsConfig?.position=='left' && !actionButtonsConfig?.beforeNumbers)\">{{ actionHeader }} \n                                <input type=\"checkbox\" [checked]=\"service?.multipleDeletion?.length>0\" (change)=\"addRemove($event?.target?.checked)\" *ngIf=\"enableMultipleSelection\">\n                                <button class=\"btn btn-danger btn-xs flx-multiple-deletion-button\" *ngIf=\"enableMultipleSelection && service?.multipleDeletion?.length>0\" (click)=\"confirmDelete()\"><span [class]=\"multipleSelectButton?.icon\"></span> {{ multipleSelectButton?.text }}</button>\n                            </th>\n\n\n                            <th *ngFor=\"let header of headers\">{{ header }}</th>\n\n                            <!-- Actions buttons header right -->\n                            <th *ngIf=\"hasActionButtons  && (actionButtonsConfig?.position=='right')\">{{ actionHeader }} \n                                <input type=\"checkbox\" [checked]=\"service?.multipleDeletion?.length>0\" (change)=\"addRemove($event?.target?.checked)\" *ngIf=\"enableMultipleSelection\">\n                                <button class=\"btn btn-danger btn-xs flx-multiple-deletion-button\" *ngIf=\"enableMultipleSelection && service?.multipleDeletion?.length>0\" (click)=\"confirmDelete()\"><span [class]=\"multipleSelectButton?.icon\"></span> {{ multipleSelectButton?.text }}</button>\n                            </th>\n                        </tr>\n                    </thead>\n                </table>\n                <perfect-scrollbar class=\"data-scroll-content {{ classes?.dataScrollContent }}\">\n                    <table class=\"table {{ classes?.tableType }} flx-table-data\">                        \n                        <tbody class=\"flxdatatablebodyscrollbar\">\n                            <tr *ngIf=\"!service?.loadFinish\">                    \n                                <td colspan=\"20\" class=\"text-center\">\n                                    <img *ngIf=\"spinnerSrc\" [class]=\"classes?.spinner\" [src]=\"spinnerSrc\" style=\"margin-top:1em;margin-bottom:1em;\">\n                                </td>\n                            </tr>\n                            <tr class=\"flxuidatatablerow\" id=\"flxdatatable_singlerow\" *ngFor=\"let data of displayData | async;let i=index\">\n                                \n                                <!-- Buttons Left Before Numbers -->\n                                <td class=\"table-buttons\" *ngIf=\"hasActionButtons && (actionButtonsConfig?.position=='left' && actionButtonsConfig?.beforeNumbers)\" scope=\"row\">\n                                    <span *ngFor=\"let aButton of actionButtons;let buttonIndex=index\">\n                                        <button type=\"button\" (click)=\"actionButtonClicked(i,buttonIndex)\" class=\"btn {{ aButton?.class }}\">\n                                            <div class=\"toltip\" class=\"flx-tooltip\" [ngClass]=\"{'flx-tooltip-left':aButton?.tooltipPosition=='left','flx-tooltip-bottom':aButton?.tooltipPosition=='bottom','flx-tooltip-right':aButton?.tooltipPosition=='right'}\" *ngIf=\"aButton?.tooltip\">{{ aButton?.tooltip }}</div>\n                                            <span class=\"action-button-icon-left\" [class]=\"aButton?.icon\" *ngIf=\"!aButton?.iconPosition || aButton?.iconPosition!='right'\"></span>\n                                            <span class=\"button-text\"> {{ aButton?.text }} </span>\n                                            <span [class]=\"aButton?.icon\" *ngIf=\"aButton?.iconPosition=='right'\"></span>\n                                        </button>\n                                    </span> \n                                    <input type=\"checkbox\" checked (change)=\"addRemoveDeleteItem(data[multipleSelectKey],i,$event?.target?.checked)\" *ngIf=\"enableMultipleSelection && service?.multipleDeletion?.length>0\">\n                                </td>\n                                \n                                <!-- Numbers -->\n                                <td class=\"{{ classes?.tableData }}\" *ngIf=\"!hideNumbers\" style=\"color: #999;\">{{ offset+i }}</td>\n                                \n                                <!-- Buttons Left After Numbers -->\n                                <td class=\"table-buttons\" *ngIf=\"hasActionButtons && (actionButtonsConfig?.position=='left' && !actionButtonsConfig?.beforeNumbers)\" scope=\"row\">\n                                    <span *ngFor=\"let aButton of actionButtons;let buttonIndex=index\">\n                                        <button type=\"button\" (click)=\"actionButtonClicked(i,buttonIndex)\" class=\"btn {{ aButton?.class }}\">\n                                            <div class=\"toltip\" class=\"flx-tooltip\" [ngClass]=\"{'flx-tooltip-left':aButton?.tooltipPosition=='left','flx-tooltip-bottom':aButton?.tooltipPosition=='bottom','flx-tooltip-right':aButton?.tooltipPosition=='right'}\" *ngIf=\"aButton?.tooltip\">{{ aButton?.tooltip }}</div>\n                                            <span class=\"action-button-icon-left\" [class]=\"aButton?.icon\" *ngIf=\"!aButton?.iconPosition || aButton?.iconPosition!='right'\"></span>\n                                            <span class=\"button-text\"> {{ aButton?.text }} </span>\n                                            <span [class]=\"aButton?.icon\" *ngIf=\"aButton?.iconPosition=='right'\"></span>\n                                        </button>\n                                    </span> \n                                    <input type=\"checkbox\" checked (change)=\"addRemoveDeleteItem(data[multipleSelectKey],i,$event?.target?.checked)\" *ngIf=\"enableMultipleSelection && service?.multipleDeletion?.length>0\">\n                                </td>\n                                \n                                <!-- Main -->\n                                <td class=\"{{ classes?.tableData }}\" *ngFor=\"let dataKey of dataKeys;let x=index\">\n                                    <img *ngIf=\"hasImageEmbeded() && x==embedPictures?.index; else nopicture\" [class]=\"'img-fall-back ' +embedPictures?.class\" [src]=\"embedPictures?.rootFolder+data[dataKey]\" [flx-ui-datatable-img-fallback]=\"embedPictures?.fallbackUrl\" >\n                                    <ng-template #nopicture>\n                                        <section *ngIf=\"textSubstring?.atIndexes && (textSubstring?.atIndexes | haslimittext:x);else nolimittext\">\n                                            {{ textSubstring | limittext: data[dataKey] }}\n                                        </section>\n                                        <ng-template #nolimittext>\n                                            <span>{{ data[dataKey] }}</span>\n                                        </ng-template>\n                                    </ng-template> \n                                </td>\n                                <!-- Buttons -->\n                                <td class=\"table-buttons\" *ngIf=\"hasActionButtons && actionButtonsConfig?.position!='left'\">\n                                    <span *ngFor=\"let aButton of actionButtons;let buttonIndex=index\">\n                                        <button type=\"button\" (click)=\"actionButtonClicked(i,buttonIndex)\" class=\"btn {{ aButton?.class }}\">\n                                            <div class=\"toltip\" class=\"flx-tooltip\" [ngClass]=\"{'flx-tooltip-left':aButton?.tooltipPosition=='left','flx-tooltip-bottom':aButton?.tooltipPosition=='bottom','flx-tooltip-right':aButton?.tooltipPosition=='right'}\" *ngIf=\"aButton?.tooltip\">{{ aButton?.tooltip }}</div>\n                                            <span class=\"action-button-icon-left\" [class]=\"aButton?.icon\" *ngIf=\"!aButton?.iconPosition || aButton?.iconPosition!='right'\"></span>\n                                            <span class=\"button-text\"> {{ aButton?.text }} </span>\n                                            <span [class]=\"aButton?.icon\" *ngIf=\"aButton?.iconPosition=='right'\"></span>\n                                        </button>\n                                    </span> \n                                    <input type=\"checkbox\" checked (change)=\"addRemoveDeleteItem(data[multipleSelectKey],i,$event?.target?.checked)\" *ngIf=\"enableMultipleSelection && service?.multipleDeletion?.length>0\">\n                                </td>\n                            </tr>\n                            <tr *ngIf=\"tData?.length<1\">\n                                <td colspan=\"10\" class=\"text-center\" *ngIf=\"service?.loadFinish\">\n                                    <span style=\"color:#ff0000;font-size:13px;\">No data found</span> <br>\n                                    <button type=\"button\" style=\"margin-top:1em;\" (click)=\"reload()\" class=\"btn btn-default {{ classes?.reloadbutton }}\" color=\"primary\"><span class=\"fa fa-refresh\"></span> Reload</button>\n                                </td>\n                            </tr>\n                        </tbody>\n                    </table>\n                </perfect-scrollbar>\n                <div class=\"row\">\n                    <div class=\"col-md-12 rmpd flx-total-data\" *ngIf=\"showBottomInfo\">\n                        <div class=\"row\" *ngIf=\"!isSearching;else bottomInfoSearching\">\n                            <div class=\"col-md-4 text-left rmpd\">Total pagination: <span> {{ service?.totalItems | ceil: limit }}</span></div>\n                            <div class=\"col-md-4 text-center rmpd\"># of items per pagination: <span>{{ limit }}</span></div>\n                            <div class=\"col-md-4 text-right rmpd\">Total items: <span>{{ (service?.flxData | async)?.length }}</span></div>\n                        </div>\n                        <ng-template #bottomInfoSearching>\n                            <div class=\"row\">\n                                <div class=\"col-md-12 text-right rmpd\">Total search result: <span>{{ searchResultFound?.length }}</span></div>\n                            </div>\n                        </ng-template>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>","styles":[".flx-ui-datatable-main{background-color:#fff;padding-top:1em;padding-bottom:1em}.flx-ui-datatable-main .btn-danger{background-color:#f50057;border:1px solid #f50057;box-shadow:0 3px 5px 1px #ddd;-moz-box-shadow:0 3px 5px 1px #ddd;-webkit-box-shadow:0 3px 5px 1px #ddd;-o-box-shadow:0 3px 5px 1px #ddd;-ms-box-shadow:0 3px 5px 1px #ddd;border-radius:3px;margin-left:.3em}.flx-ui-datatable-main #flxdatatablebodyscrollbar,.flx-ui-datatable-main .table-responsive,.flx-ui-datatable-main .table-responsive table{width:100%}.flx-ui-datatable-main img.img-fall-back{width:30px;height:30px}.flx-ui-datatable-main .pagination-select input[type=text],.flx-ui-datatable-main .pagination-select select,.flx-ui-datatable-main .search-bar input[type=text],.flx-ui-datatable-main .search-bar select{border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:2px solid #ddd!important;border-radius:0!important;box-shadow:0 0 0 0 transparent!important;-moz-box-shadow:0 0 0 0 transparent!important;-webkit-box-shadow:0 0 0 0 transparent!important;-o-box-shadow:0 0 0 0 transparent!important;-ms-box-shadow:0 0 0 0 transparent!important}.flx-ui-datatable-main .pagination-select input[type=text]:focus,.flx-ui-datatable-main .pagination-select select:focus,.flx-ui-datatable-main .search-bar input[type=text]:focus,.flx-ui-datatable-main .search-bar select:focus{border-bottom-color:#359!important;transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;-o-transition:.5s;-ms-transition:.5s}.flx-ui-datatable-main .pagination-select select,.flx-ui-datatable-main .search-bar select{-webkit-appearance:none;appearance:none;-moz-appearance:none}.flx-ui-datatable-main .dropdown-toggle::after{display:none}.flx-ui-datatable-main .dropdown-menu-export{margin-left:-130px;padding-left:1em;padding-right:1em;width:100px!important;margin-top:1em;border:1px solid #ddd!important}.flx-ui-datatable-main .dropdown-menu-export::before{content:\"\";width:auto;height:auto;position:absolute;top:-20px;right:3px;border:10px solid;border-color:transparent transparent #ddd}.flx-ui-datatable-main .flx-datatable-pagination{padding-top:.5em}.flx-ui-datatable-main .flx-datatable-pagination button{width:35px!important;height:35px!important;border-radius:50em!important;border:none!important;box-shadow:0 3px 10px 0 #b3c4e6;-moz-box-shadow:0 3px 10px 0 #b3c4e6;-webkit-box-shadow:0 3px 10px 0 #b3c4e6;-o-box-shadow:0 3px 10px 0 #b3c4e6;-ms-box-shadow:0 3px 10px 0 #b3c4e6;background-color:#359;color:#fff;font-size:23px;font-weight:700;position:absolute;top:0}.flx-ui-datatable-main .flx-datatable-pagination button:first-child{left:0}.flx-ui-datatable-main .flx-datatable-pagination button:first-child .flx-datatable-tooltip-prev{position:absolute;left:0;font-size:13px;font-weight:400;color:#fff;background-color:#359;padding-left:.3em;padding-right:.3em;border-radius:3px;margin-left:-57px;margin-top:.3em;box-shadow:0 3px 10px 0 #b3c4e6!important;-moz-box-shadow:0 3px 10px 0 #b3c4e6!important;-webkit-box-shadow:0 3px 10px 0 #b3c4e6!important;-o-box-shadow:0 3px 10px 0 #b3c4e6!important;-ms-box-shadow:0 3px 10px 0 #b3c4e6!important;visibility:hidden}.flx-ui-datatable-main .flx-datatable-pagination button:hover>span.flx-datatable-tooltip-next,.flx-ui-datatable-main .flx-datatable-pagination button:hover>span.flx-datatable-tooltip-prev{visibility:visible}.flx-ui-datatable-main .flx-datatable-pagination .flx-pagination-end{background-color:#f50057!important;box-shadow:0 3px 10px 0 #ffc2d8!important;-moz-box-shadow:0 3px 10px 0 #ffc2d8!important;-webkit-box-shadow:0 3px 10px 0 #ffc2d8!important;-o-box-shadow:0 3px 10px 0 #ffc2d8!important;-ms-box-shadow:0 3px 10px 0 #ffc2d8!important;cursor:not-allowed}.flx-ui-datatable-main .flx-datatable-pagination .flx-pagination-end:hover>span.flx-datatable-tooltip-next,.flx-ui-datatable-main .flx-datatable-pagination .flx-pagination-end:hover>span.flx-datatable-tooltip-prev{visibility:hidden}.flx-ui-datatable-main .flx-datatable-pagination button:last-child{right:0}.flx-ui-datatable-main .flx-datatable-pagination button:last-child .flx-datatable-tooltip-next{position:absolute;left:0;font-size:13px;font-weight:400;color:#fff;background-color:#359;padding-left:.3em;padding-right:.3em;border-radius:3px;margin-left:35px;margin-top:.5em;box-shadow:0 3px 10px 0 #b3c4e6!important;-moz-box-shadow:0 3px 10px 0 #b3c4e6!important;-webkit-box-shadow:0 3px 10px 0 #b3c4e6!important;-o-box-shadow:0 3px 10px 0 #b3c4e6!important;-ms-box-shadow:0 3px 10px 0 #b3c4e6!important;visibility:hidden}.flx-ui-datatable-main .export-cnt button{border-radius:50em!important}.flx-ui-datatable-main .flx-tabl-container table.th-table{margin-top:.5em}.flx-ui-datatable-main table tbody tr{padding-top:0!important}.flx-ui-datatable-main table tbody tr td{padding-top:.5em;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0}.flx-ui-datatable-main table tbody tr td button{margin-right:.3em;margin-left:0}.flx-ui-datatable-main table tbody tr td button div.flx-tooltip{position:absolute;background-color:rgba(32,27,27,.808);text-align:center;font-size:13px;color:#fff;border-radius:3px;box-shadow:0 3px 20px 0 #4b4949;-moz-box-shadow:0 3px 20px 0 #4b4949;-webkit-box-shadow:0 3px 20px 0 #4b4949;-o-box-shadow:0 3px 20px 0 #4b4949;-ms-box-shadow:0 3px 20px 0 #4b4949;margin-left:-2.5em;margin-top:-2.8em;visibility:hidden;width:80px;padding:.3em .5em}.flx-ui-datatable-main table tbody tr td button .flx-tooltip-left{margin-left:-95px!important;margin-top:-.3em!important}.flx-ui-datatable-main table tbody tr td button .flx-tooltip-bottom{margin-top:2.3em!important}.flx-ui-datatable-main table tbody tr td button .flx-tooltip-right{margin-left:28px!important;margin-top:-.3em!important}.flx-ui-datatable-main table tbody tr td button:hover>div.flx-tooltip{transition:.3s;visibility:visible}.flx-ui-datatable-main table tbody tr td.table-buttons{padding-top:.2em;padding-bottom:.2em}.flx-ui-datatable-main table tbody tr:nth-of-type(even){background-color:#f8f9fa}.flx-ui-datatable-main table tbody tr:nth-of-type(odd){background-color:#fff}.flx-ui-datatable-main .btn-danger:hover{background-color:#ff146b;border:1px solid #ff146b;box-shadow:0 3px 10px 1px #ff5fb6;-moz-box-shadow:0 3px 10px 1px #ff5fb6;-webkit-box-shadow:0 3px 10px 1px #ff5fb6;-o-box-shadow:0 3px 10px 1px #ff5fb6;-ms-box-shadow:0 3px 10px 1px #ff5fb6;transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;-o-transition:.5s;-ms-transition:.5s}.flx-ui-datatable-main .btn-danger:focus{background-color:#f50057;border:1px solid #f50057}.flx-ui-datatable-main .btn-white{background-color:#fff}.flx-ui-datatable-main .btn-dark{background-color:#222!important}.flx-ui-datatable-main .btn-primary{background-color:#359;color:#fff;border:1px solid #359;box-shadow:0 3px 5px 1px #ddd;-moz-box-shadow:0 3px 5px 1px #ddd;-webkit-box-shadow:0 3px 5px 1px #ddd;-o-box-shadow:0 3px 5px 1px #ddd;-ms-box-shadow:0 3px 5px 1px #ddd;border-radius:3px}.flx-ui-datatable-main .btn-primary:hover{background-color:#4769ad;border:1px solid #4769ad;box-shadow:0 3px 10px 0 #b3c4e6;-moz-box-shadow:0 3px 10px 0 #b3c4e6;-webkit-box-shadow:0 3px 10px 0 #b3c4e6;-o-box-shadow:0 3px 10px 0 #b3c4e6;-ms-box-shadow:0 3px 10px 0 #b3c4e6;transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;-o-transition:.5s;-ms-transition:.5s}.flx-ui-datatable-main .btn-primary:focus{background-color:#359;border:1px solid #359}.flx-ui-datatable-main .btn-large{padding-top:1em!important;padding-bottom:1em!important}.flx-ui-datatable-main .btn-medium{padding-top:.7em!important;padding-bottom:.7em!important}.flx-ui-datatable-main .btn-success{box-shadow:0 3px 5px 1px #ddd;-moz-box-shadow:0 3px 5px 1px #ddd;-webkit-box-shadow:0 3px 5px 1px #ddd;-o-box-shadow:0 3px 5px 1px #ddd;-ms-box-shadow:0 3px 5px 1px #ddd;border-radius:3px;background-color:#5cb85c;border:1px solid #5cb85c}.flx-ui-datatable-main .btn-success:hover{background-color:#70cc70;border:1px solid #70cc70;box-shadow:0 3px 10px 1px #9df99d;-moz-box-shadow:0 3px 10px 1px #9df99d;-webkit-box-shadow:0 3px 10px 1px #9df99d;-o-box-shadow:0 3px 10px 1px #9df99d;-ms-box-shadow:0 3px 10px 1px #9df99d;transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;-o-transition:.5s;-ms-transition:.5s}.flx-ui-datatable-main .btn-success:focus{background-color:#5cb85c;border:1px solid #5cb85c}.flx-ui-datatable-main .btn-default{background-color:#fff;box-shadow:0 3px 5px 1px #eee;-moz-box-shadow:0 3px 5px 1px #eee;-webkit-box-shadow:0 3px 5px 1px #eee;-o-box-shadow:0 3px 5px 1px #eee;-ms-box-shadow:0 3px 5px 1px #eee;border-radius:3px;border:1px solid #ddd}.flx-ui-datatable-main .btn-default:hover{background-color:#fff;border:1px solid #e7e7e7;box-shadow:0 3px 10px 1px #e2e2e2;-moz-box-shadow:0 3px 10px 1px #e2e2e2;-webkit-box-shadow:0 3px 10px 1px #e2e2e2;-o-box-shadow:0 3px 10px 1px #e2e2e2;-ms-box-shadow:0 3px 10px 1px #e2e2e2;transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;-o-transition:.5s;-ms-transition:.5s}.flx-ui-datatable-main .btn-default:focus{background-color:#fff;border:1px solid #ddd}.flx-ui-datatable-main .btn-secondary{box-shadow:0 3px 5px 1px #ddd;-moz-box-shadow:0 3px 5px 1px #ddd;-webkit-box-shadow:0 3px 5px 1px #ddd;-o-box-shadow:0 3px 5px 1px #ddd;-ms-box-shadow:0 3px 5px 1px #ddd;border-radius:3px;background-color:#1e88e5;color:#fff}.flx-ui-datatable-main .btn-secondary:hover{color:#fff;background-color:#2892ef;border:1px solid #2892ef;box-shadow:0 3px 10px 1px #55bfff;-moz-box-shadow:0 3px 10px 1px #55bfff;-webkit-box-shadow:0 3px 10px 1px #55bfff;-o-box-shadow:0 3px 10px 1px #55bfff;-ms-box-shadow:0 3px 10px 1px #55bfff;transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;-o-transition:.5s;-ms-transition:.5s}.flx-ui-datatable-main .btn-secondary:focus{color:#fff}.flx-ui-datatable-main .pagination-button{background-color:#359;color:#fff}.flx-ui-datatable-main .table-font{font-family:Khula,sans-serif!important}.flx-ui-datatable-main .table-header-icon{position:absolute;right:.2em;width:80px;height:80px;font-size:50px;margin-top:-30px;border-radius:5px!important}.flx-ui-datatable-main .table-title{background-color:#359;color:#fff;border-radius:2px;padding:1em;font-size:15px;font-weight:700;margin-bottom:1.5em;font-family:Roboto,sans-serif;box-shadow:0 1px 5px 1px #ddd;-moz-box-shadow:0 1px 5px 1px #ddd;-webkit-box-shadow:0 1px 5px 1px #ddd;-o-box-shadow:0 1px 5px 1px #ddd;-ms-box-shadow:0 1px 5px 1px #ddd}.flx-ui-datatable-main .danger{background-color:#f50057;color:#fff}.flx-ui-datatable-main .primary{background-color:#359;color:#fff}.flx-ui-datatable-main .success{background-color:#5cb85c;color:#fff}.flx-ui-datatable-main .default{background-color:#fff;color:#000}.flx-ui-datatable-main .secondary{background-color:#1e88e5;color:#fff}.flx-ui-datatable-main .btn-clear{border:none!important;box-shadow:none!important}.flx-ui-datatable-main .input-group,.flx-ui-datatable-main .input-group input{background-color:transparent!important}.flx-ui-datatable-main .input-group-addon{border:none!important;padding:0!important;box-shadow:none!important;background-color:transparent!important}.flx-ui-datatable-main .input-group-addon button{border:1px solid transparent!important;box-shadow:none!important;border-top:none!important;border-bottom:none!important;background-color:transparent!important;border-radius:50em!important;color:#359;width:30px;height:30px}.flx-ui-datatable-main .input-group-addon button i{font-size:18px}.flx-ui-datatable-main .input-group-addon button:disabled{background-color:transparent!important}.flx-ui-datatable-main .input-group-addon button:disabled i{color:#f50057}.flx-ui-datatable-main .data-scroll-content{max-width:100%;max-height:400px;margin-top:-1em}.flx-ui-datatable-main .data-scroll-content table tbody tr:first-child td,.flx-ui-datatable-main .flx-table-thead tr th{border-top:none!important}"]}]}],"members":{"classes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":196,"character":3}}]}],"headers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":197,"character":3}}]}],"lazyloadingConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":3}}]}],"embedPictures":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":199,"character":3}}]}],"dataKeys":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":3}}]}],"enableDataExports":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":201,"character":3}}]}],"dataExportsConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":202,"character":3}}]}],"showBottomInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":203,"character":3}}]}],"searchKeys":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":3}}]}],"dataSrcKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":205,"character":3}}]}],"hasActionButtons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":3}}]}],"hideNumbers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":207,"character":3}}]}],"enableMultipleSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":208,"character":3}}]}],"multipleSelectKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":209,"character":3}}]}],"hasAddButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":3}}]}],"dataUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":211,"character":3}}]}],"actionButtonStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":212,"character":3}}]}],"multipleSelectButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":213,"character":3}}]}],"searchPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":214,"character":3}}]}],"actionHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":215,"character":3}}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":216,"character":3}}]}],"spinnerSrc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":217,"character":3}}]}],"actionButtons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":218,"character":3}}]}],"paginationButtons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":219,"character":3}}]}],"tableHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":220,"character":3}}]}],"searchButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":221,"character":3}}]}],"addButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":222,"character":3}}]}],"searchBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":223,"character":3}}]}],"actionButtonsConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":224,"character":3}}]}],"firstActionButtonClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":225,"character":3}}]}],"secondActionButtonClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":226,"character":3}}]}],"thirdActionButtonClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":227,"character":3}}]}],"multipleSelectClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":228,"character":3}}]}],"addButtonClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":229,"character":3}}]}],"textSubstring":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":233,"character":3}}]}],"conditionManipulator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":234,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":248,"character":29},{"__symbolic":"reference","name":"ɵa"}]}],"reload":[{"__symbolic":"method"}],"checkToExportOption":[{"__symbolic":"method"}],"exportDocumentsAs":[{"__symbolic":"method"}],"hasImageEmbeded":[{"__symbolic":"method"}],"getImage":[{"__symbolic":"method"}],"JSONToCSVConvertor":[{"__symbolic":"method"}],"changeDisplayData":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"searchDataInApi":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"setColumnWidths":[{"__symbolic":"method"}],"returColumnswidth":[{"__symbolic":"method"}],"actionButtonClicked":[{"__symbolic":"method"}],"addButtonClick":[{"__symbolic":"method"}],"confirmDelete":[{"__symbolic":"method"}],"addRemove":[{"__symbolic":"method"}],"addRemoveDeleteItem":[{"__symbolic":"method"}],"getSearchColumns":[{"__symbolic":"method"}],"disablePrevtButton":[{"__symbolic":"method"}],"disableNextButton":[{"__symbolic":"method"}],"isLazyloadingEnabled":[{"__symbolic":"method"}],"nextPrevItem":[{"__symbolic":"method"}],"filterData":[{"__symbolic":"method"}],"paginateDatatable":[{"__symbolic":"method"}],"paginateDatatableRecord":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":709,"character":1},"arguments":[{"selector":"[flx-ui-datatable-img-fallback]"}]}],"members":{"imgSrc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":713,"character":5},"arguments":["flx-ui-datatable-img-fallback"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":718,"character":20}]}],"onError":[{"__symbolic":"method"}],"removeEvents":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":1,"character":1},"arguments":[{"name":"ceil"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"transform":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"haslimittext"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"transform":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"limittext"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"transform":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"isprocessed"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"transform":[{"__symbolic":"method"}]}}},"origins":{"FlxUiDataTable":"./lib/flx-ui-datatable-service.service","FlxUiDatatableModule":"./lib/flx-ui-datatable.module","ɵa":"./lib/flx-ui-datatable.service","ɵb":"./lib/flx-ui-datatable.component","ɵc":"./lib/flx-ui-datatable.component","ɵd":"./lib/pipes/ceil.pipe","ɵe":"./lib/pipes/hasLimitText.pipe","ɵf":"./lib/pipes/limitText.pipe","ɵg":"./lib/pipes/processeddata.pipe"},"importAs":"flx-ui-datatable"}