Merge pull request #1 from mopcweb/develop

Merge develop into master

Author: mopcweb

.gitignore

@@ -1,8 +1,7 @@
 ### Directories
 node_modules
-/lib
+dist
 build
-/develop
 
 ### Files
 .env

Readme.md

@@ -0,0 +1,149 @@
+
+# Angular Breadcrumbs Light
+
+[![GitHub version](https://img.shields.io/badge/version-1.1.4-yellow.svg)](https://github.com/mopcweb/angular-breadcrumbs-light/releases) [![npm version](https://img.shields.io/npm/v/angular-breadcrumbs-light.svg)](https://www.npmjs.com/package/angular-breadcrumbs-light) [![GitHub demo](https://img.shields.io/badge/demo-available-green.svg)](https://mopcweb.github.io/angular-breadcrumbs-light) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mopcweb/angular-breadcrumbs-light/blob/master/LICENSE)
+
+## Demo
+
+[See demo here](https://mopcweb.github.io/angular-breadcrumbs-light)
+
+## Description
+
+Easy to use breadcrumbs for Angular.
+
+The package includes:
+
+ - Service: just call it in some root component and it will be returning current breadcrumbs array
+ - Breadcrumbs component: just import and use it. Could be manually configured and styled
+ - TS Types for both
+
+## Installation
+
+```bash
+
+npm i angular-breadcrumbs-light
+
+```
+
+## Breadcrumbs service
+
+Provides function getBreadcrumbs, which returns an array of breadcrumbs.
+
+Example ([Argument Routes is specified in next subsection](#routes)):
+
+```js
+
+// Usage
+const crumbs = getBreadcrumbs(Routes, window.location.pathname);
+
+// Returned array
+[
+  { link: '/', title: 'Home', icon: 'person', iconClass: 'material-icons' },
+  { link: '/clients', title: 'Clients', icon: '...' },
+  { link: '/clients/1', title: 'Client № - 1, welcome!', icon: '...' }
+]
+
+```
+
+There is only __1 required__ arguments and 5 optional:
+
+| Title         | Type     | Description                                | Default              |
+| :-----:       | :------: | :----------------------------------------: | :------------------: |
+| __routes *__  | _array_  | array of route objects ([see example below](#routes)) | -         |
+| fullUrl       | _string_ | current location full path     | ([see example below](#fullurl))  |
+| base          | _string_ | if project's base-href is provided manually, put it here also | - |
+| notFoundTitle | _string_ | title for not found route                  | 'Page Not Found'     |
+| notFoundIcon  | _string_ | icon for not found route                   | undefined            |
+| notFoundClass | _string_ | icon class for not found route             | undefined            |
+
+### Routes
+
+Example:
+
+  ```js
+
+  const Routes = [
+    { title: 'Home', link: '/', icon: 'string', iconClass: 'material-icons' },
+    { title: 'Clients', link: '/clients', icon: '...', children: [
+      { title: 'Client № - ', suffix: ', welcome!', link: '/clients/:id', icon: '...' },
+      { title: 'Settings', link: '/clients/settings', icon: '...' }
+    ] }
+  ];
+
+  ```
+
+__Fields:__
+
+| Title       | Type     | Description                                                       |
+| :---------: | :------: | :---------------------------------------------------------------: |
+| __link *__  | _string_ | breadcrumb link                                                   |
+| title       | _string_ | breadcrumb title                                                  |
+| suffix      | _string_ | breadcrumb suffix (added at the end of output breadcrumb title)   |
+| icon        | _string_    | breadcrumb icon                                                |
+| iconClass   | _string_    | breadcrumb icon class                                          |
+| children    | _array_  | array of objects, similar to Routes, for nested routes            |
+
+__Features__:
+
+ - If __title__ is not provided, link will be used as breadcrumb title (First letter uppercased)
+ - For root route ('' or '/') if __title__ not provided, the crumb title will be 'Root' by default
+ - __link__ field may contain dynamic routes (ex.: '/route/:id')
+ - For dynamic routes 'title' field will be used as prefix for current pathname (first letter uppercased), if provided
+
+### FullUrl
+
+  It should be a current location.  __DEFAULT VALUE IS:  window.location.pathname__.
+
+### Important
+
+Example ([Play with example here](https://stackblitz.com/edit/angular-breadcrumbs-light-custom-crumbs?embed=1&file=src/app/app.component.ts):
+
+```js
+
+```
+
+## Breadcrumbs component
+
+Provides a ready to use component. Can be styled and configured.
+
+[Play with example here](https://stackblitz.com/edit/angular-breadcrumbs-light?embed=1&file=src/app/app.component.ts).
+
+```html
+
+<angular-breadcrumbs-light [routes]="routes"></angular-breadcrumbs-light>
+
+```
+
+There is only 1 __required__ argument. And bunch of optional:
+
+| Title             | Type      | Description                                          | Default    |
+| :---------------: | :-------: | :-----------------------------------------------:    | :--------: |
+| __routes *__      | _array_   | array of route objects ([see example above](#routes))| -          |
+| base              | _string_  | if project's base-href is provided manually, put it here also | - |
+| separator         | _string_  | separator for crumbs                                 | /          |
+| separatorClass    | _string_  | separator class for crumbs                           | -          |
+| icons             | _boolean_ | whether to show icons                                | true       |
+| titles            | _boolean_ | whether to show titles                               | true       |
+| noTitlesOnMobile  | _boolean_ | if _true_ - hide titles when device width <= 600px (do not forget to provide icons in such case)| false |
+| notFoundTitle     | _string_  | title for not found pages                      | 'Page Not Found' |
+| notFoundIcon      | _string_  | icon for not found pages                             | -          |
+| notFoundIconClass | _string_  | icon class for not found pages                       | -          |
+| customClasses     | _object_  | [classes](#customclasses) for each element of Breadcrumbs component | - |
+
+Similar to first required argument for Breadcrumbs service - __Routes__ array.
+
+#### customClasses
+
+| Title       | Type    | Description                   | Html Element              |
+| ----------- | ------- | ----------------------------- | ------------------------- |
+| root        | string  | class for root element        | nav 	                    |
+| list        | string  | class for list element        | ul 		                |
+| link        | string  | class for link element        | a 	                    |
+| currentLink | string  | class for currentLink element | li   	                    |
+| icon        | string  | class for icon element        | span (holder for icon)    |
+| title       | string  | class for title element       | span 	                    |
+| separator   | string  | class for separator element   | li (holder for separator) |
+
+## License
+
+This project is licensed under the terms of the [MIT license](https://github.com/mopcweb/angular-breadcrumbs-light/blob/master/LICENSE).

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "client": {
+    "ngx-breadcrumbs-light": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/client",
+            "outputPath": "dist/ngx-breadcrumbs-light",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -63,18 +63,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "client:build"
+            "browserTarget": "ngx-breadcrumbs-light:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "client:build:production"
+              "browserTarget": "ngx-breadcrumbs-light:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "client:build"
+            "browserTarget": "ngx-breadcrumbs-light:build"
           }
         },
         "test": {
@@ -109,7 +109,7 @@
         }
       }
     },
-    "client-e2e": {
+    "ngx-breadcrumbs-light-e2e": {
       "root": "e2e/",
       "projectType": "application",
       "prefix": "",
@@ -118,11 +118,11 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "client:serve"
+            "devServerTarget": "ngx-breadcrumbs-light:serve"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "client:serve:production"
+              "devServerTarget": "ngx-breadcrumbs-light:serve:production"
             }
           }
         },
@@ -171,7 +171,42 @@
           }
         }
       }
+    },
+    "AngularBreadcrumbsLight": {
+      "root": "projects/angular-breadcrumbs-light",
+      "sourceRoot": "projects/angular-breadcrumbs-light/src",
+      "projectType": "library",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/angular-breadcrumbs-light/tsconfig.lib.json",
+            "project": "projects/angular-breadcrumbs-light/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/angular-breadcrumbs-light/src/test.ts",
+            "tsConfig": "projects/angular-breadcrumbs-light/tsconfig.spec.json",
+            "karmaConfig": "projects/angular-breadcrumbs-light/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/angular-breadcrumbs-light/tsconfig.lib.json",
+              "projects/angular-breadcrumbs-light/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
-  "defaultProject": "client"
-}
+  "defaultProject": "ngx-breadcrumbs-light"
+}

copy.sh

@@ -0,0 +1,9 @@
+# Copy interfaces
+cp -r src/app/interfaces/ projects/angular-breadcrumbs-light/src/lib/interfaces;
+
+# Copy component
+cp -r src/app/components/ projects/angular-breadcrumbs-light/src/lib/components;
+
+# Copy services
+cp src/app/services/breadcrumbs.service.ts projects/angular-breadcrumbs-light/src/lib/services/
+cp src/app/services/helpers.service.ts projects/angular-breadcrumbs-light/src/lib/services/