### File

`src/tiles/expandable-tile.component.ts`

### Index

###### Properties

- COLLAPSE
- EXPAND

### Properties

COLLAPSE
`COLLAPSE: `string``
Type : `string`

EXPAND
`EXPAND: `string``
Type : `string`

    import {
    	Component,
    	Input,
    	ElementRef,
    	AfterContentInit
    } from "@angular/core";
    import { I18n, Overridable } from "./../i18n/i18n.module";
    import { merge } from "./../utils/object";

    export interface ExpandableTileTranslations {
    	EXPAND: string;
    	COLLAPSE: string;
    }

    @Component({
    	selector: "ibm-expandable-tile",
    	template: `
    		<div
    			class="bx--tile bx--tile--expandable"
    			[ngClass]="{'bx--tile--is-expanded' : expanded}"
    			[ngStyle]="{'max-height': expandedHeight + 'px'}"
    			role="button"
    			tabindex="0"
    			(click)="onClick()">
    			<button [attr.aria-label]="(expanded ? collapse : expand).subject | async" class="bx--tile__chevron">
    				<svg *ngIf="!expanded" width="12" height="7" viewBox="0 0 12 7" role="img">
    					<title>{{expand.subject | async}}</title>
    					<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
    				</svg>
    				<svg *ngIf="expanded" width="12" height="7" viewBox="0 0 12 7" role="img">
    					<title>{{collapse.subject | async}}</title>
    					<path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"/>
    				</svg>
    			</button>
    			<div class="bx--tile-content">
    				<ng-content select=".bx--tile-content__above-the-fold"></ng-content>
    				<ng-content select=".bx--tile-content__below-the-fold"></ng-content>
    			</div>
    		</div>
    	`
    })
    export class ExpandableTile implements AfterContentInit {
    	@Input() expanded = false;
    	/**
    	 * Expects an object that contains some or all of:
    	 * ```
    	 * {
    	 *		"EXPAND": "Expand",
    	 *		"COLLAPSE": "Collapse",
    	 * }
    	 * ```
    	 */
    	@Input()
    	set translations(value: ExpandableTileTranslations) {
    		const valueWithDefaults = merge(this.i18n.getMultiple("TILES"), value);
    		this.expand.override(valueWithDefaults.EXPAND);
    		this.collapse.override(valueWithDefaults.COLLAPSE);
    	}

    	tileMaxHeight = 0;
    	element = this.elementRef.nativeElement;

    	expand = this.i18n.getOverridable("TILES.EXPAND");
    	collapse = this.i18n.getOverridable("TILES.COLLAPSE");

    	constructor(protected i18n: I18n, protected elementRef: ElementRef) {}

    	ngAfterContentInit() {
    		this.updateMaxHeight();
    	}

    	get expandedHeight() {
    		return this.tileMaxHeight + parseInt(getComputedStyle(this.element.querySelector(".bx--tile")).paddingBottom, 10);
    	}

    	updateMaxHeight() {
    		if (this.expanded) {
    			this.tileMaxHeight = this.element.querySelector(".bx--tile-content").getBoundingClientRect().height;
    		} else {
    			this.tileMaxHeight = this.element.querySelector(".bx--tile-content__above-the-fold").getBoundingClientRect().height;
    		}
    	}

    	onClick() {
    		this.expanded = !this.expanded;
    		this.updateMaxHeight();
    	}
    }

# result-matching ""

# No results matching ""