igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
450 lines (444 loc) • 21.4 kB
JavaScript
import * as i0 from '@angular/core';
import { HostBinding, Input, Directive, booleanAttribute, Component, inject, NgModule } from '@angular/core';
let NEXT_ID = 0;
/**
* IgxCardMedia is container for the card media section.
* Use it to wrap images and videos.
*/
class IgxCardMediaDirective {
constructor() {
/** @hidden @internal */
this.cssClass = 'igx-card__media';
/**
* Sets the `width` and `min-width` style property
* of the media container. If not provided it will be set to `auto`.
*
* @example
* ```html
* <igx-card-media width="300px"></igx-card-media>
* ```
*/
this.width = 'auto';
/**
* Sets the `height` style property of the media container.
* If not provided it will be set to `auto`.
*
* @example
* ```html
* <igx-card-media height="50%"></igx-card-media>
* ```
*/
this.height = 'auto';
/**
* Sets the `role` attribute of the media container.
*/
this.role = 'img';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCardMediaDirective, isStandalone: true, selector: "igx-card-media", inputs: { width: "width", height: "height", role: "role" }, host: { properties: { "class.igx-card__media": "this.cssClass", "style.width": "this.width", "style.min-width": "this.width", "style.height": "this.height", "attr.role": "this.role" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardMediaDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-card-media',
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-card__media']
}], width: [{
type: HostBinding,
args: ['style.width']
}, {
type: HostBinding,
args: ['style.min-width']
}, {
type: Input
}], height: [{
type: HostBinding,
args: ['style.height']
}, {
type: Input
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}] } });
/**
* IgxCardHeader is container for the card header
*/
class IgxCardHeaderComponent {
constructor() {
/** @hidden @internal */
this.cssClass = 'igx-card-header';
/**
* Sets the layout style of the header.
* By default the header elements(thumbnail and title/subtitle) are aligned horizontally.
*
* @example
* ```html
* <igx-card-header [vertical]="true"></igx-card-header>
* ```
*/
this.vertical = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxCardHeaderComponent, isStandalone: true, selector: "igx-card-header", inputs: { vertical: ["vertical", "vertical", booleanAttribute] }, host: { properties: { "class.igx-card-header": "this.cssClass", "class.igx-card-header--vertical": "this.vertical" } }, ngImport: i0, template: "<div class=\"igx-card-header__thumbnail\">\n <ng-content select=\"igx-avatar, igx-card-media, [igxCardThumbnail]\"></ng-content>\n</div>\n\n<div class=\"igx-card-header__titles\">\n <ng-content select=\"\n [igxCardHeaderTitle],\n [igxCardHeaderSubtitle],\n .igx-card-header__title,\n .igx-card-header__title--small,\n .igx-card-header__subtitle\">\n </ng-content>\n</div>\n\n<ng-content></ng-content>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-card-header', standalone: true, template: "<div class=\"igx-card-header__thumbnail\">\n <ng-content select=\"igx-avatar, igx-card-media, [igxCardThumbnail]\"></ng-content>\n</div>\n\n<div class=\"igx-card-header__titles\">\n <ng-content select=\"\n [igxCardHeaderTitle],\n [igxCardHeaderSubtitle],\n .igx-card-header__title,\n .igx-card-header__title--small,\n .igx-card-header__subtitle\">\n </ng-content>\n</div>\n\n<ng-content></ng-content>\n" }]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-card-header']
}], vertical: [{
type: HostBinding,
args: ['class.igx-card-header--vertical']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
/**
* IgxCardThumbnail is container for the card thumbnail section.
* Use it to wrap anything you want to be used as a thumbnail.
*/
class IgxCardThumbnailDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardThumbnailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCardThumbnailDirective, isStandalone: true, selector: "[igxCardThumbnail]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardThumbnailDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxCardThumbnail]',
standalone: true
}]
}] });
/**
* igxCardHeaderTitle is used to denote the header title in a card.
* Use it to tag text nodes.
*/
class IgxCardHeaderTitleDirective {
constructor() {
/** @hidden @internal */
this.cssClass = 'igx-card__header__title';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCardHeaderTitleDirective, isStandalone: true, selector: "[igxCardHeaderTitle]", host: { properties: { "class.igx-card-header__title": "this.cssClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardHeaderTitleDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxCardHeaderTitle]',
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-card-header__title']
}] } });
/**
* igxCardHeaderSubtitle is used to denote the header subtitle in a card.
* Use it to tag text nodes.
*/
class IgxCardHeaderSubtitleDirective {
constructor() {
/** @hidden @internal */
this.cssClass = 'igx-card-header__subtitle';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardHeaderSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCardHeaderSubtitleDirective, isStandalone: true, selector: "[igxCardHeaderSubtitle]", host: { properties: { "class.igx-card-header__subtitle": "this.cssClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardHeaderSubtitleDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxCardHeaderSubtitle]',
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-card-header__subtitle']
}] } });
/**
* IgxCardContent is container for the card content.
*/
class IgxCardContentDirective {
constructor() {
/** @hidden @internal */
this.cssClass = 'igx-card-content';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCardContentDirective, isStandalone: true, selector: "igx-card-content", host: { properties: { "class.igx-card-content": "this.cssClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardContentDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-card-content',
standalone: true
}]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-card-content']
}] } });
/**
* IgxCardFooter is container for the card footer
*/
class IgxCardFooterDirective {
constructor() {
/**
* Sets the value of the `role` attribute of the card footer.
* By default the value is set to `footer`.
*
* @example
* ```html
* <igx-card-footer role="footer"></igx-card-footer>
* ```
*/
this.role = 'footer';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxCardFooterDirective, isStandalone: true, selector: "igx-card-footer", inputs: { role: "role" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardFooterDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-card-footer',
standalone: true
}]
}], propDecorators: { role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}] } });
/**
* Card provides a way to display organized content in appealing way.
*
* @igxModule IgxCardModule
*
* @igxTheme igx-card-theme, igx-icon-theme, igx-button-theme
*
* @igxKeywords card, button, avatar, icon
*
* @igxGroup Layouts
*
* @remarks
* The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are
* five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer.
*
* @example
* ```html
* <igx-card>
* <igx-card-header>
* <h3 igxCardHeaderTitle>{{title}}</h3>
* <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
* </igx-card-header>
* <igx-card-actions>
* <button type="button" igxButton igxRipple>Share</button>
* <button type="button" igxButton igxRipple>Play Album</button>
* </igx-card-actions>
* </igx-card>
* ```
*/
class IgxCardComponent {
constructor() {
/**
* Sets/gets the `id` of the card.
* If not set, `id` will have value `"igx-card-0"`;
*
* @example
* ```html
* <igx-card id="my-first-card"></igx-card>
* ```
* ```typescript
* let cardId = this.card.id;
* ```
*/
this.id = `igx-card-${NEXT_ID++}`;
/**
* Sets the `igx-card` css class to the card component.
*
* @hidden
* @internal
*/
this.cssClass = 'igx-card';
/**
* Sets the value of the `role` attribute of the card.
* By default the value is set to `group`.
*
* @example
* ```html
* <igx-card role="group"></igx-card>
* ```
*/
this.role = 'group';
/**
* Sets/gets whether the card is elevated.
* Default value is `false`.
*
* @example
* ```html
* <igx-card elevated></igx-card>
* ```
* ```typescript
* let cardElevation = this.card.elevated;
* ```
*/
this.elevated = false;
/**
* Sets the value of the `horizontal` attribute of the card.
* Setting this to `true` will make the different card sections align horizontally,
* essentially flipping the card to the side.
*
* @example
* ```html
* <igx-card [horizontal]="true"></igx-card>
* ```
*/
this.horizontal = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxCardComponent, isStandalone: true, selector: "igx-card", inputs: { id: "id", role: "role", elevated: ["elevated", "elevated", booleanAttribute], horizontal: ["horizontal", "horizontal", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "class.igx-card": "this.cssClass", "attr.role": "this.role", "class.igx-card--elevated": "this.elevated", "class.igx-card--horizontal": "this.horizontal" } }, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-card', standalone: true, template: "<ng-content></ng-content>\n" }]
}], propDecorators: { id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], cssClass: [{
type: HostBinding,
args: ['class.igx-card']
}], role: [{
type: HostBinding,
args: ['attr.role']
}, {
type: Input
}], elevated: [{
type: Input,
args: [{ transform: booleanAttribute }]
}, {
type: HostBinding,
args: ['class.igx-card--elevated']
}], horizontal: [{
type: HostBinding,
args: ['class.igx-card--horizontal']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
const IgxCardActionsLayout = {
START: 'start',
JUSTIFY: 'justify'
};
/**
* IgxCardActions is container for the card actions.
*/
class IgxCardActionsComponent {
constructor() {
this.card = inject(IgxCardComponent, { optional: true });
/**
* Sets the layout style of the actions.
* You can justify the elements slotted in the igx-card-action container
* so that they are positioned equally from one another taking up all the
* space available along the card actions axis.
*
* @example
* ```html
* <igx-card-actions layout="justify"></igx-card-actions>
* ```
*/
this.layout = IgxCardActionsLayout.START;
/**
* Sets the vertical attribute of the actions.
* When set to `true` the actions will be layed out vertically.
*/
this.vertical = false;
this.isVerticalSet = false;
}
/**
* A getter that returns `true` when the layout has been
* set to `justify`.
*/
get isJustifyLayout() {
return this.layout === IgxCardActionsLayout.JUSTIFY;
}
/**
* @hidden
* @internal
*/
ngOnChanges(changes) {
for (const prop in changes) {
if (prop === 'vertical') {
this.isVerticalSet = true;
}
}
}
/**
* @hidden
* @internal
*/
ngOnInit() {
if (!this.isVerticalSet && this.card.horizontal) {
this.vertical = true;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxCardActionsComponent, isStandalone: true, selector: "igx-card-actions", inputs: { layout: "layout", vertical: ["vertical", "vertical", booleanAttribute] }, host: { properties: { "class.igx-card-actions": "this.layout", "class.igx-card-actions--vertical": "this.vertical", "class.igx-card-actions--justify": "this.isJustifyLayout" } }, usesOnChanges: true, ngImport: i0, template: "<div #buttons class=\"igx-card-actions__start\">\n <ng-content select=\"[igxStart], [igxButton]:not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n <ng-content select=\"[igxEnd], [igxIconButton]:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardActionsComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-card-actions', standalone: true, template: "<div #buttons class=\"igx-card-actions__start\">\n <ng-content select=\"[igxStart], [igxButton]:not([igxEnd])\"></ng-content>\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"igx-card-actions__end\">\n <ng-content select=\"[igxEnd], [igxIconButton]:not([igxStart]), igx-icon:not([igxStart])\"></ng-content>\n</div>\n" }]
}], propDecorators: { layout: [{
type: HostBinding,
args: ['class.igx-card-actions']
}, {
type: Input
}], vertical: [{
type: HostBinding,
args: ['class.igx-card-actions--vertical']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], isJustifyLayout: [{
type: HostBinding,
args: ['class.igx-card-actions--justify']
}] } });
/* NOTE: Card directives collection for ease-of-use import in standalone components scenario */
const IGX_CARD_DIRECTIVES = [
IgxCardComponent,
IgxCardHeaderComponent,
IgxCardMediaDirective,
IgxCardContentDirective,
IgxCardActionsComponent,
IgxCardFooterDirective,
IgxCardHeaderTitleDirective,
IgxCardHeaderSubtitleDirective,
IgxCardThumbnailDirective
];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxCardModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxCardModule, imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective], exports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxCardFooterDirective, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardThumbnailDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxCardModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_CARD_DIRECTIVES
],
exports: [
...IGX_CARD_DIRECTIVES
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_CARD_DIRECTIVES, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective };
//# sourceMappingURL=igniteui-angular-card.mjs.map