carbon-components-angular
Version:
Next generation components
101 lines • 8.33 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", 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.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.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
}], disabled: [{
type: Input
}], route: [{
type: Input
}], routeExtras: [{
type: Input
}], navigation: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xpY2thYmxlLXRpbGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3RpbGVzL2NsaWNrYWJsZS10aWxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFFBQVEsRUFDUixNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFHdkI7Ozs7Ozs7Ozs7OztHQVlHO0FBbUJILE1BQU0sT0FBTyxhQUFhO0lBdUN6QixZQUFrQyxNQUFjO1FBQWQsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQXRDaEQ7OztXQUdHO1FBQ00sVUFBSyxHQUFxQixNQUFNLENBQUM7UUFFMUM7O1dBRUc7UUFDTSxTQUFJLEdBQUcsR0FBRyxDQUFDO1FBT3BCOztXQUVHO1FBQ00sYUFBUSxHQUFHLEtBQUssQ0FBQztRQWMxQjs7V0FFRztRQUNPLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBb0IsQ0FBQztJQUVULENBQUM7SUFFcEQsUUFBUSxDQUFDLEtBQUs7UUFDYixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDaEQsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBQ2xFLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1NBQzdCO0lBQ0YsQ0FBQzs7MEdBL0NXLGFBQWE7OEZBQWIsYUFBYSxtUEFoQmY7Ozs7Ozs7Ozs7Ozs7O01BY0w7MkZBRU8sYUFBYTtrQkFsQnpCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHdDQUF3QztvQkFDbEQsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7OztNQWNMO2lCQUNMOzswQkF3Q2EsUUFBUTs0Q0FsQ1osS0FBSztzQkFBYixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFLRyxNQUFNO3NCQUFkLEtBQUs7Z0JBS0csUUFBUTtzQkFBaEIsS0FBSztnQkFNRyxLQUFLO3NCQUFiLEtBQUs7Z0JBTUcsV0FBVztzQkFBbkIsS0FBSztnQkFLSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRJbnB1dCxcblx0T3V0cHV0LFxuXHRFdmVudEVtaXR0ZXIsXG5cdE9wdGlvbmFsXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBSb3V0ZXIgfSBmcm9tIFwiQGFuZ3VsYXIvcm91dGVyXCI7XG5cbi8qKlxuICogQnVpbGQgYXBwbGljYXRpb24ncyBjbGlja2FibGUgdGlsZXMgdXNpbmcgdGhpcyBjb21wb25lbnQuIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgVGlsZXNNb2R1bGUgfSBmcm9tICdjYXJib24tY29tcG9uZW50cy1hbmd1bGFyJztcbiAqIGBgYFxuICpcbiAqIGBgYGh0bWxcbiAqIDxjZHMtY2xpY2thYmxlLXRpbGU+XG4gKiBcdFx0dGlsZSBjb250ZW50XG4gKiA8L2Nkcy1jbGlja2FibGUtdGlsZT5cbiAqIGBgYFxuICovXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6IFwiY2RzLWNsaWNrYWJsZS10aWxlLCBpYm0tY2xpY2thYmxlLXRpbGVcIixcblx0dGVtcGxhdGU6IGBcblx0PGFcblx0XHRjZHNMaW5rXG5cdFx0Y2xhc3M9XCJjZHMtLXRpbGUgY2RzLS10aWxlLS1jbGlja2FibGVcIlxuXHRcdFtuZ0NsYXNzXT1cIntcblx0XHRcdCdjZHMtLXRpbGUtLWxpZ2h0JzogdGhlbWUgPT09ICdsaWdodCcsXG5cdFx0XHQnY2RzLS10aWxlLS1kaXNhYmxlZCBjZHMtLWxpbmstLWRpc2FibGVkJyA6IGRpc2FibGVkXG5cdFx0fVwiXG5cdFx0dGFiaW5kZXg9XCIwXCJcblx0XHQoY2xpY2spPVwibmF2aWdhdGUoJGV2ZW50KVwiXG5cdFx0W2F0dHIuaHJlZl09XCJkaXNhYmxlZCA/IG51bGwgOiBocmVmXCJcblx0XHRbYXR0ci50YXJnZXRdPVwidGFyZ2V0XCJcblx0XHRbYXR0ci5hcmlhLWRpc2FibGVkXT1cImRpc2FibGVkXCI+XG5cdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHQ8L2E+YFxufSlcbmV4cG9ydCBjbGFzcyBDbGlja2FibGVUaWxlIHtcblx0LyoqXG5cdCAqIEBkZXByZWNhdGVkIHNpbmNlIHY1IC0gVXNlIGBjZHNMYXllcmAgZGlyZWN0aXZlIGluc3RlYWRcblx0ICogU2V0IHRvIGBcImxpZ2h0XCJgIHRvIGFwcGx5IHRoZSBsaWdodCBzdHlsZVxuXHQgKi9cblx0QElucHV0KCkgdGhlbWU6IFwibGlnaHRcIiB8IFwiZGFya1wiID0gXCJkYXJrXCI7XG5cblx0LyoqXG5cdCAqIFNldHMgdGhlIGBocmVmYCBhdHRyaWJ1dGUgb24gdGhlIGBjZHMtY2xpY2thYmxlLXRpbGVgIGVsZW1lbnQuXG5cdCAqL1xuXHRASW5wdXQoKSBocmVmID0gXCIjXCI7XG5cblx0LyoqXG5cdCAqIFNldHMgdGhlIGB0YXJnZXRgIGF0dHJpYnV0ZSBvbiB0aGUgYGNkcy1jbGlja2FibGUtdGlsZWAgZWxlbWVudC5cblx0ICovXG5cdEBJbnB1dCgpIHRhcmdldDogc3RyaW5nO1xuXG5cdC8qKlxuXHQgKiBTZXQgdG8gYHRydWVgIHRvIGRpc2FibGUgdGhlIGNsaWNrYWJsZSB0aWxlLlxuXHQgKi9cblx0QElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuXHQvKipcblx0ICogQXJyYXkgb2YgY29tbWFuZHMgdG8gc2VuZCB0byB0aGUgcm91dGVyIHdoZW4gdGhlIGxpbmsgaXMgYWN0aXZhdGVkXG5cdCAqIFNlZTogaHR0cHM6Ly9hbmd1bGFyLmlvL2FwaS9yb3V0ZXIvUm91dGVyI25hdmlnYXRlXG5cdCAqL1xuXHRASW5wdXQoKSByb3V0ZTogYW55W107XG5cblx0LyoqXG5cdCAqIFJvdXRlciBvcHRpb25zLiBVc2VkIGluIGNvbmp1bmN0aW9uIHdpdGggYHJvdXRlYFxuXHQgKiBTZWU6IGh0dHBzOi8vYW5ndWxhci5pby9hcGkvcm91dGVyL1JvdXRlciNuYXZpZ2F0ZVxuXHQgKi9cblx0QElucHV0KCkgcm91dGVFeHRyYXM6IGFueTtcblxuXHQvKipcblx0ICogRW1pdHMgdGhlIG5hdmlnYXRpb24gc3RhdHVzIHByb21pc2Ugd2hlbiB0aGUgbGluayBpcyBhY3RpdmF0ZWRcblx0ICovXG5cdEBPdXRwdXQoKSBuYXZpZ2F0aW9uID0gbmV3IEV2ZW50RW1pdHRlcjxQcm9taXNlPGJvb2xlYW4+PigpO1xuXG5cdGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIHByb3RlY3RlZCByb3V0ZXI6IFJvdXRlcikge31cblxuXHRuYXZpZ2F0ZShldmVudCkge1xuXHRcdGlmICh0aGlzLnJvdXRlciAmJiB0aGlzLnJvdXRlICYmICF0aGlzLmRpc2FibGVkKSB7XG5cdFx0XHRldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuXHRcdFx0Y29uc3Qgc3RhdHVzID0gdGhpcy5yb3V0ZXIubmF2aWdhdGUodGhpcy5yb3V0ZSwgdGhpcy5yb3V0ZUV4dHJhcyk7XG5cdFx0XHR0aGlzLm5hdmlnYXRpb24uZW1pdChzdGF0dXMpO1xuXHRcdH1cblx0fVxufVxuIl19