feat(showcase): add demo table for tooltip

Closes NationalBankBelgium#1700

showcase/src/app/demo-ui/components/index.ts

@@ -9,3 +9,4 @@ export * from "./table-with-custom-cell-rendering";
 export * from "./table-with-fixed-actions";
 export * from "./table-with-footer";
 export * from "./table-with-collapsible-rows";
+export * from "./table-with-tooltip";

showcase/src/app/demo-ui/components/table-with-tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./table-with-tooltip.component";

showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.html

@@ -0,0 +1,4 @@
+<stark-table [data]="data" [columnProperties]="columns" [filter]="filter">
+	<header><h1 class="mb0" translate>SHOWCASE.DEMO.TABLE.WITH_TOOLTIP</h1></header>
+</stark-table>
+

showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.scss

@@ -0,0 +1,20 @@
+.tooltip-info {
+  border: 2px solid #ffa726;
+}
+.tooltip-high {
+  color: #FF0000 !important;
+  background-color: #cccccc;
+}
+
+.tooltip-low {
+  color: #336600 !important;
+  background-color: #cccccc;
+}
+
+.tooltip-even {
+  background-color: #888888;
+}
+
+.tooltip-odd {
+  background-color: #005ea0;
+}

showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.ts

@@ -0,0 +1,51 @@
+import {Component, ViewEncapsulation} from "@angular/core";
+import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+
+const DUMMY_DATA: object[] = [
+	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, info: { label: "first info", tooltip: "this is first info" }, description: "number one" },
+	{ id: 10, title: { label: "second title (value: 2)", value: 2 }, info: { label: "second info", tooltip: "this is second info" }, description: "second description" },
+	{ id: 126, title: { label: "third title (value: 3)", value: 3 }, info: { label: "third info", tooltip: "this is third info" }, description: "the third description" },
+	{ id: 2, title: { label: "fourth title (value: 4)", value: 4 }, info: { label: "fourth info", tooltip: "this is fourth info" }, description: "description number four" },
+	{ id: 23, title: { label: "fifth title (value: 5)", value: 5 }, info: { label: "fifth info", tooltip: "this is fifth info" }, description: "fifth description" },
+	{ id: 3, title: { label: "sixth title (value: 6)", value: 6 }, info: { label: "sixth info", tooltip: "this is sixth info" }, description: "the sixth description" },
+	{ id: 112, title: { label: "seventh title (value: 7)", value: 7 }, info: { label: "seventh info", tooltip: "this is seventh info" }, description: "seventh description" },
+	{ id: 232, title: { label: "eighth title (value: 8)", value: 8 }, info: { label: "eighth info", tooltip: "this is eighth info" }, description: "description number eight" },
+];
+
+@Component({
+	selector: "showcase-table-with-tooltip",
+	templateUrl: "./table-with-tooltip.component.html",
+	styleUrls: ["./table-with-tooltip.component.scss"],
+	/* tslint:disable-next-line:use-component-view-encapsulation */
+	encapsulation: ViewEncapsulation.None // Important
+})
+export class TableWithTooltipComponent {
+	public data: object[] = DUMMY_DATA;
+
+	public columns: StarkTableColumnProperties[] = [
+		{
+			name: "id",
+			label: "Id",
+			cellTooltip: "This is the id",
+			cellTooltipClassName: (id: number): string => id > 15 ? "tooltip-high" : "tooltip-low"
+		},
+		{
+			name: "title",
+			label: "SHOWCASE.DEMO.TABLE.LABELS.TITLE",
+			cellFormatter: (value: { label: string }): string => "~" + value.label,
+			cellTooltip: (title: { value: number }): string => "value is " + (title.value % 2 === 0 ? "even" : "odd"),
+			cellTooltipClassName: (title: { value: number }): string => title.value % 2 === 0 ? "tooltip-even" : "tooltip-odd",
+			cellTooltipPosition: "right"
+		},
+		{
+			name: "info",
+			label: "SHOWCASE.DEMO.TABLE.LABELS.EXTRA_INFO",
+			cellFormatter: (value: { label: string }): string => value.label,
+			cellTooltip: (info: { tooltip: string }): string => info.tooltip,
+			cellTooltipClassName: "tooltip-info"
+		},
+		{ name: "description", label: "SHOWCASE.DEMO.TABLE.LABELS.DESCRIPTION" }
+	];
+
+	public filter: StarkTableFilter = { globalFilterPresent: false, columns: [] };
+}

showcase/src/app/demo-ui/demo-ui.module.ts

@@ -79,6 +79,7 @@ import {
 	TableWithTranscludedActionBarComponent,
 	TableWithCollapsibleRowsComponent
 } from "./components";
