From 73b47561966bec3f1c3e95ef700d15ca88c84e6a Mon Sep 17 00:00:00 2001 From: Alexis Georges Date: Fri, 26 Oct 2018 12:00:18 +0200 Subject: [PATCH] feat(stark-ui): add fixed header feature to table component ISSUES CLOSED: #196 --- packages/stark-build/package-lock.json | 54 ++--- packages/stark-testing/package-lock.json | 38 +-- packages/stark-ui/assets/styles/_header.scss | 2 +- .../components/dropdown.component.html | 4 +- .../components/dropdown.component.spec.ts | 69 +++--- .../dropdown/components/dropdown.component.ts | 24 +- .../components/message-pane.component.spec.ts | 2 +- .../slider/components/slider.component.ts | 2 +- .../table/components/_table.component.scss | 5 + .../table/components/table.component.html | 6 +- .../table/components/table.component.spec.ts | 94 +++++++- .../table/components/table.component.ts | 105 ++++++--- packages/stark-ui/src/util.ts | 3 +- packages/stark-ui/src/util/component.ts | 1 + .../src/util/component/component.util.spec.ts | 29 +++ .../src/util/component/component.util.ts | 12 + packages/stark-ui/src/util/dom.ts | 1 + .../src/util/{ => dom}/dom.util.spec.ts | 0 .../stark-ui/src/util/{ => dom}/dom.util.ts | 0 .../dropdown/demo-dropdown.component.html | 6 +- .../app/demo/table/demo-table.component.html | 23 +- .../app/demo/table/demo-table.component.ts | 2 + .../examples/dropdown/disabled-dropdown.html | 2 +- .../dropdown/multiple-required-selection.html | 2 +- .../examples/dropdown/multiple-selection.html | 2 +- .../src/assets/examples/table/regular.html | 2 +- .../table/with-alternative-action-bar.html | 2 +- .../examples/table/with-fixed-header.html | 13 ++ .../examples/table/with-fixed-header.ts | 217 ++++++++++++++++++ .../table/with-transcluded-action-bar.html | 2 +- showcase/src/assets/translations/en.json | 1 + showcase/src/assets/translations/fr.json | 1 + showcase/src/assets/translations/nl.json | 1 + 33 files changed, 581 insertions(+), 146 deletions(-) create mode 100644 packages/stark-ui/src/util/component.ts create mode 100644 packages/stark-ui/src/util/component/component.util.spec.ts create mode 100644 packages/stark-ui/src/util/component/component.util.ts create mode 100644 packages/stark-ui/src/util/dom.ts rename packages/stark-ui/src/util/{ => dom}/dom.util.spec.ts (100%) rename packages/stark-ui/src/util/{ => dom}/dom.util.ts (100%) create mode 100644 showcase/src/assets/examples/table/with-fixed-header.html create mode 100644 showcase/src/assets/examples/table/with-fixed-header.ts diff --git a/packages/stark-build/package-lock.json b/packages/stark-build/package-lock.json index 8e1ceae495..bf1d273431 100644 --- a/packages/stark-build/package-lock.json +++ b/packages/stark-build/package-lock.json @@ -1214,7 +1214,7 @@ }, "ajv": { "version": "6.4.0", - "resolved": "http://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.4.0.tgz", "integrity": "sha1-06/3jpJ3VJdx2vAWTP9ISCt1T8Y=", "requires": { "fast-deep-equal": "1.1.0", @@ -1427,7 +1427,7 @@ }, "async": { "version": "1.5.2", - "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" }, "async-each": { @@ -1823,7 +1823,7 @@ }, "browserify-aes": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", "requires": { "buffer-xor": "1.0.3", @@ -1857,7 +1857,7 @@ }, "browserify-rsa": { "version": "4.0.1", - "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", + "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", "requires": { "bn.js": "4.11.8", @@ -2482,7 +2482,7 @@ }, "create-hash": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", "requires": { "cipher-base": "1.0.4", @@ -2494,7 +2494,7 @@ }, "create-hmac": { "version": "1.1.7", - "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", + "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", "requires": { "cipher-base": "1.0.4", @@ -3091,7 +3091,7 @@ }, "diffie-hellman": { "version": "5.0.3", - "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", + "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", "requires": { "bn.js": "4.11.8", @@ -3379,7 +3379,7 @@ }, "events": { "version": "1.1.1", - "resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz", + "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz", "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=" }, "eventsource": { @@ -3753,7 +3753,7 @@ }, "finalhandler": { "version": "1.1.1", - "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", "requires": { "debug": "2.6.9", @@ -4012,7 +4012,7 @@ }, "get-stream": { "version": "3.0.0", - "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=" }, "get-value": { @@ -4463,7 +4463,7 @@ }, "readable-stream": { "version": "1.0.34", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz", "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=", "requires": { "core-util-is": "1.0.2", @@ -4486,7 +4486,7 @@ }, "http-errors": { "version": "1.6.3", - "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "requires": { "depd": "1.1.2", @@ -4803,7 +4803,7 @@ }, "is-builtin-module": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", "requires": { "builtin-modules": "1.1.1" @@ -4946,7 +4946,7 @@ }, "is-obj": { "version": "1.0.1", - "resolved": "http://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=" }, "is-path-cwd": { @@ -5258,7 +5258,7 @@ }, "json5": { "version": "0.5.1", - "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz", + "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz", "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=" }, "jsprim": { @@ -5359,7 +5359,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "requires": { "graceful-fs": "^4.1.2", @@ -5959,7 +5959,7 @@ "dependencies": { "semver": { "version": "5.3.0", - "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=" } } @@ -6492,7 +6492,7 @@ }, "p-is-promise": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz", "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=" }, "p-limit": { @@ -6551,7 +6551,7 @@ }, "parse-asn1": { "version": "5.1.1", - "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz", + "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz", "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==", "requires": { "asn1.js": "4.10.1", @@ -6738,7 +6738,7 @@ }, "reduce-css-calc": { "version": "1.3.0", - "resolved": "http://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz", + "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz", "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=", "requires": { "balanced-match": "0.4.2", @@ -7121,7 +7121,7 @@ }, "postcss-custom-properties": { "version": "6.3.1", - "resolved": "http://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-6.3.1.tgz", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-6.3.1.tgz", "integrity": "sha512-zoiwn4sCiUFbr4KcgcNZLFkR6gVQom647L+z1p/KBVHZ1OYwT87apnS42atJtx6XlX2yI7N5fjXbFixShQO2QQ==", "requires": { "balanced-match": "1.0.0", @@ -8394,7 +8394,7 @@ }, "postcss-values-parser": { "version": "1.5.0", - "resolved": "http://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz", + "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz", "integrity": "sha512-3M3p+2gMp0AH3da530TlX8kiO1nxdTnc3C6vr8dMxRLIlh8UYkz0/wcwptSXjhtx2Fr0TySI7a+BHDQ8NL7LaQ==", "requires": { "flatten": "1.0.2", @@ -8602,7 +8602,7 @@ }, "load-json-file": { "version": "2.0.0", - "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", "requires": { "graceful-fs": "4.1.11", @@ -8894,7 +8894,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "1.0.2", @@ -9573,7 +9573,7 @@ }, "sha.js": { "version": "2.4.11", - "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "requires": { "inherits": "2.0.3", @@ -10072,7 +10072,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "requires": { "ansi-regex": "2.1.1" @@ -10735,7 +10735,7 @@ }, "through": { "version": "2.3.8", - "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=" }, "through2": { diff --git a/packages/stark-testing/package-lock.json b/packages/stark-testing/package-lock.json index a2f5fac963..45aa5d1024 100644 --- a/packages/stark-testing/package-lock.json +++ b/packages/stark-testing/package-lock.json @@ -306,7 +306,7 @@ }, "async": { "version": "1.5.2", - "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" }, "async-each": { @@ -525,7 +525,7 @@ }, "browserify-aes": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", "requires": { "buffer-xor": "1.0.3", @@ -559,7 +559,7 @@ }, "browserify-rsa": { "version": "4.0.1", - "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", + "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", "requires": { "bn.js": "4.11.8", @@ -948,7 +948,7 @@ }, "create-hash": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", "requires": { "cipher-base": "1.0.4", @@ -960,7 +960,7 @@ }, "create-hmac": { "version": "1.1.7", - "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", + "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", "requires": { "cipher-base": "1.0.4", @@ -1143,7 +1143,7 @@ }, "diffie-hellman": { "version": "5.0.3", - "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", + "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", "requires": { "bn.js": "4.11.8", @@ -1340,7 +1340,7 @@ }, "events": { "version": "1.1.1", - "resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz", + "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz", "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=" }, "evp_bytestokey": { @@ -1920,7 +1920,7 @@ }, "http-errors": { "version": "1.6.3", - "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "requires": { "depd": "1.1.2", @@ -2049,7 +2049,7 @@ }, "is-builtin-module": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", "requires": { "builtin-modules": "1.1.1" @@ -2702,12 +2702,12 @@ "dependencies": { "debug": { "version": "0.7.4", - "resolved": "http://registry.npmjs.org/debug/-/debug-0.7.4.tgz", + "resolved": "https://registry.npmjs.org/debug/-/debug-0.7.4.tgz", "integrity": "sha1-BuHqgILCyxTjmAbiLi9vdX+Srzk=" }, "readable-stream": { "version": "1.1.14", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", "requires": { "core-util-is": "1.0.2", @@ -2778,7 +2778,7 @@ }, "readable-stream": { "version": "1.1.14", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", "requires": { "core-util-is": "1.0.2", @@ -2800,7 +2800,7 @@ "dependencies": { "debug": { "version": "0.7.4", - "resolved": "http://registry.npmjs.org/debug/-/debug-0.7.4.tgz", + "resolved": "https://registry.npmjs.org/debug/-/debug-0.7.4.tgz", "integrity": "sha1-BuHqgILCyxTjmAbiLi9vdX+Srzk=" } } @@ -2833,7 +2833,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "requires": { "graceful-fs": "4.1.11", @@ -3275,7 +3275,7 @@ }, "parse-asn1": { "version": "5.1.1", - "resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz", + "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz", "integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==", "requires": { "asn1.js": "4.10.1", @@ -3428,7 +3428,7 @@ }, "kind-of": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=" } } @@ -3585,7 +3585,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "1.0.2", @@ -3793,7 +3793,7 @@ }, "sha.js": { "version": "2.4.11", - "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "requires": { "inherits": "2.0.3", @@ -4201,7 +4201,7 @@ }, "readable-stream": { "version": "2.0.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz", "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=", "requires": { "core-util-is": "1.0.2", diff --git a/packages/stark-ui/assets/styles/_header.scss b/packages/stark-ui/assets/styles/_header.scss index 3760ee8a9f..3c6cc5b4d4 100644 --- a/packages/stark-ui/assets/styles/_header.scss +++ b/packages/stark-ui/assets/styles/_header.scss @@ -4,7 +4,7 @@ position: fixed; top: 0; left: 0; - z-index: 10; + z-index: 110; /* z-index of sticky header in NG Table is 100. z-index of header should be bigger */ overflow: visible; background: mat-color(map-get($base-theme, primary-palette), 900) url(/assets/images/app-header.png) top right no-repeat; color: #fff; diff --git a/packages/stark-ui/src/modules/dropdown/components/dropdown.component.html b/packages/stark-ui/src/modules/dropdown/components/dropdown.component.html index 65390bd892..88bb518dec 100644 --- a/packages/stark-ui/src/modules/dropdown/components/dropdown.component.html +++ b/packages/stark-ui/src/modules/dropdown/components/dropdown.component.html @@ -2,7 +2,7 @@ - - ` + + ` }) class TestHostComponent { @ViewChild(StarkDropdownComponent) public dropdownComponent: StarkDropdownComponent; public dropdownId: string; - public header?: string; + // public header?: string; public label?: string; + public multiSelect?: string; public options: any[]; public placeholder: string; public value: any | any[]; @@ -78,6 +86,31 @@ describe("DropdownComponent", () => { expect(component.logger).not.toBeNull(); expect(component.logger).toBeDefined(); }); + + it("should NOT have any inputs set", () => { + expect(component.dropdownId).toBe(hostComponent.dropdownId); + expect(component.dropdownSelectionChanged).toBeDefined(); + expect(component.label).toBe(hostComponent.label); + expect(component.multiSelect).toBe(hostComponent.multiSelect); + expect(component.options).toBe(hostComponent.options); + expect(component.placeholder).toBe(hostComponent.placeholder); + expect(component.required).toBe(hostComponent.required); + expect(component.value).toBe(hostComponent.value); + }); + }); + + describe("on change", () => { + it("should assign right value to isMultiSelectEnabled when multiSelect changes", () => { + hostComponent.multiSelect = "true"; + hostComponent.value = []; + hostFixture.detectChanges(); + expect(component.isMultiSelectEnabled).toBe(true); + + hostComponent.multiSelect = "false"; + hostComponent.value = undefined; + hostFixture.detectChanges(); + expect(component.isMultiSelectEnabled).toBe(false); + }); }); describe("options defined as array of simple types", () => { @@ -257,26 +290,4 @@ describe("DropdownComponent", () => { expect(component.defaultBlank).toBe(false); }); }); - - describe("isMultipleSelect", () => { - it("should return TRUE in case multipleSelect is set to 'true' or empty string", () => { - component.multipleSelect = "true"; - let isMultipleSelect: boolean = component.isMultipleSelect(); - expect(isMultipleSelect).toBe(true); - - component.multipleSelect = ""; - isMultipleSelect = component.isMultipleSelect(); - expect(isMultipleSelect).toBe(true); - }); - - it("should return FALSE in case multipleSelect is set to any other value other than 'true' or empty string", () => { - component.multipleSelect = "whatever"; - let isMultipleSelect: boolean = component.isMultipleSelect(); - expect(isMultipleSelect).toBe(false); - - component.multipleSelect = undefined; - isMultipleSelect = component.isMultipleSelect(); - expect(isMultipleSelect).toBe(false); - }); - }); }); diff --git a/packages/stark-ui/src/modules/dropdown/components/dropdown.component.ts b/packages/stark-ui/src/modules/dropdown/components/dropdown.component.ts index ba3a8ae3e4..aab994a6a1 100644 --- a/packages/stark-ui/src/modules/dropdown/components/dropdown.component.ts +++ b/packages/stark-ui/src/modules/dropdown/components/dropdown.component.ts @@ -13,6 +13,7 @@ import { } from "@angular/core"; import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component"; +import { StarkComponentUtil } from "../../../util/component"; /** * Name of the component @@ -76,7 +77,7 @@ export class StarkDropdownComponent extends AbstractStarkUiComponent implements * will enable this feature. (optional) */ @Input() - public multipleSelect?: string; + public multiSelect?: string; /** * Array of options to be included in the dropdown list. This parameter is a one-way @@ -125,6 +126,11 @@ export class StarkDropdownComponent extends AbstractStarkUiComponent implements @Output() public dropdownSelectionChanged: EventEmitter = new EventEmitter(); + /** + * Whether the multiple row selection is enabled. + */ + public isMultiSelectEnabled: boolean = false; + /** * @ignore * @internal @@ -158,10 +164,14 @@ export class StarkDropdownComponent extends AbstractStarkUiComponent implements /** * Component lifecycle hook */ - public ngOnChanges(changesObj: SimpleChanges): void { - if (changesObj["optionIdProperty"] || changesObj["optionLabelProperty"]) { + public ngOnChanges(changes: SimpleChanges): void { + if (changes["optionIdProperty"] || changes["optionLabelProperty"]) { this.optionsAreSimpleTypes = this.areSimpleTypes(); } + + if (changes["multiSelect"]) { + this.isMultiSelectEnabled = StarkComponentUtil.isInputEnabled(this.multiSelect); + } } /** @@ -198,14 +208,6 @@ export class StarkDropdownComponent extends AbstractStarkUiComponent implements } } - /** - * states if the dropdown can handle multiple selection or not. - * @returns whether the mat-select attribute is multiple of not - */ - public isMultipleSelect(): boolean { - return this.multipleSelect === "true" || this.multipleSelect === ""; - } - /** * Return the id of the option or the option itself if it is a simple type. * @param option - the option which id we want to retrieve diff --git a/packages/stark-ui/src/modules/message-pane/components/message-pane.component.spec.ts b/packages/stark-ui/src/modules/message-pane/components/message-pane.component.spec.ts index 771db155e3..c1e9ee2a10 100644 --- a/packages/stark-ui/src/modules/message-pane/components/message-pane.component.spec.ts +++ b/packages/stark-ui/src/modules/message-pane/components/message-pane.component.spec.ts @@ -33,7 +33,7 @@ import { starkMessagePaneDisplayAnimatedClass } from "./message-pane.constants"; import { StarkMessage, StarkMessageType } from "../../../common/message"; -import { StarkDOMUtil } from "../../../util/dom.util"; +import { StarkDOMUtil } from "../../../util/dom/dom.util"; /*** * To be able to test changes to the input fields, the message pane component is hosted inside the TestComponentHost class. diff --git a/packages/stark-ui/src/modules/slider/components/slider.component.ts b/packages/stark-ui/src/modules/slider/components/slider.component.ts index 54f35a045a..8d0adda7c6 100644 --- a/packages/stark-ui/src/modules/slider/components/slider.component.ts +++ b/packages/stark-ui/src/modules/slider/components/slider.component.ts @@ -17,7 +17,7 @@ import * as noUiSliderLibrary from "nouislider"; import { STARK_LOGGING_SERVICE, STARK_ROUTING_SERVICE, StarkLoggingService, StarkRoutingService } from "@nationalbankbelgium/stark-core"; -import { StarkDOMUtil } from "../../../util/dom.util"; +import { StarkDOMUtil } from "../../../util/dom/dom.util"; import { StarkSliderConfig } from "./slider-config.intf"; import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component"; diff --git a/packages/stark-ui/src/modules/table/components/_table.component.scss b/packages/stark-ui/src/modules/table/components/_table.component.scss index fa98f4190b..0b4a1ad243 100644 --- a/packages/stark-ui/src/modules/table/components/_table.component.scss +++ b/packages/stark-ui/src/modules/table/components/_table.component.scss @@ -97,6 +97,11 @@ .mat-table-filter { padding: 0 10px; } + + .fixed-header { + height: 400px; + overflow-y: auto; + } } /* END stark-ui: src/modules/table/components/table/_table.component.scss */ diff --git a/packages/stark-ui/src/modules/table/components/table.component.html b/packages/stark-ui/src/modules/table/components/table.component.html index 3f9add31f0..df37a32699 100644 --- a/packages/stark-ui/src/modules/table/components/table.component.html +++ b/packages/stark-ui/src/modules/table/components/table.component.html @@ -36,9 +36,9 @@ -
+
- + +
-
diff --git a/packages/stark-ui/src/modules/table/components/table.component.spec.ts b/packages/stark-ui/src/modules/table/components/table.component.spec.ts index e092a84225..28d87226d3 100644 --- a/packages/stark-ui/src/modules/table/components/table.component.spec.ts +++ b/packages/stark-ui/src/modules/table/components/table.component.spec.ts @@ -30,8 +30,10 @@ import createSpy = jasmine.createSpy; selector: `host-component`, template: ` ` @@ -42,6 +44,9 @@ class TestHostComponent { public columnProperties: StarkTableColumnProperties[]; public dummyData: any[]; + public fixedHeader?: string; + public multiSelect?: string; + public multiSort?: string; public tableRowsActionBarConfig: StarkActionBarConfig; public tableFilter: StarkTableFilter; public orderProperties?: string[]; @@ -112,9 +117,92 @@ describe("TableComponent", () => { it("should NOT have any inputs set", () => { expect(component.columnProperties).toBe(hostComponent.columnProperties); expect(component.data).toBe(hostComponent.dummyData); - expect(component.tableRowsActionBarConfig).toBe(hostComponent.tableRowsActionBarConfig); - expect(component.orderProperties).toBe(hostComponent.orderProperties); expect(component.filter).toBeDefined(); // the default filter is set + expect(component.fixedHeader).toBe(hostComponent.fixedHeader); + expect(component.multiSelect).toBe(hostComponent.multiSelect); + expect(component.multiSort).toBe(hostComponent.multiSort); + expect(component.orderProperties).toBe(hostComponent.orderProperties); + expect(component.tableRowsActionBarConfig).toBe(hostComponent.tableRowsActionBarConfig); + }); + }); + + describe("on change", () => { + it("should trigger resetFilterValueOnDataChange and applyFilter methods when data changes", () => { + spyOn(component, "resetFilterValueOnDataChange"); + spyOn(component, "applyFilter"); + + (component.resetFilterValueOnDataChange).and.returnValue(false); + (component.resetFilterValueOnDataChange).calls.reset(); + hostComponent.dummyData = [{ name: "test-data" }]; + hostFixture.detectChanges(); + + (component.resetFilterValueOnDataChange).and.returnValue(false); + (component.resetFilterValueOnDataChange).calls.reset(); + hostComponent.dummyData = [{ name: "test-data-2" }]; + hostFixture.detectChanges(); + expect(component.resetFilterValueOnDataChange).toHaveBeenCalledTimes(1); + expect(component.applyFilter).not.toHaveBeenCalled(); + + (component.resetFilterValueOnDataChange).and.returnValue(true); + (component.resetFilterValueOnDataChange).calls.reset(); + hostComponent.dummyData = [{ name: "test-data-1" }]; + hostFixture.detectChanges(); + expect(component.resetFilterValueOnDataChange).toHaveBeenCalledTimes(1); + expect(component.applyFilter).toHaveBeenCalledTimes(1); + }); + + it("should assign right value to isFixedHeaderEnabled when fixedHeader changes", () => { + hostComponent.fixedHeader = "true"; + hostFixture.detectChanges(); + expect(component.isFixedHeaderEnabled).toBe(true); + + hostComponent.fixedHeader = "false"; + hostFixture.detectChanges(); + expect(component.isFixedHeaderEnabled).toBe(false); + }); + + it("should assign right value to isMultiSortEnabled when multiSort changes", () => { + hostComponent.multiSort = "true"; + hostFixture.detectChanges(); + expect(component.isMultiSortEnabled).toBe(true); + + hostComponent.multiSort = "false"; + hostFixture.detectChanges(); + expect(component.isMultiSortEnabled).toBe(false); + }); + + it("should assign right value to isMultiSelectEnabled when multiSelect changes and adapt displayedColumns", () => { + spyOn(component.displayedColumns, "unshift"); + hostComponent.multiSelect = "true"; + hostFixture.detectChanges(); + expect(component.isMultiSelectEnabled).toBe(true); + expect(component.displayedColumns.unshift).toHaveBeenCalledTimes(1); + expect(component.displayedColumns.unshift).toHaveBeenCalledWith("select"); + + (component.displayedColumns.unshift).calls.reset(); + hostComponent.multiSelect = "false"; + hostFixture.detectChanges(); + expect(component.isMultiSelectEnabled).toBe(false); + expect(component.displayedColumns.unshift).not.toHaveBeenCalled(); + }); + + it("should assign the right value to filter", () => { + hostComponent.tableFilter = { + globalFilterValue: "test" + }; + hostFixture.detectChanges(); + expect(component.filter).toEqual({ + globalFilterValue: "test", + globalFilterPresent: true + }); + }); + + it("should trigger sortData method when orderProperties changes", () => { + spyOn(component, "sortData"); + hostComponent.orderProperties = ["test"]; + hostFixture.detectChanges(); + expect(component.sortData).toHaveBeenCalledTimes(1); + expect(component.orderProperties).toEqual(["test"]); }); }); diff --git a/packages/stark-ui/src/modules/table/components/table.component.ts b/packages/stark-ui/src/modules/table/components/table.component.ts index efb6474c3c..4afdcd9b86 100644 --- a/packages/stark-ui/src/modules/table/components/table.component.ts +++ b/packages/stark-ui/src/modules/table/components/table.component.ts @@ -32,6 +32,7 @@ import { StarkTableFilter } from "./table-filter.intf"; import { AbstractStarkUiComponent } from "../../../common/classes/abstract-component"; import { StarkPaginationConfig, StarkPaginationComponent } from "../../pagination/components"; import { StarkPaginateEvent } from "../../pagination/components/paginate-event.intf"; +import { StarkComponentUtil } from "../../../util/component"; /** * Name of the component @@ -54,58 +55,65 @@ const componentName: string = "stark-table"; /* tslint:enable */ export class StarkTableComponent extends AbstractStarkUiComponent implements OnInit, AfterContentInit, AfterViewInit, OnChanges { /** - * HTML id of the table + * Array of {@link StarkColumnProperties} objects which define the columns of the data table. */ @Input() - public htmlId: string; + public columnProperties: StarkTableColumnProperties[] = []; /** - * Data that will be display inside your table. + * Array of {@link StarkAction} objects. */ @Input() - public data: any[]; + public customTableActions?: StarkAction[]; /** - * Object which contains filtering information for the table. + * Mode in which the custom actions will be displayed in the table */ @Input() - public filter: StarkTableFilter; + public customTableActionsType: "regular" | "alt" = "regular"; /** - * Array of StarkAction objects (see StarkAction docs). + * Data that will be display inside your table. */ @Input() - public customTableActions?: StarkAction[]; + public data: any[]; /** - * Type of StarkAction objects + * Object which contains filtering information for the table. */ @Input() - public customTableActionsType: "regular" | "alt" = "regular"; + public filter: StarkTableFilter; /** - * Allows sorting by multiple columns. Setting the attribute to "true" or empty will enable this feature. + * Allows to fix the header to the top of the scrolling viewport containing the table. + * Setting the attribute to "true" or empty will enable this feature. + * + * The class "fixed-header" will be added under .stark-table which defines the following css properties: + * - overflow-y: auto; + * - height: 400px; + * + * If you desire to change the height, please redefine the value for .stark-table .fixed-header { height: 400px; } */ @Input() - public multiSort?: string; + public fixedHeader?: string; /** - * Whether to display the pagination component + * HTML id of the table */ @Input() - public paginate: boolean = false; + public htmlId: string; /** - * + * Allows multiple row selection. Setting the attribute to "true" or empty will enable this feature. */ @Input() - public paginationConfig: StarkPaginationConfig; + public multiSelect?: string; /** - * Allows multiple row selection. Setting the attribute to "true" or empty will enable this feature. + * Allows sorting by multiple columns. Setting the attribute to "true" or empty will enable this feature. */ @Input() - public multiselect: boolean = false; + public multiSort?: string; /** * Columns to be sorted by default @@ -114,22 +122,22 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI public orderProperties?: string[]; /** - * Array of StarkColumnProperties objects which define the columns of the data table. + * Whether to display the pagination component */ @Input() - public columnProperties: StarkTableColumnProperties[] = []; + public paginate: boolean = false; /** - * StarkActionBarConfig object (see StarkActionBarConfig docs). + * {@link StarkPaginationConfig} configuration object for embedded pagination component */ @Input() - public tableRowsActionBarConfig: StarkActionBarConfig; + public paginationConfig: StarkPaginationConfig; /** - * Output event emitter that will emit the array of columns selected (column id's). + * {@link StarkActionBarConfig} object for the action bar component to be displayed in all the rows */ - @Output() - public selectChanged: EventEmitter = new EventEmitter(); + @Input() + public tableRowsActionBarConfig: StarkActionBarConfig; /** * Output event emitter that will emit the latest global filter value whenever it changes. @@ -151,6 +159,12 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI @Output() public paginationChanged: EventEmitter = new EventEmitter(); + /** + * Output event emitter that will emit the array of columns selected (column id's). + */ + @Output() + public selectChanged: EventEmitter = new EventEmitter(); + /** * Reference to the MatTable embedded in this component */ @@ -186,15 +200,10 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI public customTableAltActions?: StarkAction[]; /** - * Array of StarkAction for regular mode + * {@link StarkActionBarConfig} object for the action bar component in regular mode */ public customTableRegularActions: StarkActionBarConfig; - /** - * Angular CDK selection model used for the "master" selection of the table - */ - public selection: SelectionModel = new SelectionModel(true, []); - /** * MatTableDataSource associated to the MatTable embedded in this component */ @@ -205,6 +214,11 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI */ public displayedColumns: string[]; + /** + * Whether the fixed header is enabled. + */ + public isFixedHeaderEnabled: boolean = false; + /** * Whether the current sorting is done on multiple columns */ @@ -215,6 +229,16 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI */ public isMultiSortEnabled: boolean = false; + /** + * Whether the multiple row selection is enabled. + */ + public isMultiSelectEnabled: boolean = false; + + /** + * Angular CDK selection model used for the "master" selection of the table + */ + public selection: SelectionModel = new SelectionModel(true, []); + /** * Class constructor * @param logger - The logging service of the application @@ -239,9 +263,6 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI public ngOnInit(): void { this.logger.debug(componentName + ": component initialized"); this.displayedColumns = []; - if (this.multiselect) { - this.displayedColumns.unshift("select"); - } if (this.customTableActionsType === "regular") { this.customTableRegularActions = { actions: this.customTableActions || [] }; @@ -283,6 +304,7 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI /** * Component lifecycle hook */ + // tslint:disable-next-line:cognitive-complexity public ngOnChanges(changes: SimpleChanges): void { if (changes["data"] && !changes["data"].isFirstChange() && this.resetFilterValueOnDataChange()) { this.applyFilter(); @@ -300,9 +322,20 @@ export class StarkTableComponent extends AbstractStarkUiComponent implements OnI this.filter = { ...defaultFilter, ...this.filter }; } + if (changes["fixedHeader"]) { + this.isFixedHeaderEnabled = StarkComponentUtil.isInputEnabled(this.fixedHeader); + } + if (changes["multiSort"]) { - this.isMultiSortEnabled = - typeof this.multiSort === "boolean" ? this.multiSort : this.multiSort === "true" || this.multiSort === ""; + this.isMultiSortEnabled = StarkComponentUtil.isInputEnabled(this.multiSort); + } + + if (changes["multiSelect"]) { + this.isMultiSelectEnabled = StarkComponentUtil.isInputEnabled(this.multiSelect); + + if (this.isMultiSelectEnabled) { + this.displayedColumns.unshift("select"); + } } } diff --git a/packages/stark-ui/src/util.ts b/packages/stark-ui/src/util.ts index 22ef030928..425901ebfe 100644 --- a/packages/stark-ui/src/util.ts +++ b/packages/stark-ui/src/util.ts @@ -1 +1,2 @@ -export * from "./util/dom.util"; +export * from "./util/component"; +export * from "./util/dom"; diff --git a/packages/stark-ui/src/util/component.ts b/packages/stark-ui/src/util/component.ts new file mode 100644 index 0000000000..87ee30b105 --- /dev/null +++ b/packages/stark-ui/src/util/component.ts @@ -0,0 +1 @@ +export * from "./component/component.util"; diff --git a/packages/stark-ui/src/util/component/component.util.spec.ts b/packages/stark-ui/src/util/component/component.util.spec.ts new file mode 100644 index 0000000000..45ddb4d422 --- /dev/null +++ b/packages/stark-ui/src/util/component/component.util.spec.ts @@ -0,0 +1,29 @@ +import { StarkComponentUtil } from "./component.util"; + +/* tslint:disable:no-big-function */ +describe("Util: ComponentUtil", () => { + describe("isInputEnabled", () => { + it("shouldReturnTrue", () => { + let result: boolean = StarkComponentUtil.isInputEnabled(""); + expect(result).toBe(true); + + result = StarkComponentUtil.isInputEnabled("true"); + expect(result).toBe(true); + + result = StarkComponentUtil.isInputEnabled(true); + expect(result).toBe(true); + }); + + it("shouldReturnFalse", () => { + let result: boolean = StarkComponentUtil.isInputEnabled("false"); + expect(result).toBe(false); + + result = StarkComponentUtil.isInputEnabled(false); + expect(result).toBe(false); + + /* tslint:disable-next-line:no-undefined-argument */ + result = StarkComponentUtil.isInputEnabled(undefined); + expect(result).toBe(false); + }); + }); +}); diff --git a/packages/stark-ui/src/util/component/component.util.ts b/packages/stark-ui/src/util/component/component.util.ts new file mode 100644 index 0000000000..89ffeabc19 --- /dev/null +++ b/packages/stark-ui/src/util/component/component.util.ts @@ -0,0 +1,12 @@ +/** + * Stark specific Component commands + */ +export class StarkComponentUtil { + /** + * Check if passed input is equal to "true", empty string or true. + * @param input - Input to be checked + */ + public static isInputEnabled(input?: string): boolean { + return typeof input === "boolean" ? input : input === "true" || input === ""; + } +} diff --git a/packages/stark-ui/src/util/dom.ts b/packages/stark-ui/src/util/dom.ts new file mode 100644 index 0000000000..197ab6a6f0 --- /dev/null +++ b/packages/stark-ui/src/util/dom.ts @@ -0,0 +1 @@ +export * from "./dom/dom.util"; diff --git a/packages/stark-ui/src/util/dom.util.spec.ts b/packages/stark-ui/src/util/dom/dom.util.spec.ts similarity index 100% rename from packages/stark-ui/src/util/dom.util.spec.ts rename to packages/stark-ui/src/util/dom/dom.util.spec.ts diff --git a/packages/stark-ui/src/util/dom.util.ts b/packages/stark-ui/src/util/dom/dom.util.ts similarity index 100% rename from packages/stark-ui/src/util/dom.util.ts rename to packages/stark-ui/src/util/dom/dom.util.ts diff --git a/showcase/src/app/demo/dropdown/demo-dropdown.component.html b/showcase/src/app/demo/dropdown/demo-dropdown.component.html index 2eacda3a6b..ebac0bbb32 100644 --- a/showcase/src/app/demo/dropdown/demo-dropdown.component.html +++ b/showcase/src/app/demo/dropdown/demo-dropdown.component.html @@ -20,7 +20,7 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

+ (dropdownSelectionChanged)="multipleServicesDropdownOnChange($event)" multiSelect>
{{ 'SHOWCASE.DEMO.DROPDOWN.SELECTED_VALUES' | translate }}: {{ selectedServices }}
 @@ -28,14 +28,14 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

+ (dropdownSelectionChanged)="multipleServicesRequiredDropdownOnChange($event)" multiSelect required>
{{ 'SHOWCASE.DEMO.DROPDOWN.SELECTED_VALUES' | translate }} : {{ selectedRequiredServices }}
 + [isDisabled]="true" multiSelect> diff --git a/showcase/src/app/demo/table/demo-table.component.html b/showcase/src/app/demo/table/demo-table.component.html index 52b4322e54..feabcadf63 100644 --- a/showcase/src/app/demo/table/demo-table.component.html +++ b/showcase/src/app/demo/table/demo-table.component.html @@ -8,7 +8,7 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

[customTableActions]="customTableActions" [data]="dummyData" [filter]="filter" - [multiselect]="true" + multiSelect multiSort [orderProperties]="orderProperties" [tableRowsActionBarConfig]="tableRowsActionBarConfig" @@ -25,7 +25,7 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

customTableActionsType="alt" [data]="dummyData" [filter]="filter" - [multiselect]="true" + multiSelect multiSort [orderProperties]="orderProperties" [tableRowsActionBarConfig]="tableRowsActionBarConfig" @@ -40,7 +40,7 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

[columnProperties]="columnsProperties" [data]="dummyData" [filter]="filter" - [multiselect]="true" + multiSelect multiSort [orderProperties]="orderProperties" [tableRowsActionBarConfig]="tableRowsActionBarConfig" @@ -58,6 +58,23 @@

SHOWCASE.DEMO.TABLE.WITH_TRANSCLUDED_ACTION_BAR

+ + + +

SHOWCASE.DEMO.TABLE.WITH_FIXED_HEADER

+ + diff --git a/showcase/src/app/demo/table/demo-table.component.ts b/showcase/src/app/demo/table/demo-table.component.ts index 3a630b8b65..9452403e7f 100644 --- a/showcase/src/app/demo/table/demo-table.component.ts +++ b/showcase/src/app/demo/table/demo-table.component.ts @@ -39,6 +39,7 @@ export class DemoTableComponent implements OnInit { public paginationConfig1: StarkPaginationConfig; public paginationConfig2: StarkPaginationConfig; public paginationConfig3: StarkPaginationConfig; + public paginationConfig4: StarkPaginationConfig; public columns: any[]; public orderProperties: string[]; public filter: StarkTableFilter; @@ -198,6 +199,7 @@ export class DemoTableComponent implements OnInit { }; this.paginationConfig2 = { ...this.paginationConfig1, itemsPerPage: 4, itemsPerPageOptions: [2, 4, 6, 8, 10] }; this.paginationConfig3 = { ...this.paginationConfig1, itemsPerPage: 2, itemsPerPageOptions: [2, 4, 6, 8, 10], isExtended: true }; + this.paginationConfig4 = { ...this.paginationConfig1, itemsPerPage: 20 }; this.tableRowsActionBarConfig = { actions: [ diff --git a/showcase/src/assets/examples/dropdown/disabled-dropdown.html b/showcase/src/assets/examples/dropdown/disabled-dropdown.html index df7aa2c9d5..84d3752b98 100644 --- a/showcase/src/assets/examples/dropdown/disabled-dropdown.html +++ b/showcase/src/assets/examples/dropdown/disabled-dropdown.html @@ -3,5 +3,5 @@ [options]="[1,2,3,4,5,6,7]" placeholder="Sorry, it's disabled" [isDisabled]="true" - multipleSelect="true"> + multiSelect> diff --git a/showcase/src/assets/examples/dropdown/multiple-required-selection.html b/showcase/src/assets/examples/dropdown/multiple-required-selection.html index 7ffe1b30d0..92fa181324 100644 --- a/showcase/src/assets/examples/dropdown/multiple-required-selection.html +++ b/showcase/src/assets/examples/dropdown/multiple-required-selection.html @@ -6,7 +6,7 @@ optionLabelProperty="value" placeholder="Select at least one service" (dropdownSelectionChanged)="multipleServicesRequiredDropdownOnChange($event)" - multipleSelect="true" + multiSelect required>
Selected values: {{ selectedRequiredServices }}
diff --git a/showcase/src/assets/examples/dropdown/multiple-selection.html b/showcase/src/assets/examples/dropdown/multiple-selection.html index cebf7a718d..8b0207e518 100644 --- a/showcase/src/assets/examples/dropdown/multiple-selection.html +++ b/showcase/src/assets/examples/dropdown/multiple-selection.html @@ -6,6 +6,6 @@ optionLabelProperty="value" placeholder="Select one or more services" (dropdownSelectionChanged)="multipleServicesDropdownOnChange($event)" - multipleSelect="true"> + multiSelect>
Selected values: {{ selectedServices }}
diff --git a/showcase/src/assets/examples/table/regular.html b/showcase/src/assets/examples/table/regular.html index 128f083307..a7ada1a6c2 100644 --- a/showcase/src/assets/examples/table/regular.html +++ b/showcase/src/assets/examples/table/regular.html @@ -4,7 +4,7 @@ [customTableActions]="customTableActions" [data]="dummyData" [filter]="filter" - [multiselect]="true" + multiSelect multiSort [orderProperties]="orderProperties" [tableRowsActionBarConfig]="tableRowsActionBarConfig" diff --git a/showcase/src/assets/examples/table/with-alternative-action-bar.html b/showcase/src/assets/examples/table/with-alternative-action-bar.html index f5d853a488..2495e184a2 100644 --- a/showcase/src/assets/examples/table/with-alternative-action-bar.html +++ b/showcase/src/assets/examples/table/with-alternative-action-bar.html @@ -4,7 +4,7 @@ customTableActionsType="alt" [data]="dummyData" [filter]="filter" - [multiselect]="true" + multiSelect multiSort [orderProperties]="orderProperties" [tableRowsActionBarConfig]="tableRowsActionBarConfig" diff --git a/showcase/src/assets/examples/table/with-fixed-header.html b/showcase/src/assets/examples/table/with-fixed-header.html new file mode 100644 index 0000000000..9eb21ef89e --- /dev/null +++ b/showcase/src/assets/examples/table/with-fixed-header.html @@ -0,0 +1,13 @@ + +

Table with a fixed header

+ diff --git a/showcase/src/assets/examples/table/with-fixed-header.ts b/showcase/src/assets/examples/table/with-fixed-header.ts new file mode 100644 index 0000000000..37df040932 --- /dev/null +++ b/showcase/src/assets/examples/table/with-fixed-header.ts @@ -0,0 +1,217 @@ +import { Component, Inject, OnInit, ViewEncapsulation } from "@angular/core"; +import { + StarkActionBarConfig, + StarkPaginationConfig, + StarkTableColumnProperties, + StarkTableFilter, + StarkAction +} from "@nationalbankbelgium/stark-ui"; +import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core"; + +@Component({ + selector: "demo-table", + styleUrls: ["./demo-table.component.scss"], + templateUrl: "./demo-table.component.html", + encapsulation: ViewEncapsulation.None +}) +export class DemoTableComponent implements OnInit { + public getTitle = (data: any): string => { + return "~" + data.title.label; + }; + + public compareTitle = (n1: any, n2: any) => { + if (n1.value < n2.value) { + return -1; + } + if (n1.value > n2.value) { + return 1; + } + return 0; + }; + + public dummyData: any[]; + public columnsProperties: StarkTableColumnProperties[]; + public customTableActions: StarkAction[]; + public tableRowsActionBarConfig: StarkActionBarConfig; + public paginationConfig: StarkPaginationConfig; + public columns: any[]; + public orderProperties: string[]; + public filter: StarkTableFilter; + + public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {} + + public ngOnInit(): void { + this.dummyData = [ + { id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" }, + { id: 10, title: { label: "second title (value: 2)", value: 2 }, description: "second description" }, + { id: 12, title: { label: "third title (value: 3)", value: 3 }, description: "the third description" }, + { id: 2, title: { label: "fourth title (value: 4)", value: 4 }, description: "description number four" }, + { id: 23, title: { label: "fifth title (value: 5)", value: 5 }, description: "fifth description" }, + { id: 222, title: { label: "sixth title (value: 6)", value: 6 }, description: "the sixth description" }, + { id: 112, title: { label: "seventh title (value: 7)", value: 7 }, description: "seventh description" }, + { id: 232, title: { label: "eighth title (value: 8)", value: 8 }, description: "description number eight" }, + { id: 154, title: { label: "ninth title (value: 9)", value: 9 }, description: "the ninth description" }, + { id: 27, title: { label: "tenth title (value: 10)", value: 10 }, description: "description number ten" }, + { id: 86, title: { label: "eleventh title (value: 11)", value: 11 }, description: "eleventh description" }, + { id: 44, title: { label: "twelfth title (value: 12)", value: 12 }, description: "the twelfth description" } + ]; + + this.columnsProperties = [ + { + name: "id", + label: "id", + isSortable: true, + isFilterable: true + }, + { + name: "title", + label: "Title", + cellFormatter: (value: any): string => { + return "~" + value.label; + }, + isSortable: true, + isFilterable: true, + compareFn: this.compareTitle + }, + { + name: "description", + label: "Description", + isSortable: true, + isFilterable: true + } + ]; + + this.columns = [ + { + name: "id", + sortable: true + }, + { + name: "title", + sortable: true, + dataAccessor: (data: any): string => { + return "~" + data.title.label; + }, + compareFn: this.compareTitle + }, + { + name: "description", + sortable: true + } + ]; + + this.customTableActions = [ + { + id: "edit-item", + label: "STARK.ICONS.EDIT_ITEM", + icon: "pencil", + actionCall: ($event: Event, data: any): void => { + this.logger.debug("this is edit item icon click"); + this.logger.debug($event); + this.logger.debug(data); + this.logger.debug("selected rows "); + }, + isEnabled: true + }, + { + id: "reload", + label: "STARK.ICONS.RELOAD_PAGE", + icon: "autorenew", + actionCall: ($event: Event, data: any): void => { + this.logger.debug($event); + this.logger.debug(data); + }, + isEnabled: true + }, + { + id: "reload2", + label: "3D view", + icon: "rotate-3d", + actionCall: ($event: Event, data: any): void => { + this.logger.debug($event); + this.logger.debug(data); + }, + isEnabled: false + }, + { + id: "reload3", + label: "Change your settings", + icon: "wrench", + actionCall: ($event: Event, data: any): void => { + this.logger.debug($event); + this.logger.debug(data); + }, + isEnabled: false + }, + { + id: "reload4", + label: "Copy signs", + icon: "copyright", + actionCall: ($event: Event, data: any): void => { + this.logger.debug($event); + this.logger.debug(data); + }, + isEnabled: false + }, + { + id: "reload5", + label: "Upload to the cloud", + icon: "cloud-upload", + actionCall: ($event: Event, data: any): void => { + this.logger.debug($event); + this.logger.debug(data); + }, + isEnabled: false + }, + { + id: "reload6", + label: "Create new bookmark", + icon: "book", + actionCall: ($event: Event, data: any): void => { + this.logger.debug($event); + this.logger.debug(data); + }, + isEnabled: false + } + ]; + + this.orderProperties = ["title", "-description", "id"]; + + this.filter = { + globalFilterPresent: true, + columns: [] + }; + + this.paginationConfig = { + totalItems: this.dummyData.length, + page: 1, + itemsPerPage: 20, + itemsPerPageOptions: [10, 12, 15, 18, 20, 25, 50, 100] + }; + + this.tableRowsActionBarConfig = { + actions: [ + { + id: "edit-item", + label: "STARK.ICONS.EDIT_ITEM", + icon: "pencil", + actionCall: (event: Event, data: any): void => { + this.logger.debug(event); + this.logger.debug(data); + }, + isEnabled: true + }, + { + id: "delete-item", + label: "STARK.ICONS.DELETE_ITEM", + icon: "delete", + actionCall: (event: Event, data: any): void => { + this.logger.debug(event); + this.logger.debug(data); + }, + isEnabled: false + } + ] + }; + } +} diff --git a/showcase/src/assets/examples/table/with-transcluded-action-bar.html b/showcase/src/assets/examples/table/with-transcluded-action-bar.html index 1e59ce37f5..58ad1b8468 100644 --- a/showcase/src/assets/examples/table/with-transcluded-action-bar.html +++ b/showcase/src/assets/examples/table/with-transcluded-action-bar.html @@ -2,7 +2,7 @@ [columnProperties]="columnsProperties" [data]="dummyData" [filter]="filter" - [multiselect]="true" + multiSelect multiSort [orderProperties]="orderProperties" [tableRowsActionBarConfig]="tableRowsActionBarConfig" diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index ccedc9e5e0..314a803829 100644 --- a/showcase/src/assets/translations/en.json +++ b/showcase/src/assets/translations/en.json @@ -244,6 +244,7 @@ "TABLE": { "REGULAR": "Regular Table", "WITH_ALTERNATIVE_ACTION_BAR": "Table with alternative Action Bar", + "WITH_FIXED_HEADER": "Table with a fixed header", "WITH_TRANSCLUDED_ACTION_BAR": "Table with transcluded Action bar", "TITLE": "Stark table" }, diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index b69237ff85..97706051ab 100644 --- a/showcase/src/assets/translations/fr.json +++ b/showcase/src/assets/translations/fr.json @@ -244,6 +244,7 @@ "TABLE": { "REGULAR": "Table régulière", "WITH_ALTERNATIVE_ACTION_BAR": "Table avec Action Bar alternative", + "WITH_FIXED_HEADER": "Table avec un en-tête fixe", "WITH_TRANSCLUDED_ACTION_BAR": "Table avec Action Bar 'transcluded'", "TITLE": "Stark table" }, diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 8001b7f688..c6a3c42f4f 100644 --- a/showcase/src/assets/translations/nl.json +++ b/showcase/src/assets/translations/nl.json @@ -244,6 +244,7 @@ "TABLE": { "REGULAR": "Normale tabel", "WITH_ALTERNATIVE_ACTION_BAR": "Tabel met alternatieve Action Bar", + "WITH_FIXED_HEADER": "Tabel met een vaste header", "WITH_TRANSCLUDED_ACTION_BAR": "Tabel met 'transcluded' Action Bar", "TITLE": "Stark table" },