docs(Breadcrumb): Realizza la prima stesura della documentazione per …

…Breadcrumb

ref #46

src/app/app-routing.module.ts

@@ -14,7 +14,8 @@ const routes: Routes = [
     { path: 'checkbox', loadChildren: 'src/app/checkbox/checkbox.module#CheckboxModule' },
     { path: 'toggle', loadChildren: 'src/app/toggle/toggle.module#ToggleModule' },
     { path: 'radio', loadChildren: 'src/app/radio/radio.module#RadioModule' },
-    { path: 'badge', loadChildren: 'src/app/badge/badge.module#BadgeModule' }
+    { path: 'badge', loadChildren: 'src/app/badge/badge.module#BadgeModule' },
+    { path: 'breadcrumb', loadChildren: 'src/app/breadcrumb/breadcrumb.module#BreadcrumbModule' }
   ]}
 ];
 

src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html

@@ -0,0 +1,39 @@
+<div class="card w-100 mt-2">
+  <div class="card-body">
+    <h4 class="card-title">Esempio Breadcrumb</h4>
+
+    <div class="card-text">
+      <it-breadcrumb [dark]="isDark" [separator]="separator">
+        <it-breadcrumb-item *ngFor="let item of items"
+          [link]="item.link" [icon]="item.icon">
+          {{item.label}}
+        </it-breadcrumb-item>
+      </it-breadcrumb>
+
+      <div class="row">
+        <div class="form-check col-4">
+          <h5>Azioni</h5>
+          <it-checkbox [(ngModel)]="isDark" label="Sfondo scuro" id="dark-checkbox"></it-checkbox>
+          <button type="button" class="btn btn-success btn-lg" (click)="insert()">+</button>
+          <button type="button" class="btn btn-danger btn-lg" (click)="remove()">-</button>
+        </div>
+        <div class="form-check col-3">
+          <h5>Separatore</h5>
+          <it-radio-group [(ngModel)]="separator">
+            <it-radio-button id="radio-sl" name="sl" value="/" label="/"></it-radio-button>
+            <it-radio-button id="radio-gt" name="gt" value=">" label=">"></it-radio-button>
+            <it-radio-button id="radio-tl" name="tl" value="~" label="~"></it-radio-button>
+          </it-radio-group>
+        </div>
+        <div class="form-check col-5">
+          <h5>Icona</h5>
+          <it-radio-group [(ngModel)]="icon">
+            <it-radio-button id="radio-favorite" name="it-favorite" value="it-favorite" label="it-favorite"></it-radio-button>
+            <it-radio-button id="radio-facebook" name="it-facebook" value="it-facebook" label="it-facebook"></it-radio-button>
+            <it-radio-button id="radio-flickr" name="it-flickr" value="it-flickr" label="it-flickr"></it-radio-button>
+          </it-radio-group>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.spec.ts

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

src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts

@@ -0,0 +1,50 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'it-breadcrumb-example',
+  templateUrl: './breadcrumb-example.component.html',
+  styleUrls: ['./breadcrumb-example.component.scss']
+})
+export class BreadcrumbExampleComponent {
+  get icon() {
+    return this._icon;
+  }
+  set icon(value: string) {
+    this._icon = value;
+    this.items.forEach(item => item.icon = this._icon);
+  }
+  _icon = 'it-favorite';
+
+
+  separator = '/';
+  isDark = true;
+  items = [
+    { link: 'https://www.aol.com', label: 'Crumb 1', icon: this.icon },
+    { link: 'https://www.yahoo.com', label: 'Crumb 2', icon: this.icon },
+    { link: 'https://www.bing.com', label: 'Crumb 3', icon: this.icon },
+  ];
+
+  i = 4;
+
+  insert() {
+    this.items.push({ link: `https://www.google.com`, label: `Crumb ${this.i}`, icon: this.icon });
+    this.i++;
+  }
+
+  remove() {
+    this.items.pop();
+    this.i--;
+  }
+
+  change() {
+    this.separator = this.separator === '/' ? '>' : '/';
+    this.items.forEach(item => {
+      item.icon = item.icon === 'it-favorite' ? 'it-lock' : 'it-favorite';
+    });
+  }
+
+  toggle() {
+    this.isDark = !this.isDark;
+  }
+
+}

src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.spec.ts

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

src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.tpl

@@ -0,0 +1,12 @@
+{% set html %}
+  {% include "../breadcrumb-example/breadcrumb-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../breadcrumb-example/breadcrumb-example.component.ts" %}
+{% endset %}
+
+<it-breadcrumb-example></it-breadcrumb-example>
+
+<it-source-display html="{$ html | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" typescript="{$ typescript | replace("\{\{", "/\{/\{") | replace("\}\}", "/\}/\}") $}" >
+</it-source-display>

src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'it-breadcrumb-examples',
+  templateUrl: './breadcrumb-examples.component.html',
+  styleUrls: ['./breadcrumb-examples.component.scss']
+})
+export class BreadcrumbExamplesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.html

