fix(theme): rename styleName to withClass directive

BREACKING CHANGES:

update `styleName` to `withClass`

before:

```html
<element [styleName]="Header">
```

after:

```html
<element [withClass]="classes.header">
```

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div>
-  <ly-toolbar styleName="Header" bg="primary" raised>
+  <ly-toolbar [withClass]="classes.header" bg="primary" raised>
     <button ly-icon-button (click)="nav.toggle()" class="material-icons">
       menu
     </button>
@@ -10,20 +10,20 @@
     </ly-toolbar-item>
     <span lyHide="XSmall" class="version">v{{ version }}</span>
     <div [style.flex]="1"></div>
-    <button ly-icon-button size="24px" (click)="changeScheme()">
+    <button ly-icon-button size="24px" (click)="changeTheme()">
       <ly-icon *ngIf="mode" src="assets/svg/theme/sun" [style.font-size.px]="36"></ly-icon>
       <ly-icon *ngIf="!mode" src="assets/svg/theme/moon" [style.font-size.px]="36"></ly-icon>
     </button>
     <a ly-icon-button target="_blank" rel="noopener" href="https://github.com/A-l-y-l-e/Alyle-UI" size="24px">
       <ly-icon src="assets/svg/social/social-color-1_logo-github"></ly-icon>
     </a>
   </ly-toolbar>
-  <ly-drawer-container styleName="DrawerContainer">
-    <ly-drawer [config]="{width: 230}" bg="background:primary" #nav="lyDrawer" [opened]="router.url !== '/'" [mode]="'side'" #_left class="items" styleName="Drawer">
-      <ul *ngFor="let category of routesComponents" styleName="DrawerUl">
+  <ly-drawer-container [withClass]="classes.drawerContainer">
+    <ly-drawer [config]="{width: 230}" bg="background:primary" #nav="lyDrawer" [opened]="router.url !== '/'" [mode]="'side'" #_left class="items" [withClass]="classes.drawer">
+      <ul *ngFor="let category of routesComponents" [withClass]="classes.drawerUl">
         <span lyTyp="subheading" gutterBottom>{{ category.name }}</span>
         <li *ngFor="let component of category.routes">
-          <a styleName="DrawerButton" class="nav-button" ly-button [routerLinkActive]="classes.OnLinkActive" [routerLink]="[category.route, component.route]">
+          <a [withClass]="classes.drawerButton" class="nav-button" ly-button [routerLinkActive]="classes.onLinkActive" [routerLink]="[category.route, component.route]">
             <span>{{ component.name }}</span>
             <ly-icon *ngIf="component.status" icon="Experiment"></ly-icon>
           </a>

src/app/app.component.ts

@@ -1,22 +1,52 @@
-import { Component, VERSION, ChangeDetectionStrategy, OnDestroy, OnInit, Renderer2, ElementRef, Inject} from '@angular/core';
+import { Component, VERSION, ChangeDetectionStrategy, Renderer2, Inject} from '@angular/core';
 import { Router } from '@angular/router';
 import { AUI_VERSION, LyTheme2 } from '@alyle/ui';
 import { RoutesAppService } from './components/routes-app.service';
 import { LyIconService } from '@alyle/ui/icon';
-import { MinimaLight } from '@alyle/ui/themes/minima';
 import { DOCUMENT } from '@angular/platform-browser';
-import { AppService } from './app.service';
 
