card.es5.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  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. var MatCardContent = /** @class */ (function () {
  20. function MatCardContent() {
  21. }
  22. MatCardContent.decorators = [
  23. { type: Directive, args: [{
  24. selector: 'mat-card-content',
  25. host: { 'class': 'mat-card-content' }
  26. },] },
  27. ];
  28. return MatCardContent;
  29. }());
  30. /**
  31. * Title of a card, needed as it's used as a selector in the API.
  32. * \@docs-private
  33. */
  34. var MatCardTitle = /** @class */ (function () {
  35. function MatCardTitle() {
  36. }
  37. MatCardTitle.decorators = [
  38. { type: Directive, args: [{
  39. selector: "mat-card-title, [mat-card-title], [matCardTitle]",
  40. host: {
  41. 'class': 'mat-card-title'
  42. }
  43. },] },
  44. ];
  45. return MatCardTitle;
  46. }());
  47. /**
  48. * Sub-title of a card, needed as it's used as a selector in the API.
  49. * \@docs-private
  50. */
  51. var MatCardSubtitle = /** @class */ (function () {
  52. function MatCardSubtitle() {
  53. }
  54. MatCardSubtitle.decorators = [
  55. { type: Directive, args: [{
  56. selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]",
  57. host: {
  58. 'class': 'mat-card-subtitle'
  59. }
  60. },] },
  61. ];
  62. return MatCardSubtitle;
  63. }());
  64. /**
  65. * Action section of a card, needed as it's used as a selector in the API.
  66. * \@docs-private
  67. */
  68. var MatCardActions = /** @class */ (function () {
  69. function MatCardActions() {
  70. /**
  71. * Position of the actions inside the card.
  72. */
  73. this.align = 'start';
  74. }
  75. MatCardActions.decorators = [
  76. { type: Directive, args: [{
  77. selector: 'mat-card-actions',
  78. exportAs: 'matCardActions',
  79. host: {
  80. 'class': 'mat-card-actions',
  81. '[class.mat-card-actions-align-end]': 'align === "end"',
  82. }
  83. },] },
  84. ];
  85. MatCardActions.propDecorators = {
  86. align: [{ type: Input }]
  87. };
  88. return MatCardActions;
  89. }());
  90. /**
  91. * Footer of a card, needed as it's used as a selector in the API.
  92. * \@docs-private
  93. */
  94. var MatCardFooter = /** @class */ (function () {
  95. function MatCardFooter() {
  96. }
  97. MatCardFooter.decorators = [
  98. { type: Directive, args: [{
  99. selector: 'mat-card-footer',
  100. host: { 'class': 'mat-card-footer' }
  101. },] },
  102. ];
  103. return MatCardFooter;
  104. }());
  105. /**
  106. * Image used in a card, needed to add the mat- CSS styling.
  107. * \@docs-private
  108. */
  109. var MatCardImage = /** @class */ (function () {
  110. function MatCardImage() {
  111. }
  112. MatCardImage.decorators = [
  113. { type: Directive, args: [{
  114. selector: '[mat-card-image], [matCardImage]',
  115. host: { 'class': 'mat-card-image' }
  116. },] },
  117. ];
  118. return MatCardImage;
  119. }());
  120. /**
  121. * Image used in a card, needed to add the mat- CSS styling.
  122. * \@docs-private
  123. */
  124. var MatCardSmImage = /** @class */ (function () {
  125. function MatCardSmImage() {
  126. }
  127. MatCardSmImage.decorators = [
  128. { type: Directive, args: [{
  129. selector: '[mat-card-sm-image], [matCardImageSmall]',
  130. host: { 'class': 'mat-card-sm-image' }
  131. },] },
  132. ];
  133. return MatCardSmImage;
  134. }());
  135. /**
  136. * Image used in a card, needed to add the mat- CSS styling.
  137. * \@docs-private
  138. */
  139. var MatCardMdImage = /** @class */ (function () {
  140. function MatCardMdImage() {
  141. }
  142. MatCardMdImage.decorators = [
  143. { type: Directive, args: [{
  144. selector: '[mat-card-md-image], [matCardImageMedium]',
  145. host: { 'class': 'mat-card-md-image' }
  146. },] },
  147. ];
  148. return MatCardMdImage;
  149. }());
  150. /**
  151. * Image used in a card, needed to add the mat- CSS styling.
  152. * \@docs-private
  153. */
  154. var MatCardLgImage = /** @class */ (function () {
  155. function MatCardLgImage() {
  156. }
  157. MatCardLgImage.decorators = [
  158. { type: Directive, args: [{
  159. selector: '[mat-card-lg-image], [matCardImageLarge]',
  160. host: { 'class': 'mat-card-lg-image' }
  161. },] },
  162. ];
  163. return MatCardLgImage;
  164. }());
  165. /**
  166. * Large image used in a card, needed to add the mat- CSS styling.
  167. * \@docs-private
  168. */
  169. var MatCardXlImage = /** @class */ (function () {
  170. function MatCardXlImage() {
  171. }
  172. MatCardXlImage.decorators = [
  173. { type: Directive, args: [{
  174. selector: '[mat-card-xl-image], [matCardImageXLarge]',
  175. host: { 'class': 'mat-card-xl-image' }
  176. },] },
  177. ];
  178. return MatCardXlImage;
  179. }());
  180. /**
  181. * Avatar image used in a card, needed to add the mat- CSS styling.
  182. * \@docs-private
  183. */
  184. var MatCardAvatar = /** @class */ (function () {
  185. function MatCardAvatar() {
  186. }
  187. MatCardAvatar.decorators = [
  188. { type: Directive, args: [{
  189. selector: '[mat-card-avatar], [matCardAvatar]',
  190. host: { 'class': 'mat-card-avatar' }
  191. },] },
  192. ];
  193. return MatCardAvatar;
  194. }());
  195. /**
  196. * A basic content container component that adds the styles of a Material design card.
  197. *
  198. * While this component can be used alone, it also provides a number
  199. * of preset styles for common card sections, including:
  200. * - mat-card-title
  201. * - mat-card-subtitle
  202. * - mat-card-content
  203. * - mat-card-actions
  204. * - mat-card-footer
  205. */
  206. var MatCard = /** @class */ (function () {
  207. // @breaking-change 9.0.0 `_animationMode` parameter to be made required.
  208. function MatCard(_animationMode) {
  209. this._animationMode = _animationMode;
  210. }
  211. MatCard.decorators = [
  212. { type: Component, args: [{selector: 'mat-card',
  213. exportAs: 'matCard',
  214. template: "<ng-content></ng-content><ng-content select=\"mat-card-footer\"></ng-content>",
  215. 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}"],
  216. encapsulation: ViewEncapsulation.None,
  217. changeDetection: ChangeDetectionStrategy.OnPush,
  218. host: {
  219. 'class': 'mat-card',
  220. '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
  221. }
  222. },] },
  223. ];
  224. /** @nocollapse */
  225. MatCard.ctorParameters = function () { return [
  226. { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] }
  227. ]; };
  228. return MatCard;
  229. }());
  230. /**
  231. * Component intended to be used within the `<mat-card>` component. It adds styles for a
  232. * preset header section (i.e. a title, subtitle, and avatar layout).
  233. * \@docs-private
  234. */
  235. var MatCardHeader = /** @class */ (function () {
  236. function MatCardHeader() {
  237. }
  238. MatCardHeader.decorators = [
  239. { type: Component, args: [{selector: 'mat-card-header',
  240. 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>",
  241. encapsulation: ViewEncapsulation.None,
  242. changeDetection: ChangeDetectionStrategy.OnPush,
  243. host: { 'class': 'mat-card-header' }
  244. },] },
  245. ];
  246. return MatCardHeader;
  247. }());
  248. /**
  249. * Component intended to be used within the `<mat-card>` component. It adds styles for a preset
  250. * layout that groups an image with a title section.
  251. * \@docs-private
  252. */
  253. var MatCardTitleGroup = /** @class */ (function () {
  254. function MatCardTitleGroup() {
  255. }
  256. MatCardTitleGroup.decorators = [
  257. { type: Component, args: [{selector: 'mat-card-title-group',
  258. 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>",
  259. encapsulation: ViewEncapsulation.None,
  260. changeDetection: ChangeDetectionStrategy.OnPush,
  261. host: { 'class': 'mat-card-title-group' }
  262. },] },
  263. ];
  264. return MatCardTitleGroup;
  265. }());
  266. /**
  267. * @fileoverview added by tsickle
  268. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  269. */
  270. var MatCardModule = /** @class */ (function () {
  271. function MatCardModule() {
  272. }
  273. MatCardModule.decorators = [
  274. { type: NgModule, args: [{
  275. imports: [MatCommonModule],
  276. exports: [
  277. MatCard,
  278. MatCardHeader,
  279. MatCardTitleGroup,
  280. MatCardContent,
  281. MatCardTitle,
  282. MatCardSubtitle,
  283. MatCardActions,
  284. MatCardFooter,
  285. MatCardSmImage,
  286. MatCardMdImage,
  287. MatCardLgImage,
  288. MatCardImage,
  289. MatCardXlImage,
  290. MatCardAvatar,
  291. MatCommonModule,
  292. ],
  293. declarations: [
  294. MatCard, MatCardHeader, MatCardTitleGroup, MatCardContent, MatCardTitle, MatCardSubtitle,
  295. MatCardActions, MatCardFooter, MatCardSmImage, MatCardMdImage, MatCardLgImage, MatCardImage,
  296. MatCardXlImage, MatCardAvatar,
  297. ],
  298. },] },
  299. ];
  300. return MatCardModule;
  301. }());
  302. /**
  303. * @fileoverview added by tsickle
  304. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  305. */
  306. /**
  307. * @fileoverview added by tsickle
  308. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  309. */
  310. export { MatCardContent, MatCardTitle, MatCardSubtitle, MatCardActions, MatCardFooter, MatCardImage, MatCardSmImage, MatCardMdImage, MatCardLgImage, MatCardXlImage, MatCardAvatar, MatCard, MatCardHeader, MatCardTitleGroup, MatCardModule };
  311. //# sourceMappingURL=card.es5.js.map