card.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, Input, Optional, Inject, NgModule } from '@angular/core';
  9. import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
  10. import { MatCommonModule } from '@angular/material/core';
  11. /**
  12. * @fileoverview added by tsickle
  13. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  14. */
  15. /**
  16. * Content of a card, needed as it's used as a selector in the API.
  17. * \@docs-private
  18. */
  19. class MatCardContent {
  20. }
  21. MatCardContent.decorators = [
  22. { type: Directive, args: [{
  23. selector: 'mat-card-content',
  24. host: { 'class': 'mat-card-content' }
  25. },] },
  26. ];
  27. /**
  28. * Title of a card, needed as it's used as a selector in the API.
  29. * \@docs-private
  30. */
  31. class MatCardTitle {
  32. }
  33. MatCardTitle.decorators = [
  34. { type: Directive, args: [{
  35. selector: `mat-card-title, [mat-card-title], [matCardTitle]`,
  36. host: {
  37. 'class': 'mat-card-title'
  38. }
  39. },] },
  40. ];
  41. /**
  42. * Sub-title of a card, needed as it's used as a selector in the API.
  43. * \@docs-private
  44. */
  45. class MatCardSubtitle {
  46. }
  47. MatCardSubtitle.decorators = [
  48. { type: Directive, args: [{
  49. selector: `mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]`,
  50. host: {
  51. 'class': 'mat-card-subtitle'
  52. }
  53. },] },
  54. ];
  55. /**
  56. * Action section of a card, needed as it's used as a selector in the API.
  57. * \@docs-private
  58. */
  59. class MatCardActions {
  60. constructor() {
  61. /**
  62. * Position of the actions inside the card.
  63. */
  64. this.align = 'start';
  65. }
  66. }
  67. MatCardActions.decorators = [
  68. { type: Directive, args: [{
  69. selector: 'mat-card-actions',
  70. exportAs: 'matCardActions',
  71. host: {
  72. 'class': 'mat-card-actions',
  73. '[class.mat-card-actions-align-end]': 'align === "end"',
  74. }
  75. },] },
  76. ];
  77. MatCardActions.propDecorators = {
  78. align: [{ type: Input }]
  79. };
  80. /**
  81. * Footer of a card, needed as it's used as a selector in the API.
  82. * \@docs-private
  83. */
  84. class MatCardFooter {
  85. }
  86. MatCardFooter.decorators = [
  87. { type: Directive, args: [{
  88. selector: 'mat-card-footer',
  89. host: { 'class': 'mat-card-footer' }
  90. },] },
  91. ];
  92. /**
  93. * Image used in a card, needed to add the mat- CSS styling.
  94. * \@docs-private
  95. */
  96. class MatCardImage {
  97. }
  98. MatCardImage.decorators = [
  99. { type: Directive, args: [{
  100. selector: '[mat-card-image], [matCardImage]',
  101. host: { 'class': 'mat-card-image' }
  102. },] },
  103. ];
  104. /**
  105. * Image used in a card, needed to add the mat- CSS styling.
  106. * \@docs-private
  107. */
  108. class MatCardSmImage {
  109. }
  110. MatCardSmImage.decorators = [
  111. { type: Directive, args: [{
  112. selector: '[mat-card-sm-image], [matCardImageSmall]',
  113. host: { 'class': 'mat-card-sm-image' }
  114. },] },
  115. ];
  116. /**
  117. * Image used in a card, needed to add the mat- CSS styling.
  118. * \@docs-private
  119. */
  120. class MatCardMdImage {
  121. }
  122. MatCardMdImage.decorators = [
  123. { type: Directive, args: [{
  124. selector: '[mat-card-md-image], [matCardImageMedium]',
  125. host: { 'class': 'mat-card-md-image' }
  126. },] },
  127. ];
  128. /**
  129. * Image used in a card, needed to add the mat- CSS styling.
  130. * \@docs-private
  131. */
  132. class MatCardLgImage {
  133. }
  134. MatCardLgImage.decorators = [
  135. { type: Directive, args: [{
  136. selector: '[mat-card-lg-image], [matCardImageLarge]',
  137. host: { 'class': 'mat-card-lg-image' }
  138. },] },
  139. ];
  140. /**
  141. * Large image used in a card, needed to add the mat- CSS styling.
  142. * \@docs-private
  143. */
  144. class MatCardXlImage {
  145. }
  146. MatCardXlImage.decorators = [
  147. { type: Directive, args: [{
  148. selector: '[mat-card-xl-image], [matCardImageXLarge]',
  149. host: { 'class': 'mat-card-xl-image' }
  150. },] },
  151. ];
  152. /**
  153. * Avatar image used in a card, needed to add the mat- CSS styling.
  154. * \@docs-private
  155. */
  156. class MatCardAvatar {
  157. }
  158. MatCardAvatar.decorators = [
  159. { type: Directive, args: [{
  160. selector: '[mat-card-avatar], [matCardAvatar]',
  161. host: { 'class': 'mat-card-avatar' }
  162. },] },
  163. ];
  164. /**
  165. * A basic content container component that adds the styles of a Material design card.
  166. *
  167. * While this component can be used alone, it also provides a number
  168. * of preset styles for common card sections, including:
  169. * - mat-card-title
  170. * - mat-card-subtitle
  171. * - mat-card-content
  172. * - mat-card-actions
  173. * - mat-card-footer
  174. */
  175. class MatCard {
  176. // @breaking-change 9.0.0 `_animationMode` parameter to be made required.
  177. /**
  178. * @param {?=} _animationMode
  179. */
  180. constructor(_animationMode) {
  181. this._animationMode = _animationMode;
  182. }
  183. }
  184. MatCard.decorators = [
  185. { type: Component, args: [{selector: 'mat-card',
  186. exportAs: 'matCard',
  187. template: "<ng-content></ng-content><ng-content select=\"mat-card-footer\"></ng-content>",
  188. styles: [".mat-card{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:16px;border-radius:4px}._mat-animation-noopable.mat-card{transition:none;animation:none}.mat-card .mat-divider-horizontal{position:absolute;left:0;width:100%}[dir=rtl] .mat-card .mat-divider-horizontal{left:auto;right:0}.mat-card .mat-divider-horizontal.mat-divider-inset{position:static;margin:0}[dir=rtl] .mat-card .mat-divider-horizontal.mat-divider-inset{margin-right:0}@media (-ms-high-contrast:active){.mat-card{outline:solid 1px}}.mat-card-actions,.mat-card-content,.mat-card-subtitle{display:block;margin-bottom:16px}.mat-card-title{display:block;margin-bottom:8px}.mat-card-actions{margin-left:-8px;margin-right:-8px;padding:8px 0}.mat-card-actions-align-end{display:flex;justify-content:flex-end}.mat-card-image{width:calc(100% + 32px);margin:0 -16px 16px -16px}.mat-card-footer{display:block;margin:0 -16px -16px -16px}.mat-card-actions .mat-button,.mat-card-actions .mat-raised-button{margin:0 8px}.mat-card-header{display:flex;flex-direction:row}.mat-card-header .mat-card-title{margin-bottom:12px}.mat-card-header-text{margin:0 16px}.mat-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0;object-fit:cover}.mat-card-title-group{display:flex;justify-content:space-between}.mat-card-sm-image{width:80px;height:80px}.mat-card-md-image{width:112px;height:112px}.mat-card-lg-image{width:152px;height:152px}.mat-card-xl-image{width:240px;height:240px;margin:-8px}.mat-card-title-group>.mat-card-xl-image{margin:-8px 0 8px}@media (max-width:599px){.mat-card-title-group{margin:0}.mat-card-xl-image{margin-left:0;margin-right:0}}.mat-card-content>:first-child,.mat-card>:first-child{margin-top:0}.mat-card-content>:last-child:not(.mat-card-footer),.mat-card>:last-child:not(.mat-card-footer){margin-bottom:0}.mat-card-image:first-child{margin-top:-16px;border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-card>.mat-card-actions:last-child{margin-bottom:-8px;padding-bottom:0}.mat-card-actions .mat-button:first-child,.mat-card-actions .mat-raised-button:first-child{margin-left:0;margin-right:0}.mat-card-subtitle:not(:first-child),.mat-card-title:not(:first-child){margin-top:-4px}.mat-card-header .mat-card-subtitle:not(:first-child){margin-top:-8px}.mat-card>.mat-card-xl-image:first-child{margin-top:-8px}.mat-card>.mat-card-xl-image:last-child{margin-bottom:-8px}"],
  189. encapsulation: ViewEncapsulation.None,
  190. changeDetection: ChangeDetectionStrategy.OnPush,
  191. host: {
  192. 'class': 'mat-card',
  193. '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
  194. }
  195. },] },
  196. ];
  197. /** @nocollapse */
  198. MatCard.ctorParameters = () => [
  199. { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] }
  200. ];
  201. /**
  202. * Component intended to be used within the `<mat-card>` component. It adds styles for a
  203. * preset header section (i.e. a title, subtitle, and avatar layout).
  204. * \@docs-private
  205. */
  206. class MatCardHeader {
  207. }
  208. MatCardHeader.decorators = [
  209. { type: Component, args: [{selector: 'mat-card-header',
  210. template: "<ng-content select=\"[mat-card-avatar], [matCardAvatar]\"></ng-content><div class=\"mat-card-header-text\"><ng-content select=\"mat-card-title, mat-card-subtitle, [mat-card-title], [mat-card-subtitle], [matCardTitle], [matCardSubtitle]\"></ng-content></div><ng-content></ng-content>",
  211. encapsulation: ViewEncapsulation.None,
  212. changeDetection: ChangeDetectionStrategy.OnPush,
  213. host: { 'class': 'mat-card-header' }
  214. },] },
  215. ];
  216. /**
  217. * Component intended to be used within the `<mat-card>` component. It adds styles for a preset
  218. * layout that groups an image with a title section.
  219. * \@docs-private
  220. */
  221. class MatCardTitleGroup {
  222. }
  223. MatCardTitleGroup.decorators = [
  224. { type: Component, args: [{selector: 'mat-card-title-group',
  225. template: "<div><ng-content select=\"mat-card-title, mat-card-subtitle, [mat-card-title], [mat-card-subtitle], [matCardTitle], [matCardSubtitle]\"></ng-content></div><ng-content select=\"img\"></ng-content><ng-content></ng-content>",
  226. encapsulation: ViewEncapsulation.None,
  227. changeDetection: ChangeDetectionStrategy.OnPush,
  228. host: { 'class': 'mat-card-title-group' }
  229. },] },
  230. ];
  231. /**
  232. * @fileoverview added by tsickle
  233. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  234. */
  235. class MatCardModule {
  236. }
  237. MatCardModule.decorators = [
  238. { type: NgModule, args: [{
  239. imports: [MatCommonModule],
  240. exports: [
  241. MatCard,
  242. MatCardHeader,
  243. MatCardTitleGroup,
  244. MatCardContent,
  245. MatCardTitle,
  246. MatCardSubtitle,
  247. MatCardActions,
  248. MatCardFooter,
  249. MatCardSmImage,
  250. MatCardMdImage,
  251. MatCardLgImage,
  252. MatCardImage,
  253. MatCardXlImage,
  254. MatCardAvatar,
  255. MatCommonModule,
  256. ],
  257. declarations: [
  258. MatCard, MatCardHeader, MatCardTitleGroup, MatCardContent, MatCardTitle, MatCardSubtitle,
  259. MatCardActions, MatCardFooter, MatCardSmImage, MatCardMdImage, MatCardLgImage, MatCardImage,
  260. MatCardXlImage, MatCardAvatar,
  261. ],
  262. },] },
  263. ];
  264. /**
  265. * @fileoverview added by tsickle
  266. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  267. */
  268. /**
  269. * @fileoverview added by tsickle
  270. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  271. */
  272. export { MatCardContent, MatCardTitle, MatCardSubtitle, MatCardActions, MatCardFooter, MatCardImage, MatCardSmImage, MatCardMdImage, MatCardLgImage, MatCardXlImage, MatCardAvatar, MatCard, MatCardHeader, MatCardTitleGroup, MatCardModule };
  273. //# sourceMappingURL=card.js.map