@@ -0,0 +1,73 @@
+<h1>Breadcrumb</h1>
+<h5>Il componente Breadcrumb utilizzabile per la navigazione</h5>
+
+<ul class="nav nav-tabs" id="breadcrumb-tab" role="tablist">
+  <li class="nav-item">
+    <a class="nav-link active" id="breadcrumb-description-tab" data-toggle="tab" href="#breadcrumb-description-tab-content" role="tab" aria-controls="breadcrumb-description-tab-content" aria-selected="true">Descrizione</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="breadcrumb-api-tab" data-toggle="tab" href="#breadcrumb-api-tab-content" role="tab" aria-controls="breadcrumb-api-tab-content" aria-selected="false">API</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="breadcrumb-examples-tab" data-toggle="tab" href="#breadcrumb-examples-tab-content" role="tab" aria-controls="breadcrumb-examples-tab-content" aria-selected="false">Esempi</a>
+  </li>
+</ul>
+<div class="tab-content" id="breadcrumb-content-tab">
+  <div class="tab-pane p-3 fade show active" id="breadcrumb-description-tab-content" role="tabpanel" aria-labelledby="breadcrumb-description-tab-content">
+    <div [innerHTML]="component.description"></div>
+  </div>
+  <div class="tab-pane p-3 fade" id="breadcrumb-api-tab-content" role="tabpanel" aria-labelledby="breadcrumb-api-tab-content">
+    <!-- TODO: da spostare in una componente ad hoc -->
+    <div *ngIf="component.inputsClass.length > 0">
+      <h3>Input</h3>
+      <div *ngFor="let input of component.inputsClass">
+        <table class="table table-bordered table-sm">
+          <tbody>
+            <tr>
+              <td style="width: 20%">
+                <code>{{input.name}}</code>
+              </td>
+              <td style="width: 80%">
+                <p>
+                  <em>Tipo: </em>
+                  <code>{{input.type}}</code>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td class="col-md-2" colspan="2" [innerHTML]="input.description"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <h3>Item Input</h3>
+      <div *ngFor="let input of subcomponent.inputsClass">
+        <table class="table table-bordered table-sm">
+          <tbody>
+            <tr>
+              <td style="width: 20%">
+                <code>{{input.name}}</code>
+              </td>
+              <td style="width: 80%">
+                <p>
+                  <em>Tipo: </em>
+                  <code>{{input.type}}</code>
+                </p>
+              </td>
+            </tr>
+            <tr>
+              <td class="col-md-2" colspan="2" [innerHTML]="input.description"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div *ngIf="component.outputsClass.length > 0">
+      <h3>Output</h3>
+      <!-- TODO: usare lo stesso componente di input -->
+    </div>
+  </div>
+  <div class="tab-pane p-3 fade" id="breadcrumb-examples-tab-content" role="tabpanel" aria-labelledby="breadcrumb-examples-tab-content">
+    <it-breadcrumb-examples></it-breadcrumb-examples>
+  </div>
+</div>

src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.spec.ts

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

src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import * as Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-breadcrumb-index',
+  templateUrl: './breadcrumb-index.component.html',
+  styleUrls: ['./breadcrumb-index.component.scss']
+})
+export class BreadcrumbIndexComponent {
+
+  component: any;
+  subcomponent: any;
+
+  constructor() {
+    this.component = (<any>Documentation).components.find(component => component.name === 'BreadcrumbComponent');
+    this.subcomponent = (<any>Documentation).components.find(component => component.name === 'BreadcrumbItemComponent');
+  }
+
+}

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

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { BreadcrumbIndexComponent } from './breadcrumb-index/breadcrumb-index.component';
+
+const routes: Routes = [
+  { path: '', component: BreadcrumbIndexComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BreadcrumbRoutingModule { }

src/app/breadcrumb/breadcrumb.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BreadcrumbRoutingModule } from './breadcrumb-routing.module';
+import { BreadcrumbExampleComponent } from './breadcrumb-example/breadcrumb-example.component';
+import { BreadcrumbExamplesComponent } from './breadcrumb-examples/breadcrumb-examples.component';
+import { BreadcrumbIndexComponent } from './breadcrumb-index/breadcrumb-index.component';
+import { DesignAngularKitModule } from 'projects/design-angular-kit/src/public_api';
+import { FormsModule } from '@angular/forms';
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DesignAngularKitModule,
+    FormsModule,
+    SharedModule,
+    BreadcrumbRoutingModule
+  ],
+  declarations: [BreadcrumbExampleComponent, BreadcrumbExamplesComponent, BreadcrumbIndexComponent]
+})
+export class BreadcrumbModule { }

src/app/table-of-content.service.ts

@@ -43,6 +43,10 @@ export class TableOfContentService {
           {
             label: 'Badge',
             link: '/componenti/badge',
+          },
+          {
+            label: 'Breadcrumb',
+            link: '/componenti/breadcrumb',
           }
         ]
       }