<ng-template [ngIf]="view$ | async" [ngIfElse]="spinnerTmpl" let-view> <div class="grid grid-col-5 sxplr-custom-cmp text"> <span class="ml-2 text-truncate v-center-text-span"> <i class="fas fa-file"></i> {{ data.filename }} {{ data.filename }} </span> <ng-template [ngIf]="!view.showMore && !view.compact"> <ng-template [ngTemplateOutlet]="ngLayerController" [ngTemplateOutletContext]="{ onlyOpacity: true }"> </ng-template> </ng-template> <ng-template [ngIf]="data.warning.length > 0"> <button mat-icon-button [matTooltip]="data.warning.length + ' messages on user layer.'" color="warn" (click)="toggleShowMore()"> <i class="fas fa-exclamation-triangle"></i> </button> </ng-template> <button [matTooltip]="ARIA_LABELS.VOLUME_TUNING_EXPAND" mat-icon-button [color]="view.showMore ? 'primary' : 'basic'" (click)="toggleShowMore()"> <i class="fas fa-sliders-h"></i> </button> <button [matTooltip]="ARIA_LABELS.CLOSE" color="warn" mat-icon-button mat-dialog-close> <i class="fas fa-trash"></i> </button> <div *ngIf="view.showMore || view.compact" class="sxplr-custom-cmp darker-bg overflow-hidden grid-wide-4"> <ng-template [ngTemplateOutlet]="ngLayerController" [ngTemplateOutletContext]="{ onlyOpacity: !view.showMore }"> </ng-template> </div> <ul class="grid-wide-4 sxplr-custom-cmp darker-bg" *ngIf="view.showMore"> <li *ngFor="let warn of data.warning">{{ warn }}</li> </ul> </div> </ng-template> <ng-template #spinnerTmpl> <div> <spinner-cmp class="spinner"></spinner-cmp> </div> </ng-template> <ng-template #ngLayerController let-onlyOpacity="onlyOpacity"> <ng-layer-tune [hideCtrl]="onlyOpacity ? HIDE_NG_TUNE_CTRL.ONLY_SHOW_OPACITY : ''" advanced-control="true" [ngLayerName]="data.layerName"> </ng-layer-tune> </ng-template>