import { KbqDropdownModule } from '@koobiq/components/dropdown';Dropdown content that will be rendered lazily once the dropdown is opened.
Selector: ng-template[kbqDropdownContent]
| Name | Description |
|---|---|
| attached: Subject |
Emits when the dropdown content has been attached. |
| document: Document |
This directive is intended to be used inside an kbq-dropdown tag. It exists mostly to set the role attribute.
Selector: kbq-dropdown-item, [kbq-dropdown-item]
Exported as: kbqDropdownItem| Name | Description |
|---|---|
@Input() disabled: boolean
|
|
@Input() progress: InputSignalWithTransform |
Whether the dropdown item is in a loading state. |
| focused: Subject |
Stream that emits when the menu item is focused. |
| highlighted: boolean | Whether the dropdown item is highlighted. |
| hovered: Subject |
Stream that emits when the dropdown item is hovered. |
| icon: KbqIcon | |
| isNested: boolean | Whether the dropdown item acts as a trigger for a nested dropdown. |
| parentDropdownPanel: KbqDropdownPanel | |
| textElement: ElementRef |
Selector: [kbqDropdownStaticContent]
Selector: kbq-dropdown
Exported as: kbqDropdown| Name | Description |
|---|---|
@Input() backdropClass: string
|
Class to be added to the backdrop element. |
@Input() hasBackdrop: boolean
|
Whether the dropdown has a backdrop. |
@Input() navigationWithWrap: InputSignal |
|
@Input() overlapTriggerX: boolean
|
Whether the dropdown should overlap its trigger horizontally. |
@Input() overlapTriggerY: boolean
|
Whether the dropdown should overlap its trigger vertically. |
@Input('class')
panelClass: string
|
This method takes classes set on the host kbq-dropdown element and applies them on the dropdown template that displays in the overlay container. Otherwise, it's difficult to style the containing dropdown from outside the component. |
@Input() panelMaxWidth: InputSignalWithTransform |
Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes the panel narrower than the trigger, and never clamps an explicit `panelWidth`. When null, the `--kbq-dropdown-size-container-width-max` token applies. |
@Input() panelMinWidth: InputSignalWithTransform |
Minimum width of the panel in pixels. The panel is never narrower than this, nor than its trigger. |
@Input() panelWidth: InputSignal |
Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be narrower than `panelMinWidth`. If set to null, the panel will grow to match its content. Any other value is used as an exact width, and `panelMinWidth` is not applied. |
@Input() xPosition: KbqDropdownPositionX
|
Position of the dropdown in the X axis. |
@Input() yPosition: KbqDropdownPositionY
|
Position of the dropdown in the Y axis. |
@Output('closed')
closed: EventEmitter |
Event emitted when the dropdown is closed. |
| animationDone: Subject |
Emits whenever an animation on the dropdown completes. |
| classList: { [key: string]: boolean; } | Config object to be passed into the dropdown panel's `[class]` binding |
| direction: Direction | Layout direction of the dropdown. |
| isAnimating: boolean | Whether the dropdown is animating. |
| items: QueryList |
List of the items inside of a dropdown. |
| panelAnimationState: "void" | "enter" | Current state of the panel animation. |
| parent: KbqDropdownPanel | Parent dropdown of the current dropdown panel. |
Deprecated triggerWidth: string
|
This directive is intended to be used in conjunction with an kbq-dropdown tag. It is responsible for toggling the display of the provided dropdown instance.
Selector: [kbqDropdownTriggerFor]
Exported as: kbqDropdownTrigger| Name | Description |
|---|---|
@Input('kbqDropdownTriggerData')
data: any
|
Data to be passed along to any lazily-rendered content. |
@Input() demoteOverlay: boolean
|
Whether to demote the overlay container z-index so that dropdown overlays sit below sibling overlays (tooltips, modals, etc.). Set to `false` to keep the dropdown overlay at the default overlay container z-index. |
@Input('kbqDropdownTriggerFor')
dropdown: KbqDropdownPanel
|
References the dropdown instance that the trigger is associated with. |
@Input() offsetX: number
|
Position offset of the dropdown in the X axis. |
@Input() offsetY: number
|
Position offset of the dropdown in the Y axis. |
@Input() openByArrowDown: boolean
|
|
@Input('kbqDropdownTriggerRestoreFocus')
restoreFocus: boolean
|
Whether focus should be restored when the menu is closed. Note that disabling this option can have accessibility implications and it's up to you to manage focus, if you decide to turn it off. |
@Output('dropdownClosed')
dropdownClosed: EventEmitter |
Event emitted when the associated dropdown is closed. Kept as an `@Output()` EventEmitter (not `output()`): `KbqOptionActionComponent` subscribes to it via `.pipe()` through the KBQ_OPTION_ACTION_PARENT contract, which an `OutputEmitterRef` does not support — see #DS-5079. |
@Output('dropdownOpened')
dropdownOpened: OutputEmitterRef |
Event emitted when the associated dropdown is opened. |
| dir: Direction | The text direction of the containing app. |
| isBrowser: boolean | |
| lastDestroyReason: DropdownCloseReason | |
| opened: boolean | Whether the dropdown is open. |
| openedBy: "touch" | "mouse" | "keyboard" |
Default `kbq-dropdown` options that can be overridden.
| Name | Description |
|---|---|
| backdropClass: string | Class to be applied to the dropdown's backdrop. |
| hasBackdrop: boolean | Whether the dropdown has a backdrop. |
| overlapTriggerX: boolean | Whether the dropdown should overlap the dropdown trigger horizontally. |
| overlapTriggerY: boolean | Whether the dropdown should overlap the dropdown trigger vertically. |
| panelMaxWidth: number | Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an explicit `panelWidth`. If null, the `--kbq-dropdown-size-container-width-max` token applies. |
| panelMinWidth: number | Minimum width of the panel. If set to null, only the trigger width applies. |
| panelWidth: KbqPanelWidth | Width of the panel. If set to `auto`, the panel will match the trigger width. If set to null, the panel will grow to match its content. |
| xPosition: KbqDropdownPositionX | The x-axis position of the dropdown. |
| yPosition: KbqDropdownPositionY | The y-axis position of the dropdown. |
Position of the dropdown panel along the x-axis.
type KbqDropdownPositionX = 'before' | 'after' | 'center';
Position of the dropdown panel along the y-axis.
type KbqDropdownPositionY = 'above' | 'below';
Reason why the menu was closed.
type DropdownCloseReason = void | 'click' | 'keydown' | 'tab';
Injection token that determines the scroll handling while the dropdown is open.
const KBQ_DROPDOWN_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
const fadeInItems: AnimationTriggerMetadata;
const transformDropdown: AnimationTriggerMetadata;
Marker provided by host components that create their own stacking context at the default overlay z-index (e.g. `KbqTopBar`, `KbqNavbar` use `position: sticky` + `z-index: $overlay-z-index`). When this token is available in the injector tree, `KbqDropdownTrigger` defaults `demoteOverlay` to `false` so the dropdown overlay is not lowered below the host. An explicit `[demoteOverlay]` binding on the trigger still wins.
const KBQ_DROPDOWN_HOST: InjectionToken<unknown>;
Default top padding of the nested dropdown panel.
const NESTED_PANEL_TOP_PADDING: number;
const NESTED_PANEL_LEFT_PADDING: number;
Injection token to be used to override the default options for `kbq-dropdown`.
const KBQ_DROPDOWN_DEFAULT_OPTIONS: InjectionToken<KbqDropdownDefaultOptions>;