feat(stark-ui): implementation of reference-block component

ISSUES CLOSED: #622
NationalBankBelgium · Oct 2, 2018 · 12d30c9 · 12d30c9
1 parent b295b44
commit 12d30c9
Show file tree

Hide file tree

Showing 41 changed files with 393 additions and 18 deletions.
diff --git a/showcase/src/app/demo/action-bar/demo-action-bar.component.html b/showcase/src/app/demo/action-bar/demo-action-bar.component.html
@@ -17,3 +17,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		</example-viewer>
 	</div>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/action-bar/demo-action-bar.component.ts b/showcase/src/app/demo/action-bar/demo-action-bar.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkAction, StarkActionBarConfig } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-action-bar",
@@ -10,6 +11,7 @@ export class DemoActionBarComponent implements OnInit {
 	public actions: StarkAction[];
 	public actionBarConfig: StarkActionBarConfig;
 	public alternativeActions: StarkAction[];
+	public referenceList: ReferenceLink[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
@@ -62,6 +64,13 @@ export class DemoActionBarComponent implements OnInit {
 			}
 		];
 
+		this.referenceList = [
+			{
+				label: "Stark Action Bar component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkActionBarComponent.html"
+			}
+		];
+
 		this.actionBarConfig = {
 			actions: this.actions,
 			isPresent: true

diff --git a/showcase/src/app/demo/breadcrumb/demo-breadcrumb.component.html b/showcase/src/app/demo/breadcrumb/demo-breadcrumb.component.html
@@ -12,3 +12,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		</stark-breadcrumb>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/breadcrumb/demo-breadcrumb.component.ts b/showcase/src/app/demo/breadcrumb/demo-breadcrumb.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkBreadcrumbConfig } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 const componentName: string = "demo-breadcrumb";
 
@@ -13,12 +14,20 @@ const componentName: string = "demo-breadcrumb";
 })
 export class DemoBreadcrumbComponent implements OnInit {
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+	public referenceList: ReferenceLink[];
 
 	/**
 	 * Component lifecycle hook
 	 */
 	public ngOnInit(): void {
 		this.logger.debug(componentName + ": controller initialized");
+
+		this.referenceList = [
+			{
+				label: "Stark Breadcrumb component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkBreadcrumbComponent.html"
+			}
+		];
 	}
 
 	public breadcrumbConfig: StarkBreadcrumbConfig = {

diff --git a/showcase/src/app/demo/collapsible/demo-collapsible.component.html b/showcase/src/app/demo/collapsible/demo-collapsible.component.html
@@ -49,3 +49,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<span class="collapsible-demo-status" translate>{{ collapsed[3] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}</span>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/collapsible/demo-collapsible.component.ts b/showcase/src/app/demo/collapsible/demo-collapsible.component.ts
@@ -1,18 +1,32 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-collapsible",
 	styleUrls: ["./demo-collapsible.component.scss"],
 	templateUrl: "./demo-collapsible.component.html"
 })
-export class DemoCollapsibleComponent {
+export class DemoCollapsibleComponent implements OnInit {
 	public collapsed: boolean[] = [false, true, false, true, false, false, false];
+	public referenceList: ReferenceLink[];
 
 	public constructor() {
-		// empty constructor
+		//empty constructor
 	}
 
 	public toggleCollapsible(nb: number): void {
 		this.collapsed[nb] = !this.collapsed[nb];
 	}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.referenceList = [
+			{
+				label: "Stark Collapsible component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkCollapsibleComponent.html"
+			}
+		];
+	}
 }
diff --git a/showcase/src/app/demo/date-picker/demo-date-picker.component.html b/showcase/src/app/demo/date-picker/demo-date-picker.component.html
@@ -16,3 +16,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		 label="SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER" [minDate]="minDate" [maxDate]="maxDate" (dateChanged)="onDateChanged($event)"></stark-date-picker>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/date-picker/demo-date-picker.component.ts b/showcase/src/app/demo/date-picker/demo-date-picker.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkDatePickerFilter } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-date-picker",
@@ -11,9 +12,13 @@ export class DemoDatePickerComponent implements OnInit {
 	public minDate: Date;
 	public maxDate: Date;
 	public customDateFilter: StarkDatePickerFilter;
+	public referenceList: ReferenceLink[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.currentDate = new Date();
 		this.minDate = new Date();
@@ -24,6 +29,13 @@ export class DemoDatePickerComponent implements OnInit {
 			const day: number = date.getDay();
 			return day === 3;
 		};
+
+		this.referenceList = [
+			{
+				label: "Stark Date Picker component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkDatePickerComponent.html"
+			}
+		];
 	}
 
 	public onDateChanged(date: Date): void {

diff --git a/showcase/src/app/demo/date-range-picker/demo-date-range-picker.component.html b/showcase/src/app/demo/date-range-picker/demo-date-range-picker.component.html
@@ -11,3 +11,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<mat-checkbox [(ngModel)]="isDisabled">isDisabled</mat-checkbox>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/date-range-picker/demo-date-range-picker.component.ts b/showcase/src/app/demo/date-range-picker/demo-date-range-picker.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 import { StarkDatePickerFilter } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-date-range-picker",
@@ -13,6 +14,7 @@ export class DemoDateRangePickerComponent implements OnInit {
 	public minDate: Date;
 	public maxDate: Date;
 	public customDateFilter: StarkDatePickerFilter;
+	public referenceList: ReferenceLink[];
 
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
@@ -28,6 +30,13 @@ export class DemoDateRangePickerComponent implements OnInit {
 			const day: number = date.getDay();
 			return day !== 0;
 		};
+
+		this.referenceList = [
+			{
+				label: "Stark Date Range Picker component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkDateRangePickerComponent.html"
+			}
+		];
 	}
 
 	public onDateChanged(event: Object): void {

diff --git a/showcase/src/app/demo/dropdown/demo-dropdown.component.html b/showcase/src/app/demo/dropdown/demo-dropdown.component.html
@@ -49,3 +49,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 			translate }}: {{ selectedServiceWhiteDropdown }}</div>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/dropdown/demo-dropdown.component.ts b/showcase/src/app/demo/dropdown/demo-dropdown.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-dropdown",
@@ -15,6 +16,8 @@ export class DemoDropdownComponent implements OnInit {
 
 	public serviceDropdownOptions: any[];
 
+	public referenceList: ReferenceLink[];
+
 	/**
 	 * Component lifecycle hook
 	 */
@@ -24,6 +27,13 @@ export class DemoDropdownComponent implements OnInit {
 			{ id: "IO", value: "SHOWCASE.DEMO.DROPDOWN.IO" },
 			{ id: "CS", value: "SHOWCASE.DEMO.DROPDOWN.CS" }
 		];
+
+		this.referenceList = [
+			{
+				label: "Stark Dropdown component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkDropdownComponent.html"
+			}
+		];
 	}
 
 	public serviceDropdownOnChange(selectedValue: string): void {

diff --git a/showcase/src/app/demo/footer/demo-footer.component.html b/showcase/src/app/demo/footer/demo-footer.component.html
@@ -1,4 +1,4 @@
-<mat-card>
+<section class="stark-section">
 	<h1 translate>SHOWCASE.DEMO.FOOTER.TITLE</h1>
 	<p translate>SHOWCASE.DEMO.FOOTER.INTRO</p>
 	<stark-pretty-print [data]="footerHtml" format="html" [enableHighlighting]="true"></stark-pretty-print>
@@ -9,4 +9,5 @@ <h1 translate>SHOWCASE.DEMO.FOOTER.TITLE</h1>
 		<li [innerHTML]="'SHOWCASE.DEMO.FOOTER.INPUT2'|translate"></li>
 		<li [innerHTML]="'SHOWCASE.DEMO.FOOTER.INPUT3'|translate"></li>
 	</ul>
-</mat-card>
+</section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/footer/demo-footer.component.ts b/showcase/src/app/demo/footer/demo-footer.component.ts
@@ -1,14 +1,20 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-footer",
 	templateUrl: "./demo-footer.component.html"
 })
 export class DemoFooterComponent implements OnInit {
 	public footerHtml: string;
+	public referenceList: ReferenceLink[];
+
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.footerHtml = `<stark-app-footer
 	legalInfoUrl="https://www.nbb.be/en/disclaimer-and-legal-information"
@@ -18,5 +24,12 @@ export class DemoFooterComponent implements OnInit {
 	<a htref="https://www.some-page.com/">Some link</a>
 
 </stark-app-footer>`;
+
+		this.referenceList = [
+			{
+				label: "Stark Footer component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkAppFooterComponent.html"
+			}
+		];
 	}
 }