+import {TableWithTooltipComponent} from "./components/table-with-tooltip/table-with-tooltip.component";
 
 @NgModule({
 	imports: [
@@ -153,6 +154,7 @@ import {
 		TableWithCustomCellRenderingComponent,
 		TableWithCustomStylingComponent,
 		TableWithFixedActionsComponent,
+		TableWithTooltipComponent,
 		DemoToastPageComponent,
 		DemoGenericSearchFormComponent,
 		DemoTransformInputDirectivePageComponent,

showcase/src/app/demo-ui/pages/table/demo-table-page.component.html

@@ -98,5 +98,14 @@ <h1 translate>SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST</h1>
 	>
 		<showcase-table-with-collapsible-rows></showcase-table-with-collapsible-rows>
 	</example-viewer>
+
+	<example-viewer
+			id="tooltip"
+			exampleTitle="SHOWCASE.DEMO.TABLE.WITH_TOOLTIP"
+			filesPath="table/with-tooltip/table"
+			[extensions]="['HTML', 'TS', 'SCSS']"
+	>
+		<showcase-table-with-tooltip></showcase-table-with-tooltip>
+	</example-viewer>
 </section>
 <stark-reference-block [links]="referenceList"></stark-reference-block>

showcase/src/assets/examples/table/with-tooltip/table.html

@@ -0,0 +1,4 @@
+<stark-table [data]="data" [columnProperties]="columns" [filter]="filter">
+	<header><h1 class="mb0">Table with tooltip</h1></header>
+</stark-table>
+

showcase/src/assets/examples/table/with-tooltip/table.scss

@@ -0,0 +1,18 @@
+.tooltip-info {
+  border: 2px solid #ffa726;
+}
+.tooltip-high {
+  color: #FF0000 !important; 
+}
+
+.tooltip-low {
+  color: #336600 !important;
+}
+
+.tooltip-even {
+  background-color: #d1e1ff;
+}
+
+.tooltip-odd {
+  background-color: #005ea0;
+}

showcase/src/assets/examples/table/with-tooltip/table.ts

@@ -0,0 +1,46 @@
+import { Component, ViewEncapsulation } from "@angular/core";
+import { StarkTableColumnProperties, StarkTableFilter } from "@nationalbankbelgium/stark-ui";
+
+const DUMMY_DATA: object[] = [
+	{ id: 1, title: { label: "first title (value: 1)", value: 1 }, info: { label: "first info", tooltip: "this is first info" }, description: "number one" },
+	/* ... */
+	{ id: 232, title: { label: "eighth title (value: 8)", value: 8 }, info: { label: "eighth info", tooltip: "this is eighth info" }, description: "description number eight" },
+];
+
+@Component({
+	selector: "showcase-table-with-tooltip",
+	templateUrl: "./table-with-tooltip.component.html",
+	styleUrls: ["./table-with-tooltip.component.scss"],
+	/* tslint:disable-next-line:use-component-view-encapsulation */
+	encapsulation: ViewEncapsulation.None // Important
+})
+export class TableWithTooltipComponent {
+	public data: object[] = DUMMY_DATA;
+
+	public columns: StarkTableColumnProperties[] = [
+		{
+			name: "id",
+			label: "Id",
+			cellTooltip: "This is the id",
+			cellTooltipClassName: (id: number): string => id > 15 ? "tooltip-high" : "tooltip-low"
+		},
+		{
+			name: "title",
+			label: "Title",
+			cellFormatter: (value: { label: string }): string => "~" + value.label,
+			cellTooltip: (title: { value: number }): string => "value is " + (title.value % 2 === 0) ? "even" : "odd",
+			cellTooltipClassName: (title: { value: number }): string => title.value % 2 === 0 ? "tooltip-even" : "tooltip-odd",
+			cellTooltipPosition: "right"
+		},
+		{
+			name: "info",
+			label: "Info",
+			cellFormatter: (value: { label: string }): string => value.label,
+			cellTooltip: (info: { tooltip: string }): string => info.tooltip,
+			cellTooltipClassName: "tooltip-info"
+		},
+		{ name: "description", label: "Description" }
+	];
+
+	public filter: StarkTableFilter = { globalFilterPresent: false, columns: [] };
+}

showcase/src/assets/translations/en.json

@@ -342,6 +342,7 @@
         "WITH_CUSTOM_CELL_RENDERING": "Table with custom cell rendering",
         "WITH_FIXED_ACTIONS": "Table with fixed row actions",
         "WITH_COLLAPSIBLE_ROWS": "Table with collapsible rows",
+        "WITH_TOOLTIP": "Table with tooltip",
         "TITLE": "Table"
       },
       "TOAST": {

showcase/src/assets/translations/fr.json

@@ -342,6 +342,7 @@
         "WITH_CUSTOM_CELL_RENDERING": "Table avec rendu de cellules personnalisé",
         "WITH_FIXED_ACTIONS": "Table avec actions de ligne fixes",
         "WITH_COLLAPSIBLE_ROWS": "Table avec des lignes réductibles",
+        "WITH_TOOLTIP": "Table avec info-bulle",
         "TITLE": "Table"
       },
       "TOAST": {

showcase/src/assets/translations/nl.json

@@ -342,6 +342,7 @@
         "WITH_CUSTOM_CELL_RENDERING": "Table met aangepaste kolommen",
         "WITH_FIXED_ACTIONS": "Tabel met vaste rijacties",
         "WITH_COLLAPSIBLE_ROWS": "Tabel met uitklapbare rijen",
+        "WITH_TOOLTIP": "Tabel met tooltip",
         "TITLE": "Table"
       },
       "TOAST": {