feat: xng-breadcrumb base library setup

apps/breadcrumb-demo/src/app/app.component.html

@@ -8,6 +8,7 @@ <h1>Welcome to {{ title }}!</h1>
 </header>
 <main>
   <h2>Resources &amp; Tools</h2>
+  <xng-breadcrumb></xng-breadcrumb>
   <p>
     Thank you for using and showing some ♥ for Nx.
   </p>

apps/breadcrumb-demo/src/app/app.module.ts

@@ -2,10 +2,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-
+import {BreadcrumbModule} from "@xng/xng-breadcrumb"
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule],
+  imports: [BrowserModule, BreadcrumbModule],
   providers: [],
   bootstrap: [AppComponent],
 })

libs/xng-breadcrumb/src/index.ts

@@ -1 +1,2 @@
-export * from './lib/xng-breadcrumb.module';
+export * from './lib/breadcrumb.module';
+export * from './lib/breadcrumb.component';

libs/xng-breadcrumb/src/lib/breadcrumb-item.directive.ts

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+
+/**
+ * This directive is used to customize the breadcrumb label behavior
+ * *xngBreadcrumbItem directive can be used in the child element of xng-breadcrumb
+ * Usage: refer to demo app.component.html
+ */
+@Directive({
+  selector: '[xngBreadcrumbItem]'
+})
+export class BreadcrumbItemDirective {
+  constructor() {}
+}

libs/xng-breadcrumb/src/lib/breadcrumb.component.css

@@ -0,0 +1,47 @@
+.xng-breadcrumb-root {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.xng-breadcrumb-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+}
+
+.xng-breadcrumb-item {
+  list-style: none;
+}
+
+.xng-breadcrumb-trail {
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.xng-breadcrumb-link {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  color: inherit;
+  text-decoration: none;
+  transition: text-decoration 0.3s;
+}
+
+.xng-breadcrumb-link:hover {
+  text-decoration: underline;
+}
+
+.xng-breadcrumb-link-disabled {
+  pointer-events: none;
+  cursor: disabled;
+}
+
+.xng-breadcrumb-separator {
+  display: flex;
+  user-select: none;
+  margin-left: 8px;
+  margin-right: 8px;
+}

libs/xng-breadcrumb/src/lib/breadcrumb.component.html

@@ -0,0 +1 @@
+<p>xng-breadcrumb works!</p>

libs/xng-breadcrumb/src/lib/breadcrumb.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'xng-breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class BreadcrumbComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

libs/xng-breadcrumb/src/lib/breadcrumb.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbComponent } from './breadcrumb.component';
+import { BreadcrumbItemDirective } from './breadcrumb-item.directive';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [BreadcrumbComponent, BreadcrumbItemDirective],
+  exports: [BreadcrumbComponent]
+})
+export class BreadcrumbModule {}

libs/xng-breadcrumb/src/lib/breadcrumb.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BreadcrumbService {
+
+  constructor() { }
+}

libs/xng-breadcrumb/src/lib/breadcrumb.ts

@@ -0,0 +1,46 @@
+/**
+ * Breadcrumb item built internally, private to this module
+ */
+export interface Breadcrumb {
+  /**
+   * breadcrumb label for a route
+   */
+  label?: string;
+  /**
+   * unique alias name for a route path
+   */
+  alias?: string;
+  /**
+   * hide or show the breadcrumb item
+   */
+  skip?: boolean;
+  /**
+   * disable the link for the breadcrumb.
+   * It may be needed when the routing has the path, but navigating to that path is of no use
+   */
+  disable?: boolean;
+  /**
+   * custom data for each breadcrumb that is passed back to ng-template
+   */
+  info?: any;
+  /**
+   * actual route path with resolved param. Ex /mentor/2, connect/edit
+   */
+  routeLink?: string;
+  /**
+   * route with path params converted to a RegExp
+   * path '/mentor/:id' becomes routeRegex '/mentor/[^/]+', which can be matched against when needed
+   */
+  routeRegex?: string;
+  /**
+   * This is additional info on each breadcrumb item whether label is auto generated or user specified
+   * isAutoGeneratedLabel has to be present at component level but not at the service,
+   * since we may need to support multiple breadcrumb components in same app
+   */
+  isAutoGeneratedLabel?: boolean;
+  /**
+   * Query params in string form.
+   */
+  queryParams?: any;
+  fragment?: string;
+}