42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
|
import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
|
||
|
|
import { FormsModule } from '@angular/forms';
|
||
|
|
import { TranslatePipe } from '../../../i18n/translate.pipe';
|
||
|
|
import { MediaAsset } from '../../../core/media/models/media-asset.model';
|
||
|
|
import { InputComponent } from '../input/input.component';
|
||
|
|
import { ButtonComponent } from '../button/button.component';
|
||
|
|
import { MediaPickerComponent } from '../../media/media-picker/media-picker.component';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-image-field',
|
||
|
|
standalone: true,
|
||
|
|
imports: [FormsModule, TranslatePipe, InputComponent, ButtonComponent, MediaPickerComponent],
|
||
|
|
templateUrl: './image-field.component.html',
|
||
|
|
styleUrl: './image-field.component.scss',
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||
|
|
})
|
||
|
|
export class ImageFieldComponent {
|
||
|
|
readonly value = input<string | null | undefined>('');
|
||
|
|
readonly disabled = input(false);
|
||
|
|
|
||
|
|
readonly valueChange = output<string>();
|
||
|
|
|
||
|
|
protected pickerOpen = false;
|
||
|
|
|
||
|
|
protected setValue(next: string): void {
|
||
|
|
this.valueChange.emit(next);
|
||
|
|
}
|
||
|
|
|
||
|
|
protected openPicker(): void {
|
||
|
|
this.pickerOpen = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
protected onPicked(asset: MediaAsset): void {
|
||
|
|
this.valueChange.emit(asset.url);
|
||
|
|
this.pickerOpen = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
protected remove(): void {
|
||
|
|
this.valueChange.emit('');
|
||
|
|
}
|
||
|
|
}
|