gentics-ui-core
Version:
This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.
94 lines (93 loc) • 4.01 kB
TypeScript
import { ElementRef, EventEmitter } from '@angular/core';
import { AnimationBuilder, AnimationPlayer } from '@angular/animations';
import { UserAgentRef } from '../modal/user-agent-ref';
import * as i0 from "@angular/core";
export declare function animateCubicBezier(millis: number): any;
/**
* The SideMenu component is an off-canvas menu with a toggle button which can be
* used to toggle the state. The component itself is stateless, and relies on the value passed in as
* the `opened` prop to set its state. Toggling must also be handled by the host component.
*
* The toggle button must be placed within a `<gtx-side-menu-toggle>` element. All other content will be projected
* into the main body of the menu.
*
* **Note**: For the side menu to be positioned correctly, its container must have the `position` CSS attribute set.
*
* ```html
* <gtx-side-menu [opened]="displayMenu" (toggle)="displayMenu = $event">
* <gtx-side-menu-toggle>
* <button>Toggle</button>
* </gtx-side-menu-toggle>
* <div class="my-menu-content">
* <ul>
* <li>Menu item 1</li>
* <li>Menu item 2</li>
* <li>Menu item 3</li>
* <li>Menu item 4</li>
* <li>Menu item 5</li>
* </ul>
* </div>
* </gtx-side-menu>
* ```
*/
export declare class SideMenu {
private animationBuilder;
private elementRef;
private userAgentRef;
/**
* Sets the state of the menu: true = opened, false = closed.
*/
opened: boolean;
/**
* Sets whether the menu should appear to the left or the right of the screen. Defaults to 'left'.
*/
position: 'left' | 'right';
/**
* Sets the width of the menu. Should be a valid CSS width value, e.g. '400px', '20vw', '30em'. **Note** that
* percentage values should be avoided, since they will produce unexpected results.
*/
width: string;
/**
* The distance in pixels between the edge of the container and the toggle button when the menu is closed.
*/
toggleButtonOffset: number;
get alignmentClassLeft(): boolean;
get alignmentClassRight(): boolean;
get animationParams(): any;
get menuAnimationState(): any;
toggleButton: ElementRef;
/**
* Fired when the toggle button is clicked. The value is equal to
* the value of the `opened`
*/
toggle: EventEmitter<boolean>;
player: AnimationPlayer;
private ancestorWithWidth;
/**
* Returns the width of the menu, taking into account screen width
*/
get responsiveWidth(): string;
get menuParams(): string;
constructor(animationBuilder: AnimationBuilder, elementRef: ElementRef, userAgentRef: UserAgentRef);
/**
* We need to know the width of the element in which the SideMenu is nested. Here we traverse the DOM tree
* looking for the first ancestor element with a non-zero offsetWidth.
*/
ngAfterViewInit(): void;
/**
* The AnimationBuilder is used here because the desired animation result could not be achieved using the
* metadata-based approach alone. This issue describes the problem: https://github.com/angular/angular/issues/20796
*
* If that issue gets resolved then this could be simplified and we may be able to drop the AnimationBuilder
* and move this logic into the animationParams getter.
*/
animationStarted(event: any): void;
toggleState(): void;
close(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SideMenu, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SideMenu, "gtx-side-menu", never, { "opened": "opened"; "position": "position"; "width": "width"; "toggleButtonOffset": "toggleButtonOffset"; }, { "toggle": "toggle"; }, never, ["gtx-side-menu-toggle", "*"]>;
}
export declare class SideMenuToggle {
static ɵfac: i0.ɵɵFactoryDeclaration<SideMenuToggle, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SideMenuToggle, "gtx-side-menu-toggle", never, {}, {}, never>;
}