1/* 2 * Copyright (C) 2024 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, Inject} from '@angular/core'; 17import {MAT_DIALOG_DATA} from '@angular/material/dialog'; 18 19@Component({ 20 selector: 'warning-dialog', 21 template: ` 22 <h2 class="warning-dialog-title" mat-dialog-title> 23 <span> Warning </span> 24 </h2> 25 <mat-dialog-content class="warning-content"> 26 <p class="warning-message mat-body-1"> {{data.message}} </p> 27 28 <div class="warning-actions"> 29 <div class="warning-action-boxes"> 30 <mat-checkbox 31 *ngFor="let option of data.options; let i = index" 32 color="primary" 33 (change)="updateSelectedOptions(option)" 34 [class.not-last]="i < data.options.length - 1" 35 >{{ option }}</mat-checkbox> 36 </div> 37 <div class="warning-action-buttons"> 38 <button *ngFor="let action of data.actions" [mat-dialog-close]="getDialogResult(action)" class="not-last" color="primary" mat-stroked-button> {{ action }} </button> 39 <button [mat-dialog-close]="getDialogResult(data.closeText)" color="primary" mat-raised-button> {{ data.closeText }} </button> 40 </div> 41 </div> 42 </mat-dialog-content> 43 `, 44 styles: [ 45 ` 46 .warning-dialog-title { 47 display: flex; 48 justify-content: space-between; 49 } 50 .warning-close-button { 51 width: 24px; 52 height: 24px; 53 line-height: 24px; 54 } 55 .warning-content { 56 overflow: visible; 57 } 58 .warning-message { 59 white-space: pre-line; 60 font-size: 16px; 61 } 62 .warning-actions { 63 display: flex; 64 justify-content: space-between; 65 align-items: center; 66 margin-top: 8px; 67 } 68 .warning-actions .not-last { 69 margin-right: 8px; 70 } 71 `, 72 ], 73}) 74export class WarningDialogComponent { 75 selectedOptions: string[] = []; 76 77 constructor(@Inject(MAT_DIALOG_DATA) public data: WarningDialogData) {} 78 79 updateSelectedOptions(clickedOption: string) { 80 if (!this.selectedOptions.includes(clickedOption)) { 81 this.selectedOptions.push(clickedOption); 82 } else { 83 this.selectedOptions.filter((opt) => opt !== clickedOption); 84 } 85 } 86 87 getDialogResult(closeActionText?: string): WarningDialogResult { 88 return {closeActionText, selectedOptions: this.selectedOptions}; 89 } 90} 91 92export interface WarningDialogData { 93 message: string | undefined; 94 actions: string[] | undefined; 95 options: string[] | undefined; 96 closeText: string; 97} 98 99export interface WarningDialogResult { 100 closeActionText: string | undefined; 101 selectedOptions: string[]; 102} 103