@angular/material
Version:
Angular Material
353 lines (345 loc) • 15.2 kB
JavaScript
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/core')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/material/core'], factory) :
(factory((global.ng = global.ng || {}, global.ng.material = global.ng.material || {}, global.ng.material.card = global.ng.material.card || {}),global.ng.core,global.ng.material.core));
}(this, (function (exports,_angular_core,_angular_material_core) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Content of a card, needed as it's used as a selector in the API.
* \@docs-private
*/
var MatCardContent = /** @class */ (function () {
function MatCardContent() {
}
MatCardContent.decorators = [
{ type: _angular_core.Directive, args: [{
selector: 'mat-card-content',
host: { 'class': 'mat-card-content' }
},] },
];
/** @nocollapse */
MatCardContent.ctorParameters = function () { return []; };
return MatCardContent;
}());
/**
* Title of a card, needed as it's used as a selector in the API.
* \@docs-private
*/
var MatCardTitle = /** @class */ (function () {
function MatCardTitle() {
}
MatCardTitle.decorators = [
{ type: _angular_core.Directive, args: [{
selector: "mat-card-title, [mat-card-title], [matCardTitle]",
host: {
'class': 'mat-card-title'
}
},] },
];
/** @nocollapse */
MatCardTitle.ctorParameters = function () { return []; };
return MatCardTitle;
}());
/**
* Sub-title of a card, needed as it's used as a selector in the API.
* \@docs-private
*/
var MatCardSubtitle = /** @class */ (function () {
function MatCardSubtitle() {
}
MatCardSubtitle.decorators = [
{ type: _angular_core.Directive, args: [{
selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]",
host: {
'class': 'mat-card-subtitle'
}
},] },
];
/** @nocollapse */
MatCardSubtitle.ctorParameters = function () { return []; };
return MatCardSubtitle;
}());
/**
* Action section of a card, needed as it's used as a selector in the API.
* \@docs-private
*/
var MatCardActions = /** @class */ (function () {
function MatCardActions() {
/**
* Position of the actions inside the card.
*/
this.align = 'start';
}
MatCardActions.decorators = [
{ type: _angular_core.Directive, args: [{
selector: 'mat-card-actions',
exportAs: 'matCardActions',
host: {
'class': 'mat-card-actions',
'[class.mat-card-actions-align-end]': 'align === "end"',
}
},] },
];
/** @nocollapse */
MatCardActions.ctorParameters = function () { return []; };
MatCardActions.propDecorators = {
"align": [{ type: _angular_core.Input },],
};
return MatCardActions;
}());
/**
* Footer of a card, needed as it's used as a selector in the API.
* \@docs-private
*/
var MatCardFooter = /** @class */ (function () {
function MatCardFooter() {
}
MatCardFooter.decorators = [
{ type: _angular_core.Directive, args: [{
selector: 'mat-card-footer',
host: { 'class': 'mat-card-footer' }
},] },
];
/** @nocollapse */
MatCardFooter.ctorParameters = function () { return []; };
return MatCardFooter;
}());
/**
* Image used in a card, needed to add the mat- CSS styling.
* \@docs-private
*/
var MatCardImage = /** @class */ (function () {
function MatCardImage() {
}
MatCardImage.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[mat-card-image], [matCardImage]',
host: { 'class': 'mat-card-image' }
},] },
];
/** @nocollapse */
MatCardImage.ctorParameters = function () { return []; };
return MatCardImage;
}());
/**
* Image used in a card, needed to add the mat- CSS styling.
* \@docs-private
*/
var MatCardSmImage = /** @class */ (function () {
function MatCardSmImage() {
}
MatCardSmImage.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[mat-card-sm-image], [matCardImageSmall]',
host: { 'class': 'mat-card-sm-image' }
},] },
];
/** @nocollapse */
MatCardSmImage.ctorParameters = function () { return []; };
return MatCardSmImage;
}());
/**
* Image used in a card, needed to add the mat- CSS styling.
* \@docs-private
*/
var MatCardMdImage = /** @class */ (function () {
function MatCardMdImage() {
}
MatCardMdImage.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[mat-card-md-image], [matCardImageMedium]',
host: { 'class': 'mat-card-md-image' }
},] },
];
/** @nocollapse */
MatCardMdImage.ctorParameters = function () { return []; };
return MatCardMdImage;
}());
/**
* Image used in a card, needed to add the mat- CSS styling.
* \@docs-private
*/
var MatCardLgImage = /** @class */ (function () {
function MatCardLgImage() {
}
MatCardLgImage.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[mat-card-lg-image], [matCardImageLarge]',
host: { 'class': 'mat-card-lg-image' }
},] },
];
/** @nocollapse */
MatCardLgImage.ctorParameters = function () { return []; };
return MatCardLgImage;
}());
/**
* Large image used in a card, needed to add the mat- CSS styling.
* \@docs-private
*/
var MatCardXlImage = /** @class */ (function () {
function MatCardXlImage() {
}
MatCardXlImage.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[mat-card-xl-image], [matCardImageXLarge]',
host: { 'class': 'mat-card-xl-image' }
},] },
];
/** @nocollapse */
MatCardXlImage.ctorParameters = function () { return []; };
return MatCardXlImage;
}());
/**
* Avatar image used in a card, needed to add the mat- CSS styling.
* \@docs-private
*/
var MatCardAvatar = /** @class */ (function () {
function MatCardAvatar() {
}
MatCardAvatar.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[mat-card-avatar], [matCardAvatar]',
host: { 'class': 'mat-card-avatar' }
},] },
];
/** @nocollapse */
MatCardAvatar.ctorParameters = function () { return []; };
return MatCardAvatar;
}());
/**
* A basic content container component that adds the styles of a Material design card.
*
* While this component can be used alone, it also provides a number
* of preset styles for common card sections, including:
* - mat-card-title
* - mat-card-subtitle
* - mat-card-content
* - mat-card-actions
* - mat-card-footer
*/
var MatCard = /** @class */ (function () {
function MatCard() {
}
MatCard.decorators = [
{ type: _angular_core.Component, args: [{selector: 'mat-card',
exportAs: 'matCard',
template: "<ng-content></ng-content><ng-content select=\"mat-card-footer\"></ng-content>",
styles: [".mat-card{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:24px;border-radius:2px}.mat-card:not([class*=mat-elevation-z]){box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mat-card .mat-divider{position:absolute;left:0;width:100%}[dir=rtl] .mat-card .mat-divider{left:auto;right:0}.mat-card .mat-divider.mat-divider-inset{position:static;margin:0}@media screen and (-ms-high-contrast:active){.mat-card{outline:solid 1px}}.mat-card-flat{box-shadow:none}.mat-card-actions,.mat-card-content,.mat-card-subtitle,.mat-card-title{display:block;margin-bottom:16px}.mat-card-actions{margin-left:-16px;margin-right:-16px;padding:8px 0}.mat-card-actions-align-end{display:flex;justify-content:flex-end}.mat-card-image{width:calc(100% + 48px);margin:0 -24px 16px -24px}.mat-card-xl-image{width:240px;height:240px;margin:-8px}.mat-card-footer{display:block;margin:0 -24px -24px -24px}.mat-card-actions .mat-button,.mat-card-actions .mat-raised-button{margin:0 4px}.mat-card-header{display:flex;flex-direction:row}.mat-card-header-text{margin:0 8px}.mat-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0}.mat-card-lg-image,.mat-card-md-image,.mat-card-sm-image{margin:-8px 0}.mat-card-title-group{display:flex;justify-content:space-between;margin:0 -8px}.mat-card-sm-image{width:80px;height:80px}.mat-card-md-image{width:112px;height:112px}.mat-card-lg-image{width:152px;height:152px}@media (max-width:599px){.mat-card{padding:24px 16px}.mat-card-actions{margin-left:-8px;margin-right:-8px}.mat-card-image{width:calc(100% + 32px);margin:16px -16px}.mat-card-title-group{margin:0}.mat-card-xl-image{margin-left:0;margin-right:0}.mat-card-header{margin:-8px 0 0 0}.mat-card-footer{margin-left:-16px;margin-right:-16px}}.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:-24px}.mat-card>.mat-card-actions:last-child{margin-bottom:-16px;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}"],
encapsulation: _angular_core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
host: { 'class': 'mat-card' }
},] },
];
/** @nocollapse */
MatCard.ctorParameters = function () { return []; };
return MatCard;
}());
/**
* Component intended to be used within the `<mat-card>` component. It adds styles for a
* preset header section (i.e. a title, subtitle, and avatar layout).
* \@docs-private
*/
var MatCardHeader = /** @class */ (function () {
function MatCardHeader() {
}
MatCardHeader.decorators = [
{ type: _angular_core.Component, args: [{selector: 'mat-card-header',
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>",
encapsulation: _angular_core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
host: { 'class': 'mat-card-header' }
},] },
];
/** @nocollapse */
MatCardHeader.ctorParameters = function () { return []; };
return MatCardHeader;
}());
/**
* Component intended to be used within the `<mat-card>` component. It adds styles for a preset
* layout that groups an image with a title section.
* \@docs-private
*/
var MatCardTitleGroup = /** @class */ (function () {
function MatCardTitleGroup() {
}
MatCardTitleGroup.decorators = [
{ type: _angular_core.Component, args: [{selector: 'mat-card-title-group',
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>",
encapsulation: _angular_core.ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: _angular_core.ChangeDetectionStrategy.OnPush,
host: { 'class': 'mat-card-title-group' }
},] },
];
/** @nocollapse */
MatCardTitleGroup.ctorParameters = function () { return []; };
return MatCardTitleGroup;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatCardModule = /** @class */ (function () {
function MatCardModule() {
}
MatCardModule.decorators = [
{ type: _angular_core.NgModule, args: [{
imports: [_angular_material_core.MatCommonModule],
exports: [
MatCard,
MatCardHeader,
MatCardTitleGroup,
MatCardContent,
MatCardTitle,
MatCardSubtitle,
MatCardActions,
MatCardFooter,
MatCardSmImage,
MatCardMdImage,
MatCardLgImage,
MatCardImage,
MatCardXlImage,
MatCardAvatar,
_angular_material_core.MatCommonModule,
],
declarations: [
MatCard, MatCardHeader, MatCardTitleGroup, MatCardContent, MatCardTitle, MatCardSubtitle,
MatCardActions, MatCardFooter, MatCardSmImage, MatCardMdImage, MatCardLgImage, MatCardImage,
MatCardXlImage, MatCardAvatar,
],
},] },
];
/** @nocollapse */
MatCardModule.ctorParameters = function () { return []; };
return MatCardModule;
}());
exports.MatCardContent = MatCardContent;
exports.MatCardTitle = MatCardTitle;
exports.MatCardSubtitle = MatCardSubtitle;
exports.MatCardActions = MatCardActions;
exports.MatCardFooter = MatCardFooter;
exports.MatCardImage = MatCardImage;
exports.MatCardSmImage = MatCardSmImage;
exports.MatCardMdImage = MatCardMdImage;
exports.MatCardLgImage = MatCardLgImage;
exports.MatCardXlImage = MatCardXlImage;
exports.MatCardAvatar = MatCardAvatar;
exports.MatCard = MatCard;
exports.MatCardHeader = MatCardHeader;
exports.MatCardTitleGroup = MatCardTitleGroup;
exports.MatCardModule = MatCardModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=material-card.umd.js.map