1/* 2 * Copyright (C) 2022 The Android Open Source Project 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16import {Component, Input} from '@angular/core'; 17 18@Component({ 19 selector: 'coordinates-table', 20 template: ` 21 <p *ngIf="!hasCoordinates()" class="mat-body-1">null</p> 22 <table *ngIf="hasCoordinates()" class="table"> 23 <tr class="header-row"> 24 <td> 25 <p class="mat-body-1">Left</p> 26 </td> 27 <td> 28 <p class="mat-body-1">Top</p> 29 </td> 30 <td> 31 <p class="mat-body-1">Right</p> 32 </td> 33 <td> 34 <p class="mat-body-1">Bottom</p> 35 </td> 36 </tr> 37 <tr> 38 <td> 39 <p class="mat-body-1">{{ coordinates.left }}</p> 40 </td> 41 <td> 42 <p class="mat-body-1">{{ coordinates.top }}</p> 43 </td> 44 <td> 45 <p class="mat-body-1">{{ coordinates.right }}</p> 46 </td> 47 <td> 48 <p class="mat-body-1">{{ coordinates.bottom }}</p> 49 </td> 50 </tr> 51 </table> 52 `, 53 styles: [ 54 ` 55 .table { 56 width: 100%; 57 border-collapse: collapse; 58 } 59 60 .table td { 61 padding: 1px 5px; 62 border: 1px solid var(--border-color); 63 text-align: center; 64 overflow-wrap: anywhere; 65 } 66 67 .header-row td { 68 color: gray; 69 } 70 `, 71 ], 72}) 73export class CoordinatesTableComponent { 74 @Input() coordinates!: any; 75 76 hasCoordinates() { 77 return ( 78 this.coordinates.left || 79 this.coordinates.top || 80 this.coordinates.right || 81 this.coordinates.bottom 82 ); 83 } 84} 85