File
C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-notes-editor/live-apps-notes-editor.component.ts
Description
Editor component to edit a note
Extends
Example
<tcla-live-apps-notes-editor></tcla-live-apps-notes-editor>Metadata
| selector | tcla-live-apps-notes-editor |
| styleUrls | ./live-apps-notes-editor.component.css |
| templateUrl | ./live-apps-notes-editor.component.html |
Index
Properties |
|
Methods |
Inputs |
Outputs |
HostListeners |
Constructor
constructor()
|
Inputs
| isReply | |
Default value : false
|
|
| noteText | |
Type : string
|
|
Outputs
| noteSubmitted | |
Type : EventEmitter
|
|
|
~event noteSubmitted : Internal |
|
HostListeners
| window:resize |
Arguments : '$event'
|
window:resize(event)
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:45
|
Methods
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:91
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:99
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:104
|
|
Returns :
void
|
| setupWidthObserver |
setupWidthObserver()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:70
|
|
Returns :
void
|
Properties
| Public submitNote |
Default value : () => {...}
|
| Protected _destroyed$ |
Default value : new Subject()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:39
|
| componentChildDivs |
Type : LiveAppsComponent[]
|
Decorators :
@ViewChildren('componentChildDiv')
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:36
|
| componentDiv |
Type : ElementRef
|
Decorators :
@ViewChild('componentDiv', {static: false})
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:35
|
| Protected containerChanges$ |
Type : Observable<TcComponent>
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:40
|
| Private observer |
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:42
|
| Public resize |
Default value : () => {...}
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:56
|
| Public widget |
Type : TcComponent
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:41
|
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {LiveAppsComponent} from '../live-apps-component/live-apps-component.component';
/**
* Editor component to edit a note
*
* 
*
*@example <tcla-live-apps-notes-editor></tcla-live-apps-notes-editor>
*/
@Component({
selector: 'tcla-live-apps-notes-editor',
templateUrl: './live-apps-notes-editor.component.html',
styleUrls: ['./live-apps-notes-editor.component.css']
})
export class LiveAppsNotesEditorComponent extends LiveAppsComponent {
@Input() noteText: string; // use 'CASE_APP' to share notes with case manager
@Input() isReply = false;
/**
* ~event noteSubmitted : Internal
*/
@Output() noteSubmitted = new EventEmitter(); // notify text submitted
constructor() {
super();
}
public submitNote = (noteText) => {
this.noteSubmitted.emit(noteText);
this.noteText = undefined;
}
}
<div class="tcs-collaboration-new-thread" fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
<mat-icon *ngIf="isReply" class="tcs-icon tcs-collaboration-reply-item-icon" svgIcon="tcs-collaboration-reply"></mat-icon>
<form class="tcs-collaboration-new-thread-form" #newThreadForm="ngForm" fxFlex>
<textarea fxFlex class="tcs-collaboration-input" [(ngModel)]="noteText" name="noteText" md-maxlength="10000" placeholder="New Note... " rows="2"></textarea>
</form>
<mat-icon class="tcs-icon tcs-collaboration-send-icon" svgIcon="tcs-collaboration-send" (click)="submitNote(noteText)"></mat-icon>
</div>
./live-apps-notes-editor.component.css
.tcs-collaboration-new-thread {
/*margin-left: 20px;
margin-right: 20px;*/
/*max-height: 55px;
height: 55px;
min-height: 55px;*/
}
.tcs-collaboration-new-thread-form {
max-width: 90%;
max-height: 100%;
}
.tcs-collaboration-input {
height: 55px;
max-width: 100%;
border-color: #d5e6ff;
font-size: 11px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.1px;
color: #b6b6b6;
resize: none;
border-radius: 3px;
}
.tcs-icon.tcs-collaboration-send-icon {
height: 24px;
width: 24px;
margin-left: 12px;
}
.tcs-icon {
height: 20px;
width: 20px;
}
.tcs-collaboration-reply-item-icon {
transform: scale(1,-1);
margin-top: 10px;
}
Legend
Html element
Component
Html element with directive