feat: add breadcrumbs component

apps/docs/src/app/examples/breadcrumbs/basic/basic.component.html

@@ -0,0 +1 @@
+<anglify-breadcrumbs [items]="items"></anglify-breadcrumbs>

apps/docs/src/app/examples/breadcrumbs/basic/basic.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BreadCrumb } from 'libs/anglify/src/modules/breadcrumbs/breadcrumbs.interface';
+
+@Component({
+  templateUrl: './basic.component.html',
+  styleUrls: ['./basic.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BasicComponent {
+  public items: BreadCrumb[] = [
+    {
+      text: 'Home',
+      disabled: false,
+      href: '#',
+      routerLink: ['/components/breadcrumbs'],
+    },
+    {
+      text: 'About',
+      disabled: false,
+      href: '#',
+      routerLink: ['/getting-started/installation'],
+    },
+    {
+      text: 'Contact',
+      disabled: true,
+      href: '#',
+      routerLink: ['/components/card'],
+    },
+  ];
+}
+export default BasicComponent;

apps/docs/src/app/examples/breadcrumbs/breadcrumbs-example.module.ts

@@ -0,0 +1,11 @@
+import { BreadcrumbsModule, IconModule } from '@anglify/components';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { BasicComponent } from './basic/basic.component';
+import { IconComponent } from './icon/icon.component';
+
+@NgModule({
+  declarations: [BasicComponent, IconComponent],
+  imports: [CommonModule, BreadcrumbsModule, IconModule],
+})
+export class BreadcrumbsExampleModule {}

apps/docs/src/app/examples/breadcrumbs/icon/icon.component.html

@@ -0,0 +1,5 @@
+<anglify-breadcrumbs [items]="items">
+  <ng-template slot="divider">
+    <anglify-icon icon="mdi-chevron-right" size="small"></anglify-icon>
+  </ng-template>
+</anglify-breadcrumbs>

apps/docs/src/app/examples/breadcrumbs/icon/icon.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BreadCrumb } from 'libs/anglify/src/modules/breadcrumbs/breadcrumbs.interface';
+
+@Component({
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IconComponent {
+  public items: BreadCrumb[] = [
+    {
+      text: 'Home',
+      disabled: false,
+      href: '#',
+      routerLink: ['/components/breadcrumbs'],
+    },
+    {
+      text: 'About',
+      disabled: false,
+      href: '#',
+      routerLink: ['/getting-started/installation'],
+    },
+    {
+      text: 'Contact',
+      disabled: true,
+      href: '#',
+      routerLink: ['/components/card'],
+    },
+  ];
+}
+
+export default IconComponent;

apps/docs/src/app/layouts/default/default.component.ts

@@ -62,6 +62,10 @@ export class DefaultComponent {
       link: 'components/bottom-navigation',
       name: 'Bottom Navigation',
     },
+    {
+      link: 'components/breadcrumbs',
+      name: 'Breadcrumbs',
+    },
     {
       link: 'components/button',
       name: 'Button',

apps/docs/src/app/pages/components/breadcrumbs-page/breadcrumbs-page.component.html

@@ -0,0 +1,22 @@
+<h1>Breadcrumbs</h1>
+<app-references
+  issues="https://github.com/valentingavran/anglify/labels/component%3A%20Breadcrumbs"
+  bundleSize="https://bundlephobia.com/package/@anglify/components@latest"
+  w3c="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/"
+></app-references>
+<p>
+  Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and
+  allow navigation up to any of its "ancestors".
+</p>
+
+<h2>Examples</h2>
+
+<h3>Basic</h3>
+<app-code-example component="breadcrumbs" example="basic"></app-code-example>
+
+<h3>With Icon</h3>
+<app-code-example component="breadcrumbs" example="icon"></app-code-example>
+
+<h2>API</h2>
+<h3>Styling</h3>
+<app-styling-table forComponent="breadcrumbs"></app-styling-table>

apps/docs/src/app/pages/components/breadcrumbs-page/breadcrumbs-page.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'anglify-breadcrumbs-page',
+  templateUrl: './breadcrumbs-page.component.html',
+  styleUrls: ['./breadcrumbs-page.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbsPageComponent {}

apps/docs/src/app/pages/components/components-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BadgePageComponent } from './badge-page/badge-page.component';
 import { BottomNavigationPageComponent } from './bottom-navigation-page/bottom-navigation-page.component';
+import { BreadcrumbsPageComponent } from './breadcrumbs-page/breadcrumbs-page.component';
 import { ButtonPageComponent } from './button-page/button-page.component';
 import { CardPageComponent } from './card-page/card-page.component';
 import { CheckBoxPageComponent } from './checkbox-page/checkbox-page.component';
@@ -112,6 +113,10 @@ const routes: Routes = [
     path: 'badge',
     component: BadgePageComponent,
   },
+  {
+    path: 'breadcrumbs',
+    component: BreadcrumbsPageComponent,
+  },
 ];
 
 @NgModule({

apps/docs/src/app/pages/components/components.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BadgePageComponent } from './badge-page/badge-page.component';
 import { BottomNavigationPageComponent } from './bottom-navigation-page/bottom-navigation-page.component';
+import { BreadcrumbsPageComponent } from './breadcrumbs-page/breadcrumbs-page.component';
 import { ButtonPageComponent } from './button-page/button-page.component';
 import { CardPageComponent } from './card-page/card-page.component';
 import { CheckBoxPageComponent } from './checkbox-page/checkbox-page.component';
@@ -27,6 +28,7 @@ import { ToolbarPageComponent } from './toolbar-page/toolbar-page.component';
 import { TooltipPageComponent } from './tooltip-page/tooltip-page.component';
 import { BadgeExampleModule } from '../../examples/badge/badge-example.module';
 import { BottomNavigationExampleModule } from '../../examples/bottom-navigation/bottom-navigation-example.module';
+import { BreadcrumbsExampleModule } from '../../examples/breadcrumbs/breadcrumbs-example.module';
 import { ButtonExamplesModule } from '../../examples/button/button-examples.module';
 import { CardExamplesModule } from '../../examples/card/card-examples.module';
 import { CheckBoxExamplesModule } from '../../examples/checkbox/checkbox-examples.module';
@@ -73,6 +75,7 @@ import { SharedModule } from '../../modules/shared/shared.module';
     ItemGroupPageComponent,
     ChipPageComponent,
     TabPageComponent,
+    BreadcrumbsPageComponent,
   ],
   imports: [
     CommonModule,
@@ -100,6 +103,7 @@ import { SharedModule } from '../../modules/shared/shared.module';
     ProgressCircularExamplesModule,
     CardExamplesModule,
     TabExamplesModule,
+    BreadcrumbsExampleModule,
     // Imports for Playground
     IconModule,
     FormFieldModule,

libs/anglify/ng-package.json

@@ -9,6 +9,7 @@
     "src/modules/badge/*.scss",
     "src/modules/bottom-navigation/*.scss",
     "src/modules/button/*.scss",
+    "src/modules/breadcrumbs/*.scss",
     "src/modules/card/*.scss",
     "src/modules/checkbox/*.scss",
     "src/modules/chip/*.scss",

libs/anglify/src/index.ts

@@ -28,6 +28,11 @@ export * from './modules/bottom-navigation/components/bottom-navigation-item/bot
 export * from './modules/button/button.component';
 export * from './modules/button/button.interface';
 export * from './modules/button/button.module';
+// Breadcrumbs
+export * from './modules/breadcrumbs/breadcrumbs-settings.token';
+export * from './modules/breadcrumbs/breadcrumbs.component';
+export * from './modules/breadcrumbs/breadcrumbs.interface';
+export * from './modules/breadcrumbs/breadcrumbs.module';
 // Card
 export * from './modules/card/card-settings.token';
 export * from './modules/card/card.component';

libs/anglify/src/modules/breadcrumbs/_variables.scss

@@ -0,0 +1,10 @@
+$breadcrumbs-active-color: var(--anglify-breadcrumbs-active-color, var(--color-primary)) !default;
+$breadcrumbs-inactive-color: var(--anglify-breadcrumbs-inactive-color, var(--color-on-surface-medium-emphasis)) !default;
+$breadcrumbs-text-font: var(--anglify-breadcrumbs-text-font, var(--font-body-2)) !default;
+$breadcrumbs-text-letter-spacing: var(--anglify-breadcrumbs-text-letter-spacing, var(--font-letter-spacing-body-2)) !default;
+$breadcrumbs-text-transform: var(--anglify-breadcrumbs-text-transform, var(--font-text-transform-body-2)) !default;
+$breadcrumbs-divider-font: var(--anglify-breadcrumbs-divider-font, var(--font-body-2)) !default;
+$breadcrumbs-divider-letter-spacing: var(--anglify-breadcrumbs-divider-letter-spacing, var(--font-letter-spacing-body-2)) !default;
+$breadcrumbs-divider-transform: var(--anglify-breadcrumbs-divider-transform, var(--font-text-transform-body-2)) !default;
+$breadcrumbs-divider-padding: var(--anglify-breadcrumbs-divider-padding, 0 12px) !default;
+$breadcrumbs-disabled-color: var(--anglify-breadcrumbs-disabled-color, var(--color-on-surface-low-emphasis)) !default;

libs/anglify/src/modules/breadcrumbs/breadcrumbs-settings.token.ts

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+import { BreadCrumbsSettings, EntireBreadCrumbsSettings } from './breadcrumbs.interface';
+
+export const DEFAULT_BREADCRUMBS_SETTINGS: EntireBreadCrumbsSettings = {
+  items: [],
+  divider: '/',
+  matchOptions: { matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact' },
+};
+export const BREADCRUMBS_SETTINGS = new InjectionToken<BreadCrumbsSettings>('Breadcrumbs Settings');

libs/anglify/src/modules/breadcrumbs/breadcrumbs.component.html

@@ -0,0 +1,15 @@
+<ng-container *ngFor="let item of items">
+  <a
+    *ngIf="!item.disabled"
+    [routerLink]="item.routerLink"
+    routerLinkActive="active"
+    [routerLinkActiveOptions]="matchOptions"
+    [href]="item.href"
+  >
+    {{ item.text }}
+  </a>
+  <a *ngIf="item.disabled" class="disabled" routerLinkActive="active" [routerLinkActiveOptions]="matchOptions">{{ item.text }}</a>
+  <div *ngIf="isLastItem(item) === false" class="divider">
+    <ng-container *anglifySlotOutlet="slots | findSlot: 'divider'">{{ divider }}</ng-container>
+  </div>
+</ng-container>

libs/anglify/src/modules/breadcrumbs/breadcrumbs.component.scss

@@ -0,0 +1,33 @@
+@use 'variables' as *;
+
+:host {
+  display: flex;
+  align-items: center;
+  user-select: none;
+
+  a {
+    color: $breadcrumbs-inactive-color;
+    font: $breadcrumbs-text-font;
+    letter-spacing: $breadcrumbs-text-letter-spacing;
+    text-decoration: none;
+    text-transform: $breadcrumbs-text-transform;
+  }
+
+  .active {
+    color: $breadcrumbs-active-color;
+  }
+
+  .divider {
+    padding: $breadcrumbs-divider-padding;
+    color: $breadcrumbs-inactive-color;
+    font: $breadcrumbs-divider-font;
+    letter-spacing: $breadcrumbs-divider-letter-spacing;
+    text-decoration: none;
+    text-transform: $breadcrumbs-divider-transform;
+  }
+
+  .disabled {
+    color: $breadcrumbs-disabled-color;
+    cursor: not-allowed;
+  }
+}

libs/anglify/src/modules/breadcrumbs/breadcrumbs.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+
+describe('BreadcrumbsComponent', () => {
+  let component: BreadcrumbsComponent;
+  let fixture: ComponentFixture<BreadcrumbsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BreadcrumbsComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BreadcrumbsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/anglify/src/modules/breadcrumbs/breadcrumbs.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, ContentChildren, Inject, Input, QueryList, Self } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
+import { BREADCRUMBS_SETTINGS, DEFAULT_BREADCRUMBS_SETTINGS } from './breadcrumbs-settings.token';
+import { BreadCrumb, EntireBreadCrumbsSettings } from './breadcrumbs.interface';
+import { createSettingsProvider } from '../../factories/settings.factory';
+import { SlotDirective } from '../common/directives/slot/slot.directive';
+
+@Component({
+  selector: 'anglify-breadcrumbs',
+  templateUrl: './breadcrumbs.component.html',
+  styleUrls: ['./breadcrumbs.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    createSettingsProvider<EntireBreadCrumbsSettings>('anglifyBreadcrumbsSettings', DEFAULT_BREADCRUMBS_SETTINGS, BREADCRUMBS_SETTINGS),
+  ],
+})
+export class BreadcrumbsComponent {
+  @ContentChildren(SlotDirective) public readonly slots?: QueryList<SlotDirective>;
+
+  @Input() public items: BreadCrumb[] = this.settings.items;
+  @Input() public divider: string = this.settings.divider;
+  @Input() public matchOptions: IsActiveMatchOptions = this.settings.matchOptions;
+
+  public constructor(@Self() @Inject('anglifyBreadcrumbsSettings') public settings: EntireBreadCrumbsSettings) {}
+
+  public isLastItem(item: BreadCrumb) {
+    return item === this.items[this.items.length - 1];
+  }
+}

libs/anglify/src/modules/breadcrumbs/breadcrumbs.interface.ts

@@ -0,0 +1,15 @@
+import { IsActiveMatchOptions } from '@angular/router';
+import { RouterLinkCommands } from '../../utils/interfaces';
+
+export interface EntireBreadCrumbsSettings {
+  items: BreadCrumb[];
+  divider: string;
+  matchOptions: IsActiveMatchOptions;
+}
+export interface BreadCrumb {
+  text: string;
+  disabled: boolean;
+  href: string;
+  routerLink: RouterLinkCommands;
+}
+export type BreadCrumbsSettings = Partial<EntireBreadCrumbsSettings>;

libs/anglify/src/modules/breadcrumbs/breadcrumbs.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BreadcrumbsComponent } from './breadcrumbs.component';
+import { AnglifyCommonModule } from '../common/anglify-common.module';
+
+@NgModule({
+  declarations: [BreadcrumbsComponent],
+  imports: [CommonModule, AnglifyCommonModule, RouterModule],
+  exports: [BreadcrumbsComponent, AnglifyCommonModule, RouterModule],
+})
+export class BreadcrumbsModule {}