@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.
40 lines • 8.05 kB
JavaScript
import { Component } from '@angular/core';
import { Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/toolbar";
import * as i2 from "@angular/material/card";
import * as i3 from "@angular/material/divider";
import * as i4 from "@angular/common";
export class TdLayoutCardOverComponent {
constructor() {
/**
* cardWidth?: string
*
* Card flex width in %.
* Defaults to 70%.
*/
this.cardWidth = 70;
/**
* color?: 'accent' | 'primary' | 'warn'
*
* toolbar color option: primary | accent | warn.
* If [color] is not set, primary is used.
*/
this.color = 'primary';
}
}
TdLayoutCardOverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n cardSubtitle\n }}</mat-card-subtitle>\n <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n <ng-content></ng-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"], components: [{ type: i1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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-title *ngIf=\"cardTitle\">{{ cardTitle }}</mat-card-title>\n <mat-card-subtitle *ngIf=\"cardSubtitle\">{{\n cardSubtitle\n }}</mat-card-subtitle>\n <mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\n <ng-content></ng-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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5b3V0LWNhcmQtb3Zlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvbGF5b3V0L3NyYy9sYXlvdXQtY2FyZC1vdmVyL2xheW91dC1jYXJkLW92ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL2xheW91dC9zcmMvbGF5b3V0LWNhcmQtb3Zlci9sYXlvdXQtY2FyZC1vdmVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7O0FBT3RDLE1BQU0sT0FBTyx5QkFBeUI7SUFMdEM7UUFvQkU7Ozs7O1dBS0c7UUFDTSxjQUFTLEdBQUksRUFBRSxDQUFDO1FBRXpCOzs7OztXQUtHO1FBQ00sVUFBSyxHQUFrQyxTQUFTLENBQUM7S0FDM0Q7O3NIQTlCWSx5QkFBeUI7MEdBQXpCLHlCQUF5QixxS0NSdEMsZ3VCQW9CQTsyRkRaYSx5QkFBeUI7a0JBTHJDLFNBQVM7K0JBQ0UscUJBQXFCOzhCQVV0QixTQUFTO3NCQUFqQixLQUFLO2dCQU9HLFlBQVk7c0JBQXBCLEtBQUs7Z0JBUUcsU0FBUztzQkFBakIsS0FBSztnQkFRRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RkLWxheW91dC1jYXJkLW92ZXInLFxuICBzdHlsZVVybHM6IFsnLi9sYXlvdXQtY2FyZC1vdmVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIHRlbXBsYXRlVXJsOiAnLi9sYXlvdXQtY2FyZC1vdmVyLmNvbXBvbmVudC5odG1sJyxcbn0pXG5leHBvcnQgY2xhc3MgVGRMYXlvdXRDYXJkT3ZlckNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBjYXJkVGl0bGU/OiBzdHJpbmdcbiAgICpcbiAgICogVGl0bGUgc2V0IGluIGNhcmQuXG4gICAqL1xuICBASW5wdXQoKSBjYXJkVGl0bGU/OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIGNhcmRTdWJ0aXRsZT86IHN0cmluZ1xuICAgKlxuICAgKiBTdWJ0aXRsZSBzZXQgaW4gY2FyZC5cbiAgICovXG4gIEBJbnB1dCgpIGNhcmRTdWJ0aXRsZT86IHN0cmluZztcblxuICAvKipcbiAgICogY2FyZFdpZHRoPzogc3RyaW5nXG4gICAqXG4gICAqIENhcmQgZmxleCB3aWR0aCBpbiAlLlxuICAgKiBEZWZhdWx0cyB0byA3MCUuXG4gICAqL1xuICBASW5wdXQoKSBjYXJkV2lkdGg/ID0gNzA7XG5cbiAgLyoqXG4gICAqIGNvbG9yPzogJ2FjY2VudCcgfCAncHJpbWFyeScgfCAnd2FybidcbiAgICpcbiAgICogdG9vbGJhciBjb2xvciBvcHRpb246IHByaW1hcnkgfCBhY2NlbnQgfCB3YXJuLlxuICAgKiBJZiBbY29sb3JdIGlzIG5vdCBzZXQsIHByaW1hcnkgaXMgdXNlZC5cbiAgICovXG4gIEBJbnB1dCgpIGNvbG9yOiAnYWNjZW50JyB8ICdwcmltYXJ5JyB8ICd3YXJuJyA9ICdwcmltYXJ5Jztcbn1cbiIsIjxtYXQtdG9vbGJhciBjbGFzcz1cInRkLWxheW91dC10b29sYmFyXCIgW2NvbG9yXT1cImNvbG9yXCI+PC9tYXQtdG9vbGJhcj5cbjxkaXYgY2xhc3M9XCJ0ZC1sYXlvdXQtY2FyZC1vdmVyLXdyYXBwZXJcIj5cbiAgPGRpdlxuICAgIGNsYXNzPVwidGQtbGF5b3V0LWNhcmQtb3ZlclwiXG4gICAgW3N0eWxlLm1heC13aWR0aC4lXT1cImNhcmRXaWR0aFwiXG4gICAgW3N0eWxlLmZsZXhdPVwiJzEgMSAnICsgY2FyZFdpZHRoICsgJyUnXCJcbiAgICBbc3R5bGUuLW1zLWZsZXhdPVwiJzEgMSAnICsgY2FyZFdpZHRoICsgJyUnXCJcbiAgICBbc3R5bGUuLXdlYmtpdC1ib3gtZmxleF09XCIxXCJcbiAgPlxuICAgIDxtYXQtY2FyZD5cbiAgICAgIDxtYXQtY2FyZC10aXRsZSAqbmdJZj1cImNhcmRUaXRsZVwiPnt7IGNhcmRUaXRsZSB9fTwvbWF0LWNhcmQtdGl0bGU+XG4gICAgICA8bWF0LWNhcmQtc3VidGl0bGUgKm5nSWY9XCJjYXJkU3VidGl0bGVcIj57e1xuICAgICAgICBjYXJkU3VidGl0bGVcbiAgICAgIH19PC9tYXQtY2FyZC1zdWJ0aXRsZT5cbiAgICAgIDxtYXQtZGl2aWRlciAqbmdJZj1cImNhcmRUaXRsZSB8fCBjYXJkU3VidGl0bGVcIj48L21hdC1kaXZpZGVyPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvbWF0LWNhcmQ+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3RkLWFmdGVyLWNhcmRdXCI+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19