1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v1.1.3
  6 */
  7(function( window, angular, undefined ){
  8"use strict";
  9
 10/**
 11 * @ngdoc module
 12 * @name material.components.card
 13 *
 14 * @description
 15 * Card components.
 16 */
 17mdCardDirective['$inject'] = ["$mdTheming"];
 18angular.module('material.components.card', [
 19    'material.core'
 20  ])
 21  .directive('mdCard', mdCardDirective);
 22
 23
 24/**
 25 * @ngdoc directive
 26 * @name mdCard
 27 * @module material.components.card
 28 *
 29 * @restrict E
 30 *
 31 * @description
 32 * The `<md-card>` directive is a container element used within `<md-content>` containers.
 33 *
 34 * An image included as a direct descendant will fill the card's width. If you want to avoid this,
 35 * you can add the `md-image-no-fill` class to the parent element. The `<md-card-content>`
 36 * container will wrap text content and provide padding. An `<md-card-footer>` element can be
 37 * optionally included to put content flush against the bottom edge of the card.
 38 *
 39 * Action buttons can be included in an `<md-card-actions>` element, similar to `<md-dialog-actions>`.
 40 * You can then position buttons using layout attributes.
 41 *
 42 * Card is built with:
 43 * * `<md-card-header>` - Header for the card, holds avatar, text and squared image
 44 *  - `<md-card-avatar>` - Card avatar
 45 *    - `md-user-avatar` - Class for user image
 46 *    - `<md-icon>`
 47 *  - `<md-card-header-text>` - Contains elements for the card description
 48 *    - `md-title` - Class for the card title
 49 *    - `md-subhead` - Class for the card sub header
 50 * * `<img>` - Image for the card
 51 * * `<md-card-title>` - Card content title
 52 *  - `<md-card-title-text>`
 53 *    - `md-headline` - Class for the card content title
 54 *    - `md-subhead` - Class for the card content sub header
 55 *  - `<md-card-title-media>` - Squared image within the title
 56 *    - `md-media-sm` - Class for small image
 57 *    - `md-media-md` - Class for medium image
 58 *    - `md-media-lg` - Class for large image
 59 *    - `md-media-xl` - Class for extra large image
 60 * * `<md-card-content>` - Card content
 61 * * `<md-card-actions>` - Card actions
 62 *  - `<md-card-icon-actions>` - Icon actions
 63 *
 64 * Cards have constant width and variable heights; where the maximum height is limited to what can
 65 * fit within a single view on a platform, but it can temporarily expand as needed.
 66 *
 67 * @usage
 68 * ### Card with optional footer
 69 * <hljs lang="html">
 70 * <md-card>
 71 *  <img src="card-image.png" class="md-card-image" alt="image caption">
 72 *  <md-card-content>
 73 *    <h2>Card headline</h2>
 74 *    <p>Card content</p>
 75 *  </md-card-content>
 76 *  <md-card-footer>
 77 *    Card footer
 78 *  </md-card-footer>
 79 * </md-card>
 80 * </hljs>
 81 *
 82 * ### Card with actions
 83 * <hljs lang="html">
 84 * <md-card>
 85 *  <img src="card-image.png" class="md-card-image" alt="image caption">
 86 *  <md-card-content>
 87 *    <h2>Card headline</h2>
 88 *    <p>Card content</p>
 89 *  </md-card-content>
 90 *  <md-card-actions layout="row" layout-align="end center">
 91 *    <md-button>Action 1</md-button>
 92 *    <md-button>Action 2</md-button>
 93 *  </md-card-actions>
 94 * </md-card>
 95 * </hljs>
 96 *
 97 * ### Card with header, image, title actions and content
 98 * <hljs lang="html">
 99 * <md-card>
100 *   <md-card-header>
101 *     <md-card-avatar>
102 *       <img class="md-user-avatar" src="avatar.png"/>
103 *     </md-card-avatar>
104 *     <md-card-header-text>
105 *       <span class="md-title">Title</span>
106 *       <span class="md-subhead">Sub header</span>
107 *     </md-card-header-text>
108 *   </md-card-header>
109 *   <img ng-src="card-image.png" class="md-card-image" alt="image caption">
110 *   <md-card-title>
111 *     <md-card-title-text>
112 *       <span class="md-headline">Card headline</span>
113 *       <span class="md-subhead">Card subheader</span>
114 *     </md-card-title-text>
115 *   </md-card-title>
116 *   <md-card-actions layout="row" layout-align="start center">
117 *     <md-button>Action 1</md-button>
118 *     <md-button>Action 2</md-button>
119 *     <md-card-icon-actions>
120 *       <md-button class="md-icon-button" aria-label="icon">
121 *         <md-icon md-svg-icon="icon"></md-icon>
122 *       </md-button>
123 *     </md-card-icon-actions>
124 *   </md-card-actions>
125 *   <md-card-content>
126 *     <p>
127 *      Card content
128 *     </p>
129 *   </md-card-content>
130 * </md-card>
131 * </hljs>
132 */
133function mdCardDirective($mdTheming) {
134  return {
135    restrict: 'E',
136    link: function ($scope, $element, attr) {
137      $element.addClass('_md');     // private md component indicator for styling
138      $mdTheming($element);
139    }
140  };
141}
142
143})(window, window.angular);