56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
|
|
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Host, Input, OnDestroy} from '@angular/core';
|
|
import {Subject} from 'rxjs';
|
|
import {takeUntil} from 'rxjs/operators';
|
|
|
|
import {ExpandingRow} from './expanding_row';
|
|
import {expanding_row_css} from './expanding_row_css';
|
|
|
|
/**
|
|
* This component should be within cfc-expanding-row component. The caption
|
|
* is only visible when the row is expanded.
|
|
*/
|
|
@Component({
|
|
selector: 'cfc-expanding-row-details-caption',
|
|
styles: [expanding_row_css],
|
|
template: `
|
|
<div *ngIf="expandingRow.isExpanded"
|
|
(click)="expandingRow.handleCaptionClick($event)"
|
|
[style.backgroundColor]="color"
|
|
class="cfc-expanding-row-details-caption">
|
|
<ng-content></ng-content>
|
|
</div>`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class ExpandingRowDetailsCaption implements OnDestroy {
|
|
/** The background color of this component. */
|
|
@Input() color: string = 'blue';
|
|
|
|
/** This is triggered when this component is destroyed. */
|
|
private readonly onDestroy = new Subject();
|
|
|
|
/**
|
|
* We need a reference to parent cfc-expanding-row component here to hide
|
|
* this component when the row is collapsed. We also need to relay clicks
|
|
* to the parent component.
|
|
*/
|
|
constructor(@Host() public expandingRow: ExpandingRow, changeDetectorRef: ChangeDetectorRef) {
|
|
this.expandingRow.isExpandedChange.pipe(takeUntil(this.onDestroy)).subscribe(() => {
|
|
changeDetectorRef.markForCheck();
|
|
});
|
|
}
|
|
|
|
/** When component is destroyed, unlisten to isExpanded. */
|
|
ngOnDestroy(): void {
|
|
this.onDestroy.next();
|
|
}
|
|
}
|