carbon-components-angular
Version:
Next generation components
127 lines • 10.7 kB
JavaScript
import { Component, Input, Output, EventEmitter, Optional } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "carbon-components-angular/link";
/**
* Build application's clickable tiles using this component. Get started with importing the module:
*
* ```typescript
* import { TilesModule } from 'carbon-components-angular';
* ```
*
* ```html
* <cds-clickable-tile>
* tile content
* </cds-clickable-tile>
* ```
*/
export class ClickableTile {
constructor(router) {
this.router = router;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* Set to `"light"` to apply the light style
*/
this.theme = "dark";
/**
* Sets the `href` attribute on the `cds-clickable-tile` element.
*/
this.href = "#";
/**
* Set to `true` to disable the clickable tile.
*/
this.disabled = false;
/**
* When `true` with a `decorator`, applies rounded styling.
*/
this.hasRoundedCorners = false;
/**
* Emits the navigation status promise when the link is activated
*/
this.navigation = new EventEmitter();
}
navigate(event) {
if (this.router && this.route && !this.disabled) {
event.preventDefault();
const status = this.router.navigate(this.route, this.routeExtras);
this.navigation.emit(status);
}
}
}
ClickableTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ClickableTile, deps: [{ token: i1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
ClickableTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ClickableTile, selector: "cds-clickable-tile, ibm-clickable-tile", inputs: { theme: "theme", href: "href", target: "target", rel: "rel", disabled: "disabled", decorator: "decorator", hasRoundedCorners: "hasRoundedCorners", route: "route", routeExtras: "routeExtras" }, outputs: { navigation: "navigation" }, ngImport: i0, template: `
<a
cdsLink
class="cds--tile cds--tile--clickable"
[ngClass]="{
'cds--tile--light': theme === 'light',
'cds--tile--disabled cds--link--disabled' : disabled,
'cds--tile--decorator': !!decorator,
'cds--tile--decorator-rounded': !!decorator && hasRoundedCorners
}"
tabindex="0"
(click)="navigate($event)"
[attr.href]="disabled ? null : href"
[attr.target]="target"
[attr.rel]="rel ? rel : null"
[attr.aria-disabled]="disabled">
<ng-content></ng-content>
<ng-container *ngIf="decorator">
<div class="cds--tile--inner-decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
</a>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "size", "visited", "disabled"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ClickableTile, decorators: [{
type: Component,
args: [{
selector: "cds-clickable-tile, ibm-clickable-tile",
template: `
<a
cdsLink
class="cds--tile cds--tile--clickable"
[ngClass]="{
'cds--tile--light': theme === 'light',
'cds--tile--disabled cds--link--disabled' : disabled,
'cds--tile--decorator': !!decorator,
'cds--tile--decorator-rounded': !!decorator && hasRoundedCorners
}"
tabindex="0"
(click)="navigate($event)"
[attr.href]="disabled ? null : href"
[attr.target]="target"
[attr.rel]="rel ? rel : null"
[attr.aria-disabled]="disabled">
<ng-content></ng-content>
<ng-container *ngIf="decorator">
<div class="cds--tile--inner-decorator">
<ng-template [ngTemplateOutlet]="decorator"></ng-template>
</div>
</ng-container>
</a>`
}]
}], ctorParameters: function () { return [{ type: i1.Router, decorators: [{
type: Optional
}] }]; }, propDecorators: { theme: [{
type: Input
}], href: [{
type: Input
}], target: [{
type: Input
}], rel: [{
type: Input
}], disabled: [{
type: Input
}], decorator: [{
type: Input
}], hasRoundedCorners: [{
type: Input
}], route: [{
type: Input
}], routeExtras: [{
type: Input
}], navigation: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xpY2thYmxlLXRpbGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3RpbGVzL2NsaWNrYWJsZS10aWxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFFBQVEsRUFFUixNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFHdkI7Ozs7Ozs7Ozs7OztHQVlHO0FBMkJILE1BQU0sT0FBTyxhQUFhO0lBc0R6QixZQUFrQyxNQUFjO1FBQWQsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQXJEaEQ7OztXQUdHO1FBQ00sVUFBSyxHQUFxQixNQUFNLENBQUM7UUFFMUM7O1dBRUc7UUFDTSxTQUFJLEdBQUcsR0FBRyxDQUFDO1FBWXBCOztXQUVHO1FBQ00sYUFBUSxHQUFHLEtBQUssQ0FBQztRQU8xQjs7V0FFRztRQUNNLHNCQUFpQixHQUFHLEtBQUssQ0FBQztRQWNuQzs7V0FFRztRQUNPLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBb0IsQ0FBQztJQUVULENBQUM7SUFFcEQsUUFBUSxDQUFDLEtBQUs7UUFDYixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDaEQsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQ2xFLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1NBQzdCO0lBQ0YsQ0FBQzs7MEdBOURXLGFBQWE7OEZBQWIsYUFBYSwrVEF4QmY7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7TUFzQkw7MkZBRU8sYUFBYTtrQkExQnpCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHdDQUF3QztvQkFDbEQsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O01Bc0JMO2lCQUNMOzswQkF1RGEsUUFBUTs0Q0FqRFosS0FBSztzQkFBYixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLRyxNQUFNO3NCQUFkLEtBQUs7Z0JBS0csR0FBRztzQkFBWCxLQUFLO2dCQUtHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0csU0FBUztzQkFBakIsS0FBSztnQkFLRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBTUcsS0FBSztzQkFBYixLQUFLO2dCQU1HLFdBQVc7c0JBQW5CLEtBQUs7Z0JBS0ksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0SW5wdXQsXG5cdE91dHB1dCxcblx0RXZlbnRFbWl0dGVyLFxuXHRPcHRpb25hbCxcblx0VGVtcGxhdGVSZWZcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IFJvdXRlciB9IGZyb20gXCJAYW5ndWxhci9yb3V0ZXJcIjtcblxuLyoqXG4gKiBCdWlsZCBhcHBsaWNhdGlvbidzIGNsaWNrYWJsZSB0aWxlcyB1c2luZyB0aGlzIGNvbXBvbmVudC4gR2V0IHN0YXJ0ZWQgd2l0aCBpbXBvcnRpbmcgdGhlIG1vZHVsZTpcbiAqXG4gKiBgYGB0eXBlc2NyaXB0XG4gKiBpbXBvcnQgeyBUaWxlc01vZHVsZSB9IGZyb20gJ2NhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXInO1xuICogYGBgXG4gKlxuICogYGBgaHRtbFxuICogPGNkcy1jbGlja2FibGUtdGlsZT5cbiAqIFx0XHR0aWxlIGNvbnRlbnRcbiAqIDwvY2RzLWNsaWNrYWJsZS10aWxlPlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtY2xpY2thYmxlLXRpbGUsIGlibS1jbGlja2FibGUtdGlsZVwiLFxuXHR0ZW1wbGF0ZTogYFxuXHQ8YVxuXHRcdGNkc0xpbmtcblx0XHRjbGFzcz1cImNkcy0tdGlsZSBjZHMtLXRpbGUtLWNsaWNrYWJsZVwiXG5cdFx0W25nQ2xhc3NdPVwie1xuXHRcdFx0J2Nkcy0tdGlsZS0tbGlnaHQnOiB0aGVtZSA9PT0gJ2xpZ2h0Jyxcblx0XHRcdCdjZHMtLXRpbGUtLWRpc2FibGVkIGNkcy0tbGluay0tZGlzYWJsZWQnIDogZGlzYWJsZWQsXG5cdFx0XHQnY2RzLS10aWxlLS1kZWNvcmF0b3InOiAhIWRlY29yYXRvcixcblx0XHRcdCdjZHMtLXRpbGUtLWRlY29yYXRvci1yb3VuZGVkJzogISFkZWNvcmF0b3IgJiYgaGFzUm91bmRlZENvcm5lcnNcblx0XHR9XCJcblx0XHR0YWJpbmRleD1cIjBcIlxuXHRcdChjbGljayk9XCJuYXZpZ2F0ZSgkZXZlbnQpXCJcblx0XHRbYXR0ci5ocmVmXT1cImRpc2FibGVkID8gbnVsbCA6IGhyZWZcIlxuXHRcdFthdHRyLnRhcmdldF09XCJ0YXJnZXRcIlxuXHRcdFthdHRyLnJlbF09XCJyZWwgPyByZWwgOiBudWxsXCJcblx0XHRbYXR0ci5hcmlhLWRpc2FibGVkXT1cImRpc2FibGVkXCI+XG5cdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdDxuZy1jb250YWluZXIgKm5nSWY9XCJkZWNvcmF0b3JcIj5cblx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLXRpbGUtLWlubmVyLWRlY29yYXRvclwiPlxuXHRcdFx0XHQ8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwiZGVjb3JhdG9yXCI+PC9uZy10ZW1wbGF0ZT5cblx0XHRcdDwvZGl2PlxuXHRcdDwvbmctY29udGFpbmVyPlxuXHQ8L2E+YFxufSlcbmV4cG9ydCBjbGFzcyBDbGlja2FibGVUaWxlIHtcblx0LyoqXG5cdCAqIEBkZXByZWNhdGVkIHNpbmNlIHY1IC0gVXNlIGBjZHNMYXllcmAgZGlyZWN0aXZlIGluc3RlYWRcblx0ICogU2V0IHRvIGBcImxpZ2h0XCJgIHRvIGFwcGx5IHRoZSBsaWdodCBzdHlsZVxuXHQgKi9cblx0QElucHV0KCkgdGhlbWU6IFwibGlnaHRcIiB8IFwiZGFya1wiID0gXCJkYXJrXCI7XG5cblx0LyoqXG5cdCAqIFNldHMgdGhlIGBocmVmYCBhdHRyaWJ1dGUgb24gdGhlIGBjZHMtY2xpY2thYmxlLXRpbGVgIGVsZW1lbnQuXG5cdCAqL1xuXHRASW5wdXQoKSBocmVmID0gXCIjXCI7XG5cblx0LyoqXG5cdCAqIFNldHMgdGhlIGB0YXJnZXRgIGF0dHJpYnV0ZSBvbiB0aGUgYGNkcy1jbGlja2FibGUtdGlsZWAgZWxlbWVudC5cblx0ICovXG5cdEBJbnB1dCgpIHRhcmdldDogc3RyaW5nO1xuXG5cdC8qKlxuXHQgKiBTZXRzIHRoZSBgcmVsYCBhdHRyaWJ1dGUgb24gdGhlIGBjZHMtY2xpY2thYmxlLXRpbGVgIGVsZW1lbnQuXG5cdCAqL1xuXHRASW5wdXQoKSByZWw6IHN0cmluZztcblxuXHQvKipcblx0ICogU2V0IHRvIGB0cnVlYCB0byBkaXNhYmxlIHRoZSBjbGlja2FibGUgdGlsZS5cblx0ICovXG5cdEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cblx0LyoqXG5cdCAqICoqRXhwZXJpbWVudGFsKio6IE9wdGlvbmFsIGRlY29yYXRvciAoZS5nLiBBSSBsYWJlbCkuXG5cdCAqL1xuXHRASW5wdXQoKSBkZWNvcmF0b3I6IFRlbXBsYXRlUmVmPGFueT47XG5cblx0LyoqXG5cdCAqIFdoZW4gYHRydWVgIHdpdGggYSBgZGVjb3JhdG9yYCwgYXBwbGllcyByb3VuZGVkIHN0eWxpbmcuXG5cdCAqL1xuXHRASW5wdXQoKSBoYXNSb3VuZGVkQ29ybmVycyA9IGZhbHNlO1xuXG5cdC8qKlxuXHQgKiBBcnJheSBvZiBjb21tYW5kcyB0byBzZW5kIHRvIHRoZSByb3V0ZXIgd2hlbiB0aGUgbGluayBpcyBhY3RpdmF0ZWRcblx0ICogU2VlOiBodHRwczovL2FuZ3VsYXIuaW8vYXBpL3JvdXRlci9Sb3V0ZXIjbmF2aWdhdGVcblx0ICovXG5cdEBJbnB1dCgpIHJvdXRlOiBhbnlbXTtcblxuXHQvKipcblx0ICogUm91dGVyIG9wdGlvbnMuIFVzZWQgaW4gY29uanVuY3Rpb24gd2l0aCBgcm91dGVgXG5cdCAqIFNlZTogaHR0cHM6Ly9hbmd1bGFyLmlvL2FwaS9yb3V0ZXIvUm91dGVyI25hdmlnYXRlXG5cdCAqL1xuXHRASW5wdXQoKSByb3V0ZUV4dHJhczogYW55O1xuXG5cdC8qKlxuXHQgKiBFbWl0cyB0aGUgbmF2aWdhdGlvbiBzdGF0dXMgcHJvbWlzZSB3aGVuIHRoZSBsaW5rIGlzIGFjdGl2YXRlZFxuXHQgKi9cblx0QE91dHB1dCgpIG5hdmlnYXRpb24gPSBuZXcgRXZlbnRFbWl0dGVyPFByb21pc2U8Ym9vbGVhbj4+KCk7XG5cblx0Y29uc3RydWN0b3IoQE9wdGlvbmFsKCkgcHJvdGVjdGVkIHJvdXRlcjogUm91dGVyKSB7fVxuXG5cdG5hdmlnYXRlKGV2ZW50KSB7XG5cdFx0aWYgKHRoaXMucm91dGVyICYmIHRoaXMucm91dGUgJiYgIXRoaXMuZGlzYWJsZWQpIHtcblx0XHRcdGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG5cdFx0XHRjb25zdCBzdGF0dXMgPSB0aGlzLnJvdXRlci5uYXZpZ2F0ZSh0aGlzLnJvdXRlLCB0aGlzLnJvdXRlRXh0cmFzKTtcblx0XHRcdHRoaXMubmF2aWdhdGlvbi5lbWl0KHN0YXR1cyk7XG5cdFx0fVxuXHR9XG59XG4iXX0=