59 lines
1.8 KiB
TypeScript
59 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();
|
||
|
|
}
|
||
|
|
}
|