1.1.0 snapshot

src/renderer/app/layout/layout.routing.ts

@@ -40,6 +40,18 @@ const LAYOUT_ROUTES: Routes = [
           {
             path: 'scrollbar',
             loadChildren: () => import('../pages/component/scrollbar/scrollbar.module').then(m => m.ScrollbarModule)
+          },
+          {
+            path: 'datepicker',
+            loadChildren: () => import('../pages/component/datepicker/datepicker.module').then(m => m.DatepickerModule)
+          },
+          {
+            path: 'carousel',
+            loadChildren: () => import('../pages/component/carousel/carousel.module').then(m => m.CarouselComponentModule)
+          },
+          {
+            path: 'progressbar',
+            loadChildren: () => import('../pages/component/progressbar/progressbar.module').then(m => m.ProgressbarComponentModule)
           }
         ]
       },

src/renderer/app/layout/navigation/navigation.component.html

@@ -25,6 +25,15 @@
         <li routerLinkActive="navigation__active">
           <a [routerLink]="['/component/scrollbar']"><i class="fa fa-bars"></i> Scrollbar</a>
         </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/component/datepicker']"><i class="fa fa-clock-o"></i> Datepicker</a>
+        </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/component/carousel']"><i class="fa fa-calculator"></i> Carousel</a>
+        </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/component/progressbar']"><i class="fa fa-pagelines"></i> Progressbar</a>
+        </li>
       </ul>
     </li>
     <li routerLinkActive="navigation__sub--active" class="navigation__sub">

src/renderer/app/pages/component/carousel/carousel.component.html

@@ -0,0 +1,30 @@
+<section class="content--row">
+  <header class="content__title">
+    <h1>Carousel</h1>
+    <small>This template is built using <code>ngx-bootstrap/carousel</code> and provides some usage examples</small>
+  </header>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Default</h4>
+      <carousel>
+        <slide *ngFor="let img of defaultCarousels">
+          <img src="{{img.url}}" alt="{{img.title}}" style="height: 200px;">
+        </slide>
+      </carousel>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Description</h4>
+      <carousel>
+        <slide *ngFor="let img of defaultCarousels">
+          <img src="{{img.url}}" alt="{{img.title}}" style="height: 200px;">
+          <div class="carousel-caption">
+            <h3>{{img.title}}</h3>
+            <p>{{img.description}}</p>
+          </div>
+        </slide>
+      </carousel>
+    </div>
+  </div>
+</section>

src/renderer/app/pages/component/carousel/carousel.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { CarouselService } from '@renderer/services/component/carousel.service';
+
+@Component({
+  selector: 'app-component-carousel',
+  templateUrl: './carousel.component.html'
+})
+export class CarouselComponent implements OnInit {
+  public defaultCarousels: any = [];
+
+  constructor(private carouselService: CarouselService) {
+    this.defaultCarousels = this.carouselService.builderCarousels();
+  }
+
+  ngOnInit() {
+  }
+}

src/renderer/app/pages/component/carousel/carousel.module.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { CarouselModule } from 'ngx-bootstrap/carousel';
+import { CarouselComponent } from './carousel.component';
+import { CarouselService } from '@renderer/services/component/carousel.service';
+
+const CAROUSEL_ROUTES = [
+  {path: '', component: CarouselComponent}
+];
+
+@NgModule({
+  declarations: [
+    CarouselComponent
+  ],
+  imports: [
+    CommonModule,
+    BsDropdownModule.forRoot(),
+    CarouselModule.forRoot(),
+    RouterModule.forChild(CAROUSEL_ROUTES)
+  ],
+  providers: [
+    CarouselService
+  ]
+})
+export class CarouselComponentModule {
+}

src/renderer/app/pages/component/datepicker/datepicker.component.html

@@ -0,0 +1,53 @@
+<section class="content--row">
+  <header class="content__title">
+    <h1>Datepicker</h1>
+    <small>This template is built using <code>ngx-bootstrap/datepicker</code> and provides some usage examples</small>
+  </header>
+  <div class="card-demo">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Basic Datepicker</h4>
+        <div class="form-group">
+          <input type="text" class="form-control" [minDate]="minDate" [maxDate]="maxDate" #dp="bsDatepicker"
+                 bsDatepicker [(bsValue)]="bsValue">
+        </div>
+        <div class="form-group">
+          <button class="btn btn-success" (click)="dp.toggle()">Basic Datepicker</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="card-demo">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Range Datepicker</h4>
+        <div class="form-group">
+          <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker>
+        </div>
+        <div class="form-group">
+          <button class="btn btn-success" (click)="drp.toggle()">Range Datepicker</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="card-demo">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Theme Datepicker</h4>
+        <div class="form-group">
+          <select class="custom-select form-control " [(ngModel)]="colorTheme" (ngModelChange)="applyTheme(dpTheme);">
+            <option *ngFor="let theme of colorThemes" value="{{theme}}">{{theme}}</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <div class="input-group">
+            <input type="text" class="form-control" bsDatepicker #dpTheme="bsDatepicker" [bsConfig]="bsConfig">
+            <div class="input-group-btn">
+              <button class="btn btn-success" (click)="dpTheme.show() ">Theme Datepicker</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

