core/resizable-grid/resizable-grid.component.ts
OnInit
AfterViewInit
OnChanges
OnDestroy
| selector | c8y-resizable-grid |
| standalone | true |
| imports |
CommonModule
C8yTranslatePipe
|
| templateUrl | ./resizable-grid.component.html |
Properties |
Methods |
Inputs |
HostBindings |
HostListeners |
Accessors |
constructor(renderer: Renderer2)
|
||||||||
|
Creates an instance of ResizableGridComponent.
Parameters :
|
| collapseThreshold |
Type : number
|
Default value : 320
|
|
Minimum width (in pixels) before a column is considered collapsed. |
| leftColumnWidth |
Type : string
|
Default value : '50%'
|
|
Initial width of the left column (A). Can be any valid CSS width value (e.g., '50%', '300px'). |
| trackId |
Type : string | null
|
Default value : null
|
|
Optional key for localStorage to persist the left column width between sessions. |
| class.is-resizing |
Type : boolean
|
Default value : false
|
|
True if the user is currently resizing the grid. |
| style.--col-a-width |
Type : string
|
Default value : '50%'
|
|
CSS width value for the left column (A). Used for dynamic styling via HostBinding. |
| window:mousemove | ||||||
Arguments : '$event'
|
||||||
window:mousemove(event: MouseEvent)
|
||||||
|
Mouse move event handler for resizing columns.
Parameters :
|
| window:mouseup |
window:mouseup()
|
|
Mouse up event handler for ending resize and applying collapse logic. |
| ngAfterViewInit |
ngAfterViewInit()
|
|
Angular lifecycle hook. Sets up initial column width after view initialization.
Returns :
void
|
| ngOnChanges | ||||||||
ngOnChanges(changes: SimpleChanges)
|
||||||||
|
Angular lifecycle hook. Handles changes to input properties.
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Angular lifecycle hook. Cleans up cursor style if resizing is active.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onKeyDown | ||||||||
onKeyDown(event: KeyboardEvent)
|
||||||||
|
Keyboard event handler for resizing columns with arrow keys.
Parameters :
Returns :
void
|
| onMouseDown | ||||||||
onMouseDown(event: MouseEvent)
|
||||||||
|
Mouse down event handler for starting resize.
Parameters :
Returns :
void
|
| onMouseMove | ||||||||
onMouseMove(event: MouseEvent)
|
||||||||
Decorators :
@HostListener('window:mousemove', ['$event'])
|
||||||||
|
Mouse move event handler for resizing columns.
Parameters :
Returns :
void
|
| onMouseUp |
onMouseUp()
|
Decorators :
@HostListener('window:mouseup')
|
|
Mouse up event handler for ending resize and applying collapse logic.
Returns :
void
|
| colA |
Type : ElementRef<HTMLDivElement>
|
Decorators :
@ViewChild('colA')
|
|
Reference to the left column element. |
| colAId |
Type : string
|
| colB |
Type : ElementRef<HTMLDivElement>
|
Decorators :
@ViewChild('colB')
|
|
Reference to the right column element. |
| colBId |
Type : string
|
| isResizing |
Default value : false
|
Decorators :
@HostBinding('class.is-resizing')
|
|
True if the user is currently resizing the grid. |
| colAWidthPercent |
getcolAWidthPercent()
|
|
Public getter for aria-valuenow
Returns :
number
|
<div class="resizable-grid-container" [class.is-resizing]="isResizing">
<div #colA class="col-a" [id]="colAId">
<!-- Content for the left column goes here -->
<ng-content select="[left-pane]"></ng-content>
</div>
<div
class="resizer"
(mousedown)="onMouseDown($event)"
(keydown)="onKeyDown($event)"
tabindex="0"
role="separator"
aria-orientation="vertical"
[attr.aria-controls]="colAId + ' ' + colBId"
[attr.aria-label]="'Resize columns' | translate"
[attr.aria-valuenow]="colAWidthPercent"
aria-valuemin="0"
aria-valuemax="100"
>
<i class="dlt-c8y-icon-arrow-circle-divide-horizontal"></i>
</div>
<div #colB class="col-b" [id]="colBId">
<!-- Content for the right column goes here -->
<ng-content select="[right-pane]"></ng-content>
</div>
</div>