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
index 5ec6097c4b..5b8daf58bd 100644
--- 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 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
+
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
index 53100cc3eb..ae0384f6d7 100644
--- 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
index e8b59a8fdd..185a23787d 100644
--- a/showcase/src/app/demo/breadcrumb/demo-breadcrumb.component.html
+++ b/showcase/src/app/demo/breadcrumb/demo-breadcrumb.component.html
@@ -12,3 +12,4 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
+
diff --git a/showcase/src/app/demo/breadcrumb/demo-breadcrumb.component.ts b/showcase/src/app/demo/breadcrumb/demo-breadcrumb.component.ts
index e31da639fe..5ef15b2293 100644
--- 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
index 373531388d..947b782175 100644
--- a/showcase/src/app/demo/collapsible/demo-collapsible.component.html
+++ b/showcase/src/app/demo/collapsible/demo-collapsible.component.html
@@ -49,3 +49,4 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
{{ collapsed[3] ? "SHOWCASE.DEMO.COLLAPSIBLE.OPEN" : "SHOWCASE.DEMO.COLLAPSIBLE.CLOSED" }}
+
diff --git a/showcase/src/app/demo/collapsible/demo-collapsible.component.ts b/showcase/src/app/demo/collapsible/demo-collapsible.component.ts
index 6652744281..3fbdd87538 100644
--- 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
index 0fa7cd7eb0..5a3508ec78 100644
--- 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 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
label="SHOWCASE.DEMO.DATE_PICKER.PLACEHOLDER" [minDate]="minDate" [maxDate]="maxDate" (dateChanged)="onDateChanged($event)">
+
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
index 0b70c0e57b..8f52b23b5e 100644
--- 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
index 2c830d141b..6690cbc746 100644
--- 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 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
isDisabled
+
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
index 7c0dbbf2bc..4699900499 100644
--- 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
index 4b464a4f3f..2eacda3a6b 100644
--- a/showcase/src/app/demo/dropdown/demo-dropdown.component.html
+++ b/showcase/src/app/demo/dropdown/demo-dropdown.component.html
@@ -49,3 +49,4 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
translate }}: {{ selectedServiceWhiteDropdown }}
+
diff --git a/showcase/src/app/demo/dropdown/demo-dropdown.component.ts b/showcase/src/app/demo/dropdown/demo-dropdown.component.ts
index d08e9870c2..c3d22aaf8b 100644
--- 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
index e482c71469..f31e1a88ab 100644
--- a/showcase/src/app/demo/footer/demo-footer.component.html
+++ b/showcase/src/app/demo/footer/demo-footer.component.html
@@ -1,4 +1,4 @@
-
+
SHOWCASE.DEMO.FOOTER.TITLE
SHOWCASE.DEMO.FOOTER.INTRO
@@ -9,4 +9,5 @@ SHOWCASE.DEMO.FOOTER.TITLE
-
+
+
diff --git a/showcase/src/app/demo/footer/demo-footer.component.ts b/showcase/src/app/demo/footer/demo-footer.component.ts
index e195c50cc6..84b5479db0 100644
--- a/showcase/src/app/demo/footer/demo-footer.component.ts
+++ b/showcase/src/app/demo/footer/demo-footer.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-footer",
@@ -7,8 +8,13 @@ import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium
})
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 = `Some link
`;
+
+ 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
index 92d538236a..5908cbadf4 100644
--- 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 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
+
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
index d6c89fc556..2390068393 100644
--- 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
index 8ad16def5a..f6df90128d 100644
--- 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 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
+
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
index daea37a060..4ccc7ed71e 100644
--- 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
index 99ee0aed6f..82521e7cf4 100644
--- a/showcase/src/app/demo/logout/demo-logout.component.html
+++ b/showcase/src/app/demo/logout/demo-logout.component.html
@@ -9,3 +9,4 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
+
diff --git a/showcase/src/app/demo/logout/demo-logout.component.ts b/showcase/src/app/demo/logout/demo-logout.component.ts
index 1e3832c0e3..fdfa9558fb 100644
--- 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
index d4c1e05a5c..78986f1afb 100644
--- a/showcase/src/app/demo/pagination/demo-pagination.component.html
+++ b/showcase/src/app/demo/pagination/demo-pagination.component.html
@@ -55,3 +55,5 @@ SHOWCASE.DEMO.PAGINATION.TITLE
+
+
diff --git a/showcase/src/app/demo/pagination/demo-pagination.component.ts b/showcase/src/app/demo/pagination/demo-pagination.component.ts
index 8f159778b2..c8ab1111aa 100644
--- a/showcase/src/app/demo/pagination/demo-pagination.component.ts
+++ b/showcase/src/app/demo/pagination/demo-pagination.component.ts
@@ -1,6 +1,7 @@
import { Component, Inject, OnInit } from "@angular/core";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import { StarkPaginateEvent, StarkPaginationConfig } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
@Component({
selector: "demo-pagination",
@@ -16,9 +17,13 @@ export class DemoPaginationComponent implements OnInit {
public paginateEventExtended: string;
public paginateEventAdvanced: string;
public paginateEventCompact: string;
+ public referenceList: ReferenceLink[];
public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+ /**
+ * Component lifecycle hook
+ */
public ngOnInit(): void {
this.paginationSimpleConfig = {
totalItems: 20,
@@ -51,6 +56,13 @@ export class DemoPaginationComponent implements OnInit {
itemsPerPage: 4,
itemsPerPageOptions: [2, 4, 6, 8, 10, 20]
};
+
+ this.referenceList = [
+ {
+ label: "Stark Pagination component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkPaginationComponent.html"
+ }
+ ];
}
public onPaginationChange(paginateEvent: StarkPaginateEvent, config: "simple" | "extended" | "advanced" | "compact"): void {
diff --git a/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html
index 14fa4b6756..35fb6633d1 100644
--- a/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html
+++ b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.html
@@ -44,3 +44,5 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
+
+
diff --git a/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts
index de247d9926..aeb5dad03f 100644
--- a/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts
+++ b/showcase/src/app/demo/pretty-print/demo-pretty-print.component.ts
@@ -1,6 +1,7 @@
import { Component, OnInit, Inject } from "@angular/core";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import { StarkPrettyPrintFormat } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
export interface FileType {
format: StarkPrettyPrintFormat;
@@ -21,9 +22,13 @@ export class DemoPrettyPrintComponent implements OnInit {
public selectedDataFormat: string;
public highlightingEnabled: boolean;
public unformattedData: string;
+ public referenceList: ReferenceLink[];
public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+ /**
+ * Component lifecycle hook
+ */
public ngOnInit(): void {
this.addCss();
this.addScss();
@@ -38,6 +43,13 @@ export class DemoPrettyPrintComponent implements OnInit {
this.selectedDataFormat = "";
this.highlightingEnabled = false;
this.dataFormats = this.fileTypes.map((fileType: FileType) => fileType.format);
+
+ this.referenceList = [
+ {
+ label: "Stark Pretty Print component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkPrettyPrintComponent.html"
+ }
+ ];
}
public dataFormatDropdownOnChange(selectedValue: string): void {
diff --git a/showcase/src/app/demo/sidebar/demo-sidebar.component.html b/showcase/src/app/demo/sidebar/demo-sidebar.component.html
index 2d9cc78f16..9faf252d58 100644
--- a/showcase/src/app/demo/sidebar/demo-sidebar.component.html
+++ b/showcase/src/app/demo/sidebar/demo-sidebar.component.html
@@ -7,3 +7,5 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
+
+
diff --git a/showcase/src/app/demo/sidebar/demo-sidebar.component.ts b/showcase/src/app/demo/sidebar/demo-sidebar.component.ts
index 136747851e..e91a7eb1ac 100644
--- a/showcase/src/app/demo/sidebar/demo-sidebar.component.ts
+++ b/showcase/src/app/demo/sidebar/demo-sidebar.component.ts
@@ -1,12 +1,15 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
import { STARK_APP_SIDEBAR_SERVICE, StarkAppSidebarService } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
@Component({
selector: "demo-sidebar",
styleUrls: ["./demo-sidebar.component.scss"],
templateUrl: "./demo-sidebar.component.html"
})
-export class DemoSidebarComponent {
+export class DemoSidebarComponent implements OnInit {
+ public referenceList: ReferenceLink[];
+
public constructor(@Inject(STARK_APP_SIDEBAR_SERVICE) public sidebarService: StarkAppSidebarService) {}
public openMenu(): void {
@@ -20,4 +23,16 @@ export class DemoSidebarComponent {
public openRightSidebar(): void {
this.sidebarService.openRight();
}
+
+ /**
+ * Component lifecycle hook
+ */
+ public ngOnInit(): void {
+ this.referenceList = [
+ {
+ label: "Stark Sidebar component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkAppSidebarComponent.html"
+ }
+ ];
+ }
}
diff --git a/showcase/src/app/demo/slider/demo-slider.component.html b/showcase/src/app/demo/slider/demo-slider.component.html
index f06d4e22be..8d30b759ad 100644
--- a/showcase/src/app/demo/slider/demo-slider.component.html
+++ b/showcase/src/app/demo/slider/demo-slider.component.html
@@ -78,3 +78,4 @@ SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST
+
diff --git a/showcase/src/app/demo/slider/demo-slider.component.ts b/showcase/src/app/demo/slider/demo-slider.component.ts
index 5c8391c1f2..093f193dd2 100644
--- a/showcase/src/app/demo/slider/demo-slider.component.ts
+++ b/showcase/src/app/demo/slider/demo-slider.component.ts
@@ -1,6 +1,7 @@
import { Component, Inject, OnInit } from "@angular/core";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import { StarkSliderConfig } from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
export enum SLIDER_HANDLES {
lower = 0,
@@ -13,6 +14,8 @@ export enum SLIDER_HANDLES {
styleUrls: ["./demo-slider.component.scss"]
})
export class DemoSliderComponent implements OnInit {
+ public referenceList: ReferenceLink[];
+
public SLIDER_HANDLES: typeof SLIDER_HANDLES = SLIDER_HANDLES;
public constructor(@Inject(STARK_LOGGING_SERVICE) public loggingService: StarkLoggingService) {}
@@ -105,12 +108,22 @@ export class DemoSliderComponent implements OnInit {
}
};
+ /**
+ * Component lifecycle hook
+ */
public ngOnInit(): void {
this.loggingService.debug("Hello from the `Slider` component");
this.isSimpleHorizontalSliderEnabled = true;
this.isHorizontalRangeSliderEnabled = true;
this.isSimpleVerticalSliderEnabled = true;
this.isVerticalRangeSliderEnabled = true;
+
+ this.referenceList = [
+ {
+ label: "Stark Slider component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkSliderComponent.html"
+ }
+ ];
}
/***
diff --git a/showcase/src/app/demo/table/demo-table.component.html b/showcase/src/app/demo/table/demo-table.component.html
index 31df83211d..f28c08d762 100644
--- a/showcase/src/app/demo/table/demo-table.component.html
+++ b/showcase/src/app/demo/table/demo-table.component.html
@@ -55,3 +55,5 @@ SHOWCASE.DEMO.TABLE.WITH_TRANSCLUDED_ACTION_BAR
+
+
diff --git a/showcase/src/app/demo/table/demo-table.component.ts b/showcase/src/app/demo/table/demo-table.component.ts
index 54a9fba492..3a630b8b65 100644
--- a/showcase/src/app/demo/table/demo-table.component.ts
+++ b/showcase/src/app/demo/table/demo-table.component.ts
@@ -7,6 +7,7 @@ import {
StarkAction
} from "@nationalbankbelgium/stark-ui";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { ReferenceLink } from "../../shared/reference-block";
@Component({
selector: "demo-table",
@@ -15,6 +16,8 @@ import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium
encapsulation: ViewEncapsulation.None //Here to add a shadow inside the table, we will fix that when we take care of #509
})
export class DemoTableComponent implements OnInit {
+ public referenceList: ReferenceLink[];
+
public getTitle = (data: any): string => {
return "~" + data.title.label;
};
@@ -42,6 +45,9 @@ export class DemoTableComponent implements OnInit {
public constructor(@Inject(STARK_LOGGING_SERVICE) private logger: StarkLoggingService) {}
+ /**
+ * Component lifecycle hook
+ */
public ngOnInit(): void {
this.dummyData = [
{ id: 1, title: { label: "first title (value: 1)", value: 1 }, description: "number one" },
@@ -217,5 +223,20 @@ export class DemoTableComponent implements OnInit {
}
]
};
+
+ this.referenceList = [
+ {
+ label: "Stark Table component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkTableComponent.html"
+ },
+ {
+ label: "Stark Table - Column component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkTableColumnComponent.html"
+ },
+ {
+ label: "Stark Table - Multisort Dialog component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkTableMultisortDialogComponent.html"
+ }
+ ];
}
}
diff --git a/showcase/src/app/demo/toast/demo-toast-notification.component.html b/showcase/src/app/demo/toast/demo-toast-notification.component.html
index fab4051bcf..2d31f81fac 100644
--- a/showcase/src/app/demo/toast/demo-toast-notification.component.html
+++ b/showcase/src/app/demo/toast/demo-toast-notification.component.html
@@ -10,3 +10,5 @@
{{ messageText | translate }}
+
+
diff --git a/showcase/src/app/demo/toast/demo-toast-notification.component.ts b/showcase/src/app/demo/toast/demo-toast-notification.component.ts
index 3b6af0d8ce..e9e575a6c5 100644
--- a/showcase/src/app/demo/toast/demo-toast-notification.component.ts
+++ b/showcase/src/app/demo/toast/demo-toast-notification.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
import {
STARK_TOAST_NOTIFICATION_SERVICE,
@@ -7,6 +7,7 @@ import {
StarkToastMessage,
StarkMessageType
} from "@nationalbankbelgium/stark-ui";
+import { ReferenceLink } from "../../shared/reference-block";
@Component({
selector: "demo-toast-notification",
@@ -16,7 +17,9 @@ import {
/**
* Component to demo the toast notifications
*/
-export class DemoToastComponent {
+export class DemoToastComponent implements OnInit {
+ public referenceList: ReferenceLink[];
+
/**
* Message, or ID of message displayed in the message in the message box (translations applies).
*/
@@ -116,4 +119,16 @@ export class DemoToastComponent {
public hideToast(): void {
this.toastService.hide();
}
+
+ /**
+ * Component lifecycle hook
+ */
+ public ngOnInit(): void {
+ this.referenceList = [
+ {
+ label: "Stark Toast Notification component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkToastNotificationComponent.html"
+ }
+ ];
+ }
}
diff --git a/showcase/src/app/shared/index.ts b/showcase/src/app/shared/index.ts
index 86acda6578..dbaeeb77f0 100644
--- a/showcase/src/app/shared/index.ts
+++ b/showcase/src/app/shared/index.ts
@@ -1,2 +1,3 @@
export * from "./example-viewer";
+export * from "./reference-block";
export * from "./shared.module";
diff --git a/showcase/src/app/shared/reference-block/_reference-block.component.scss b/showcase/src/app/shared/reference-block/_reference-block.component.scss
new file mode 100644
index 0000000000..bb80e09ff9
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/_reference-block.component.scss
@@ -0,0 +1,33 @@
+/* ============================================================================== */
+/* S t a r k R e f e r e n c e B l o c k */
+/* ============================================================================== */
+/* stark-ui: src/modules/reference-block/components/reference-block.component.scss */
+.stark-reference-block div {
+ background-color: #fff;
+ border: solid 1px color(mat-color($grey-palette, 400));
+ padding: 10px 10px 10px 50px;
+ border-radius: 5px;
+ box-shadow: color(mat-color($grey-palette, 300));
+ position: relative;
+
+ & mat-icon {
+ position: absolute;
+ display: inline-block;
+ left: 15px;
+ top: 14px;
+ color: color(mat-color($grey-palette, 700));
+ }
+ & ul {
+ padding: 0;
+ }
+
+ & a {
+ text-decoration: none;
+ }
+ & a:hover {
+ background-color: $offwhite;
+ color: $md-primary;
+ }
+}
+
+/* end src/modules/reference-block/components/reference-block.component.scss */
diff --git a/showcase/src/app/shared/reference-block/index.ts b/showcase/src/app/shared/reference-block/index.ts
new file mode 100644
index 0000000000..dc9446e8f1
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/index.ts
@@ -0,0 +1,2 @@
+export * from "./reference-block.component";
+export * from "./reference-link.intf";
diff --git a/showcase/src/app/shared/reference-block/reference-block.component.html b/showcase/src/app/shared/reference-block/reference-block.component.html
new file mode 100644
index 0000000000..4206c08ebd
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/reference-block.component.html
@@ -0,0 +1,10 @@
+
diff --git a/showcase/src/app/shared/reference-block/reference-block.component.spec.ts b/showcase/src/app/shared/reference-block/reference-block.component.spec.ts
new file mode 100644
index 0000000000..59969d0ba1
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/reference-block.component.spec.ts
@@ -0,0 +1,56 @@
+import { DebugElement, NO_ERRORS_SCHEMA } from "@angular/core";
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
+import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
+
+import { ReferenceBlockComponent } from "./reference-block.component";
+import { ReferenceLink } from "./reference-link.intf";
+import { By } from "@angular/platform-browser";
+
+describe("ReferenceBlockComponent", () => {
+ let component: ReferenceBlockComponent;
+ const referenceList: ReferenceLink[] = [
+ {
+ label: "Stark Table component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkTableComponent.html"
+ },
+ {
+ label: "Stark Table - Column component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkTableColumnComponent.html"
+ },
+ {
+ label: "Stark Table - Multisort Dialog component",
+ url: "https://stark.nbb.be/api-docs/stark-ui/latest/components/StarkTableMultisortDialogComponent.html"
+ }
+ ];
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ return TestBed.configureTestingModule({
+ declarations: [ReferenceBlockComponent],
+ imports: [],
+ providers: [{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }],
+ schemas: [NO_ERRORS_SCHEMA] // tells the Angular compiler to ignore unrecognized elements and attributes: mat-icon
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ReferenceBlockComponent);
+ component = fixture.componentInstance;
+ component.links = referenceList;
+ fixture.detectChanges(); // trigger initial data binding
+ });
+
+ it("should render the appropriate content", () => {
+ fixture.detectChanges();
+
+ const pathLinks: DebugElement[] = fixture.debugElement.queryAll(By.css("a"));
+ expect(pathLinks.length).toBe(3);
+
+ for (let i: number = 0; i < pathLinks.length; i++) {
+ console.log(fixture);
+ expect(pathLinks[i].nativeElement.innerHTML).toBe(referenceList[i].label);
+ expect(pathLinks[i].nativeElement.getAttribute("href")).toBe(referenceList[i].url);
+ }
+ });
+});
diff --git a/showcase/src/app/shared/reference-block/reference-block.component.ts b/showcase/src/app/shared/reference-block/reference-block.component.ts
new file mode 100644
index 0000000000..077aa39b2e
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/reference-block.component.ts
@@ -0,0 +1,36 @@
+import { ReferenceLink } from "./reference-link.intf";
+import { Component, HostBinding, Inject, Input, OnInit } from "@angular/core";
+import { StarkLoggingService, STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
+
+const componentName: string = "stark-reference-block";
+
+/**
+ * Component to display a list of URLS to documentation
+ */
+@Component({
+ selector: "stark-reference-block",
+ templateUrl: "./reference-block.component.html"
+})
+export class ReferenceBlockComponent implements OnInit {
+ @HostBinding("class")
+ public class: string = componentName;
+
+ @Input()
+ public links: ReferenceLink[];
+
+ public constructor(@Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService) {}
+
+ /**
+ * Component lifecycle hook
+ */
+ public ngOnInit(): void {
+ this.logger.debug(componentName + ": controller initialized");
+ }
+
+ /**
+ * @ignore
+ */
+ public trackItemFn(_index: number, item: any): string {
+ return item;
+ }
+}
diff --git a/showcase/src/app/shared/reference-block/reference-link.intf.ts b/showcase/src/app/shared/reference-block/reference-link.intf.ts
new file mode 100644
index 0000000000..b5e34dcfa7
--- /dev/null
+++ b/showcase/src/app/shared/reference-block/reference-link.intf.ts
@@ -0,0 +1,4 @@
+export interface ReferenceLink {
+ url: string;
+ label: string;
+}
diff --git a/showcase/src/app/shared/shared.module.ts b/showcase/src/app/shared/shared.module.ts
index d7fe68b5f0..4f6f09f4b6 100644
--- a/showcase/src/app/shared/shared.module.ts
+++ b/showcase/src/app/shared/shared.module.ts
@@ -1,5 +1,6 @@
import { ExampleViewerComponent } from "./example-viewer/example-viewer.component";
import { FileService } from "./example-viewer/file.service";
+import { ReferenceBlockComponent } from "./reference-block/reference-block.component";
import { MatButtonModule } from "@angular/material/button";
import { MatCardModule } from "@angular/material/card";
import { MatIconModule } from "@angular/material/icon";
@@ -26,8 +27,8 @@ import { FlexLayoutModule } from "@angular/flex-layout";
TranslateModule
],
providers: [FileService],
- declarations: [ExampleViewerComponent],
- entryComponents: [ExampleViewerComponent],
- exports: [ExampleViewerComponent, FlexLayoutModule]
+ declarations: [ExampleViewerComponent, ReferenceBlockComponent],
+ entryComponents: [ExampleViewerComponent, ReferenceBlockComponent],
+ exports: [ExampleViewerComponent, ReferenceBlockComponent, FlexLayoutModule]
})
export class SharedModule {}
diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss
index 03fffd876b..5d799613a2 100644
--- a/showcase/src/styles/styles.scss
+++ b/showcase/src/styles/styles.scss
@@ -1,7 +1,8 @@
@import "theme";
@import "stark-styles.scss";
-@import "../app/news/news-component/news.component";
-
@import "~basscss/css/basscss.css";
@import "~prismjs/themes/prism-okaidia.css";
+
+@import "../app/news/news-component/news.component";
+@import "../app/shared/reference-block/reference-block.component";