From 829d5bcc7e8186e2f782f0b94850dfae14e96b53 Mon Sep 17 00:00:00 2001 From: Mario Traetta Date: Fri, 31 Aug 2018 09:33:21 +0200 Subject: [PATCH] feat(Breadcrumb): implementa componente Breadcrumb ref #46 --- e2e/src/breadcrumb/breadcrumb.e2e-spec.ts | 99 +++++++++++++++ e2e/src/breadcrumb/breadcrumb.po.ts | 118 ++++++++++++++++++ .../breadcrumb/breadcrumb-item.component.css | 0 .../breadcrumb/breadcrumb-item.component.html | 6 + .../breadcrumb/breadcrumb-item.component.ts | 55 ++++++++ .../lib/breadcrumb/breadcrumb.component.css | 0 .../lib/breadcrumb/breadcrumb.component.html | 5 + .../breadcrumb/breadcrumb.component.spec.ts | 115 +++++++++++++++++ .../lib/breadcrumb/breadcrumb.component.ts | 88 +++++++++++++ .../src/lib/design-angular-kit.module.ts | 10 +- projects/design-angular-kit/src/public_api.ts | 2 + src/app/app-routing.module.ts | 1 + .../breadcrumb-example.component.html | 39 ++++++ .../breadcrumb-example.component.scss | 0 .../breadcrumb-example.component.spec.ts | 25 ++++ .../breadcrumb-example.component.ts | 50 ++++++++ .../breadcrumb-examples.component.scss | 0 .../breadcrumb-examples.component.spec.ts | 25 ++++ .../breadcrumb-examples.component.tpl | 12 ++ .../breadcrumb-examples.component.ts | 15 +++ .../breadcrumb-index.component.html | 77 ++++++++++++ .../breadcrumb-index.component.scss | 0 .../breadcrumb-index.component.spec.ts | 25 ++++ .../breadcrumb-index.component.ts | 19 +++ .../breadcrumb/breadcrumb-routing.module.ts | 13 ++ src/app/breadcrumb/breadcrumb.module.ts | 22 ++++ src/app/table-of-content.service.ts | 4 + 27 files changed, 823 insertions(+), 2 deletions(-) create mode 100644 e2e/src/breadcrumb/breadcrumb.e2e-spec.ts create mode 100644 e2e/src/breadcrumb/breadcrumb.po.ts create mode 100644 projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.css create mode 100644 projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.html create mode 100644 projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.ts create mode 100644 projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.css create mode 100644 projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.html create mode 100644 projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.spec.ts create mode 100644 projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.ts create mode 100644 src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html create mode 100644 src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.scss create mode 100644 src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.spec.ts create mode 100644 src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts create mode 100644 src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.scss create mode 100644 src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.spec.ts create mode 100644 src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.tpl create mode 100644 src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.ts create mode 100644 src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.html create mode 100644 src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.scss create mode 100644 src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.spec.ts create mode 100644 src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.ts create mode 100644 src/app/breadcrumb/breadcrumb-routing.module.ts create mode 100644 src/app/breadcrumb/breadcrumb.module.ts diff --git a/e2e/src/breadcrumb/breadcrumb.e2e-spec.ts b/e2e/src/breadcrumb/breadcrumb.e2e-spec.ts new file mode 100644 index 00000000..ce5932b1 --- /dev/null +++ b/e2e/src/breadcrumb/breadcrumb.e2e-spec.ts @@ -0,0 +1,99 @@ +import { ElementFinder } from 'protractor'; +import { BreadcrumbPage } from './breadcrumb.po'; + +describe('Breadcrumb', () => { + let page: BreadcrumbPage; + + beforeEach(async() => { + page = new BreadcrumbPage(); + await page.go(); + }); + + it('dovrebbe iniziare con uno sfondo scuro per poi essere cambiato ad uno chiaro', async () => { + expect(await page.hasDarkBackground()).toBeTruthy(); + + await page.clickBackgroundCheckbox(); + + expect(await page.hasDarkBackground()).toBeFalsy(); + + await page.clickBackgroundCheckbox(); + + expect(await page.hasDarkBackground()).toBeTruthy(); + }); + + it('dovrebbe avere un ultimo elemento con relative classe active', async () => { + const breadcrumbItems: ElementFinder[] = await page.getBreadcrumbItems(); + expect(breadcrumbItems.length).toBe(3); + + let lastItem: ElementFinder; + breadcrumbItems.forEach(async(item, i, array) => { + const isLastItem = page.isLastItem(item); + if (i === array.length - 1) { + expect(isLastItem).toBeTruthy(); + } else { + expect(isLastItem).toBeFalsy(); + } + }); + + lastItem = breadcrumbItems[breadcrumbItems.length - 1]; + + page.clickAddButton(); + + let isLast = page.isLastItem(lastItem); + expect(isLast).toBeFalsy(); + + page.clickRemoveButton(); + + isLast = page.isLastItem(lastItem); + expect(isLast).toBeTruthy(); + }); + + it('dovrebbe poter cambiare il separatore per tutti i suoi elementi', async () => { + const breadcrumbItems: ElementFinder[] = await page.getBreadcrumbItems(); + const breadcrumbItemsSeparators: ElementFinder[] = await page.getBreadcrumbItemsSeparator(); + expect(breadcrumbItemsSeparators.length).toBe(breadcrumbItems.length - 1); + + const SLASH_SEPARATOR = '/'; + breadcrumbItemsSeparators.forEach(item => { + expect(item.getText()).toBe(SLASH_SEPARATOR); + }); + + page.clickGthanSeparator(); + + const GTHAN_SEPARATOR = '>'; + breadcrumbItemsSeparators.forEach(item => { + expect(item.getText()).toBe(GTHAN_SEPARATOR); + }); + + page.clickTildeSeparator(); + + const TILDE_SEPARATOR = '~'; + breadcrumbItemsSeparators.forEach(item => { + expect(item.getText()).toBe(TILDE_SEPARATOR); + }); + }); + + it('dovrebbe poter cambiare l\'icona o disattivarla per tutti i suoi elementi', async () => { + const breadcrumbItemsIcons: ElementFinder[] = await page.getBreadcrumbItemsIcon(); + + const FAVORITE_ICON = 'it-favorite'; + breadcrumbItemsIcons.forEach(item => { + expect(item.getAttribute('class')).toBe(FAVORITE_ICON); + }); + + page.clickFacebookIcon(); + + const LINK_ICON = 'it-link'; + breadcrumbItemsIcons.forEach(item => { + expect(item.getAttribute('class')).toBe(LINK_ICON); + }); + + page.clickFlickrIcon(); + + const ICON_NONE = ''; + breadcrumbItemsIcons.forEach(item => { + expect(item.getAttribute('class')).toBe(ICON_NONE); + }); + }); + +}); diff --git a/e2e/src/breadcrumb/breadcrumb.po.ts b/e2e/src/breadcrumb/breadcrumb.po.ts new file mode 100644 index 00000000..2529c94b --- /dev/null +++ b/e2e/src/breadcrumb/breadcrumb.po.ts @@ -0,0 +1,118 @@ +import { browser, by, element, ElementFinder } from 'protractor'; + +export class BreadcrumbPage { + private readonly BREADCRUMB_URL = '/#/componenti/breadcrumb'; + private readonly ID_EXAMPLE_TAB = 'breadcrumb-examples-tab'; + + private readonly ID_BREADCRUMB = 'it-breadcrumb-0'; + + private readonly ID_CHECKBOX_BG = 'checkbox-0'; + + private readonly ID_BUTTON_ADD = 'add-button'; + private readonly ID_BUTTON_REMOVE = 'remove-button'; + + private readonly ID_RADIO_SEPARATOR_SLASH = 'radio-1'; + private readonly ID_RADIO_SEPARATOR_GTHAN = 'radio-2'; + private readonly ID_RADIO_SEPARATOR_TILDE = 'radio-3'; + + private readonly ID_RADIO_ICON_IT_FAVORITE = 'radio-4'; + private readonly ID_RADIO_ICON_IT_FACEBOOK = 'radio-5'; + private readonly ID_RADIO_ICON_IT_FLICKR = 'radio-6'; + + private readonly CSS_SELECTOR_LABEL_DARK_BG = this.getLabelForAttribute(this.ID_CHECKBOX_BG); + + private readonly CSS_SELECTOR_LABEL_SLASH = this.getLabelForAttribute(this.ID_RADIO_SEPARATOR_SLASH); + + private readonly CSS_SELECTOR_LABEL_GTHAN = this.getLabelForAttribute(this.ID_RADIO_SEPARATOR_GTHAN); + + private readonly CSS_SELECTOR_LABEL_TILDE = this.getLabelForAttribute(this.ID_RADIO_SEPARATOR_TILDE); + + private readonly CSS_SELECTOR_LABEL_FAVORITE = this.getLabelForAttribute(this.ID_RADIO_ICON_IT_FAVORITE); + + private readonly CSS_SELECTOR_LABEL_FACEBOOK = this.getLabelForAttribute(this.ID_RADIO_ICON_IT_FACEBOOK); + + private readonly CSS_SELECTOR_LABEL_FLICKR = this.getLabelForAttribute(this.ID_RADIO_ICON_IT_FLICKR); + + async go() { + await browser.get(this.BREADCRUMB_URL); + await element(by.id(this.ID_EXAMPLE_TAB)).click(); + return await browser.sleep(500); + } + + async isLastItem(el: ElementFinder) { + const classes = await this.getBreadcrumbItemClasses(el); + return classes.indexOf('active') > -1; + } + + async getBreadcrumbClasses() { + const classes = await element(by.css('.breadcrumb')).getAttribute('class'); + return classes.split(' '); + } + + async getBreadcrumbItems() { + return await this.getElementById(this.ID_BREADCRUMB).all(by.css('.breadcrumb-item')); + } + + async getBreadcrumbItemClasses(item: ElementFinder) { + const classes = await item.getAttribute('class'); + return classes.split(' '); + } + + async getBreadcrumbItemsSeparator() { + return await this.getElementById(this.ID_BREADCRUMB).all(by.css('.separator')); + } + + async getBreadcrumbItemsIcon() { + return await this.getElementById(this.ID_BREADCRUMB).all(by.css('.icon')); + } + + async clickAddButton() { + await this.getElementById(this.ID_BUTTON_ADD).click(); + } + + async clickRemoveButton() { + await this.getElementById(this.ID_BUTTON_REMOVE).click(); + } + + async clickBackgroundCheckbox() { + await element(by.css(this.CSS_SELECTOR_LABEL_DARK_BG)).click(); + } + + async clickSlashSeparator() { + await element(by.css(this.CSS_SELECTOR_LABEL_SLASH)).click(); + } + + async clickGthanSeparator() { + await element(by.css(this.CSS_SELECTOR_LABEL_GTHAN)).click(); + } + + async clickTildeSeparator() { + await element(by.css(this.CSS_SELECTOR_LABEL_TILDE)).click(); + } + + async clickFavoriteIcon() { + await element(by.css(this.CSS_SELECTOR_LABEL_FAVORITE)).click(); + } + + async clickFacebookIcon() { + await element(by.css(this.CSS_SELECTOR_LABEL_FACEBOOK)).click(); + } + + async clickFlickrIcon() { + await element(by.css(this.CSS_SELECTOR_LABEL_FLICKR)).click(); + } + + async hasDarkBackground() { + const classes = await this.getBreadcrumbClasses(); + return classes.indexOf('dark') > -1; + } + + private getElementById(id) { + return element(by.id(id)); + } + + private getLabelForAttribute(attr: string) { + return `[for="${attr}"]`; + } + +} diff --git a/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.css b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.css new file mode 100644 index 00000000..e69de29b diff --git a/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.html b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.html new file mode 100644 index 00000000..1b1b6a9f --- /dev/null +++ b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.html @@ -0,0 +1,6 @@ +
  • + + + + {{separator}} +
    • diff --git a/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.ts b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.ts new file mode 100644 index 00000000..81b525f7 --- /dev/null +++ b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb-item.component.ts @@ -0,0 +1,55 @@ +import { Component, OnInit, Input, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; + +let identifier = 0; + +@Component({ + selector: 'it-breadcrumb-item', + templateUrl: './breadcrumb-item.component.html', + styleUrls: ['./breadcrumb-item.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class BreadcrumbItemComponent { + id = `it-breadcrumb-item-${identifier++}`; + + constructor(private _cdRef: ChangeDetectorRef, private _elemRef: ElementRef) { } + + /** + * Il link alla pagina verso cui andare al click di questo elemento del breadcrumb + */ + @Input() + get link(): string { return this._link; } + set link(value: string) { this._link = value; } + private _link: string; + + /** + * La classe dell'icona da usare prima del testo dell'elemento del breadcrumb + */ + @Input() + get icon(): string { return this._icon; } + set icon(value: string) { this._icon = value; } + private _icon: string; + + get separator(): string { return this._separator; } + set separator(value: string) { this._separator = value; } + private _separator: string; + + get isLast(): boolean { return this._isLast; } + set isLast(value: boolean) { + this._isLast = value; + const breadcrumbItem = this._elemRef.nativeElement.querySelector('.breadcrumb-item'); + if (this._isLast) { + breadcrumbItem.setAttribute('aria-current', 'page'); + } else { + if (breadcrumbItem.hasAttribute('aria-current')) { + breadcrumbItem.removeAttribute('aria-current'); + } + } + this._cdRef.detectChanges(); + } + private _isLast = false; + + get breadcrumbClass() { + return 'breadcrumb-item' + (this.isLast ? ' active' : ''); + } + +} diff --git a/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.css b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.css new file mode 100644 index 00000000..e69de29b diff --git a/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.html b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.html new file mode 100644 index 00000000..6fdd6a40 --- /dev/null +++ b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.spec.ts b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.spec.ts new file mode 100644 index 00000000..38ab2f26 --- /dev/null +++ b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.spec.ts @@ -0,0 +1,115 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BreadcrumbComponent } from './breadcrumb.component'; +import { Component, DebugElement } from '@angular/core'; +import { BreadcrumbItemComponent } from './breadcrumb-item.component'; +import { By } from '@angular/platform-browser'; + +const URL = 'http://www.google.com'; +const ICON = 'it-favorite'; +const LABEL = 'Label'; + + +/** Componente per testare un BreadcrumbComponent. */ +@Component({ + template: ` + + + {{item.label}} + + + `, +}) +class SingleBreadcrumbComponent { + dark = false; + separator = '/'; + items = [ + { link: URL, icon: ICON, label: LABEL }, + { link: URL, icon: ICON, label: LABEL }, + { link: URL, icon: ICON, label: LABEL }, + ]; +} + +describe('BreadcrumbComponent', () => { + let fixture: ComponentFixture; + let testComponent: SingleBreadcrumbComponent; + let breadcrumbDebugElement: DebugElement; + let breadcrumbItemDebugElements: DebugElement[]; + let breadcrumbInstance: BreadcrumbComponent; + let breadcrumbItemInstances: BreadcrumbItemComponent[]; + let breadcrumbItemLabelElements: HTMLLabelElement[]; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + BreadcrumbComponent, + BreadcrumbItemComponent, + SingleBreadcrumbComponent + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SingleBreadcrumbComponent); + fixture.detectChanges(); + + testComponent = fixture.debugElement.componentInstance; + fixture.detectChanges(); + + breadcrumbDebugElement = fixture.debugElement.query(By.directive(BreadcrumbComponent)); + breadcrumbInstance = breadcrumbDebugElement.injector.get(BreadcrumbComponent); + + breadcrumbItemDebugElements = fixture.debugElement.queryAll(By.directive(BreadcrumbItemComponent)); + breadcrumbItemInstances = breadcrumbItemDebugElements.map(debugEl => debugEl.componentInstance); + + breadcrumbItemLabelElements = breadcrumbItemDebugElements.map( + debugEl => debugEl.query(By.css('a')).nativeElement + ); + }); + + it('dovrebbe avere un ultimo elemento attivo', () => { + expect(breadcrumbItemInstances.pop().isLast).toBeTruthy(); + }); + + it('dovrebbe poter rilevare cambi di elementi a runtime', () => { + const lastItem = breadcrumbItemInstances[breadcrumbItemInstances.length - 1]; + expect(lastItem.isLast).toBeTruthy(); + + testComponent.items.push({ + icon: '', link: '', label: '' + }); + fixture.detectChanges(); + + breadcrumbItemDebugElements = fixture.debugElement.queryAll(By.directive(BreadcrumbItemComponent)); + breadcrumbItemInstances = breadcrumbItemDebugElements.map(debugEl => debugEl.componentInstance); + breadcrumbItemLabelElements = breadcrumbItemDebugElements.map( + debugEl => debugEl.query(By.css('a')).nativeElement + ); + + expect(lastItem.isLast).toBeFalsy(); + + const newLastItem = breadcrumbItemInstances[breadcrumbItemInstances.length - 1]; + expect(newLastItem.isLast).toBeTruthy(); + + testComponent.items.pop(); + fixture.detectChanges(); + + expect(lastItem.isLast).toBeTruthy(); + }); + + it('dovrebbe poter cambiare il separatore', () => { + const TILDE_CHAR = '~'; + testComponent.separator = TILDE_CHAR; + fixture.detectChanges(); + + expect(breadcrumbInstance.separator).toBe(TILDE_CHAR); + let isSeparatorSetforItems = true; + breadcrumbItemInstances.forEach( + item => isSeparatorSetforItems = (isSeparatorSetforItems && item.separator === TILDE_CHAR) + ); + expect(isSeparatorSetforItems).toBeTruthy(); + }); + +}); diff --git a/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.ts b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.ts new file mode 100644 index 00000000..ba1c8e5f --- /dev/null +++ b/projects/design-angular-kit/src/lib/breadcrumb/breadcrumb.component.ts @@ -0,0 +1,88 @@ +import { + Component, Input, ContentChildren, QueryList, forwardRef, + AfterContentInit, OnChanges, OnDestroy, SimpleChanges, ChangeDetectionStrategy +} from '@angular/core'; +import { BreadcrumbItemComponent } from './breadcrumb-item.component'; +import { Util } from '../util/util'; +import { Subscription } from 'rxjs'; + +const DEFAULT_SEPARATOR = '/'; +let identifier = 0; + +/** + * Una componente che indica la posizione della pagina corrente all’interno di una gerarchia di navigazione + */ +@Component({ + selector: 'it-breadcrumb', + templateUrl: './breadcrumb.component.html', + styleUrls: ['./breadcrumb.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class BreadcrumbComponent implements AfterContentInit, OnChanges, OnDestroy { + id = `it-breadcrumb-${identifier++}`; + + /** + * Indica che il breadcrumb utilizza il tema di colorazione scura. + * Accetta una espressione booleana o può essere usato come attributo senza valore + */ + @Input() + get dark(): boolean { return this._dark; } + set dark(value: boolean) { this._dark = Util.coerceBooleanProperty(value); } + private _dark = false; + + /** + * Il carattere che verrà usato come separatore tra gli elementi del breadcrumb + */ + @Input() + get separator(): string { return this._separator; } + set separator(value: string) { this._separator = value ? value : DEFAULT_SEPARATOR; } + private _separator = DEFAULT_SEPARATOR; + + @ContentChildren(forwardRef(() => BreadcrumbItemComponent), { descendants: true }) + private _items: QueryList; + + get breadcrumbClass() { + return 'breadcrumb' + (this._dark ? ' dark' : ''); + } + + private _subscription = Subscription.EMPTY; + + ngAfterContentInit() { + this._reloadBreadcrumbs(this._items); + } + + ngOnChanges(changes: SimpleChanges) { + if (changes['separator']) { + if (!changes['separator'].firstChange) { + this._reloadBreadcrumbs(this._items); + } + } + } + + ngOnDestroy() { + if (this._subscription) { + this._subscription.unsubscribe(); + } + } + + private _reloadBreadcrumbs(currentItems: QueryList) { + currentItems.forEach(item => { + item.separator = this.separator; + item.isLast = (item === currentItems.last); + }); + + this._subscribeToChanges(); + } + + + private _subscribeToChanges() { + if (this._subscription) { + this._subscription.unsubscribe(); + } + + this._subscription = this._items.changes.subscribe(items => { + this._reloadBreadcrumbs(items); + }); + } + +} diff --git a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts index d3e31e06..7ef32ad6 100644 --- a/projects/design-angular-kit/src/lib/design-angular-kit.module.ts +++ b/projects/design-angular-kit/src/lib/design-angular-kit.module.ts @@ -10,6 +10,8 @@ import { TooltipDirective } from './tooltip/tooltip.directive'; import { TooltipComponent } from './tooltip/tooltip.component'; import { ButtonComponent } from './button/button.component'; import { BadgeDirective } from './badge/badge.directive'; +import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component'; +import { BreadcrumbItemComponent } from './breadcrumb/breadcrumb-item.component'; import { TabGroupComponent } from './tabs/tab-group.component'; import { TabComponent } from './tabs/tab.component'; @@ -29,7 +31,9 @@ import { TabComponent } from './tabs/tab.component'; ProgressBarComponent, ButtonComponent, TooltipDirective, - TooltipComponent + TooltipComponent, + BreadcrumbComponent, + BreadcrumbItemComponent ], exports: [ CheckboxComponent, @@ -41,7 +45,9 @@ import { TabComponent } from './tabs/tab.component'; TabComponent, ProgressBarComponent, ButtonComponent, - TooltipDirective + TooltipDirective, + BreadcrumbComponent, + BreadcrumbItemComponent ], entryComponents: [TooltipComponent] }) diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts index 22a27674..3d6027cb 100644 --- a/projects/design-angular-kit/src/public_api.ts +++ b/projects/design-angular-kit/src/public_api.ts @@ -10,5 +10,7 @@ export * from './lib/tooltip/tooltip.directive'; export * from './lib/tooltip/tooltip.config'; export * from './lib/button/button.component'; export * from './lib/badge/badge.directive'; +export * from './lib/breadcrumb/breadcrumb.component'; +export * from './lib/breadcrumb/breadcrumb-item.component'; export * from './lib/tabs/tab-group.component'; export * from './lib/design-angular-kit.module'; diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9f8d81ea..49d5f3d8 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -14,6 +14,7 @@ const routes: Routes = [ { path: 'progress-bar', loadChildren: 'src/app/progress-bar/progress-bar.module#ProgressBarModule' }, { path: 'toggle', loadChildren: 'src/app/toggle/toggle.module#ToggleModule' }, { path: 'radio', loadChildren: 'src/app/radio/radio.module#RadioModule' }, + { path: 'breadcrumb', loadChildren: 'src/app/breadcrumb/breadcrumb.module#BreadcrumbModule' }, { path: 'tabs', loadChildren: 'src/app/tabs/tabs.module#TabsModule' }, { path: 'tooltip', loadChildren: 'src/app/tooltip/tooltip.module#TooltipModule' }, { path: 'button', loadChildren: 'src/app/button/button.module#ButtonModule' }, diff --git a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html new file mode 100644 index 00000000..f1db7657 --- /dev/null +++ b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html @@ -0,0 +1,39 @@ +
    +
    +

    Esempio Breadcrumb

    + +
    + + + {{item.label}} + + + +
    +
    +
    Azioni
    + + + +
    +
    +
    Separatore
    + + + + + +
    +
    +
    Icona
    + + + + + +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.scss b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.spec.ts b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.spec.ts new file mode 100644 index 00000000..d2fffadd --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BreadcrumbExampleComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BreadcrumbExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts b/src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts new file mode 100644 index 00000000..fb572b68 --- /dev/null +++ b/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); + } + private _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; + } + +} diff --git a/src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.scss b/src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.spec.ts b/src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.spec.ts new file mode 100644 index 00000000..2c4a85b2 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BreadcrumbExamplesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BreadcrumbExamplesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.tpl b/src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.tpl new file mode 100644 index 00000000..0072bc6d --- /dev/null +++ b/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 %} + + + + + diff --git a/src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.ts b/src/app/breadcrumb/breadcrumb-examples/breadcrumb-examples.component.ts new file mode 100644 index 00000000..24727061 --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.html b/src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.html new file mode 100644 index 00000000..28493c43 --- /dev/null +++ b/src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.html @@ -0,0 +1,77 @@ +

    Breadcrumb

    +
    Il componente Breadcrumb utilizzabile per la navigazione
    + + +
    +
    +
    +
    +
    + +
    +

    Breadcrumb

    +

    Input

    +
    + + + + + + + + + + +
    + {{input.name}} + +

    + Tipo: + {{input.type}} +

    +
    +
    +
    +
    +

    Breadcrumb Item

    +

    Input

    +
    + + + + + + + + + + +
    + {{input.name}} + +

    + Tipo: + {{input.type}} +

    +
    +
    +
    +
    +

    Output

    + +
    +
    +
    + +
    +
    diff --git a/src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.scss b/src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.spec.ts b/src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.spec.ts new file mode 100644 index 00000000..8b9d838b --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BreadcrumbIndexComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BreadcrumbIndexComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.ts b/src/app/breadcrumb/breadcrumb-index/breadcrumb-index.component.ts new file mode 100644 index 00000000..44b2e78a --- /dev/null +++ b/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 = (Documentation).components.find(component => component.name === 'BreadcrumbComponent'); + this.subcomponent = (Documentation).components.find(component => component.name === 'BreadcrumbItemComponent'); + } + +} diff --git a/src/app/breadcrumb/breadcrumb-routing.module.ts b/src/app/breadcrumb/breadcrumb-routing.module.ts new file mode 100644 index 00000000..28976802 --- /dev/null +++ b/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 { } diff --git a/src/app/breadcrumb/breadcrumb.module.ts b/src/app/breadcrumb/breadcrumb.module.ts new file mode 100644 index 00000000..74939d1d --- /dev/null +++ b/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 { } diff --git a/src/app/table-of-content.service.ts b/src/app/table-of-content.service.ts index f133a9da..e9dc3830 100644 --- a/src/app/table-of-content.service.ts +++ b/src/app/table-of-content.service.ts @@ -52,6 +52,10 @@ export class TableOfContentService { label: 'Badge', link: '/componenti/badge', }, + { + label: 'Breadcrumb', + link: '/componenti/breadcrumb', + }, { label: 'Tabs', link: '/componenti/tabs',