-const linkActiveStyle = theme => (
-  `color: ${theme.primary.default} !important;` +
-  `border-left: 3px solid !important;`
-);
-
-const rootStyle = theme => (
-  `background-color:${theme.background.default};` +
-  `color:${theme.text.default};` +
-  `font-family:${theme.typography.fontFamily};`
-);
+const styles = theme => {
+  const onLinkActive = {
+    color: theme.primary.default,
+    borderLeft: '3px solid'
+  };
+  return {
+    body: {
+      backgroundColor: theme.background.default,
+      color: theme.text.default,
+      'font-family': theme.typography.fontFamily
+    },
+    header: {
+      position: 'fixed',
+      'z-index': 11,
+      width: '100%'
+    },
+    drawerContainer: {
+      height: 'calc(100% - 64px)'
+    },
+    drawer: {
+      width: '230px',
+      height: 'calc(100% - 64px)',
+      bottom: 0,
+      padding: '1rem 0'
+    },
+    drawerUl: {
+      overflow: 'hidden',
+      position: 'relative',
+      'list-style': 'none',
+      padding: '2rem 1.8rem',
+      margin: 0,
+      'border-bottom': '1px solid rgba(0, 0, 0, 0.11)'
+    },
+    drawerButton: {
+      color: '#5f6368',
+      'font-weight': 400,
+      'border-left': '3px solid transparent',
+      '&:hover': onLinkActive
+    },
+    onLinkActive,
+  };
+};
 
 @Component({
   selector: 'app-root',
@@ -25,8 +55,16 @@ const rootStyle = theme => (
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent implements OnInit {
-  classes = this.theme.classes;
+export class AppComponent {
+  classes: {
+    body: string;
+    header: string;
+    drawerContainer: string;
+    drawer: string;
+    drawerUl: string;
+    drawerButton: string;
+    onLinkActive: string;
+  };
   linkActive;
   navMenu;
   routesComponents: any;
@@ -37,50 +75,24 @@ export class AppComponent implements OnInit {
 
   constructor(
     @Inject(DOCUMENT) _document: any,
-    appService: AppService,
     public router: Router,
     public routesApp: RoutesAppService,
     private theme: LyTheme2,
     renderer: Renderer2,
-    elementRef: ElementRef,
     iconService: LyIconService
   ) {
-    renderer.addClass((_document as Document).body, this.theme.setUpStyle('body', rootStyle));
+    this.classes = this.theme.addStyleSheet(styles);
+    renderer.addClass((_document as Document).body, this.classes.body);
     iconService.setSvg('Heart', 'assets/svg/Heart');
     iconService.setSvg('Experiment', 'assets/svg/Experiment');
     iconService.setSvg('Radiation', 'assets/svg/radiation');
     this.routesComponents = this.routesApp.routesApp;
   }
-  changeScheme() {
+  changeTheme() {
     this.mode = !this.mode;
     const name = this.mode ? 'minima-light' : 'minima-dark';
     console.log(name);
     this.theme.setTheme(name);
   }
 
-  ngOnInit() {
-    this.linkActive = this.theme.setUpStyle<MinimaLight>(
-      'nav-activatedRoute',
-      linkActiveStyle
-    );
-    this.navMenu = this.theme.setUpStyle<MinimaLight>(
-      'nav-ul',
-      {
-        // '': () => (
-        //   `overflow: hidden;` +
-        //   `position: relative;` +
-        //   `list-style: none;` +
-        //   `padding: 2rem 1.8rem;` +
-        //   `margin: 0;` +
-        //   `border-bottom: 1px solid rgba(0, 0, 0, 0.11)`
-        // ),
-        // ' a': () => (
-        //   `color: #5f6368;` +
-        //   `font-weight: 400;` +
-        //   `border-left: 3px solid transparent;`
-        // ),
-        // ' a:hover': linkActiveStyle
-      }
-    );
-  }
 }

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { LyDrawerModule } from '@alyle/ui/drawer';
 import { LyToolbarModule } from '@alyle/ui/toolbar';
 import { LyMenuModule } from '@alyle/ui/menu';
 import { LyIconButtonModule } from '@alyle/ui/icon-button';
-import { LyCommonModule, LyThemeConfig, LY_THEME_CONFIG, LyHammerGestureConfig, LyThemeModule } from '@alyle/ui';
+import { LyCommonModule, LyThemeConfig, LY_THEME_CONFIG, LyHammerGestureConfig, LyThemeModule, LY_THEME_NAME } from '@alyle/ui';
 import { ResponsiveModule, LY_MEDIA_QUERIES, Breakpoints } from '@alyle/ui/responsive';
 import { LyButtonModule } from '@alyle/ui/button';
 import { LyRippleModule } from '@alyle/ui/ripple';
@@ -36,6 +36,7 @@ import { TypographyDemoBasicModule } from '@docs/components/typography-demo/typo
 import { MultipleThemesComponent } from './components/multiple-themes/multiple-themes.component';
 import { MultipleThemesDemo01Module } from './components/multiple-themes/multiple-themes-demo-01/multiple-themes-demo-01.module';
 import { DocsModule } from '@docs/docs.module';
+import { LyTabsModule } from '@alyle/ui/tabs';
 
 const Quepal = {
   default: `linear-gradient(135deg,#11998e 0%,#38ef7d 100%)`,
@@ -111,9 +112,11 @@ export class MyCustomTheme extends LyThemeConfig {
     DocsModule,
     AppRoutingModule,
     ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
+    LyTabsModule
   ],
   providers: [
     RoutesAppService,
+    { provide: LY_THEME_NAME, useValue: 'minima-light' },
     { provide: LY_THEME_CONFIG, useClass: MyCustomTheme },
     { provide: LY_MEDIA_QUERIES, useValue: Breakpoints },
     { provide: HAMMER_GESTURE_CONFIG, useClass: LyHammerGestureConfig }

src/lib/public_api.ts

@@ -19,7 +19,7 @@ export * from './src/theme/core-theme.service';
 export * from './src/theme/theme-config';
 export * from './src/theme/theme.directive';
 export * from './src/theme/theme2.service';
-export * from './src/theme/theme.module';
+export * from './src/theme.module';
 export * from './src/styles/core-styles';
 export * from './src/undefined';
 export * from './src/media/invert-media-query';