File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
Async
onBeforeSave
|
onBeforeSave(config?: ImageWidgetConfig)
|
|
Returns : Promise<boolean>
|
|
destroyed$
|
Default value : new Subject<void>()
|
|
fileFromConfig
|
Type : File
|
|
imageBinaryId$
|
Default value : new BehaviorSubject<string>(null)
|
|
imageSrc$
|
Type : Observable<string>
|
|
loading
|
Default value : false
|
|
objectFitOptions
|
Type : []
|
Default value : [
{
label: gettext('Contain'),
value: 'contain',
description: gettext(
'The image is entirely displayed within the widget while preserving the aspect ratio.'
)
},
{
label: gettext('Cover'),
value: 'cover',
description: gettext(
'The image is resized to fill the widget while preserving the aspect ratio. Overflowing areas are clipped.'
)
},
{
label: gettext('Fill'),
value: 'fill',
description: gettext(
'The image is stretched to fill the widget, overriding the aspect-ratio.'
)
},
{
label: gettext('Full width'),
value: 'full-width',
description: gettext(
'The image is resized to fit the widgets width while preserving the aspect ratio. Overflowing area is scrollable.'
)
}
]
|
|
styling
|
Type : ImageWidgetStyle | null
|
<div [formGroup]="formGroup" class="row" style="height: 340px">
<div class="col-md-12">
<c8y-form-group>
<label>{{ 'Image' | translate }}</label>
<c8y-drop-area
formControlName="images"
class="drop-area-sm"
[icon]="'upload'"
[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, please 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>
</div>
<ng-container *ngIf="imageSrc$ | async as src">
<div class="col-md-6">
<div class="legend form-block">
{{ 'Size and alignment' | translate }}
</div>
<div [formGroupName]="'styling'">
<c8y-form-group>
<label>
{{ 'Image display' | translate }}
</label>
<ul class="list-group separator-top-bottom">
<li
class="list-group-item d-flex a-i-center p-l-0"
*ngFor="let objectFitOption of objectFitOptions; let i = index"
>
<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>
</li>
</ul>
</c8y-form-group>
<div class="row">
<div class="col-md-6">
<c8y-form-group>
<label>{{ 'X-axis alignment' | translate }}</label>
<div class="c8y-select-wrapper">
<select class="form-control" formControlName="objectPositionX">
<option [ngValue]="'left'">{{ 'left' | translate }}</option>
<option [ngValue]="'center'">{{ 'center' | translate }}</option>
<option [ngValue]="'right'">{{ 'right' | translate }}</option>
</select>
</div>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group>
<label>{{ 'Y-axis alignment' | translate }}</label>
<div class="c8y-select-wrapper">
<select class="form-control" formControlName="objectPositionY">
<option [ngValue]="'top'">{{ 'top' | translate }}</option>
<option [ngValue]="'center'">{{ 'center' | translate }}</option>
<option [ngValue]="'bottom'">{{ 'bottom' | translate }}</option>
</select>
</div>
</c8y-form-group>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="legend form-block">{{ 'Preview' | translate }}</div>
<div class="form-group">
<div class="border-top border-right border-bottom border-left inner-scroll" style="height: 300px">
<img
[src]="src"
[ngClass]="styling ? 'fit-h fit-w' : 'img-responsive'"
[ngStyle]="styling"
/>
</div>
</div>
</div>
</ng-container>
<div class="col-md-12 d-flex j-c-center" *ngIf="loading">
<c8y-loading></c8y-loading>
</div>
</div>