card.mjs 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. import * as i0 from '@angular/core';
  2. import { InjectionToken, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Directive, NgModule } from '@angular/core';
  3. import { M as MatCommonModule } from './common-module-WayjW0Pb.mjs';
  4. import '@angular/cdk/a11y';
  5. import '@angular/cdk/bidi';
  6. /** Injection token that can be used to provide the default options the card module. */
  7. const MAT_CARD_CONFIG = new InjectionToken('MAT_CARD_CONFIG');
  8. /**
  9. * Material Design card component. Cards contain content and actions about a single subject.
  10. * See https://material.io/design/components/cards.html
  11. *
  12. * MatCard provides no behaviors, instead serving as a purely visual treatment.
  13. */
  14. class MatCard {
  15. appearance;
  16. constructor() {
  17. const config = inject(MAT_CARD_CONFIG, { optional: true });
  18. this.appearance = config?.appearance || 'raised';
  19. }
  20. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
  21. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatCard, isStandalone: true, selector: "mat-card", inputs: { appearance: "appearance" }, host: { properties: { "class.mat-mdc-card-outlined": "appearance === \"outlined\"", "class.mdc-card--outlined": "appearance === \"outlined\"" }, classAttribute: "mat-mdc-card mdc-card" }, exportAs: ["matCard"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".mat-mdc-card{display:flex;flex-direction:column;box-sizing:border-box;position:relative;border-style:solid;border-width:0;background-color:var(--mdc-elevated-card-container-color, var(--mat-sys-surface-container-low));border-color:var(--mdc-elevated-card-container-color, var(--mat-sys-surface-container-low));border-radius:var(--mdc-elevated-card-container-shape, var(--mat-sys-corner-medium));box-shadow:var(--mdc-elevated-card-container-elevation, var(--mat-sys-level1))}.mat-mdc-card::after{position:absolute;top:0;left:0;width:100%;height:100%;border:solid 1px rgba(0,0,0,0);content:\"\";display:block;pointer-events:none;box-sizing:border-box;border-radius:var(--mdc-elevated-card-container-shape, var(--mat-sys-corner-medium))}.mat-mdc-card-outlined{background-color:var(--mdc-outlined-card-container-color, var(--mat-sys-surface));border-radius:var(--mdc-outlined-card-container-shape, var(--mat-sys-corner-medium));border-width:var(--mdc-outlined-card-outline-width, 1px);border-color:var(--mdc-outlined-card-outline-color, var(--mat-sys-outline-variant));box-shadow:var(--mdc-outlined-card-container-elevation, var(--mat-sys-level0))}.mat-mdc-card-outlined::after{border:none}.mdc-card__media{position:relative;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:cover}.mdc-card__media::before{display:block;content:\"\"}.mdc-card__media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mdc-card__media:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mat-mdc-card-actions{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:52px;padding:8px}.mat-mdc-card-title{font-family:var(--mat-card-title-text-font, var(--mat-sys-title-large-font));line-height:var(--mat-card-title-text-line-height, var(--mat-sys-title-large-line-height));font-size:var(--mat-card-title-text-size, var(--mat-sys-title-large-size));letter-spacing:var(--mat-card-title-text-tracking, var(--mat-sys-title-large-tracking));font-weight:var(--mat-card-title-text-weight, var(--mat-sys-title-large-weight))}.mat-mdc-card-subtitle{color:var(--mat-card-subtitle-text-color, var(--mat-sys-on-surface));font-family:var(--mat-card-subtitle-text-font, var(--mat-sys-title-medium-font));line-height:var(--mat-card-subtitle-text-line-height, var(--mat-sys-title-medium-line-height));font-size:var(--mat-card-subtitle-text-size, var(--mat-sys-title-medium-size));letter-spacing:var(--mat-card-subtitle-text-tracking, var(--mat-sys-title-medium-tracking));font-weight:var(--mat-card-subtitle-text-weight, var(--mat-sys-title-medium-weight))}.mat-mdc-card-title,.mat-mdc-card-subtitle{display:block;margin:0}.mat-mdc-card-avatar~.mat-mdc-card-header-text .mat-mdc-card-title,.mat-mdc-card-avatar~.mat-mdc-card-header-text .mat-mdc-card-subtitle{padding:16px 16px 0}.mat-mdc-card-header{display:flex;padding:16px 16px 0}.mat-mdc-card-content{display:block;padding:0 16px}.mat-mdc-card-content:first-child{padding-top:16px}.mat-mdc-card-content:last-child{padding-bottom:16px}.mat-mdc-card-title-group{display:flex;justify-content:space-between;width:100%}.mat-mdc-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0;margin-bottom:16px;object-fit:cover}.mat-mdc-card-avatar~.mat-mdc-card-header-text .mat-mdc-card-subtitle,.mat-mdc-card-avatar~.mat-mdc-card-header-text .mat-mdc-card-title{line-height:normal}.mat-mdc-card-sm-image{width:80px;height:80px}.mat-mdc-card-md-image{width:112px;height:112px}.mat-mdc-card-lg-image{width:152px;height:152px}.mat-mdc-card-xl-image{width:240px;height:240px}.mat-mdc-card-subtitle~.mat-mdc-card-title,.mat-mdc-card-title~.mat-mdc-card-subtitle,.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title,.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle,.mat-mdc-card-title-group .mat-mdc-card-title,.mat-mdc-card-title-group .mat-mdc-card-subtitle{padding-top:0}.mat-mdc-card-content>:last-child:not(.mat-mdc-card-footer){margin-bottom:0}.mat-mdc-card-actions-align-end{justify-content:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  22. }
  23. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCard, decorators: [{
  24. type: Component,
  25. args: [{ selector: 'mat-card', host: {
  26. 'class': 'mat-mdc-card mdc-card',
  27. '[class.mat-mdc-card-outlined]': 'appearance === "outlined"',
  28. '[class.mdc-card--outlined]': 'appearance === "outlined"',
  29. }, exportAs: 'matCard', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [".mat-mdc-card{display:flex;flex-direction:column;box-sizing:border-box;position:relative;border-style:solid;border-width:0;background-color:var(--mdc-elevated-card-container-color, var(--mat-sys-surface-container-low));border-color:var(--mdc-elevated-card-container-color, var(--mat-sys-surface-container-low));border-radius:var(--mdc-elevated-card-container-shape, var(--mat-sys-corner-medium));box-shadow:var(--mdc-elevated-card-container-elevation, var(--mat-sys-level1))}.mat-mdc-card::after{position:absolute;top:0;left:0;width:100%;height:100%;border:solid 1px rgba(0,0,0,0);content:\"\";display:block;pointer-events:none;box-sizing:border-box;border-radius:var(--mdc-elevated-card-container-shape, var(--mat-sys-corner-medium))}.mat-mdc-card-outlined{background-color:var(--mdc-outlined-card-container-color, var(--mat-sys-surface));border-radius:var(--mdc-outlined-card-container-shape, var(--mat-sys-corner-medium));border-width:var(--mdc-outlined-card-outline-width, 1px);border-color:var(--mdc-outlined-card-outline-color, var(--mat-sys-outline-variant));box-shadow:var(--mdc-outlined-card-container-elevation, var(--mat-sys-level0))}.mat-mdc-card-outlined::after{border:none}.mdc-card__media{position:relative;box-sizing:border-box;background-repeat:no-repeat;background-position:center;background-size:cover}.mdc-card__media::before{display:block;content:\"\"}.mdc-card__media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mdc-card__media:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mat-mdc-card-actions{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:52px;padding:8px}.mat-mdc-card-title{font-family:var(--mat-card-title-text-font, var(--mat-sys-title-large-font));line-height:var(--mat-card-title-text-line-height, var(--mat-sys-title-large-line-height));font-size:var(--mat-card-title-text-size, var(--mat-sys-title-large-size));letter-spacing:var(--mat-card-title-text-tracking, var(--mat-sys-title-large-tracking));font-weight:var(--mat-card-title-text-weight, var(--mat-sys-title-large-weight))}.mat-mdc-card-subtitle{color:var(--mat-card-subtitle-text-color, var(--mat-sys-on-surface));font-family:var(--mat-card-subtitle-text-font, var(--mat-sys-title-medium-font));line-height:var(--mat-card-subtitle-text-line-height, var(--mat-sys-title-medium-line-height));font-size:var(--mat-card-subtitle-text-size, var(--mat-sys-title-medium-size));letter-spacing:var(--mat-card-subtitle-text-tracking, var(--mat-sys-title-medium-tracking));font-weight:var(--mat-card-subtitle-text-weight, var(--mat-sys-title-medium-weight))}.mat-mdc-card-title,.mat-mdc-card-subtitle{display:block;margin:0}.mat-mdc-card-avatar~.mat-mdc-card-header-text .mat-mdc-card-title,.mat-mdc-card-avatar~.mat-mdc-card-header-text .mat-mdc-card-subtitle{padding:16px 16px 0}.mat-mdc-card-header{display:flex;padding:16px 16px 0}.mat-mdc-card-content{display:block;padding:0 16px}.mat-mdc-card-content:first-child{padding-top:16px}.mat-mdc-card-content:last-child{padding-bottom:16px}.mat-mdc-card-title-group{display:flex;justify-content:space-between;width:100%}.mat-mdc-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0;margin-bottom:16px;object-fit:cover}.mat-mdc-card-avatar~.mat-mdc-card-header-text .mat-mdc-card-subtitle,.mat-mdc-card-avatar~.mat-mdc-card-header-text .mat-mdc-card-title{line-height:normal}.mat-mdc-card-sm-image{width:80px;height:80px}.mat-mdc-card-md-image{width:112px;height:112px}.mat-mdc-card-lg-image{width:152px;height:152px}.mat-mdc-card-xl-image{width:240px;height:240px}.mat-mdc-card-subtitle~.mat-mdc-card-title,.mat-mdc-card-title~.mat-mdc-card-subtitle,.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title,.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle,.mat-mdc-card-title-group .mat-mdc-card-title,.mat-mdc-card-title-group .mat-mdc-card-subtitle{padding-top:0}.mat-mdc-card-content>:last-child:not(.mat-mdc-card-footer){margin-bottom:0}.mat-mdc-card-actions-align-end{justify-content:flex-end}\n"] }]
  30. }], ctorParameters: () => [], propDecorators: { appearance: [{
  31. type: Input
  32. }] } });
  33. // TODO(jelbourn): add `MatActionCard`, which is a card that acts like a button (and has a ripple).
  34. // Supported in MDC with `.mdc-card__primary-action`. Will require additional a11y docs for users.
  35. /**
  36. * Title of a card, intended for use within `<mat-card>`. This component is an optional
  37. * convenience for one variety of card title; any custom title element may be used in its place.
  38. *
  39. * MatCardTitle provides no behaviors, instead serving as a purely visual treatment.
  40. */
  41. class MatCardTitle {
  42. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  43. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardTitle, isStandalone: true, selector: "mat-card-title, [mat-card-title], [matCardTitle]", host: { classAttribute: "mat-mdc-card-title" }, ngImport: i0 });
  44. }
  45. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardTitle, decorators: [{
  46. type: Directive,
  47. args: [{
  48. selector: `mat-card-title, [mat-card-title], [matCardTitle]`,
  49. host: { 'class': 'mat-mdc-card-title' },
  50. }]
  51. }] });
  52. /**
  53. * Container intended to be used within the `<mat-card>` component. Can contain exactly one
  54. * `<mat-card-title>`, one `<mat-card-subtitle>` and one content image of any size
  55. * (e.g. `<img matCardLgImage>`).
  56. */
  57. class MatCardTitleGroup {
  58. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardTitleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
  59. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatCardTitleGroup, isStandalone: true, selector: "mat-card-title-group", host: { classAttribute: "mat-mdc-card-title-group" }, ngImport: i0, template: "<div>\n <ng-content\n select=\"mat-card-title, mat-card-subtitle,\n [mat-card-title], [mat-card-subtitle],\n [matCardTitle], [matCardSubtitle]\"></ng-content>\n</div>\n<ng-content select=\"[mat-card-image], [matCardImage],\n [mat-card-sm-image], [matCardImageSmall],\n [mat-card-md-image], [matCardImageMedium],\n [mat-card-lg-image], [matCardImageLarge],\n [mat-card-xl-image], [matCardImageXLarge]\"></ng-content>\n<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  60. }
  61. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardTitleGroup, decorators: [{
  62. type: Component,
  63. args: [{ selector: 'mat-card-title-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'mat-mdc-card-title-group' }, template: "<div>\n <ng-content\n select=\"mat-card-title, mat-card-subtitle,\n [mat-card-title], [mat-card-subtitle],\n [matCardTitle], [matCardSubtitle]\"></ng-content>\n</div>\n<ng-content select=\"[mat-card-image], [matCardImage],\n [mat-card-sm-image], [matCardImageSmall],\n [mat-card-md-image], [matCardImageMedium],\n [mat-card-lg-image], [matCardImageLarge],\n [mat-card-xl-image], [matCardImageXLarge]\"></ng-content>\n<ng-content></ng-content>\n" }]
  64. }] });
  65. /**
  66. * Content of a card, intended for use within `<mat-card>`. This component is an optional
  67. * convenience for use with other convenience elements, such as `<mat-card-title>`; any custom
  68. * content block element may be used in its place.
  69. *
  70. * MatCardContent provides no behaviors, instead serving as a purely visual treatment.
  71. */
  72. class MatCardContent {
  73. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  74. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardContent, isStandalone: true, selector: "mat-card-content", host: { classAttribute: "mat-mdc-card-content" }, ngImport: i0 });
  75. }
  76. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardContent, decorators: [{
  77. type: Directive,
  78. args: [{
  79. selector: 'mat-card-content',
  80. host: { 'class': 'mat-mdc-card-content' },
  81. }]
  82. }] });
  83. /**
  84. * Sub-title of a card, intended for use within `<mat-card>` beneath a `<mat-card-title>`. This
  85. * component is an optional convenience for use with other convenience elements, such as
  86. * `<mat-card-title>`.
  87. *
  88. * MatCardSubtitle provides no behaviors, instead serving as a purely visual treatment.
  89. */
  90. class MatCardSubtitle {
  91. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  92. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardSubtitle, isStandalone: true, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]", host: { classAttribute: "mat-mdc-card-subtitle" }, ngImport: i0 });
  93. }
  94. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardSubtitle, decorators: [{
  95. type: Directive,
  96. args: [{
  97. selector: `mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]`,
  98. host: { 'class': 'mat-mdc-card-subtitle' },
  99. }]
  100. }] });
  101. /**
  102. * Bottom area of a card that contains action buttons, intended for use within `<mat-card>`.
  103. * This component is an optional convenience for use with other convenience elements, such as
  104. * `<mat-card-content>`; any custom action block element may be used in its place.
  105. *
  106. * MatCardActions provides no behaviors, instead serving as a purely visual treatment.
  107. */
  108. class MatCardActions {
  109. // TODO(jelbourn): deprecate `align` in favor of `actionPosition` or `actionAlignment`
  110. // as to not conflict with the native `align` attribute.
  111. /** Position of the actions inside the card. */
  112. align = 'start';
  113. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  114. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardActions, isStandalone: true, selector: "mat-card-actions", inputs: { align: "align" }, host: { properties: { "class.mat-mdc-card-actions-align-end": "align === \"end\"" }, classAttribute: "mat-mdc-card-actions mdc-card__actions" }, exportAs: ["matCardActions"], ngImport: i0 });
  115. }
  116. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardActions, decorators: [{
  117. type: Directive,
  118. args: [{
  119. selector: 'mat-card-actions',
  120. exportAs: 'matCardActions',
  121. host: {
  122. 'class': 'mat-mdc-card-actions mdc-card__actions',
  123. '[class.mat-mdc-card-actions-align-end]': 'align === "end"',
  124. },
  125. }]
  126. }], propDecorators: { align: [{
  127. type: Input
  128. }] } });
  129. /**
  130. * Header region of a card, intended for use within `<mat-card>`. This header captures
  131. * a card title, subtitle, and avatar. This component is an optional convenience for use with
  132. * other convenience elements, such as `<mat-card-footer>`; any custom header block element may be
  133. * used in its place.
  134. *
  135. * MatCardHeader provides no behaviors, instead serving as a purely visual treatment.
  136. */
  137. class MatCardHeader {
  138. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
  139. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MatCardHeader, isStandalone: true, selector: "mat-card-header", host: { classAttribute: "mat-mdc-card-header" }, ngImport: i0, template: "<ng-content select=\"[mat-card-avatar], [matCardAvatar]\"></ng-content>\n<div class=\"mat-mdc-card-header-text\">\n <ng-content\n select=\"mat-card-title, mat-card-subtitle,\n [mat-card-title], [mat-card-subtitle],\n [matCardTitle], [matCardSubtitle]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  140. }
  141. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardHeader, decorators: [{
  142. type: Component,
  143. args: [{ selector: 'mat-card-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'mat-mdc-card-header' }, template: "<ng-content select=\"[mat-card-avatar], [matCardAvatar]\"></ng-content>\n<div class=\"mat-mdc-card-header-text\">\n <ng-content\n select=\"mat-card-title, mat-card-subtitle,\n [mat-card-title], [mat-card-subtitle],\n [matCardTitle], [matCardSubtitle]\"></ng-content>\n</div>\n<ng-content></ng-content>\n" }]
  144. }] });
  145. /**
  146. * Footer area a card, intended for use within `<mat-card>`.
  147. * This component is an optional convenience for use with other convenience elements, such as
  148. * `<mat-card-content>`; any custom footer block element may be used in its place.
  149. *
  150. * MatCardFooter provides no behaviors, instead serving as a purely visual treatment.
  151. */
  152. class MatCardFooter {
  153. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  154. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardFooter, isStandalone: true, selector: "mat-card-footer", host: { classAttribute: "mat-mdc-card-footer" }, ngImport: i0 });
  155. }
  156. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardFooter, decorators: [{
  157. type: Directive,
  158. args: [{
  159. selector: 'mat-card-footer',
  160. host: { 'class': 'mat-mdc-card-footer' },
  161. }]
  162. }] });
  163. // TODO(jelbourn): deprecate the "image" selectors to replace with "media".
  164. // TODO(jelbourn): support `.mdc-card__media-content`.
  165. /**
  166. * Primary image content for a card, intended for use within `<mat-card>`. Can be applied to
  167. * any media element, such as `<img>` or `<picture>`.
  168. *
  169. * This component is an optional convenience for use with other convenience elements, such as
  170. * `<mat-card-content>`; any custom media element may be used in its place.
  171. *
  172. * MatCardImage provides no behaviors, instead serving as a purely visual treatment.
  173. */
  174. class MatCardImage {
  175. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardImage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  176. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardImage, isStandalone: true, selector: "[mat-card-image], [matCardImage]", host: { classAttribute: "mat-mdc-card-image mdc-card__media" }, ngImport: i0 });
  177. }
  178. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardImage, decorators: [{
  179. type: Directive,
  180. args: [{
  181. selector: '[mat-card-image], [matCardImage]',
  182. host: { 'class': 'mat-mdc-card-image mdc-card__media' },
  183. }]
  184. }] });
  185. /** Same as `MatCardImage`, but small. */
  186. class MatCardSmImage {
  187. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardSmImage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  188. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardSmImage, isStandalone: true, selector: "[mat-card-sm-image], [matCardImageSmall]", host: { classAttribute: "mat-mdc-card-sm-image mdc-card__media" }, ngImport: i0 });
  189. }
  190. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardSmImage, decorators: [{
  191. type: Directive,
  192. args: [{
  193. selector: '[mat-card-sm-image], [matCardImageSmall]',
  194. host: { 'class': 'mat-mdc-card-sm-image mdc-card__media' },
  195. }]
  196. }] });
  197. /** Same as `MatCardImage`, but medium. */
  198. class MatCardMdImage {
  199. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardMdImage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  200. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardMdImage, isStandalone: true, selector: "[mat-card-md-image], [matCardImageMedium]", host: { classAttribute: "mat-mdc-card-md-image mdc-card__media" }, ngImport: i0 });
  201. }
  202. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardMdImage, decorators: [{
  203. type: Directive,
  204. args: [{
  205. selector: '[mat-card-md-image], [matCardImageMedium]',
  206. host: { 'class': 'mat-mdc-card-md-image mdc-card__media' },
  207. }]
  208. }] });
  209. /** Same as `MatCardImage`, but large. */
  210. class MatCardLgImage {
  211. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardLgImage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  212. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardLgImage, isStandalone: true, selector: "[mat-card-lg-image], [matCardImageLarge]", host: { classAttribute: "mat-mdc-card-lg-image mdc-card__media" }, ngImport: i0 });
  213. }
  214. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardLgImage, decorators: [{
  215. type: Directive,
  216. args: [{
  217. selector: '[mat-card-lg-image], [matCardImageLarge]',
  218. host: { 'class': 'mat-mdc-card-lg-image mdc-card__media' },
  219. }]
  220. }] });
  221. /** Same as `MatCardImage`, but extra-large. */
  222. class MatCardXlImage {
  223. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardXlImage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  224. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardXlImage, isStandalone: true, selector: "[mat-card-xl-image], [matCardImageXLarge]", host: { classAttribute: "mat-mdc-card-xl-image mdc-card__media" }, ngImport: i0 });
  225. }
  226. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardXlImage, decorators: [{
  227. type: Directive,
  228. args: [{
  229. selector: '[mat-card-xl-image], [matCardImageXLarge]',
  230. host: { 'class': 'mat-mdc-card-xl-image mdc-card__media' },
  231. }]
  232. }] });
  233. /**
  234. * Avatar image content for a card, intended for use within `<mat-card>`. Can be applied to
  235. * any media element, such as `<img>` or `<picture>`.
  236. *
  237. * This component is an optional convenience for use with other convenience elements, such as
  238. * `<mat-card-title>`; any custom media element may be used in its place.
  239. *
  240. * MatCardAvatar provides no behaviors, instead serving as a purely visual treatment.
  241. */
  242. class MatCardAvatar {
  243. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
  244. static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: MatCardAvatar, isStandalone: true, selector: "[mat-card-avatar], [matCardAvatar]", host: { classAttribute: "mat-mdc-card-avatar" }, ngImport: i0 });
  245. }
  246. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardAvatar, decorators: [{
  247. type: Directive,
  248. args: [{
  249. selector: '[mat-card-avatar], [matCardAvatar]',
  250. host: { 'class': 'mat-mdc-card-avatar' },
  251. }]
  252. }] });
  253. const CARD_DIRECTIVES = [
  254. MatCard,
  255. MatCardActions,
  256. MatCardAvatar,
  257. MatCardContent,
  258. MatCardFooter,
  259. MatCardHeader,
  260. MatCardImage,
  261. MatCardLgImage,
  262. MatCardMdImage,
  263. MatCardSmImage,
  264. MatCardSubtitle,
  265. MatCardTitle,
  266. MatCardTitleGroup,
  267. MatCardXlImage,
  268. ];
  269. class MatCardModule {
  270. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  271. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatCardModule, imports: [MatCommonModule, MatCard,
  272. MatCardActions,
  273. MatCardAvatar,
  274. MatCardContent,
  275. MatCardFooter,
  276. MatCardHeader,
  277. MatCardImage,
  278. MatCardLgImage,
  279. MatCardMdImage,
  280. MatCardSmImage,
  281. MatCardSubtitle,
  282. MatCardTitle,
  283. MatCardTitleGroup,
  284. MatCardXlImage], exports: [MatCard,
  285. MatCardActions,
  286. MatCardAvatar,
  287. MatCardContent,
  288. MatCardFooter,
  289. MatCardHeader,
  290. MatCardImage,
  291. MatCardLgImage,
  292. MatCardMdImage,
  293. MatCardSmImage,
  294. MatCardSubtitle,
  295. MatCardTitle,
  296. MatCardTitleGroup,
  297. MatCardXlImage, MatCommonModule] });
  298. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardModule, imports: [MatCommonModule, MatCommonModule] });
  299. }
  300. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatCardModule, decorators: [{
  301. type: NgModule,
  302. args: [{
  303. imports: [MatCommonModule, ...CARD_DIRECTIVES],
  304. exports: [CARD_DIRECTIVES, MatCommonModule],
  305. }]
  306. }] });
  307. export { MAT_CARD_CONFIG, MatCard, MatCardActions, MatCardAvatar, MatCardContent, MatCardFooter, MatCardHeader, MatCardImage, MatCardLgImage, MatCardMdImage, MatCardModule, MatCardSmImage, MatCardSubtitle, MatCardTitle, MatCardTitleGroup, MatCardXlImage };
  308. //# sourceMappingURL=card.mjs.map