File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
Async
onBeforeSave
|
onBeforeSave(config?: ImageWidgetConfig)
|
|
Returns : Promise<boolean>
|
|
destroyed$
|
Type : unknown
|
Default value : new Subject<void>()
|
|
fileFromConfig
|
Type : File
|
|
formGroup
|
Type : FormGroup
|
|
imageBinaryId$
|
Type : unknown
|
Default value : new BehaviorSubject<string>(null)
|
|
imagePreviewTemplate
|
Type : QueryList<TemplateRef<any>>
|
Decorators :
@ViewChildren('imagePreview')
|
|
imageSrc$
|
Type : Observable<string>
|
|
loading
|
Type : unknown
|
Default value : false
|
|
objectFitOptions
|
Type : []
|
Default value : [
{
label: gettext('Contain`verb, image fitting option`'),
value: 'contain',
description: gettext(
'The image is entirely displayed within the widget while preserving the aspect ratio.'
)
},
{
label: gettext('Cover`verb, image fitting option`'),
value: 'cover',
description: gettext(
'The image is resized to fill the widget while preserving the aspect ratio. Overflowing areas are clipped.'
)
},
{
label: gettext('Fill`verb, image fitting option`'),
value: 'fill',
description: gettext(
'The image is stretched to fill the widget, overriding the aspect-ratio.'
)
},
{
label: gettext('Full width`image fitting option`'),
value: 'full-width',
description: gettext(
`The image is resized to fit the widget's width while preserving the aspect ratio. Overflowing area is scrollable.`
)
}
]
|
|
styling
|
Type : ImageWidgetStyle | null
|
<div [formGroup]="formGroup">
<fieldset class="c8y-fieldset">
<legend>{{ 'Image' | translate }}</legend>
<c8y-form-group class="m-b-16">
<c8y-drop-area
class="drop-area-sm"
[icon]="'upload'"
formControlName="images"
[accept]="'image'"
[maxAllowedFiles]="1"
></c8y-drop-area>
<c8y-messages>
<c8y-message
name="maxFileSizeReached"
[text]="
'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'
| translate
"
></c8y-message>
<c8y-message
name="wrongFileType"
[text]="'Wrong file type, select an image.' | translate"
></c8y-message>
<c8y-message
name="maxlength"
[text]="'Only select one image.' | translate"
></c8y-message>
<c8y-message
name="required"
[text]="'An image is required.' | translate"
></c8y-message>
<c8y-message
name="minlength"
[text]="'An image is required.' | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</fieldset>
@if (imageSrc$ | async; as src) {
<div [formGroupName]="'styling'">
<fieldset class="c8y-fieldset">
<legend>
{{ 'Image display' | translate }}
</legend>
<c8y-form-group class="form-group-sm m-b-0">
<c8y-list-group
class="no-border-last p-b-16"
role="list"
>
@for (
objectFitOption of objectFitOptions;
track objectFitOption.value;
let i = $index
) {
<c8y-li role="listitem">
<label class="c8y-radio">
<input
type="radio"
[id]="'groupradiocontentclass' + i"
formControlName="objectFit"
[value]="objectFitOption.value"
/>
<span></span>
<span class="l-h-1">
{{ objectFitOption.label | translate }}
<br />
<small class="text-muted">
{{ objectFitOption.description | translate }}
</small>
</span>
</label>
</c8y-li>
}
</c8y-list-group>
</c8y-form-group>
</fieldset>
<fieldset class="c8y-fieldset">
<legend>
{{ 'Image alignment' | translate }}
</legend>
<div class="row">
<div class="col-md-6">
<c8y-form-group class="form-group-sm">
<label>{{ 'Horizontal`alignment`' | translate }}</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="objectPositionX"
>
<option [ngValue]="'left'">
{{ 'left`horizontal alignment`' | translate }}
</option>
<option [ngValue]="'center'">
{{ 'center`horizontal alignment`' | translate }}
</option>
<option [ngValue]="'right'">
{{ 'right`horizontal alignment`' | translate }}
</option>
</select>
</div>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group class="form-group-sm">
<label>{{ 'Vertical`alignment`' | translate }}</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="objectPositionY"
>
<option [ngValue]="'top'">
{{ 'top`vertical alignment`' | translate }}
</option>
<option [ngValue]="'center'">
{{ 'center`vertical alignment`' | translate }}
</option>
<option [ngValue]="'bottom'">
{{ 'bottom`vertical alignment`' | translate }}
</option>
</select>
</div>
</c8y-form-group>
</div>
</div>
</fieldset>
<ng-template #imagePreview>
<img
[ngStyle]="styling"
alt="{{ 'Image preview' | translate }}"
[src]="src"
[ngClass]="styling ? 'fit-h fit-w' : 'img-responsive'"
/>
</ng-template>
</div>
}
@if (loading) {
<div class="d-flex j-c-center">
<c8y-loading></c8y-loading>
</div>
}
</div>