@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
50 lines • 8.8 kB
JavaScript
import { Component } from '@angular/core';
import { Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/toolbar";
import * as i3 from "@angular/material/card";
import * as i4 from "@angular/material/divider";
export class TdLayoutCardOverComponent {
/**
* cardTitle?: string
*
* Title set in card.
*/
cardTitle;
/**
* cardSubtitle?: string
*
* Subtitle set in card.
*/
cardSubtitle;
/**
* cardWidth?: string
*
* Card flex width in %.
* Defaults to 70%.
*/
cardWidth = 70;
/**
* color?: 'accent' | 'primary' | 'warn'
*
* toolbar color option: primary | accent | warn.
* If [color] is not set, primary is used.
*/
color;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdLayoutCardOverComponent, selector: "td-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n <div\n class=\"td-layout-card-over\"\n [style.max-width.%]=\"cardWidth\"\n [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-webkit-box-flex]=\"1\"\n >\n <mat-card>\n <mat-card-header>\n <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n cardSubtitle\n }}</mat-card-subtitle>\n </mat-card-header>\n <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n <mat-card-content>\n <ng-content></ng-content>\n </mat-card-content>\n </mat-card>\n <ng-content select=\"[td-after-card]\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdLayoutCardOverComponent, decorators: [{
type: Component,
args: [{ selector: 'td-layout-card-over', template: "<mat-toolbar class=\"td-layout-toolbar\" [color]=\"color\"></mat-toolbar>\n<div class=\"td-layout-card-over-wrapper\">\n <div\n class=\"td-layout-card-over\"\n [style.max-width.%]=\"cardWidth\"\n [style.flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\n [style.-webkit-box-flex]=\"1\"\n >\n <mat-card>\n <mat-card-header>\n <mat-card-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n cardSubtitle\n }}</mat-card-subtitle>\n </mat-card-header>\n <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n <mat-card-content>\n <ng-content></ng-content>\n </mat-card-content>\n </mat-card>\n <ng-content select=\"[td-after-card]\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [td-after-card]{display:block}.td-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 600px){.td-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.td-layout-card-over-wrapper .td-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 599px){.td-layout-card-over-wrapper .td-layout-card-over{max-width:100%!important}}\n"] }]
}], propDecorators: { cardTitle: [{
type: Input
}], cardSubtitle: [{
type: Input
}], cardWidth: [{
type: Input
}], color: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LWNhcmQtb3Zlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvbGF5b3V0L3NyYy9sYXlvdXQtY2FyZC1vdmVyL2xheW91dC1jYXJkLW92ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL2xheW91dC9zcmMvbGF5b3V0LWNhcmQtb3Zlci9sYXlvdXQtY2FyZC1vdmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7O0FBT3RDLE1BQU0sT0FBTyx5QkFBeUI7SUFDcEM7Ozs7T0FJRztJQUNNLFNBQVMsQ0FBVTtJQUU1Qjs7OztPQUlHO0lBQ00sWUFBWSxDQUFVO0lBRS9COzs7OztPQUtHO0lBQ00sU0FBUyxHQUFJLEVBQUUsQ0FBQztJQUV6Qjs7Ozs7T0FLRztJQUNNLEtBQUssQ0FBaUM7dUdBN0JwQyx5QkFBeUI7MkZBQXpCLHlCQUF5QixxS0NSdEMsazFCQXdCQTs7MkZEaEJhLHlCQUF5QjtrQkFMckMsU0FBUzsrQkFDRSxxQkFBcUI7OEJBVXRCLFNBQVM7c0JBQWpCLEtBQUs7Z0JBT0csWUFBWTtzQkFBcEIsS0FBSztnQkFRRyxTQUFTO3NCQUFqQixLQUFLO2dCQVFHLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGQtbGF5b3V0LWNhcmQtb3ZlcicsXG4gIHN0eWxlVXJsczogWycuL2xheW91dC1jYXJkLW92ZXIuY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2xheW91dC1jYXJkLW92ZXIuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBUZExheW91dENhcmRPdmVyQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIGNhcmRUaXRsZT86IHN0cmluZ1xuICAgKlxuICAgKiBUaXRsZSBzZXQgaW4gY2FyZC5cbiAgICovXG4gIEBJbnB1dCgpIGNhcmRUaXRsZT86IHN0cmluZztcblxuICAvKipcbiAgICogY2FyZFN1YnRpdGxlPzogc3RyaW5nXG4gICAqXG4gICAqIFN1YnRpdGxlIHNldCBpbiBjYXJkLlxuICAgKi9cbiAgQElucHV0KCkgY2FyZFN1YnRpdGxlPzogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBjYXJkV2lkdGg/OiBzdHJpbmdcbiAgICpcbiAgICogQ2FyZCBmbGV4IHdpZHRoIGluICUuXG4gICAqIERlZmF1bHRzIHRvIDcwJS5cbiAgICovXG4gIEBJbnB1dCgpIGNhcmRXaWR0aD8gPSA3MDtcblxuICAvKipcbiAgICogY29sb3I/OiAnYWNjZW50JyB8ICdwcmltYXJ5JyB8ICd3YXJuJ1xuICAgKlxuICAgKiB0b29sYmFyIGNvbG9yIG9wdGlvbjogcHJpbWFyeSB8IGFjY2VudCB8IHdhcm4uXG4gICAqIElmIFtjb2xvcl0gaXMgbm90IHNldCwgcHJpbWFyeSBpcyB1c2VkLlxuICAgKi9cbiAgQElucHV0KCkgY29sb3I/OiAnYWNjZW50JyB8ICdwcmltYXJ5JyB8ICd3YXJuJztcbn1cbiIsIjxtYXQtdG9vbGJhciBjbGFzcz1cInRkLWxheW91dC10b29sYmFyXCIgW2NvbG9yXT1cImNvbG9yXCI+PC9tYXQtdG9vbGJhcj5cbjxkaXYgY2xhc3M9XCJ0ZC1sYXlvdXQtY2FyZC1vdmVyLXdyYXBwZXJcIj5cbiAgPGRpdlxuICAgIGNsYXNzPVwidGQtbGF5b3V0LWNhcmQtb3ZlclwiXG4gICAgW3N0eWxlLm1heC13aWR0aC4lXT1cImNhcmRXaWR0aFwiXG4gICAgW3N0eWxlLmZsZXhdPVwiJzEgMSAnICsgY2FyZFdpZHRoICsgJyUnXCJcbiAgICBbc3R5bGUuLW1zLWZsZXhdPVwiJzEgMSAnICsgY2FyZFdpZHRoICsgJyUnXCJcbiAgICBbc3R5bGUuLXdlYmtpdC1ib3gtZmxleF09XCIxXCJcbiAgPlxuICAgIDxtYXQtY2FyZD5cbiAgICAgIDxtYXQtY2FyZC1oZWFkZXI+XG4gICAgICAgIDxtYXQtY2FyZC10aXRsZSAqbmdJZj1cImNhcmRUaXRsZVwiPnt7IGNhcmRUaXRsZSB9fTwvbWF0LWNhcmQtdGl0bGU+XG4gICAgICAgIDxtYXQtY2FyZC1zdWJ0aXRsZSAqbmdJZj1cImNhcmRTdWJ0aXRsZVwiPnt7XG4gICAgICAgICAgY2FyZFN1YnRpdGxlXG4gICAgICAgIH19PC9tYXQtY2FyZC1zdWJ0aXRsZT5cbiAgICAgIDwvbWF0LWNhcmQtaGVhZGVyPlxuICAgICAgPG1hdC1kaXZpZGVyICpuZ0lmPVwiY2FyZFRpdGxlIHx8IGNhcmRTdWJ0aXRsZVwiPjwvbWF0LWRpdmlkZXI+XG4gICAgICA8bWF0LWNhcmQtY29udGVudD5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC9tYXQtY2FyZC1jb250ZW50PlxuICAgIDwvbWF0LWNhcmQ+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3RkLWFmdGVyLWNhcmRdXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19