import { ChangeDetectionStrategy , Component , Directive , ElementRef , Input , OnDestroy , ViewEncapsulation } from '@angular/core' ; import { coerceBooleanProperty } from '@angular/cdk/coercion' ; import { MdcRipple } from '@angular-mdc/web/ripple' ; @ Directive ( { selector : 'mdc-card-media-content, [mdcCardMediaContent]' , exportAs : 'mdcCardMediaContent' , host : { 'class' : 'mdc-card__media-content' } } ) export class MdcCardMediaContent { constructor ( public elementRef ) { } } @ Component ( { selector : 'mdc-card-media, [mdcCardMedia]' , exportAs : 'mdcCardMedia' , host : { 'class' : 'mdc-card__media' , '[class.mdc-card__media--square]' : 'square' , '[class.mdc-card__media--16-9]' : 'wide' } , template : '<ng-content></ng-content>' , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush } ) export class MdcCardMedia { @ Input ( ) get square ( ) : boolean { return this . _square ; } set square ( value ) { this . _square = coerceBooleanProperty ( value ) ; } private _square : boolean = false ; @ Input ( ) get wide ( ) : boolean { return this . _wide ; } set wide ( value ) { this . _wide = coerceBooleanProperty ( value ) ; } private _wide : boolean = false ; constructor ( public elementRef ) { } } @ Component ( { selector : 'mdc-card-primary-action, [mdcCardPrimaryAction]' , exportAs : 'mdcCardPrimaryAction' , host : { 'class' : 'mdc-card__primary-action' } , template : '<ng-content></ng-content>' , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush , providers : [ MdcRipple ] } ) export class MdcCardPrimaryAction implements OnDestroy { constructor ( private _ripple , public elementRef ) { this . _ripple = new MdcRipple ( this . elementRef ) ; this . _ripple . init ( ) ; } ngOnDestroy ( ) { this . _ripple . destroy ( ) ; } } @ Component ( { selector : 'mdc-card-actions, [mdcCardActions]' , template : '<ng-content></ng-content>' , exportAs : 'mdcCardActions' , host : { 'class' : 'mdc-card__actions' , '[class.mdc-card__actions--full-bleed]' : 'fullBleed' } , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush } ) export class MdcCardActions { @ Input ( ) get fullBleed ( ) : boolean { return this . _fullBleed ; } set fullBleed ( value ) { this . _fullBleed = coerceBooleanProperty ( value ) ; } private _fullBleed : boolean = false ; constructor ( public elementRef ) { } } @ Directive ( { selector : 'mdc-card-action-buttons, [mdcCardActionButtons]' , exportAs : 'mdcCardActionButtons' , host : { 'class' : 'mdc-card__action-buttons' } } ) export class MdcCardActionButtons { constructor ( public elementRef ) { } } @ Directive ( { selector : 'mdc-card-action-icons, [mdcCardActionIcons]' , exportAs : 'mdcCardActionIcons' , host : { 'class' : 'mdc-card__action-icons' } } ) export class MdcCardActionIcons { constructor ( public elementRef ) { } } @ Directive ( { selector : '[mdcCardAction]' , host : { 'class' : 'mdc-card__action' } } ) export class MdcCardAction { @ Input ( 'mdcCardAction' ) get action ( ) : string { return this . _action ; } set action ( action ) { if ( ! action ) { return ; } if ( action === 'button' ) { this . elementRef . nativeElement . classList . remove ( 'mdc-card__action--icon' ) ; this . elementRef . nativeElement . classList . add ( 'mdc-card__action--button' ) ; } else if ( action === 'icon' ) { this . elementRef . nativeElement . classList . remove ( 'mdc-card__action--button' ) ; this . elementRef . nativeElement . classList . add ( 'mdc-card__action--icon' ) ; this . elementRef . nativeElement . setAttribute ( 'tabIndex' , '0' ) ; this . elementRef . nativeElement . setAttribute ( 'role' , 'button' ) ; } this . _action = action ; } private _action : string = '' ; constructor ( public elementRef ) { } } @ Component ( { selector : 'mdc-card' , exportAs : 'mdcCard' , host : { 'class' : 'mdc-card' , '[class.mdc-card--outlined]' : 'outlined' } , template : '<ng-content></ng-content>' , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush } ) export class MdcCard { @ Input ( ) get outlined ( ) : boolean { return this . _outlined ; } set outlined ( value ) { this . _outlined = coerceBooleanProperty ( value ) ; } private _outlined : boolean = false ; constructor ( public elementRef ) { } }