core/dashboard/dashboard-child.component.ts
A dashboard child allows to position elements
correctly on a grid. The user can then resize and
rearrange the elements, as long as they are not frozen.
By setting c8y-dashboard-child-actions and
c8y-dashboard-child-title on the element you can add
custom actions or a custom title to the current child.
By adding the correct branded classes, you can define the look and feel of the child. By default it is displayed as a card.
Example:
<c8y-dashboard-child
#cpWidget3
[isFrozen]="isFrozen"
[x]="0"
[y]="3"
[width]="4"
[height]="4"
[class]="'card-dashboard panel-content-transparent'"
>
<c8y-dashboard-child-title *ngIf="showTitle">
<span>Transparent!</span>
</c8y-dashboard-child-title>
<c8y-dashboard-child-action>
<a href="" (click)="showTitle = !showTitle; (false)">
<i [c8yIcon]="'heading'"></i> Hide/show title
</a>
</c8y-dashboard-child-action>
<c8y-dashboard-child-action>
<a href="" (click)="cpWidget3.isFrozen = !cpWidget3.isFrozen; (false)">
<i [c8yIcon]="cpWidget3.isFrozen ? 'lock' : 'unlock'"></i> Toggle freeze
</a>
</c8y-dashboard-child-action>
x: {{ cpWidget3.x }}<br />
y: {{ cpWidget3.y }}<br />
width: {{ cpWidget3.width }}<br />
height: {{ cpWidget3.height }}<br />
</c8y-dashboard-child>
| host | { |
| selector | c8y-dashboard-child |
| templateUrl | ./dashboard-child.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
constructor(dashboard: DashboardComponent, sanitizer: DomSanitizer, element: ElementRef)
|
||||||||||||
|
Parameters :
|
| class |
Type : string[] | literal type
|
Default value : {}
|
|
All classes added to this child |
| data |
Type : Widget | any
|
|
The data object can be used as a dataTransfer object for events of the child. |
| height |
Type : number
|
Default value : 1
|
|
The height of the component in grid-rows. |
| isFrozen |
Type : boolean
|
Default value : false
|
|
If a dashboard is frozen, all children cannot be moved or resized. |
| margin |
Type : number
|
Default value : 12
|
|
The margin of the child in pixel. |
| useIntersection |
Type : boolean
|
Default value : false
|
|
The child content is initialized, as soon it is scrolled into viewport |
| width |
Type : number
|
Default value : 1
|
|
The width of the component in grid-columns. |
| x |
Type : any
|
|
The x position of the child. |
| y |
Type : any
|
|
The y position of the child. |
| changeEnd |
Type : EventEmitter
|
|
An event fired if a child change is ended |
| changeStart |
Type : EventEmitter
|
|
An event fired if a child change is started (dragging or resizing) |
| attr.style |
Type : any
|
|
nasty workaround for that issue: https://github.com/angular/angular/issues/9343 |
| dragStarted | ||||||
dragStarted($event: CdkDragStart)
|
||||||
|
Parameters :
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnChanges |
ngOnChanges()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| reset | ||||||
reset($event?: CdkDragEnd)
|
||||||
|
Parameters :
Returns :
void
|
| resizeStarted | ||||||
resizeStarted($event: CdkDragStart)
|
||||||
|
Parameters :
Returns :
void
|
| setDynamicDimension |
setDynamicDimension()
|
|
Returns :
void
|
| _pxHeight |
Type : string
|
Default value : '100%'
|
| _pxWidth |
Type : string
|
Default value : '100%'
|
| actions |
Type : []
|
Default value : []
|
Decorators :
@ContentChildren(DashboardChildActionComponent)
|
| changeSubscription |
Type : Subscription
|
|
The observable subscription which is listen to on changes (drag or resize). |
| Public dashboard |
Type : DashboardComponent
|
| dragSource |
Type : CdkDrag
|
| Public element |
Type : ElementRef
|
| intersected |
Default value : false
|
|
An indicator if the child is intersected (that mean visible for the user) |
| isDragging |
Default value : false
|
| isResize |
Default value : false
|
| klasses |
Type : object
|
Default value : {}
|
| pxWidth | ||||
setpxWidth(value)
|
||||
|
Updates the pixel width of the child (used for resizing)
Parameters :
Returns :
void
|
| pxHeight | ||||
setpxHeight(value)
|
||||
|
Updates the pixel height of the child (used for resizing)
Parameters :
Returns :
void
|
| inlineStyle |
getinlineStyle()
|
|
nasty workaround for that issue: https://github.com/angular/angular/issues/9343 |
<div cdkDropList>
<div *ngIf="isResize" class="card-placeholder"></div>
<div
[ngClass]="klasses"
cdkDrag
[ngStyle]="{ width: _pxWidth, height: _pxHeight }"
(cdkDragStarted)="dragStarted($event)"
(cdkDragEnded)="reset($event)"
[cdkDragDisabled]="isFrozen"
>
<div
class="card-header-actions card-header-grid"
[ngClass]="{ 'drag-handle': !isFrozen, draggableCursor: !isFrozen }"
cdkDragHandle
>
<ng-content select="c8y-dashboard-child-title"></ng-content>
<div class="header-actions" *ngIf="!isFrozen && actions.length > 0">
<div class="optionsBtn dropdown" dropdown container="body" placement="bottom right">
<a
title="{{ 'Settings' | translate }}"
href=""
class="btnIcon c8y-dropdown"
(click)="(false)"
dropdownToggle
>
<i [c8yIcon]="'cog'"></i>
</a>
<ul
class="dropdown-menu dropdown-menu-right"
style="right:-1px;"
*dropdownMenu
>
<ng-container *ngFor="let action of actions">
<ng-container *ngTemplateOutlet="action.template"></ng-container>
</ng-container>
</ul>
</div>
</div>
</div>
<div class="card-inner-scroll">
<ng-content></ng-content>
</div>
<div
*ngIf="!isFrozen && !isDragging"
class="resize-handle"
cdkDrag
[cdkDragDisabled]="isFrozen"
(cdkDragStarted)="resizeStarted($event)"
(cdkDragEnded)="reset($event)"
></div>
<div class="resize-icon" *ngIf="!isFrozen && !isDragging"></div>
<div *cdkDragPlaceholder class="card-placeholder"></div>
</div>
</div>