feat(app): remove code block components and service as they are less …

…useful

README.md

@@ -10,29 +10,6 @@
 
 > A lightweight, declarative and configurable breadcrumbs solution for Angular 6 and beyond. https://www.npmjs.com/package/xng-breadcrumb
 
-- [About](#about)
-- [Demo](#demo)
-- [Features](#features)
-- [Quickstart](#quickstart)
-- [Setup Guide](#setup-guide)
-
-  - [Map Breadcrumb labels to Routes in Route Config](#Map-Breadcrumb-labels-to-Routes-in-Route-Config)
-  - [Update labels dynamically](#Update-labels-dynamically)
-  - [Skip Breadcrumbs for certain routes](#Skip-Breadcrumbs-for-certain-routes)
-
-- [Customization](#customization)
-
-  - [Custom Breadcrumb template (add icons, change text, add i18n ability, etc)](<#Custom-Breadcrumb-template-(add-icons,-change-text,-add-i18n-ability,-etc)>)
-  - [Custom separator](#custom-separator)
-  - [Custom Breadcrumb Styles](#custom-breadcrumb-styles)
-  - [Disable Auto Generation of breadcrumb labels](#disable-auto-generation-of-breadcrumb-labels)
-
-- [API](#api)
-
-  - [Route Config](#route-config)
-  - [xng-breadcrumb](#xng-breadcrumb)
-  - [BreadcrumbService.set(pathOrAlias, breadcrumb)](<#BreadcrumbService.set(pathOrAlias,-breadcrumb)>)
-
 ## About
 
 - In applications with deep navigation hierarchy, it is essential to have breadcrumbs.

projects/xng-breadcrumb-app/src/app/app-routing.module.ts

@@ -20,7 +20,10 @@ export const appRoutes: Routes = [
     path: 'dashboard',
     loadChildren: './dashboard/dashboard.module#DashboardModule',
     data: {
-      breadcrumb: 'my dashboard'
+      breadcrumb: {
+        label: 'my dashboard',
+        info: 'dashboard'
+      }
     }
   },
   {

projects/xng-breadcrumb-app/src/app/app.component.html

@@ -1,29 +1,44 @@
 <div class="app-container mat-app-background" [ngClass]="{ 'xng-dark-theme': darkMode }">
   <app-navbar (themeChanged)="updateTheme($event)"></app-navbar>
   <section class="route-container" fxLayout="column" fxLayoutGap="16px">
-    <xng-breadcrumb></xng-breadcrumb>
+    <div>
+      <label for="default">Default breadcrumbs </label>
+      <xng-breadcrumb id="default"></xng-breadcrumb>
+    </div>
 
-    <xng-breadcrumb separator=">>">
-      <ng-container *xngBreadcrumbItem="let breadcrumb">
-        {{ breadcrumb | titlecase }}
-      </ng-container>
-    </xng-breadcrumb>
+    <div>
+      <label for="titleCase">Titlecase and custom seperator </label>
+      <xng-breadcrumb separator=">>" id="titleCase">
+        <ng-container *xngBreadcrumbItem="let breadcrumb">
+          {{ breadcrumb | titlecase }}
+        </ng-container>
+      </xng-breadcrumb>
+    </div>
 
-    <xng-breadcrumb [separator]="separatorTemplate"></xng-breadcrumb>
+    <div>
+      <label for="materialIcon">Material icon as seperator </label>
+      <xng-breadcrumb [separator]="separatorTemplate" id="materialIcon"></xng-breadcrumb>
+    </div>
 
-    <xng-breadcrumb [separator]="separatorTemplate" class="myapp-breadcrumb">
-      <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
-        <mat-icon *ngIf="info">{{ info }}</mat-icon>
-        <ng-container>{{ breadcrumb | titlecase }}</ng-container>
-      </ng-container>
-    </xng-breadcrumb>
+    <div>
+      <label for="advancedTemplate1">Advanced template1 </label>
+      <xng-breadcrumb [separator]="separatorTemplate" class="myapp-breadcrumb" id="advancedTemplate1">
+        <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
+          <mat-icon *ngIf="info">{{ info }}</mat-icon>
+          <ng-container>{{ breadcrumb | titlecase }}</ng-container>
+        </ng-container>
+      </xng-breadcrumb>
+    </div>
 
-    <xng-breadcrumb [separator]="separatorTemplate" class="myapp-breadcrumb">
-      <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
-        <mat-icon *ngIf="info && first">{{ info }}</mat-icon>
-        <ng-container *ngIf="!first">{{ breadcrumb | titlecase }}</ng-container>
-      </ng-container>
-    </xng-breadcrumb>
+    <div>
+      <label for="advancedTemplate2">Advanced template2 </label>
+      <xng-breadcrumb [separator]="separatorTemplate" class="myapp-breadcrumb" id="advancedTemplate2">
+        <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
+          <mat-icon *ngIf="info">{{ info }}</mat-icon>
+          <ng-container *ngIf="!first">{{ breadcrumb | titlecase }}</ng-container>
+        </ng-container>
+      </xng-breadcrumb>
+    </div>
 
     <router-outlet></router-outlet>
   </section>

projects/xng-breadcrumb-app/src/app/app.component.scss

@@ -5,11 +5,25 @@
 
 .route-container {
   padding: 16px;
+
+  div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    label {
+      min-width: 240px;
+    }
+  }
 }
 
 @media (max-width: 960px) {
   .app-container {
     padding-top: 112px;
     min-height: calc(100% - 112px);
   }
+
+  .route-container div {
+    flex-direction: column;
+    align-items: start;
+  }
 }

projects/xng-breadcrumb-app/src/app/connect/connect/connect.component.html

@@ -1 +0,0 @@
-<app-code-block [code]="code"></app-code-block>

projects/xng-breadcrumb-app/src/app/dashboard/dashboard/dashboard.component.html

@@ -1 +0,0 @@
-<app-code-block [code]="code"></app-code-block>

projects/xng-breadcrumb-app/src/app/mentee/mentee-add/mentee-add.component.html

@@ -1,5 +1,3 @@
-<app-code-block [code]="code"></app-code-block>
-
 <form [formGroup]="menteeFG" (submit)="addMentee()">
   <mat-card>
     <section fxLayout="row" fxLayoutAlign="stretch center" fxLayoutGap="32px">

projects/xng-breadcrumb-app/src/app/mentee/mentee-details/mentee-details.component.html

@@ -1,5 +1,3 @@
-<app-code-block [code]="code"></app-code-block>
-
 <section *ngIf="mentee">
   <mat-card>
     <mat-card-header>

projects/xng-breadcrumb-app/src/app/mentee/mentee-edit/mentee-edit.component.html

@@ -1,5 +1,3 @@
-<app-code-block [code]="code"></app-code-block>
-
 <form [formGroup]="menteeFG" (submit)="updateMentee()" *ngIf="menteeFG">
   <mat-card>
     <section fxLayout="row" fxLayoutAlign="stretch center" fxLayoutGap="32px">

projects/xng-breadcrumb-app/src/app/mentee/mentee-list/mentee-list.component.html

@@ -1,5 +1,3 @@
-<app-code-block [code]="code"></app-code-block>
-
 <section class="add-item">
   <a mat-fab routerLink="add" color="accent" routerLink="add">
     <mat-icon matTooltip="Add a Mentee">add</mat-icon>

projects/xng-breadcrumb-app/src/app/mentor/mentor-add/mentor-add.component.html

@@ -1,5 +1,3 @@
-<app-code-block [code]="code"></app-code-block>
-
 <form [formGroup]="mentorFG" (submit)="addMentor()">
   <mat-card>
     <section fxLayout="row" fxLayoutAlign="stretch center" fxLayoutGap="32px">

projects/xng-breadcrumb-app/src/app/mentor/mentor-details/mentor-details.component.html

@@ -1,5 +1,3 @@
-<app-code-block [code]="code"></app-code-block>
-
 <section *ngIf="mentor">
   <mat-card>
     <mat-card-header>

projects/xng-breadcrumb-app/src/app/mentor/mentor-edit/mentor-edit.component.html

@@ -1,5 +1,3 @@
-<app-code-block [code]="code"></app-code-block>
-
 <form [formGroup]="mentorFG" (submit)="updateMentor()" *ngIf="mentorFG">
   <mat-card>
     <section fxLayout="row" fxLayoutAlign="stretch center" fxLayoutGap="32px">

projects/xng-breadcrumb-app/src/app/mentor/mentor-list/mentor-list.component.html

@@ -1,5 +1,3 @@
-<app-code-block [code]="code"></app-code-block>
-
 <section class="add-item">
   <a mat-fab routerLink="add" color="accent" routerLink="add">
     <mat-icon matTooltip="Add a Mentor">add</mat-icon>