carbon-components-angular
Version:
Next generation components
83 lines • 6.82 kB
JavaScript
import { Component, HostBinding, Input } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* Build application's tiles using this component. Get started with importing the module:
*
* ```typescript
* import { TilesModule } from 'carbon-components-angular';
* ```
*
* ```html
* <cds-tile>
* tile content
* </cds-tile>
* ```
*
* [See demo](../../?path=/story/components-tiles--basic)
*/
export class Tile {
constructor() {
this.tileClass = true;
/**
* When `true` with a `decorator`, applies rounded-corner styling.
*/
this.hasRoundedCorners = false;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* Set to `"light"` to apply the light style
*/
this.theme = "dark";
}
get lightThemeEnabled() {
return this.theme === "light";
}
get hasDecorator() {
return !!this.decorator;
}
get decoratorRounded() {
return !!this.decorator && this.hasRoundedCorners;
}
}
Tile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Tile, deps: [], target: i0.ɵɵFactoryTarget.Component });
Tile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Tile, selector: "cds-tile, ibm-tile", inputs: { decorator: "decorator", hasRoundedCorners: "hasRoundedCorners", theme: "theme" }, host: { properties: { "class.cds--tile": "this.tileClass", "class.cds--tile--light": "this.lightThemeEnabled", "class.cds--tile--decorator": "this.hasDecorator", "class.cds--tile--decorator-rounded": "this.decoratorRounded" } }, ngImport: i0, template: `
<ng-content></ng-content>
<ng-container *ngIf="decorator">
<div class="cds--tile--inner-decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Tile, decorators: [{
type: Component,
args: [{
selector: "cds-tile, ibm-tile",
template: `
<ng-content></ng-content>
<ng-container *ngIf="decorator">
<div class="cds--tile--inner-decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
`
}]
}], propDecorators: { tileClass: [{
type: HostBinding,
args: ["class.cds--tile"]
}], lightThemeEnabled: [{
type: HostBinding,
args: ["class.cds--tile--light"]
}], hasDecorator: [{
type: HostBinding,
args: ["class.cds--tile--decorator"]
}], decoratorRounded: [{
type: HostBinding,
args: ["class.cds--tile--decorator-rounded"]
}], decorator: [{
type: Input
}], hasRoundedCorners: [{
type: Input
}], theme: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdGlsZXMvdGlsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxXQUFXLEVBQ1gsS0FBSyxFQUVMLE1BQU0sZUFBZSxDQUFDOzs7QUFFdkI7Ozs7Ozs7Ozs7Ozs7O0dBY0c7QUFZSCxNQUFNLE9BQU8sSUFBSTtJQVhqQjtRQVlpQyxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBbUJqRDs7V0FFRztRQUNNLHNCQUFpQixHQUFHLEtBQUssQ0FBQztRQUVuQzs7O1dBR0c7UUFDTSxVQUFLLEdBQXFCLE1BQU0sQ0FBQztLQUMxQztJQTNCQSxJQUEyQyxpQkFBaUI7UUFDM0QsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLE9BQU8sQ0FBQztJQUMvQixDQUFDO0lBRUQsSUFBK0MsWUFBWTtRQUMxRCxPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3pCLENBQUM7SUFFRCxJQUF1RCxnQkFBZ0I7UUFDdEUsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsaUJBQWlCLENBQUM7SUFDbkQsQ0FBQzs7aUdBYlcsSUFBSTtxRkFBSixJQUFJLDJYQVROOzs7Ozs7O0VBT1Q7MkZBRVcsSUFBSTtrQkFYaEIsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsb0JBQW9CO29CQUM5QixRQUFRLEVBQUU7Ozs7Ozs7RUFPVDtpQkFDRDs4QkFFZ0MsU0FBUztzQkFBeEMsV0FBVzt1QkFBQyxpQkFBaUI7Z0JBRWEsaUJBQWlCO3NCQUEzRCxXQUFXO3VCQUFDLHdCQUF3QjtnQkFJVSxZQUFZO3NCQUExRCxXQUFXO3VCQUFDLDRCQUE0QjtnQkFJYyxnQkFBZ0I7c0JBQXRFLFdBQVc7dUJBQUMsb0NBQW9DO2dCQU94QyxTQUFTO3NCQUFqQixLQUFLO2dCQUtHLGlCQUFpQjtzQkFBekIsS0FBSztnQkFNRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRDb21wb25lbnQsXG5cdEhvc3RCaW5kaW5nLFxuXHRJbnB1dCxcblx0VGVtcGxhdGVSZWZcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuLyoqXG4gKiBCdWlsZCBhcHBsaWNhdGlvbidzIHRpbGVzIHVzaW5nIHRoaXMgY29tcG9uZW50LiBHZXQgc3RhcnRlZCB3aXRoIGltcG9ydGluZyB0aGUgbW9kdWxlOlxuICpcbiAqIGBgYHR5cGVzY3JpcHRcbiAqIGltcG9ydCB7IFRpbGVzTW9kdWxlIH0gZnJvbSAnY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhcic7XG4gKiBgYGBcbiAqXG4gKiBgYGBodG1sXG4gKiA8Y2RzLXRpbGU+XG4gKiBcdFx0dGlsZSBjb250ZW50XG4gKiA8L2Nkcy10aWxlPlxuICogYGBgXG4gKlxuICogW1NlZSBkZW1vXSguLi8uLi8/cGF0aD0vc3RvcnkvY29tcG9uZW50cy10aWxlcy0tYmFzaWMpXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtdGlsZSwgaWJtLXRpbGVcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cdFx0PG5nLWNvbnRhaW5lciAqbmdJZj1cImRlY29yYXRvclwiPlxuXHRcdFx0PGRpdiBjbGFzcz1cImNkcy0tdGlsZS0taW5uZXItZGVjb3JhdG9yXCI+XG5cdFx0XHRcdDxuZy10ZW1wbGF0ZSBbbmdUZW1wbGF0ZU91dGxldF09XCJkZWNvcmF0b3JcIj48L25nLXRlbXBsYXRlPlxuXHRcdFx0PC9kaXY+XG5cdFx0PC9uZy1jb250YWluZXI+XG5cdGBcbn0pXG5leHBvcnQgY2xhc3MgVGlsZSB7XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tdGlsZVwiKSB0aWxlQ2xhc3MgPSB0cnVlO1xuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tdGlsZS0tbGlnaHRcIikgZ2V0IGxpZ2h0VGhlbWVFbmFibGVkKCkge1xuXHRcdHJldHVybiB0aGlzLnRoZW1lID09PSBcImxpZ2h0XCI7XG5cdH1cblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLXRpbGUtLWRlY29yYXRvclwiKSBnZXQgaGFzRGVjb3JhdG9yKCkge1xuXHRcdHJldHVybiAhIXRoaXMuZGVjb3JhdG9yO1xuXHR9XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS10aWxlLS1kZWNvcmF0b3Itcm91bmRlZFwiKSBnZXQgZGVjb3JhdG9yUm91bmRlZCgpIHtcblx0XHRyZXR1cm4gISF0aGlzLmRlY29yYXRvciAmJiB0aGlzLmhhc1JvdW5kZWRDb3JuZXJzO1xuXHR9XG5cblx0LyoqXG5cdCAqICoqRXhwZXJpbWVudGFsKio6IE9wdGlvbmFsIGRlY29yYXRvciAoZS5nLiBBSSBsYWJlbCkuXG5cdCAqL1xuXHRASW5wdXQoKSBkZWNvcmF0b3I6IFRlbXBsYXRlUmVmPGFueT47XG5cblx0LyoqXG5cdCAqIFdoZW4gYHRydWVgIHdpdGggYSBgZGVjb3JhdG9yYCwgYXBwbGllcyByb3VuZGVkLWNvcm5lciBzdHlsaW5nLlxuXHQgKi9cblx0QElucHV0KCkgaGFzUm91bmRlZENvcm5lcnMgPSBmYWxzZTtcblxuXHQvKipcblx0ICogQGRlcHJlY2F0ZWQgc2luY2UgdjUgLSBVc2UgYGNkc0xheWVyYCBkaXJlY3RpdmUgaW5zdGVhZFxuXHQgKiBTZXQgdG8gYFwibGlnaHRcImAgdG8gYXBwbHkgdGhlIGxpZ2h0IHN0eWxlXG5cdCAqL1xuXHRASW5wdXQoKSB0aGVtZTogXCJsaWdodFwiIHwgXCJkYXJrXCIgPSBcImRhcmtcIjtcbn1cbiJdfQ==