diff --git a/showcase/src/app/demo/keyboard-directives/demo-keyboard-directives.component.html b/showcase/src/app/demo/keyboard-directives/demo-keyboard-directives.component.html
@@ -53,3 +53,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		</form>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/keyboard-directives/demo-keyboard-directives.component.ts b/showcase/src/app/demo/keyboard-directives/demo-keyboard-directives.component.ts
@@ -1,5 +1,6 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-keyboard-directives",
@@ -14,14 +15,30 @@ export class DemoKeyboardDirectivesComponent implements OnInit {
 
 	public logging: string;
 
+	public referenceList: ReferenceLink[];
+
 	public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
 
+	/**
+	 * Component lifecycle hook
+	 */
 	public ngOnInit(): void {
 		this.latestInputValue = "";
 		this.inputValue1 = "";
 		this.inputValue2 = "";
 		this.inputValue3 = "";
 		this.logging = "";
+
+		this.referenceList = [
+			{
+				label: "Stark On Enter Key directive",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/directives/StarkOnEnterKeyDirective.html"
+			},
+			{
+				label: "Stark Restrict Input directive",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/directives/StarkRestrictInputDirective.html"
+			}
+		];
 	}
 
 	public onEnterKeyCallback(...paramValues: any[]): void {

diff --git a/showcase/src/app/demo/language-selector/demo-language-selector.component.html b/showcase/src/app/demo/language-selector/demo-language-selector.component.html
@@ -9,3 +9,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<stark-language-selector mode="toolbar"></stark-language-selector>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/language-selector/demo-language-selector.component.ts b/showcase/src/app/demo/language-selector/demo-language-selector.component.ts
@@ -1,10 +1,25 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-language-selector",
 	templateUrl: "./demo-language-selector.component.html"
 })
