gentics-ui-core
Version:
This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.
123 lines (122 loc) • 4.81 kB
TypeScript
import { EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
import { OverlayHostService } from '../overlay-host/overlay-host.service';
import { DropdownContent } from './dropdown-content.component';
import { DropdownTriggerDirective } from './dropdown-trigger.directive';
import { DropdownAlignment, DropdownWidth } from './dropdown.model';
import * as i0 from "@angular/core";
/**
* A Dropdown component. Depends on the [`<gtx-overlay-host>`](#/overlay-host) being present in the app.
*
* The component expects two child elements:
*
* * `<gtx-dropdown-trigger>` - this element is the button/label which the user will click to open the dropdown.
* * `<gtx-dropdown-content>` - contains the contents of the dropdown. If it contains a `<ul>`, specific styles will be applied
*
* The `<gtx-dropdown-content>` element may contain arbitrary content, but list items should be wrapped in `<gtx-dropdown-item>`.
* This will allow keyboard support for list navigation.
*
*
* ```html
* <gtx-dropdown-list>
* <gtx-dropdown-trigger>
* <a>Show List</a>
* </gtx-dropdown-trigger>
* <gtx-dropdown-content>
* <gtx-dropdown-item>First</gtx-dropdown-item>
* <gtx-dropdown-item>Second</gtx-dropdown-item>
* <gtx-dropdown-item>Third</gtx-dropdown-item>
* </gtx-dropdown-content>
* </gtx-dropdown-list>
* ```
*
* ## Programmatic Use
* When used programmatically (e.g. by getting a reference to the component via `@ContentChild(DropdownList)`, the
* following extended API is available:
*
* - `dropdownList.isOpen: boolean`
* - `dropdownList.openDropdown(): void`
* - `dropdownList.closeDropdown(): void`
* - `dropdownList.resize(): void`
*/
export declare class DropdownList implements OnDestroy {
options: {
alignment: DropdownAlignment;
width: DropdownWidth;
belowTrigger: boolean;
sticky: boolean;
closeOnEscape: boolean;
};
contentsTemplate: TemplateRef<any>;
trigger: DropdownTriggerDirective;
content: DropdownContent;
/**
* Fired whenever the dropdown contents are opened.
*/
open: EventEmitter<void>;
/**
* Fired whenever the dropdown contents are closed.
*/
close: EventEmitter<void>;
private _disabled;
private overlayHostView;
private scrollMaskFactory;
private scrollMaskRef;
private contentComponentFactory;
private contentComponentRef;
/**
* Set the alignment of the dropdown, either 'left' or 'right'. *Default: 'left'*.
*/
get align(): DropdownAlignment;
set align(val: DropdownAlignment);
/**
* Set the width of the dropdown. Can be either `contents`, `trigger`, `expand` or a numeric value. 'Contents' will
* set a width sufficient to accommodate the widest list item. 'Trigger' sets the width to equal the width
* of the trigger element. 'Expand' is equivalent to the maximum of 'trigger' and 'contents'.
* A numeric value sets the width the a specific number of pixels. *Default: 'contents'*.
*/
get width(): DropdownWidth;
set width(val: DropdownWidth);
/**
* If true, the dropdown will be positioned below the bottom of the trigger element. *Default: false*.
*/
get belowTrigger(): boolean;
set belowTrigger(val: boolean);
/**
* If true, the dropdown will not close when clicked, but may only be closed by clicking outside the dropdown or
* pressing escape. *Default: false*
*/
get sticky(): boolean;
set sticky(val: boolean);
/**
* If true, the dropdown will close when the escape key is pressed. *Default: true*
*/
get closeOnEscape(): boolean;
set closeOnEscape(val: boolean);
/**
* If true, the dropdown will not open when the trigger is clicked.
*/
get disabled(): boolean;
set disabled(val: boolean);
get isOpen(): boolean;
constructor(overlayHostService: OverlayHostService);
/**
* Remove the content wrapper from the body.
*/
ngOnDestroy(): void;
/**
* Prevent the user from causing a scroll via the keyboard.
*/
keyHandler(e: KeyboardEvent): void;
/**
* Open the dropdown contents in the correct position.
*/
openDropdown(): void;
resize(): void;
onTriggerClick(): void;
/**
* Close the dropdown.
*/
closeDropdown(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownList, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownList, "gtx-dropdown-list", never, { "align": "align"; "width": "width"; "belowTrigger": "belowTrigger"; "sticky": "sticky"; "closeOnEscape": "closeOnEscape"; "disabled": "disabled"; }, { "open": "open"; "close": "close"; }, ["trigger", "content"], ["gtx-dropdown-trigger", "gtx-dropdown-content"]>;
}