carbon-components-angular
Version:
Next generation components
757 lines (740 loc) • 30.3 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Optional, Input, Output, ViewChild, Directive, HostBinding, HostListener, TemplateRef, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/router';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from 'carbon-components-angular/link';
import { LinkModule } from 'carbon-components-angular/link';
import { merge } from 'carbon-components-angular/utils';
import * as i1$1 from 'carbon-components-angular/i18n';
import { I18nModule } from 'carbon-components-angular/i18n';
import * as i3$1 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
/**
* 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>
* ```
*/
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
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { TilesModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-tiles-expandable--basic)
*/
class ExpandableTile {
constructor(i18n, element) {
this.i18n = i18n;
this.element = element;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* Set to `"light"` to apply the light style
*/
this.theme = "dark";
/**
* Controls the expanded state
*/
this.expanded = false;
/**
* Controls the interactive state
*/
this.interactive = false;
this.tileMaxHeight = 0;
this.currentExpandedHeight = 0;
this.expand = this.i18n.getOverridable("TILES.EXPAND");
this.collapse = this.i18n.getOverridable("TILES.COLLAPSE");
}
/**
* Expects an object that contains some or all of:
* ```
* {
* "EXPAND": "Expand",
* "COLLAPSE": "Collapse",
* }
* ```
*/
set translations(value) {
const valueWithDefaults = merge(this.i18n.getMultiple("TILES"), value);
this.expand.override(valueWithDefaults.EXPAND);
this.collapse.override(valueWithDefaults.COLLAPSE);
}
ngAfterViewInit() {
this.updateMaxHeight();
}
get expandedHeight() {
const tile = this.element.nativeElement.querySelector(".cds--tile");
const tilePadding = parseInt(getComputedStyle(tile).paddingBottom, 10) + parseInt(getComputedStyle(tile).paddingTop, 10);
const expandedHeight = this.tileMaxHeight + tilePadding;
if (!isNaN(expandedHeight)) {
this.currentExpandedHeight = expandedHeight;
}
return this.currentExpandedHeight;
}
updateMaxHeight() {
if (this.expanded) {
this.tileMaxHeight = this.tileContainer.nativeElement.getBoundingClientRect().height;
}
else {
this.tileMaxHeight = this.element.nativeElement.querySelector(".cds--tile-content__above-the-fold").getBoundingClientRect().height;
}
}
onClick() {
this.expanded = !this.expanded;
this.updateMaxHeight();
}
}
ExpandableTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExpandableTile, deps: [{ token: i1$1.I18n }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
ExpandableTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ExpandableTile, selector: "cds-expandable-tile, ibm-expandable-tile", inputs: { theme: "theme", expanded: "expanded", interactive: "interactive", translations: "translations" }, viewQueries: [{ propertyName: "tileContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
<button
*ngIf="!interactive"
class="cds--tile cds--tile--expandable"
[ngClass]="{
'cds--tile--is-expanded' : expanded,
'cds--tile--light': theme === 'light'
}"
[ngStyle]="{'max-height': expandedHeight + 'px'}"
type="button"
(click)="onClick()"
[attr.aria-expanded]="expanded"
[attr.title]="(expanded ? collapse.subject : expand.subject) | async">
<ng-container *ngTemplateOutlet="expandableTileContent"></ng-container>
</button>
<div
*ngIf="interactive"
class="cds--tile cds--tile--expandable cds--tile--expandable--interactive"
[ngClass]="{
'cds--tile--is-expanded' : expanded,
'cds--tile--light': theme === 'light'
}"
[ngStyle]="{'max-height': expandedHeight + 'px'}"
[attr.title]="(expanded ? collapse.subject : expand.subject) | async">
<ng-container *ngTemplateOutlet="expandableTileContent"></ng-container>
</div>
<ng-template #chevronIcon>
<svg cdsIcon="chevron--down" size="16"></svg>
</ng-template>
<ng-template #expandableTileContent>
<div #container>
<div class="cds--tile-content">
<ng-content select="[cdsAboveFold],[ibmAboveFold],.cds--tile-content__above-the-fold"></ng-content>
</div>
<div *ngIf="!interactive" class="cds--tile__chevron">
<ng-container *ngTemplateOutlet="chevronIcon"></ng-container>
</div>
<button
*ngIf="interactive"
class="cds--tile__chevron cds--tile__chevron--interactive"
type="button"
(click)="onClick()"
[attr.aria-expanded]="expanded"
[attr.aria-label]="(expanded ? collapse.subject : expand.subject) | async">
<ng-container *ngTemplateOutlet="chevronIcon"></ng-container>
</button>
<div class="cds--tile-content">
<ng-content select="[cdsBelowFold],[ibmBelowFold],.cds--tile-content__below-the-fold"></ng-content>
</div>
</div>
</ng-template>
`, 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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExpandableTile, decorators: [{
type: Component,
args: [{
selector: "cds-expandable-tile, ibm-expandable-tile",
template: `
<button
*ngIf="!interactive"
class="cds--tile cds--tile--expandable"
[ngClass]="{
'cds--tile--is-expanded' : expanded,
'cds--tile--light': theme === 'light'
}"
[ngStyle]="{'max-height': expandedHeight + 'px'}"
type="button"
(click)="onClick()"
[attr.aria-expanded]="expanded"
[attr.title]="(expanded ? collapse.subject : expand.subject) | async">
<ng-container *ngTemplateOutlet="expandableTileContent"></ng-container>
</button>
<div
*ngIf="interactive"
class="cds--tile cds--tile--expandable cds--tile--expandable--interactive"
[ngClass]="{
'cds--tile--is-expanded' : expanded,
'cds--tile--light': theme === 'light'
}"
[ngStyle]="{'max-height': expandedHeight + 'px'}"
[attr.title]="(expanded ? collapse.subject : expand.subject) | async">
<ng-container *ngTemplateOutlet="expandableTileContent"></ng-container>
</div>
<ng-template #chevronIcon>
<svg cdsIcon="chevron--down" size="16"></svg>
</ng-template>
<ng-template #expandableTileContent>
<div #container>
<div class="cds--tile-content">
<ng-content select="[cdsAboveFold],[ibmAboveFold],.cds--tile-content__above-the-fold"></ng-content>
</div>
<div *ngIf="!interactive" class="cds--tile__chevron">
<ng-container *ngTemplateOutlet="chevronIcon"></ng-container>
</div>
<button
*ngIf="interactive"
class="cds--tile__chevron cds--tile__chevron--interactive"
type="button"
(click)="onClick()"
[attr.aria-expanded]="expanded"
[attr.aria-label]="(expanded ? collapse.subject : expand.subject) | async">
<ng-container *ngTemplateOutlet="chevronIcon"></ng-container>
</button>
<div class="cds--tile-content">
<ng-content select="[cdsBelowFold],[ibmBelowFold],.cds--tile-content__below-the-fold"></ng-content>
</div>
</div>
</ng-template>
`
}]
}], ctorParameters: function () { return [{ type: i1$1.I18n }, { type: i0.ElementRef }]; }, propDecorators: { theme: [{
type: Input
}], expanded: [{
type: Input
}], interactive: [{
type: Input
}], translations: [{
type: Input
}], tileContainer: [{
type: ViewChild,
args: ["container"]
}] } });
class ExpandableTileAboveFoldDirective {
constructor() {
this.aboveFold = true;
}
}
ExpandableTileAboveFoldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExpandableTileAboveFoldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ExpandableTileAboveFoldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ExpandableTileAboveFoldDirective, selector: "[cdsAboveFold], [ibmAboveFold]", host: { properties: { "class.cds--tile-content__above-the-fold": "this.aboveFold" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExpandableTileAboveFoldDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsAboveFold], [ibmAboveFold]"
}]
}], propDecorators: { aboveFold: [{
type: HostBinding,
args: ["class.cds--tile-content__above-the-fold"]
}] } });
class ExpandableTileBelowFoldDirective {
constructor() {
this.belowFold = true;
}
}
ExpandableTileBelowFoldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExpandableTileBelowFoldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ExpandableTileBelowFoldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ExpandableTileBelowFoldDirective, selector: "[cdsBelowFold], [ibmBelowFold]", host: { properties: { "class.cds--tile-content__below-the-fold": "this.belowFold" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExpandableTileBelowFoldDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsBelowFold], [ibmBelowFold]"
}]
}], propDecorators: { belowFold: [{
type: HostBinding,
args: ["class.cds--tile-content__below-the-fold"]
}] } });
class SelectionTile {
constructor(i18n) {
this.i18n = i18n;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* Set to `"light"` to apply the light style
*/
this.theme = "dark";
/**
* The unique id for the input.
*/
this.id = `tile-${SelectionTile.tileCount}`;
/**
* Internal event used to notify the containing `TileGroup` of changes.
*/
this.change = new EventEmitter();
/**
* Set to `true` to disable the selection tile.
*/
this.disabled = false;
/**
* Set by the containing `TileGroup`. Used for the `name` property on the input.
*/
this.name = "tile-group-unbound";
/**
* Defines whether or not the `SelectionTile` supports selecting multiple tiles as opposed to single
* tile selection.
*/
this.multiple = true; // Set to true because of the way tile group sets it up.
// If an initial selected value is set before input exists, we save
// the value and check again when input exists in `AfterViewInit`.
this._selected = null;
SelectionTile.tileCount++;
}
/**
* Updating the state of the input to match the state of the parameter passed in.
* Set to `true` if this tile should be selected.
*/
set selected(value) {
// If an initial selected value is set before input exists, we save
// the value and check again when input exists in `AfterViewInit`.
this._selected = value ? true : null;
if (this.input) {
this.input.nativeElement.checked = this._selected;
}
}
get selected() {
return this.input ? this.input.nativeElement.checked : false;
}
ngAfterViewInit() {
if (this.input) {
setTimeout(() => {
this.input.nativeElement.checked = this._selected;
});
}
}
keyboardInput(event) {
if (event.key === "Enter" || event.key === "Spacebar" || event.key === " ") {
this.selected = !this.selected;
this.change.emit(event);
}
}
onChange(event) {
this.change.emit(event);
}
}
SelectionTile.tileCount = 0;
SelectionTile.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectionTile, deps: [{ token: i1$1.I18n }], target: i0.ɵɵFactoryTarget.Component });
SelectionTile.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: { theme: "theme", id: "id", selected: "selected", value: "value", disabled: "disabled" }, outputs: { change: "change" }, host: { listeners: { "keydown": "keyboardInput($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `
<input
#input
[attr.tabindex]="disabled ? null : 0"
class="cds--tile-input"
[id]="id"
[disabled]="disabled"
[type]="(multiple ? 'checkbox': 'radio')"
[value]="value"
[name]="name"
(change)="onChange($event)"/>
<label
class="cds--tile cds--tile--selectable"
[for]="id"
[ngClass]="{
'cds--tile--is-selected' : selected,
'cds--tile--light': theme === 'light',
'cds--tile--disabled' : disabled
}"
[attr.aria-label]="i18n.get('TILES.TILE') | async">
<div class="cds--tile__checkmark">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
fill-rule="evenodd"/>
</svg>
</div>
<div class="cds--tile-content">
<ng-content></ng-content>
</div>
</label>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectionTile, decorators: [{
type: Component,
args: [{
selector: "cds-selection-tile, ibm-selection-tile",
template: `
<input
#input
[attr.tabindex]="disabled ? null : 0"
class="cds--tile-input"
[id]="id"
[disabled]="disabled"
[type]="(multiple ? 'checkbox': 'radio')"
[value]="value"
[name]="name"
(change)="onChange($event)"/>
<label
class="cds--tile cds--tile--selectable"
[for]="id"
[ngClass]="{
'cds--tile--is-selected' : selected,
'cds--tile--light': theme === 'light',
'cds--tile--disabled' : disabled
}"
[attr.aria-label]="i18n.get('TILES.TILE') | async">
<div class="cds--tile__checkmark">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
fill-rule="evenodd"/>
</svg>
</div>
<div class="cds--tile-content">
<ng-content></ng-content>
</div>
</label>
`
}]
}], ctorParameters: function () { return [{ type: i1$1.I18n }]; }, propDecorators: { theme: [{
type: Input
}], id: [{
type: Input
}], selected: [{
type: Input
}], value: [{
type: Input
}], change: [{
type: Output
}], disabled: [{
type: Input
}], input: [{
type: ViewChild,
args: ["input", { static: true }]
}], keyboardInput: [{
type: HostListener,
args: ["keydown", ["$event"]]
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { TilesModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-tiles-grouped--selectable)
*/
class TileGroup {
constructor() {
/**
* The tile group `name`
*/
this.name = `tile-group-${TileGroup.tileGroupCount}`;
/**
* Set to `true` to support multiple tile selection
*/
this.multiple = false;
/**
* Emits an event when the tile selection changes.
*
* Emits an object that looks like:
* ```javascript
* {
* value: "something",
* selected: true,
* name: "tile-group-1"
* }
* ```
*/
this.selected = new EventEmitter();
this.tileGroupClass = true;
this.unsubscribe$ = new Subject();
this.unsubscribeTiles$ = new Subject();
this.onChange = (_) => { };
this.onTouched = () => { };
TileGroup.tileGroupCount++;
}
ngAfterContentInit() {
const updateTiles = () => {
// remove old subscriptions
this.unsubscribeTiles$.next();
// react to changes
// setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
this.selectionTiles.forEach(tile => {
tile.name = this.name;
tile.change
.pipe(takeUntil(this.unsubscribeTiles$))
.subscribe(() => {
this.selected.emit({
value: tile.value,
selected: tile.selected,
name: this.name
});
this.onChange(tile.value);
});
tile.multiple = this.multiple;
});
});
};
updateTiles();
this.selectionTiles.changes
.pipe(takeUntil(this.unsubscribe$))
.subscribe(_ => updateTiles());
}
ngOnDestroy() {
this.unsubscribe$.next();
this.unsubscribe$.complete();
// takes care of tile subscriptions when tile-group dies
this.unsubscribeTiles$.next();
this.unsubscribeTiles$.complete();
}
writeValue(value) {
if (!this.selectionTiles) {
return;
}
this.selectionTiles.forEach(tile => {
if (tile.value === value) {
tile.selected = true;
}
else {
tile.selected = false;
}
});
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
TileGroup.tileGroupCount = 0;
TileGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TileGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
TileGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: { name: "name", multiple: "multiple", legend: "legend" }, outputs: { selected: "selected" }, host: { properties: { "class.cds--tile-group": "this.tileGroupClass" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: TileGroup,
multi: true
}
], queries: [{ propertyName: "selectionTiles", predicate: SelectionTile }], ngImport: i0, template: `
<fieldset>
<legend *ngIf="legend" class="cds--label">
<ng-template *ngIf="isTemplate(legend); else legendLabel;" [ngTemplateOutlet]="legend"></ng-template>
<ng-template #legendLabel>{{legend}}</ng-template>
</legend>
<ng-content select="ibm-selection-tile,cds-selection-tile"></ng-content>
</fieldset>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TileGroup, decorators: [{
type: Component,
args: [{
selector: "cds-tile-group, ibm-tile-group",
template: `
<fieldset>
<legend *ngIf="legend" class="cds--label">
<ng-template *ngIf="isTemplate(legend); else legendLabel;" [ngTemplateOutlet]="legend"></ng-template>
<ng-template #legendLabel>{{legend}}</ng-template>
</legend>
<ng-content select="ibm-selection-tile,cds-selection-tile"></ng-content>
</fieldset>`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: TileGroup,
multi: true
}
]
}]
}], ctorParameters: function () { return []; }, propDecorators: { name: [{
type: Input
}], multiple: [{
type: Input
}], legend: [{
type: Input
}], selected: [{
type: Output
}], tileGroupClass: [{
type: HostBinding,
args: ["class.cds--tile-group"]
}], selectionTiles: [{
type: ContentChildren,
args: [SelectionTile]
}] } });
/**
* 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)
*/
class Tile {
constructor() {
this.tileClass = true;
/**
* @deprecated since v5 - Use `cdsLayer` directive instead
* Set to `"light"` to apply the light style
*/
this.theme = "dark";
}
get lightThemeEnabled() {
return this.theme === "light";
}
}
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: { theme: "theme" }, host: { properties: { "class.cds--tile": "this.tileClass", "class.cds--tile--light": "this.lightThemeEnabled" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
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>`
}]
}], propDecorators: { tileClass: [{
type: HostBinding,
args: ["class.cds--tile"]
}], lightThemeEnabled: [{
type: HostBinding,
args: ["class.cds--tile--light"]
}], theme: [{
type: Input
}] } });
class TilesModule {
}
TilesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TilesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TilesModule, declarations: [Tile,
ClickableTile,
ExpandableTileAboveFoldDirective,
ExpandableTileBelowFoldDirective,
ExpandableTile,
SelectionTile,
TileGroup], imports: [CommonModule,
I18nModule,
IconModule,
LinkModule], exports: [Tile,
ClickableTile,
ExpandableTileAboveFoldDirective,
ExpandableTileBelowFoldDirective,
ExpandableTile,
SelectionTile,
TileGroup] });
TilesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesModule, imports: [CommonModule,
I18nModule,
IconModule,
LinkModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TilesModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Tile,
ClickableTile,
ExpandableTileAboveFoldDirective,
ExpandableTileBelowFoldDirective,
ExpandableTile,
SelectionTile,
TileGroup
],
exports: [
Tile,
ClickableTile,
ExpandableTileAboveFoldDirective,
ExpandableTileBelowFoldDirective,
ExpandableTile,
SelectionTile,
TileGroup
],
imports: [
CommonModule,
I18nModule,
IconModule,
LinkModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ClickableTile, ExpandableTile, ExpandableTileAboveFoldDirective, ExpandableTileBelowFoldDirective, SelectionTile, Tile, TileGroup, TilesModule };
//# sourceMappingURL=carbon-components-angular-tiles.mjs.map