material-card.umd.js 14 KB

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