purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/withinpixels/fuse2

Browse Source 
+ fuse-hljs replaced with fuse-highlight
This commit is contained in:
Sercan Yemen 2018-01-08 15:29:04 +03:00
parent 5a40116c7b
commit 2288905cbd
37 changed files with 529 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -358,6 +358,11 @@
"integrity": "sha512-d1Twx1NM49dQ7jbNZfaHTQWuYL9cFVrGxYpbc3BvMf4626lOJOZnp2aJQNB9vP/WX3UOe1TrTUMABrGRu6FZhg==", "integrity": "sha512-d1Twx1NM49dQ7jbNZfaHTQWuYL9cFVrGxYpbc3BvMf4626lOJOZnp2aJQNB9vP/WX3UOe1TrTUMABrGRu6FZhg==",
"dev": true "dev": true
}, },
"@types/prismjs": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.9.0.tgz",
"integrity": "sha512-zeh+xd2pcCvWm1XtWLR4v5pzZMybKeq6X8Q4cIZMMx8GmyKDUfJaOtw+JaONHUQt5ncKFXezl8QGIDQsSF5YfA=="
},
"@types/q": { "@types/q": {
"version": "0.0.32", "version": "0.0.32",
"resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz", "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",

2
package.json
View File

@ -40,6 +40,7 @@
"@swimlane/ngx-charts": "7.0.1", "@swimlane/ngx-charts": "7.0.1",
"@swimlane/ngx-datatable": "11.1.7", "@swimlane/ngx-datatable": "11.1.7",
"@swimlane/ngx-dnd": "3.1.0", "@swimlane/ngx-dnd": "3.1.0",
"@types/prismjs": "1.9.0",
"angular-calendar": "0.23.0", "angular-calendar": "0.23.0",
"angular-in-memory-web-api": "0.5.2", "angular-in-memory-web-api": "0.5.2",
"angular2-markdown": "1.6.0", "angular2-markdown": "1.6.0",
@ -54,6 +55,7 @@
"ngx-color-picker": "5.3.0", "ngx-color-picker": "5.3.0",
"ngx-cookie-service": "1.0.9", "ngx-cookie-service": "1.0.9",
"perfect-scrollbar": "1.3.0", "perfect-scrollbar": "1.3.0",
"prismjs": "1.9.0",
"rxjs": "5.5.6", "rxjs": "5.5.6",
"web-animations-js": "2.3.1", "web-animations-js": "2.3.1",
"zone.js": "0.8.18" "zone.js": "0.8.18"

5
src/app/core/components/highlight/highlight.component.scss
View File

@ -1,3 +1,6 @@
:host { :host {
display: block;
padding: 8px;
background: #263238;
cursor: text;
} }

40
src/app/core/components/highlight/highlight.component.ts
View File

@ -1,15 +1,14 @@
import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core'; import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
import * as hljs from 'highlight.js'; import * as Prism from 'prismjs/prism';
import './prism-languages';
@Component({ @Component({
selector : 'fuse-hljs', selector : 'fuse-highlight',
template : ' ', template : ' ',
styleUrls: ['./hljs.component.scss'] styleUrls: ['./highlight.component.scss']
}) })
export class FuseHljsComponent implements OnInit export class FuseHighlightComponent implements OnInit
{ {
hljs: any;
@ContentChild('source') source: ElementRef; @ContentChild('source') source: ElementRef;
@Input('lang') lang: string; @Input('lang') lang: string;
@ -17,7 +16,7 @@ export class FuseHljsComponent implements OnInit
private elementRef: ElementRef private elementRef: ElementRef
) )
{ {
this.hljs = hljs;
} }
ngOnInit() ngOnInit()
@ -32,6 +31,20 @@ export class FuseHljsComponent implements OnInit
// Split the source into lines // Split the source into lines
const sourceLines = originalSource.split('\n'); const sourceLines = originalSource.split('\n');
// Remove the first and the last line of the source
// code if they are blank lines. This way, the html
// can be formatted properly while using fuse-highlight
// component
if ( !sourceLines[0].trim() )
{
sourceLines.shift();
}
if ( !sourceLines[sourceLines.length - 1].trim() )
{
sourceLines.pop();
}
// Find the first non-whitespace char index in // Find the first non-whitespace char index in
// the first line of the source code // the first line of the source code
const indexOfFirstChar = sourceLines[0].search(/\S|$/); const indexOfFirstChar = sourceLines[0].search(/\S|$/);
@ -39,20 +52,27 @@ export class FuseHljsComponent implements OnInit
// Generate the trimmed source // Generate the trimmed source
let source = ''; let source = '';
// Iterate through all the lines and trim the // Iterate through all the lines
// beginning white space depending on the index
sourceLines.forEach((line, index) => { sourceLines.forEach((line, index) => {
// Trim the beginning white space depending on the index
// and concat the source code
source = source + line.substr(indexOfFirstChar, line.length); source = source + line.substr(indexOfFirstChar, line.length);
// If it's not the last line...
if ( index !== sourceLines.length - 1 ) if ( index !== sourceLines.length - 1 )
{ {
// Add a line break at the end
source = source + '\n'; source = source + '\n';
} }
}); });
// Generate the highlighted code
const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
// Replace the innerHTML of the component with the highlighted code
this.elementRef.nativeElement.innerHTML = this.elementRef.nativeElement.innerHTML =
`<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`; '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
} }
} }

16
src/app/core/components/highlight/prism-languages.ts
View File

