made library theme dynamic

README.md

@@ -23,8 +23,8 @@ import **NgxDatetimeRangePickerModule** in your module:
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 ...
-import { FormsModule } from '@angular/forms';
-import { NgxDatetimeRangePickerModule } from 'ngx-datetime-range-picker';
+import { FormsModule } from "@angular/forms";
+import { NgxDatetimeRangePickerModule } from "ngx-datetime-range-picker";
 import { AppComponent } from "./app.component";
 
 @NgModule({
@@ -35,6 +35,23 @@ import { AppComponent } from "./app.component";
 export class AppModule {}
 ```
 
+Tell ngx-datetime-range-picker which theme to use:
+Add below config in your `style.scss`/`some-cool-name-theme.scss`, which has material theme (or not) and is imported in your `angular.json`
+
+```
+@import "ngx-datetime-range-picker/ngx-datetime-range-picker.theme.scss";
+@include ngx-datetime-range-picker-theme($app-theme);
+```
+
+If you _don't_ have a theme and want to use library's default theme
+
+```
+@import "ngx-datetime-range-picker/ngx-datetime-range-picker.theme.scss";
+@include ngx-datetime-range-picker-theme();
+```
+
+_Note_: Make sure whichever file you are adding this to should be imported in `angular.json`
+
 ## Usage example
 
 Html:

angular.json

@@ -23,7 +23,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "src/app/app.theme.scss"],
             "scripts": []
           },
           "configurations": {
@@ -99,7 +99,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "src/app/app.theme.scss"],
             "scripts": [],
             "assets": ["src/favicon.ico", "src/assets"],
             "codeCoverageExclude": ["src/common/**/*", "src/config/**/*", "src/test.ts", "src/app/app.config.ts"]

package.json

@@ -30,7 +30,9 @@
     "build": "ng build",
     "build-dev": "ng build --dev --output-hashing=all && gulp build",
     "build-prod": "node --max-old-space-size=4076 ./node_modules/.bin/ng build --prod && gulp build",
-    "build-lib": "ng-packagr -p ./projects/ngx-datetime-range-picker/package.json",
+    "build-lib": "npm run package-lib && npm run bundle-lib-scss",
+    "package-lib": "ng-packagr -p ./projects/ngx-datetime-range-picker/ng-package.json",
+    "bundle-lib-scss": "scss-bundle -p ./projects/ngx-datetime-range-picker/src/scss-bundle.config.json",
     "test": "ng test",
     "lint": "ng lint --fix",
     "e2e": "ng e2e",
@@ -94,6 +96,7 @@
     "prettier": "^1.15.3",
     "pretty-quick": "^1.8.0",
     "protractor": "~5.4.0",
+    "scss-bundle": "^3.0.1",
     "stylelint": "^9.9.0",
     "ts-node": "~7.0.0",
     "tsickle": ">=0.29.0",

projects/ngx-datetime-range-picker/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-datetime-range-picker",
+  "dest": "./dist",
   "lib": {
     "entryFile": "src/public_api.ts"
   }

projects/ngx-datetime-range-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-datetime-range-picker",
-  "version": "1.1.8",
+  "version": "2.0.0",
   "homepage": "https://github.com/BhavinPatel04/ngx-datetime-range-picker",
   "bugs": "https://github.com/BhavinPatel04/ngx-datetime-range-picker/issues",
   "repository": {