ng-pure-datatable/ng-pure-datatable.metadata.json

This is a Angular datatable for tables which is not dependent on jquery. This is fully written with typescript and it uses observables to communicate events across the user defined table. This is inspired by previous libraries I wrote for `Larang-Paginato

{"__symbolic":"module","version":3,"metadata":{"PositionStyle":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-pure-datatable","template":"\n    <div *ngIf=\"paginateSettings.data\">\n\n      <div class=\"limit-style\" *ngIf=\"limitStyle && !disablePaging\" [ngStyle]=\"limitStyle\">\n        <!--<label for=\"limit\">Limit: </label>-->\n        <select id=\"limit\" [ngStyle]=\"setBorderColor()\" [(ngModel)]=\"paginateSettings.limit\"\n                (change)=\"updateLimit(+limit.value)\" #limit>\n          <option value=\"\" disabled selected>Select Limit</option>\n          <option *ngFor=\"let num of ranges\" value=\"{{num}}\">{{num}}</option>\n        </select>\n      </div>\n      <div class=\"search-app\" *ngIf=\"!disableSearch\" [ngStyle]=\"style\">\n        <ng-search [allSettings]=\"searchSettings\"></ng-search>\n        <div style=\"clear: both;\"></div>\n      </div>\n\n      <ng-paginate *ngIf=\"!disablePaging\" [from]=\"paginateSettings.from\" [data]=\"paginateSettings.data\"\n                   [path]=\"paginateSettings.path\"\n                   [limit]=\"paginateSettings.limit\" [perNav]=\"paginateSettings.perNav\"\n                   [viewPage]=\"paginateSettings.viewPage\" [paginate]=\"paginateSettings.paginate\"\n                   [textColor]=\"paginateSettings.textColor\"></ng-paginate>\n    </div>\n  ","styles":["\n    select {\n      width: 100% !important;\n      height: 30px !important;\n      padding: 5px !important;\n      color: #000 !important;\n      border: 1px solid #ccc;\n      border-bottom: 3px solid #eee000;\n    }\n\n\n    select:visited, select:active, select:link, select:after, select:hover, select:focus, button:focus {\n      outline: none;\n    }\n\n\n    @media (max-width: 768px) {\n      .search-app {\n        width: 55% !important;\n      }\n      .limit-style {\n        width: 100px !important;\n      }\n    }\n  "]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disablePaging":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"paginateSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgPureDataTableEventService"}]}],"ngOnInit":[{"__symbolic":"method"}],"processLimit":[{"__symbolic":"method"}],"updateLimit":[{"__symbolic":"method"}],"setBorderColor":[{"__symbolic":"method"}],"configSearchDisplay":[{"__symbolic":"method"}]}},"paginateSettings":{"__symbolic":"interface"},"NgSearchInterface":{"__symbolic":"interface"},"NgSearchTypesEnum":{"ON_TABLE":0,"ON_BACKEND":1,"EMPTY_TABLE_APPLY_BACKEND":2},"NgPureDataTableEventService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"on":[{"__symbolic":"method"}],"broadcast":[{"__symbolic":"method"}]}},"NgPureDatatableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵd"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵd"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgPureDatatableModule"},"providers":[{"__symbolic":"reference","name":"NgPureDataTableEventService"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵc"}]}}}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-paginate","template":"\n    <nav aria-label=\"...\" style=\"position: relative\" *ngIf=\"pages.length !== 0\">\n      <div class=\"showing\" [ngStyle]=\"{'text-color': textColor}\">\n        Showing {{((data['current_page'] - 1) * (limit <= total ? limit : total) + 1)}} - {{(data['current_page']) * (limit <= total ? limit : total)}} of {{total}} entries\n      </div>\n      <ul *ngIf=\"limit <= data['total']\" class=\"pagination  justify-content-end\">\n        <li class=\"page-item\" [class.disabled]=\"data['prev_page_url'] === null\" >\n          <a class=\"page-link\" (click)=\"loadData((prev_page + '&' + paginate + '='  + limit), prev_page)\" role=\"button\" tabindex=\"-1\">Previous</a>\n        </li>\n        <li [class.hide]=\"pages.length === 0\" [class.show]=\"pages.length > 0\" *ngFor=\"let page of pages\" id=\"page_{{page}}\" [class.active]=\"data['current_page'] === page\" class=\"animated fadeInRight page-item\">\n          <a class=\"page-link\" (click)=\"loadData((viewPage + '=' + page + '&' + paginate + '=' + limit), page)\" role=\"button\">\n            <i *ngIf=\"page === showLoad\" class=\"fa fa-spin fa-spinner\"></i> {{page}}\n          </a>\n        </li>\n        <li  *ngIf=\"totalPages.length > perNav\">\n          <a (click)=\"getPaging()\" title=\"Load More Navigation\" role=\"button\" class=\"page-link\">...</a>\n        </li>\n        <li  *ngIf=\"pages.length === 0\">\n          <a role=\"button\" class=\"page-link\"><i class=\"fa fa-spin fa-spinner\"></i></a>\n        </li>\n        <li class=\"page-item\"  [class.disabled]=\"data['next_page_url'] === null\" >\n          <a class=\"page-link\" (click)=\"loadData((next_page + '&' + paginate + '=' + limit), next_page)\" role=\"button\">Next</a>\n        </li>\n      </ul>\n    </nav>\n  ","styles":["\n    .showing {\n      color: #000 !important;\n      font-size: 0.95em;\n      line-height: 10px;\n      left: 10px;\n      top: 15px;\n      position: absolute;\n    }\n    @media (max-width: 768px) {\n    .showing {\n      position: relative;\n      margin: 10px;\n      text-align: center;\n    }\n      .justify-content-end {\n        -ms-flex-pack: center !important;\n        -webkit-box-pack: center !important;\n                justify-content: center !important;\n        padding-top: 20px;\n      }\n    }\n    .pagination {\n      display: -ms-flexbox;\n      display: -webkit-box;\n      display: flex;\n      padding-left: 0;\n      list-style: none;\n      border-radius: 0.25rem;\n    }\n\n    .page-item:first-child .page-link {\n      margin-left: 0;\n      border-top-left-radius: 0.25rem;\n      border-bottom-left-radius: 0.25rem;\n    }\n\n    .page-item:last-child .page-link {\n      border-top-right-radius: 0.25rem;\n      border-bottom-right-radius: 0.25rem;\n    }\n\n    .page-item.active .page-link {\n      z-index: 2;\n      color: #fff;\n      background-color: #007bff;\n      border-color: #007bff;\n    }\n\n    .page-item.disabled .page-link {\n      color: #868e96;\n      pointer-events: none;\n      background-color: #fff;\n      border-color: #ddd;\n    }\n\n    .page-link {\n      position: relative;\n      display: block;\n      padding: 0.5rem 0.75rem;\n      margin-left: -1px;\n      line-height: 1.25;\n      color: #007bff;\n      background-color: #fff;\n      border: 1px solid #ddd;\n      cursor: pointer;\n    }\n\n    .page-link:focus, .page-link:hover {\n      color: #0056b3;\n      text-decoration: none;\n      background-color: #e9ecef;\n      border-color: #ddd;\n    }\n\n    .pagination-lg .page-link {\n      padding: 0.75rem 1.5rem;\n      font-size: 1.25rem;\n      line-height: 1.5;\n    }\n\n    .pagination-lg .page-item:first-child .page-link {\n      border-top-left-radius: 0.3rem;\n      border-bottom-left-radius: 0.3rem;\n    }\n\n    .pagination-lg .page-item:last-child .page-link {\n      border-top-right-radius: 0.3rem;\n      border-bottom-right-radius: 0.3rem;\n    }\n\n    .pagination-sm .page-link {\n      padding: 0.25rem 0.5rem;\n      font-size: 0.875rem;\n      line-height: 1.5;\n    }\n\n    .pagination-sm .page-item:first-child .page-link {\n      border-top-left-radius: 0.2rem;\n      border-bottom-left-radius: 0.2rem;\n    }\n\n    .pagination-sm .page-item:last-child .page-link {\n      border-top-right-radius: 0.2rem;\n      border-bottom-right-radius: 0.2rem;\n    }\n\n    .justify-content-end {\n      -ms-flex-pack: end;\n      -webkit-box-pack: end;\n              justify-content: flex-end;\n    }\n\n    .justify-content-start {\n      -ms-flex-pack: start !important;\n      -webkit-box-pack: start !important;\n              justify-content: flex-start !important;\n    }\n\n    .justify-content-center {\n      -ms-flex-pack: center !important;\n      -webkit-box-pack: center !important;\n              justify-content: center !important;\n    }\n  "]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"path":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"from":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"perNav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"viewPage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"paginate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"NgPureDataTableEventService"}]}],"getPages":[{"__symbolic":"method"}],"getPaging":[{"__symbolic":"method"}],"loadData":[{"__symbolic":"method"}],"processPerNav":[{"__symbolic":"method"}],"nextPrevPage":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"}]}],"listByPaginator":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-search","template":"\n    <div class=\"ng-search\" [ngStyle]=\"setBorderColor()\" [class.disabled]=\"searching\">\n    <input [disabled]=\"searching\" (keyup)=\"search$.next(searchItem.value)\" #searchItem  type=\"text\"  placeholder=\"{{allSettings.placeholder}}\">\n      <!--<i *ngIf=\"searching\" class=\"fa fa-spin fa-spinner\"></i>-->\n    <!--  <button  [disabled]=\"searching\" type=\"button\" (click)=\"doSearch(searchItem.value)\" class=\"button\" [ngStyle]=\"setButtonColor()\">\n        <i *ngIf=\"searching\" class=\"fa fa-spin fa-spinner\"></i> <i class=\"fa fa-search\"></i>\n      </button>-->\n    </div>\n    <span class=\"clearOut\"></span>\n  ","styles":["\n    input {\n      width: 80% !important;\n      border: 0 !important;\n      height: 20px !important;\n      padding: 5px !important;\n    }\n\n    input:visited, input:active, input:link, input:after, input:hover, input:focus, button:focus {\n      border: 0 !important;\n      outline: none;\n    }\n\n    .ng-search {\n      border-radius: 5px !important;\n      -moz-border-radius: 5px !important;\n      -webkit-border-radius: 5px !important;\n      width: 100% !important;\n      color: #000;\n      border: 1px solid #ccc;\n      border-bottom: 3px solid #eee000;\n      padding: 0 !important;\n      margin: 0 !important;\n      font-size: 11px !important;\n    }\n\n    .disabled {\n      background: rgb(235, 235, 228) !important;\n    }\n\n    .button {\n      background: #83e6bc;\n      padding: 9px !important;\n      color: #fff !important;\n      border: 0 !important;\n      cursor: pointer !important;\n      font-size: 11px;\n      float: right;\n      border-radius: 0 5px 5px 0  !important;\n      -moz-border-radius: 0 5px 5px 0 !important;\n      -webkit-border-radius: 0 5px 5px 0 !important;\n    }\n    .clearOut {\n      clear: both;\n    }\n  "]}]}],"members":{"allSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"NgPureDataTableEventService"}]}],"setBorderColor":[{"__symbolic":"method"}],"setButtonColor":[{"__symbolic":"method"}],"doSearch":[{"__symbolic":"method"}],"processSearching":[{"__symbolic":"method"}],"doSearchBackend":[{"__symbolic":"method"}],"ValidateSettings":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]},"statics":{"defaultAllSettings":{"path":null,"placeholder":"What are you looking for?","data":[],"searchKeys":[],"from":null,"position":"right","width":40,"positionStyle":{"right":null,"top":null},"queryField":"search","borderColor":"#eee000","buttonColor":"#83e6bc","searchType":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"./ng-search-types.enum","name":"NgSearchTypesEnum"},"member":"EMPTY_TABLE_APPLY_BACKEND"}}}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient"}]}],"initSearch":[{"__symbolic":"method"}],"startSearching":[{"__symbolic":"method"}],"processObject":[{"__symbolic":"method"}],"processArray":[{"__symbolic":"method"}],"processValidation":[{"__symbolic":"method"}],"searchResource":[{"__symbolic":"method"}]}}},"origins":{"PositionStyle":"./src/app/ng-pure-datatable/ng-search/ng-search.interface","ɵa":"./src/app/ng-pure-datatable/ng-pure-datatable.component","paginateSettings":"./src/app/ng-pure-datatable/ng-pure-datatable.component","NgSearchInterface":"./src/app/ng-pure-datatable/ng-search/ng-search.interface","NgSearchTypesEnum":"./src/app/ng-pure-datatable/ng-search/ng-search-types.enum","NgPureDataTableEventService":"./src/app/ng-pure-datatable/ng-pure-datatable-event.service","NgPureDatatableModule":"./src/app/ng-pure-datatable/ng-pure-datatable.module","ɵb":"./src/app/ng-pure-datatable/ng-paginate/ng-paginate.component","ɵc":"./src/app/ng-pure-datatable/ng-paginate/ng-paginate.service","ɵd":"./src/app/ng-pure-datatable/ng-search/ng-search.component","ɵe":"./src/app/ng-pure-datatable/ng-search/ng-search.service"},"importAs":"ng-pure-datatable"}