├── .angular-cli.json ├── .gitignore ├── .npmignore ├── .travis.yml ├── .vscode └── settings.json ├── README.md ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── components │ ├── column.component.ngsummary.json │ ├── column.component.ts │ ├── header.component.ngfactory.ts │ ├── header.component.ngsummary.json │ ├── header.component.ts │ ├── header.style.ngsummary.json │ ├── header.style.ts │ ├── header.template.ngsummary.json │ ├── header.template.ts │ ├── pagination.component.ngfactory.ts │ ├── pagination.component.ngsummary.json │ ├── pagination.component.ts │ ├── pagination.style.ngsummary.json │ ├── pagination.style.ts │ ├── pagination.template.ngsummary.json │ ├── pagination.template.ts │ ├── row.component.ngfactory.ts │ ├── row.component.ngsummary.json │ ├── row.component.ts │ ├── row.style.ngsummary.json │ ├── row.style.ts │ ├── row.template.ngsummary.json │ ├── row.template.ts │ ├── table.component.ngfactory.ts │ ├── table.component.ngsummary.json │ ├── table.component.ts │ ├── table.style.ngsummary.json │ ├── table.style.ts │ ├── table.template.ngsummary.json │ ├── table.template.ts │ ├── types.ngsummary.json │ └── types.ts ├── index.ngfactory.ts ├── index.ngsummary.json ├── index.ts ├── tools │ ├── data-table-resource.ngsummary.json │ └── data-table-resource.ts └── utils │ ├── drag.ngsummary.json │ ├── drag.ts │ ├── hide.ngsummary.json │ ├── hide.ts │ ├── min.ngsummary.json │ ├── min.ts │ ├── px.ngsummary.json │ └── px.ts └── tsconfig.json /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "angular-4-data-table-bootstrap-4" 5 | }, 6 | "defaults": { 7 | "build": { 8 | "showCircularDependencies": false 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /tmp 3 | /node_modules 4 | /.idea 5 | /typings 6 | npm-debug.log -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | 2 | /tmp 3 | /node_modules 4 | /.idea 5 | /typings -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | #.travis.yml 2 | 3 | language: node_js 4 | node_js: 5 | - "8.9" 6 | 7 | branches: 8 | only: 9 | - master 10 | 11 | before_script: 12 | - npm install -g @angular/cli 13 | - npm install 14 | 15 | script: 16 | - ng build --prod -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "./node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Angular 4 Data Table Bootstrap 4 2 | 3 | # No longer maintained 4 | Angular has been updated and there are some good updated/new datatables out there. Use your favorite search engine to look for them. Feel free to fork this code and updateit/play with it. 5 | 6 | [![Dependency Status](https://www.versioneye.com/user/projects/59efeb5a15f0d71dd281af2e/badge.svg?style=flat-square)](https://www.versioneye.com/user/projects/59efeb5a15f0d71dd281af2e)[![Maintainability](https://api.codeclimate.com/v1/badges/16da90739885686711a3/maintainability)](https://codeclimate.com/github/afermon/angular-4-data-table-bootstrap-4/maintainability)[![Build Status](https://travis-ci.org/afermon/angular-4-data-table-bootstrap-4.svg?branch=master)](https://travis-ci.org/afermon/angular-4-data-table-bootstrap-4) 7 | 8 | This is a forked version of https://www.npmjs.com/package/angular-2-data-table that has been updated to Bootstrap 4 and Angular 4. 9 | 10 | A simple Angular 4 data table, with built-in solutions for features including: 11 | 12 | * pagination 13 | * sorting 14 | * row selection (single/multi) 15 | * expandable rows 16 | * column resizing 17 | * selecting visible columns 18 | 19 | The component can be used not just with local data, but remote resources too: for example if the sorting and paging happen in the database. 20 | 21 | The templates use bootstrap CSS class names, so the component requires a bootstrap .css file to be present in the application using it. 22 | 23 | Check out the [Demo](https://afermon.github.io/angular-4-data-table-bootstrap-4-demo) and its [Code](https://github.com/afermon/angular-4-data-table-bootstrap-4-demo) for examples of how to use it. 24 | 25 | ## Installing: 26 | `npm install angular-4-data-table-bootstrap-4 --save` 27 | 28 | ## App Requirements 29 | * Bootstrap 4 30 | * Font Awesome 31 | 32 | #### Licensing 33 | MIT License 34 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-4-data-table-bootstrap-4", 3 | "version": "0.2.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@angular/common": { 8 | "version": "4.4.4", 9 | "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.4.tgz", 10 | "integrity": "sha1-rgqBiqoMaj8JAee4C9lOHCLrk2U=", 11 | "requires": { 12 | "tslib": "1.7.1" 13 | } 14 | }, 15 | "@angular/compiler": { 16 | "version": "4.4.4", 17 | "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.4.tgz", 18 | "integrity": "sha1-Mm6wAp2aNUGqyhJN75rcUcNvK0E=", 19 | "dev": true, 20 | "requires": { 21 | "tslib": "1.7.1" 22 | } 23 | }, 24 | "@angular/compiler-cli": { 25 | "version": "4.4.4", 26 | "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.4.tgz", 27 | "integrity": "sha1-BjCApJfZF1OWglBQIixxfaGE9s8=", 28 | "dev": true, 29 | "requires": { 30 | "@angular/tsc-wrapped": "4.4.4", 31 | "minimist": "1.2.0", 32 | "reflect-metadata": "0.1.10" 33 | } 34 | }, 35 | "@angular/core": { 36 | "version": "4.4.4", 37 | "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.4.tgz", 38 | "integrity": "sha1-vTfs9UFY+XSJmWyThr0iL4CjL1w=", 39 | "requires": { 40 | "tslib": "1.7.1" 41 | } 42 | }, 43 | "@angular/forms": { 44 | "version": "4.4.4", 45 | "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.4.tgz", 46 | "integrity": "sha1-TbN5BQm2sQ8duKfBt/Uhh89kz9Q=", 47 | "requires": { 48 | "tslib": "1.7.1" 49 | } 50 | }, 51 | "@angular/platform-browser": { 52 | "version": "4.4.4", 53 | "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.4.tgz", 54 | "integrity": "sha1-o4mOLnup2E/6DUcUTGlxF5x1ruY=", 55 | "requires": { 56 | "tslib": "1.7.1" 57 | } 58 | }, 59 | "@angular/platform-browser-dynamic": { 60 | "version": "4.4.4", 61 | "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.4.tgz", 62 | "integrity": "sha1-w8nrhUpShVagcFQSeTLlJ/qTLhQ=", 63 | "requires": { 64 | "tslib": "1.7.1" 65 | } 66 | }, 67 | "@angular/platform-server": { 68 | "version": "4.4.4", 69 | "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-4.4.4.tgz", 70 | "integrity": "sha1-c+5B+hzshij8wDF0cnsnywAxsio=", 71 | "requires": { 72 | "parse5": "3.0.2", 73 | "tslib": "1.7.1", 74 | "xhr2": "0.1.4" 75 | } 76 | }, 77 | "@angular/tsc-wrapped": { 78 | "version": "4.4.4", 79 | "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.4.tgz", 80 | "integrity": "sha1-mEGCHlVha4JsoWAlD+heFfx0/8M=", 81 | "dev": true, 82 | "requires": { 83 | "tsickle": "0.21.6" 84 | } 85 | }, 86 | "@types/node": { 87 | "version": "8.0.33", 88 | "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.33.tgz", 89 | "integrity": "sha512-vmCdO8Bm1ExT+FWfC9sd9r4jwqM7o97gGy2WBshkkXbf/2nLAJQUrZfIhw27yVOtLUev6kSZc4cav/46KbDd8A==" 90 | }, 91 | "ansi-styles": { 92 | "version": "3.2.0", 93 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz", 94 | "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", 95 | "requires": { 96 | "color-convert": "1.9.0" 97 | } 98 | }, 99 | "arrify": { 100 | "version": "1.0.1", 101 | "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", 102 | "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=" 103 | }, 104 | "chalk": { 105 | "version": "2.1.0", 106 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz", 107 | "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==", 108 | "requires": { 109 | "ansi-styles": "3.2.0", 110 | "escape-string-regexp": "1.0.5", 111 | "supports-color": "4.4.0" 112 | } 113 | }, 114 | "color-convert": { 115 | "version": "1.9.0", 116 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz", 117 | "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=", 118 | "requires": { 119 | "color-name": "1.1.3" 120 | } 121 | }, 122 | "color-name": { 123 | "version": "1.1.3", 124 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 125 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" 126 | }, 127 | "commander": { 128 | "version": "2.11.0", 129 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz", 130 | "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==", 131 | "dev": true 132 | }, 133 | "diff": { 134 | "version": "3.4.0", 135 | "resolved": "https://registry.npmjs.org/diff/-/diff-3.4.0.tgz", 136 | "integrity": "sha512-QpVuMTEoJMF7cKzi6bvWhRulU1fZqZnvyVQgNhPaxxuTYwyjn/j1v9falseQ/uXWwPnO56RBfwtg4h/EQXmucA==" 137 | }, 138 | "escape-string-regexp": { 139 | "version": "1.0.5", 140 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", 141 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" 142 | }, 143 | "has-flag": { 144 | "version": "2.0.0", 145 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", 146 | "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=" 147 | }, 148 | "homedir-polyfill": { 149 | "version": "1.0.1", 150 | "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz", 151 | "integrity": "sha1-TCu8inWJmP7r9e1oWA921GdotLw=", 152 | "requires": { 153 | "parse-passwd": "1.0.0" 154 | } 155 | }, 156 | "make-error": { 157 | "version": "1.3.0", 158 | "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.0.tgz", 159 | "integrity": "sha1-Uq06M5zPEM5itAQLcI/nByRLi5Y=" 160 | }, 161 | "minimist": { 162 | "version": "1.2.0", 163 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", 164 | "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" 165 | }, 166 | "mkdirp": { 167 | "version": "0.5.1", 168 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", 169 | "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", 170 | "requires": { 171 | "minimist": "0.0.8" 172 | }, 173 | "dependencies": { 174 | "minimist": { 175 | "version": "0.0.8", 176 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", 177 | "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" 178 | } 179 | } 180 | }, 181 | "parse-passwd": { 182 | "version": "1.0.0", 183 | "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz", 184 | "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=" 185 | }, 186 | "parse5": { 187 | "version": "3.0.2", 188 | "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.2.tgz", 189 | "integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=", 190 | "requires": { 191 | "@types/node": "6.0.89" 192 | }, 193 | "dependencies": { 194 | "@types/node": { 195 | "version": "6.0.89", 196 | "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.89.tgz", 197 | "integrity": "sha512-Z/67L97+6H1qJiEEHSN1SQapkWjDss1D90rAnFcQ6UxKkah9juzotK5UNEP1bDv/0lJ3NAQTnVfc/JWdgCGruA==" 198 | } 199 | } 200 | }, 201 | "reflect-metadata": { 202 | "version": "0.1.10", 203 | "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.10.tgz", 204 | "integrity": "sha1-tPg3BEFqytiZiMmxVjXUfgO5NEo=", 205 | "dev": true 206 | }, 207 | "rollup": { 208 | "version": "0.50.0", 209 | "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.50.0.tgz", 210 | "integrity": "sha512-7RqCBQ9iwsOBPkjYgoIaeUij606mSkDMExP0NT7QDI3bqkHYQHrQ83uoNIXwPcQm/vP2VbsUz3kiyZZ1qPlLTQ==", 211 | "dev": true 212 | }, 213 | "rxjs": { 214 | "version": "5.4.3", 215 | "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.4.3.tgz", 216 | "integrity": "sha512-fSNi+y+P9ss+EZuV0GcIIqPUK07DEaMRUtLJvdcvMyFjc9dizuDjere+A4V7JrLGnm9iCc+nagV/4QdMTkqC4A==", 217 | "requires": { 218 | "symbol-observable": "1.0.4" 219 | } 220 | }, 221 | "source-map": { 222 | "version": "0.5.7", 223 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", 224 | "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" 225 | }, 226 | "source-map-support": { 227 | "version": "0.4.18", 228 | "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz", 229 | "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==", 230 | "requires": { 231 | "source-map": "0.5.7" 232 | } 233 | }, 234 | "strip-bom": { 235 | "version": "3.0.0", 236 | "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", 237 | "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=" 238 | }, 239 | "strip-json-comments": { 240 | "version": "2.0.1", 241 | "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", 242 | "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" 243 | }, 244 | "supports-color": { 245 | "version": "4.4.0", 246 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.4.0.tgz", 247 | "integrity": "sha512-rKC3+DyXWgK0ZLKwmRsrkyHVZAjNkfzeehuFWdGGcqGDTZFH73+RH6S/RDAAxl9GusSjZSUWYLmT9N5pzXFOXQ==", 248 | "requires": { 249 | "has-flag": "2.0.0" 250 | } 251 | }, 252 | "symbol-observable": { 253 | "version": "1.0.4", 254 | "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz", 255 | "integrity": "sha1-Kb9hXUqnEhvdiYsi1LP5vE4qoD0=" 256 | }, 257 | "ts-node": { 258 | "version": "3.3.0", 259 | "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-3.3.0.tgz", 260 | "integrity": "sha1-wTxqMCTjC+EYDdUwOPwgkonUv2k=", 261 | "requires": { 262 | "arrify": "1.0.1", 263 | "chalk": "2.1.0", 264 | "diff": "3.4.0", 265 | "make-error": "1.3.0", 266 | "minimist": "1.2.0", 267 | "mkdirp": "0.5.1", 268 | "source-map-support": "0.4.18", 269 | "tsconfig": "6.0.0", 270 | "v8flags": "3.0.1", 271 | "yn": "2.0.0" 272 | } 273 | }, 274 | "tsconfig": { 275 | "version": "6.0.0", 276 | "resolved": "https://registry.npmjs.org/tsconfig/-/tsconfig-6.0.0.tgz", 277 | "integrity": "sha1-aw6DdgA9evGGT434+J3QBZ/80DI=", 278 | "requires": { 279 | "strip-bom": "3.0.0", 280 | "strip-json-comments": "2.0.1" 281 | } 282 | }, 283 | "tsickle": { 284 | "version": "0.21.6", 285 | "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.21.6.tgz", 286 | "integrity": "sha1-U7Abl5xcE/2xOvs/uVgXflmRWI0=", 287 | "dev": true, 288 | "requires": { 289 | "minimist": "1.2.0", 290 | "mkdirp": "0.5.1", 291 | "source-map": "0.5.7", 292 | "source-map-support": "0.4.18" 293 | } 294 | }, 295 | "tslib": { 296 | "version": "1.7.1", 297 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.7.1.tgz", 298 | "integrity": "sha1-vIAEFkaRkjp5/oN4u+s9ogF1OOw=" 299 | }, 300 | "typescript": { 301 | "version": "2.5.3", 302 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.5.3.tgz", 303 | "integrity": "sha512-ptLSQs2S4QuS6/OD1eAKG+S5G8QQtrU5RT32JULdZQtM1L3WTi34Wsu48Yndzi8xsObRAB9RPt/KhA9wlpEF6w==", 304 | "dev": true 305 | }, 306 | "uglify-js": { 307 | "version": "3.1.3", 308 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.1.3.tgz", 309 | "integrity": "sha512-5ZUOgufCHjN2mBBLfz63UtWTP6va2sSzBpNCM+/iqI6RnPzEhANmB0EKiKBYdQbc3v7KeomXJ2DJx0Xq9gvUvA==", 310 | "dev": true, 311 | "requires": { 312 | "commander": "2.11.0", 313 | "source-map": "0.5.7" 314 | } 315 | }, 316 | "v8flags": { 317 | "version": "3.0.1", 318 | "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.0.1.tgz", 319 | "integrity": "sha1-3Oj8N5wX2fLJ6e142JzgAFKxt2s=", 320 | "requires": { 321 | "homedir-polyfill": "1.0.1" 322 | } 323 | }, 324 | "xhr2": { 325 | "version": "0.1.4", 326 | "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.1.4.tgz", 327 | "integrity": "sha1-f4dliEdxbbUCYyOBL4GMras4el8=" 328 | }, 329 | "yn": { 330 | "version": "2.0.0", 331 | "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz", 332 | "integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=" 333 | }, 334 | "zone.js": { 335 | "version": "0.8.18", 336 | "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.18.tgz", 337 | "integrity": "sha512-knKOBQM0oea3/x9pdyDuDi7RhxDlJhOIkeixXSiTKWLgs4LpK37iBc+1HaHwzlciHUKT172CymJFKo8Xgh+44Q==" 338 | } 339 | } 340 | } 341 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-4-data-table-bootstrap-4", 3 | "version": "0.2.0", 4 | "description": "An Angular 4 data table, with pagination, sorting, expandable rows etc. Bootstrap 4 version.", 5 | "keywords": [ 6 | "angular", 7 | "angular4", 8 | "Angular 4", 9 | "ng2", 10 | "datatable", 11 | "data-table", 12 | "data table", 13 | "Bootstrap", 14 | "Bootstrap 4", 15 | "pagination" 16 | ], 17 | "main": "dist/index.js", 18 | "typings": "dist/index.d.ts", 19 | "scripts": { 20 | "transpile": "ngc", 21 | "package": "rollup -c", 22 | "minify": "uglifyjs dist/bundles/datatable.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/datatable.min.js", 23 | "build": "npm run transpile && npm run package && npm run minify" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "git@github.com:afermon/angular-4-data-table-bootstrap-4.git" 28 | }, 29 | "peerDependencies": { 30 | "@angular/core": "^4.0.1" 31 | }, 32 | "author": "afermon ", 33 | "license": "MIT", 34 | "devDependencies": { 35 | "@angular/compiler": "^4.4.4", 36 | "@angular/compiler-cli": "^4.4.4", 37 | "rollup": "^0.50.0", 38 | "typescript": "^2.5.3", 39 | "uglify-js": "^3.1.3" 40 | }, 41 | "dependencies": { 42 | "@angular/common": "^4.0.1", 43 | "@angular/core": "^4.0.1", 44 | "@angular/forms": "^4.0.1", 45 | "@angular/platform-browser": "^4.2.5", 46 | "@angular/platform-browser-dynamic": "^4.0.1", 47 | "@angular/platform-server": "^4.4.4", 48 | "@types/node": "~8.0.33", 49 | "rxjs": "^5.1.0", 50 | "ts-node": "~3.3.0", 51 | "zone.js": "^0.8.12" 52 | }, 53 | "false": {}, 54 | "bugs": { 55 | "url": "https://github.com/afermon/angular-4-data-table-bootstrap-4/issues" 56 | }, 57 | "homepage": "https://github.com/afermon/angular-4-data-table-bootstrap-4/" 58 | } 59 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | entry: 'dist/index.js', 4 | dest: 'dist/bundles/datatable.umd.js', 5 | sourceMap: false, 6 | format: 'umd', 7 | moduleName: 'ng.datatable', 8 | globals: { 9 | '@angular/core': 'ng.core', 10 | 'rxjs/Observable': 'Rx', 11 | 'rxjs/ReplaySubject': 'Rx', 12 | 'rxjs/add/operator/map': 'Rx.Observable.prototype', 13 | 'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype', 14 | 'rxjs/add/observable/fromEvent': 'Rx.Observable', 15 | 'rxjs/add/observable/of': 'Rx.Observable' 16 | } 17 | } -------------------------------------------------------------------------------- /src/components/column.component.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"sortable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"resizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"property":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"cellColors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"cellTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["dataTableCell"]}]}],"headerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["dataTableHeader"]}]}],"getCellColor":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"_initCellClass":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[0]},"isComponent":false,"selector":"data-table-column","exportAs":null,"inputs":{"header":"header","sortable":"sortable","resizable":"resizable","property":"property","styleClass":"styleClass","cellColors":"cellColors","width":"width","visible":"visible"},"outputs":{},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[{"selectors":[{"value":"dataTableCell"}],"first":true,"descendants":true,"propertyName":"cellTemplate","read":null},{"selectors":[{"value":"dataTableHeader"}],"first":true,"descendants":true,"propertyName":"headerTemplate","read":null}],"viewQueries":[],"entryComponents":[],"changeDetection":null,"template":null,"componentViewType":null,"rendererType":null,"componentFactory":null}}],"symbols":[{"__symbol":0,"name":"DataTableColumn","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/column.component.d.ts"},{"__symbol":1,"name":"Input","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":2,"name":"ContentChild","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"}]} -------------------------------------------------------------------------------- /src/components/column.component.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, ContentChild, OnInit } from '@angular/core'; 2 | import { DataTableRow } from './row.component'; 3 | import { CellCallback } from './types'; 4 | 5 | 6 | @Directive({ 7 | selector: 'data-table-column' 8 | }) 9 | export class DataTableColumn implements OnInit { 10 | 11 | // init: 12 | @Input() header: string; 13 | @Input() sortable = false; 14 | @Input() resizable = false; 15 | @Input() property: string; 16 | @Input() styleClass: string; 17 | @Input() cellColors: CellCallback; 18 | 19 | // init and state: 20 | @Input() width: number | string; 21 | @Input() visible = true; 22 | 23 | @ContentChild('dataTableCell') cellTemplate; 24 | @ContentChild('dataTableHeader') headerTemplate; 25 | 26 | getCellColor(row: DataTableRow, index: number) { 27 | if (this.cellColors !== undefined) { 28 | return (this.cellColors)(row.item, row, this, index); 29 | } 30 | } 31 | 32 | private styleClassObject = {}; // for [ngClass] 33 | 34 | ngOnInit() { 35 | this._initCellClass(); 36 | } 37 | 38 | private _initCellClass() { 39 | if (!this.styleClass && this.property) { 40 | if (/^[a-zA-Z0-9_]+$/.test(this.property)) { 41 | this.styleClass = 'column-' + this.property; 42 | } else { 43 | this.styleClass = 'column-' + this.property.replace(/[^a-zA-Z0-9_]/g, ''); 44 | } 45 | } 46 | 47 | if (this.styleClass != null) { 48 | this.styleClassObject = { 49 | [this.styleClass]: true 50 | }; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/components/header.component.ngfactory.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride} 5 | */ 6 | /* tslint:disable */ 7 | 8 | 9 | import * as i0 from '@angular/core'; 10 | import * as i1 from '@angular/forms'; 11 | import * as i2 from '@angular/common'; 12 | import * as i3 from './header.component'; 13 | import * as i4 from './table.component'; 14 | const styles_DataTableHeader:any[] = ['.data-table-header[_ngcontent-%COMP%] {\n min-height: 25px;\n margin-bottom: 10px;\n}\n.title[_ngcontent-%COMP%] {\n display: inline-block;\n margin: 5px 0 0 5px;\n}\n.button-panel[_ngcontent-%COMP%] {\n float: right;\n}\n.button-panel[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n outline: none !important;\n}\n\n.column-selector-wrapper[_ngcontent-%COMP%] {\n position: relative;\n}\n.column-selector-box[_ngcontent-%COMP%] {\n box-shadow: 0 0 10px lightgray;\n width: 150px;\n padding: 10px;\n position: absolute;\n right: 0;\n top: 1px;\n z-index: 1060;\n}\n.column-selector-box[_ngcontent-%COMP%] .checkbox[_ngcontent-%COMP%] {\n margin-bottom: 4px;\n}\n.column-selector-fixed-column[_ngcontent-%COMP%] {\n font-style: italic;\n}']; 15 | export const RenderType_DataTableHeader:i0.RendererType2 = i0.ɵcrt({encapsulation:0, 16 | styles:styles_DataTableHeader,data:{}}); 17 | function View_DataTableHeader_2(_l:any):i0.ɵViewDefinition { 18 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),14,'div',[['class', 19 | 'column-selector-fixed-column checkbox']],(null as any),(null as any),(null as any), 20 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 21 | (_l()(),i0.ɵeld(0,(null as any),(null as any),11,'label',([] as any[]),(null as any), 22 | (null as any),(null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 23 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 24 | 5,'input',[['type','checkbox']],[[2,'ng-untouched',(null as any)],[2,'ng-touched', 25 | (null as any)],[2,'ng-pristine',(null as any)],[2,'ng-dirty',(null as any)], 26 | [2,'ng-valid',(null as any)],[2,'ng-invalid',(null as any)],[2,'ng-pending', 27 | (null as any)]],[[(null as any),'ngModelChange'],[(null as any), 28 | 'change'],[(null as any),'blur']],(_v,en,$event) => { 29 | var ad:boolean = true; 30 | var _co:any = _v.component; 31 | if (('change' === en)) { 32 | const pd_0:any = ((i0.ɵnov(_v,5).onChange($event.target.checked)) !== false); 33 | ad = (pd_0 && ad); 34 | } 35 | if (('blur' === en)) { 36 | const pd_1:any = ((i0.ɵnov(_v,5).onTouched()) !== false); 37 | ad = (pd_1 && ad); 38 | } 39 | if (('ngModelChange' === en)) { 40 | const pd_2:any = (((_co.dataTable.expandColumnVisible = $event)) !== false); 41 | ad = (pd_2 && ad); 42 | } 43 | return ad; 44 | },(null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i1.CheckboxControlValueAccessor, 45 | [i0.Renderer2,i0.ElementRef],(null as any),(null as any)),i0.ɵprd(1024,(null as any), 46 | i1.NG_VALUE_ACCESSOR,(p0_0:any) => { 47 | return [p0_0]; 48 | },[i1.CheckboxControlValueAccessor]),i0.ɵdid(671744,(null as any),0,i1.NgModel, 49 | [[8,(null as any)],[8,(null as any)],[8,(null as any)],[2,i1.NG_VALUE_ACCESSOR]], 50 | {model:[0,'model']},{update:'ngModelChange'}),i0.ɵprd(2048,(null as any), 51 | i1.NgControl,(null as any),[i1.NgModel]),i0.ɵdid(16384,(null as any),0,i1.NgControlStatus, 52 | [i1.NgControl],(null as any),(null as any)),(_l()(),i0.ɵted((null as any), 53 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 54 | 1,'span',([] as any[]),(null as any),(null as any),(null as any),(null as any), 55 | (null as any))),(_l()(),i0.ɵted((null as any),['',''])),(_l()(),i0.ɵted((null as any), 56 | ['\n '])),(_l()(),i0.ɵted((null as any),['\n ']))], 57 | (_ck,_v) => { 58 | var _co:any = _v.component; 59 | const currVal_7:any = _co.dataTable.expandColumnVisible; 60 | _ck(_v,7,0,currVal_7); 61 | },(_ck,_v) => { 62 | var _co:any = _v.component; 63 | const currVal_0:any = i0.ɵnov(_v,9).ngClassUntouched; 64 | const currVal_1:any = i0.ɵnov(_v,9).ngClassTouched; 65 | const currVal_2:any = i0.ɵnov(_v,9).ngClassPristine; 66 | const currVal_3:any = i0.ɵnov(_v,9).ngClassDirty; 67 | const currVal_4:any = i0.ɵnov(_v,9).ngClassValid; 68 | const currVal_5:any = i0.ɵnov(_v,9).ngClassInvalid; 69 | const currVal_6:any = i0.ɵnov(_v,9).ngClassPending; 70 | _ck(_v,4,0,currVal_0,currVal_1,currVal_2,currVal_3,currVal_4,currVal_5,currVal_6); 71 | const currVal_8:any = _co.dataTable.translations.expandColumn; 72 | _ck(_v,12,0,currVal_8); 73 | }); 74 | } 75 | function View_DataTableHeader_3(_l:any):i0.ɵViewDefinition { 76 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),14,'div',[['class', 77 | 'column-selector-fixed-column checkbox']],(null as any),(null as any),(null as any), 78 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 79 | (_l()(),i0.ɵeld(0,(null as any),(null as any),11,'label',([] as any[]),(null as any), 80 | (null as any),(null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 81 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 82 | 5,'input',[['type','checkbox']],[[2,'ng-untouched',(null as any)],[2,'ng-touched', 83 | (null as any)],[2,'ng-pristine',(null as any)],[2,'ng-dirty',(null as any)], 84 | [2,'ng-valid',(null as any)],[2,'ng-invalid',(null as any)],[2,'ng-pending', 85 | (null as any)]],[[(null as any),'ngModelChange'],[(null as any), 86 | 'change'],[(null as any),'blur']],(_v,en,$event) => { 87 | var ad:boolean = true; 88 | var _co:any = _v.component; 89 | if (('change' === en)) { 90 | const pd_0:any = ((i0.ɵnov(_v,5).onChange($event.target.checked)) !== false); 91 | ad = (pd_0 && ad); 92 | } 93 | if (('blur' === en)) { 94 | const pd_1:any = ((i0.ɵnov(_v,5).onTouched()) !== false); 95 | ad = (pd_1 && ad); 96 | } 97 | if (('ngModelChange' === en)) { 98 | const pd_2:any = (((_co.dataTable.indexColumnVisible = $event)) !== false); 99 | ad = (pd_2 && ad); 100 | } 101 | return ad; 102 | },(null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i1.CheckboxControlValueAccessor, 103 | [i0.Renderer2,i0.ElementRef],(null as any),(null as any)),i0.ɵprd(1024,(null as any), 104 | i1.NG_VALUE_ACCESSOR,(p0_0:any) => { 105 | return [p0_0]; 106 | },[i1.CheckboxControlValueAccessor]),i0.ɵdid(671744,(null as any),0,i1.NgModel, 107 | [[8,(null as any)],[8,(null as any)],[8,(null as any)],[2,i1.NG_VALUE_ACCESSOR]], 108 | {model:[0,'model']},{update:'ngModelChange'}),i0.ɵprd(2048,(null as any), 109 | i1.NgControl,(null as any),[i1.NgModel]),i0.ɵdid(16384,(null as any),0,i1.NgControlStatus, 110 | [i1.NgControl],(null as any),(null as any)),(_l()(),i0.ɵted((null as any), 111 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 112 | 1,'span',([] as any[]),(null as any),(null as any),(null as any),(null as any), 113 | (null as any))),(_l()(),i0.ɵted((null as any),['',''])),(_l()(),i0.ɵted((null as any), 114 | ['\n '])),(_l()(),i0.ɵted((null as any),['\n ']))], 115 | (_ck,_v) => { 116 | var _co:any = _v.component; 117 | const currVal_7:any = _co.dataTable.indexColumnVisible; 118 | _ck(_v,7,0,currVal_7); 119 | },(_ck,_v) => { 120 | var _co:any = _v.component; 121 | const currVal_0:any = i0.ɵnov(_v,9).ngClassUntouched; 122 | const currVal_1:any = i0.ɵnov(_v,9).ngClassTouched; 123 | const currVal_2:any = i0.ɵnov(_v,9).ngClassPristine; 124 | const currVal_3:any = i0.ɵnov(_v,9).ngClassDirty; 125 | const currVal_4:any = i0.ɵnov(_v,9).ngClassValid; 126 | const currVal_5:any = i0.ɵnov(_v,9).ngClassInvalid; 127 | const currVal_6:any = i0.ɵnov(_v,9).ngClassPending; 128 | _ck(_v,4,0,currVal_0,currVal_1,currVal_2,currVal_3,currVal_4,currVal_5,currVal_6); 129 | const currVal_8:any = _co.dataTable.translations.indexColumn; 130 | _ck(_v,12,0,currVal_8); 131 | }); 132 | } 133 | function View_DataTableHeader_4(_l:any):i0.ɵViewDefinition { 134 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),14,'div',[['class', 135 | 'column-selector-fixed-column checkbox']],(null as any),(null as any),(null as any), 136 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 137 | (_l()(),i0.ɵeld(0,(null as any),(null as any),11,'label',([] as any[]),(null as any), 138 | (null as any),(null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 139 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 140 | 5,'input',[['type','checkbox']],[[2,'ng-untouched',(null as any)],[2,'ng-touched', 141 | (null as any)],[2,'ng-pristine',(null as any)],[2,'ng-dirty',(null as any)], 142 | [2,'ng-valid',(null as any)],[2,'ng-invalid',(null as any)],[2,'ng-pending', 143 | (null as any)]],[[(null as any),'ngModelChange'],[(null as any), 144 | 'change'],[(null as any),'blur']],(_v,en,$event) => { 145 | var ad:boolean = true; 146 | var _co:any = _v.component; 147 | if (('change' === en)) { 148 | const pd_0:any = ((i0.ɵnov(_v,5).onChange($event.target.checked)) !== false); 149 | ad = (pd_0 && ad); 150 | } 151 | if (('blur' === en)) { 152 | const pd_1:any = ((i0.ɵnov(_v,5).onTouched()) !== false); 153 | ad = (pd_1 && ad); 154 | } 155 | if (('ngModelChange' === en)) { 156 | const pd_2:any = (((_co.dataTable.selectColumnVisible = $event)) !== false); 157 | ad = (pd_2 && ad); 158 | } 159 | return ad; 160 | },(null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i1.CheckboxControlValueAccessor, 161 | [i0.Renderer2,i0.ElementRef],(null as any),(null as any)),i0.ɵprd(1024,(null as any), 162 | i1.NG_VALUE_ACCESSOR,(p0_0:any) => { 163 | return [p0_0]; 164 | },[i1.CheckboxControlValueAccessor]),i0.ɵdid(671744,(null as any),0,i1.NgModel, 165 | [[8,(null as any)],[8,(null as any)],[8,(null as any)],[2,i1.NG_VALUE_ACCESSOR]], 166 | {model:[0,'model']},{update:'ngModelChange'}),i0.ɵprd(2048,(null as any), 167 | i1.NgControl,(null as any),[i1.NgModel]),i0.ɵdid(16384,(null as any),0,i1.NgControlStatus, 168 | [i1.NgControl],(null as any),(null as any)),(_l()(),i0.ɵted((null as any), 169 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 170 | 1,'span',([] as any[]),(null as any),(null as any),(null as any),(null as any), 171 | (null as any))),(_l()(),i0.ɵted((null as any),['',''])),(_l()(),i0.ɵted((null as any), 172 | ['\n '])),(_l()(),i0.ɵted((null as any),['\n ']))], 173 | (_ck,_v) => { 174 | var _co:any = _v.component; 175 | const currVal_7:any = _co.dataTable.selectColumnVisible; 176 | _ck(_v,7,0,currVal_7); 177 | },(_ck,_v) => { 178 | var _co:any = _v.component; 179 | const currVal_0:any = i0.ɵnov(_v,9).ngClassUntouched; 180 | const currVal_1:any = i0.ɵnov(_v,9).ngClassTouched; 181 | const currVal_2:any = i0.ɵnov(_v,9).ngClassPristine; 182 | const currVal_3:any = i0.ɵnov(_v,9).ngClassDirty; 183 | const currVal_4:any = i0.ɵnov(_v,9).ngClassValid; 184 | const currVal_5:any = i0.ɵnov(_v,9).ngClassInvalid; 185 | const currVal_6:any = i0.ɵnov(_v,9).ngClassPending; 186 | _ck(_v,4,0,currVal_0,currVal_1,currVal_2,currVal_3,currVal_4,currVal_5,currVal_6); 187 | const currVal_8:any = _co.dataTable.translations.selectColumn; 188 | _ck(_v,12,0,currVal_8); 189 | }); 190 | } 191 | function View_DataTableHeader_5(_l:any):i0.ɵViewDefinition { 192 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),13,'div',[['class', 193 | 'column-selector-column checkbox']],(null as any),(null as any),(null as any), 194 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 195 | (_l()(),i0.ɵeld(0,(null as any),(null as any),10,'label',([] as any[]),(null as any), 196 | (null as any),(null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 197 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 198 | 5,'input',[['type','checkbox']],[[2,'ng-untouched',(null as any)],[2,'ng-touched', 199 | (null as any)],[2,'ng-pristine',(null as any)],[2,'ng-dirty',(null as any)], 200 | [2,'ng-valid',(null as any)],[2,'ng-invalid',(null as any)],[2,'ng-pending', 201 | (null as any)]],[[(null as any),'ngModelChange'],[(null as any), 202 | 'change'],[(null as any),'blur']],(_v,en,$event) => { 203 | var ad:boolean = true; 204 | if (('change' === en)) { 205 | const pd_0:any = ((i0.ɵnov(_v,5).onChange($event.target.checked)) !== false); 206 | ad = (pd_0 && ad); 207 | } 208 | if (('blur' === en)) { 209 | const pd_1:any = ((i0.ɵnov(_v,5).onTouched()) !== false); 210 | ad = (pd_1 && ad); 211 | } 212 | if (('ngModelChange' === en)) { 213 | const pd_2:any = (((_v.context.$implicit.visible = $event)) !== false); 214 | ad = (pd_2 && ad); 215 | } 216 | return ad; 217 | },(null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i1.CheckboxControlValueAccessor, 218 | [i0.Renderer2,i0.ElementRef],(null as any),(null as any)),i0.ɵprd(1024,(null as any), 219 | i1.NG_VALUE_ACCESSOR,(p0_0:any) => { 220 | return [p0_0]; 221 | },[i1.CheckboxControlValueAccessor]),i0.ɵdid(671744,(null as any),0,i1.NgModel, 222 | [[8,(null as any)],[8,(null as any)],[8,(null as any)],[2,i1.NG_VALUE_ACCESSOR]], 223 | {model:[0,'model']},{update:'ngModelChange'}),i0.ɵprd(2048,(null as any), 224 | i1.NgControl,(null as any),[i1.NgModel]),i0.ɵdid(16384,(null as any),0,i1.NgControlStatus, 225 | [i1.NgControl],(null as any),(null as any)),(_l()(),i0.ɵted((null as any), 226 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 227 | 0,'span',([] as any[]),[[8,'textContent',0]],(null as any),(null as any), 228 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 229 | (_l()(),i0.ɵted((null as any),['\n ']))],(_ck,_v) => { 230 | const currVal_7:any = _v.context.$implicit.visible; 231 | _ck(_v,7,0,currVal_7); 232 | },(_ck,_v) => { 233 | const currVal_0:any = i0.ɵnov(_v,9).ngClassUntouched; 234 | const currVal_1:any = i0.ɵnov(_v,9).ngClassTouched; 235 | const currVal_2:any = i0.ɵnov(_v,9).ngClassPristine; 236 | const currVal_3:any = i0.ɵnov(_v,9).ngClassDirty; 237 | const currVal_4:any = i0.ɵnov(_v,9).ngClassValid; 238 | const currVal_5:any = i0.ɵnov(_v,9).ngClassInvalid; 239 | const currVal_6:any = i0.ɵnov(_v,9).ngClassPending; 240 | _ck(_v,4,0,currVal_0,currVal_1,currVal_2,currVal_3,currVal_4,currVal_5,currVal_6); 241 | const currVal_8:any = _v.context.$implicit.header; 242 | _ck(_v,11,0,currVal_8); 243 | }); 244 | } 245 | function View_DataTableHeader_1(_l:any):i0.ɵViewDefinition { 246 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),13,'div',[['class', 247 | 'column-selector-box card']],(null as any),(null as any),(null as any),(null as any), 248 | (null as any))),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 249 | i0.ɵand(16777216,(null as any),(null as any),1,(null as any),View_DataTableHeader_2)), 250 | i0.ɵdid(16384,(null as any),0,i2.NgIf,[i0.ViewContainerRef,i0.TemplateRef],{ngIf:[0, 251 | 'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any),['\n '])), 252 | (_l()(),i0.ɵand(16777216,(null as any),(null as any),1,(null as any),View_DataTableHeader_3)), 253 | i0.ɵdid(16384,(null as any),0,i2.NgIf,[i0.ViewContainerRef,i0.TemplateRef],{ngIf:[0, 254 | 'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any),['\n '])), 255 | (_l()(),i0.ɵand(16777216,(null as any),(null as any),1,(null as any),View_DataTableHeader_4)), 256 | i0.ɵdid(16384,(null as any),0,i2.NgIf,[i0.ViewContainerRef,i0.TemplateRef],{ngIf:[0, 257 | 'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any),['\n '])), 258 | (_l()(),i0.ɵand(16777216,(null as any),(null as any),1,(null as any),View_DataTableHeader_5)), 259 | i0.ɵdid(802816,(null as any),0,i2.NgForOf,[i0.ViewContainerRef,i0.TemplateRef, 260 | i0.IterableDiffers],{ngForOf:[0,'ngForOf']},(null as any)),(_l()(),i0.ɵted((null as any), 261 | ['\n ']))],(_ck,_v) => { 262 | var _co:any = _v.component; 263 | const currVal_0:any = _co.dataTable.expandableRows; 264 | _ck(_v,3,0,currVal_0); 265 | const currVal_1:any = _co.dataTable.indexColumn; 266 | _ck(_v,6,0,currVal_1); 267 | const currVal_2:any = _co.dataTable.selectColumn; 268 | _ck(_v,9,0,currVal_2); 269 | const currVal_3:any = _co.dataTable.columns; 270 | _ck(_v,12,0,currVal_3); 271 | },(null as any)); 272 | } 273 | export function View_DataTableHeader_0(_l:any):i0.ɵViewDefinition { 274 | return i0.ɵvid(0,[(_l()(),i0.ɵted((null as any),['\n'])),(_l()(),i0.ɵeld(0,(null as any), 275 | (null as any),22,'div',[['class','data-table-header']],(null as any),(null as any), 276 | (null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 277 | (_l()(),i0.ɵeld(0,(null as any),(null as any),0,'h4',[['class','title']],[[8, 278 | 'textContent',0]],(null as any),(null as any),(null as any),(null as any))), 279 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 280 | 17,'div',[['class','button-panel']],(null as any),(null as any),(null as any), 281 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 282 | (_l()(),i0.ɵeld(0,(null as any),(null as any),3,'button',[['class','btn btn-default btn-sm refresh-button'], 283 | ['type','button']],(null as any),[[(null as any),'click']],(_v,en,$event) => { 284 | var ad:boolean = true; 285 | var _co:i3.DataTableHeader = _v.component; 286 | if (('click' === en)) { 287 | const pd_0:any = ((_co.dataTable.reloadItems()) !== false); 288 | ad = (pd_0 && ad); 289 | } 290 | return ad; 291 | },(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 292 | (_l()(),i0.ɵeld(0,(null as any),(null as any),0,'i',[['class','fa fa-refresh']], 293 | (null as any),(null as any),(null as any),(null as any),(null as any))), 294 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any), 295 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any),3,'button', 296 | [['class','btn btn-default btn-sm column-selector-button'],['type','button']], 297 | [[2,'active',(null as any)]],[[(null as any),'click']],(_v,en,$event) => { 298 | var ad:boolean = true; 299 | var _co:i3.DataTableHeader = _v.component; 300 | if (('click' === en)) { 301 | _co.columnSelectorOpen = !_co.columnSelectorOpen; 302 | const pd_0:any = (($event.stopPropagation()) !== false); 303 | ad = (pd_0 && ad); 304 | } 305 | return ad; 306 | },(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 307 | (_l()(),i0.ɵeld(0,(null as any),(null as any),0,'i',[['class','fa fa-list']], 308 | (null as any),(null as any),(null as any),(null as any),(null as any))), 309 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any), 310 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any),4,'div',[['class', 311 | 'column-selector-wrapper']],(null as any),[[(null as any),'click']],(_v, 312 | en,$event) => { 313 | var ad:boolean = true; 314 | if (('click' === en)) { 315 | const pd_0:any = (($event.stopPropagation()) !== false); 316 | ad = (pd_0 && ad); 317 | } 318 | return ad; 319 | },(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 320 | (_l()(),i0.ɵand(16777216,(null as any),(null as any),1,(null as any),View_DataTableHeader_1)), 321 | i0.ɵdid(16384,(null as any),0,i2.NgIf,[i0.ViewContainerRef,i0.TemplateRef],{ngIf:[0, 322 | 'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 323 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any),['\n'])), 324 | (_l()(),i0.ɵted((null as any),['\n']))],(_ck,_v) => { 325 | var _co:i3.DataTableHeader = _v.component; 326 | const currVal_2:any = _co.columnSelectorOpen; 327 | _ck(_v,20,0,currVal_2); 328 | },(_ck,_v) => { 329 | var _co:i3.DataTableHeader = _v.component; 330 | const currVal_0:any = _co.dataTable.headerTitle; 331 | _ck(_v,3,0,currVal_0); 332 | const currVal_1:any = _co.columnSelectorOpen; 333 | _ck(_v,12,0,currVal_1); 334 | }); 335 | } 336 | export function View_DataTableHeader_Host_0(_l:any):i0.ɵViewDefinition { 337 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),1,'data-table-header', 338 | ([] as any[]),(null as any),[['document','click']],(_v,en,$event) => { 339 | var ad:boolean = true; 340 | if (('document:click' === en)) { 341 | const pd_0:any = ((i0.ɵnov(_v,1)._closeSelector()) !== false); 342 | ad = (pd_0 && ad); 343 | } 344 | return ad; 345 | },View_DataTableHeader_0,RenderType_DataTableHeader)),i0.ɵdid(49152,(null as any), 346 | 0,i3.DataTableHeader,[i4.DataTable],(null as any),(null as any))],(null as any), 347 | (null as any)); 348 | } 349 | export const DataTableHeaderNgFactory:i0.ComponentFactory = i0.ɵccf('data-table-header', 350 | i3.DataTableHeader,View_DataTableHeader_Host_0,{},{},([] as any[])); 351 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovVXNlcnMvYWxleC9Eb2N1bWVudHMvR2l0SHViL2FuZ3VsYXItNC1kYXRhLXRhYmxlLWJvb3RzdHJhcC00L3NyYy9jb21wb25lbnRzL2hlYWRlci5jb21wb25lbnQubmdmYWN0b3J5LnRzIiwidmVyc2lvbiI6Mywic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsibmc6Ly8vQzovVXNlcnMvYWxleC9Eb2N1bWVudHMvR2l0SHViL2FuZ3VsYXItNC1kYXRhLXRhYmxlLWJvb3RzdHJhcC00L3NyYy9jb21wb25lbnRzL2hlYWRlci5jb21wb25lbnQudHMiLCJuZzovLy9DOi9Vc2Vycy9hbGV4L0RvY3VtZW50cy9HaXRIdWIvYW5ndWxhci00LWRhdGEtdGFibGUtYm9vdHN0cmFwLTQvc3JjL2NvbXBvbmVudHMvaGVhZGVyLmNvbXBvbmVudC50cy5EYXRhVGFibGVIZWFkZXIuaHRtbCIsIm5nOi8vL0M6L1VzZXJzL2FsZXgvRG9jdW1lbnRzL0dpdEh1Yi9hbmd1bGFyLTQtZGF0YS10YWJsZS1ib290c3RyYXAtNC9zcmMvY29tcG9uZW50cy9oZWFkZXIuY29tcG9uZW50LnRzLkRhdGFUYWJsZUhlYWRlcl9Ib3N0Lmh0bWwiXSwic291cmNlc0NvbnRlbnQiOlsiICIsIlxuPGRpdiBjbGFzcz1cImRhdGEtdGFibGUtaGVhZGVyXCI+XG4gICAgPGg0IGNsYXNzPVwidGl0bGVcIiBbdGV4dENvbnRlbnRdPVwiZGF0YVRhYmxlLmhlYWRlclRpdGxlXCI+PC9oND5cbiAgICA8ZGl2IGNsYXNzPVwiYnV0dG9uLXBhbmVsXCI+XG4gICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiYnRuIGJ0bi1kZWZhdWx0IGJ0bi1zbSByZWZyZXNoLWJ1dHRvblwiXG4gICAgICAgICAgICAoY2xpY2spPVwiZGF0YVRhYmxlLnJlbG9hZEl0ZW1zKClcIj5cbiAgICAgICAgICAgICA8aSBjbGFzcz1cImZhIGZhLXJlZnJlc2hcIj48L2k+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImJ0biBidG4tZGVmYXVsdCBidG4tc20gY29sdW1uLXNlbGVjdG9yLWJ1dHRvblwiIFtjbGFzcy5hY3RpdmVdPVwiY29sdW1uU2VsZWN0b3JPcGVuXCJcbiAgICAgICAgICAgIChjbGljayk9XCJjb2x1bW5TZWxlY3Rvck9wZW4gPSAhY29sdW1uU2VsZWN0b3JPcGVuOyAkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcIiA+XG4gICAgICAgICAgICA8aSBjbGFzcz1cImZhIGZhLWxpc3RcIj48L2k+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29sdW1uLXNlbGVjdG9yLXdyYXBwZXJcIiAoY2xpY2spPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCI+XG4gICAgICAgICAgICA8ZGl2ICpuZ0lmPVwiY29sdW1uU2VsZWN0b3JPcGVuXCIgY2xhc3M9XCJjb2x1bW4tc2VsZWN0b3ItYm94IGNhcmRcIj5cbiAgICAgICAgICAgICAgICA8ZGl2ICpuZ0lmPVwiZGF0YVRhYmxlLmV4cGFuZGFibGVSb3dzXCIgY2xhc3M9XCJjb2x1bW4tc2VsZWN0b3ItZml4ZWQtY29sdW1uIGNoZWNrYm94XCI+XG4gICAgICAgICAgICAgICAgICAgIDxsYWJlbD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiBbKG5nTW9kZWwpXT1cImRhdGFUYWJsZS5leHBhbmRDb2x1bW5WaXNpYmxlXCIvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4+e3tkYXRhVGFibGUudHJhbnNsYXRpb25zLmV4cGFuZENvbHVtbn19PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJkYXRhVGFibGUuaW5kZXhDb2x1bW5cIiBjbGFzcz1cImNvbHVtbi1zZWxlY3Rvci1maXhlZC1jb2x1bW4gY2hlY2tib3hcIj5cbiAgICAgICAgICAgICAgICAgICAgPGxhYmVsPlxuICAgICAgICAgICAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJjaGVja2JveFwiIFsobmdNb2RlbCldPVwiZGF0YVRhYmxlLmluZGV4Q29sdW1uVmlzaWJsZVwiLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuPnt7ZGF0YVRhYmxlLnRyYW5zbGF0aW9ucy5pbmRleENvbHVtbn19PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJkYXRhVGFibGUuc2VsZWN0Q29sdW1uXCIgY2xhc3M9XCJjb2x1bW4tc2VsZWN0b3ItZml4ZWQtY29sdW1uIGNoZWNrYm94XCI+XG4gICAgICAgICAgICAgICAgICAgIDxsYWJlbD5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiBbKG5nTW9kZWwpXT1cImRhdGFUYWJsZS5zZWxlY3RDb2x1bW5WaXNpYmxlXCIvPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4+e3tkYXRhVGFibGUudHJhbnNsYXRpb25zLnNlbGVjdENvbHVtbn19PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGNvbHVtbiBvZiBkYXRhVGFibGUuY29sdW1uc1wiIGNsYXNzPVwiY29sdW1uLXNlbGVjdG9yLWNvbHVtbiBjaGVja2JveFwiPlxuICAgICAgICAgICAgICAgICAgICA8bGFiZWw+XG4gICAgICAgICAgICAgICAgICAgICAgICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgWyhuZ01vZGVsKV09XCJjb2x1bW4udmlzaWJsZVwiLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIFt0ZXh0Q29udGVudF09XCJjb2x1bW4uaGVhZGVyXCI+PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iLCI8ZGF0YS10YWJsZS1oZWFkZXI+PC9kYXRhLXRhYmxlLWhlYWRlcj4iXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7Ozs7OztvQkNjZ0I7TUFBQTtNQUFBLDhCQUFvRjtNQUNoRjtVQUFBLDBEQUFPO1VBQUEsaUNBQ0g7VUFBQTtjQUFBO2NBQUE7a0JBQUE7Y0FBQTtZQUFBO1lBQUE7WUFBQTtjQUFBO2NBQUE7WUFBQTtZQUFBO2NBQUE7Y0FBQTtZQUFBO1lBQXVCO2NBQUE7Y0FBQTtZQUFBO1lBQXZCO1VBQUEsdUNBQUE7VUFBQSxpRUFBQTsrQkFBQTtZQUFBO1VBQUEsNENBQUE7VUFBQTtVQUFBLHFEQUFBO3VCQUFBLG1DQUFBO1VBQUEsNENBQW9FO1VBQUEsaUNBQ3BFO1VBQUE7VUFBQSxnQkFBTSx3Q0FBOEM7VUFBQSw2QkFDaEQ7OztRQUZtQjtRQUF2QixXQUF1QixTQUF2Qjs7O1FBQUE7UUFBQTtRQUFBO1FBQUE7UUFBQTtRQUFBO1FBQUE7UUFBQSxXQUFBLHFFQUFBO1FBQ007UUFBQTs7OztvQkFHZDtNQUFBO01BQUEsOEJBQWlGO01BQzdFO1VBQUEsMERBQU87VUFBQSxpQ0FDSDtVQUFBO2NBQUE7Y0FBQTtrQkFBQTtjQUFBO1lBQUE7WUFBQTtZQUFBO2NBQUE7Y0FBQTtZQUFBO1lBQUE7Y0FBQTtjQUFBO1lBQUE7WUFBdUI7Y0FBQTtjQUFBO1lBQUE7WUFBdkI7VUFBQSx1Q0FBQTtVQUFBLGlFQUFBOytCQUFBO1lBQUE7VUFBQSw0Q0FBQTtVQUFBO1VBQUEscURBQUE7dUJBQUEsbUNBQUE7VUFBQSw0Q0FBbUU7VUFBQSxpQ0FDbkU7VUFBQTtVQUFBLGdCQUFNLHdDQUE2QztVQUFBLDZCQUMvQzs7O1FBRm1CO1FBQXZCLFdBQXVCLFNBQXZCOzs7UUFBQTtRQUFBO1FBQUE7UUFBQTtRQUFBO1FBQUE7UUFBQTtRQUFBLFdBQUEscUVBQUE7UUFDTTtRQUFBOzs7O29CQUdkO01BQUE7TUFBQSw4QkFBa0Y7TUFDOUU7VUFBQSwwREFBTztVQUFBLGlDQUNIO1VBQUE7Y0FBQTtjQUFBO2tCQUFBO2NBQUE7WUFBQTtZQUFBO1lBQUE7Y0FBQTtjQUFBO1lBQUE7WUFBQTtjQUFBO2NBQUE7WUFBQTtZQUF1QjtjQUFBO2NBQUE7WUFBQTtZQUF2QjtVQUFBLHVDQUFBO1VBQUEsaUVBQUE7K0JBQUE7WUFBQTtVQUFBLDRDQUFBO1VBQUE7VUFBQSxxREFBQTt1QkFBQSxtQ0FBQTtVQUFBLDRDQUFvRTtVQUFBLGlDQUNwRTtVQUFBO1VBQUEsZ0JBQU0sd0NBQThDO1VBQUEsNkJBQ2hEOzs7UUFGbUI7UUFBdkIsV0FBdUIsU0FBdkI7OztRQUFBO1FBQUE7UUFBQTtRQUFBO1FBQUE7UUFBQTtRQUFBO1FBQUEsV0FBQSxxRUFBQTtRQUNNO1FBQUE7Ozs7b0JBR2Q7TUFBQTtNQUFBLDhCQUFzRjtNQUNsRjtVQUFBLDBEQUFPO1VBQUEsaUNBQ0g7VUFBQTtjQUFBO2NBQUE7a0JBQUE7Y0FBQTtZQUFBO1lBQUE7Y0FBQTtjQUFBO1lBQUE7WUFBQTtjQUFBO2NBQUE7WUFBQTtZQUF1QjtjQUFBO2NBQUE7WUFBQTtZQUF2QjtVQUFBLHVDQUFBO1VBQUEsaUVBQUE7K0JBQUE7WUFBQTtVQUFBLDRDQUFBO1VBQUE7VUFBQSxxREFBQTt1QkFBQSxtQ0FBQTtVQUFBLDRDQUFxRDtVQUFBLGlDQUNyRDtVQUFBO1VBQUEsOEJBQTJDO01BQ3ZDO0lBRm1CO0lBQXZCLFdBQXVCLFNBQXZCOztJQUFBO0lBQUE7SUFBQTtJQUFBO0lBQUE7SUFBQTtJQUFBO0lBQUEsV0FBQSxxRUFBQTtJQUNNO0lBQU4sWUFBTSxTQUFOOzs7O29CQXRCWjtNQUFBO01BQUEsZ0JBQWlFLHVEQUM3RDthQUFBO2FBQUE7VUFBQSx3QkFLTTtNQUNOO2FBQUE7VUFBQSx3QkFLTTtNQUNOO2FBQUE7VUFBQSx3QkFLTTtNQUNOO2FBQUE7NEJBQUEseUNBS007VUFBQTs7SUF2QkQ7SUFBTCxXQUFLLFNBQUw7SUFNSztJQUFMLFdBQUssU0FBTDtJQU1LO0lBQUwsV0FBSyxTQUFMO0lBTUs7SUFBTCxZQUFLLFNBQUw7Ozs7b0JBaENoQix1Q0FDQTtNQUFBO01BQUEsNENBQStCO01BQzNCO1VBQUE7TUFBNkQsMkNBQzdEO1VBQUE7VUFBQSw4QkFBMEI7TUFDdEI7VUFBQTtRQUFBO1FBQUE7UUFDSTtVQUFBO1VBQUE7UUFBQTtRQURKO01BQUEsZ0NBQ3NDO01BQ2pDO1VBQUE7TUFBNkIsK0NBQ3pCO1VBQUEsaUJBQ1Q7VUFBQTtVQUFBO1lBQUE7WUFBQTtZQUNJO2NBQUE7Y0FBQTtjQUFBO1lBQUE7WUFESjtVQUFBLGdDQUNrRjtNQUM5RTtVQUFBO01BQTBCLCtDQUNyQjtVQUFBLGlCQUNUO1VBQUE7bUJBQUE7UUFBQTtRQUFxQztVQUFBO1VBQUE7UUFBQTtRQUFyQztNQUFBLGdDQUF3RTtNQUNwRTthQUFBO1VBQUEsd0JBeUJNLCtDQUNKO2lCQUFBLDRCQUNKO01BQ0o7O0lBNUJXO0lBQUwsWUFBSyxTQUFMOzs7SUFYVTtJQUFsQixXQUFrQixTQUFsQjtJQU1nRjtJQUE1RSxZQUE0RSxTQUE1RTs7OztvQkNSUjtNQUFBO1FBQUE7UUFBQTtVQUFBO1VBQUE7UUFBQTtRQUFBO01BQUEsNkRBQUE7TUFBQTs7OzsifQ== 352 | -------------------------------------------------------------------------------- /src/components/header.component.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"_closeSelector":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbol":1,"members":[]},"arguments":[{"__symbol":2,"members":[]}]}]],"parameters":[{"__symbol":2,"members":[]}]}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":2,"members":[]}}}}],"lifecycleHooks":[]},"isComponent":true,"selector":"data-table-header","exportAs":null,"inputs":{},"outputs":{},"hostListeners":{"document:click":"_closeSelector()"},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[],"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"animations":[],"ngContentSelectors":[],"encapsulation":0},"componentViewType":{"__symbol":3,"members":[]},"rendererType":{"__symbol":4,"members":[]},"componentFactory":{"__symbol":5,"members":[]}}}],"symbols":[{"__symbol":0,"name":"DataTableHeader","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/header.component.d.ts"},{"__symbol":1,"name":"Inject","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":2,"name":"DataTable","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.component.d.ts"},{"__symbol":3,"name":"View_DataTableHeader_0","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/header.component.ngfactory.d.ts"},{"__symbol":4,"name":"RenderType_DataTableHeader","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/header.component.ngfactory.d.ts"},{"__symbol":5,"name":"DataTableHeaderNgFactory","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/header.component.ngfactory.d.ts"}]} -------------------------------------------------------------------------------- /src/components/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Inject, forwardRef } from '@angular/core'; 2 | import { DataTable } from './table.component'; 3 | import { HEADER_TEMPLATE } from './header.template'; 4 | import { HEADER_STYLE } from "./header.style"; 5 | 6 | 7 | @Component({ 8 | selector: 'data-table-header', 9 | template: HEADER_TEMPLATE, 10 | styles: [HEADER_STYLE], 11 | host: { 12 | '(document:click)': '_closeSelector()' 13 | } 14 | }) 15 | export class DataTableHeader { 16 | 17 | columnSelectorOpen = false; 18 | 19 | _closeSelector() { 20 | this.columnSelectorOpen = false; 21 | } 22 | 23 | constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {} 24 | } 25 | -------------------------------------------------------------------------------- /src/components/header.style.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":"\n.data-table-header {\n min-height: 25px;\n margin-bottom: 10px;\n}\n.title {\n display: inline-block;\n margin: 5px 0 0 5px;\n}\n.button-panel {\n float: right;\n}\n.button-panel button {\n outline: none !important;\n}\n\n.column-selector-wrapper {\n position: relative;\n}\n.column-selector-box {\n box-shadow: 0 0 10px lightgray;\n width: 150px;\n padding: 10px;\n position: absolute;\n right: 0;\n top: 1px;\n z-index: 1060;\n}\n.column-selector-box .checkbox {\n margin-bottom: 4px;\n}\n.column-selector-fixed-column {\n font-style: italic;\n}\n"}],"symbols":[{"__symbol":0,"name":"HEADER_STYLE","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/header.style.d.ts"}]} -------------------------------------------------------------------------------- /src/components/header.style.ts: -------------------------------------------------------------------------------- 1 | export const HEADER_STYLE = ` 2 | .data-table-header { 3 | min-height: 25px; 4 | margin-bottom: 10px; 5 | } 6 | .title { 7 | display: inline-block; 8 | margin: 5px 0 0 5px; 9 | } 10 | .button-panel { 11 | float: right; 12 | } 13 | .button-panel button { 14 | outline: none !important; 15 | } 16 | 17 | .column-selector-wrapper { 18 | position: relative; 19 | } 20 | .column-selector-box { 21 | box-shadow: 0 0 10px lightgray; 22 | width: 150px; 23 | padding: 10px; 24 | position: absolute; 25 | right: 0; 26 | top: 1px; 27 | z-index: 1060; 28 | } 29 | .column-selector-box .checkbox { 30 | margin-bottom: 4px; 31 | } 32 | .column-selector-fixed-column { 33 | font-style: italic; 34 | } 35 | `; -------------------------------------------------------------------------------- /src/components/header.template.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":"\n
\n

\n
\n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n"}],"symbols":[{"__symbol":0,"name":"HEADER_TEMPLATE","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/header.template.d.ts"}]} -------------------------------------------------------------------------------- /src/components/header.template.ts: -------------------------------------------------------------------------------- 1 | export const HEADER_TEMPLATE = ` 2 |
3 |

4 |
5 | 9 | 13 |
14 |
15 |
16 | 20 |
21 |
22 | 26 |
27 |
28 | 32 |
33 |
34 | 38 |
39 |
40 |
41 |
42 |
43 | `; 44 | -------------------------------------------------------------------------------- /src/components/pagination.component.ngfactory.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride} 5 | */ 6 | /* tslint:disable */ 7 | 8 | 9 | import * as i0 from '@angular/core'; 10 | import * as i1 from '../utils/min'; 11 | import * as i2 from './pagination.component'; 12 | import * as i3 from '@angular/forms'; 13 | import * as i4 from './table.component'; 14 | const styles_DataTablePagination:any[] = ['.pagination-box[_ngcontent-%COMP%] {\n position: relative;\n margin-top: -10px;\n}\n.pagination-range[_ngcontent-%COMP%] {\n margin-top: 7px;\n margin-left: 3px;\n display: inline-block;\n}\n.pagination-controllers[_ngcontent-%COMP%] {\n float: right;\n}\n.pagination-controllers[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n min-width: 60px;\n \n text-align: right;\n}\n\n.pagination-limit[_ngcontent-%COMP%] {\n margin-right: 25px;\n display: inline-table;\n width: 150px;\n}\n.pagination-pages[_ngcontent-%COMP%] {\n display: inline-block;\n}\n.pagination-page[_ngcontent-%COMP%] {\n width: 110px;\n display: inline-table;\n}\n.pagination-page[_ngcontent-%COMP%] .input-group-addon[_ngcontent-%COMP%] {\n display: inline;\n}\n.pagination-box[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n outline: none !important;\n}\n.pagination-prevpage[_ngcontent-%COMP%], .pagination-nextpage[_ngcontent-%COMP%], .pagination-firstpage[_ngcontent-%COMP%], .pagination-lastpage[_ngcontent-%COMP%] {\n vertical-align: top;\n}\n.pagination-reload[_ngcontent-%COMP%] {\n color: gray;\n font-size: 12px;\n}']; 15 | export const RenderType_DataTablePagination:i0.RendererType2 = i0.ɵcrt({encapsulation:0, 16 | styles:styles_DataTablePagination,data:{}}); 17 | export function View_DataTablePagination_0(_l:any):i0.ɵViewDefinition { 18 | return i0.ɵvid(0,[i0.ɵpid(0,i1.MinPipe,([] as any[])),(_l()(),i0.ɵted((null as any), 19 | ['\n'])),(_l()(),i0.ɵeld(0,(null as any),(null as any),69,'div',[['class','pagination-box']], 20 | (null as any),(null as any),(null as any),(null as any),(null as any))),(_l()(), 21 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 22 | 9,'div',[['class','pagination-range']],(null as any),(null as any),(null as any), 23 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n ',':\n '])), 24 | (_l()(),i0.ɵeld(0,(null as any),(null as any),0,'span',([] as any[]),[[8,'textContent', 25 | 0]],(null as any),(null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 26 | ['\n -\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 27 | 2,'span',([] as any[]),[[8,'textContent',0]],(null as any),(null as any), 28 | (null as any),(null as any))),i0.ɵpad(2),i0.ɵppd(1),(_l()(),i0.ɵted((null as any), 29 | ['\n /\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 30 | 0,'span',([] as any[]),[[8,'textContent',0]],(null as any),(null as any), 31 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 32 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 33 | 55,'div',[['class','pagination-controllers']],(null as any),(null as any), 34 | (null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 35 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any),15,'div', 36 | [['class','pagination-limit']],(null as any),(null as any),(null as any), 37 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 38 | (_l()(),i0.ɵeld(0,(null as any),(null as any),12,'div',[['class','input-group']], 39 | (null as any),(null as any),(null as any),(null as any),(null as any))), 40 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any), 41 | (null as any),1,'span',[['class','input-group-addon']],(null as any),(null as any), 42 | (null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 43 | ['',':'])),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 44 | i0.ɵeld(0,[['limitInput',1]],(null as any),6,'input',[['class','form-control'], 45 | ['min','1'],['step','1'],['type','number']],[[2,'ng-untouched',(null as any)], 46 | [2,'ng-touched',(null as any)],[2,'ng-pristine',(null as any)],[2,'ng-dirty', 47 | (null as any)],[2,'ng-valid',(null as any)],[2,'ng-invalid',(null as any)], 48 | [2,'ng-pending',(null as any)]],[[(null as any),'blur'],[(null as any), 49 | 'keyup.enter'],[(null as any),'keyup.esc'],[(null as any),'input'],[(null as any), 50 | 'compositionstart'],[(null as any),'compositionend'],[(null as any), 51 | 'change']],(_v,en,$event) => { 52 | var ad:boolean = true; 53 | var _co:i2.DataTablePagination = _v.component; 54 | if (('input' === en)) { 55 | const pd_0:any = ((i0.ɵnov(_v,25)._handleInput($event.target.value)) !== false); 56 | ad = (pd_0 && ad); 57 | } 58 | if (('blur' === en)) { 59 | const pd_1:any = ((i0.ɵnov(_v,25).onTouched()) !== false); 60 | ad = (pd_1 && ad); 61 | } 62 | if (('compositionstart' === en)) { 63 | const pd_2:any = ((i0.ɵnov(_v,25)._compositionStart()) !== false); 64 | ad = (pd_2 && ad); 65 | } 66 | if (('compositionend' === en)) { 67 | const pd_3:any = ((i0.ɵnov(_v,25)._compositionEnd($event.target.value)) !== false); 68 | ad = (pd_3 && ad); 69 | } 70 | if (('change' === en)) { 71 | const pd_4:any = ((i0.ɵnov(_v,26).onChange($event.target.value)) !== false); 72 | ad = (pd_4 && ad); 73 | } 74 | if (('input' === en)) { 75 | const pd_5:any = ((i0.ɵnov(_v,26).onChange($event.target.value)) !== false); 76 | ad = (pd_5 && ad); 77 | } 78 | if (('blur' === en)) { 79 | const pd_6:any = ((i0.ɵnov(_v,26).onTouched()) !== false); 80 | ad = (pd_6 && ad); 81 | } 82 | if (('blur' === en)) { 83 | const pd_7:any = (((_co.limit = i0.ɵnov(_v,24).value)) !== false); 84 | ad = (pd_7 && ad); 85 | } 86 | if (('keyup.enter' === en)) { 87 | const pd_8:any = (((_co.limit = i0.ɵnov(_v,24).value)) !== false); 88 | ad = (pd_8 && ad); 89 | } 90 | if (('keyup.esc' === en)) { 91 | const pd_9:any = (((i0.ɵnov(_v,24).value = _co.limit)) !== false); 92 | ad = (pd_9 && ad); 93 | } 94 | return ad; 95 | },(null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i3.DefaultValueAccessor, 96 | [i0.Renderer2,i0.ElementRef,[2,i3.COMPOSITION_BUFFER_MODE]],(null as any), 97 | (null as any)),i0.ɵdid(16384,(null as any),0,i3.ɵbc,[i0.Renderer2,i0.ElementRef], 98 | (null as any),(null as any)),i0.ɵprd(1024,(null as any),i3.NG_VALUE_ACCESSOR, 99 | (p0_0:any,p1_0:any) => { 100 | return [p0_0,p1_0]; 101 | },[i3.DefaultValueAccessor,i3.ɵbc]),i0.ɵdid(671744,(null as any),0,i3.NgModel, 102 | [[8,(null as any)],[8,(null as any)],[8,(null as any)],[2,i3.NG_VALUE_ACCESSOR]], 103 | {model:[0,'model']},(null as any)),i0.ɵprd(2048,(null as any),i3.NgControl, 104 | (null as any),[i3.NgModel]),i0.ɵdid(16384,(null as any),0,i3.NgControlStatus, 105 | [i3.NgControl],(null as any),(null as any)),(_l()(),i0.ɵted((null as any), 106 | ['\n '])),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 107 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 108 | 35,'div',[['class',' pagination-pages']],(null as any),(null as any),(null as any), 109 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 110 | (_l()(),i0.ɵeld(0,(null as any),(null as any),1,'button',[['class','btn btn-default pagination-firstpage']], 111 | [[8,'disabled',0]],[[(null as any),'click']],(_v,en,$event) => { 112 | var ad:boolean = true; 113 | var _co:i2.DataTablePagination = _v.component; 114 | if (('click' === en)) { 115 | const pd_0:any = ((_co.pageFirst()) !== false); 116 | ad = (pd_0 && ad); 117 | } 118 | return ad; 119 | },(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['«'])),(_l()(), 120 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any), 121 | (null as any),1,'button',[['class','btn btn-default pagination-prevpage']], 122 | [[8,'disabled',0]],[[(null as any),'click']],(_v,en,$event) => { 123 | var ad:boolean = true; 124 | var _co:i2.DataTablePagination = _v.component; 125 | if (('click' === en)) { 126 | const pd_0:any = ((_co.pageBack()) !== false); 127 | ad = (pd_0 && ad); 128 | } 129 | return ad; 130 | },(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['‹'])),(_l()(), 131 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any), 132 | (null as any),20,'div',[['class','pagination-page']],(null as any),(null as any), 133 | (null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 134 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any),17, 135 | 'div',[['class','input-group']],(null as any),(null as any),(null as any), 136 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 137 | (_l()(),i0.ɵeld(0,[['pageInput',1]],(null as any),6,'input',[['class','form-control'], 138 | ['min','1'],['step','1'],['type','number']],[[8,'max',0],[2,'ng-untouched', 139 | (null as any)],[2,'ng-touched',(null as any)],[2,'ng-pristine',(null as any)], 140 | [2,'ng-dirty',(null as any)],[2,'ng-valid',(null as any)],[2,'ng-invalid', 141 | (null as any)],[2,'ng-pending',(null as any)]],[[(null as any),'blur'], 142 | [(null as any),'keyup.enter'],[(null as any),'keyup.esc'],[(null as any), 143 | 'input'],[(null as any),'compositionstart'],[(null as any),'compositionend'], 144 | [(null as any),'change']],(_v,en,$event) => { 145 | var ad:boolean = true; 146 | var _co:i2.DataTablePagination = _v.component; 147 | if (('input' === en)) { 148 | const pd_0:any = ((i0.ɵnov(_v,47)._handleInput($event.target.value)) !== false); 149 | ad = (pd_0 && ad); 150 | } 151 | if (('blur' === en)) { 152 | const pd_1:any = ((i0.ɵnov(_v,47).onTouched()) !== false); 153 | ad = (pd_1 && ad); 154 | } 155 | if (('compositionstart' === en)) { 156 | const pd_2:any = ((i0.ɵnov(_v,47)._compositionStart()) !== false); 157 | ad = (pd_2 && ad); 158 | } 159 | if (('compositionend' === en)) { 160 | const pd_3:any = ((i0.ɵnov(_v,47)._compositionEnd($event.target.value)) !== false); 161 | ad = (pd_3 && ad); 162 | } 163 | if (('change' === en)) { 164 | const pd_4:any = ((i0.ɵnov(_v,48).onChange($event.target.value)) !== false); 165 | ad = (pd_4 && ad); 166 | } 167 | if (('input' === en)) { 168 | const pd_5:any = ((i0.ɵnov(_v,48).onChange($event.target.value)) !== false); 169 | ad = (pd_5 && ad); 170 | } 171 | if (('blur' === en)) { 172 | const pd_6:any = ((i0.ɵnov(_v,48).onTouched()) !== false); 173 | ad = (pd_6 && ad); 174 | } 175 | if (('blur' === en)) { 176 | const pd_7:any = (((_co.page = i0.ɵnov(_v,46).value)) !== false); 177 | ad = (pd_7 && ad); 178 | } 179 | if (('keyup.enter' === en)) { 180 | const pd_8:any = (((_co.page = i0.ɵnov(_v,46).value)) !== false); 181 | ad = (pd_8 && ad); 182 | } 183 | if (('keyup.esc' === en)) { 184 | const pd_9:any = (((i0.ɵnov(_v,46).value = _co.page)) !== false); 185 | ad = (pd_9 && ad); 186 | } 187 | return ad; 188 | },(null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i3.DefaultValueAccessor, 189 | [i0.Renderer2,i0.ElementRef,[2,i3.COMPOSITION_BUFFER_MODE]],(null as any), 190 | (null as any)),i0.ɵdid(16384,(null as any),0,i3.ɵbc,[i0.Renderer2,i0.ElementRef], 191 | (null as any),(null as any)),i0.ɵprd(1024,(null as any),i3.NG_VALUE_ACCESSOR, 192 | (p0_0:any,p1_0:any) => { 193 | return [p0_0,p1_0]; 194 | },[i3.DefaultValueAccessor,i3.ɵbc]),i0.ɵdid(671744,(null as any),0,i3.NgModel, 195 | [[8,(null as any)],[8,(null as any)],[8,(null as any)],[2,i3.NG_VALUE_ACCESSOR]], 196 | {model:[0,'model']},(null as any)),i0.ɵprd(2048,(null as any),i3.NgControl, 197 | (null as any),[i3.NgModel]),i0.ɵdid(16384,(null as any),0,i3.NgControlStatus, 198 | [i3.NgControl],(null as any),(null as any)),(_l()(),i0.ɵted((null as any), 199 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 200 | 6,'div',[['class','input-group-addon']],(null as any),(null as any),(null as any), 201 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 202 | (_l()(),i0.ɵeld(0,(null as any),(null as any),1,'span',([] as any[]),(null as any), 203 | (null as any),(null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 204 | ['/'])),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 205 | i0.ɵeld(0,(null as any),(null as any),0,'span',([] as any[]),[[8,'textContent', 206 | 0]],(null as any),(null as any),(null as any),(null as any))),(_l()(), 207 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any), 208 | ['\n '])),(_l()(),i0.ɵted((null as any),['\n '])), 209 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any), 210 | (null as any),1,'button',[['class','btn btn-default pagination-nextpage']], 211 | [[8,'disabled',0]],[[(null as any),'click']],(_v,en,$event) => { 212 | var ad:boolean = true; 213 | var _co:i2.DataTablePagination = _v.component; 214 | if (('click' === en)) { 215 | const pd_0:any = ((_co.pageForward()) !== false); 216 | ad = (pd_0 && ad); 217 | } 218 | return ad; 219 | },(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['›'])),(_l()(), 220 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any), 221 | (null as any),1,'button',[['class','btn btn-default pagination-lastpage']], 222 | [[8,'disabled',0]],[[(null as any),'click']],(_v,en,$event) => { 223 | var ad:boolean = true; 224 | var _co:i2.DataTablePagination = _v.component; 225 | if (('click' === en)) { 226 | const pd_0:any = ((_co.pageLast()) !== false); 227 | ad = (pd_0 && ad); 228 | } 229 | return ad; 230 | },(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['»'])),(_l()(), 231 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any),['\n '])), 232 | (_l()(),i0.ɵted((null as any),['\n'])),(_l()(),i0.ɵted((null as any),['\n']))], 233 | (_ck,_v) => { 234 | var _co:i2.DataTablePagination = _v.component; 235 | const currVal_12:any = _co.limit; 236 | _ck(_v,28,0,currVal_12); 237 | const currVal_23:any = _co.page; 238 | _ck(_v,50,0,currVal_23); 239 | },(_ck,_v) => { 240 | var _co:i2.DataTablePagination = _v.component; 241 | const currVal_0:any = _co.dataTable.translations.paginationRange; 242 | _ck(_v,5,0,currVal_0); 243 | const currVal_1:any = (_co.dataTable.offset + 1); 244 | _ck(_v,6,0,currVal_1); 245 | const currVal_2:any = i0.ɵunv(_v,8,0,_ck(_v,10,0,i0.ɵnov(_v,0),_ck(_v,9,0, 246 | (_co.dataTable.offset + _co.dataTable.limit),_co.dataTable.itemCount))); 247 | _ck(_v,8,0,currVal_2); 248 | const currVal_3:any = _co.dataTable.itemCount; 249 | _ck(_v,12,0,currVal_3); 250 | const currVal_4:any = _co.dataTable.translations.paginationLimit; 251 | _ck(_v,22,0,currVal_4); 252 | const currVal_5:any = i0.ɵnov(_v,30).ngClassUntouched; 253 | const currVal_6:any = i0.ɵnov(_v,30).ngClassTouched; 254 | const currVal_7:any = i0.ɵnov(_v,30).ngClassPristine; 255 | const currVal_8:any = i0.ɵnov(_v,30).ngClassDirty; 256 | const currVal_9:any = i0.ɵnov(_v,30).ngClassValid; 257 | const currVal_10:any = i0.ɵnov(_v,30).ngClassInvalid; 258 | const currVal_11:any = i0.ɵnov(_v,30).ngClassPending; 259 | _ck(_v,24,0,currVal_5,currVal_6,currVal_7,currVal_8,currVal_9,currVal_10,currVal_11); 260 | const currVal_13:any = (_co.dataTable.offset <= 0); 261 | _ck(_v,36,0,currVal_13); 262 | const currVal_14:any = (_co.dataTable.offset <= 0); 263 | _ck(_v,39,0,currVal_14); 264 | const currVal_15:any = i0.ɵinlineInterpolate(1,'',_co.maxPage,''); 265 | const currVal_16:any = i0.ɵnov(_v,52).ngClassUntouched; 266 | const currVal_17:any = i0.ɵnov(_v,52).ngClassTouched; 267 | const currVal_18:any = i0.ɵnov(_v,52).ngClassPristine; 268 | const currVal_19:any = i0.ɵnov(_v,52).ngClassDirty; 269 | const currVal_20:any = i0.ɵnov(_v,52).ngClassValid; 270 | const currVal_21:any = i0.ɵnov(_v,52).ngClassInvalid; 271 | const currVal_22:any = i0.ɵnov(_v,52).ngClassPending; 272 | _ck(_v,46,0,currVal_15,currVal_16,currVal_17,currVal_18,currVal_19,currVal_20, 273 | currVal_21,currVal_22); 274 | const currVal_24:any = _co.dataTable.lastPage; 275 | _ck(_v,59,0,currVal_24); 276 | const currVal_25:any = ((_co.dataTable.offset + _co.dataTable.limit) >= _co.dataTable.itemCount); 277 | _ck(_v,64,0,currVal_25); 278 | const currVal_26:any = ((_co.dataTable.offset + _co.dataTable.limit) >= _co.dataTable.itemCount); 279 | _ck(_v,67,0,currVal_26); 280 | }); 281 | } 282 | export function View_DataTablePagination_Host_0(_l:any):i0.ɵViewDefinition { 283 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),1,'data-table-pagination', 284 | ([] as any[]),(null as any),(null as any),(null as any),View_DataTablePagination_0, 285 | RenderType_DataTablePagination)),i0.ɵdid(49152,(null as any),0,i2.DataTablePagination, 286 | [i4.DataTable],(null as any),(null as any))],(null as any),(null as any)); 287 | } 288 | export const DataTablePaginationNgFactory:i0.ComponentFactory = i0.ɵccf('data-table-pagination', 289 | i2.DataTablePagination,View_DataTablePagination_Host_0,{},{},([] as any[])); 290 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovVXNlcnMvYWxleC9Eb2N1bWVudHMvR2l0SHViL2FuZ3VsYXItNC1kYXRhLXRhYmxlLWJvb3RzdHJhcC00L3NyYy9jb21wb25lbnRzL3BhZ2luYXRpb24uY29tcG9uZW50Lm5nZmFjdG9yeS50cyIsInZlcnNpb24iOjMsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIm5nOi8vL0M6L1VzZXJzL2FsZXgvRG9jdW1lbnRzL0dpdEh1Yi9hbmd1bGFyLTQtZGF0YS10YWJsZS1ib290c3RyYXAtNC9zcmMvY29tcG9uZW50cy9wYWdpbmF0aW9uLmNvbXBvbmVudC50cyIsIm5nOi8vL0M6L1VzZXJzL2FsZXgvRG9jdW1lbnRzL0dpdEh1Yi9hbmd1bGFyLTQtZGF0YS10YWJsZS1ib290c3RyYXAtNC9zcmMvY29tcG9uZW50cy9wYWdpbmF0aW9uLmNvbXBvbmVudC50cy5EYXRhVGFibGVQYWdpbmF0aW9uLmh0bWwiLCJuZzovLy9DOi9Vc2Vycy9hbGV4L0RvY3VtZW50cy9HaXRIdWIvYW5ndWxhci00LWRhdGEtdGFibGUtYm9vdHN0cmFwLTQvc3JjL2NvbXBvbmVudHMvcGFnaW5hdGlvbi5jb21wb25lbnQudHMuRGF0YVRhYmxlUGFnaW5hdGlvbl9Ib3N0Lmh0bWwiXSwic291cmNlc0NvbnRlbnQiOlsiICIsIlxuPGRpdiBjbGFzcz1cInBhZ2luYXRpb24tYm94XCI+XG4gICAgPGRpdiBjbGFzcz1cInBhZ2luYXRpb24tcmFuZ2VcIj5cbiAgICAgICAge3tkYXRhVGFibGUudHJhbnNsYXRpb25zLnBhZ2luYXRpb25SYW5nZX19OlxuICAgICAgICA8c3BhbiBbdGV4dENvbnRlbnRdPVwiZGF0YVRhYmxlLm9mZnNldCArIDFcIj48L3NwYW4+XG4gICAgICAgIC1cbiAgICAgICAgPHNwYW4gW3RleHRDb250ZW50XT1cIltkYXRhVGFibGUub2Zmc2V0ICsgZGF0YVRhYmxlLmxpbWl0ICwgZGF0YVRhYmxlLml0ZW1Db3VudF0gfCBtaW5cIj48L3NwYW4+XG4gICAgICAgIC9cbiAgICAgICAgPHNwYW4gW3RleHRDb250ZW50XT1cImRhdGFUYWJsZS5pdGVtQ291bnRcIj48L3NwYW4+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInBhZ2luYXRpb24tY29udHJvbGxlcnNcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBhZ2luYXRpb24tbGltaXRcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJpbnB1dC1ncm91cFwiPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiaW5wdXQtZ3JvdXAtYWRkb25cIj57e2RhdGFUYWJsZS50cmFuc2xhdGlvbnMucGFnaW5hdGlvbkxpbWl0fX06PC9zcGFuPlxuICAgICAgICAgICAgICAgIDxpbnB1dCAjbGltaXRJbnB1dCB0eXBlPVwibnVtYmVyXCIgY2xhc3M9XCJmb3JtLWNvbnRyb2xcIiBtaW49XCIxXCIgc3RlcD1cIjFcIlxuICAgICAgICAgICAgICAgICAgICAgICBbbmdNb2RlbF09XCJsaW1pdFwiIChibHVyKT1cImxpbWl0ID0gbGltaXRJbnB1dC52YWx1ZVwiXG4gICAgICAgICAgICAgICAgICAgICAgIChrZXl1cC5lbnRlcik9XCJsaW1pdCA9IGxpbWl0SW5wdXQudmFsdWVcIiAoa2V5dXAuZXNjKT1cImxpbWl0SW5wdXQudmFsdWUgPSBsaW1pdFwiLz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIiBwYWdpbmF0aW9uLXBhZ2VzXCI+XG4gICAgICAgICAgICA8YnV0dG9uIFtkaXNhYmxlZF09XCJkYXRhVGFibGUub2Zmc2V0IDw9IDBcIiAoY2xpY2spPVwicGFnZUZpcnN0KClcIiBjbGFzcz1cImJ0biBidG4tZGVmYXVsdCBwYWdpbmF0aW9uLWZpcnN0cGFnZVwiPiZsYXF1bzs8L2J1dHRvbj5cbiAgICAgICAgICAgIDxidXR0b24gW2Rpc2FibGVkXT1cImRhdGFUYWJsZS5vZmZzZXQgPD0gMFwiIChjbGljayk9XCJwYWdlQmFjaygpXCIgY2xhc3M9XCJidG4gYnRuLWRlZmF1bHQgcGFnaW5hdGlvbi1wcmV2cGFnZVwiPiZsc2FxdW87PC9idXR0b24+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicGFnaW5hdGlvbi1wYWdlXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImlucHV0LWdyb3VwXCI+XG4gICAgICAgICAgICAgICAgICAgIDxpbnB1dCAjcGFnZUlucHV0IHR5cGU9XCJudW1iZXJcIiBjbGFzcz1cImZvcm0tY29udHJvbFwiIG1pbj1cIjFcIiBzdGVwPVwiMVwiIG1heD1cInt7bWF4UGFnZX19XCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ01vZGVsXT1cInBhZ2VcIiAoYmx1cik9XCJwYWdlID0gcGFnZUlucHV0LnZhbHVlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgIChrZXl1cC5lbnRlcik9XCJwYWdlID0gcGFnZUlucHV0LnZhbHVlXCIgKGtleXVwLmVzYyk9XCJwYWdlSW5wdXQudmFsdWUgPSBwYWdlXCIvPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaW5wdXQtZ3JvdXAtYWRkb25cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuPi88L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgICAgICA8c3BhbiBbdGV4dENvbnRlbnRdPVwiZGF0YVRhYmxlLmxhc3RQYWdlXCI+PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGJ1dHRvbiBbZGlzYWJsZWRdPVwiKGRhdGFUYWJsZS5vZmZzZXQgKyBkYXRhVGFibGUubGltaXQpID49IGRhdGFUYWJsZS5pdGVtQ291bnRcIiAoY2xpY2spPVwicGFnZUZvcndhcmQoKVwiIGNsYXNzPVwiYnRuIGJ0bi1kZWZhdWx0IHBhZ2luYXRpb24tbmV4dHBhZ2VcIj4mcnNhcXVvOzwvYnV0dG9uPlxuICAgICAgICAgICAgPGJ1dHRvbiBbZGlzYWJsZWRdPVwiKGRhdGFUYWJsZS5vZmZzZXQgKyBkYXRhVGFibGUubGltaXQpID49IGRhdGFUYWJsZS5pdGVtQ291bnRcIiAoY2xpY2spPVwicGFnZUxhc3QoKVwiIGNsYXNzPVwiYnRuIGJ0bi1kZWZhdWx0IHBhZ2luYXRpb24tbGFzdHBhZ2VcIj4mcmFxdW87PC9idXR0b24+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iLCI8ZGF0YS10YWJsZS1wYWdpbmF0aW9uPjwvZGF0YS10YWJsZS1wYWdpbmF0aW9uPiJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7O3dEQ0FBO01BQUEsU0FDQTtNQUFBLHdFQUE0QjthQUFBLDRCQUN4QjtNQUFBO01BQUEsOEJBQThCO01BRTFCO1VBQUEsOERBQWtEO1VBQUEsNEJBRWxEO1VBQUE7VUFBQSxxQ0FBTSxlQUF3RjtVQUFBLDRCQUU5RjtVQUFBO1VBQUEsOEJBQWlEO01BQy9DLDJDQUNOO1VBQUE7VUFBQSw0Q0FBb0M7VUFBQSxpQkFDaEM7VUFBQTtVQUFBLDhCQUE4QjtNQUMxQjtVQUFBO01BQXlCLHVEQUNyQjtVQUFBO1VBQUEsNENBQWdDO1VBQUEsV0FBa0QsdURBQ2xGO2lCQUFBO2NBQUE7Y0FBQTtrQkFBQTtjQUFBO2NBQUE7Y0FBQTtjQUFBO1lBQUE7WUFBQTtZQUFBO2NBQUE7Y0FBQTtZQUFBO1lBQUE7Y0FBQTtjQUFBO1lBQUE7WUFBQTtjQUFBO2NBQUE7WUFBQTtZQUFBO2NBQUE7Y0FBQTtZQUFBO1lBQUE7Y0FBQTtjQUFBO1lBQUE7WUFBQTtjQUFBO2NBQUE7WUFBQTtZQUFBO2NBQUE7Y0FBQTtZQUFBO1lBQ3lCO2NBQUE7Y0FBQTtZQUFBO1lBQ2xCO2NBQUE7Y0FBQTtZQUFBO1lBQXlDO2NBQUE7Y0FBQTtZQUFBO1lBRmhEO1VBQUEsdUNBQUE7VUFBQTtVQUFBLHNCQUFBO1VBQUEsb0NBQUE7VUFBQTtZQUFBO1VBQUEsMkNBQUE7VUFBQTtVQUFBLDBDQUFBO1VBQUEsbUNBQUE7VUFBQSw0Q0FFd0Y7VUFBQSxxQkFDdEYsK0NBQ0o7aUJBQUEsZ0NBQ047VUFBQTtVQUFBLDhCQUErQjtNQUMzQjtVQUFBO1lBQUE7WUFBQTtZQUEyQztjQUFBO2NBQUE7WUFBQTtZQUEzQztVQUFBLGdDQUE4RyxzQ0FBZ0I7aUJBQUEsb0NBQzlIO1VBQUE7VUFBQTtZQUFBO1lBQUE7WUFBMkM7Y0FBQTtjQUFBO1lBQUE7WUFBM0M7VUFBQSxnQ0FBNEcsc0NBQWlCO2lCQUFBLG9DQUM3SDtVQUFBO1VBQUEsNENBQTZCO1VBQUEseUJBQ3pCO1VBQUE7VUFBQSw4QkFBeUI7TUFDckI7VUFBQTtVQUFBO1VBQUE7Y0FBQTtVQUFBO2NBQUE7VUFBQTtRQUFBO1FBQUE7UUFBQTtVQUFBO1VBQUE7UUFBQTtRQUFBO1VBQUE7VUFBQTtRQUFBO1FBQUE7VUFBQTtVQUFBO1FBQUE7UUFBQTtVQUFBO1VBQUE7UUFBQTtRQUFBO1VBQUE7VUFBQTtRQUFBO1FBQUE7VUFBQTtVQUFBO1FBQUE7UUFBQTtVQUFBO1VBQUE7UUFBQTtRQUN3QjtVQUFBO1VBQUE7UUFBQTtRQUNqQjtVQUFBO1VBQUE7UUFBQTtRQUF1QztVQUFBO1VBQUE7UUFBQTtRQUY5QztNQUFBLHVDQUFBO1VBQUE7VUFBQSxzQkFBQTtVQUFBLG9DQUFBO1VBQUE7WUFBQTtVQUFBLDJDQUFBO1VBQUE7VUFBQSwwQ0FBQTtVQUFBLG1DQUFBO1VBQUEsNENBRW9GO1VBQUEsNkJBQ3BGO1VBQUE7VUFBQSw4QkFBK0I7TUFDM0I7VUFBQSwwREFBTTtVQUFBLFFBQVEsK0RBQ2Q7aUJBQUE7Y0FBQSw4REFBZ0Q7aUJBQUEsNENBQzlDO1VBQUEseUJBQ0o7TUFDSixtREFDTjtVQUFBO1VBQUE7WUFBQTtZQUFBO1lBQWlGO2NBQUE7Y0FBQTtZQUFBO1lBQWpGO1VBQUEsZ0NBQXFKLHNDQUFpQjtpQkFBQSxvQ0FDdEs7VUFBQTtVQUFBO1lBQUE7WUFBQTtZQUFpRjtjQUFBO2NBQUE7WUFBQTtZQUFqRjtVQUFBLGdDQUFrSixzQ0FBZ0I7aUJBQUEsZ0NBQ2hLO01BQ0osdUNBQ0o7OztRQXRCaUI7UUFEUCxZQUNPLFVBRFA7UUFXVztRQURQLFlBQ08sVUFEUDs7O1FBdEJjO1FBQUE7UUFFcEI7UUFBTixXQUFNLFNBQU47UUFFTTtZQUFBO1FBQU4sV0FBTSxTQUFOO1FBRU07UUFBTixZQUFNLFNBQU47UUFLd0M7UUFBQTtRQUNoQztRQUFBO1FBQUE7UUFBQTtRQUFBO1FBQUE7UUFBQTtRQUFBLFlBQUEsdUVBQUE7UUFNSTtRQUFSLFlBQVEsVUFBUjtRQUNRO1FBQVIsWUFBUSxVQUFSO1FBRzhFO1FBQXRFO1FBQUE7UUFBQTtRQUFBO1FBQUE7UUFBQTtRQUFBO1FBQUEsWUFBc0UsV0FBdEU7WUFBQSxxQkFBQTtRQUtVO1FBQU4sWUFBTSxVQUFOO1FBSUo7UUFBUixZQUFRLFVBQVI7UUFDUTtRQUFSLFlBQVEsVUFBUjs7OztvQkNsQ1o7TUFBQTtvQ0FBQSxVQUFBO01BQUE7OzsifQ== 291 | -------------------------------------------------------------------------------- /src/components/pagination.component.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbol":1,"members":[]},"arguments":[{"__symbol":2,"members":[]}]}]],"parameters":[{"__symbol":2,"members":[]}]}],"pageBack":[{"__symbolic":"method"}],"pageForward":[{"__symbolic":"method"}],"pageFirst":[{"__symbolic":"method"}],"pageLast":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":2,"members":[]}}}}],"lifecycleHooks":[]},"isComponent":true,"selector":"data-table-pagination","exportAs":null,"inputs":{},"outputs":{},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[],"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"animations":[],"ngContentSelectors":[],"encapsulation":0},"componentViewType":{"__symbol":3,"members":[]},"rendererType":{"__symbol":4,"members":[]},"componentFactory":{"__symbol":5,"members":[]}}}],"symbols":[{"__symbol":0,"name":"DataTablePagination","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/pagination.component.d.ts"},{"__symbol":1,"name":"Inject","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":2,"name":"DataTable","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.component.d.ts"},{"__symbol":3,"name":"View_DataTablePagination_0","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/pagination.component.ngfactory.d.ts"},{"__symbol":4,"name":"RenderType_DataTablePagination","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/pagination.component.ngfactory.d.ts"},{"__symbol":5,"name":"DataTablePaginationNgFactory","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/pagination.component.ngfactory.d.ts"}]} -------------------------------------------------------------------------------- /src/components/pagination.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Inject, forwardRef } from '@angular/core'; 2 | import { DataTable } from './table.component'; 3 | import { PAGINATION_TEMPLATE } from './pagination.template'; 4 | import { PAGINATION_STYLE } from "./pagination.style"; 5 | 6 | 7 | @Component({ 8 | selector: 'data-table-pagination', 9 | template: PAGINATION_TEMPLATE, 10 | styles: [PAGINATION_STYLE] 11 | }) 12 | export class DataTablePagination { 13 | 14 | constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {} 15 | 16 | pageBack() { 17 | this.dataTable.offset -= Math.min(this.dataTable.limit, this.dataTable.offset); 18 | } 19 | 20 | pageForward() { 21 | this.dataTable.offset += this.dataTable.limit; 22 | } 23 | 24 | pageFirst() { 25 | this.dataTable.offset = 0; 26 | } 27 | 28 | pageLast() { 29 | this.dataTable.offset = (this.maxPage - 1) * this.dataTable.limit; 30 | } 31 | 32 | get maxPage() { 33 | return Math.ceil(this.dataTable.itemCount / this.dataTable.limit); 34 | } 35 | 36 | get limit() { 37 | return this.dataTable.limit; 38 | } 39 | 40 | set limit(value) { 41 | this.dataTable.limit = Number(value); // TODO better way to handle that value of number is string? 42 | } 43 | 44 | get page() { 45 | return this.dataTable.page; 46 | } 47 | 48 | set page(value) { 49 | this.dataTable.page = Number(value); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/components/pagination.style.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":"\n.pagination-box {\n position: relative;\n margin-top: -10px;\n}\n.pagination-range {\n margin-top: 7px;\n margin-left: 3px;\n display: inline-block;\n}\n.pagination-controllers {\n float: right;\n}\n.pagination-controllers input {\n min-width: 60px;\n /*padding: 1px 0px 0px 5px;*/\n text-align: right;\n}\n\n.pagination-limit {\n margin-right: 25px;\n display: inline-table;\n width: 150px;\n}\n.pagination-pages {\n display: inline-block;\n}\n.pagination-page {\n width: 110px;\n display: inline-table;\n}\n.pagination-page .input-group-addon {\n display: inline;\n}\n.pagination-box button {\n outline: none !important;\n}\n.pagination-prevpage,\n.pagination-nextpage,\n.pagination-firstpage,\n.pagination-lastpage {\n vertical-align: top;\n}\n.pagination-reload {\n color: gray;\n font-size: 12px;\n}\n"}],"symbols":[{"__symbol":0,"name":"PAGINATION_STYLE","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/pagination.style.d.ts"}]} -------------------------------------------------------------------------------- /src/components/pagination.style.ts: -------------------------------------------------------------------------------- 1 | export const PAGINATION_STYLE = ` 2 | .pagination-box { 3 | position: relative; 4 | margin-top: -10px; 5 | } 6 | .pagination-range { 7 | margin-top: 7px; 8 | margin-left: 3px; 9 | display: inline-block; 10 | } 11 | .pagination-controllers { 12 | float: right; 13 | } 14 | .pagination-controllers input { 15 | min-width: 60px; 16 | /*padding: 1px 0px 0px 5px;*/ 17 | text-align: right; 18 | } 19 | 20 | .pagination-limit { 21 | margin-right: 25px; 22 | display: inline-table; 23 | width: 150px; 24 | } 25 | .pagination-pages { 26 | display: inline-block; 27 | } 28 | .pagination-page { 29 | width: 110px; 30 | display: inline-table; 31 | } 32 | .pagination-page .input-group-addon { 33 | display: inline; 34 | } 35 | .pagination-box button { 36 | outline: none !important; 37 | } 38 | .pagination-prevpage, 39 | .pagination-nextpage, 40 | .pagination-firstpage, 41 | .pagination-lastpage { 42 | vertical-align: top; 43 | } 44 | .pagination-reload { 45 | color: gray; 46 | font-size: 12px; 47 | } 48 | `; -------------------------------------------------------------------------------- /src/components/pagination.template.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":"\n
\n
\n {{dataTable.translations.paginationRange}}:\n \n -\n \n /\n \n
\n
\n
\n
\n {{dataTable.translations.paginationLimit}}:\n \n
\n
\n
\n \n \n
\n
\n \n
\n /\n \n
\n
\n
\n \n \n
\n
\n
\n"}],"symbols":[{"__symbol":0,"name":"PAGINATION_TEMPLATE","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/pagination.template.d.ts"}]} -------------------------------------------------------------------------------- /src/components/pagination.template.ts: -------------------------------------------------------------------------------- 1 | export const PAGINATION_TEMPLATE = ` 2 |
3 |
4 | {{dataTable.translations.paginationRange}}: 5 | 6 | - 7 | 8 | / 9 | 10 |
11 |
12 |
13 |
14 | {{dataTable.translations.paginationLimit}}: 15 | 18 |
19 |
20 |
21 | 22 | 23 |
24 |
25 | 28 |
29 | / 30 | 31 |
32 |
33 |
34 | 35 | 36 |
37 |
38 |
39 | `; -------------------------------------------------------------------------------- /src/components/row.component.ngfactory.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride} 5 | */ 6 | /* tslint:disable */ 7 | 8 | 9 | import * as i0 from '@angular/core'; 10 | import * as i1 from '@angular/common'; 11 | import * as i2 from '../utils/hide'; 12 | import * as i3 from './row.component'; 13 | import * as i4 from '@angular/forms'; 14 | import * as i5 from './table.component'; 15 | const styles_DataTableRow:any[] = ['.select-column[_ngcontent-%COMP%] {\n text-align: center;\n}\n\n.row-expand-button[_ngcontent-%COMP%] {\n cursor: pointer;\n text-align: center;\n}\n\n.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}']; 16 | export const RenderType_DataTableRow:i0.RendererType2 = i0.ɵcrt({encapsulation:0,styles:styles_DataTableRow, 17 | data:{}}); 18 | function View_DataTableRow_2(_l:any):i0.ɵViewDefinition { 19 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),0,'div',([] as any[]), 20 | [[8,'textContent',0]],(null as any),(null as any),(null as any),(null as any)))], 21 | (null as any),(_ck,_v) => { 22 | var _co:any = _v.component; 23 | const currVal_0:any = _co.item[(_v.parent).context.$implicit.property]; 24 | _ck(_v,0,0,currVal_0); 25 | }); 26 | } 27 | function View_DataTableRow_3(_l:any):i0.ɵViewDefinition { 28 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(16777216,(null as any),(null as any),2,'div',([] as any[]), 29 | (null as any),(null as any),(null as any),(null as any),(null as any))),i0.ɵdid(540672, 30 | (null as any),0,i1.NgTemplateOutlet,[i0.ViewContainerRef],{ngTemplateOutlet:[0, 31 | 'ngTemplateOutlet'],ngOutletContext:[1,'ngOutletContext']},(null as any)), 32 | i0.ɵpod({column:0,row:1,item:2}),(_l()(),i0.ɵand(0,(null as any),(null as any), 33 | 0))],(_ck,_v) => { 34 | var _co:any = _v.component; 35 | const currVal_0:any = (_v.parent).context.$implicit.cellTemplate; 36 | const currVal_1:any = _ck(_v,2,0,(_v.parent).context.$implicit,_co._this, 37 | _co.item); 38 | _ck(_v,1,0,currVal_0,currVal_1); 39 | },(null as any)); 40 | } 41 | function View_DataTableRow_1(_l:any):i0.ɵViewDefinition { 42 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),9,'td',[['class', 43 | 'data-column']],[[4,'background-color',(null as any)]],(null as any),(null as any), 44 | (null as any),(null as any))),i0.ɵdid(278528,(null as any),0,i1.NgClass,[i0.IterableDiffers, 45 | i0.KeyValueDiffers,i0.ElementRef,i0.Renderer],{klass:[0,'klass'],ngClass:[1, 46 | 'ngClass']},(null as any)),i0.ɵdid(16384,(null as any),0,i2.Hide,[i0.ElementRef, 47 | i0.Renderer],{hide:[0,'hide']},(null as any)),(_l()(),i0.ɵted((null as any), 48 | ['\n '])),(_l()(),i0.ɵand(16777216,(null as any),(null as any),1,(null as any), 49 | View_DataTableRow_2)),i0.ɵdid(16384,(null as any),0,i1.NgIf,[i0.ViewContainerRef, 50 | i0.TemplateRef],{ngIf:[0,'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any), 51 | ['\n '])),(_l()(),i0.ɵand(16777216,(null as any),(null as any),1,(null as any), 52 | View_DataTableRow_3)),i0.ɵdid(16384,(null as any),0,i1.NgIf,[i0.ViewContainerRef, 53 | i0.TemplateRef],{ngIf:[0,'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any), 54 | ['\n ']))],(_ck,_v) => { 55 | const currVal_1:any = 'data-column'; 56 | const currVal_2:any = _v.context.$implicit.styleClassObject; 57 | _ck(_v,1,0,currVal_1,currVal_2); 58 | const currVal_3:boolean = !_v.context.$implicit.visible; 59 | _ck(_v,2,0,currVal_3); 60 | const currVal_4:boolean = !_v.context.$implicit.cellTemplate; 61 | _ck(_v,5,0,currVal_4); 62 | const currVal_5:any = _v.context.$implicit.cellTemplate; 63 | _ck(_v,8,0,currVal_5); 64 | },(_ck,_v) => { 65 | var _co:any = _v.component; 66 | const currVal_0:any = _v.context.$implicit.getCellColor(_co._this,_co.index); 67 | _ck(_v,0,0,currVal_0); 68 | }); 69 | } 70 | function View_DataTableRow_4(_l:any):i0.ɵViewDefinition { 71 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),9,'tr',[['class', 72 | 'row-expansion']],(null as any),(null as any),(null as any),(null as any),(null as any))), 73 | i0.ɵdid(16384,(null as any),0,i2.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']}, 74 | (null as any)),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0, 75 | (null as any),(null as any),5,'td',([] as any[]),[[1,'colspan',0]],(null as any), 76 | (null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 77 | ['\n '])),(_l()(),i0.ɵeld(16777216,(null as any),(null as any),2, 78 | 'div',([] as any[]),(null as any),(null as any),(null as any),(null as any), 79 | (null as any))),i0.ɵdid(540672,(null as any),0,i1.NgTemplateOutlet,[i0.ViewContainerRef], 80 | {ngTemplateOutlet:[0,'ngTemplateOutlet'],ngOutletContext:[1,'ngOutletContext']}, 81 | (null as any)),i0.ɵpod({row:0,item:1}),(_l()(),i0.ɵted((null as any),['\n '])), 82 | (_l()(),i0.ɵted((null as any),['\n']))],(_ck,_v) => { 83 | var _co:any = _v.component; 84 | const currVal_0:boolean = !_co.expanded; 85 | _ck(_v,1,0,currVal_0); 86 | const currVal_2:any = _co.dataTable.expandTemplate; 87 | const currVal_3:any = _ck(_v,7,0,_co._this,_co.item); 88 | _ck(_v,6,0,currVal_2,currVal_3); 89 | },(_ck,_v) => { 90 | var _co:any = _v.component; 91 | const currVal_1:any = _co.dataTable.columnCount; 92 | _ck(_v,3,0,currVal_1); 93 | }); 94 | } 95 | export function View_DataTableRow_0(_l:any):i0.ɵViewDefinition { 96 | return i0.ɵvid(0,[(_l()(),i0.ɵted((null as any),['\n'])),(_l()(),i0.ɵeld(0,(null as any), 97 | (null as any),28,'tr',[['class','data-table-row']],[[8,'title',0],[4,'background-color', 98 | (null as any)],[2,'row-odd',(null as any)],[2,'row-even',(null as any)], 99 | [2,'selected',(null as any)],[2,'clickable',(null as any)]],[[(null as any), 100 | 'dblclick'],[(null as any),'click']],(_v,en,$event) => { 101 | var ad:boolean = true; 102 | var _co:i3.DataTableRow = _v.component; 103 | if (('dblclick' === en)) { 104 | const pd_0:any = ((_co.dataTable.rowDoubleClicked(_co._this,$event)) !== false); 105 | ad = (pd_0 && ad); 106 | } 107 | if (('click' === en)) { 108 | const pd_1:any = ((_co.dataTable.rowClicked(_co._this,$event)) !== false); 109 | ad = (pd_1 && ad); 110 | } 111 | return ad; 112 | },(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 113 | i0.ɵeld(0,(null as any),(null as any),8,'td',[['class','row-expand-button']], 114 | (null as any),[[(null as any),'click']],(_v,en,$event) => { 115 | var ad:boolean = true; 116 | var _co:i3.DataTableRow = _v.component; 117 | if (('click' === en)) { 118 | _co.expanded = !_co.expanded; 119 | const pd_0:any = (($event.stopPropagation()) !== false); 120 | ad = (pd_0 && ad); 121 | } 122 | return ad; 123 | },(null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i2.Hide,[i0.ElementRef, 124 | i0.Renderer],{hide:[0,'hide']},(null as any)),(_l()(),i0.ɵted((null as any), 125 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any),1,'span',[['class', 126 | 'fa fa-arrow-circle-o-right']],(null as any),(null as any),(null as any),(null as any), 127 | (null as any))),i0.ɵdid(16384,(null as any),0,i2.Hide,[i0.ElementRef,i0.Renderer], 128 | {hide:[0,'hide']},(null as any)),(_l()(),i0.ɵted((null as any),['\n '])), 129 | (_l()(),i0.ɵeld(0,(null as any),(null as any),1,'span',[['class','fa fa-arrow-circle-o-down']], 130 | (null as any),(null as any),(null as any),(null as any),(null as any))), 131 | i0.ɵdid(16384,(null as any),0,i2.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']}, 132 | (null as any)),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any), 133 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any),1,'td',[['class', 134 | 'index-column']],[[8,'textContent',0]],(null as any),(null as any),(null as any), 135 | (null as any))),i0.ɵdid(16384,(null as any),0,i2.Hide,[i0.ElementRef,i0.Renderer], 136 | {hide:[0,'hide']},(null as any)),(_l()(),i0.ɵted((null as any),['\n '])), 137 | (_l()(),i0.ɵeld(0,(null as any),(null as any),9,'td',[['class','select-column']], 138 | (null as any),(null as any),(null as any),(null as any),(null as any))), 139 | i0.ɵdid(16384,(null as any),0,i2.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']}, 140 | (null as any)),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0, 141 | (null as any),(null as any),5,'input',[['type','checkbox']],[[2,'ng-untouched', 142 | (null as any)],[2,'ng-touched',(null as any)],[2,'ng-pristine',(null as any)], 143 | [2,'ng-dirty',(null as any)],[2,'ng-valid',(null as any)],[2,'ng-invalid', 144 | (null as any)],[2,'ng-pending',(null as any)]],[[(null as any),'ngModelChange'], 145 | [(null as any),'change'],[(null as any),'blur']],(_v,en,$event) => { 146 | var ad:boolean = true; 147 | var _co:i3.DataTableRow = _v.component; 148 | if (('change' === en)) { 149 | const pd_0:any = ((i0.ɵnov(_v,20).onChange($event.target.checked)) !== false); 150 | ad = (pd_0 && ad); 151 | } 152 | if (('blur' === en)) { 153 | const pd_1:any = ((i0.ɵnov(_v,20).onTouched()) !== false); 154 | ad = (pd_1 && ad); 155 | } 156 | if (('ngModelChange' === en)) { 157 | const pd_2:any = (((_co.selected = $event)) !== false); 158 | ad = (pd_2 && ad); 159 | } 160 | return ad; 161 | },(null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i4.CheckboxControlValueAccessor, 162 | [i0.Renderer2,i0.ElementRef],(null as any),(null as any)),i0.ɵprd(1024,(null as any), 163 | i4.NG_VALUE_ACCESSOR,(p0_0:any) => { 164 | return [p0_0]; 165 | },[i4.CheckboxControlValueAccessor]),i0.ɵdid(671744,(null as any),0,i4.NgModel, 166 | [[8,(null as any)],[8,(null as any)],[8,(null as any)],[2,i4.NG_VALUE_ACCESSOR]], 167 | {model:[0,'model']},{update:'ngModelChange'}),i0.ɵprd(2048,(null as any), 168 | i4.NgControl,(null as any),[i4.NgModel]),i0.ɵdid(16384,(null as any),0,i4.NgControlStatus, 169 | [i4.NgControl],(null as any),(null as any)),(_l()(),i0.ɵted((null as any), 170 | ['\n '])),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵand(16777216, 171 | (null as any),(null as any),1,(null as any),View_DataTableRow_1)),i0.ɵdid(802816, 172 | (null as any),0,i1.NgForOf,[i0.ViewContainerRef,i0.TemplateRef,i0.IterableDiffers], 173 | {ngForOf:[0,'ngForOf']},(null as any)),(_l()(),i0.ɵted((null as any),['\n'])), 174 | (_l()(),i0.ɵted((null as any),['\n'])),(_l()(),i0.ɵand(16777216,(null as any), 175 | (null as any),1,(null as any),View_DataTableRow_4)),i0.ɵdid(16384,(null as any), 176 | 0,i1.NgIf,[i0.ViewContainerRef,i0.TemplateRef],{ngIf:[0,'ngIf']},(null as any)), 177 | (_l()(),i0.ɵted((null as any),['\n']))],(_ck,_v) => { 178 | var _co:i3.DataTableRow = _v.component; 179 | const currVal_6:boolean = !_co.dataTable.expandColumnVisible; 180 | _ck(_v,4,0,currVal_6); 181 | const currVal_7:any = _co.expanded; 182 | _ck(_v,7,0,currVal_7); 183 | const currVal_8:boolean = !_co.expanded; 184 | _ck(_v,10,0,currVal_8); 185 | const currVal_10:boolean = !_co.dataTable.indexColumnVisible; 186 | _ck(_v,14,0,currVal_10); 187 | const currVal_11:boolean = !_co.dataTable.selectColumnVisible; 188 | _ck(_v,17,0,currVal_11); 189 | const currVal_19:any = _co.selected; 190 | _ck(_v,22,0,currVal_19); 191 | const currVal_20:any = _co.dataTable.columns; 192 | _ck(_v,28,0,currVal_20); 193 | const currVal_21:any = _co.dataTable.expandableRows; 194 | _ck(_v,32,0,currVal_21); 195 | },(_ck,_v) => { 196 | var _co:i3.DataTableRow = _v.component; 197 | const currVal_0:any = _co.getTooltip(); 198 | const currVal_1:any = _co.dataTable.getRowColor(_co.item,_co.index,_co._this); 199 | const currVal_2:any = ((_co.index % 2) === 0); 200 | const currVal_3:any = ((_co.index % 2) === 1); 201 | const currVal_4:any = _co.selected; 202 | const currVal_5:any = _co.dataTable.selectOnRowClick; 203 | _ck(_v,1,0,currVal_0,currVal_1,currVal_2,currVal_3,currVal_4,currVal_5); 204 | const currVal_9:any = _co.displayIndex; 205 | _ck(_v,13,0,currVal_9); 206 | const currVal_12:any = i0.ɵnov(_v,24).ngClassUntouched; 207 | const currVal_13:any = i0.ɵnov(_v,24).ngClassTouched; 208 | const currVal_14:any = i0.ɵnov(_v,24).ngClassPristine; 209 | const currVal_15:any = i0.ɵnov(_v,24).ngClassDirty; 210 | const currVal_16:any = i0.ɵnov(_v,24).ngClassValid; 211 | const currVal_17:any = i0.ɵnov(_v,24).ngClassInvalid; 212 | const currVal_18:any = i0.ɵnov(_v,24).ngClassPending; 213 | _ck(_v,19,0,currVal_12,currVal_13,currVal_14,currVal_15,currVal_16,currVal_17, 214 | currVal_18); 215 | }); 216 | } 217 | export function View_DataTableRow_Host_0(_l:any):i0.ɵViewDefinition { 218 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),1,'div',[['dataTableRow', 219 | '']],(null as any),(null as any),(null as any),View_DataTableRow_0,RenderType_DataTableRow)), 220 | i0.ɵdid(180224,(null as any),0,i3.DataTableRow,[i5.DataTable],(null as any), 221 | (null as any))],(null as any),(null as any)); 222 | } 223 | export const DataTableRowNgFactory:i0.ComponentFactory = i0.ɵccf('[dataTableRow]', 224 | i3.DataTableRow,View_DataTableRow_Host_0,{item:'item',index:'index'},{selectedChange:'selectedChange'}, 225 | ([] as any[])); 226 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovVXNlcnMvYWxleC9Eb2N1bWVudHMvR2l0SHViL2FuZ3VsYXItNC1kYXRhLXRhYmxlLWJvb3RzdHJhcC00L3NyYy9jb21wb25lbnRzL3Jvdy5jb21wb25lbnQubmdmYWN0b3J5LnRzIiwidmVyc2lvbiI6Mywic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsibmc6Ly8vQzovVXNlcnMvYWxleC9Eb2N1bWVudHMvR2l0SHViL2FuZ3VsYXItNC1kYXRhLXRhYmxlLWJvb3RzdHJhcC00L3NyYy9jb21wb25lbnRzL3Jvdy5jb21wb25lbnQudHMiLCJuZzovLy9DOi9Vc2Vycy9hbGV4L0RvY3VtZW50cy9HaXRIdWIvYW5ndWxhci00LWRhdGEtdGFibGUtYm9vdHN0cmFwLTQvc3JjL2NvbXBvbmVudHMvcm93LmNvbXBvbmVudC50cy5EYXRhVGFibGVSb3cuaHRtbCIsIm5nOi8vL0M6L1VzZXJzL2FsZXgvRG9jdW1lbnRzL0dpdEh1Yi9hbmd1bGFyLTQtZGF0YS10YWJsZS1ib290c3RyYXAtNC9zcmMvY29tcG9uZW50cy9yb3cuY29tcG9uZW50LnRzLkRhdGFUYWJsZVJvd19Ib3N0Lmh0bWwiXSwic291cmNlc0NvbnRlbnQiOlsiICIsIlxuPHRyXHRjbGFzcz1cImRhdGEtdGFibGUtcm93XCJcbiAgICBbdGl0bGVdPVwiZ2V0VG9vbHRpcCgpXCJcbiAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJkYXRhVGFibGUuZ2V0Um93Q29sb3IoaXRlbSwgaW5kZXgsIF90aGlzKVwiXG4gICAgW2NsYXNzLnJvdy1vZGRdPVwiaW5kZXggJSAyID09PSAwXCJcbiAgICBbY2xhc3Mucm93LWV2ZW5dPVwiaW5kZXggJSAyID09PSAxXCJcbiAgICBbY2xhc3Muc2VsZWN0ZWRdPVwic2VsZWN0ZWRcIlxuICAgIFtjbGFzcy5jbGlja2FibGVdPVwiZGF0YVRhYmxlLnNlbGVjdE9uUm93Q2xpY2tcIlxuICAgIChkYmxjbGljayk9XCJkYXRhVGFibGUucm93RG91YmxlQ2xpY2tlZChfdGhpcywgJGV2ZW50KVwiXG4gICAgKGNsaWNrKT1cImRhdGFUYWJsZS5yb3dDbGlja2VkKF90aGlzLCAkZXZlbnQpXCJcbiAgICA+XG4gICAgPHRkIFtoaWRlXT1cIiFkYXRhVGFibGUuZXhwYW5kQ29sdW1uVmlzaWJsZVwiIChjbGljayk9XCJleHBhbmRlZCA9ICFleHBhbmRlZDsgJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCIgY2xhc3M9XCJyb3ctZXhwYW5kLWJ1dHRvblwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImZhIGZhLWFycm93LWNpcmNsZS1vLXJpZ2h0XCIgW2hpZGVdPVwiZXhwYW5kZWRcIj48L3NwYW4+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiZmEgZmEtYXJyb3ctY2lyY2xlLW8tZG93blwiIFtoaWRlXT1cIiFleHBhbmRlZFwiPjwvc3Bhbj5cbiAgICA8L3RkPlxuICAgIDx0ZCBbaGlkZV09XCIhZGF0YVRhYmxlLmluZGV4Q29sdW1uVmlzaWJsZVwiIGNsYXNzPVwiaW5kZXgtY29sdW1uXCIgW3RleHRDb250ZW50XT1cImRpc3BsYXlJbmRleFwiPjwvdGQ+XG4gICAgPHRkIFtoaWRlXT1cIiFkYXRhVGFibGUuc2VsZWN0Q29sdW1uVmlzaWJsZVwiIGNsYXNzPVwic2VsZWN0LWNvbHVtblwiPlxuICAgICAgICA8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgWyhuZ01vZGVsKV09XCJzZWxlY3RlZFwiLz5cbiAgICA8L3RkPlxuICAgIDx0ZCAqbmdGb3I9XCJsZXQgY29sdW1uIG9mIGRhdGFUYWJsZS5jb2x1bW5zXCIgW2hpZGVdPVwiIWNvbHVtbi52aXNpYmxlXCIgW25nQ2xhc3NdPVwiY29sdW1uLnN0eWxlQ2xhc3NPYmplY3RcIiBjbGFzcz1cImRhdGEtY29sdW1uXCJcbiAgICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiY29sdW1uLmdldENlbGxDb2xvcihfdGhpcywgaW5kZXgpXCI+XG4gICAgICAgIDxkaXYgKm5nSWY9XCIhY29sdW1uLmNlbGxUZW1wbGF0ZVwiIFt0ZXh0Q29udGVudF09XCJpdGVtW2NvbHVtbi5wcm9wZXJ0eV1cIj48L2Rpdj5cbiAgICAgICAgPGRpdiAqbmdJZj1cImNvbHVtbi5jZWxsVGVtcGxhdGVcIiBbbmdUZW1wbGF0ZU91dGxldF09XCJjb2x1bW4uY2VsbFRlbXBsYXRlXCIgW25nT3V0bGV0Q29udGV4dF09XCJ7Y29sdW1uOiBjb2x1bW4sIHJvdzogX3RoaXMsIGl0ZW06IGl0ZW19XCI+PC9kaXY+XG4gICAgPC90ZD5cbjwvdHI+XG48dHIgKm5nSWY9XCJkYXRhVGFibGUuZXhwYW5kYWJsZVJvd3NcIiBbaGlkZV09XCIhZXhwYW5kZWRcIiBjbGFzcz1cInJvdy1leHBhbnNpb25cIj5cbiAgICA8dGQgW2F0dHIuY29sc3Bhbl09XCJkYXRhVGFibGUuY29sdW1uQ291bnRcIj5cbiAgICAgICAgPGRpdiBbbmdUZW1wbGF0ZU91dGxldF09XCJkYXRhVGFibGUuZXhwYW5kVGVtcGxhdGVcIiBbbmdPdXRsZXRDb250ZXh0XT1cIntyb3c6IF90aGlzLCBpdGVtOiBpdGVtfVwiPjwvZGl2PlxuICAgIDwvdGQ+XG48L3RyPlxuIiwiPGRpdiBkYXRhVGFibGVSb3c+PC9kaXY+Il0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7O29CQ3FCUTtNQUFBOzs7UUFBa0M7UUFBbEMsV0FBa0MsU0FBbEM7Ozs7b0JBQ0E7TUFBQSwrRUFBQTtNQUFBO1VBQUE7YUFBMEU7OztJQUF6QztJQUF5QztRQUFBO0lBQTFFLFdBQWlDLFVBQXlDLFNBQTFFOzs7O29CQUhKO01BQUE7TUFBQSxxQ0FBQTtrREFBQTtNQUFBLGtDQUFBO2lCQUFBLG1DQUNpRTtNQUFBLGlCQUM3RDtNQUFBLDZCQUFBO29CQUFBLG1DQUE4RTtNQUFBLGlCQUM5RTtNQUFBLDZCQUFBO29CQUFBLG1DQUE2STtNQUFBO0lBSHZDO0lBQXBDO0lBQXRFLFdBQTBHLFVBQXBDLFNBQXRFO0lBQTZDO0lBQTdDLFdBQTZDLFNBQTdDO0lBRVM7SUFBTCxXQUFLLFNBQUw7SUFDSztJQUFMLFdBQUssU0FBTDs7O0lBRkE7SUFESixXQUNJLFNBREo7Ozs7b0JBTUo7TUFBQTthQUFBO1VBQUEsZUFBOEUsMkNBQzFFO1VBQUE7VUFBQSw0Q0FBMkM7VUFBQSxpQkFDdkM7VUFBQTtVQUFBLHVCQUFBO1VBQUE7VUFBQSxzQkFBbUQsaUJBQW1EO01BQ3JHOztJQUg0QjtJQUFyQyxXQUFxQyxTQUFyQztJQUVhO0lBQThDO0lBQW5ELFdBQUssVUFBOEMsU0FBbkQ7OztJQURBO0lBQUosV0FBSSxTQUFKOzs7O29CQTFCSix1Q0FDQTtNQUFBO1VBQUE7VUFBQTtVQUFBO1FBQUE7UUFBQTtRQU9JO1VBQUE7VUFBQTtRQUFBO1FBQ0E7VUFBQTtVQUFBO1FBQUE7UUFSSjtNQUFBLGdDQVNLLDJDQUNEO2FBQUE7VUFBQTtZQUFBO1lBQUE7WUFBNEM7Y0FBQTtjQUFBO2NBQUE7WUFBQTtZQUE1QztVQUFBLHVDQUFBO2lCQUFBLG1DQUErSDtNQUFBLGlCQUMzSDtNQUFBO01BQUEsdUJBQUE7TUFBQSxpQ0FBa0U7TUFDbEU7VUFBQTthQUFBO1VBQUEsZUFBa0UsMkNBQ2pFO1VBQUEsYUFDTDtVQUFBO1VBQUEsdUJBQUE7VUFBQSxpQ0FBa0c7TUFDbEc7VUFBQTthQUFBO1VBQUEsZUFBa0UsK0NBQzlEO1VBQUE7Y0FBQTtjQUFBO2tCQUFBO2NBQUE7WUFBQTtZQUFBO1lBQUE7Y0FBQTtjQUFBO1lBQUE7WUFBQTtjQUFBO2NBQUE7WUFBQTtZQUF1QjtjQUFBO2NBQUE7WUFBQTtZQUF2QjtVQUFBLHVDQUFBO1VBQUEsaUVBQUE7K0JBQUE7WUFBQTtVQUFBLDRDQUFBO1VBQUE7VUFBQSxxREFBQTt1QkFBQSxtQ0FBQTtVQUFBLDRDQUErQztVQUFBLGFBQzlDLDJDQUNMO1VBQUEseUVBQUE7VUFBQTtVQUFBLHVDQUlLO01BQ0osdUNBQ0w7VUFBQSwyREFBQTtVQUFBO01BSUs7O0lBbEJHO0lBQUosV0FBSSxTQUFKO0lBQzZDO0lBQXpDLFdBQXlDLFNBQXpDO0lBQ3dDO0lBQXhDLFlBQXdDLFNBQXhDO0lBRUE7SUFBSixZQUFJLFVBQUo7SUFDSTtJQUFKLFlBQUksVUFBSjtJQUMyQjtJQUF2QixZQUF1QixVQUF2QjtJQUVBO0lBQUosWUFBSSxVQUFKO0lBTUE7SUFBSixZQUFJLFVBQUo7OztJQXZCSTtJQUNBO0lBQ0E7SUFDQTtJQUNBO0lBQ0E7SUFOSixXQUNJLFVBQ0EsVUFDQSxVQUNBLFVBQ0EsVUFDQSxTQU5KO0lBY29FO0lBQWhFLFlBQWdFLFNBQWhFO0lBRUk7SUFBQTtJQUFBO0lBQUE7SUFBQTtJQUFBO0lBQUE7SUFBQSxZQUFBO1FBQUEsVUFBQTs7OztvQkNqQlI7TUFBQTthQUFBO1VBQUE7Ozs7In0= 227 | -------------------------------------------------------------------------------- /src/components/row.component.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]}}]}],"getTooltip":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":[{"__symbol":4,"members":[]}]}]],"parameters":[{"__symbol":4,"members":[]}]}],"ngOnDestroy":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":4,"members":[]}}}}],"lifecycleHooks":[1]},"isComponent":true,"selector":"[dataTableRow]","exportAs":null,"inputs":{"item":"item","index":"index"},"outputs":{"selectedChange":"selectedChange"},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[],"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"animations":[],"ngContentSelectors":[],"encapsulation":0},"componentViewType":{"__symbol":5,"members":[]},"rendererType":{"__symbol":6,"members":[]},"componentFactory":{"__symbol":7,"members":[]}}}],"symbols":[{"__symbol":0,"name":"DataTableRow","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/row.component.d.ts"},{"__symbol":1,"name":"Input","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":2,"name":"Output","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":3,"name":"Inject","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":4,"name":"DataTable","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.component.d.ts"},{"__symbol":5,"name":"View_DataTableRow_0","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/row.component.ngfactory.d.ts"},{"__symbol":6,"name":"RenderType_DataTableRow","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/row.component.ngfactory.d.ts"},{"__symbol":7,"name":"DataTableRowNgFactory","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/row.component.ngfactory.d.ts"}]} -------------------------------------------------------------------------------- /src/components/row.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, Input, Inject, forwardRef, Output, EventEmitter, OnDestroy 3 | } from '@angular/core'; 4 | import { DataTable } from './table.component'; 5 | import { ROW_TEMPLATE } from './row.template'; 6 | import { ROW_STYLE } from "./row.style"; 7 | 8 | 9 | @Component({ 10 | selector: '[dataTableRow]', 11 | template: ROW_TEMPLATE, 12 | styles: [ROW_STYLE] 13 | }) 14 | export class DataTableRow implements OnDestroy { 15 | 16 | @Input() item: any; 17 | @Input() index: number; 18 | 19 | expanded: boolean; 20 | 21 | // row selection: 22 | 23 | private _selected: boolean; 24 | 25 | @Output() selectedChange = new EventEmitter(); 26 | 27 | get selected() { 28 | return this._selected; 29 | } 30 | 31 | set selected(selected) { 32 | this._selected = selected; 33 | this.selectedChange.emit(selected); 34 | } 35 | 36 | // other: 37 | 38 | get displayIndex() { 39 | if (this.dataTable.pagination) { 40 | return this.dataTable.displayParams.offset + this.index + 1; 41 | } else { 42 | return this.index + 1; 43 | } 44 | } 45 | 46 | getTooltip() { 47 | if (this.dataTable.rowTooltip) { 48 | return this.dataTable.rowTooltip(this.item, this, this.index); 49 | } 50 | return ''; 51 | } 52 | 53 | constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {} 54 | 55 | ngOnDestroy() { 56 | this.selected = false; 57 | } 58 | 59 | public _this = this; // FIXME is there no template keyword for this in angular 2? 60 | } 61 | -------------------------------------------------------------------------------- /src/components/row.style.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":"\n.select-column {\n text-align: center;\n}\n\n.row-expand-button {\n cursor: pointer;\n text-align: center;\n}\n\n.clickable {\n cursor: pointer;\n}\n"}],"symbols":[{"__symbol":0,"name":"ROW_STYLE","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/row.style.d.ts"}]} -------------------------------------------------------------------------------- /src/components/row.style.ts: -------------------------------------------------------------------------------- 1 | export const ROW_STYLE = ` 2 | .select-column { 3 | text-align: center; 4 | } 5 | 6 | .row-expand-button { 7 | cursor: pointer; 8 | text-align: center; 9 | } 10 | 11 | .clickable { 12 | cursor: pointer; 13 | } 14 | `; -------------------------------------------------------------------------------- /src/components/row.template.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":"\n\n \n \n \n \n \n \n \n \n \n
\n
\n \n\n\n \n
\n \n\n"}],"symbols":[{"__symbol":0,"name":"ROW_TEMPLATE","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/row.template.d.ts"}]} -------------------------------------------------------------------------------- /src/components/row.template.ts: -------------------------------------------------------------------------------- 1 | export const ROW_TEMPLATE = ` 2 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 |
23 |
24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | `; 32 | -------------------------------------------------------------------------------- /src/components/table.component.ngfactory.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride} 5 | */ 6 | /* tslint:disable */ 7 | 8 | 9 | import * as i0 from '@angular/core'; 10 | import * as i1 from './header.component.ngfactory'; 11 | import * as i2 from './header.component'; 12 | import * as i3 from './table.component'; 13 | import * as i4 from '@angular/common'; 14 | import * as i5 from '../utils/hide'; 15 | import * as i6 from './row.component.ngfactory'; 16 | import * as i7 from './row.component'; 17 | import * as i8 from './pagination.component.ngfactory'; 18 | import * as i9 from './pagination.component'; 19 | import * as i10 from '../utils/px'; 20 | import * as i11 from '@angular/forms'; 21 | const styles_DataTable:any[] = ['[_nghost-%COMP%] .data-table.table > tbody+tbody {\n border-top: none;\n}\n[_nghost-%COMP%] .data-table.table td {\n vertical-align: middle;\n}\n\n[_nghost-%COMP%] .data-table > thead > tr > th, [_nghost-%COMP%] .data-table > tbody > tr > td {\n overflow: hidden;\n}\n\n\n[_nghost-%COMP%] .row-odd {\n background-color: #F6F6F6;\n}\n[_nghost-%COMP%] .row-even {\n}\n\n.data-table[_ngcontent-%COMP%] .substitute-rows[_ngcontent-%COMP%] > tr[_ngcontent-%COMP%]:hover, [_nghost-%COMP%] .data-table .data-table-row:hover {\n background-color: #ECECEC;\n}\n\n\n.data-table[_ngcontent-%COMP%] {\n box-shadow: 0 0 15px rgb(236, 236, 236);\n table-layout: fixed;\n}\n\n\n\n.column-header[_ngcontent-%COMP%] {\n position: relative;\n}\n.expand-column-header[_ngcontent-%COMP%] {\n width: 50px;\n}\n.select-column-header[_ngcontent-%COMP%] {\n width: 50px;\n text-align: center;\n}\n.index-column-header[_ngcontent-%COMP%] {\n width: 40px;\n}\n.column-header.sortable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.column-header[_ngcontent-%COMP%] .column-sort-icon[_ngcontent-%COMP%] {\n float: right;\n}\n.column-header.resizable[_ngcontent-%COMP%] .column-sort-icon[_ngcontent-%COMP%] {\n margin-right: 8px;\n}\n.column-header[_ngcontent-%COMP%] .column-sort-icon[_ngcontent-%COMP%] .column-sortable-icon[_ngcontent-%COMP%] {\n color: lightgray;\n}\n.column-header[_ngcontent-%COMP%] .column-resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n margin: 0;\n padding: 0;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n}\n\n\n\n.data-table-box[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.loading-cover[_ngcontent-%COMP%] {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.3);\n top: 0;\n}']; 22 | export const RenderType_DataTable:i0.RendererType2 = i0.ɵcrt({encapsulation:0,styles:styles_DataTable, 23 | data:{}}); 24 | function View_DataTable_1(_l:any):i0.ɵViewDefinition { 25 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),1,'data-table-header', 26 | ([] as any[]),(null as any),[['document','click']],(_v,en,$event) => { 27 | var ad:boolean = true; 28 | if (('document:click' === en)) { 29 | const pd_0:any = ((i0.ɵnov(_v,1)._closeSelector()) !== false); 30 | ad = (pd_0 && ad); 31 | } 32 | return ad; 33 | },i1.View_DataTableHeader_0,i1.RenderType_DataTableHeader)),i0.ɵdid(49152,(null as any), 34 | 0,i2.DataTableHeader,[i3.DataTable],(null as any),(null as any))],(null as any), 35 | (null as any)); 36 | } 37 | function View_DataTable_3(_l:any):i0.ɵViewDefinition { 38 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),0,'span',([] as any[]), 39 | [[8,'textContent',0]],(null as any),(null as any),(null as any),(null as any)))], 40 | (null as any),(_ck,_v) => { 41 | const currVal_0:any = (_v.parent).context.$implicit.header; 42 | _ck(_v,0,0,currVal_0); 43 | }); 44 | } 45 | function View_DataTable_4(_l:any):i0.ɵViewDefinition { 46 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(16777216,(null as any),(null as any),2,'span', 47 | ([] as any[]),(null as any),(null as any),(null as any),(null as any),(null as any))), 48 | i0.ɵdid(540672,(null as any),0,i4.NgTemplateOutlet,[i0.ViewContainerRef],{ngTemplateOutlet:[0, 49 | 'ngTemplateOutlet'],ngOutletContext:[1,'ngOutletContext']},(null as any)), 50 | i0.ɵpod({column:0}),(_l()(),i0.ɵand(0,(null as any),(null as any),0))],(_ck, 51 | _v) => { 52 | const currVal_0:any = (_v.parent).context.$implicit.headerTemplate; 53 | const currVal_1:any = _ck(_v,2,0,(_v.parent).context.$implicit); 54 | _ck(_v,1,0,currVal_0,currVal_1); 55 | },(null as any)); 56 | } 57 | function View_DataTable_5(_l:any):i0.ɵViewDefinition { 58 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),14,'span',[['class', 59 | 'column-sort-icon']],(null as any),(null as any),(null as any),(null as any), 60 | (null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 61 | (_l()(),i0.ɵeld(0,(null as any),(null as any),1,'i',[['class','fa fa-sort column-sortable-icon']], 62 | (null as any),(null as any),(null as any),(null as any),(null as any))), 63 | i0.ɵdid(16384,(null as any),0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']}, 64 | (null as any)),(_l()(),i0.ɵted((null as any),['\n '])), 65 | (_l()(),i0.ɵeld(0,(null as any),(null as any),8,'span',([] as any[]),(null as any), 66 | (null as any),(null as any),(null as any),(null as any))),i0.ɵdid(16384, 67 | (null as any),0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']},(null as any)), 68 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 69 | i0.ɵeld(0,(null as any),(null as any),1,'i',[['class','fa fa-sort-asc']], 70 | (null as any),(null as any),(null as any),(null as any),(null as any))), 71 | i0.ɵdid(16384,(null as any),0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']}, 72 | (null as any)),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0, 73 | (null as any),(null as any),1,'i',[['class','fa fa-sort-desc']],(null as any), 74 | (null as any),(null as any),(null as any),(null as any))),i0.ɵdid(16384, 75 | (null as any),0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']},(null as any)), 76 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any), 77 | ['\n ']))],(_ck,_v) => { 78 | var _co:any = _v.component; 79 | const currVal_0:any = ((_v.parent).context.$implicit.property === _co.sortBy); 80 | _ck(_v,3,0,currVal_0); 81 | const currVal_1:any = ((_v.parent).context.$implicit.property !== _co.sortBy); 82 | _ck(_v,6,0,currVal_1); 83 | const currVal_2:any = _co.sortAsc; 84 | _ck(_v,9,0,currVal_2); 85 | const currVal_3:boolean = !_co.sortAsc; 86 | _ck(_v,12,0,currVal_3); 87 | },(null as any)); 88 | } 89 | function View_DataTable_6(_l:any):i0.ɵViewDefinition { 90 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),0,'span',[['class', 91 | 'column-resize-handle']],(null as any),[[(null as any),'mousedown']],(_v,en, 92 | $event) => { 93 | var ad:boolean = true; 94 | var _co:any = _v.component; 95 | if (('mousedown' === en)) { 96 | const pd_0:any = ((_co.resizeColumnStart($event,(_v.parent).context.$implicit, 97 | i0.ɵnov((_v.parent),0))) !== false); 98 | ad = (pd_0 && ad); 99 | } 100 | return ad; 101 | },(null as any),(null as any)))],(null as any),(null as any)); 102 | } 103 | function View_DataTable_2(_l:any):i0.ɵViewDefinition { 104 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,[['th',1]],(null as any),16,'th',[['class','column-header']], 105 | [[2,'sortable',(null as any)],[2,'resizable',(null as any)],[4,'width',(null as any)]], 106 | [[(null as any),'click']],(_v,en,$event) => { 107 | var ad:boolean = true; 108 | var _co:any = _v.component; 109 | if (('click' === en)) { 110 | const pd_0:any = ((_co.headerClicked(_v.context.$implicit,$event)) !== false); 111 | ad = (pd_0 && ad); 112 | } 113 | return ad; 114 | },(null as any),(null as any))),i0.ɵdid(278528,(null as any),0,i4.NgClass,[i0.IterableDiffers, 115 | i0.KeyValueDiffers,i0.ElementRef,i0.Renderer],{klass:[0,'klass'],ngClass:[1, 116 | 'ngClass']},(null as any)),i0.ɵdid(16384,(null as any),0,i5.Hide,[i0.ElementRef, 117 | i0.Renderer],{hide:[0,'hide']},(null as any)),i0.ɵppd(1),(_l()(),i0.ɵted((null as any), 118 | ['\n '])),(_l()(),i0.ɵand(16777216,(null as any),(null as any), 119 | 1,(null as any),View_DataTable_3)),i0.ɵdid(16384,(null as any),0,i4.NgIf,[i0.ViewContainerRef, 120 | i0.TemplateRef],{ngIf:[0,'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any), 121 | ['\n '])),(_l()(),i0.ɵand(16777216,(null as any),(null as any), 122 | 1,(null as any),View_DataTable_4)),i0.ɵdid(16384,(null as any),0,i4.NgIf,[i0.ViewContainerRef, 123 | i0.TemplateRef],{ngIf:[0,'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any), 124 | ['\n '])),(_l()(),i0.ɵand(16777216,(null as any),(null as any), 125 | 1,(null as any),View_DataTable_5)),i0.ɵdid(16384,(null as any),0,i4.NgIf,[i0.ViewContainerRef, 126 | i0.TemplateRef],{ngIf:[0,'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any), 127 | ['\n '])),(_l()(),i0.ɵand(16777216,(null as any),(null as any), 128 | 1,(null as any),View_DataTable_6)),i0.ɵdid(16384,(null as any),0,i4.NgIf,[i0.ViewContainerRef, 129 | i0.TemplateRef],{ngIf:[0,'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any), 130 | ['\n ']))],(_ck,_v) => { 131 | const currVal_3:any = 'column-header'; 132 | const currVal_4:any = _v.context.$implicit.styleClassObject; 133 | _ck(_v,1,0,currVal_3,currVal_4); 134 | const currVal_5:boolean = !_v.context.$implicit.visible; 135 | _ck(_v,2,0,currVal_5); 136 | const currVal_6:boolean = !_v.context.$implicit.headerTemplate; 137 | _ck(_v,6,0,currVal_6); 138 | const currVal_7:any = _v.context.$implicit.headerTemplate; 139 | _ck(_v,9,0,currVal_7); 140 | const currVal_8:any = _v.context.$implicit.sortable; 141 | _ck(_v,12,0,currVal_8); 142 | const currVal_9:any = _v.context.$implicit.resizable; 143 | _ck(_v,15,0,currVal_9); 144 | },(_ck,_v) => { 145 | const currVal_0:any = _v.context.$implicit.sortable; 146 | const currVal_1:any = _v.context.$implicit.resizable; 147 | const currVal_2:any = i0.ɵunv(_v,0,2,_ck(_v,3,0,i0.ɵnov((_v.parent),0),_v.context.$implicit.width)); 148 | _ck(_v,0,0,currVal_0,currVal_1,currVal_2); 149 | }); 150 | } 151 | function View_DataTable_7(_l:any):i0.ɵViewDefinition { 152 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),2,'tbody',[['class', 153 | 'data-table-row-wrapper'],['dataTableRow','']],(null as any),[[(null as any), 154 | 'selectedChange']],(_v,en,$event) => { 155 | var ad:boolean = true; 156 | var _co:any = _v.component; 157 | if (('selectedChange' === en)) { 158 | const pd_0:any = ((_co.onRowSelectChanged(i0.ɵnov(_v,1))) !== false); 159 | ad = (pd_0 && ad); 160 | } 161 | return ad; 162 | },i6.View_DataTableRow_0,i6.RenderType_DataTableRow)),i0.ɵdid(180224,[[1,4],['row', 163 | 4]],0,i7.DataTableRow,[i3.DataTable],{item:[0,'item'],index:[1,'index']},{selectedChange:'selectedChange'}), 164 | (_l()(),i0.ɵted((null as any),['\n ']))],(_ck,_v) => { 165 | const currVal_0:any = _v.context.$implicit; 166 | const currVal_1:any = _v.context.index; 167 | _ck(_v,1,0,currVal_0,currVal_1); 168 | },(null as any)); 169 | } 170 | function View_DataTable_10(_l:any):i0.ɵViewDefinition { 171 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),2,'td',([] as any[]), 172 | (null as any),(null as any),(null as any),(null as any),(null as any))),i0.ɵdid(16384, 173 | (null as any),0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']},(null as any)), 174 | (_l()(),i0.ɵted((null as any),['\n ']))],(_ck,_v) => { 175 | const currVal_0:boolean = !_v.context.$implicit.visible; 176 | _ck(_v,1,0,currVal_0); 177 | },(null as any)); 178 | } 179 | function View_DataTable_9(_l:any):i0.ɵViewDefinition { 180 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),13,'tr',([] as any[]), 181 | [[2,'row-odd',(null as any)],[2,'row-even',(null as any)]],(null as any),(null as any), 182 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 183 | (_l()(),i0.ɵeld(0,(null as any),(null as any),1,'td',([] as any[]),(null as any), 184 | (null as any),(null as any),(null as any),(null as any))),i0.ɵdid(16384, 185 | (null as any),0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']},(null as any)), 186 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0, 187 | (null as any),(null as any),2,'td',([] as any[]),(null as any),(null as any), 188 | (null as any),(null as any),(null as any))),i0.ɵdid(16384,(null as any), 189 | 0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']},(null as any)),(_l()(), 190 | i0.ɵted((null as any),[' '])),(_l()(),i0.ɵted((null as any),['\n '])), 191 | (_l()(),i0.ɵeld(0,(null as any),(null as any),1,'td',([] as any[]),(null as any), 192 | (null as any),(null as any),(null as any),(null as any))),i0.ɵdid(16384, 193 | (null as any),0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']},(null as any)), 194 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵand(16777216, 195 | (null as any),(null as any),1,(null as any),View_DataTable_10)),i0.ɵdid(802816, 196 | (null as any),0,i4.NgForOf,[i0.ViewContainerRef,i0.TemplateRef,i0.IterableDiffers], 197 | {ngForOf:[0,'ngForOf']},(null as any))],(_ck,_v) => { 198 | var _co:any = _v.component; 199 | const currVal_2:boolean = !_co.expandColumnVisible; 200 | _ck(_v,3,0,currVal_2); 201 | const currVal_3:boolean = !_co.indexColumnVisible; 202 | _ck(_v,6,0,currVal_3); 203 | const currVal_4:boolean = !_co.selectColumnVisible; 204 | _ck(_v,10,0,currVal_4); 205 | const currVal_5:any = _co.columns; 206 | _ck(_v,13,0,currVal_5); 207 | },(_ck,_v) => { 208 | var _co:any = _v.component; 209 | const currVal_0:any = (((_v.context.index + _co.items.length) % 2) === 0); 210 | const currVal_1:any = (((_v.context.index + _co.items.length) % 2) === 1); 211 | _ck(_v,0,0,currVal_0,currVal_1); 212 | }); 213 | } 214 | function View_DataTable_8(_l:any):i0.ɵViewDefinition { 215 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),4,'tbody',[['class', 216 | 'substitute-rows']],(null as any),(null as any),(null as any),(null as any), 217 | (null as any))),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 218 | i0.ɵand(16777216,(null as any),(null as any),1,(null as any),View_DataTable_9)), 219 | i0.ɵdid(802816,(null as any),0,i4.NgForOf,[i0.ViewContainerRef,i0.TemplateRef, 220 | i0.IterableDiffers],{ngForOf:[0,'ngForOf']},(null as any)),(_l()(),i0.ɵted((null as any), 221 | ['\n ']))],(_ck,_v) => { 222 | var _co:any = _v.component; 223 | const currVal_0:any = _co.substituteItems; 224 | _ck(_v,3,0,currVal_0); 225 | },(null as any)); 226 | } 227 | function View_DataTable_11(_l:any):i0.ɵViewDefinition { 228 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),0,'div',[['class', 229 | 'loading-cover']],(null as any),(null as any),(null as any),(null as any),(null as any)))], 230 | (null as any),(null as any)); 231 | } 232 | function View_DataTable_12(_l:any):i0.ɵViewDefinition { 233 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),1,'data-table-pagination', 234 | ([] as any[]),(null as any),(null as any),(null as any),i8.View_DataTablePagination_0, 235 | i8.RenderType_DataTablePagination)),i0.ɵdid(49152,(null as any),0,i9.DataTablePagination, 236 | [i3.DataTable],(null as any),(null as any))],(null as any),(null as any)); 237 | } 238 | export function View_DataTable_0(_l:any):i0.ɵViewDefinition { 239 | return i0.ɵvid(0,[i0.ɵpid(0,i10.PixelConverter,([] as any[])),i0.ɵqud(671088640, 240 | 1,{rows:1}),(_l()(),i0.ɵted((null as any),['\n'])),(_l()(),i0.ɵeld(0,(null as any), 241 | (null as any),52,'div',[['class','data-table-wrapper']],(null as any),(null as any), 242 | (null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 243 | (_l()(),i0.ɵand(16777216,(null as any),(null as any),1,(null as any),View_DataTable_1)), 244 | i0.ɵdid(16384,(null as any),0,i4.NgIf,[i0.ViewContainerRef,i0.TemplateRef],{ngIf:[0, 245 | 'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any),['\n\n '])),(_l()(), 246 | i0.ɵeld(0,(null as any),(null as any),43,'div',[['class','data-table-box']], 247 | (null as any),(null as any),(null as any),(null as any),(null as any))), 248 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any), 249 | (null as any),37,'table',[['class','table table-condensed data-table']], 250 | (null as any),(null as any),(null as any),(null as any),(null as any))), 251 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0,(null as any), 252 | (null as any),28,'thead',([] as any[]),(null as any),(null as any),(null as any), 253 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 254 | (_l()(),i0.ɵeld(0,(null as any),(null as any),25,'tr',([] as any[]),(null as any), 255 | (null as any),(null as any),(null as any),(null as any))),(_l()(),i0.ɵted((null as any), 256 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 257 | 2,'th',[['class','expand-column-header']],(null as any),(null as any),(null as any), 258 | (null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i5.Hide,[i0.ElementRef, 259 | i0.Renderer],{hide:[0,'hide']},(null as any)),(_l()(),i0.ɵted((null as any), 260 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 261 | 4,'th',[['class','index-column-header']],(null as any),(null as any),(null as any), 262 | (null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i5.Hide,[i0.ElementRef, 263 | i0.Renderer],{hide:[0,'hide']},(null as any)),(_l()(),i0.ɵted((null as any), 264 | ['\n '])),(_l()(),i0.ɵeld(0,(null as any),(null as any), 265 | 0,'span',([] as any[]),[[8,'textContent',0]],(null as any),(null as any), 266 | (null as any),(null as any))),(_l()(),i0.ɵted((null as any),['\n '])), 267 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0, 268 | (null as any),(null as any),10,'th',[['class','select-column-header']],(null as any), 269 | (null as any),(null as any),(null as any),(null as any))),i0.ɵdid(16384, 270 | (null as any),0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']},(null as any)), 271 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵeld(0, 272 | (null as any),(null as any),6,'input',[['type','checkbox']],[[2,'ng-untouched', 273 | (null as any)],[2,'ng-touched',(null as any)],[2,'ng-pristine',(null as any)], 274 | [2,'ng-dirty',(null as any)],[2,'ng-valid',(null as any)],[2,'ng-invalid', 275 | (null as any)],[2,'ng-pending',(null as any)]],[[(null as any),'ngModelChange'], 276 | [(null as any),'change'],[(null as any),'blur']],(_v,en,$event) => { 277 | var ad:boolean = true; 278 | var _co:i3.DataTable = _v.component; 279 | if (('change' === en)) { 280 | const pd_0:any = ((i0.ɵnov(_v,29).onChange($event.target.checked)) !== false); 281 | ad = (pd_0 && ad); 282 | } 283 | if (('blur' === en)) { 284 | const pd_1:any = ((i0.ɵnov(_v,29).onTouched()) !== false); 285 | ad = (pd_1 && ad); 286 | } 287 | if (('ngModelChange' === en)) { 288 | const pd_2:any = (((_co.selectAllCheckbox = $event)) !== false); 289 | ad = (pd_2 && ad); 290 | } 291 | return ad; 292 | },(null as any),(null as any))),i0.ɵdid(16384,(null as any),0,i11.CheckboxControlValueAccessor, 293 | [i0.Renderer2,i0.ElementRef],(null as any),(null as any)),i0.ɵprd(1024,(null as any), 294 | i11.NG_VALUE_ACCESSOR,(p0_0:any) => { 295 | return [p0_0]; 296 | },[i11.CheckboxControlValueAccessor]),i0.ɵdid(671744,(null as any),0,i11.NgModel, 297 | [[8,(null as any)],[8,(null as any)],[8,(null as any)],[2,i11.NG_VALUE_ACCESSOR]], 298 | {model:[0,'model']},{update:'ngModelChange'}),i0.ɵprd(2048,(null as any), 299 | i11.NgControl,(null as any),[i11.NgModel]),i0.ɵdid(16384,(null as any),0, 300 | i11.NgControlStatus,[i11.NgControl],(null as any),(null as any)),i0.ɵdid(16384, 301 | (null as any),0,i5.Hide,[i0.ElementRef,i0.Renderer],{hide:[0,'hide']},(null as any)), 302 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any), 303 | ['\n '])),(_l()(),i0.ɵand(16777216,(null as any),(null as any), 304 | 1,(null as any),View_DataTable_2)),i0.ɵdid(802816,(null as any),0,i4.NgForOf, 305 | [i0.ViewContainerRef,i0.TemplateRef,i0.IterableDiffers],{ngForOf:[0,'ngForOf']}, 306 | (null as any)),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 307 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any), 308 | ['\n '])),(_l()(),i0.ɵand(16777216,(null as any),(null as any), 309 | 1,(null as any),View_DataTable_7)),i0.ɵdid(802816,(null as any),0,i4.NgForOf, 310 | [i0.ViewContainerRef,i0.TemplateRef,i0.IterableDiffers],{ngForOf:[0,'ngForOf']}, 311 | (null as any)),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 312 | i0.ɵand(16777216,(null as any),(null as any),1,(null as any),View_DataTable_8)), 313 | i0.ɵdid(16384,(null as any),0,i4.NgIf,[i0.ViewContainerRef,i0.TemplateRef],{ngIf:[0, 314 | 'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any),['\n '])),(_l()(), 315 | i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵand(16777216,(null as any), 316 | (null as any),1,(null as any),View_DataTable_11)),i0.ɵdid(16384,(null as any), 317 | 0,i4.NgIf,[i0.ViewContainerRef,i0.TemplateRef],{ngIf:[0,'ngIf']},(null as any)), 318 | (_l()(),i0.ɵted((null as any),['\n '])),(_l()(),i0.ɵted((null as any),['\n\n '])), 319 | (_l()(),i0.ɵand(16777216,(null as any),(null as any),1,(null as any),View_DataTable_12)), 320 | i0.ɵdid(16384,(null as any),0,i4.NgIf,[i0.ViewContainerRef,i0.TemplateRef],{ngIf:[0, 321 | 'ngIf']},(null as any)),(_l()(),i0.ɵted((null as any),['\n'])),(_l()(),i0.ɵted((null as any), 322 | ['\n']))],(_ck,_v) => { 323 | var _co:i3.DataTable = _v.component; 324 | const currVal_0:any = _co.header; 325 | _ck(_v,6,0,currVal_0); 326 | const currVal_1:boolean = !_co.expandColumnVisible; 327 | _ck(_v,17,0,currVal_1); 328 | const currVal_2:boolean = !_co.indexColumnVisible; 329 | _ck(_v,20,0,currVal_2); 330 | const currVal_4:boolean = !_co.selectColumnVisible; 331 | _ck(_v,26,0,currVal_4); 332 | const currVal_12:any = _co.selectAllCheckbox; 333 | _ck(_v,31,0,currVal_12); 334 | const currVal_13:boolean = !_co.multiSelect; 335 | _ck(_v,34,0,currVal_13); 336 | const currVal_14:any = _co.columns; 337 | _ck(_v,38,0,currVal_14); 338 | const currVal_15:any = _co.items; 339 | _ck(_v,43,0,currVal_15); 340 | const currVal_16:any = (_co.pagination && _co.substituteRows); 341 | _ck(_v,46,0,currVal_16); 342 | const currVal_17:any = (_co.showReloading && _co.reloading); 343 | _ck(_v,50,0,currVal_17); 344 | const currVal_18:any = _co.pagination; 345 | _ck(_v,54,0,currVal_18); 346 | },(_ck,_v) => { 347 | var _co:i3.DataTable = _v.component; 348 | const currVal_3:any = _co.indexColumnHeader; 349 | _ck(_v,22,0,currVal_3); 350 | const currVal_5:any = i0.ɵnov(_v,33).ngClassUntouched; 351 | const currVal_6:any = i0.ɵnov(_v,33).ngClassTouched; 352 | const currVal_7:any = i0.ɵnov(_v,33).ngClassPristine; 353 | const currVal_8:any = i0.ɵnov(_v,33).ngClassDirty; 354 | const currVal_9:any = i0.ɵnov(_v,33).ngClassValid; 355 | const currVal_10:any = i0.ɵnov(_v,33).ngClassInvalid; 356 | const currVal_11:any = i0.ɵnov(_v,33).ngClassPending; 357 | _ck(_v,28,0,currVal_5,currVal_6,currVal_7,currVal_8,currVal_9,currVal_10,currVal_11); 358 | }); 359 | } 360 | export function View_DataTable_Host_0(_l:any):i0.ɵViewDefinition { 361 | return i0.ɵvid(0,[(_l()(),i0.ɵeld(0,(null as any),(null as any),3,'data-table',([] as any[]), 362 | (null as any),(null as any),(null as any),View_DataTable_0,RenderType_DataTable)), 363 | i0.ɵdid(114688,(null as any),2,i3.DataTable,([] as any[]),(null as any),(null as any)), 364 | i0.ɵqud(603979776,1,{columns:1}),i0.ɵqud(335544320,2,{expandTemplate:0})],(_ck, 365 | _v) => { 366 | _ck(_v,1,0); 367 | },(null as any)); 368 | } 369 | export const DataTableNgFactory:i0.ComponentFactory = i0.ɵccf('data-table', 370 | i3.DataTable,View_DataTable_Host_0,{items:'items',itemCount:'itemCount',headerTitle:'headerTitle', 371 | header:'header',pagination:'pagination',indexColumn:'indexColumn',indexColumnHeader:'indexColumnHeader', 372 | rowColors:'rowColors',rowTooltip:'rowTooltip',selectColumn:'selectColumn', 373 | multiSelect:'multiSelect',substituteRows:'substituteRows',expandableRows:'expandableRows', 374 | translations:'translations',selectOnRowClick:'selectOnRowClick',autoReload:'autoReload', 375 | showReloading:'showReloading',sortBy:'sortBy',sortAsc:'sortAsc',offset:'offset', 376 | limit:'limit',page:'page'},{reload:'reload',rowClick:'rowClick',rowDoubleClick:'rowDoubleClick', 377 | headerClick:'headerClick',cellClick:'cellClick'},([] as any[])); 378 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovVXNlcnMvYWxleC9Eb2N1bWVudHMvR2l0SHViL2FuZ3VsYXItNC1kYXRhLXRhYmxlLWJvb3RzdHJhcC00L3NyYy9jb21wb25lbnRzL3RhYmxlLmNvbXBvbmVudC5uZ2ZhY3RvcnkudHMiLCJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJuZzovLy9DOi9Vc2Vycy9hbGV4L0RvY3VtZW50cy9HaXRIdWIvYW5ndWxhci00LWRhdGEtdGFibGUtYm9vdHN0cmFwLTQvc3JjL2NvbXBvbmVudHMvdGFibGUuY29tcG9uZW50LnRzIiwibmc6Ly8vQzovVXNlcnMvYWxleC9Eb2N1bWVudHMvR2l0SHViL2FuZ3VsYXItNC1kYXRhLXRhYmxlLWJvb3RzdHJhcC00L3NyYy9jb21wb25lbnRzL3RhYmxlLmNvbXBvbmVudC50cy5EYXRhVGFibGUuaHRtbCIsIm5nOi8vL0M6L1VzZXJzL2FsZXgvRG9jdW1lbnRzL0dpdEh1Yi9hbmd1bGFyLTQtZGF0YS10YWJsZS1ib290c3RyYXAtNC9zcmMvY29tcG9uZW50cy90YWJsZS5jb21wb25lbnQudHMuRGF0YVRhYmxlX0hvc3QuaHRtbCJdLCJzb3VyY2VzQ29udGVudCI6WyIgIiwiXG48ZGl2IGNsYXNzPVwiZGF0YS10YWJsZS13cmFwcGVyXCI+XG4gICAgPGRhdGEtdGFibGUtaGVhZGVyICpuZ0lmPVwiaGVhZGVyXCI+PC9kYXRhLXRhYmxlLWhlYWRlcj5cblxuICAgIDxkaXYgY2xhc3M9XCJkYXRhLXRhYmxlLWJveFwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJ0YWJsZSB0YWJsZS1jb25kZW5zZWQgZGF0YS10YWJsZVwiPlxuICAgICAgICAgICAgPHRoZWFkPlxuICAgICAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgICAgICAgPHRoIFtoaWRlXT1cIiFleHBhbmRDb2x1bW5WaXNpYmxlXCIgY2xhc3M9XCJleHBhbmQtY29sdW1uLWhlYWRlclwiPlxuICAgICAgICAgICAgICAgICAgICA8dGggW2hpZGVdPVwiIWluZGV4Q29sdW1uVmlzaWJsZVwiIGNsYXNzPVwiaW5kZXgtY29sdW1uLWhlYWRlclwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4gW3RleHRDb250ZW50XT1cImluZGV4Q29sdW1uSGVhZGVyXCI+PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8L3RoPlxuICAgICAgICAgICAgICAgICAgICA8dGggW2hpZGVdPVwiIXNlbGVjdENvbHVtblZpc2libGVcIiBjbGFzcz1cInNlbGVjdC1jb2x1bW4taGVhZGVyXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8aW5wdXQgW2hpZGVdPVwiIW11bHRpU2VsZWN0XCIgdHlwZT1cImNoZWNrYm94XCIgWyhuZ01vZGVsKV09XCJzZWxlY3RBbGxDaGVja2JveFwiLz5cbiAgICAgICAgICAgICAgICAgICAgPC90aD5cbiAgICAgICAgICAgICAgICAgICAgPHRoICpuZ0Zvcj1cImxldCBjb2x1bW4gb2YgY29sdW1uc1wiICN0aCBbaGlkZV09XCIhY29sdW1uLnZpc2libGVcIiAoY2xpY2spPVwiaGVhZGVyQ2xpY2tlZChjb2x1bW4sICRldmVudClcIlxuICAgICAgICAgICAgICAgICAgICAgICAgW2NsYXNzLnNvcnRhYmxlXT1cImNvbHVtbi5zb3J0YWJsZVwiIFtjbGFzcy5yZXNpemFibGVdPVwiY29sdW1uLnJlc2l6YWJsZVwiXG4gICAgICAgICAgICAgICAgICAgICAgICBbbmdDbGFzc109XCJjb2x1bW4uc3R5bGVDbGFzc09iamVjdFwiIGNsYXNzPVwiY29sdW1uLWhlYWRlclwiIFtzdHlsZS53aWR0aF09XCJjb2x1bW4ud2lkdGggfCBweFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCIhY29sdW1uLmhlYWRlclRlbXBsYXRlXCIgW3RleHRDb250ZW50XT1cImNvbHVtbi5oZWFkZXJcIj48L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgICAgICA8c3BhbiAqbmdJZj1cImNvbHVtbi5oZWFkZXJUZW1wbGF0ZVwiIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImNvbHVtbi5oZWFkZXJUZW1wbGF0ZVwiIFtuZ091dGxldENvbnRleHRdPVwie2NvbHVtbjogY29sdW1ufVwiPjwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY29sdW1uLXNvcnQtaWNvblwiICpuZ0lmPVwiY29sdW1uLnNvcnRhYmxlXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICA8aSBjbGFzcz1cImZhIGZhLXNvcnQgY29sdW1uLXNvcnRhYmxlLWljb25cIiBbaGlkZV09XCJjb2x1bW4ucHJvcGVydHkgPT09IHNvcnRCeVwiPjwvaT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8c3BhbiBbaGlkZV09XCJjb2x1bW4ucHJvcGVydHkgIT09IHNvcnRCeVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8aSBjbGFzcz1cImZhIGZhLXNvcnQtYXNjXCIgIFtoaWRlXT1cInNvcnRBc2NcIj48L2k+XG5cdFx0XHRcdFx0XHRcdFx0PGkgY2xhc3M9XCJmYSBmYS1zb3J0LWRlc2NcIiAgW2hpZGVdPVwiIXNvcnRBc2NcIj48L2k+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJjb2x1bW4ucmVzaXphYmxlXCIgY2xhc3M9XCJjb2x1bW4tcmVzaXplLWhhbmRsZVwiIChtb3VzZWRvd24pPVwicmVzaXplQ29sdW1uU3RhcnQoJGV2ZW50LCBjb2x1bW4sIHRoKVwiPjwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgPC90aD5cbiAgICAgICAgICAgICAgICA8L3RyPlxuICAgICAgICAgICAgPC90aGVhZD5cbiAgICAgICAgICAgIDx0Ym9keSAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtczsgbGV0IGluZGV4PWluZGV4XCIgY2xhc3M9XCJkYXRhLXRhYmxlLXJvdy13cmFwcGVyXCJcbiAgICAgICAgICAgICAgICAgICBkYXRhVGFibGVSb3cgI3JvdyBbaXRlbV09XCJpdGVtXCIgW2luZGV4XT1cImluZGV4XCIgKHNlbGVjdGVkQ2hhbmdlKT1cIm9uUm93U2VsZWN0Q2hhbmdlZChyb3cpXCI+XG4gICAgICAgICAgICA8L3Rib2R5PlxuICAgICAgICAgICAgPHRib2R5IGNsYXNzPVwic3Vic3RpdHV0ZS1yb3dzXCIgKm5nSWY9XCJwYWdpbmF0aW9uICYmIHN1YnN0aXR1dGVSb3dzXCI+XG4gICAgICAgICAgICAgICAgPHRyICpuZ0Zvcj1cImxldCBpdGVtIG9mIHN1YnN0aXR1dGVJdGVtcywgbGV0IGluZGV4ID0gaW5kZXhcIlxuICAgICAgICAgICAgICAgICAgICBbY2xhc3Mucm93LW9kZF09XCIoaW5kZXggKyBpdGVtcy5sZW5ndGgpICUgMiA9PT0gMFwiXG4gICAgICAgICAgICAgICAgICAgIFtjbGFzcy5yb3ctZXZlbl09XCIoaW5kZXggKyBpdGVtcy5sZW5ndGgpICUgMiA9PT0gMVwiXG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPHRkIFtoaWRlXT1cIiFleHBhbmRDb2x1bW5WaXNpYmxlXCI+PC90ZD5cbiAgICAgICAgICAgICAgICAgICAgPHRkIFtoaWRlXT1cIiFpbmRleENvbHVtblZpc2libGVcIj4mbmJzcDs8L3RkPlxuICAgICAgICAgICAgICAgICAgICA8dGQgW2hpZGVdPVwiIXNlbGVjdENvbHVtblZpc2libGVcIj48L3RkPlxuICAgICAgICAgICAgICAgICAgICA8dGQgKm5nRm9yPVwibGV0IGNvbHVtbiBvZiBjb2x1bW5zXCIgW2hpZGVdPVwiIWNvbHVtbi52aXNpYmxlXCI+XG4gICAgICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIDwvdGJvZHk+XG4gICAgICAgIDwvdGFibGU+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJsb2FkaW5nLWNvdmVyXCIgKm5nSWY9XCJzaG93UmVsb2FkaW5nICYmIHJlbG9hZGluZ1wiPjwvZGl2PlxuICAgIDwvZGl2PlxuXG4gICAgPGRhdGEtdGFibGUtcGFnaW5hdGlvbiAqbmdJZj1cInBhZ2luYXRpb25cIj48L2RhdGEtdGFibGUtcGFnaW5hdGlvbj5cbjwvZGl2PlxuIiwiPGRhdGEtdGFibGU+PC9kYXRhLXRhYmxlPiJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztvQkNFSTtNQUFBO1FBQUE7UUFBQTtVQUFBO1VBQUE7UUFBQTtRQUFBO01BQUEsbUVBQUE7TUFBQTs7OztvQkFnQm9CO01BQUE7O1FBQXFDO1FBQXJDLFdBQXFDLFNBQXJDOzs7O29CQUNBO01BQUE7YUFBQTtVQUFBO2FBQStFOztJQUEzQztJQUEyQztJQUEvRSxXQUFvQyxVQUEyQyxTQUEvRTs7OztvQkFDQTtNQUFBO01BQUEsZ0JBQXVEO01BQ3BEO1VBQUE7YUFBQTtVQUFBLGVBQW1GO01BQ2xGO1VBQUEsaUVBQUE7VUFBQTtNQUEwQyx1RUFDdEM7aUJBQUE7Y0FBQTthQUFBO1VBQUEsZUFBZ0QsK0NBQ3hFO1VBQUE7VUFBQSxpRUFBQTtVQUFBO01BQWtELG1FQUN2QjtVQUFBOztJQUptQztJQUEzQyxXQUEyQyxTQUEzQztJQUNPO0lBQU4sV0FBTSxTQUFOO0lBQytCO0lBQTNCLFdBQTJCLFNBQTNCO0lBQ0k7SUFBNUIsWUFBNEIsU0FBNUI7Ozs7b0JBR2dCO01BQUE7WUFBQTtJQUFBO0lBQUE7SUFBNEQ7TUFBQTtpQkFBQTtNQUFBO0lBQUE7SUFBNUQ7RUFBQTs7O29CQVpKO01BQUE7TUFBQTtRQUFBO1FBQUE7UUFBZ0U7VUFBQTtVQUFBO1FBQUE7UUFBaEU7TUFBQSx1Q0FBQTtrREFBQTtNQUFBLGtDQUFBO2lCQUFBLDBDQUU4RCxJQUFrQztNQUFBLGlDQUM1RjtNQUFBLDBDQUFBO29CQUFBLG1DQUEwRTtNQUFBLGlDQUMxRTtNQUFBLDBDQUFBO29CQUFBLG1DQUEySDtNQUFBLGlDQUMzSDtNQUFBLDBDQUFBO29CQUFBLG1DQU1PO01BQUEsaUNBQ1A7TUFBQSwwQ0FBQTtvQkFBQSxtQ0FBdUg7TUFBQTtJQVZuRjtJQUFwQztJQUZKLFdBRXdDLFVBQXBDLFNBRko7SUFBdUM7SUFBdkMsV0FBdUMsU0FBdkM7SUFHVTtJQUFOLFdBQU0sU0FBTjtJQUNNO0lBQU4sV0FBTSxTQUFOO0lBQytCO0lBQS9CLFlBQStCLFNBQS9CO0lBT007SUFBTixZQUFNLFNBQU47O0lBWEE7SUFBbUM7SUFDdUI7SUFGOUQsV0FDSSxVQUFtQyxVQUN1QixTQUY5RDs7OztvQkFnQlI7TUFBQTtNQUFBO0lBQUE7SUFBQTtJQUN1RDtNQUFBO01BQUE7SUFBQTtJQUR2RDtFQUFBLDZEQUFBO01BQUE7TUFDa0c7SUFBekU7SUFBYztJQUR2QyxXQUN5QixVQUFjLFNBRHZDOzs7O29CQVdRO01BQUEsK0VBQUE7TUFBQTtNQUE0RDtJQUF6QjtJQUFuQyxXQUFtQyxTQUFuQzs7OztvQkFQSjtNQUFBO01BQUEsOEJBR0s7TUFDRDtVQUFBLGlFQUFBO1VBQUE7TUFBdUMsMkRBQ3ZDO1VBQUE7VUFBQSxtREFBQTtVQUFBLHVFQUFpQztpQkFBQSx1QkFBVztNQUM1QztVQUFBLGlFQUFBO1VBQUE7TUFBdUMsMkRBQ3ZDO1VBQUEsdUVBQUE7VUFBQTtVQUFBOztJQUhJO0lBQUosV0FBSSxTQUFKO0lBQ0k7SUFBSixXQUFJLFNBQUo7SUFDSTtJQUFKLFlBQUksU0FBSjtJQUNJO0lBQUosWUFBSSxTQUFKOzs7SUFOQTtJQUNBO0lBRkosV0FDSSxVQUNBLFNBRko7Ozs7b0JBREo7TUFBQTtNQUFBLGdCQUFvRSx1REFDaEU7YUFBQTthQUFBOzRCQUFBLHlDQVFLO1VBQUE7O0lBUkQ7SUFBSixXQUFJLFNBQUo7Ozs7b0JBV1I7TUFBQTs7OztvQkFHSjtNQUFBO3VDQUFBLFVBQUE7TUFBQTs7OztrQkFqREosdUNBQ0E7TUFBQTtNQUFBLDRDQUFnQztNQUM1QjthQUFBO1VBQUEsd0JBQXNELDZDQUV0RDtpQkFBQTtjQUFBO01BQTRCLCtDQUN4QjtVQUFBO1VBQUE7TUFBZ0QsbURBQzVDO1VBQUE7VUFBQSw4QkFBTztNQUNIO1VBQUEsMERBQUk7VUFBQSw2QkFDQTtVQUFBO1VBQUEscUNBQUE7cUJBQUEsbUNBQStEO1VBQUEsNkJBQy9EO1VBQUE7VUFBQSxxQ0FBQTtxQkFBQSxtQ0FBNkQ7VUFBQSxpQ0FDekQ7VUFBQTtVQUFBLDhCQUErQztNQUM5QywyREFDTDtVQUFBO1VBQUEsaUVBQUE7VUFBQTtNQUErRCwrREFDM0Q7VUFBQTtjQUFBO2NBQUE7a0JBQUE7Y0FBQTtZQUFBO1lBQUE7WUFBQTtjQUFBO2NBQUE7WUFBQTtZQUFBO2NBQUE7Y0FBQTtZQUFBO1lBQTZDO2NBQUE7Y0FBQTtZQUFBO1lBQTdDO1VBQUEsdUNBQUE7VUFBQSxpRUFBQTtnQ0FBQTtZQUFBO1VBQUEsNkNBQUE7VUFBQTtVQUFBLHFEQUFBO3dCQUFBLG9DQUFBOzhCQUFBLG9EQUFBO1VBQUE7TUFBOEUsMkRBQzdFO1VBQUEsNkJBQ0w7VUFBQSwwQ0FBQTtVQUFBO1VBQUEsZUFhSyx1REFDSjtpQkFBQSxvQ0FDRDtVQUFBLHFCQUNSO1VBQUEsMENBQUE7VUFBQTtVQUFBLGVBRVEsbURBQ1I7aUJBQUE7YUFBQTtVQUFBLHdCQVVRLCtDQUNKO2lCQUFBLGdDQUNSO1VBQUEseURBQUE7VUFBQTtNQUFvRSwyQ0FDbEU7TUFFTjthQUFBO1VBQUEsd0JBQWtFLHVDQUNoRTtVQUFBOztJQWhEaUI7SUFBbkIsV0FBbUIsU0FBbkI7SUFNb0I7SUFBSixZQUFJLFNBQUo7SUFDSTtJQUFKLFlBQUksU0FBSjtJQUdJO0lBQUosWUFBSSxTQUFKO0lBQ2lEO0lBQTdDLFlBQTZDLFVBQTdDO0lBQU87SUFBUCxZQUFPLFVBQVA7SUFFQTtJQUFKLFlBQUksVUFBSjtJQWdCRDtJQUFQLFlBQU8sVUFBUDtJQUcrQjtJQUEvQixZQUErQixVQUEvQjtJQVl1QjtJQUEzQixZQUEyQixVQUEzQjtJQUdtQjtJQUF2QixZQUF1QixVQUF2Qjs7O0lBdkMwQjtJQUFOLFlBQU0sU0FBTjtJQUdBO0lBQUE7SUFBQTtJQUFBO0lBQUE7SUFBQTtJQUFBO0lBQUEsWUFBQSx1RUFBQTs7OztvQkNieEI7TUFBQTthQUFBO2FBQUE7O0lBQUE7Ozs7Ozs7Ozs7OyJ9 379 | -------------------------------------------------------------------------------- /src/components/table.component.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"itemCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":[{"__symbol":3,"members":[]}]}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":[{"__symbol":5,"members":[]}]}]}],"expandTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["dataTableExpand"]}]}],"headerTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"pagination":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"indexColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"indexColumnHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"rowColors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"rowTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"selectColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"multiSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"substituteRows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"expandableRows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"translations":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"selectOnRowClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"autoReload":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"showReloading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"sortBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"sortAsc":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"limit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"sort":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"_initDefaultValues":[{"__symbolic":"method"}],"_initDefaultClickEvents":[{"__symbolic":"method"}],"reload":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":7,"members":[]}}]}],"reloadItems":[{"__symbolic":"method"}],"_onReloadFinished":[{"__symbolic":"method"}],"_updateDisplayParams":[{"__symbolic":"method"}],"_triggerReload":[{"__symbolic":"method"}],"rowClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":7,"members":[]}}]}],"rowDoubleClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":7,"members":[]}}]}],"headerClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":7,"members":[]}}]}],"cellClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":7,"members":[]}}]}],"rowClicked":[{"__symbolic":"method"}],"rowDoubleClicked":[{"__symbolic":"method"}],"headerClicked":[{"__symbolic":"method"}],"cellClicked":[{"__symbolic":"method"}],"_getRemoteParameters":[{"__symbolic":"method"}],"sortColumn":[{"__symbolic":"method"}],"getRowColor":[{"__symbolic":"method"}],"_onSelectAllChanged":[{"__symbolic":"method"}],"onRowSelectChanged":[{"__symbolic":"method"}],"resizeColumnStart":[{"__symbolic":"method"}],"_isResizeInLimit":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[0]},"isComponent":true,"selector":"data-table","exportAs":null,"inputs":{"items":"items","itemCount":"itemCount","headerTitle":"headerTitle","header":"header","pagination":"pagination","indexColumn":"indexColumn","indexColumnHeader":"indexColumnHeader","rowColors":"rowColors","rowTooltip":"rowTooltip","selectColumn":"selectColumn","multiSelect":"multiSelect","substituteRows":"substituteRows","expandableRows":"expandableRows","translations":"translations","selectOnRowClick":"selectOnRowClick","autoReload":"autoReload","showReloading":"showReloading","sortBy":"sortBy","sortAsc":"sortAsc","offset":"offset","limit":"limit","page":"page"},"outputs":{"reload":"reload","rowClick":"rowClick","rowDoubleClick":"rowDoubleClick","headerClick":"headerClick","cellClick":"cellClick"},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[{"selectors":[{"identifier":{"reference":{"__symbol":3,"members":[]}}}],"first":false,"descendants":false,"propertyName":"columns","read":null},{"selectors":[{"value":"dataTableExpand"}],"first":true,"descendants":true,"propertyName":"expandTemplate","read":null}],"viewQueries":[{"selectors":[{"identifier":{"reference":{"__symbol":5,"members":[]}}}],"first":false,"descendants":true,"propertyName":"rows","read":null}],"entryComponents":[],"changeDetection":1,"template":{"animations":[],"ngContentSelectors":[],"encapsulation":0},"componentViewType":{"__symbol":8,"members":[]},"rendererType":{"__symbol":9,"members":[]},"componentFactory":{"__symbol":10,"members":[]}}}],"symbols":[{"__symbol":0,"name":"DataTable","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.component.d.ts"},{"__symbol":1,"name":"Input","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":2,"name":"ContentChildren","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":3,"name":"DataTableColumn","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/column.component.d.ts"},{"__symbol":4,"name":"ViewChildren","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":5,"name":"DataTableRow","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/row.component.d.ts"},{"__symbol":6,"name":"ContentChild","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":7,"name":"Output","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":8,"name":"View_DataTable_0","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.component.ngfactory.d.ts"},{"__symbol":9,"name":"RenderType_DataTable","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.component.ngfactory.d.ts"},{"__symbol":10,"name":"DataTableNgFactory","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.component.ngfactory.d.ts"}]} -------------------------------------------------------------------------------- /src/components/table.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, Input, Output, EventEmitter, ContentChildren, QueryList, 3 | TemplateRef, ContentChild, ViewChildren, OnInit 4 | } from '@angular/core'; 5 | import { DataTableColumn } from './column.component'; 6 | import { DataTableRow } from './row.component'; 7 | import { DataTableParams } from './types'; 8 | import { RowCallback } from './types'; 9 | import { DataTableTranslations, defaultTranslations } from './types'; 10 | import { drag } from '../utils/drag'; 11 | import { TABLE_TEMPLATE } from './table.template'; 12 | import { TABLE_STYLE } from "./table.style"; 13 | 14 | 15 | 16 | @Component({ 17 | selector: 'data-table', 18 | template: TABLE_TEMPLATE, 19 | styles: [TABLE_STYLE] 20 | }) 21 | export class DataTable implements DataTableParams, OnInit { 22 | 23 | private _items: any[] = []; 24 | 25 | @Input() get items() { 26 | return this._items; 27 | } 28 | 29 | set items(items: any[]) { 30 | this._items = items; 31 | this._onReloadFinished(); 32 | } 33 | 34 | @Input() itemCount: number; 35 | 36 | // UI components: 37 | 38 | @ContentChildren(DataTableColumn) columns: QueryList; 39 | @ViewChildren(DataTableRow) rows: QueryList; 40 | @ContentChild('dataTableExpand') expandTemplate: TemplateRef; 41 | 42 | // One-time optional bindings with default values: 43 | 44 | @Input() headerTitle: string; 45 | @Input() header = true; 46 | @Input() pagination = true; 47 | @Input() indexColumn = true; 48 | @Input() indexColumnHeader = ''; 49 | @Input() rowColors: RowCallback; 50 | @Input() rowTooltip: RowCallback; 51 | @Input() selectColumn = false; 52 | @Input() multiSelect = true; 53 | @Input() substituteRows = true; 54 | @Input() expandableRows = false; 55 | @Input() translations: DataTableTranslations = defaultTranslations; 56 | @Input() selectOnRowClick = false; 57 | @Input() autoReload = true; 58 | @Input() showReloading = false; 59 | 60 | // UI state without input: 61 | 62 | indexColumnVisible: boolean; 63 | selectColumnVisible: boolean; 64 | expandColumnVisible: boolean; 65 | 66 | // UI state: visible ge/set for the outside with @Input for one-time initial values 67 | 68 | private _sortBy: string; 69 | private _sortAsc = true; 70 | 71 | private _offset = 0; 72 | private _limit = 10; 73 | 74 | @Input() 75 | get sortBy() { 76 | return this._sortBy; 77 | } 78 | 79 | set sortBy(value) { 80 | this._sortBy = value; 81 | this._triggerReload(); 82 | } 83 | 84 | @Input() 85 | get sortAsc() { 86 | return this._sortAsc; 87 | } 88 | 89 | set sortAsc(value) { 90 | this._sortAsc = value; 91 | this._triggerReload(); 92 | } 93 | 94 | @Input() 95 | get offset() { 96 | return this._offset; 97 | } 98 | 99 | set offset(value) { 100 | this._offset = value; 101 | this._triggerReload(); 102 | } 103 | 104 | @Input() 105 | get limit() { 106 | return this._limit; 107 | } 108 | 109 | set limit(value) { 110 | this._limit = value; 111 | this._triggerReload(); 112 | } 113 | 114 | // calculated property: 115 | 116 | @Input() 117 | get page() { 118 | return Math.floor(this.offset / this.limit) + 1; 119 | } 120 | 121 | set page(value) { 122 | this.offset = (value - 1) * this.limit; 123 | } 124 | 125 | get lastPage() { 126 | return Math.ceil(this.itemCount / this.limit); 127 | } 128 | 129 | // setting multiple observable properties simultaneously 130 | 131 | sort(sortBy: string, asc: boolean) { 132 | this.sortBy = sortBy; 133 | this.sortAsc = asc; 134 | } 135 | 136 | // init 137 | 138 | ngOnInit() { 139 | this._initDefaultValues(); 140 | this._initDefaultClickEvents(); 141 | this._updateDisplayParams(); 142 | 143 | if (this.autoReload && this._scheduledReload == null) { 144 | this.reloadItems(); 145 | } 146 | } 147 | 148 | private _initDefaultValues() { 149 | this.indexColumnVisible = this.indexColumn; 150 | this.selectColumnVisible = this.selectColumn; 151 | this.expandColumnVisible = this.expandableRows; 152 | } 153 | 154 | private _initDefaultClickEvents() { 155 | this.headerClick.subscribe(tableEvent => this.sortColumn(tableEvent.column)); 156 | if (this.selectOnRowClick) { 157 | this.rowClick.subscribe(tableEvent => tableEvent.row.selected = !tableEvent.row.selected); 158 | } 159 | } 160 | 161 | // Reloading: 162 | 163 | _reloading = false; 164 | 165 | get reloading() { 166 | return this._reloading; 167 | } 168 | 169 | @Output() reload = new EventEmitter(); 170 | 171 | reloadItems() { 172 | this._reloading = true; 173 | this.reload.emit(this._getRemoteParameters()); 174 | } 175 | 176 | private _onReloadFinished() { 177 | this._updateDisplayParams(); 178 | 179 | this._selectAllCheckbox = false; 180 | this._reloading = false; 181 | } 182 | 183 | _displayParams = {}; // params of the last finished reload 184 | 185 | get displayParams() { 186 | return this._displayParams; 187 | } 188 | 189 | _updateDisplayParams() { 190 | this._displayParams = { 191 | sortBy: this.sortBy, 192 | sortAsc: this.sortAsc, 193 | offset: this.offset, 194 | limit: this.limit 195 | }; 196 | } 197 | 198 | _scheduledReload = null; 199 | 200 | // for avoiding cascading reloads if multiple params are set at once: 201 | _triggerReload() { 202 | if (this._scheduledReload) { 203 | clearTimeout(this._scheduledReload); 204 | } 205 | this._scheduledReload = setTimeout(() => { 206 | this.reloadItems(); 207 | }); 208 | } 209 | 210 | // event handlers: 211 | 212 | @Output() rowClick = new EventEmitter(); 213 | @Output() rowDoubleClick = new EventEmitter(); 214 | @Output() headerClick = new EventEmitter(); 215 | @Output() cellClick = new EventEmitter(); 216 | 217 | public rowClicked(row: DataTableRow, event) { 218 | this.rowClick.emit({ row, event }); 219 | } 220 | 221 | public rowDoubleClicked(row: DataTableRow, event) { 222 | this.rowDoubleClick.emit({ row, event }); 223 | } 224 | 225 | private headerClicked(column: DataTableColumn, event: MouseEvent) { 226 | if (!this._resizeInProgress) { 227 | this.headerClick.emit({ column, event }); 228 | } else { 229 | this._resizeInProgress = false; // this is because I can't prevent click from mousup of the drag end 230 | } 231 | } 232 | 233 | private cellClicked(column: DataTableColumn, row: DataTableRow, event: MouseEvent) { 234 | this.cellClick.emit({ row, column, event }); 235 | } 236 | 237 | // functions: 238 | 239 | private _getRemoteParameters(): DataTableParams { 240 | let params = {}; 241 | 242 | if (this.sortBy) { 243 | params.sortBy = this.sortBy; 244 | params.sortAsc = this.sortAsc; 245 | } 246 | if (this.pagination) { 247 | params.offset = this.offset; 248 | params.limit = this.limit; 249 | } 250 | return params; 251 | } 252 | 253 | private sortColumn(column: DataTableColumn) { 254 | if (column.sortable) { 255 | let ascending = this.sortBy === column.property ? !this.sortAsc : true; 256 | this.sort(column.property, ascending); 257 | } 258 | } 259 | 260 | get columnCount() { 261 | let count = 0; 262 | count += this.indexColumnVisible ? 1 : 0; 263 | count += this.selectColumnVisible ? 1 : 0; 264 | count += this.expandColumnVisible ? 1 : 0; 265 | this.columns.toArray().forEach(column => { 266 | count += column.visible ? 1 : 0; 267 | }); 268 | return count; 269 | } 270 | 271 | public getRowColor(item: any, index: number, row: DataTableRow) { 272 | if (this.rowColors !== undefined) { 273 | return (this.rowColors)(item, row, index); 274 | } 275 | } 276 | 277 | // selection: 278 | 279 | selectedRow: DataTableRow; 280 | selectedRows: DataTableRow[] = []; 281 | 282 | private _selectAllCheckbox = false; 283 | 284 | get selectAllCheckbox() { 285 | return this._selectAllCheckbox; 286 | } 287 | 288 | set selectAllCheckbox(value) { 289 | this._selectAllCheckbox = value; 290 | this._onSelectAllChanged(value); 291 | } 292 | 293 | private _onSelectAllChanged(value: boolean) { 294 | this.rows.toArray().forEach(row => row.selected = value); 295 | } 296 | 297 | onRowSelectChanged(row: DataTableRow) { 298 | 299 | // maintain the selectedRow(s) view 300 | if (this.multiSelect) { 301 | let index = this.selectedRows.indexOf(row); 302 | if (row.selected && index < 0) { 303 | this.selectedRows.push(row); 304 | } else if (!row.selected && index >= 0) { 305 | this.selectedRows.splice(index, 1); 306 | } 307 | } else { 308 | if (row.selected) { 309 | this.selectedRow = row; 310 | } else if (this.selectedRow === row) { 311 | this.selectedRow = undefined; 312 | } 313 | } 314 | 315 | // unselect all other rows: 316 | if (row.selected && !this.multiSelect) { 317 | this.rows.toArray().filter(row_ => row_.selected).forEach(row_ => { 318 | if (row_ !== row) { // avoid endless loop 319 | row_.selected = false; 320 | } 321 | }); 322 | } 323 | } 324 | 325 | // other: 326 | 327 | get substituteItems() { 328 | return Array.from({ length: this.displayParams!.limit - this.items.length }); 329 | } 330 | 331 | // column resizing: 332 | 333 | private _resizeInProgress = false; 334 | 335 | private resizeColumnStart(event: MouseEvent, column: DataTableColumn, columnElement: HTMLElement) { 336 | this._resizeInProgress = true; 337 | 338 | drag(event, { 339 | move: (moveEvent: MouseEvent, dx: number) => { 340 | if (this._isResizeInLimit(columnElement, dx)) { 341 | column.width = columnElement.offsetWidth + dx; 342 | } 343 | }, 344 | }); 345 | } 346 | 347 | resizeLimit = 30; 348 | 349 | private _isResizeInLimit(columnElement: HTMLElement, dx: number) { 350 | /* This is needed because CSS min-width didn't work on table-layout: fixed. 351 | Without the limits, resizing can make the next column disappear completely, 352 | and even increase the table width. The current implementation suffers from the fact, 353 | that offsetWidth sometimes contains out-of-date values. */ 354 | if ((dx < 0 && (columnElement.offsetWidth + dx) <= this.resizeLimit) || 355 | !columnElement.nextElementSibling || // resizing doesn't make sense for the last visible column 356 | (dx >= 0 && (( columnElement.nextElementSibling).offsetWidth + dx) <= this.resizeLimit)) { 357 | return false; 358 | } 359 | return true; 360 | } 361 | } 362 | -------------------------------------------------------------------------------- /src/components/table.style.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":"\n/* bootstrap override: */\n\n:host /deep/ .data-table.table > tbody+tbody {\n border-top: none;\n}\n:host /deep/ .data-table.table td {\n vertical-align: middle;\n}\n\n:host /deep/ .data-table > thead > tr > th,\n:host /deep/ .data-table > tbody > tr > td {\n\toverflow: hidden;\n}\n\n/* I can't use the bootstrap striped table, because of the expandable rows */\n:host /deep/ .row-odd {\n background-color: #F6F6F6;\n}\n:host /deep/ .row-even {\n}\n\n.data-table .substitute-rows > tr:hover,\n:host /deep/ .data-table .data-table-row:hover {\n background-color: #ECECEC;\n}\n/* table itself: */\n\n.data-table {\n box-shadow: 0 0 15px rgb(236, 236, 236);\n table-layout: fixed;\n}\n\n/* header cells: */\n\n.column-header {\n position: relative;\n}\n.expand-column-header {\n\twidth: 50px;\n}\n.select-column-header {\n\twidth: 50px;\n\ttext-align: center;\n}\n.index-column-header {\n\twidth: 40px;\n}\n.column-header.sortable {\n cursor: pointer;\n}\n.column-header .column-sort-icon {\n\tfloat: right;\n}\n.column-header.resizable .column-sort-icon {\n margin-right: 8px;\n}\n.column-header .column-sort-icon .column-sortable-icon {\n color: lightgray;\n}\n.column-header .column-resize-handle {\n position: absolute;\n top: 0;\n right: 0;\n margin: 0;\n padding: 0;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n}\n\n/* cover: */\n\n.data-table-box {\n position: relative;\n}\n\n.loading-cover {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.3);\n top: 0;\n}\n"}],"symbols":[{"__symbol":0,"name":"TABLE_STYLE","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.style.d.ts"}]} -------------------------------------------------------------------------------- /src/components/table.style.ts: -------------------------------------------------------------------------------- 1 | export const TABLE_STYLE = ` 2 | /* bootstrap override: */ 3 | 4 | :host /deep/ .data-table.table > tbody+tbody { 5 | border-top: none; 6 | } 7 | :host /deep/ .data-table.table td { 8 | vertical-align: middle; 9 | } 10 | 11 | :host /deep/ .data-table > thead > tr > th, 12 | :host /deep/ .data-table > tbody > tr > td { 13 | overflow: hidden; 14 | } 15 | 16 | /* I can't use the bootstrap striped table, because of the expandable rows */ 17 | :host /deep/ .row-odd { 18 | background-color: #F6F6F6; 19 | } 20 | :host /deep/ .row-even { 21 | } 22 | 23 | .data-table .substitute-rows > tr:hover, 24 | :host /deep/ .data-table .data-table-row:hover { 25 | background-color: #ECECEC; 26 | } 27 | /* table itself: */ 28 | 29 | .data-table { 30 | box-shadow: 0 0 15px rgb(236, 236, 236); 31 | table-layout: fixed; 32 | } 33 | 34 | /* header cells: */ 35 | 36 | .column-header { 37 | position: relative; 38 | } 39 | .expand-column-header { 40 | width: 50px; 41 | } 42 | .select-column-header { 43 | width: 50px; 44 | text-align: center; 45 | } 46 | .index-column-header { 47 | width: 40px; 48 | } 49 | .column-header.sortable { 50 | cursor: pointer; 51 | } 52 | .column-header .column-sort-icon { 53 | float: right; 54 | } 55 | .column-header.resizable .column-sort-icon { 56 | margin-right: 8px; 57 | } 58 | .column-header .column-sort-icon .column-sortable-icon { 59 | color: lightgray; 60 | } 61 | .column-header .column-resize-handle { 62 | position: absolute; 63 | top: 0; 64 | right: 0; 65 | margin: 0; 66 | padding: 0; 67 | width: 8px; 68 | height: 100%; 69 | cursor: col-resize; 70 | } 71 | 72 | /* cover: */ 73 | 74 | .data-table-box { 75 | position: relative; 76 | } 77 | 78 | .loading-cover { 79 | position: absolute; 80 | width: 100%; 81 | height: 100%; 82 | background-color: rgba(255, 255, 255, 0.3); 83 | top: 0; 84 | } 85 | `; -------------------------------------------------------------------------------- /src/components/table.template.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":"\n
\n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n\t\t\t\t\t\t\t\t\n \n \n \n
 \n
\n
\n
\n\n \n
\n"}],"symbols":[{"__symbol":0,"name":"TABLE_TEMPLATE","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.template.d.ts"}]} -------------------------------------------------------------------------------- /src/components/table.template.ts: -------------------------------------------------------------------------------- 1 | export const TABLE_TEMPLATE = ` 2 |
3 | 4 | 5 |
6 | 7 | 8 | 9 | 13 | 16 | 30 | 31 | 32 | 34 | 35 | 36 | 40 | 41 | 42 | 43 | 45 | 46 |
10 | 11 | 12 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
  44 |
47 |
48 |
49 | 50 | 51 |
52 | `; 53 | -------------------------------------------------------------------------------- /src/components/types.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"interface"}},{"symbol":{"__symbol":1,"members":[]},"metadata":{"__symbolic":"interface"}},{"symbol":{"__symbol":2,"members":[]},"metadata":{"__symbolic":"interface"}},{"symbol":{"__symbol":3,"members":[]},"metadata":{"indexColumn":"index","selectColumn":"select","expandColumn":"expand","paginationLimit":"Limit","paginationRange":"Results"}},{"symbol":{"__symbol":4,"members":[]},"metadata":{"__symbolic":"interface"}}],"symbols":[{"__symbol":0,"name":"RowCallback","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"},{"__symbol":1,"name":"CellCallback","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"},{"__symbol":2,"name":"DataTableTranslations","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"},{"__symbol":3,"name":"defaultTranslations","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"},{"__symbol":4,"name":"DataTableParams","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"}]} -------------------------------------------------------------------------------- /src/components/types.ts: -------------------------------------------------------------------------------- 1 | import { DataTableRow } from './row.component'; 2 | import { DataTableColumn } from './column.component'; 3 | 4 | 5 | export type RowCallback = (item: any, row: DataTableRow, index: number) => string; 6 | 7 | export type CellCallback = (item: any, row: DataTableRow, column: DataTableColumn, index: number) => string; 8 | 9 | // export type HeaderCallback = (column: DataTableColumn) => string; 10 | 11 | 12 | export interface DataTableTranslations { 13 | indexColumn: string; 14 | selectColumn: string; 15 | expandColumn: string; 16 | paginationLimit: string; 17 | paginationRange: string; 18 | } 19 | 20 | export var defaultTranslations = { 21 | indexColumn: 'index', 22 | selectColumn: 'select', 23 | expandColumn: 'expand', 24 | paginationLimit: 'Limit', 25 | paginationRange: 'Results' 26 | }; 27 | 28 | 29 | export interface DataTableParams { 30 | offset?: number; 31 | limit?: number; 32 | sortBy?: string; 33 | sortAsc?: boolean; 34 | } 35 | -------------------------------------------------------------------------------- /src/index.ngfactory.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview This file is generated by the Angular template compiler. 3 | * Do not edit. 4 | * @suppress {suspiciousCode,uselessCode,missingProperties,missingOverride} 5 | */ 6 | /* tslint:disable */ 7 | 8 | 9 | import * as i0 from '@angular/core'; 10 | import * as i1 from './index'; 11 | import * as i2 from '@angular/common'; 12 | import * as i3 from '@angular/forms'; 13 | export const DataTableModuleNgFactory:i0.NgModuleFactory = i0.ɵcmf(i1.DataTableModule, 14 | ([] as any[]),(_l:any) => { 15 | return i0.ɵmod([i0.ɵmpd(512,i0.ComponentFactoryResolver,i0.ɵCodegenComponentFactoryResolver, 16 | [[8,([] as any[])],[3,i0.ComponentFactoryResolver],i0.NgModuleRef]),i0.ɵmpd(4608, 17 | i2.NgLocalization,i2.NgLocaleLocalization,[i0.LOCALE_ID]),i0.ɵmpd(4608,i3.ɵi, 18 | i3.ɵi,([] as any[])),i0.ɵmpd(512,i2.CommonModule,i2.CommonModule,([] as any[])), 19 | i0.ɵmpd(512,i3.ɵba,i3.ɵba,([] as any[])),i0.ɵmpd(512,i3.FormsModule,i3.FormsModule, 20 | ([] as any[])),i0.ɵmpd(512,i1.DataTableModule,i1.DataTableModule,([] as any[]))]); 21 | }); 22 | //# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoiQzovVXNlcnMvYWxleC9Eb2N1bWVudHMvR2l0SHViL2FuZ3VsYXItNC1kYXRhLXRhYmxlLWJvb3RzdHJhcC00L3NyYy9pbmRleC5uZ2ZhY3RvcnkudHMiLCJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJuZzovLy9DOi9Vc2Vycy9hbGV4L0RvY3VtZW50cy9HaXRIdWIvYW5ndWxhci00LWRhdGEtdGFibGUtYm9vdHN0cmFwLTQvc3JjL2luZGV4LnRzIl0sInNvdXJjZXNDb250ZW50IjpbIiAiXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ== 23 | -------------------------------------------------------------------------------- /src/index.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbol":1,"members":[]}},{"symbol":{"__symbol":2,"members":[]},"metadata":{"__symbol":3,"members":[]}},{"symbol":{"__symbol":4,"members":[]},"metadata":{"__symbol":5,"members":[]}},{"symbol":{"__symbol":6,"members":[]},"metadata":{"__symbol":7,"members":[]}},{"symbol":{"__symbol":8,"members":[]},"metadata":{"__symbol":9,"members":[]}},{"symbol":{"__symbol":10,"members":[]},"metadata":[{"__symbol":1,"members":[]},{"__symbol":3,"members":[]}]},{"symbol":{"__symbol":11,"members":[]},"metadata":{"__symbolic":"class"},"type":{"summaryKind":2,"type":{"reference":{"__symbol":11,"members":[]},"diDeps":[],"lifecycleHooks":[]},"entryComponents":[],"providers":[{"provider":{"token":{"identifier":{"reference":{"__symbol":24,"members":[]}}},"useClass":{"reference":{"__symbol":25,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":26,"members":[]}}}}],"lifecycleHooks":[]},"useFactory":null,"deps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":26,"members":[]}}}}],"multi":false},"module":{"reference":{"__symbol":27,"members":[]},"diDeps":[],"lifecycleHooks":[]}},{"provider":{"token":{"identifier":{"reference":{"__symbol":28,"members":[]},"diDeps":[],"lifecycleHooks":[]}},"useClass":{"reference":{"__symbol":28,"members":[]},"diDeps":[],"lifecycleHooks":[]},"useFactory":null,"deps":[],"multi":false},"module":{"reference":{"__symbol":29,"members":[]},"diDeps":[],"lifecycleHooks":[]}}],"modules":[{"reference":{"__symbol":27,"members":[]},"diDeps":[],"lifecycleHooks":[]},{"reference":{"__symbol":30,"members":[]},"diDeps":[],"lifecycleHooks":[]},{"reference":{"__symbol":29,"members":[]},"diDeps":[],"lifecycleHooks":[]},{"reference":{"__symbol":11,"members":[]},"diDeps":[],"lifecycleHooks":[]}],"exportedDirectives":[{"reference":{"__symbol":1,"members":[]}},{"reference":{"__symbol":3,"members":[]}}],"exportedPipes":[]}},{"symbol":{"__symbol":12,"members":[]},"metadata":{"__symbol":13,"members":[]}},{"symbol":{"__symbol":14,"members":[]},"metadata":{"__symbol":15,"members":[]}},{"symbol":{"__symbol":16,"members":[]},"metadata":{"__symbol":17,"members":[]}},{"symbol":{"__symbol":18,"members":[]},"metadata":{"__symbol":19,"members":[]}},{"symbol":{"__symbol":20,"members":[]},"metadata":{"__symbol":21,"members":[]}},{"symbol":{"__symbol":22,"members":[]},"metadata":{"__symbol":23,"members":[]}}],"symbols":[{"__symbol":0,"name":"DataTable","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":1,"name":"DataTable","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/table.component.d.ts"},{"__symbol":2,"name":"DataTableColumn","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":3,"name":"DataTableColumn","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/column.component.d.ts"},{"__symbol":4,"name":"DataTableRow","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":5,"name":"DataTableRow","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/row.component.d.ts"},{"__symbol":6,"name":"DataTablePagination","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":7,"name":"DataTablePagination","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/pagination.component.d.ts"},{"__symbol":8,"name":"DataTableHeader","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":9,"name":"DataTableHeader","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/header.component.d.ts"},{"__symbol":10,"name":"DATA_TABLE_DIRECTIVES","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":11,"name":"DataTableModule","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":12,"name":"RowCallback","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":13,"name":"RowCallback","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"},{"__symbol":14,"name":"CellCallback","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":15,"name":"CellCallback","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"},{"__symbol":16,"name":"DataTableTranslations","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":17,"name":"DataTableTranslations","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"},{"__symbol":18,"name":"defaultTranslations","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":19,"name":"defaultTranslations","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"},{"__symbol":20,"name":"DataTableParams","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":21,"name":"DataTableParams","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/components/types.d.ts"},{"__symbol":22,"name":"DataTableResource","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/index.d.ts"},{"__symbol":23,"name":"DataTableResource","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/tools/data-table-resource.d.ts"},{"__symbol":24,"name":"NgLocalization","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/common/common.d.ts"},{"__symbol":25,"name":"NgLocaleLocalization","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/common/common.d.ts"},{"__symbol":26,"name":"LOCALE_ID","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":27,"name":"CommonModule","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/common/common.d.ts"},{"__symbol":28,"name":"ɵi","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/forms/forms.d.ts"},{"__symbol":29,"name":"FormsModule","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/forms/forms.d.ts"},{"__symbol":30,"name":"ɵba","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/forms/forms.d.ts"}]} -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { DataTable} from './components/table.component'; 6 | import { DataTableColumn } from './components/column.component'; 7 | import { DataTableRow } from './components/row.component'; 8 | import { DataTablePagination } from './components/pagination.component'; 9 | import { DataTableHeader } from './components/header.component'; 10 | 11 | import { PixelConverter } from './utils/px'; 12 | import { Hide } from './utils/hide'; 13 | import { MinPipe } from './utils/min'; 14 | 15 | export * from './components/types'; 16 | export * from './tools/data-table-resource'; 17 | 18 | export { DataTable, DataTableColumn, DataTableRow, DataTablePagination, DataTableHeader }; 19 | export const DATA_TABLE_DIRECTIVES = [ DataTable, DataTableColumn ]; 20 | 21 | 22 | @NgModule({ 23 | imports: [ CommonModule, FormsModule ], 24 | declarations: [ 25 | DataTable, DataTableColumn, 26 | DataTableRow, DataTablePagination, DataTableHeader, 27 | PixelConverter, Hide, MinPipe 28 | ], 29 | exports: [ DataTable, DataTableColumn ] 30 | }) 31 | export class DataTableModule { } -------------------------------------------------------------------------------- /src/tools/data-table-resource.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","arity":1,"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null]}],"query":[{"__symbolic":"method"}],"count":[{"__symbolic":"method"}]}}}],"symbols":[{"__symbol":0,"name":"DataTableResource","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/tools/data-table-resource.d.ts"}]} -------------------------------------------------------------------------------- /src/tools/data-table-resource.ts: -------------------------------------------------------------------------------- 1 | import { DataTableParams } from '../components/types'; 2 | 3 | 4 | export class DataTableResource { 5 | 6 | constructor(private items: T[]) {} 7 | 8 | query(params: DataTableParams, filter?: (item: T, index: number, items: T[]) => boolean): Promise { 9 | 10 | let result: T[] = []; 11 | if (filter) { 12 | result = this.items.filter(filter); 13 | } else { 14 | result = this.items.slice(); // shallow copy to use for sorting instead of changing the original 15 | } 16 | 17 | if (params.sortBy) { 18 | result.sort((a, b) => { 19 | if (typeof a[params.sortBy] === 'string') { 20 | return a[params.sortBy].localeCompare(b[params.sortBy]); 21 | } else { 22 | return a[params.sortBy] - b[params.sortBy]; 23 | } 24 | }); 25 | if (params.sortAsc === false) { 26 | result.reverse(); 27 | } 28 | } 29 | if (params.offset !== undefined) { 30 | if (params.limit === undefined) { 31 | result = result.slice(params.offset, result.length); 32 | } else { 33 | result = result.slice(params.offset, params.offset + params.limit); 34 | } 35 | } 36 | 37 | return new Promise((resolve, reject) => { 38 | setTimeout(() => resolve(result)); 39 | }); 40 | } 41 | 42 | count(): Promise { 43 | return new Promise((resolve, reject) => { 44 | setTimeout(() => resolve(this.items.length)); 45 | }); 46 | 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/utils/drag.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"interface"}},{"symbol":{"__symbol":1,"members":[]},"metadata":{"__symbolic":"interface"}},{"symbol":{"__symbol":2,"members":[]},"metadata":{"__symbolic":"function"}}],"symbols":[{"__symbol":0,"name":"MoveHandler","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/utils/drag.d.ts"},{"__symbol":1,"name":"UpHandler","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/utils/drag.d.ts"},{"__symbol":2,"name":"drag","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/utils/drag.d.ts"}]} -------------------------------------------------------------------------------- /src/utils/drag.ts: -------------------------------------------------------------------------------- 1 | 2 | export type MoveHandler = (event: MouseEvent, dx: number, dy: number, x: number, y: number) => void; 3 | export type UpHandler = (event: MouseEvent, x: number, y: number, moved: boolean) => void; 4 | 5 | export function drag(event: MouseEvent, { move: move, up: up}: {move: MoveHandler, up?: UpHandler}) { 6 | 7 | let startX = event.pageX; 8 | let startY = event.pageY; 9 | let x = startX; 10 | let y = startY; 11 | let moved = false; 12 | 13 | function mouseMoveHandler(event: MouseEvent) { 14 | let dx = event.pageX - x; 15 | let dy = event.pageY - y; 16 | x = event.pageX; 17 | y = event.pageY; 18 | if (dx || dy) moved = true; 19 | 20 | move(event, dx, dy, x, y); 21 | 22 | event.preventDefault(); // to avoid text selection 23 | } 24 | 25 | function mouseUpHandler(event: MouseEvent) { 26 | x = event.pageX; 27 | y = event.pageY; 28 | 29 | document.removeEventListener('mousemove', mouseMoveHandler); 30 | document.removeEventListener('mouseup', mouseUpHandler); 31 | 32 | if (up) up(event, x, y, moved); 33 | } 34 | 35 | document.addEventListener('mousemove', mouseMoveHandler); 36 | document.addEventListener('mouseup', mouseUpHandler); 37 | } 38 | -------------------------------------------------------------------------------- /src/utils/hide.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbol":1,"members":[]},{"__symbol":2,"members":[]}]}],"initDisplayStyle":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":1,"members":[]}}}},{"isAttribute":false,"isHost":false,"isSelf":false,"isSkipSelf":false,"isOptional":false,"token":{"identifier":{"reference":{"__symbol":2,"members":[]}}}}],"lifecycleHooks":[]},"isComponent":false,"selector":"[hide]","exportAs":null,"inputs":{"hide":"hide"},"outputs":{},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[],"viewQueries":[],"entryComponents":[],"changeDetection":null,"template":null,"componentViewType":null,"rendererType":null,"componentFactory":null}}],"symbols":[{"__symbol":0,"name":"Hide","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/utils/hide.d.ts"},{"__symbol":1,"name":"ElementRef","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"},{"__symbol":2,"name":"Renderer","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/node_modules/@angular/core/core.d.ts"}]} -------------------------------------------------------------------------------- /src/utils/hide.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Renderer } from '@angular/core'; 2 | 3 | 4 | function isBlank(obj: any): boolean { 5 | return obj === undefined || obj === null; 6 | } 7 | 8 | @Directive({ selector: '[hide]', inputs: ['hide'] }) 9 | export class Hide { 10 | 11 | private _prevCondition: boolean = null; 12 | private _displayStyle: string; 13 | 14 | constructor(private _elementRef: ElementRef, private _renderer: Renderer) { } 15 | 16 | set hide(newCondition: boolean) { 17 | this.initDisplayStyle(); 18 | 19 | if (newCondition && (isBlank(this._prevCondition) || !this._prevCondition)) { 20 | this._prevCondition = true; 21 | this._renderer.setElementStyle(this._elementRef.nativeElement, 'display', 'none'); 22 | } else if (!newCondition && (isBlank(this._prevCondition) || this._prevCondition)) { 23 | this._prevCondition = false; 24 | this._renderer.setElementStyle(this._elementRef.nativeElement, 'display', this._displayStyle); 25 | } 26 | } 27 | 28 | private initDisplayStyle() { 29 | if (this._displayStyle === undefined) { 30 | let displayStyle = this._elementRef.nativeElement.style.display; 31 | if (displayStyle && displayStyle !== 'none') { 32 | this._displayStyle = displayStyle; 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/utils/min.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"transform":[{"__symbolic":"method"}]}},"type":{"summaryKind":0,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[]},"name":"min","pure":true}}],"symbols":[{"__symbol":0,"name":"MinPipe","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/utils/min.d.ts"}]} -------------------------------------------------------------------------------- /src/utils/min.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | 4 | @Pipe({ 5 | name: 'min' 6 | }) 7 | export class MinPipe implements PipeTransform { 8 | transform(value: number[], args: string[]): any { 9 | return Math.min.apply(null, value); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/utils/px.ngsummary.json: -------------------------------------------------------------------------------- 1 | {"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"transform":[{"__symbolic":"method"}]}},"type":{"summaryKind":0,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[]},"name":"px","pure":true}}],"symbols":[{"__symbol":0,"name":"PixelConverter","filePath":"C:/Users/alex/Documents/GitHub/angular-4-data-table-bootstrap-4/src/utils/px.d.ts"}]} -------------------------------------------------------------------------------- /src/utils/px.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | 4 | @Pipe({ 5 | name: 'px' 6 | }) 7 | export class PixelConverter implements PipeTransform { 8 | transform(value: string | number, args: string[]): any { 9 | if (value === undefined) { 10 | return; 11 | } 12 | if (typeof value === 'string') { 13 | return value; 14 | } 15 | if (typeof value === 'number') { 16 | return value + 'px'; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "declaration": true, 6 | "stripInternal": true, 7 | "experimentalDecorators": true, 8 | "strictNullChecks": false, 9 | "noImplicitAny": false, 10 | "module": "es2015", 11 | "moduleResolution": "node", 12 | "paths": { 13 | "@angular/core": ["node_modules/@angular/core"], 14 | "rxjs/*": ["node_modules/rxjs/*"] 15 | }, 16 | "rootDir": "src", 17 | "outDir": "dist", 18 | "sourceMap": true, 19 | "inlineSources": true, 20 | "target": "es5", 21 | "skipLibCheck": true, 22 | "lib": [ 23 | "es2015", 24 | "dom" 25 | ] 26 | }, 27 | "files": [ 28 | "src/index.ts" 29 | ], 30 | "angularCompilerOptions": { 31 | "strictMetadataEmit": true 32 | } 33 | } --------------------------------------------------------------------------------