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