diff --git a/showcase/src/app/demo-ui/components/index.ts b/showcase/src/app/demo-ui/components/index.ts index 0eb4bfe500..97efbdc564 100644 --- a/showcase/src/app/demo-ui/components/index.ts +++ b/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"; diff --git a/showcase/src/app/demo-ui/components/table-with-tooltip/index.ts b/showcase/src/app/demo-ui/components/table-with-tooltip/index.ts new file mode 100644 index 0000000000..460f02837c --- /dev/null +++ b/showcase/src/app/demo-ui/components/table-with-tooltip/index.ts @@ -0,0 +1 @@ +export * from "./table-with-tooltip.component"; diff --git a/showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.html b/showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.html new file mode 100644 index 0000000000..dd3ad4b001 --- /dev/null +++ b/showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.html @@ -0,0 +1,4 @@ + +

SHOWCASE.DEMO.TABLE.WITH_TOOLTIP

+ + diff --git a/showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.scss b/showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.scss new file mode 100644 index 0000000000..4cf6b531cb --- /dev/null +++ b/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; +} diff --git a/showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.ts b/showcase/src/app/demo-ui/components/table-with-tooltip/table-with-tooltip.component.ts new file mode 100644 index 0000000000..d0224b18de --- /dev/null +++ b/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: [] }; +} diff --git a/showcase/src/app/demo-ui/demo-ui.module.ts b/showcase/src/app/demo-ui/demo-ui.module.ts index 75217f9536..eab3510ebd 100644 --- a/showcase/src/app/demo-ui/demo-ui.module.ts +++ b/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, diff --git a/showcase/src/app/demo-ui/pages/table/demo-table-page.component.html b/showcase/src/app/demo-ui/pages/table/demo-table-page.component.html index 71fc1602c0..d0a3b58eb6 100644 --- a/showcase/src/app/demo-ui/pages/table/demo-table-page.component.html +++ b/showcase/src/app/demo-ui/pages/table/demo-table-page.component.html @@ -98,5 +98,14 @@

SHOWCASE.DEMO.SHARED.EXAMPLE_VIEWER_LIST

> + + + + diff --git a/showcase/src/assets/examples/table/with-tooltip/table.html b/showcase/src/assets/examples/table/with-tooltip/table.html new file mode 100644 index 0000000000..0127b64cc5 --- /dev/null +++ b/showcase/src/assets/examples/table/with-tooltip/table.html @@ -0,0 +1,4 @@ + +

Table with tooltip

+ + diff --git a/showcase/src/assets/examples/table/with-tooltip/table.scss b/showcase/src/assets/examples/table/with-tooltip/table.scss new file mode 100644 index 0000000000..02a3c0f33f --- /dev/null +++ b/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; +} diff --git a/showcase/src/assets/examples/table/with-tooltip/table.ts b/showcase/src/assets/examples/table/with-tooltip/table.ts new file mode 100644 index 0000000000..a6b170d05f --- /dev/null +++ b/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: [] }; +} diff --git a/showcase/src/assets/translations/en.json b/showcase/src/assets/translations/en.json index f79504ad46..77e3c494b8 100644 --- a/showcase/src/assets/translations/en.json +++ b/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": { diff --git a/showcase/src/assets/translations/fr.json b/showcase/src/assets/translations/fr.json index 4e384d6688..448cd9834f 100644 --- a/showcase/src/assets/translations/fr.json +++ b/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": { diff --git a/showcase/src/assets/translations/nl.json b/showcase/src/assets/translations/nl.json index 5bcee9df46..15d7ae78fc 100644 --- a/showcase/src/assets/translations/nl.json +++ b/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": {