@ -0,0 +1,16 @@
import 'prismjs/prism';
import 'prismjs/components/prism-c';
import 'prismjs/components/prism-cpp';
import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-perl';
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-sass';
import 'prismjs/components/prism-scss';
import 'prismjs/components/prism-typescript';

6
src/app/core/modules/shared.module.ts
View File

@ -15,7 +15,7 @@ import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm
import { FuseCountdownComponent } from '../components/countdown/countdown.component'; import { FuseCountdownComponent } from '../components/countdown/countdown.component';
import { FuseMatchMedia } from '../services/match-media.service'; import { FuseMatchMedia } from '../services/match-media.service';
import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service'; import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
import { FuseHljsComponent } from '../components/hljs/hljs.component'; import { FuseHighlightComponent } from '../components/highlight/highlight.component';
import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive'; import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component'; import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
@ -30,7 +30,7 @@ import { TranslateModule } from '@ngx-translate/core';
FuseMatSidenavTogglerDirective, FuseMatSidenavTogglerDirective,
FuseConfirmDialogComponent, FuseConfirmDialogComponent,
FuseCountdownComponent, FuseCountdownComponent,
FuseHljsComponent, FuseHighlightComponent,
FuseIfOnDomDirective, FuseIfOnDomDirective,
FusePerfectScrollbarDirective, FusePerfectScrollbarDirective,
FuseMaterialColorPickerComponent FuseMaterialColorPickerComponent
@ -56,7 +56,7 @@ import { TranslateModule } from '@ngx-translate/core';
FuseMatSidenavTogglerDirective, FuseMatSidenavTogglerDirective,
FusePipesModule, FusePipesModule,
FuseCountdownComponent, FuseCountdownComponent,
FuseHljsComponent, FuseHighlightComponent,
FusePerfectScrollbarDirective, FusePerfectScrollbarDirective,
ReactiveFormsModule, ReactiveFormsModule,
ColorPickerModule, ColorPickerModule,

1
src/app/core/scss/partials/plugins/_plugins.scss
View File

@ -1,4 +1,3 @@
@import "highlight";
@import "prism"; @import "prism";
@import "perfect-scrollbar"; @import "perfect-scrollbar";
@import "ngx-datatable"; @import "ngx-datatable";

2
src/app/core/scss/partials/plugins/_prism.scss
View File

@ -2,7 +2,7 @@
$base00: #263238; $base00: #263238;
$base01: #2C393F; $base01: #2C393F;
$base02: #37474F; $base02: #4A5A62;
$base03: #707880; $base03: #707880;
$base04: #C9CCD3; $base04: #C9CCD3;
$base05: #CDD3DE; $base05: #CDD3DE;

6
src/app/main/content/components-third-party/google-maps/google-maps.component.html vendored
View File

@ -38,13 +38,13 @@
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code"> <fuse-highlight lang="html">
<textarea #source hidden="hidden"> <textarea #source>
<agm-map [latitude]="lat" [longitude]="lng"> <agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map> </agm-map>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>

347
src/app/main/content/components/cards/cards.component.html
View File

