@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
65 lines (64 loc) • 3.48 kB
TypeScript
import { AfterViewChecked, EventEmitter, OnDestroy, QueryList, TemplateRef } from '@angular/core';
import { TabbableListDirective } from '../../directives/accessibility';
import { ResizeDimensions } from '../../directives/resize/index';
import { WizardComponent, WizardService, WizardStepComponent } from '../wizard/index';
import { MarqueeWizardStepComponent } from './marquee-wizard-step.component';
import * as i0 from "@angular/core";
export declare class MarqueeWizardComponent<TStepContext = unknown> extends WizardComponent implements OnDestroy, AfterViewChecked {
readonly wizardService: WizardService<MarqueeWizardStepComponent<unknown>>;
private readonly _resizeService;
private readonly _elementRef;
tabbableList: TabbableListDirective;
/** Provide a custom template for the description in the left panel */
description: string | TemplateRef<void>;
/** Provide a custom template for the step in the left panel */
stepTemplate: TemplateRef<MarqueeWizardStepContext<TStepContext>>;
/** Initial set to default width to match 240px on left but can be changed with a percentage value */
sidePanelWidth: number;
/** Width of the splitter - default is 10 */
gutterSize: number;
/** If set to true the resizable splitter will be enabled and set to the default width **/
resizable: boolean;
/** Emit the current width of the splitter*/
sidePanelWidthChange: EventEmitter<number>;
/** Access each step content component */
steps: QueryList<MarqueeWizardStepComponent<unknown>>;
/**
* If the wizard is in a modal it may initially have a size of 0 until the modal displays
* in which case if we are using the splitter it will not render correctly. We use this
* variable to only initialise the splitter when the content has a width.
*/
_isInitialised: boolean;
get isTemplate(): boolean;
constructor();
ngAfterViewChecked(): void;
ngOnDestroy(): void;
/**
* If the current step is valid, mark it as
* complete and go to the next step
*/
next(): Promise<void>;
/**
* Emit the onFinishing event and if valid the onFinish event.
* Also mark the final step as completed if it is valid
*/
finish(): Promise<void>;
onResize(event: ResizeDimensions): void;
/** Whenever the drag event ends, update the internal value and emit the new size */
onDragEnd({ sizes }: SplitDragEndEvent): void;
gotoStep(step: WizardStepComponent): void;
protected setFutureStepsUnvisited(currentStep: MarqueeWizardStepComponent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MarqueeWizardComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MarqueeWizardComponent<any>, "ux-marquee-wizard", never, { "description": { "alias": "description"; "required": false; }; "stepTemplate": { "alias": "stepTemplate"; "required": false; }; "sidePanelWidth": { "alias": "sidePanelWidth"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; }, { "sidePanelWidthChange": "sidePanelWidthChange"; }, ["steps"], ["*"], false, never>;
}
/** Angular Split does not export a type for this so we created our own */
interface SplitDragEndEvent {
gutterNum: number;
sizes: (number | '*')[];
}
export interface MarqueeWizardStepContext<T> {
$implicit: MarqueeWizardStepComponent<T>;
index: number;
context: T;
}
export {};