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
|
All classes added to this child
Type :
Default value : |
data
|
The data object can be used as a dataTransfer object for events of the child.
Type : |
height
|
The height of the component in grid-rows.
Default value : |
isFrozen
|
If a dashboard is frozen, all children cannot be moved or resized.
Default value : |
margin
|
The margin of the child in pixel.
Default value : |
useIntersection
|
The child content is initialized, as soon it is scrolled into viewport
Default value : |
width
|
The width of the component in grid-columns.
Default value : |
x
|
The x position of the child. |
y
|
The y position of the child. |
changeEnd
|
An event fired if a child change is ended $event Type: EventEmitter
|
changeStart
|
An event fired if a child change is started (dragging or resizing) $event Type: EventEmitter
|
| attr.style |
attr.style:
|
|
nasty workaround for that issue: https://github.com/angular/angular/issues/9343 |
| dragStarted | ||||||
dragStarted($event: CdkDragStart)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnChanges |
ngOnChanges()
|
|
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 |
_pxHeight:
|
Type : string
|
Default value : '100%'
|
| _pxWidth |
_pxWidth:
|
Type : string
|
Default value : '100%'
|
| actions |
actions:
|
Type : []
|
Default value : []
|
Decorators :
@ContentChildren(DashboardChildActionComponent)
|
| changeSubscription |
changeSubscription:
|
Type : Subscription
|
|
The observable subscription which is listen to on changes (drag or resize). |
| Public dashboard |
dashboard:
|
Type : DashboardComponent
|
Decorators :
@Inject(undefined)
|
| dragSource |
dragSource:
|
Type : CdkDrag
|
| Public element |
element:
|
Type : ElementRef
|
| intersected |
intersected:
|
Default value : false
|
|
An indicator if the child is intersected (that mean visible for the user) |
| isDragging |
isDragging:
|
Default value : false
|
| isResize |
isResize:
|
Default value : false
|
| klasses |
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
|
<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>