@ -52,9 +52,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<img src="assets/images/cards/card1.jpg"> <img src="assets/images/cards/card1.jpg">
@ -66,13 +68,14 @@
<div class="p-16 pt-0 line-height-1.75"> <div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and Cards provide context and an entry point to more robust information and views, and
their their content and quantity can vary greatly.
content and quantity can vary greatly.
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -110,9 +113,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<img src="assets/images/cards/card1.jpg"> <img src="assets/images/cards/card1.jpg">
@ -124,8 +129,7 @@
<div class="p-16 pt-0 line-height-1.75"> <div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and Cards provide context and an entry point to more robust information and views, and
their their content and quantity can vary greatly.
content and quantity can vary greatly.
</div> </div>
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@ -134,8 +138,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -166,9 +172,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16"> <div class="p-16">
@ -178,13 +186,14 @@
<div class="p-16 pt-0 line-height-1.75"> <div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and Cards provide context and an entry point to more robust information and views, and
their their content and quantity can vary greatly.
content and quantity can vary greatly.
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -221,9 +230,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card mat-indigo-bg"> <div class="fuse-card mat-indigo-bg">
<div class="p-16"> <div class="p-16">
@ -233,10 +244,9 @@
<div class="p-16 pt-0 line-height-1.75"> <div class="p-16 pt-0 line-height-1.75">
All cards can be mixed with Fuse Color Classes to have different colors. This All cards can be mixed with Fuse Color Classes to have different colors. This
greatly greatly increases the unique variations of all cards. Cards provide context and an
increases the unique variations of all cards. Cards provide context and an entry entry point to more robust information and views, and their content and quantity can
point to vary greatly.
more robust information and views, and their content and quantity can vary greatly.
</div> </div>
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@ -245,8 +255,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -274,9 +286,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<img src="assets/images/cards/card1.jpg"> <img src="assets/images/cards/card1.jpg">
@ -287,8 +301,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -316,9 +332,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<img src="assets/images/cards/card1.jpg"> <img src="assets/images/cards/card1.jpg">
@ -329,8 +347,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -371,9 +391,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="position-relative"> <div class="position-relative">
@ -397,8 +419,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -442,9 +466,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -462,8 +488,7 @@
<div class="p-16 pt-0 line-height-1.75"> <div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and Cards provide context and an entry point to more robust information and views, and
their their content and quantity can vary greatly.
content and quantity can vary greatly.
</div> </div>
<div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center"> <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@ -472,8 +497,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -527,9 +554,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<img src="assets/images/cards/card3.jpg"> <img src="assets/images/cards/card3.jpg">
@ -561,16 +590,17 @@
<div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]> <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]>
<div class="card-expanded-content"> <div class="card-expanded-content">
Card content that exceeds the maximum card height is truncated and does not Card content that exceeds the maximum card height is truncated and does not
scroll, but scroll, but the card can be expanded. Once expanded, the card may exceed the
the card can be expanded. Once expanded, the card may exceed the maximum height maximum height of the view. In this case, the card will scroll with the card
of the collection.
view. In this case, the card will scroll with the card collection.
</div> </div>
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -619,9 +649,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<img src="assets/images/cards/card2.jpg"> <img src="assets/images/cards/card2.jpg">
@ -647,16 +679,17 @@
<div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]> <div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]>
<div class="card-expanded-content"> <div class="card-expanded-content">
Card content that exceeds the maximum card height is truncated and does not Card content that exceeds the maximum card height is truncated and does not
scroll, but scroll, but the card can be expanded. Once expanded, the card may exceed the
the card can be expanded. Once expanded, the card may exceed the maximum height maximum height of the view. In this case, the card will scroll with the card
of the collection.
view. In this case, the card will scroll with the card collection.
</div> </div>
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -698,9 +731,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="start center"> <div class="p-16" fxLayout="row" fxLayoutAlign="start center">
@ -721,13 +756,14 @@
<div class="p-16 pt-0 line-height-1.75"> <div class="p-16 pt-0 line-height-1.75">
Cards provide context and an entry point to more robust information and views, and Cards provide context and an entry point to more robust information and views, and
their their content and quantity can vary greatly.
content and quantity can vary greatly.
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -764,9 +800,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<img src="assets/images/cards/card2.jpg"> <img src="assets/images/cards/card2.jpg">
@ -786,8 +824,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -829,9 +869,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card variable-width"> <div class="fuse-card variable-width">
<div class="position-relative"> <div class="position-relative">
@ -856,8 +898,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -896,9 +940,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -920,8 +966,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -960,9 +1008,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between start"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
@ -984,8 +1034,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -1024,9 +1076,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between start"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
@ -1048,8 +1102,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -1116,9 +1172,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<img src="assets/images/cards/card2.jpg"> <img src="assets/images/cards/card2.jpg">
@ -1169,8 +1227,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -1282,9 +1342,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16"> <div class="p-16">
@ -1379,8 +1441,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -1485,9 +1549,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="mat-light-blue-600-bg"> <div class="mat-light-blue-600-bg">
@ -1575,8 +1641,10 @@
</mat-tab-group> </mat-tab-group>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -1665,9 +1733,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -1739,8 +1809,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -1814,9 +1886,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -1886,8 +1960,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -1993,9 +2069,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"> <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -2084,8 +2162,9 @@
</mat-tab-group> </mat-tab-group>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -2123,9 +2202,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16 pb-0"> <div class="p-16 pb-0">
@ -2146,8 +2227,10 @@
</mat-selection-list> </mat-selection-list>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -2240,9 +2323,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16"> <div class="p-16">
@ -2318,8 +2403,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -2357,9 +2444,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16"> <div class="p-16">
@ -2380,8 +2469,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->
@ -2420,9 +2511,11 @@
<!-- / PREVIEW --> <!-- / PREVIEW -->
<!-- SOURCE --> <!-- SOURCE -->
<div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm> <div class="card-source" fxHide fxShow.gt-sm>
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="fuse-card"> <div class="fuse-card">
<div class="p-16"> <div class="p-16">
@ -2444,8 +2537,10 @@
</div> </div>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<!-- / SOURCE --> <!-- / SOURCE -->

1
src/app/main/content/components/cards/cards.component.scss
View File

