fix(card): fix elevation with value 0

src/app/docs/components/card-demo/card-demo-basic/card-demo-basic.component.html

@@ -1 +1 @@
-<ly-card>Simple card</ly-card>
+<ly-card [elevation]="0">Simple card</ly-card>

src/lib/card/card.directive.ts

@@ -1,11 +1,24 @@
 import { Directive, Renderer2, ElementRef, Input, OnInit } from '@angular/core';
-import { LyTheme2, shadowBuilder } from '@alyle/ui';
+import { LyTheme2, shadowBuilder, defaultEntry } from '@alyle/ui';
+
+const DEFAULT_ELEVATION = 2;
 
 @Directive({
   selector: 'ly-card'
 })
 export class LyCard implements OnInit {
-  @Input() elevation: any;
+  private _elevation: string | number;
+  private _elevationClass: string;
+  @Input()
+  set elevation(val: string | number) {
+    if (this.elevation !== val) {
+      const newClass = this._createElevationClass(val);
+      this._elevationClass = this.styler.updateClass(this.elementRef.nativeElement, this.renderer, newClass, this._elevationClass);
+    }
+  }
+  get elevation() {
+    return this._elevation;
+  }
 
   constructor(
     private styler: LyTheme2,
@@ -14,8 +27,16 @@ export class LyCard implements OnInit {
   ) { }
 
   ngOnInit() {
-    const newClass = this.styler.setUpStyleSecondary<any>(
-      'k-card',
+    if (this.elevation === void 0) {
+      this.elevation = DEFAULT_ELEVATION;
+    }
+  }
+
+  private _createElevationClass(val: string | number) {
+    this._elevation = defaultEntry(val, DEFAULT_ELEVATION);
+    console.log(this._elevation);
+    return this.styler.setUpStyleSecondary<any>(
+      `k-card-e:${this.elevation}`,
       theme => (
         `background-color:${theme.background.primary};` +
         `display:block;` +
@@ -25,7 +46,5 @@ export class LyCard implements OnInit {
         `${shadowBuilder(this.elevation)}`
       )
     );
-    this.renderer.addClass(this.elementRef.nativeElement, newClass);
   }
-
 }

src/lib/public_api.ts

@@ -6,7 +6,6 @@ export * from './src/parents';
 export * from './src/alyle-config-service';
 export * from './src/root.service';
 export * from './src/platform/index';
-// export * from './src/color-tranformation';
 export * from './src/theme/common.module';
 export * from './src/minimal/index';
 export * from './src/dom/dom.service';

src/lib/src/minimal/default-entry.ts

@@ -0,0 +1,3 @@
+export function defaultEntry(value: string | number, defaultValue: string | number) {
+  return value !== '' && value !== void 0 ? value : defaultValue;
+}

src/lib/src/minimal/index.ts

@@ -1,3 +1,4 @@
 export * from './common';
 export * from './el/offset';
 export * from './is-boolean';
+export * from './default-entry';

src/lib/src/shadow.ts

@@ -31,7 +31,7 @@ export const Shadows = [
   [0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8],
   [0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8]
 ];
-export function shadowBuilder(elevation: number = 2, color = '#000') {
+export function shadowBuilder(elevation: number | string = 2, color = '#000') {
   const Color = chroma(color);
   const colors = [
     Color.alpha(shadowKeyUmbraOpacity).css(),

src/lib/src/theme/theme2.service.ts

@@ -48,6 +48,10 @@ export class LyTheme2 {
   updateClassName(element: any, renderer: Renderer2, newClassname: string, oldClassname?: string) {
     this.core.updateClassName(element, renderer, newClassname, oldClassname);
   }
+  updateClass(element: any, renderer: Renderer2, newClass: string, oldClass?: string) {
+    this.updateClassName(element, renderer, newClass, oldClass);
+    return oldClass;
+  }
   setTheme(nam: string) {
     this.config = this.core.get(nam);
     this._styleMap.forEach((dataStyle, key) => {