carbon-components-angular
Version:
Next generation components
105 lines • 8.69 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;
/**
* 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", 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
}"
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>
</a>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "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
}"
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>
</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
}], route: [{
type: Input
}], routeExtras: [{
type: Input
}], navigation: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xpY2thYmxlLXRpbGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3RpbGVzL2NsaWNrYWJsZS10aWxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFFBQVEsRUFDUixNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFHdkI7Ozs7Ozs7Ozs7OztHQVlHO0FBb0JILE1BQU0sT0FBTyxhQUFhO0lBNEN6QixZQUFrQyxNQUFjO1FBQWQsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQTNDaEQ7OztXQUdHO1FBQ00sVUFBSyxHQUFxQixNQUFNLENBQUM7UUFFMUM7O1dBRUc7UUFDTSxTQUFJLEdBQUcsR0FBRyxDQUFDO1FBWXBCOztXQUVHO1FBQ00sYUFBUSxHQUFHLEtBQUssQ0FBQztRQWMxQjs7V0FFRztRQUNPLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBb0IsQ0FBQztJQUVULENBQUM7SUFFcEQsUUFBUSxDQUFDLEtBQUs7UUFDYixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDaEQsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQ2xFLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1NBQzdCO0lBQ0YsQ0FBQzs7MEdBcERXLGFBQWE7OEZBQWIsYUFBYSwrUEFqQmY7Ozs7Ozs7Ozs7Ozs7OztNQWVMOzJGQUVPLGFBQWE7a0JBbkJ6QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSx3Q0FBd0M7b0JBQ2xELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7O01BZUw7aUJBQ0w7OzBCQTZDYSxRQUFROzRDQXZDWixLQUFLO3NCQUFiLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFLRyxHQUFHO3NCQUFYLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFNRyxLQUFLO3NCQUFiLEtBQUs7Z0JBTUcsV0FBVztzQkFBbkIsS0FBSztnQkFLSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRJbnB1dCxcblx0T3V0cHV0LFxuXHRFdmVudEVtaXR0ZXIsXG5cdE9wdGlvbmFsXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBSb3V0ZXIgfSBmcm9tIFwiQGFuZ3VsYXIvcm91dGVyXCI7XG5cbi8qKlxuICogQnVpbGQgYXBwbGljYXRpb24ncyBjbGlja2FibGUgdGlsZXMgdXNpbmcgdGhpcyBjb21wb25lbnQuIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgVGlsZXNNb2R1bGUgfSBmcm9tICdjYXJib24tY29tcG9uZW50cy1hbmd1bGFyJztcbiAqIGBgYFxuICpcbiAqIGBgYGh0bWxcbiAqIDxjZHMtY2xpY2thYmxlLXRpbGU+XG4gKiBcdFx0dGlsZSBjb250ZW50XG4gKiA8L2Nkcy1jbGlja2FibGUtdGlsZT5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6IFwiY2RzLWNsaWNrYWJsZS10aWxlLCBpYm0tY2xpY2thYmxlLXRpbGVcIixcblx0dGVtcGxhdGU6IGBcblx0PGFcblx0XHRjZHNMaW5rXG5cdFx0Y2xhc3M9XCJjZHMtLXRpbGUgY2RzLS10aWxlLS1jbGlja2FibGVcIlxuXHRcdFtuZ0NsYXNzXT1cIntcblx0XHRcdCdjZHMtLXRpbGUtLWxpZ2h0JzogdGhlbWUgPT09ICdsaWdodCcsXG5cdFx0XHQnY2RzLS10aWxlLS1kaXNhYmxlZCBjZHMtLWxpbmstLWRpc2FibGVkJyA6IGRpc2FibGVkXG5cdFx0fVwiXG5cdFx0dGFiaW5kZXg9XCIwXCJcblx0XHQoY2xpY2spPVwibmF2aWdhdGUoJGV2ZW50KVwiXG5cdFx0W2F0dHIuaHJlZl09XCJkaXNhYmxlZCA/IG51bGwgOiBocmVmXCJcblx0XHRbYXR0ci50YXJnZXRdPVwidGFyZ2V0XCJcblx0XHRbYXR0ci5yZWxdPVwicmVsID8gcmVsIDogbnVsbFwiXG5cdFx0W2F0dHIuYXJpYS1kaXNhYmxlZF09XCJkaXNhYmxlZFwiPlxuXHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0PC9hPmBcbn0pXG5leHBvcnQgY2xhc3MgQ2xpY2thYmxlVGlsZSB7XG5cdC8qKlxuXHQgKiBAZGVwcmVjYXRlZCBzaW5jZSB2NSAtIFVzZSBgY2RzTGF5ZXJgIGRpcmVjdGl2ZSBpbnN0ZWFkXG5cdCAqIFNldCB0byBgXCJsaWdodFwiYCB0byBhcHBseSB0aGUgbGlnaHQgc3R5bGVcblx0ICovXG5cdEBJbnB1dCgpIHRoZW1lOiBcImxpZ2h0XCIgfCBcImRhcmtcIiA9IFwiZGFya1wiO1xuXG5cdC8qKlxuXHQgKiBTZXRzIHRoZSBgaHJlZmAgYXR0cmlidXRlIG9uIHRoZSBgY2RzLWNsaWNrYWJsZS10aWxlYCBlbGVtZW50LlxuXHQgKi9cblx0QElucHV0KCkgaHJlZiA9IFwiI1wiO1xuXG5cdC8qKlxuXHQgKiBTZXRzIHRoZSBgdGFyZ2V0YCBhdHRyaWJ1dGUgb24gdGhlIGBjZHMtY2xpY2thYmxlLXRpbGVgIGVsZW1lbnQuXG5cdCAqL1xuXHRASW5wdXQoKSB0YXJnZXQ6IHN0cmluZztcblxuXHQvKipcblx0ICogU2V0cyB0aGUgYHJlbGAgYXR0cmlidXRlIG9uIHRoZSBgY2RzLWNsaWNrYWJsZS10aWxlYCBlbGVtZW50LlxuXHQgKi9cblx0QElucHV0KCkgcmVsOiBzdHJpbmc7XG5cblx0LyoqXG5cdCAqIFNldCB0byBgdHJ1ZWAgdG8gZGlzYWJsZSB0aGUgY2xpY2thYmxlIHRpbGUuXG5cdCAqL1xuXHRASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXG5cdC8qKlxuXHQgKiBBcnJheSBvZiBjb21tYW5kcyB0byBzZW5kIHRvIHRoZSByb3V0ZXIgd2hlbiB0aGUgbGluayBpcyBhY3RpdmF0ZWRcblx0ICogU2VlOiBodHRwczovL2FuZ3VsYXIuaW8vYXBpL3JvdXRlci9Sb3V0ZXIjbmF2aWdhdGVcblx0ICovXG5cdEBJbnB1dCgpIHJvdXRlOiBhbnlbXTtcblxuXHQvKipcblx0ICogUm91dGVyIG9wdGlvbnMuIFVzZWQgaW4gY29uanVuY3Rpb24gd2l0aCBgcm91dGVgXG5cdCAqIFNlZTogaHR0cHM6Ly9hbmd1bGFyLmlvL2FwaS9yb3V0ZXIvUm91dGVyI25hdmlnYXRlXG5cdCAqL1xuXHRASW5wdXQoKSByb3V0ZUV4dHJhczogYW55O1xuXG5cdC8qKlxuXHQgKiBFbWl0cyB0aGUgbmF2aWdhdGlvbiBzdGF0dXMgcHJvbWlzZSB3aGVuIHRoZSBsaW5rIGlzIGFjdGl2YXRlZFxuXHQgKi9cblx0QE91dHB1dCgpIG5hdmlnYXRpb24gPSBuZXcgRXZlbnRFbWl0dGVyPFByb21pc2U8Ym9vbGVhbj4+KCk7XG5cblx0Y29uc3RydWN0b3IoQE9wdGlvbmFsKCkgcHJvdGVjdGVkIHJvdXRlcjogUm91dGVyKSB7fVxuXG5cdG5hdmlnYXRlKGV2ZW50KSB7XG5cdFx0aWYgKHRoaXMucm91dGVyICYmIHRoaXMucm91dGUgJiYgIXRoaXMuZGlzYWJsZWQpIHtcblx0XHRcdGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG5cdFx0XHRjb25zdCBzdGF0dXMgPSB0aGlzLnJvdXRlci5uYXZpZ2F0ZSh0aGlzLnJvdXRlLCB0aGlzLnJvdXRlRXh0cmFzKTtcblx0XHRcdHRoaXMubmF2aWdhdGlvbi5lbWl0KHN0YXR1cyk7XG5cdFx0fVxuXHR9XG59XG4iXX0=