@ -38,6 +38,7 @@
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
.card-source { .card-source {
background: #263238;
display: flex !important; display: flex !important;
flex: 1; flex: 1;
max-height: 400px; max-height: 400px;

10
src/app/main/content/components/components.module.ts
View File

@ -3,7 +3,7 @@ import { SharedModule } from '../../../core/modules/shared.module';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { FuseCardsDocsComponent } from './cards/cards.component'; import { FuseCardsDocsComponent } from './cards/cards.component';
import { FuseCountdownDocsComponent } from './countdown/countdown.component'; import { FuseCountdownDocsComponent } from './countdown/countdown.component';
import { FuseHljsDocsComponent } from './hljs/hljs.component'; import { FuseHighlightDocsComponent } from './highlight/highlight.component';
import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component'; import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component'; import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
import { FuseNavigationDocsComponent } from './navigation/navigation.component'; import { FuseNavigationDocsComponent } from './navigation/navigation.component';
@ -24,8 +24,8 @@ const routes = [
component: FuseCountdownDocsComponent component: FuseCountdownDocsComponent
}, },
{ {
path : 'highlightjs', path : 'highlight',
component: FuseHljsDocsComponent component: FuseHighlightDocsComponent
}, },
{ {
path : 'material-color-picker', path : 'material-color-picker',
@ -64,7 +64,7 @@ const routes = [
declarations: [ declarations: [
FuseCardsDocsComponent, FuseCardsDocsComponent,
FuseCountdownDocsComponent, FuseCountdownDocsComponent,
FuseHljsDocsComponent, FuseHighlightDocsComponent,
FuseMaterialColorPickerDocsComponent, FuseMaterialColorPickerDocsComponent,
FuseMultiLanguageDocsComponent, FuseMultiLanguageDocsComponent,
FuseNavigationDocsComponent, FuseNavigationDocsComponent,
@ -73,6 +73,6 @@ const routes = [
FuseWidgetDocsComponent FuseWidgetDocsComponent
] ]
}) })
export class ComponentsModule export class FuseComponentsModule
{ {
} }

8
src/app/main/content/components/countdown/countdown.component.html
View File

@ -29,12 +29,12 @@
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="html" class="source-code"> <fuse-highlight lang="html">
<textarea #source hidden="hidden"> <textarea #source>
<fuse-countdown eventDate="2019-07-28"></fuse-countdown> <fuse-countdown eventDate="2019-07-28"></fuse-countdown>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>

30
src/app/main/content/components/highlight/highlight.component.html
View File

@ -1,4 +1,4 @@
<div id="hljs" class="page-layout simple fullwidth" fusePerfectScrollbar> <div id="highlight" class="page-layout simple fullwidth" fusePerfectScrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center"> <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@ -8,7 +8,7 @@
<mat-icon class="secondary-text s-16">chevron_right</mat-icon> <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Components</span> <span class="secondary-text">Components</span>
</div> </div>
<div class="h2 mt-16">highlight.js</div> <div class="h2 mt-16">Highlight</div>
</div> </div>
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->
@ -17,36 +17,42 @@
<div class="content p-24"> <div class="content p-24">
<p> <p>
<code>fuse-hljs</code> is a custom built Fuse component allows to show syntax highlighted codes. <code>fuse-highlight</code> is a custom built Fuse component allows to show syntax highlighted codes.
</p> </p>
<div class="my-48"> <div class="my-48">
<h2>Sample</h2> <h2>Sample</h2>
<p fxLayout="row" fxLayoutAlign="start start"> <p fxLayout="row" fxLayoutAlign="start start">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<div class="title"> <div class="title">
<span>Example Title</span> <span>Example Title</span>
</div> </div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="mat-grey-200-bg py-8">
<fuse-hljs lang="html" class="source-code"> <fuse-highlight lang="html">
<textarea #source hidden="hidden"> <textarea #source>
&lt;fuse-hljs lang="html" class="source-code"&gt;
&lt;textarea #source hidden="hidden"&gt; &lt;fuse-highlight lang="html"&gt;
&lt;textarea #source&gt;
&lt;div class="title"&gt; &lt;div class="title"&gt;
&lt;span&gt;Example Title&lt;/span&gt; &lt;span&gt;Example Title&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/textarea&gt; &lt;/textarea&gt;
&lt;/fuse-hljs&gt; &lt;/fuse-highlight&gt;
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>

8
src/app/main/content/components/highlight/highlight.component.ts
View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector : 'fuse-hljs-docs', selector : 'fuse-highlight-docs',
templateUrl: './hljs.component.html', templateUrl: './highlight.component.html',
styleUrls : ['./hljs.component.scss'] styleUrls : ['./highlight.component.scss']
}) })
export class FuseHljsDocsComponent export class FuseHighlightDocsComponent
{ {
constructor() constructor()
{ {

8
src/app/main/content/components/material-color-picker/material-color-picker.component.html
View File

@ -30,14 +30,14 @@
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="html" class="source-code"> <fuse-highlight lang="html">
<textarea #source hidden="hidden"> <textarea #source>
<fuse-material-color-picker [(selectedClass)]="colorClass" <fuse-material-color-picker [(selectedClass)]="colorClass"
(onValueChange)="onSettingsChange()"> (onValueChange)="onSettingsChange()">
</fuse-material-color-picker> </fuse-material-color-picker>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>

24
src/app/main/content/components/multi-language/multi-language.component.html
View File

@ -41,9 +41,9 @@
translation data: translation data:
</p> </p>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="ts" class="source-code"> <fuse-highlight lang="typescript">
<textarea #source hidden="hidden"> <textarea #source>
// i18n/en.ts // i18n/en.ts
export const locale = { export const locale = {
lang: 'en', lang: 'en',
@ -64,7 +64,7 @@
} }
}; };
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>
@ -75,9 +75,9 @@
<code>mail.component.ts</code> file: <code>mail.component.ts</code> file:
</p> </p>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="ts" class="source-code"> <fuse-highlight lang="typescript">
<textarea #source hidden="hidden"> <textarea #source>
// Your imports // Your imports
import { ... } from '..'; import { ... } from '..';
@ -100,7 +100,7 @@
... ...
} }
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>
@ -110,9 +110,9 @@
Changing the current language can happen instantly. Simply call the <code>use</code> method from the Changing the current language can happen instantly. Simply call the <code>use</code> method from the
translate service: translate service:
</p> </p>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="ts" class="source-code"> <fuse-highlight lang="typescript">
<textarea #source hidden="hidden"> <textarea #source>
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
constructor(private translate: TranslateService) {} constructor(private translate: TranslateService) {}
@ -123,7 +123,7 @@
this.translate.use('tr'); this.translate.use('tr');
} }
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
<p> <p>
More detailed usage of the translation service can be found in the <code>toolbar.component.ts</code> More detailed usage of the translation service can be found in the <code>toolbar.component.ts</code>

56
src/app/main/content/components/navigation/navigation.component.html
View File

