@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
115 lines (114 loc) • 6.74 kB
TypeScript
import { OnDestroy, OnInit } from '@angular/core';
import { ActionDirection } from '../dashboard.service';
import { DashboardWidgetComponent } from '../widget/dashboard-widget.component';
import * as i0 from "@angular/core";
export declare class DashboardGrabHandleDirective implements OnInit, OnDestroy {
readonly widget: DashboardWidgetComponent;
private readonly _dashboard;
private readonly _handle;
private readonly _elementRef;
private readonly _announcer;
/** Specify whether or not this handle can be used to perform moving */
uxGrabAllowMove: boolean;
/** Specify whether or not this handle can be used to perform resizing */
uxGrabAllowResize: boolean;
/** The aria label for the grab handle */
uxGrabAriaLabel: (widget: DashboardWidgetComponent) => string | string;
/** Customize the announcement that is made whenever an item has successfully been moved or resized */
uxGrabChangeSuccessAnnouncement: (widget: DashboardWidgetComponent, differences: DashboardLayoutDiff[]) => string | string;
/** Customize the announcement that is made whenever an item enters 'grab' mode */
uxGrabStartAnnouncement: (widget: DashboardWidgetComponent) => string | string;
/** Customize the announcement thqt is made whenever an item cannot be moved */
uxGrabMoveFailAnnouncement: (widget: DashboardWidgetComponent, direction: ActionDirection) => string | string;
/** Customize the announcement thqt is made whenever an item cannot be resized */
uxGrabResizeFailAnnouncement: (widget: DashboardWidgetComponent, direction: ActionDirection) => string | string;
/** Customize the announcement made whenever the moving/resizing is commited */
uxGrabConfirmAnnouncement: (widget: DashboardWidgetComponent) => string | string;
/** Customize the announcement made whenever the moving/resizing is cancelled */
uxGrabCancelAnnouncement: (widget: DashboardWidgetComponent) => string | string;
/** Binding for the grab handle aria label */
ariaLabel: string;
/** We must programmatically control the focus of the drag handles */
tabIndex: number;
/** Store the current dragging state */
isGrabbing: boolean;
/** Store the current layout when we enter 'grab' mode */
private _cache;
/** Store the layout after the most recent successful move or resize */
private _lastMovement;
/** Emit when the directive is destroyed to unsubscribe from all observables */
private readonly _onDestroy;
constructor();
/** Set the initial aria label and subscribe to layout changes */
ngOnInit(): void;
/** Unsubscribe from all observables */
ngOnDestroy(): void;
/** Begin drag mode and cache initial state */
enableDragMode(): void;
/** Finish drag mode and commit the current state */
disableDragMode(): void;
/** Finish the drag mode and restore the original state */
cancelDragMode(): void;
/** Toggle the drag mode state */
toggleDragMode(): void;
/** Set the tab index and optionally focus the DOM element */
focus(focusElement?: boolean): void;
/** Make this item non-tabbable */
blur(): void;
/** When the grab handle loses focus then exit 'grab' mode */
onBlur(): void;
/** Handle key events */
onKeydown(event: KeyboardEvent, key: number, ctrlKey: boolean): void;
/** Get an announcement from the inputs - they may be a string or a function so handle both */
getAnnouncement(announcement: Function | string, ...args: any[]): string;
/** Move the widget in a given direction based on arrow keys */
private moveWidget;
/** Resize the widgets accordingly based on the arrow keys */
private resizeWidget;
/** Shift focus between the variour grab handles */
private moveFocus;
/** Convert an arrow key code into an ActionDirection enum */
private getDirectionFromKey;
/** Supply the default grab handle aria label based on the provided constraints */
private getDefaultAriaLabel;
/** Get the default announcement whenever a movement or resize was successful */
private getChangeSuccessAnnouncement;
private getDiffAnnouncements;
/** Get the default announcement whenever a movement is not possible due to dashboard boundaries */
private getMoveFailAnnouncement;
/** Get the default announcement whenever a resize is not possible due to either widget constraints of dashboard bounds */
private getResizeFailAnnouncement;
/** Get the default announcement whenever we enter 'grab' mode */
private getStartAnnouncement;
/** Get the default announcement whenever grab mode is exited after a movement or resize */
private getConfirmAnnouncement;
/** Get the default announcement whenever grab mode is exited after being cancelled */
private getCancellationAnnouncement;
/** Get a description of all dashboard widgets, their positions and sizes */
private getDashboardAriaLabel;
/** Get a description of a given widget */
private getWidgetAriaLabel;
/** Get an object describing all the changes that have been made to all widgets since the last change */
private getLayoutDiff;
static ɵfac: i0.ɵɵFactoryDeclaration<DashboardGrabHandleDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<DashboardGrabHandleDirective, "[uxDashboardGrabHandle]", ["ux-dashboard-grab-handle"], { "uxGrabAllowMove": { "alias": "uxGrabAllowMove"; "required": false; }; "uxGrabAllowResize": { "alias": "uxGrabAllowResize"; "required": false; }; "uxGrabAriaLabel": { "alias": "uxGrabAriaLabel"; "required": false; }; "uxGrabChangeSuccessAnnouncement": { "alias": "uxGrabChangeSuccessAnnouncement"; "required": false; }; "uxGrabStartAnnouncement": { "alias": "uxGrabStartAnnouncement"; "required": false; }; "uxGrabMoveFailAnnouncement": { "alias": "uxGrabMoveFailAnnouncement"; "required": false; }; "uxGrabResizeFailAnnouncement": { "alias": "uxGrabResizeFailAnnouncement"; "required": false; }; "uxGrabConfirmAnnouncement": { "alias": "uxGrabConfirmAnnouncement"; "required": false; }; "uxGrabCancelAnnouncement": { "alias": "uxGrabCancelAnnouncement"; "required": false; }; }, {}, never, never, false, never>;
}
export interface DashboardLayoutDiff {
widget: DashboardWidgetComponent;
previousColumn: number;
currentColumn: number;
previousRow: number;
currentRow: number;
previousColumnSpan: number;
currentColumnSpan: number;
previousRowSpan: number;
currentRowSpan: number;
isMovedLeft: boolean;
isMovedRight: boolean;
isMovedUp: boolean;
isMovedDown: boolean;
isMovedHorizontally: boolean;
isMovedVertically: boolean;
isResized: boolean;
isMoved: boolean;
}