@synergy-design-system/angular/components/dropdown/index.d.ts

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynDropdown, SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent } from '@synergy-design-system/components';
export { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';

/**
 * @summary Dropdowns expose additional content that "drops down" in a panel.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
 * @status stable
 * @since 2.0
 *
 * @dependency syn-popup
 *
 * @slot - The dropdown's main content.
 * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
 *
 * @event syn-show - Emitted when the dropdown opens.
 * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
 * @event syn-hide - Emitted when the dropdown closes.
 * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
 *
 * @csspart base - The component's base wrapper, an `<syn-popup>` element.
 * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
 * @csspart trigger - The container that wraps the trigger.
 * @csspart panel - The panel that gets shown when the dropdown is open.
 *
 * @animation dropdown.show - The animation to use when showing the dropdown.
 * @animation dropdown.hide - The animation to use when hiding the dropdown.
 */
declare class SynDropdownComponent {
    nativeElement: SynDropdown;
    private _ngZone;
    constructor(e: ElementRef, ngZone: NgZone);
    /**
  * Indicates whether or not the dropdown is open.
  * You can toggle this attribute to show and hide the dropdown, or you
  can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
   */
    set open(v: '' | SynDropdown['open']);
    get open(): SynDropdown['open'];
    /**
  * The preferred placement of the dropdown panel.
  * Note that the actual placement may vary as needed to keep the panel
  inside of the viewport.
   */
    set placement(v: SynDropdown['placement']);
    get placement(): SynDropdown['placement'];
    /**
     * Disables the dropdown so the panel will not open.
     */
    set disabled(v: '' | SynDropdown['disabled']);
    get disabled(): SynDropdown['disabled'];
    /**
  * By default, the dropdown is closed when an item is selected.
  * This attribute will keep it open instead.
  * Useful for
  dropdowns that allow for multiple interactions.
   */
    set stayOpenOnSelect(v: '' | SynDropdown['stayOpenOnSelect']);
    get stayOpenOnSelect(): SynDropdown['stayOpenOnSelect'];
    /**
     * The distance in pixels from which to offset the panel away from its trigger.
     */
    set distance(v: SynDropdown['distance']);
    get distance(): SynDropdown['distance'];
    /**
     * The distance in pixels from which to offset the panel along its trigger.
     */
    set skidding(v: SynDropdown['skidding']);
    get skidding(): SynDropdown['skidding'];
    /**
  * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
  `overflow: auto|scroll`.
  * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
   */
    set hoist(v: '' | SynDropdown['hoist']);
    get hoist(): SynDropdown['hoist'];
    /**
     * Syncs the popup width or height to that of the trigger element.
     */
    set sync(v: SynDropdown['sync']);
    get sync(): SynDropdown['sync'];
    /**
  * The dropdown will close when the user interacts outside of this element (e.g.
  * clicking).
  * Useful for composing other
  components that use a dropdown internally.
   */
    set containingElement(v: SynDropdown['containingElement']);
    get containingElement(): SynDropdown['containingElement'];
    /**
     * Emitted when the dropdown opens.
     */
    synShowEvent: EventEmitter<SynShowEvent>;
    /**
     * Emitted after the dropdown opens and all animations are complete.
     */
    synAfterShowEvent: EventEmitter<SynAfterShowEvent>;
    /**
     * Emitted when the dropdown closes.
     */
    synHideEvent: EventEmitter<SynHideEvent>;
    /**
     * Emitted after the dropdown closes and all animations are complete.
     */
    synAfterHideEvent: EventEmitter<SynAfterHideEvent>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynDropdownComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynDropdownComponent, "syn-dropdown", never, { "open": { "alias": "open"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "stayOpenOnSelect": { "alias": "stayOpenOnSelect"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "hoist": { "alias": "hoist"; "required": false; }; "sync": { "alias": "sync"; "required": false; }; "containingElement": { "alias": "containingElement"; "required": false; }; }, { "synShowEvent": "synShowEvent"; "synAfterShowEvent": "synAfterShowEvent"; "synHideEvent": "synHideEvent"; "synAfterHideEvent": "synAfterHideEvent"; }, never, ["*"], true, never>;
}

export { SynDropdownComponent };