@ -23,12 +23,12 @@
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="html" class="source-code"> <fuse-highlight lang="html">
<textarea #source hidden="hidden"> <textarea #source>
<fuse-navigation></fuse-navigation> <fuse-navigation></fuse-navigation>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>
@ -49,9 +49,9 @@
<div class="my-48"> <div class="my-48">
<h3>Grouping</h3> <h3>Grouping</h3>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="json" class="source-code"> <fuse-highlight lang="json">
<textarea #source hidden="hidden"> <textarea #source>
{ {
'title' : 'COMPONENTS', 'title' : 'COMPONENTS',
'translate': 'NAV.COMPONENTS', 'translate': 'NAV.COMPONENTS',
@ -65,15 +65,15 @@
] ]
}, },
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>
<div class="my-48"> <div class="my-48">
<h3>Collapsable</h3> <h3>Collapsable</h3>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="json" class="source-code"> <fuse-highlight lang="json">
<textarea #source hidden="hidden"> <textarea #source>
{ {
'title' : 'Datatables', 'title' : 'Datatables',
'translate': 'NAV.DATATABLES', 'translate': 'NAV.DATATABLES',
@ -88,15 +88,15 @@
] ]
}, },
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>
<div class="my-48"> <div class="my-48">
<h3>Item</h3> <h3>Item</h3>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="json" class="source-code"> <fuse-highlight lang="json">
<textarea #source hidden="hidden"> <textarea #source>
{ {
'title' : 'Countdown', 'title' : 'Countdown',
'translate': 'NAV.COUNTDOWN', 'translate': 'NAV.COUNTDOWN',
@ -105,7 +105,7 @@
'url' : '/components/countdown' 'url' : '/components/countdown'
}, },
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>
@ -132,9 +132,9 @@
<h4>Update navigation item on-the-fly</h4> <h4>Update navigation item on-the-fly</h4>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="ts" class="source-code"> <fuse-highlight lang="typescript">
<textarea #source hidden="hidden"> <textarea #source>
updateMailBadge() updateMailBadge()
{ {
// Get the mail nav item // Get the mail nav item
@ -144,7 +144,7 @@
mailNavItem.badge.title = 35; mailNavItem.badge.title = 35;
} }
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
<div class="mt-24 mb-64"> <div class="mt-24 mb-64">
@ -157,9 +157,9 @@
<h4>Add a subitem to the Calendar nav item</h4> <h4>Add a subitem to the Calendar nav item</h4>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="ts" class="source-code"> <fuse-highlight lang="typescript">
<textarea #source hidden="hidden"> <textarea #source>
addSubitemToCalendar() addSubitemToCalendar()
{ {
// Prepare the new nav item // Prepare the new nav item
@ -174,7 +174,7 @@
this.navigationService.addNavigationItem('applications.calendar', newNavItem); this.navigationService.addNavigationItem('applications.calendar', newNavItem);
} }
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
<div class="mt-24 mb-64"> <div class="mt-24 mb-64">
@ -187,9 +187,9 @@
<h4>Add a nav item with custom function</h4> <h4>Add a nav item with custom function</h4>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="ts" class="source-code"> <fuse-highlight lang="typescript">
<textarea #source hidden="hidden"> <textarea #source>
addNavItemWithCustomFunction() addNavItemWithCustomFunction()
{ {
// Prepare the new nav item // Prepare the new nav item
@ -209,7 +209,7 @@
applicationsNavItem.children.unshift(newNavItem); applicationsNavItem.children.unshift(newNavItem);
} }
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
<div class="mt-24"> <div class="mt-24">

8
src/app/main/content/components/search-bar/search-bar.component.html
View File

@ -23,12 +23,12 @@
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="html" class="source-code"> <fuse-highlight lang="html">
<textarea #source hidden="hidden"> <textarea #source>
<fuse-search-bar (onInput)="search($event)"></fuse-search-bar> <fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>

8
src/app/main/content/components/shortcuts/shortcuts.component.html
View File

@ -23,12 +23,12 @@
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="html" class="source-code"> <fuse-highlight lang="html">
<textarea #source hidden="hidden"> <textarea #source>
<fuse-shortcuts></fuse-shortcuts> <fuse-shortcuts></fuse-shortcuts>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>

12
src/app/main/content/components/widget/widget.component.html
View File

@ -62,9 +62,11 @@
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="py-8">
<fuse-hljs lang="html" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="html">
<textarea #source>
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
@ -97,8 +99,10 @@
<!-- / Back --> <!-- / Back -->
</fuse-widget> </fuse-widget>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>

10
src/app/main/content/services/config/config.component.html
View File

@ -24,8 +24,10 @@
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="typescript">
<textarea #source>
export class SomeComponent export class SomeComponent
{ {
settings: any; settings: any;
@ -61,8 +63,10 @@
}); });
} }
} }
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>

1
src/app/main/content/services/services.module.ts
View File

@ -25,6 +25,7 @@ const routes = [
FuseSplashScreenServiceDocsComponent FuseSplashScreenServiceDocsComponent
] ]
}) })
export class FuseServicesModule export class FuseServicesModule
{ {
} }

10
src/app/main/content/services/splash-screen/splash-screen.component.html
View File

@ -25,8 +25,10 @@
<div class="my-48"> <div class="my-48">
<h2>Usage</h2> <h2>Usage</h2>
<p class="mat-grey-200-bg py-8"> <p class="mat-grey-200-bg py-8">
<fuse-hljs lang="ts" class="source-code">
<textarea #source hidden="hidden"> <fuse-highlight lang="typescript">
<textarea #source>
export class SomeComponent export class SomeComponent
{ {
constructor(private fuseSplashScreen: FuseSplashScreenService) {} constructor(private fuseSplashScreen: FuseSplashScreenService) {}
@ -36,8 +38,10 @@
this.fuseSplashScreen.hide(); this.fuseSplashScreen.hide();
} }
} }
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</p> </p>
</div> </div>

