UNPKG

@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
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; }