Initial CoreUI commit

The initial new codebase from a template

src/app/shared/aside.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, HostListener } from '@angular/core';
+
+/**
+* Allows the aside to be toggled via click.
+*/
+@Directive({
+  selector: '[appAsideMenuToggler]',
+})
+export class AsideToggleDirective {
+  constructor() { }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('aside-menu-hidden');
+  }
+}

src/app/shared/breadcrumb.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
+import 'rxjs/add/operator/filter';
+
+@Component({
+  selector: 'app-breadcrumbs',
+  template: `
+  <ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last = last>
+    <li class="breadcrumb-item"
+        *ngIf="breadcrumb.label.title&&breadcrumb.url.substring(breadcrumb.url.length-1) == '/'||breadcrumb.label.title&&last"
+        [ngClass]="{active: last}">
+      <a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
+      <span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
+    </li>
+  </ng-template>`
+})
+export class BreadcrumbsComponent implements OnInit {
+  breadcrumbs: Array<Object>;
+  constructor(private router: Router, private route: ActivatedRoute) {}
+  ngOnInit(): void {
+    this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
+      this.breadcrumbs = [];
+      let currentRoute = this.route.root,
+      url = '';
+      do {
+        const childrenRoutes = currentRoute.children;
+        currentRoute = null;
+        childrenRoutes.forEach(route => {
+          if (route.outlet === 'primary') {
+            const routeSnapshot = route.snapshot;
+            url += '/' + routeSnapshot.url.map(segment => segment.path).join('/');
+            this.breadcrumbs.push({
+              label: route.snapshot.data,
+              url:   url
+            });
+            currentRoute = route;
+          }
+        });
+      } while (currentRoute);
+    });
+  }
+}

src/app/shared/nav-dropdown.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, HostListener, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[appNavDropdown]'
+})
+export class NavDropdownDirective {
+
+  constructor(private el: ElementRef) { }
+
+  toggle() {
+    this.el.nativeElement.classList.toggle('open');
+  }
+}
+
+/**
+* Allows the dropdown to be toggled via click.
+*/
+@Directive({
+  selector: '[appNavDropdownToggle]'
+})
+export class NavDropdownToggleDirective {
+  constructor(private dropdown: NavDropdownDirective) {}
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    this.dropdown.toggle();
+  }
+}
+
+export const NAV_DROPDOWN_DIRECTIVES = [NavDropdownDirective, NavDropdownToggleDirective];

src/app/shared/sidebar.directive.ts

@@ -0,0 +1,92 @@
+import { Directive, HostListener } from '@angular/core';
+
+/**
+* Allows the sidebar to be toggled via click.
+*/
+@Directive({
+  selector: '[appSidebarToggler]'
+})
+export class SidebarToggleDirective {
+  constructor() { }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('sidebar-hidden');
+  }
+}
+
+@Directive({
+  selector: '[appSidebarMinimizer]'
+})
+export class SidebarMinimizeDirective {
+  constructor() { }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('sidebar-minimized');
+  }
+}
+
+@Directive({
+  selector: '[appMobileSidebarToggler]'
+})
+export class MobileSidebarToggleDirective {
+  constructor() { }
+
+  // Check if element has class
+  private hasClass(target: any, elementClassName: string) {
+    return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
+  }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('sidebar-mobile-show');
+  }
+}
+
+/**
+* Allows the off-canvas sidebar to be closed via click.
+*/
+@Directive({
+  selector: '[appSidebarClose]'
+})
+export class SidebarOffCanvasCloseDirective {
+  constructor() { }
+
+  // Check if element has class
+  private hasClass(target: any, elementClassName: string) {
+    return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
+  }
+
+  // Toggle element class
+  private toggleClass(elem: any, elementClassName: string) {
+    let newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
+    if (this.hasClass(elem, elementClassName)) {
+      while (newClass.indexOf(' ' + elementClassName + ' ') >= 0 ) {
+        newClass = newClass.replace( ' ' + elementClassName + ' ' , ' ' );
+      }
+      elem.className = newClass.replace(/^\s+|\s+$/g, '');
+    } else {
+      elem.className += ' ' + elementClassName;
+    }
+  }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+
+    if (this.hasClass(document.querySelector('body'), 'sidebar-off-canvas')) {
+      this.toggleClass(document.querySelector('body'), 'sidebar-opened');
+    }
+  }
+}
+
+export const SIDEBAR_TOGGLE_DIRECTIVES = [
+    SidebarToggleDirective,
+    SidebarMinimizeDirective,
+    SidebarOffCanvasCloseDirective,
+    MobileSidebarToggleDirective
+];