40
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html
View File

@ -10,12 +10,12 @@
<span>p-0</span> <span>p-0</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="p-0">No padding</span> <span class="p-0">No padding</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -26,12 +26,12 @@
<span>p-4</span> <span>p-4</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="p-4">4px padding</span> <span class="p-4">4px padding</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -42,12 +42,12 @@
<span>p-12</span> <span>p-12</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="p-12">12px padding</span> <span class="p-12">12px padding</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -69,7 +69,7 @@
<span>py-0</span> <span>py-0</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="pt-0">0 padding from top</span> <span class="pt-0">0 padding from top</span>
@ -79,7 +79,7 @@
<span class="px-0">0 padding from left and right</span> <span class="px-0">0 padding from left and right</span>
<span class="py-0">0 padding from top and bottom</span> <span class="py-0">0 padding from top and bottom</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -95,7 +95,7 @@
<span>py-4</span> <span>py-4</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="pt-4">4px padding from top</span> <span class="pt-4">4px padding from top</span>
@ -105,7 +105,7 @@
<span class="px-4">4px padding from left and right</span> <span class="px-4">4px padding from left and right</span>
<span class="py-4">4px padding from top and bottom</span> <span class="py-4">4px padding from top and bottom</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -121,12 +121,12 @@
<span>m-0</span> <span>m-0</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="m-0">No margin</span> <span class="m-0">No margin</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -137,12 +137,12 @@
<span>m-4</span> <span>m-4</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="m-4">4px margin</span> <span class="m-4">4px margin</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -153,12 +153,12 @@
<span>m-12</span> <span>m-12</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="m-12">12px margin</span> <span class="m-12">12px margin</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -180,7 +180,7 @@
<span>my-0</span> <span>my-0</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mt-0">0 margin from top</span> <span class="mt-0">0 margin from top</span>
@ -190,7 +190,7 @@
<span class="mx-0">0 margin from left and right</span> <span class="mx-0">0 margin from left and right</span>
<span class="my-0">0 margin from top and bottom</span> <span class="my-0">0 margin from top and bottom</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -206,7 +206,7 @@
<span>my-4</span> <span>my-4</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mt-4">4px margin from top</span> <span class="mt-4">4px margin from top</span>
@ -216,7 +216,7 @@
<span class="mx-4">4px margin from left and right</span> <span class="mx-4">4px margin from left and right</span>
<span class="my-4">4px margin from top and bottom</span> <span class="my-4">4px margin from top and bottom</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>

1
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss
View File

