feat(card): Add [mdc-card-button] + refactoring (#90)

* refactor(card): External directives merged into card.component file

* feat(card): Add [mdc-card-button] to card component

* refactor(card): Remove [darkTheme] property.

BREAKING CHANGE: Property [cardAction] of mdc-button was removed, you'll need to use
mdc-card-button. Please update your code accordingly.

BREAKING CHANGE: [darkTheme] property was removed from Card. Use [mdc-theme-dark] instead.

Author: trimox

src/lib/button/button.component.ts

@@ -4,9 +4,7 @@ import {
   HostBinding,
   HostListener,
   Input,
-  OnChanges,
   Renderer2,
-  SimpleChange,
   ViewEncapsulation
 } from '@angular/core';
 import { Ripple } from '.././ripple/ripple.directive';
@@ -20,30 +18,29 @@ import { isSpaceKey } from '../common/events';
   encapsulation: ViewEncapsulation.None,
   providers: [Ripple]
 })
-export class ButtonComponent implements OnChanges {
-  private _disabled: boolean = false;
+export class ButtonComponent {
+  private disabled_: boolean = false;
 
   @Input() type: string;
   @Input() raised: boolean;
   @Input() primary: boolean;
   @Input() dense: boolean;
   @Input() compact: boolean;
   @Input() accent: boolean;
-  @Input() cardAction: boolean;
   @Input()
-  get disabled() { return this._disabled; }
+  get disabled() { return this.disabled_; }
   set disabled(value) {
-    this._disabled = toBoolean(value);
-    if (this._disabled) {
+    this.disabled_ = toBoolean(value);
+    if (this.disabled_) {
       this.renderer.setAttribute(this.elementRef.nativeElement, "disabled", 'true');
     } else {
       this.renderer.removeAttribute(this.elementRef.nativeElement, "disabled");
     }
   }
   @Input()
-  get disableRipple() { return this._ripple.disabled; }
+  get disableRipple() { return this.ripple.disabled; }
   set disableRipple(value) {
-    this._ripple.disabled = toBoolean(value);
+    this.ripple.disabled = toBoolean(value);
   }
   @HostBinding('tabindex') get tabindex(): number {
     return this.disabled ? -1 : 0;
@@ -67,9 +64,6 @@ export class ButtonComponent implements OnChanges {
   @HostBinding('class.mdc-button--compact') get classCompact(): string {
     return this.compact ? 'mdc-button--compact' : '';
   }
-  @HostBinding('class.mdc-card__action') get classCardAction(): string {
-    return this.cardAction ? 'mdc-card__action' : '';
-  }
   @HostListener('keypress', ['$event']) onkeypress(evt) {
     this.handleKeyPress_(evt);
   }
@@ -80,33 +74,21 @@ export class ButtonComponent implements OnChanges {
   constructor(
     public renderer: Renderer2,
     public elementRef: ElementRef,
-    private _ripple: Ripple) {
-    this._ripple.init();
-  }
-
-  ngOnChanges(changes: { [key: string]: SimpleChange }) {
-    let change = changes['cardAction'];
-
-    if (change) {
-      if (!toBoolean(change.currentValue)) {
-        this.compact = false;
-      } else {
-        this.compact = true;
-      }
-    }
+    public ripple: Ripple) {
+    this.ripple.init();
   }
 
   private handleKeyPress_(keyboardEvent: KeyboardEvent) {
     let keyCode = keyboardEvent.keyCode;
     if (keyCode == KeyCodes.ENTER || isSpaceKey(keyboardEvent)) {
-      this._ripple.active = true;
+      this.ripple.active = true;
       if (keyCode != KeyCodes.ENTER) {
         keyboardEvent.preventDefault();
       }
     }
   }
 
   private handleBlur_(focusEvent: FocusEvent) {
-    this._ripple.active = false;
+    this.ripple.active = false;
   }
 }

src/lib/card/card-actions.directive.ts

@@ -1,19 +1,132 @@
 import {
+  AfterContentInit,
   Component,
+  ContentChildren,
+  Directive,
+  ElementRef,
   HostBinding,
+  Inject,
   Input,
+  QueryList,
+  Renderer2,
   ViewEncapsulation,
 } from '@angular/core';
+import { toBoolean } from '../common/boolean-property';
+
+import { Ripple } from '../ripple/ripple.directive';
+import { ButtonComponent } from '../button/button.component';
+
+@Directive({
+  selector: 'mdc-card-primary'
+})
+export class CardPrimaryDirective {
+  @HostBinding('class.mdc-card__primary') isHostClass = true;
+}
+
+@Component({
+  selector: 'mdc-card-horizontal',
+  template: '<ng-content select="mdc-card-primary, mdc-card-title, mdc-card-subtitle, [mdc-card-media-item], mdc-card-actions"></ng-content>',
+  encapsulation: ViewEncapsulation.None
+})
+export class CardHorizontalComponent {
+  @HostBinding('class.mdc-card__horizontal-block') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-card-title], mdc-card-title'
+})
+export class CardTitleDirective {
+  @Input() large: boolean = true;
+  @HostBinding('class.mdc-card__title') isHostClass = true;
+  @HostBinding('class.mdc-card__title--large') get classTitleLarge(): string {
+    return this.large ? 'mdc-card__title--large' : '';
+  }
+}
+
+@Directive({
+  selector: '[mdc-card-subtitle], mdc-card-subtitle'
+})
+export class CardSubtitleComponent {
+  @HostBinding('class.mdc-card__subtitle') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-card-supporting-text], mdc-card-supporting-text'
+})
+export class CardSupportingTextDirective {
+  @HostBinding('class.mdc-card__supporting-text') isHostClass = true;
+}
+
+@Directive({
+  selector: '[mdc-card-media-item]'
+})
+export class CardMediaItemDirective {
+  @Input() size: number;
+  @HostBinding('class.mdc-card__media-item') isHostClass = true;
+  @HostBinding('class.mdc-card__media-item--1dot5x') get classMediaItemOne(): string {
+    return this.size === 1 ? 'mdc-card__media-item--1x' : '';
+  }
+  @HostBinding('class.mdc-card__media-item--1dot5x') get classMediaItemOneDotFive(): string {
+    return this.size === 1.5 ? 'mdc-card__media-item--1dot5x' : '';
+  }
+  @HostBinding('class.mdc-card__media-item--2x') get classMediaItemTwo(): string {
+    return this.size === 2 ? 'mdc-card__media-item--2x' : '';
+  }
+  @HostBinding('class.mdc-card__media-item--3x') get classMediaItemThree(): string {
+    return this.size === 3 ? 'mdc-card__media-item--3x' : '';
+  }
+}
+
+@Component({
+  selector: 'mdc-card-media',
+  template: '<ng-content></ng-content>',
+  encapsulation: ViewEncapsulation.None
+})
+export class CardMediaComponent {
+  @HostBinding('class.mdc-card__media') isHostClass = true;
+}
+
+@Directive({
+  selector: 'mdc-card-actions'
+})
+export class CardActionsDirective {
+  @Input() vertical: boolean;
+  @HostBinding('class.mdc-card__actions') isHostClass = true;
+  @HostBinding('class.mdc-card__actions--vertical') get classCardActionVertical(): string {
+    return this.vertical ? 'mdc-card__actions--vertical' : '';
+  }
+}
+
+@Directive({
+  selector: 'button[mdc-card-button], a[mdc-card-button]',
+  providers: [Ripple]
+})
+export class CardActionButtonDirective extends ButtonComponent {
+  constructor(
+    @Inject(Renderer2) renderer: Renderer2,
+    @Inject(ElementRef) elementRef: ElementRef,
+    @Inject(Ripple) ripple: Ripple) {
+    super(renderer, elementRef, ripple);
+  }
+}
 
 @Component({
   selector: 'mdc-card',
   template: '<ng-content></ng-content>',
   encapsulation: ViewEncapsulation.None
 })
-export class CardComponent {
-  @Input() darkTheme: boolean;
+export class CardComponent implements AfterContentInit {
   @HostBinding('class.mdc-card') isHostClass = true;
-  @HostBinding('class.mdc-card--theme-dark') get classDarkTheme(): string {
-     return this.darkTheme ? 'mdc-card--theme-dark' : '';
+  @ContentChildren(CardActionButtonDirective, { descendants: true }) cardButtons: QueryList<CardActionButtonDirective>;
+
+  constructor(
+    private _renderer: Renderer2,
+    public elementRef: ElementRef) { }
+
+  ngAfterContentInit() {
+    this.cardButtons.forEach((_) => {
+      this._renderer.addClass(_.elementRef.nativeElement, 'mdc-card__action');
+      _.compact = true;
+    });
   }
 }