Methods
|
close
|
close(password?: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| password |
string
|
Yes
|
|
|
fileUnlockError
|
Type : boolean
|
Default value : false
|
|
|
|
options$
|
Type : Observable<Options>
|
Default value : this.excelPasswordModalService.optionsSubject$
|
|
|
|
passwordInput
|
Type : string
|
Default value : ''
|
|
|
import { Component, ViewEncapsulation } from '@angular/core'
import { Observable } from 'rxjs'
import { ExcelPasswordModalService } from './excel-password-modal.service'
import { Options } from './models/options.interface'
@Component({
selector: 'app-excel-password-modal',
styleUrls: ['./excel-password-modal.component.scss'],
templateUrl: './excel-password-modal.component.html',
encapsulation: ViewEncapsulation.None,
standalone: false
})
export class ExcelPasswordModalComponent {
options$: Observable<Options> = this.excelPasswordModalService.optionsSubject$
fileUnlockError: boolean = false
passwordInput: string = ''
constructor(private excelPasswordModalService: ExcelPasswordModalService) {}
close(password?: string) {
this.passwordInput = ''
this.excelPasswordModalService.close(password)
}
}
@if (options$ | async; as options) {
<div class="excel-password-root">
<clr-modal
[clrModalOpen]="options.open"
[clrModalSize]="'md'"
[clrModalClosable]="false"
>
<h3 class="modal-title center text-center color-darker-gray">
Password Protected File
</h3>
<div class="modal-body d-flex clr-justify-content-center">
<p class="m-0">Please enter password:</p>
<input
#filePasswordInput
[(ngModel)]="passwordInput"
data-lpignore="true"
autocomplete="off"
id="filePasswordInput"
type="text"
class="clr-input disable-password-manager"
/>
</div>
<div class="modal-footer">
<div>
@if (options.error) {
<p class="m-0 color-red">Sorry that didn't work, try again.</p>
}
</div>
<div class="buttons">
<button
type="button"
class="btn btn-sm btn-outline"
(click)="close()"
>
Cancel
</button>
<button
type="button"
class="btn btn-sm btn-success-outline"
[disabled]="filePasswordInput.value.length < 1"
(click)="close(filePasswordInput.value)"
>
Unlock
</button>
</div>
</div>
</clr-modal>
</div>
}
Legend
Html element with directive