@ -4,7 +4,6 @@
.source-code { .source-code {
position: relative; position: relative;
background: #F3F4F6;
margin-bottom: 24px; margin-bottom: 24px;
min-height: 180px; min-height: 180px;

32
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html
View File

@ -10,12 +10,12 @@
<span>w-0</span> <span>w-0</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="w-0">0px width</span> <span class="w-0">0px width</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -26,12 +26,12 @@
<span>w-100</span> <span>w-100</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="w-100">100px width</span> <span class="w-100">100px width</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -42,12 +42,12 @@
<span>w-25-p</span> <span>w-25-p</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="w-25-p">25% width</span> <span class="w-25-p">25% width</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -58,12 +58,12 @@
<span>w-100-p</span> <span>w-100-p</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="w-100-p">100% width</span> <span class="w-100-p">100% width</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -79,12 +79,12 @@
<span>h-0</span> <span>h-0</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="h-0">0px height</span> <span class="h-0">0px height</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -95,12 +95,12 @@
<span>h-100</span> <span>h-100</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="h-100">100px height</span> <span class="h-100">100px height</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -111,12 +111,12 @@
<span>h-25-p</span> <span>h-25-p</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="h-25-p">25% height</span> <span class="h-25-p">25% height</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -127,12 +127,12 @@
<span>h-100-p</span> <span>h-100-p</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="h-100-p">100% height</span> <span class="h-100-p">100% height</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>

1
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss
View File

@ -4,7 +4,6 @@
.source-code { .source-code {
position: relative; position: relative;
background: #F3F4F6;
margin-bottom: 24px; margin-bottom: 24px;
min-height: 180px; min-height: 180px;

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

@ -14,7 +14,7 @@
</blockquote> </blockquote>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<blockquote> <blockquote>
@ -23,7 +23,7 @@
</p> </p>
</blockquote> </blockquote>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -40,7 +40,7 @@
</blockquote> </blockquote>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<blockquote> <blockquote>
@ -52,7 +52,7 @@
</footer> </footer>
</blockquote> </blockquote>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -69,7 +69,7 @@
</blockquote> </blockquote>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<blockquote class="reverse"> <blockquote class="reverse">
@ -81,7 +81,7 @@
</footer> </footer>
</blockquote> </blockquote>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -108,7 +108,7 @@
</ol> </ol>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<ol> <ol>
@ -124,7 +124,7 @@
<li>Ordered list item</li> <li>Ordered list item</li>
</ol> </ol>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -145,7 +145,7 @@
</ul> </ul>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<ul> <ul>
@ -161,7 +161,7 @@
<li>Unordered list item</li> <li>Unordered list item</li>
</ul> </ul>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -183,7 +183,7 @@
</dl> </dl>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<dl> <dl>
@ -194,7 +194,7 @@
<dd>This is also another definition description</dd> <dd>This is also another definition description</dd>
</dl> </dl>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>

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

@ -4,7 +4,6 @@
.source-code { .source-code {
position: relative; position: relative;
background: #F3F4F6;
margin-bottom: 24px; margin-bottom: 24px;
min-height: 180px; min-height: 180px;

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

@ -11,12 +11,12 @@
<span class="mat-display-4">Display 4</span> <span class="mat-display-4">Display 4</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-display-4">Display 4</span> <span class="mat-display-4">Display 4</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -27,12 +27,12 @@
<span class="mat-display-3">Display 3</span> <span class="mat-display-3">Display 3</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-display-3">Display 3</span> <span class="mat-display-3">Display 3</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -43,12 +43,12 @@
<span class="mat-display-2">Display 2</span> <span class="mat-display-2">Display 2</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-display-2">Display 2</span> <span class="mat-display-2">Display 2</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
<div fxLayout="column" fxLayout.gt-md="row"> <div fxLayout="column" fxLayout.gt-md="row">
@ -58,12 +58,12 @@
<span class="mat-display-1">Display 1</span> <span class="mat-display-1">Display 1</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-display-1">Display 1</span> <span class="mat-display-1">Display 1</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -74,12 +74,12 @@
<span class="mat-headline">Headline</span> <span class="mat-headline">Headline</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-headline">Headline</span> <span class="mat-headline">Headline</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -90,12 +90,12 @@
<span class="mat-title">Title</span> <span class="mat-title">Title</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-title">Title</span> <span class="mat-title">Title</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -106,12 +106,12 @@
<span class="mat-subheading-2">Subheading 2</span> <span class="mat-subheading-2">Subheading 2</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-subheading-2">Subheading 2</span> <span class="mat-subheading-2">Subheading 2</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -122,12 +122,12 @@
<span class="mat-subheading-1">Subheading 1</span> <span class="mat-subheading-1">Subheading 1</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-subheading-1">Subheading 1</span> <span class="mat-subheading-1">Subheading 1</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -138,12 +138,12 @@
<span class="mat-body-1">Body 1</span> <span class="mat-body-1">Body 1</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-body-1">Body 1</span> <span class="mat-body-1">Body 1</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -154,12 +154,12 @@
<span class="mat-body-2">Body 2</span> <span class="mat-body-2">Body 2</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-body-2">Body 2</span> <span class="mat-body-2">Body 2</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -170,12 +170,12 @@
<span class="mat-caption">Caption</span> <span class="mat-caption">Caption</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="mat-caption">Caption</span> <span class="mat-caption">Caption</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -192,13 +192,13 @@
<span class="h1">Heading 1</span> <span class="h1">Heading 1</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<h1>Heading 1</h1> <h1>Heading 1</h1>
<span class="h1">Heading 1</span> <span class="h1">Heading 1</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -209,13 +209,13 @@
<span class="h2">Heading 2</span> <span class="h2">Heading 2</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<h2>Heading 2</h2> <h2>Heading 2</h2>
<span class="h2">Heading 2</span> <span class="h2">Heading 2</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -226,13 +226,13 @@
<span class="h3">Heading 3</span> <span class="h3">Heading 3</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<h3>Heading 3</h3> <h3>Heading 3</h3>
<span class="h3">Heading 3</span> <span class="h3">Heading 3</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -243,13 +243,13 @@
<span class="h4">Heading 4</span> <span class="h4">Heading 4</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<h4>Heading 4</h4> <h4>Heading 4</h4>
<span class="h4">Heading 4</span> <span class="h4">Heading 4</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -260,13 +260,13 @@
<span class="h5">Heading 5</span> <span class="h5">Heading 5</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<h5>Heading 5</h5> <h5>Heading 5</h5>
<span class="h5">Heading 5</span> <span class="h5">Heading 5</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -277,13 +277,13 @@
<span class="h6">Heading 6</span> <span class="h6">Heading 6</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<h6>Heading 6</h6> <h6>Heading 6</h6>
<span class="h6">Heading 6</span> <span class="h6">Heading 6</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>

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

@ -4,7 +4,6 @@
.source-code { .source-code {
position: relative; position: relative;
background: #F3F4F6;
margin-bottom: 24px; margin-bottom: 24px;
min-height: 180px; min-height: 180px;

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

@ -13,14 +13,14 @@
<span class="font-weight-900">font-weight: 900</span> <span class="font-weight-900">font-weight: 900</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="font-weight-100">100 font weight</span> <span class="font-weight-100">100 font weight</span>
... ...
<span class="font-weight-900">900 font weight</span> <span class="font-weight-900">900 font weight</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -37,12 +37,12 @@
<span class="font-size-20">font-size: 20</span> <span class="font-size-20">font-size: 20</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="font-size-20">font-size: 20</span> <span class="font-size-20">font-size: 20</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -61,14 +61,14 @@
<span>line-height: 120</span> <span>line-height: 120</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="line-height-2">2px line height</span> <span class="line-height-2">2px line height</span>
... ...
<span class="line-height-120">120px line height</span> <span class="line-height-120">120px line height</span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -84,12 +84,12 @@
<div class="text-left">Left aligned text</div> <div class="text-left">Left aligned text</div>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<div class="text-left">Left aligned text</div> <div class="text-left">Left aligned text</div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -99,12 +99,12 @@
<div class="text-center">Center aligned text</div> <div class="text-center">Center aligned text</div>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<div class="text-center">Center aligned text</div> <div class="text-center">Center aligned text</div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -114,12 +114,12 @@
<div class="text-right">Right aligned text</div> <div class="text-right">Right aligned text</div>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<div class="text-right">Right aligned text</div> <div class="text-right">Right aligned text</div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -131,14 +131,14 @@
</p> </p>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<p> <p>
<span class="text-boxed">Boxed text</span> <span class="text-boxed">Boxed text</span>
</p> </p>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -150,14 +150,14 @@
</p> </p>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<p> <p>
<span class="text-boxed-light">Boxed text light</span> <span class="text-boxed-light">Boxed text light</span>
</p> </p>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -169,14 +169,14 @@
</p> </p>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<p> <p>
<span class="text-strike">Strike-through text</span> <span class="text-strike">Strike-through text</span>
</p> </p>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -186,12 +186,12 @@
<div class="text-italic">Italic text</div> <div class="text-italic">Italic text</div>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<div class="text-italic">Italic text</div> <div class="text-italic">Italic text</div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -201,12 +201,12 @@
<div class="text-semibold">Semi-bold text</div> <div class="text-semibold">Semi-bold text</div>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<div class="text-semibold">Semi-bold text</div> <div class="text-semibold">Semi-bold text</div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -216,12 +216,12 @@
<div class="text-bold">Bold text</div> <div class="text-bold">Bold text</div>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<div class="text-bold">Bold text</div> <div class="text-bold">Bold text</div>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -233,14 +233,14 @@
</span> </span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<span class="text-truncate"> <span class="text-truncate">
This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta massa. This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta massa.
</span> </span>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>

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

@ -4,7 +4,6 @@
.source-code { .source-code {
position: relative; position: relative;
background: #F3F4F6;
margin-bottom: 24px; margin-bottom: 24px;
min-height: 180px; min-height: 180px;

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

@ -8,12 +8,12 @@
<span><abbr title="Cascaded Style Sheet">CSS</abbr></span> <span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<abbr title="Cascaded Style Sheet">CSS</abbr> <abbr title="Cascaded Style Sheet">CSS</abbr>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -23,12 +23,12 @@
<span>This is a <mark>marked</mark> text.</span> <span>This is a <mark>marked</mark> text.</span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
This is a <mark>marked</mark> text. This is a <mark>marked</mark> text.
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -40,12 +40,12 @@
</span> </span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<del>This is a deleted text.</del> <del>This is a deleted text.</del>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -55,12 +55,12 @@
<span><s>This is a strike-through text.</s></span> <span><s>This is a strike-through text.</s></span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<s>This is a strike-through text.</s> <s>This is a strike-through text.</s>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -70,12 +70,12 @@
<span><u>This is an underlined text.</u></span> <span><u>This is an underlined text.</u></span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<u>This is an underlined text.</u> <u>This is an underlined text.</u>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -87,12 +87,12 @@
</span> </span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<small>This is a small text.</small> <small>This is a small text.</small>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -102,12 +102,12 @@
<span><strong>This is a strong text.</strong></span> <span><strong>This is a strong text.</strong></span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<strong>This is a strong text.</strong> <strong>This is a strong text.</strong>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -117,12 +117,12 @@
<span><em>This is an italic text.</em></span> <span><em>This is an italic text.</em></span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
<em>This is an italic text.</em> <em>This is an italic text.</em>
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -135,14 +135,14 @@
</span> </span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
This is a This is a
<span class="text-super">super</span> <span class="text-super">super</span>
text. text.
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -156,14 +156,14 @@
</span> </span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
This is a This is a
<span class="text-sub">sub</span> <span class="text-sub">sub</span>
text. text.
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -176,14 +176,14 @@
</span> </span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
This is a This is a
<span class="text-capitalized">capitalized</span> <span class="text-capitalized">capitalized</span>
text. text.
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -196,14 +196,14 @@
</span> </span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
This is an This is an
<span class="text-uppercase">uppercase</span> <span class="text-uppercase">uppercase</span>
text. text.
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>
@ -216,14 +216,14 @@
</span> </span>
</div> </div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center" <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"> fxFlex="50">
<textarea #source hidden="hidden"> <textarea #source hidden="hidden">
This is a This is a
<span class="text-lowercase">LOWERCASE</span> <span class="text-lowercase">LOWERCASE</span>
text. text.
</textarea> </textarea>
</fuse-hljs> </fuse-highlight>
</div> </div>

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

@ -4,7 +4,6 @@
.source-code { .source-code {
position: relative; position: relative;
background: #F3F4F6;
margin-bottom: 24px; margin-bottom: 24px;
min-height: 180px; min-height: 180px;

6
src/app/navigation/navigation.model.ts
View File

@ -823,11 +823,11 @@ export class FuseNavigationModel implements FuseNavigationModelInterface
'url' : '/components/countdown' 'url' : '/components/countdown'
}, },
{ {
'id' : 'highlightjs', 'id' : 'highlight',
'title': 'Highlight.js', 'title': 'Highlight',
'type' : 'item', 'type' : 'item',
'icon' : 'settings_input_component', 'icon' : 'settings_input_component',
'url' : '/components/highlightjs' 'url' : '/components/highlight'
}, },
{ {
'id' : 'material-color-picker', 'id' : 'material-color-picker',