feat(stark-ui): implement the Stark-Pretty-Print component

ISSUES CLOSED: #494, #496
NationalBankBelgium · Jul 13, 2018 · 22f84b6 · 22f84b6
1 parent 90c53fe
commit 22f84b6
Show file tree

Hide file tree

Showing 18 changed files with 1,129 additions and 72 deletions.
diff --git a/packages/stark-ui/package.json b/packages/stark-ui/package.json
@@ -28,7 +28,10 @@
   "dependencies": {
     "@mdi/angular-material": "2.4.85",
     "@types/nouislider": "9.0.4",
-    "nouislider": "11.1.0"
+    "@types/prismjs": "1.9.0",
+    "nouislider": "11.1.0",
+    "pretty-data": "0.40.0",
+    "prismjs": "1.15.0"
   },
   "devDependencies": {
     "@nationalbankbelgium/stark-testing": "../stark-testing"

diff --git a/packages/stark-ui/src/modules.ts b/packages/stark-ui/src/modules.ts
@@ -1,4 +1,5 @@
 export * from "./modules/action-bar";
 export * from "./modules/app-logo";
+export * from "./modules/pretty-print";
 export * from "./modules/slider";
 export * from "./modules/svg-view-box";
diff --git a/packages/stark-ui/src/modules/pretty-print.ts b/packages/stark-ui/src/modules/pretty-print.ts
@@ -0,0 +1,2 @@
+export * from "./pretty-print/pretty-print.module";
+export * from "./pretty-print/components";
diff --git a/packages/stark-ui/src/modules/pretty-print/components.ts b/packages/stark-ui/src/modules/pretty-print/components.ts
@@ -0,0 +1 @@
+export * from "./components/pretty-print.component";
diff --git a/packages/stark-ui/src/modules/pretty-print/components/_pretty-print.component.scss b/packages/stark-ui/src/modules/pretty-print/components/_pretty-print.component.scss
@@ -0,0 +1,14 @@
+/* ============================================================================== */
+/*  S t a r k   P r e t t y   P r i n t                                           */
+/* ============================================================================== */
+/* stark: src/modules/pretty-print/components/_pretty-print-theme.scss */
+
+.stark-pretty-print {
+  & pre,
+  & pre[class*="language-"] > code {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}
+
+/* end stark: src/modules/pretty-print/components/_pretty-print-theme.scss */
diff --git a/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.html b/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.html
@@ -0,0 +1,8 @@
+<div>
+	<div *ngIf="highlightingEnabled">
+		<div [innerHTML]="prettyString"></div>
+	</div>
+	<div *ngIf="!highlightingEnabled">
+		<pre>{{ prettyString }}</pre>
+	</div>
+</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./pretty-print/pretty-print.module";
		export * from "./pretty-print/components";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from "./components/pretty-print.component";