-export class DemoLanguageSelectorComponent {
+export class DemoLanguageSelectorComponent implements OnInit {
+	public referenceList: ReferenceLink[];
+
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.referenceList = [
+			{
+				label: "Stark Language Selector component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkLanguageSelectorComponent.html"
+			}
+		];
+	}
 }
diff --git a/showcase/src/app/demo/logout/demo-logout.component.html b/showcase/src/app/demo/logout/demo-logout.component.html
@@ -9,3 +9,4 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 		<stark-app-logout icon="logout"></stark-app-logout>
 	</example-viewer>
 </section>
+<stark-reference-block [links]="referenceList"></stark-reference-block>
diff --git a/showcase/src/app/demo/logout/demo-logout.component.ts b/showcase/src/app/demo/logout/demo-logout.component.ts
@@ -1,10 +1,24 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
 
 @Component({
 	selector: "demo-logout",
 	templateUrl: "./demo-logout.component.html"
 })
-export class DemoLogoutComponent {
+export class DemoLogoutComponent implements OnInit{
 	public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+
+	public referenceList: ReferenceLink[];
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		this.referenceList = [
+			{
+				label: "Stark Logout component",
+				url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkAppLogoutComponent.html"
+			}
+		];
+	}
 }
diff --git a/showcase/src/app/demo/pagination/demo-pagination.component.html b/showcase/src/app/demo/pagination/demo-pagination.component.html
@@ -55,3 +55,5 @@ <h1 class="mat-display-2" translate>SHOWCASE.DEMO.PAGINATION.TITLE</h1>
 		</div>
 	</example-viewer>
 </section>
+
+<stark-reference-block [links]="referenceList"></stark-reference-block>