feat(docs): update docs

angular.json

@@ -6,7 +6,7 @@
     "alyle-ui": {
       "root": "",
       "projectType": "application",
-      "prefix": "app",
+      "prefix": "aui",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",

src/app/app.module.ts

@@ -26,6 +26,7 @@ import { FlexDemoModule } from './components/flex-demo/flex-demo.module';
 import { GridDemoModule } from './components/grid-demo/grid-demo.module';
 import { ResponsiveDemoModule } from './components/responsive-demo/responsive-demo.module';
 import { TitleComponent } from './document/title/title.component';
+import { InstallationComponent } from '@docs/getting-started/installation/installation.component';
 
 const Quepal = {
   default: `linear-gradient(135deg,#11998e 0%,#38ef7d 100%)`,
@@ -62,7 +63,9 @@ export class MyCustomTheme extends LyThemeConfig {
 @NgModule({
   declarations: [
     AppComponent,
-    TitleComponent
+    TitleComponent,
+    /** Getting started */
+    InstallationComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({appId: '@alyle/ui'}),
@@ -86,7 +89,7 @@ export class MyCustomTheme extends LyThemeConfig {
     LyRippleModule,
     PrismModule,
     AppRoutingModule,
-    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
+    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
   ],
   providers: [
     RoutesAppService,

src/app/app.routing.ts

@@ -1,18 +1,26 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { environment } from 'environments/environment';
 import { HomeModule } from './home/home.module';
+import { InstallationComponent } from '@docs/getting-started/installation/installation.component';
 
 const routes: Routes = [
-  /** Get Started */
-  { path: 'get-started/install', loadChildren: './components/get-started/get-started.module#GetStartedModule' },
   /** Customization */
   { path: 'customization/theming', loadChildren: './components/theming/theming.module#ThemingModule' },
   { path: 'customization/multiple-themes', loadChildren: './components/multiple-themes/multiple-themes.module#MultipleThemesModule' },
   { path: 'customization/bg-color', loadChildren: './components/bg-color-demo/bg-color-demo.module#BgColorDemoModule' },
   /** Components */
   { path: 'components', loadChildren: './components/index#ComponentsModule' },
   { path: 'component', redirectTo: 'components' },
+  { path: 'get-started/install', redirectTo: 'getting-started/installation' },
+  { path: 'getting-started', redirectTo: 'getting-started/installation' },
+  {
+    path: 'getting-started',
+    children: [
+      {
+        path: 'installation', component: InstallationComponent
+      }
+    ]
+  }
 ];
 
 @NgModule({
@@ -23,6 +31,8 @@ const routes: Routes = [
       initialNavigation: 'enabled'
     })
   ],
-  exports: [RouterModule]
+  exports: [
+    RouterModule
+  ]
 })
 export class AppRoutingModule { }

src/app/components/bg-color-demo/bg-color-demo/bg-color-demo.component.html

@@ -1,9 +1,8 @@
-<h2>bg & color</h2>
 <p>
   First and important, import <span prism language="typescript" code="LyCommonModule"></span> in your module
 </p>
 <prism language="typescript" [code]="install"></prism>
 <h4>Demo</h4>
-<demo-view>
+<demo-view path="components/bg-color-demo/bg-color-demo-01">
   <bg-color-demo-01></bg-color-demo-01>
 </demo-view>

src/app/components/button-demo/button-demo/button-demo.component.html

@@ -1,7 +1,7 @@
-<demo-view viewLabel="Types">
+<demo-view path="components/button-demo/example-01">
   <example-01></example-01>
 </demo-view>
 <h2>With icons</h2>
-<demo-view>
+<demo-view path="components/button-demo/example-02">
   <example-02></example-02>
 </demo-view>

src/app/components/carousel-demo/carousel-demo/carousel-demo.component.html

@@ -1,3 +1,3 @@
-<demo-view viewLabel="carousel-example-01">
+<demo-view path="components/carousel-demo/carousel-example-01">
   <carousel-example-01></carousel-example-01>
 </demo-view>

src/app/components/components/components.component.ts

@@ -18,17 +18,17 @@ export class ComponentsComponent implements OnInit {
     private titleService: Title,
     private meta: Meta
   ) {
-    this.router.events.subscribe(event => {
-      if (event instanceof NavigationEnd) {
-        this.routeName = event.urlAfterRedirects.replace(/\//g, '').replace('component', '');
-        this.routesApp.componentState = this.routeName;
-        if (this.routeName) {
-          this.titleService.setTitle(`${this.routeName} - Alyle UI`);
-        } else {
-          this.titleService.setTitle(`Alyle UI`);
-        }
-      }
-    });
+    // this.router.events.subscribe(event => {
+    //   if (event instanceof NavigationEnd) {
+    //     this.routeName = event.urlAfterRedirects.replace(/\//g, '').replace('component', '');
+    //     this.routesApp.componentState = this.routeName;
+    //     if (this.routeName) {
+    //       this.titleService.setTitle(`${this.routeName} - Alyle UI`);
+    //     } else {
+    //       this.titleService.setTitle(`Alyle UI`);
+    //     }
+    //   }
+    // });
   }
 
   ngOnInit() {

src/app/components/drawer-demo/drawer-demo/drawer-demo.component.html

@@ -1,3 +1,3 @@
-<demo-view viewLabel="drawer-demo-01">
+<demo-view path="components/drawer-demo/drawer-demo-01">
   <drawer-demo-01></drawer-demo-01>
 </demo-view>

src/app/components/flex-demo/flex-demo.component.html

@@ -1,3 +1,3 @@
-<demo-view viewLabel="flex-demo-one">
+<demo-view path="components/flex-demo/flex-demo-one">
   <flex-demo-one></flex-demo-one>
 </demo-view>

src/app/components/grid-demo/grid-demo.component.html

@@ -3,11 +3,11 @@
 </p>
 
 <h2>Basic grid</h2>
-<demo-view>
+<demo-view path="components/grid-demo/grid-demo-basic">
   <grid-demo-basic></grid-demo-basic>
 </demo-view>
 
 <h2>Responsive grid</h2>
-<demo-view>
+<demo-view path="components/grid-demo/grid-demo-responsive">
   <grid-demo-responsive></grid-demo-responsive>
 </demo-view>

src/app/components/icon-button-demo/icon-button-demo/icon-button-demo.component.html

@@ -1,3 +1,3 @@
-<demo-view viewLabel="icon-button-example-01">
+<demo-view path="components/icon-button/icon-button-example-01">
   <icon-button-example-01></icon-button-example-01>
 </demo-view>

src/app/components/input-demo/input-demo/input-demo.component.html

@@ -1,20 +1,20 @@
 <h2>Minimal</h2>
-<demo-view>
+<demo-view path="components/input-demo/input-demo-example-01">
   <input-demo-example-01></input-demo-example-01>
 </demo-view>
 <h2>Default value</h2>
-<demo-view>
+<demo-view path="components/input-demo/input-demo-example-02">
   <input-demo-example-02></input-demo-example-02>
 </demo-view>
 <h2>With icons</h2>
-<demo-view>
+<demo-view path="components/input-demo/input-demo-example-03">
   <input-demo-example-03></input-demo-example-03>
 </demo-view>
 <h2>Error State</h2>
-<demo-view>
+<demo-view path="components/input-demo/input-example-04">
   <input-example-04></input-example-04>
 </demo-view>
 <h2>Experiments</h2>
-<demo-view>
+<demo-view path="components/input-demo/input-example-05">
   <input-example-05></input-example-05>
 </demo-view>

src/app/components/menu-demo/menu-demo/menu-demo.component.html

@@ -1,7 +1,7 @@
-<demo-view>
+<demo-view path="components/menu-demo/menu-demo-01">
   <menu-demo-01></menu-demo-01>
 </demo-view>
 <h2>Position</h2>
-<demo-view>
+<demo-view path="components/menu-demo/menu-demo-02">
   <menu-demo-02></menu-demo-02>
 </demo-view>

src/app/components/multiple-themes/multiple-themes-demo-01/child-theme/child-theme.module.ts

@@ -1,15 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { ChildThemeRoutingModule } from './child-theme-routing.module';
 import { ChildThemeComponent } from './child-theme.component';
-import { AlyleUIModule, LyCommonModule } from '@alyle/ui';
+import { LyCommonModule } from '@alyle/ui';
 
 @NgModule({
   imports: [
     CommonModule,
-    LyCommonModule,
-    ChildThemeRoutingModule
+    LyCommonModule
   ],
   declarations: [ChildThemeComponent]
 })

src/app/components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.component.css

@@ -0,0 +1,3 @@
+.container {
+  padding: 1em;
+}