File
Extends
Implements
Metadata
selector |
abl-dojo |
styleUrls |
./abl-dojo.component.css |
templateUrl |
./abl-dojo.component.html |
Methods
handleLayoutChange
|
handleLayoutChange(newLayout: literal type)
|
Parameters :
Name |
Type |
Optional |
newLayout |
literal type
|
No
|
|
Public
onFileDrop
|
onFileDrop(file: NgxFileDropEntry[])
|
Parameters :
Name |
Type |
Optional |
file |
NgxFileDropEntry[]
|
No
|
|
ablResult
|
Type : string
|
Default value : ''
|
ablSource
|
Type : string
|
Default value : 'BLOCK-LEVEL ON ERROR UNDO, THROW.\n\n'
|
container
|
Type : ElementRef<HTMLElement>
|
Decorators :
@ViewChild('container', {read: ElementRef})
|
Public
fileIsOver
|
Default value : false
|
<div class="container-fluid" #container>
<form class="form-horizontal">
<div class="form-group">
<ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="onFileDrop($event)"
(onFileOver)="fileIsOver=true" (onFileLeave)="fileIsOver=false">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
<abl-editor [(ablSource)]="ablSource" (ctrlXPressed)="executeAbl()" [ngClass]="{'file-is-over': fileIsOver, 'file-is-outside': !fileIsOver}"></abl-editor>
</ng-template>
</ngx-file-drop>
</div>
<div class="form-group">
<div class="col-12">
<button (click)="executeAbl()" class="k-button">
<i class="fa fa-play-circle"></i>
<span> Execute (CTRL-X)</span>
</button>
<a href="help.consultingwerkcloud.com/smartcomponent_library/release/" target="_blank">Class Reference</a>
</div>
</div>
<div class="form-group">
<div class="col-12">
<textarea class="k-textbox" placeholder="Result" readonly
name="inputAblResult" id="inputAblResult" [(ngModel)]="ablResult"></textarea>
</div>
</div>
</form>
</div>
textarea {
font-family: Courier;
font-size: inherit;
font-weight: bold !important;
}
#inputAblResult {
width: 100%;
height: 200px;
}
::ng-deep abl-editor {
width: 100% !important;
height: 100% !important;
}
::ng-deep abl-editor.file-is-over {
border-width: 1px !important;
border-style: solid !important;
border-color: red !important;
border-style: dashed !important;
}
::ng-deep abl-editor.file-is-outside {
border: none !important;
}
::ng-deep div.ngx-file-drop {
width: 100% !important;
height: 100% !important;
}
::ng-deep div.ngx-file-drop__drop-zone {
width: 100% !important;
height: 400px !important;
border: none !important;
}
::ng-deep div.ngx-file-drop__drop-zone--over {
background-color: transparent !important;
}
::ng-deep div.ngx-file-drop__content {
width: 100% !important;
height: 100% !important;
}
Legend
Html element with directive