import { Component , ViewEncapsulation } from '@angular/core' ; import { Event , NavigationEnd , NavigationStart , Router } from '@angular/router' ; import { DrawerService , LoadingService } from '@swimlane/ngx-ui' ; import Prism from 'prismjs' ; import 'prismjs/plugins/custom-class/prism-custom-class' ; import pkg from '../../projects/swimlane/ngx-ui/package.json' ; @ Component ( { selector : 'app' , styleUrls : [ './app.component.scss' ] , templateUrl : './app.template.html' , encapsulation : ViewEncapsulation . None } ) export class AppComponent { version = pkg . version ; searchValue = '' ; filteredNavigationTree : any [ ] ; navigationTree : any [ ] = [ { name : 'Style' , icon : 'formula' , children : [ { name : 'Typography' , route : 'typography' } , { name : 'Colors' , route : 'colors' } , { name : 'Layout' , route : 'layout' } , { name : 'Icons' , route : 'icons' } ] } , { name : 'Animations' , route : 'animations' , icon : 'stars' } , { name : 'Pipes' , route : 'pipes' , icon : 'code' } , { name : 'Forms' , icon : 'application' , children : [ { name : 'Inputs' , route : 'inputs' } , { name : 'Buttons' , route : 'buttons' } , { name : 'Selects' , route : 'selects' } , { name : 'Date/Time Pickers' , route : 'datetime' } , { name : 'Slider' , route : 'slider' } , { name : 'Toggle' , route : 'toggle' } , { name : 'Checkbox' , route : 'checkbox' } , { name : 'Radio Button' , route : 'radio' } , { name : 'Code Editor' , route : 'code-editor' } ] } , { name : 'Elements' , icon : 'apps' , children : [ { name : 'Tables' , route : 'table' } , { name : 'Tags' , route : 'tags' } , { name : 'Lists' , route : 'lists' } , { name : 'Scrollbars' , route : 'scrollbars' } ] } , { name : 'Dialogs' , icon : 'applet' , children : [ { name : 'Drawer' , route : 'drawer' } , { name : 'Nag' , route : 'nag' } , { name : 'Dialog' , route : 'dialog' } , { name : 'Dialog - Large Format' , route : 'dialog-large-format' } , { name : 'Alert/Confirm' , route : 'alert' } , { name : 'Tooltip' , route : 'tooltip' } , { name : 'Notification' , route : 'notification' } ] } , { name : 'Components' , icon : 'integrations' , children : [ { name : 'Sections' , route : 'sections' } , { name : 'Toolbar' , route : 'toolbar' } , { name : 'Tabs' , route : 'tabs' } , { name : 'Dropdown' , route : 'dropdown' } , { name : 'Calendar' , route : 'calendar' } , { name : 'Date/Time Display' , route : 'time-display' } , { name : 'Loading' , route : 'loading' } , { name : 'Progress Spinner' , route : 'progress-spinner' } , { name : 'Plus Menu' , route : 'plus-menu' } , { name : 'Tree' , route : 'tree' } , { name : 'JSON Editor' , route : 'json-editor' } , { name : 'Icon' , route : 'ngx-icon' } , { name : 'Split' , route : 'split' } , { name : 'Navbar' , route : 'navbar' } , { name : 'Stepper' , route : 'stepper' } , { name : 'Overlay' , route : 'overlay' } , { name : 'Hotkeys' , route : 'hotkeys' } , { name : 'Tip' , route : 'tip' } , { name : 'Card' , route : 'card' } , { name : 'Dropzone' , route : 'dropzone' } ] } ] ; navExpanded = true ; constructor ( private drawerMngr , private loadingService , private router ) { Prism . plugins . customClass . prefix ( 'prism--' ) ; this . router . events . subscribe ( ( event ) => { if ( event instanceof NavigationStart ) { this . loadingService . start ( ) ; } else if ( event instanceof NavigationEnd ) { this . loadingService . complete ( ) ; this . drawerMngr . destroyAll ( ) ; } } ) ; this . filteredNavigationTree = this . deepCloneTree ( ) ; } updateSearchValue ( updatedVal ) { if ( ! updatedVal ) { this . filteredNavigationTree = this . deepCloneTree ( ) ; } updatedVal = updatedVal . toLowerCase ( ) ; this . filteredNavigationTree = this . navigationTree . map ( nav => { return { ... nav , children : nav . children ?. length ? nav . children . filter ( ( child ) => child . name . toLowerCase ( ) . includes ( updatedVal ) ) : undefined } ; } ) ; } trackByName ( _index , item ) { return item . name ; } private deepCloneTree ( ) { return [ ... this . navigationTree . map ( nav => { return { ... nav , children : nav . children ? [ ... nav . children ] : undefined } ; } ) ] ; } }