import { AnimationEvent } from '@angular/animations'; import { ConfigurableFocusTrapFactory, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y'; import { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/overlay'; import { Platform } from '@angular/cdk/platform'; import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, QueryList, Renderer2 } from '@angular/core'; import { BooleanInput } from '@ngx-simple/core/coercion'; import { Observable, Subject } from 'rxjs'; /** * 抽屉显示模式 * - over 抽屉浮在主内容上方,并用一个背景遮住主内容 * - push 抽屉把主内容挤出去,并用一个背景遮住主内容 * - side 抽屉和主内容并排显示,并收缩主内容的宽度,给抽屉腾出空间 * - stack 抽屉浮在主内容上方,并用一个背景遮住主内容,可以并列显示多个抽屉 */ export declare type SimDrawerMode = 'over' | 'push' | 'side' | 'stack'; /** * 用于为抽屉提供抽屉容器,同时避免循环引用。 */ export declare const SIM_DRAWER_CONTAINER: InjectionToken; export declare class SimDrawerContentComponent extends CdkScrollable implements AfterContentInit { private _changeDetectorRef; _container: SimDrawerContainerComponent; constructor(_changeDetectorRef: ChangeDetectorRef, _container: SimDrawerContainerComponent, elementRef: ElementRef, scrollDispatcher: ScrollDispatcher, ngZone: NgZone); ngAfterContentInit(): void; } export declare class SimDrawerComponent implements AfterContentInit, OnDestroy { private _elementRef; private renderer; private _focusTrapFactory; private _focusMonitor; private _platform; private _ngZone; private _doc; _container?: SimDrawerContainerComponent; /** 抽屉是否打开我们重载它是因为我们在事件开始或结束时触发了它。 */ get opened(): boolean; set opened(value: boolean); private _opened; /** 抽屉是否可以关闭与escape键或点击背景 */ disableClose: boolean; /** 附在抽屉上的一面 */ get position(): 'left' | 'right' | 'top' | 'bottom'; set position(value: 'left' | 'right' | 'top' | 'bottom'); private _position; /** * 抽屉打开时是否自动对焦第一个可调焦的元素。 * 当“mode”设置为“side”时默认为false,否则默认为“true”。 * 如果显式启用,焦点将移到抽屉的“side”模式。 */ get autoFocus(): boolean; set autoFocus(value: boolean); private _autoFocus; /** 抽屉打开的方式; 'over'、'stack'、'push'或'side'中的一个 */ get mode(): SimDrawerMode; set mode(value: SimDrawerMode); private _mode; /** 当抽屉的位置改变时触发 */ positionChanged: EventEmitter; /** 当抽屉开始动画时就发出事件 */ _animationStarted: Subject; /** 当抽屉动画完成时就发出事件 */ _animationEnd: Subject; /** 当抽屉打开状态更改时发出的事件 */ readonly openedChange: EventEmitter; /** 当抽屉始关闭时发出的事件 */ readonly beforeClosed: Observable; /** 当抽屉已关闭时发出的事件 */ readonly afterClosed: Observable; /** 当抽屉开始打开时发出的事件 */ readonly beforeOpened: Observable; /** 当抽屉被打开时发出的事件 */ readonly afterOpened: Observable; /** 抽屉动画的当前状态 */ _animationState: 'open-instant' | 'open' | 'void' | 'stack'; /** 堆叠索引 */ _stackIndex: number; /** 当组件被销毁时发射事件 */ private readonly _destroyed; /** * 当抽屉模式改变时发出的事件。这让抽屉容器用来知道何时到何时模式改变,以便它可以适应内容的边距。 */ readonly _modeChanged: Subject; /** 焦点捕获 */ private _focusTrap; /** 抽屉是如何打开的(按键,鼠标点击等) */ private _openedVia; /** 打开抽屉之前的焦点元素 */ private _elementFocusedBeforeDrawerWasOpened; /** 抽屉是否初始化。用于禁用初始动画。 */ private _enableAnimations; constructor(_elementRef: ElementRef, renderer: Renderer2, _focusTrapFactory: ConfigurableFocusTrapFactory, _focusMonitor: FocusMonitor, _platform: Platform, _ngZone: NgZone, _doc: any, _container?: SimDrawerContainerComponent); ngAfterContentInit(): void; ngOnDestroy(): void; /** * 打开抽屉 * @param openedVia 抽屉是通过按键、鼠标点击或编程打开的。用于抽屉关闭后的焦点管理。 */ open(openedVia?: FocusOrigin): Promise<"open" | "close">; /** 关闭抽屉 */ close(): Promise<"open" | "close">; /** * 切换抽屉 * @param isOpen 这个抽屉是否应该打开 * @param openedVia 抽屉是通过按键、鼠标点击或编程打开的。用于抽屉关闭后的焦点管理。 */ toggle(isOpen?: boolean, openedVia?: FocusOrigin): Promise<"open" | "close">; _getZIndex(): number; _getWidth(): number; /** 设置堆叠模式的样式 */ _setStyle(style: string, value: any): void; /** 设置堆叠模式的class */ _setClass(name: string, toggle: boolean): void; _animationStartListener(event: AnimationEvent): void; _animationDoneListener(event: AnimationEvent): void; /** 用单击了背景的上下文关闭抽屉 */ _closeViaBackdropClick(): Promise<"open" | "close">; /** * 切换抽屉的打开状态 * @param isOpen 这个抽屉是打开还是关上 * @param restoreFocus 关闭时是否应将焦点恢复 * @param openedVia 可在打开抽屉时随意设置的焦点原点。当焦点在抽屉关闭时恢复时,将使用原点。 */ private _setOpen; /** 焦点当前是否在抽屉内 */ private _isFocusWithinDrawer; /** * 把焦点移到抽屉里。注意,即使在`side`模式下禁用了焦点捕获,这也能工作。 */ private _takeFocus; /** * 将焦点恢复到抽屉打开时最初焦点所在的元素 * 如果当时没有焦点元素,焦点将被恢复到抽屉。 */ private _restoreFocus; /** 更新焦点捕获的启用状态 */ private _updateFocusTrapState; } export declare class SimDrawerContainerComponent implements AfterContentInit, DoCheck, OnDestroy { private _element; private _ngZone; private _changeDetectorRef; private _animationMode?; static ngAcceptInputType_hasBackdrop: BooleanInput; get autosize(): boolean; set autosize(value: boolean); private _autosize; /** 是否有遮罩背景覆盖 */ get hasBackdrop(): boolean; set hasBackdrop(value: boolean); _hasBackdrop: boolean | null; /** 单击抽屉背景时触发的事件 */ readonly backdropClick: EventEmitter; /** 所有抽屉都在容器里。包括抽屉内的嵌套容器。 */ _allDrawers: QueryList; /** 属于此容器的抽屉 */ _drawers: QueryList; /** 属于此容器的内容 */ _content: SimDrawerContentComponent; /** * 应用于内容的页边距。这些是用来推/收缩抽屉内容时,一个抽屉是开着的。 * 即使对于push模式,我们也使用边界而不是变换,因为变换会破坏被变换元素内部的固定位置。 */ _contentMargins: { left: number | null; right: number | null; }; readonly _contentMarginChanges: Subject<{ left: number | null; right: number | null; }>; /** 具有“开始”位置的抽屉子元素 */ get start(): SimDrawerComponent | null; /** 具有“结束”位置的抽屉子元素 */ get end(): SimDrawerComponent | null; /** 对包装可滚动内容的CdkScrollable实例的引用。 */ get scrollable(): CdkScrollable; /** 抽屉在开始/结束的位置,独立于方向 */ private _start; private _end; /** * 左边/右边的抽屉 当方向改变时,这些也会改变。 * 它们被用作上面的别名来正确地设置左/右样式。 */ private _left; private _right; /** * 保存堆叠的抽屉集合 */ private _stackDrawers; /** 保存初始堆叠抽屉的层级 */ private _stackStartDrawerZIndex; /** 当组件被销毁时发射事件 */ private readonly _destroyed; /** 在每个ngDoCheck上发出。用于防抖回流 */ private readonly _doCheckSubject; constructor(_element: ElementRef, _ngZone: NgZone, _changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, _animationMode?: string); ngAfterContentInit(): void; ngDoCheck(): void; ngOnDestroy(): void; /** * 重新计算和更新内容的内联样式。注意,这应该谨慎使用,因为它会导致回流。 */ updateContentMargins(): void; /** 关闭堆叠模式的当前抽屉的后面兄弟 */ _onCloseStackDrawers(drawer: SimDrawerComponent): void; _onBackdropClicked(): void; _isShowingBackdrop(): boolean; _closeModalDrawersViaBackdrop(): void; private _canHaveBackdrop; /** 验证抽屉子组件的状态 */ private _validateDrawers; /** * 订阅抽屉positionChanged事件,以便在位置更改时重新验证抽屉。 */ private _watchDrawerPosition; /** 订阅抽屉模式的变化,以便我们可以运行变化检测 */ private _watchDrawerMode; /** * 订阅抽屉事件,以便在抽屉打开且背景可见时在主容器元素上设置类。这确保容器元素上的任何溢出都被正确隐藏。 */ private _watchDrawerToggle; /** 在主“sim-draw-container”元素上切换“sim-draw-open”类。 */ private _setContainerClass; /** 容器是否被一个抽屉推到一边 */ private _isPushed; private _isDrawerOpen; }