@rdkmaster/jigsaw-labs/component/box/editable-box.html

Jigsaw, the next generation component set for RDK

<j-editable-box
    *ngFor="let itemData of data?.nodes; first as isFirst"
    [data]="itemData"
    [(direction)]="itemData.direction"
    [justify]="itemData.justify"
    [align]="itemData.align"
    [order]="itemData.order"
    [(grow)]="itemData.grow"
    [shrink]="itemData.shrink"
    [editable]="editable"
    [showTabBar]="showTabBar"
    [_isFirst]="isFirst"
    [resizeLineWidth]="resizeLineWidth"
    [parent]="this"
    (_remove)="_$removeBox($event)">
</j-editable-box>

<div *ngIf="(!data || !data.nodes || !data.nodes.length) && editable && showOptionBar"
     class="jigsaw-editable-box-option-box" (click)="_$addContent()"
     [class.jigsaw-editable-box-has-content]="data?.components?.length">
    <i class="fa fa-plus"></i>
</div>

<div *ngIf="(!data || !data.nodes || !data.nodes.length) && editable && showOptionBar"
     class="jigsaw-editable-box-option-bar"
     [class.jigsaw-editable-box-has-content]="data?.components?.length">
    <span class="fa fa-minus-square-o" (click)="_$addBox('v')"></span>
    <span class="fa fa-columns" (click)="_$addBox('h')"></span>
    <span *ngIf="showTabBar" class="fa fa fa-clone" (click)="_$addTabsWrapper()"></span>
    <span class="fa fa-trash-o" (click)="_$remove()"></span>
</div>

<div *ngIf="(!data || !data.nodes || !data.nodes.length) && editable && blocked"
     class="jigsaw-editable-box-block"
     [class.jigsaw-editable-box-has-content]="data?.components?.length"></div>

<b #resizeLine
   *ngIf="!_isFirst"
   j-resizable
   [parentBox]="element"
   [effectBox]="parent?.element"
   [effectDirection]="parent?.direction"
   [range]="_$resizeRange"
   (resize)="_$handleResize($event, true)"
   (mousedown)="_$handleResizeStart($event)"
   (resizeEnd)="_$handleResizeEnd()"
   class="jigsaw-editable-box-resize"
   [class.jigsaw-editable-box-resize-column]="parent?.direction == 'column'"
   [style.width]="parent?.direction == 'column' ? '100%' : resizeLineWidth"
   [style.height]="parent?.direction == 'column' ? resizeLineWidth : '100%'"></b>

<ng-template jigsaw-renderer-host></ng-template>