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