hljs component now works with multiline stuff

+ typography page done...

src/app/core/components/hljs/hljs.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnInit } from '@angular/core';
+import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
 import * as hljs from 'highlight.js';
 
 @Component({
@@ -10,7 +10,7 @@ export class FuseHljsComponent implements OnInit
 {
     hljs: any;
 
-    @Input('source') source: any;
+    @ContentChild('source') source: ElementRef;
     @Input('lang') lang: string;
 
     constructor(
@@ -22,12 +22,37 @@ export class FuseHljsComponent implements OnInit
 
     ngOnInit()
     {
-        if ( !this.source && this.lang )
+        const originalSource = this.source.nativeElement.value;
+
+        if ( !originalSource || !this.lang )
         {
             return;
         }
 
+        // Split the source into lines
+        const sourceLines = originalSource.split('\n');
+
+        // Find the first non-whitespace char index in
+        // the first line of the source code
+        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
+
+        // Generate the trimmed source
+        let source = '';
+
+        // Iterate through all the lines and trim the
+        // beginning white space depending on the index
+        sourceLines.forEach((line, index) => {
+
+            source = source + line.substr(indexOfFirstChar, line.length);
+
+            if ( index !== sourceLines.length - 1 )
+            {
+                source = source + '\n';
+            }
+        });
+
         this.elementRef.nativeElement.innerHTML =
-            `<pre><code class="highlight">` + this.hljs.highlight(this.lang, this.source).value + `</code></pre>`;
+            `<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
     }
 }
+

src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html

@@ -0,0 +1,203 @@
+<div id="typography-blockquotes-lists" class="p-24">
+
+    <div class="mat-title">Blockquotes</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <blockquote>
+                    <p>
+                        You can do anything, but not everything.
+                    </p>
+                </blockquote>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <blockquote>
+                        <p>
+                            You can do anything, but not everything.
+                        </p>
+                    </blockquote>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <blockquote>
+                    <p>
+                        You can do anything, but not everything.
+                    </p>
+                    <footer>
+                        David Allen
+                    </footer>
+                </blockquote>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <blockquote>
+                        <p>
+                            You can do anything, but not everything.
+                        </p>
+                        <footer>
+                            David Allen
+                        </footer>
+                    </blockquote>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <blockquote class="reverse">
+                    <p>
+                        You can do anything, but not everything.
+                    </p>
+                    <footer>
+                        David Allen
+                    </footer>
+                </blockquote>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <blockquote class="reverse">
+                        <p>
+                            You can do anything, but not everything.
+                        </p>
+                        <footer>
+                            David Allen
+                        </footer>
+                    </blockquote>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Lists</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <ol>
+                    <li>Ordered list item</li>
+                    <li>
+                        Ordered list item
+                        <ol>
+                            <li>Ordered list item</li>
+                            <li>Ordered list item</li>
+                        </ol>
+                    </li>
+                    <li>Ordered list item</li>
+                    <li>Ordered list item</li>
+                </ol>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <ol>
+                        <li>Ordered list item</li>
+                        <li>
+                            Ordered list item
+                            <ol>
+                                <li>Ordered list item</li>
+                                <li>Ordered list item</li>
+                            </ol>
+                        </li>
+                        <li>Ordered list item</li>
+                        <li>Ordered list item</li>
+                    </ol>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <ul>
+                    <li>Unordered list item</li>
+                    <li>
+                        Unordered list item
+                        <ul>
+                            <li>Unordered list item</li>
+                            <li>Unordered list item</li>
+                        </ul>
+                    </li>
+                    <li>Unordered list item</li>
+                    <li>Unordered list item</li>
+                </ul>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <ul>
+                        <li>Unordered list item</li>
+                        <li>
+                            Unordered list item
+                            <ul>
+                                <li>Unordered list item</li>
+                                <li>Unordered list item</li>
+                            </ul>
+                        </li>
+                        <li>Unordered list item</li>
+                        <li>Unordered list item</li>
+                    </ul>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Definition Lists</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <dl>
+                    <dt>Definition term</dt>
+                    <dd>This is the definition description</dd>
+
+                    <dt>Another definition term</dt>
+                    <dd>This is also another definition description</dd>
+                </dl>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <dl>
+                        <dt>Definition term</dt>
+                        <dd>This is the definition description</dd>
+
+                        <dt>Another definition term</dt>
+                        <dd>This is also another definition description</dd>
+                    </dl>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+</div>

src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss

@@ -0,0 +1,31 @@
+:host {
+
+    #typography-blockquotes-lists {
+
+        .source-code {
+            position: relative;
+            background: #F3F4F6;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            code {
+                background: none !important;
+            }
+        }
+
+        .preview {
+            font-size: 16px;
+            padding: 16px;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .mat-caption {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}

src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-typography-blockquotes-lists',
+    templateUrl: './blockquotes-lists.component.html',
+    styleUrls  : ['./blockquotes-lists.component.scss']
+})
+export class TypographyBlockquotesListsComponent
+{
+
+    constructor()
+    {
+
+    }
+}

src/app/main/content/ui/typography/tabs/headings/headings.component.html

@@ -0,0 +1,292 @@
+<div id="typography-headings" class="p-24">
+
+    <div class="mat-title">Material design typography classes</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">112px</div>
+                <span class="mat-display-4">Display 4</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-display-4">Display 4</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">56px</div>
+                <span class="mat-display-3">Display 3</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-display-3">Display 3</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">45px</div>
+                <span class="mat-display-2">Display 2</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-display-2">Display 2</span>
+                </textarea>
+            </fuse-hljs>
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">34px</div>
+                <span class="mat-display-1">Display 1</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-display-1">Display 1</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">24px</div>
+                <span class="mat-headline">Headline</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-headline">Headline</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">20px</div>
+                <span class="mat-title">Title</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-title">Title</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">16px</div>
+                <span class="mat-subheading-2">Subheading 2</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-subheading-2">Subheading 2</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">15px</div>
+                <span class="mat-subheading-1">Subheading 1</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-subheading-1">Subheading 1</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">14px</div>
+                <span class="mat-body-1">Body 1</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-body-1">Body 1</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">14px</div>
+                <span class="mat-body-2">Body 2</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-body-2">Body 2</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">12px</div>
+                <span class="mat-caption">Caption</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mat-caption">Caption</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Standard Headings</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">24px</div>
+                <span class="h1">Heading 1</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <h1>Heading 1</h1>
+                    <span class="h1">Heading 1</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">20px</div>
+                <span class="h2">Heading 2</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <h2>Heading 2</h2>
+                    <span class="h2">Heading 2</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">16px</div>
+                <span class="h3">Heading 3</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <h3>Heading 3</h3>
+                    <span class="h3">Heading 3</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">15px</div>
+                <span class="h4">Heading 4</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <h4>Heading 4</h4>
+                    <span class="h4">Heading 4</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">13px</div>
+                <span class="h5">Heading 5</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <h5>Heading 5</h5>
+                    <span class="h5">Heading 5</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption secondary-text">12px</div>
+                <span class="h6">Heading 6</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <h6>Heading 6</h6>
+                    <span class="h6">Heading 6</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+</div>

src/app/main/content/ui/typography/tabs/headings/headings.component.scss

@@ -0,0 +1,31 @@
+:host {
+
+    #typography-headings {
+
+        .source-code {
+            position: relative;
+            background: #F3F4F6;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            code {
+                background: none !important;
+            }
+        }
+
+        .preview {
+            font-size: 16px;
+            padding: 16px;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .mat-caption {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}

src/app/main/content/ui/typography/tabs/headings/headings.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-typography-headings',
+    templateUrl: './headings.component.html',
+    styleUrls  : ['./headings.component.scss']
+})
+export class TypographyHeadingsComponent
+{
+
+    constructor()
+    {
+
+    }
+}

src/app/main/content/ui/typography/tabs/helpers/helpers.component.html

@@ -0,0 +1,249 @@
+<div id="typography-helpers" class="p-24">
+
+    <div class="mat-title">Font Weight</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="md-caption mb-16">From 100 to 900</div>
+                <span class="font-weight-100">font-weight: 100</span>
+                <span>...</span>
+                <span class="font-weight-900">font-weight: 900</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="font-weight-100">100 font weight</span>
+                    ...
+                    <span class="font-weight-900">900 font weight</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Font Size</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="md-caption mb-16">Multiplies of 2, max: 120</div>
+                <span class="font-size-20">font-size: 20</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="font-size-20">font-size: 20</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Line Height</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="md-caption mb-16">Multiplies of 2, max: 120</div>
+                <span>line-height: 2</span>
+                <span>...</span>
+                <span>line-height: 120</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="line-height-2">2px line height</span>
+                    ...
+                    <span class="line-height-120">120px line height</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Other helpers</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="text-left">Left aligned text</div>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="text-left">Left aligned text</div>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="text-center">Center aligned text</div>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="text-center">Center aligned text</div>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="text-right">Right aligned text</div>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="text-right">Right aligned text</div>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <p>
+                    <span class="text-boxed">Boxed text</span>
+                </p>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <p>
+                        <span class="text-boxed">Boxed text</span>
+                    </p>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview md-grey-700-bg" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <p>
+                    <span class="text-boxed-light">Boxed text light</span>
+                </p>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <p>
+                        <span class="text-boxed-light">Boxed text light</span>
+                    </p>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <p>
+                    <span class="text-strike">Strike-through text</span>
+                </p>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <p>
+                        <span class="text-strike">Strike-through text</span>
+                    </p>
+                </textarea>
+            </fuse-hljs>
+            
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+            
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="text-italic">Italic text</div>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="text-italic">Italic text</div>
+                </textarea>
+            </fuse-hljs>
+            
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+            
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="text-semibold">Semi-bold text</div>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="text-semibold">Semi-bold text</div>
+                </textarea>
+            </fuse-hljs>
+            
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+            
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="text-bold">Bold text</div>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <div class="text-bold">Bold text</div>
+                </textarea>
+            </fuse-hljs>
+            
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+            
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span class="text-truncate">This is a truncated text. It will be truncated if it's too long. Vivamus
+                    convallis dui porta massa.
+                </span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="text-truncate">
+                        This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta massa.
+                    </span>
+                </textarea>
+            </fuse-hljs>
+            
+        </div>
+
+    </div>
+
+</div>

src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss

@@ -0,0 +1,31 @@
+:host {
+
+    #typography-helpers {
+
+        .source-code {
+            position: relative;
+            background: #F3F4F6;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            code {
+                background: none !important;
+            }
+        }
+
+        .preview {
+            font-size: 16px;
+            padding: 16px;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .mat-caption {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}

src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-typography-helpers',
+    templateUrl: './helpers.component.html',
+    styleUrls  : ['./helpers.component.scss']
+})
+export class TypographyHelpersComponent
+{
+
+    constructor()
+    {
+
+    }
+}

src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html

@@ -0,0 +1,232 @@
+<div id="typography-inline-text-elements" class="p-24">
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <abbr title="Cascaded Style Sheet">CSS</abbr>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>This is a <mark>marked</mark> text.</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    This is a <mark>marked</mark> text.
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>
+                    <del>This is a deleted text.</del>
+                </span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <del>This is a deleted text.</del>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span><s>This is a strike-through text.</s></span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <s>This is a strike-through text.</s>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span><u>This is an underlined text.</u></span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <u>This is an underlined text.</u>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>
+                    <small>This is a small text.</small>
+                </span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <small>This is a small text.</small>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span><strong>This is a strong text.</strong></span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <strong>This is a strong text.</strong>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span><em>This is an italic text.</em></span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <em>This is an italic text.</em>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>This is a
+                    <span class="text-super">super</span>
+                    text.
+                </span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    This is a
+                    <span class="text-super">super</span>
+                    text.
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>
+                    This is a
+                    <span class="text-sub">sub</span>
+                    text.
+                </span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    This is a
+                    <span class="text-sub">sub</span>
+                    text.
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>This is a
+                    <span class="text-capitalize">capitalized</span>
+                    text.
+                </span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    This is a
+                    <span class="text-capitalized">capitalized</span>
+                    text.
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>This is an
+                    <span class="text-uppercase">uppercase</span>
+                    text.
+                </span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    This is an
+                    <span class="text-uppercase">uppercase</span>
+                    text.
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>This is a
+                    <span class="text-lowercase">LOWERCASE</span>
+                    text.
+                </span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    This is a
+                    <span class="text-lowercase">LOWERCASE</span>
+                    text.
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+</div>

src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss

@@ -0,0 +1,31 @@
+:host {
+
+    #typography-inline-text-elements {
+
+        .source-code {
+            position: relative;
+            background: #F3F4F6;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            code {
+                background: none !important;
+            }
+        }
+
+        .preview {
+            font-size: 16px;
+            padding: 16px;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .mat-caption {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}

src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-typography-inline-text-elements',
+    templateUrl: './inline-text-elements.component.html',
+    styleUrls  : ['./inline-text-elements.component.scss']
+})
+export class TypographyInlineTextElementsComponent
+{
+
+    constructor()
+    {
+
+    }
+}

src/app/main/content/ui/typography/typography.component.html

@@ -20,266 +20,25 @@
 
             <md-tab label="Headings">
 
-                <div class="p-24">
+                <fuse-typography-headings></fuse-typography-headings>
-
-                    <div class="mat-title">Material design typography classes</div>
-
-                    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">112px</div>
-                                <span class="mat-display-4">Display 4</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="mat-display-4">Display 4</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">56px</div>
-                                <span class="mat-display-3">Display 3</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="mat-display-3">Display 3</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">45px</div>
-                                <span class="mat-display-2">Display 2</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="mat-display-2">Display 2</span>'>
-                            </fuse-hljs>
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">34px</div>
-                                <span class="mat-display-1">Display 1</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="mat-display-1">Display 1</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">24px</div>
-                                <span class="mat-headline">Headline</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="md-headline">Headline</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">20px</div>
-                                <span class="mat-title">Title</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="md-title">Title</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">16px</div>
-                                <span class="mat-subheading-2">Subheading 2</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="mat-subheading-2">Subheading 2</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">15px</div>
-                                <span class="mat-subheading-1">Subheading 1</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="mat-subheading-1">Subheading 1</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">14px</div>
-                                <span class="mat-body-1">Body 1</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="mat-body-1">Body 1</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">14px</div>
-                                <span class="mat-body-2">Body 2</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="mat-body-2">Body 2</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">12px</div>
-                                <span class="mat-caption">Caption</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50"
-                                       source='<span class="mat-caption">Caption</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                    </div>
-
-                    <div class="mat-title mt-20">Standard Headings</div>
-
-                    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">24px</div>
-                                <span class="h1">Heading 1</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50" source='<h1>Heading 1</h1><span class="h1">Heading 1</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">20px</div>
-                                <span class="h2">Heading 2</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50" source='<h2>Heading 2</h2><span class="h2">Heading 2</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">16px</div>
-                                <span class="h3">Heading 3</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50" source='<h3>Heading 3</h3><span class="h3">Heading 3</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">15px</div>
-                                <span class="h4">Heading 4</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50" source='<h4>Heading 4</h4><span class="h4">Heading 4</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">13px</div>
-                                <span class="h5">Heading 5</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50" source='<h5>Heading 5</h5><span class="h5">Heading 5</span>'>
-                            </fuse-hljs>
-                        </div>
-
-                        <div fxLayout="column" fxLayout.gt-md="row">
-
-                            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                                <div class="mat-caption secondary-text">12px</div>
-                                <span class="h6">Heading 6</span>
-                            </div>
-
-                            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
-                                       fxFlex="50" source='<h6>Heading 6</h6><span class="h6">Heading 6</span>'>
-                            </fuse-hljs>
-
-                        </div>
-
-                    </div>
-
-                </div>
 
             </md-tab>
 
             <md-tab label="Inline Text Elements">
 
+                <fuse-typography-inline-text-elements></fuse-typography-inline-text-elements>
 
             </md-tab>
 
             <md-tab label="Blockquotes & Lists">
 
+                <fuse-typography-blockquotes-lists></fuse-typography-blockquotes-lists>
 
             </md-tab>
 
             <md-tab label="Helpers">
 
+                <fuse-typography-helpers></fuse-typography-helpers>
 
             </md-tab>
 

src/app/main/content/ui/typography/typography.component.scss

@@ -1,34 +1,3 @@
 :host {
 
-    #typography {
-
-        .content {
-
-            .source-code {
-                position: relative;
-                background: #F3F4F6;
-                margin-bottom: 24px;
-                min-height: 180px;
-
-                code {
-                    background: none !important;
-                }
-            }
-
-            .preview {
-                font-size: 16px;
-                padding: 16px;
-                margin-bottom: 24px;
-                min-height: 180px;
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-
-                .mat-caption {
-                    margin-bottom: 16px;
-                }
-            }
-        }
-    }
 }

src/app/main/content/ui/typography/typography.module.ts

@@ -1,7 +1,12 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule, Routes } from '@angular/router';
+
 import { TypographyComponent } from './typography.component';
+import { TypographyHeadingsComponent } from './tabs/headings/headings.component';
+import { TypographyInlineTextElementsComponent } from './tabs/inline-text-elements/inline-text-elements.component';
+import { TypographyBlockquotesListsComponent } from './tabs/blockquotes-lists/blockquotes-lists.component';
+import { TypographyHelpersComponent } from './tabs/helpers/helpers.component';
 
 const routes: Routes = [
     {
@@ -16,7 +21,11 @@ const routes: Routes = [
         RouterModule.forChild(routes)
     ],
     declarations: [
-        TypographyComponent
+        TypographyComponent,
+        TypographyHeadingsComponent,
+        TypographyInlineTextElementsComponent,
+        TypographyBlockquotesListsComponent,
+        TypographyHelpersComponent
     ]
 })
 export class UITypographyModule