src/renderer/app/pages/component/datepicker/datepicker.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
+import { DatepickerService } from '@renderer/services/component/datepicker.service';
+
+@Component({
+  selector: 'app-component-datepicker',
+  templateUrl: './datepicker.component.html'
+})
+export class DatepickerComponent implements OnInit {
+  minDate = new Date(2017, 5, 10);
+  maxDate = new Date(2018, 9, 15);
+  bsValue: Date = new Date();
+  colorTheme = 'theme-green';
+  colorThemes = [];
+  bsConfig: Partial<BsDatepickerConfig>;
+
+  constructor(private datepickerService: DatepickerService) {
+    this.colorThemes = this.datepickerService.themes;
+  }
+
+  applyTheme(pop: any) {
+    this.bsConfig = Object.assign({}, {containerClass: this.colorTheme});
+    setTimeout(() => {
+      pop.show();
+    });
+  }
+
+  ngOnInit() {
+  }
+}

src/renderer/app/pages/component/datepicker/datepicker.module.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { FormsModule } from '@angular/forms';
+import { DatepickerComponent } from './datepicker.component';
+import { DatepickerService } from '@renderer/services/component/datepicker.service';
+
+const DATEPICKER_ROUTES = [
+  {path: '', component: DatepickerComponent}
+];
+
+@NgModule({
+  declarations: [
+    DatepickerComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    BsDropdownModule.forRoot(),
+    BsDatepickerModule.forRoot(),
+    RouterModule.forChild(DATEPICKER_ROUTES)
+  ],
+  providers: [
+    DatepickerService
+  ]
+})
+export class DatepickerModule {
+}

src/renderer/app/pages/component/progressbar/progressbar.component.html

@@ -0,0 +1,43 @@
+<section class="content--row">
+  <header class="content__title">
+    <h1>Progressbar</h1>
+    <small>This template is built using <code>ngx-bootstrap/progressbar</code> and provides some usage examples</small>
+  </header>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Static Progressbar</h4>
+      <progressbar class="progress" value="0" max="100"></progressbar>
+      <br>
+      <progressbar class="progress" value="25" max="100"></progressbar>
+      <br>
+      <progressbar class="progress" value="50" max="100"></progressbar>
+      <br>
+      <progressbar class="progress" value="75" max="100"></progressbar>
+      <br>
+      <progressbar class="progress" value="100" max="100"></progressbar>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Theme Progressbar</h4>
+      <h6 class="card-subtitle">Theme
+        <code>type</code> property implementation adds a topic to the Progressbar</h6>
+      <progressbar class="progress" value="25" max="100" [type]="'success'"></progressbar>
+      <br>
+      <progressbar class="progress" value="50" max="100" [type]="'warning'"></progressbar>
+      <br>
+      <progressbar class="progress" value="75" max="100" type="info"></progressbar>
+      <br>
+      <progressbar class="progress" value="100" max="100" type="danger"></progressbar>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Dynamic Progressbar</h4>
+      <progressbar class="progress" [value]="stacked" max="100"></progressbar>
+      <hr>
+      <br>
+      <button type="button" class="btn btn-primary" (click)="randomStacked()">Click</button>
+    </div>
+  </div>
+</section>

src/renderer/app/pages/component/progressbar/progressbar.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-component-progressbar',
+  templateUrl: './progressbar.component.html'
+})
+export class ProgressbarComponent implements OnInit {
+  public type: string;
+  public stacked: any[] = [];
+
+  constructor() {
+    this.randomStacked();
+  }
+
+  public randomStacked(): void {
+    const types = ['success', 'info', 'warning', 'danger'];
+    this.stacked = [];
+    const n = Math.floor((Math.random() * 4) + 1);
+    for (let i = 0; i < n; i++) {
+      const index = Math.floor((Math.random() * 4));
+      const value = Math.floor((Math.random() * 27) + 3);
+      this.stacked.push({
+        value,
+        type: types[index]
+      });
+    }
+  }
+
+  ngOnInit() {
+  }
+}

src/renderer/app/pages/component/progressbar/progressbar.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
+import { ProgressbarComponent } from './progressbar.component';
+
+const PROGRESSBAR_ROUTES = [
+  {path: '', component: ProgressbarComponent}
+];
+
+@NgModule({
+  declarations: [
+    ProgressbarComponent
+  ],
+  imports: [
+    CommonModule,
+    BsDropdownModule.forRoot(),
+    ProgressbarModule.forRoot(),
+    RouterModule.forChild(PROGRESSBAR_ROUTES)
+  ]
+})
+export class ProgressbarComponentModule {
+}

src/renderer/services/component/carousel.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CarouselService {
+  constructor() {
+  }
+
+  builderCarousels() {
+    const carousels = [
+      {
+        image: 'https://cdn.pixabay.com/photo/2016/02/11/14/59/fruits-1193727_1280.png',
+        title: 'fruits',
+        description: 'Description'
+      },
+      {
+        url: 'https://cdn.pixabay.com/photo/2016/09/05/18/54/texture-1647380_1280.jpg',
+        title: 'texture',
+        description: 'Description'
+      },
+      {
+        image: 'https://cdn.pixabay.com/photo/2018/05/12/19/20/mosaic-3394375_1280.jpg',
+        title: 'mosaic',
+        description: 'Description'
+      }
+    ];
+    return carousels;
+  }
+}

src/renderer/services/component/datepicker.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DatepickerService {
+  public themes: any = [
+    'theme-default',
+    'theme-green',
+    'theme-blue',
+    'theme-dark-blue',
+    'theme-red',
+    'theme-orange'
+  ];
+
+  constructor() {
+  }
+}