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

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynCombobox, SynChangeEvent, SynClearEvent, SynInputEvent, SynFocusEvent, SynBlurEvent, SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent, SynInvalidEvent, SynErrorEvent } from '@synergy-design-system/components';
export { SynAfterHideEvent, SynAfterShowEvent, SynBlurEvent, SynChangeEvent, SynClearEvent, SynErrorEvent, SynFocusEvent, SynHideEvent, SynInputEvent, SynInvalidEvent, SynShowEvent } from '@synergy-design-system/components';

/**
 * @summary Comboboxes allow you to choose items from a menu of predefined options.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
 * @status stable
 *
 * @dependency syn-icon
 * @dependency syn-popup
 *
 * @slot - The listbox options. Must be `<syn-option>` elements.
 *    You can use `<syn-optgroup>`'s to group items visually.
 * @slot label - The combobox's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
 * @slot suffix - Used to append a presentational icon or similar element to the combobox.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot expand-icon - The icon to show when the control is expanded and collapsed.
 *    Rotates on open and close.
 * @slot help-text - Text that describes how to use the combobox.
 *    Alternatively, you can use the `help-text` attribute.
 *
 * @event syn-change - Emitted when the control's value changes.
 * @event syn-clear - Emitted when the control's value is cleared.
 * @event syn-input - Emitted when the control receives input.
 * @event syn-focus - Emitted when the control gains focus.
 * @event syn-blur - Emitted when the control loses focus.
 * @event syn-show - Emitted when the combobox's menu opens.
 * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.
 * @event syn-hide - Emitted when the combobox's menu closes.
 * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.
 * @event syn-invalid - Emitted when the form control has been checked for validity
 *    and its constraints aren't satisfied.
 * @event syn-error - Emitted when the combobox menu fails to open.
 *
 * @csspart form-control - The form control that wraps the label, combobox, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The combobox's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart suffix - The container that wraps the suffix slot.
 * @csspart display-input - The element that displays the selected option's label,
 *     an `<input>` element.
 * @csspart listbox - The listbox container where the options are slotted
 *   and the filtered options list exists.
 * @csspart filtered-listbox - The container that wraps the filtered options.
 * @csspart clear-button - The clear button.
 * @csspart expand-icon - The container that wraps the expand icon.
 * @csspart popup - The popup's exported `popup` part.
 * Use this to target the tooltip's popup container.
 * @csspart no-results - The container that wraps the "no results" message.
 *
 * @animation combobox.show - The animation to use when showing the combobox.
 * @animation combobox.hide - The animation to use when hiding the combobox.
 */
declare class SynComboboxComponent {
    nativeElement: SynCombobox;
    private _ngZone;
    private modelSignal;
    constructor(e: ElementRef, ngZone: NgZone);
    /**
     * The event that will trigger the ngModel update.
     * By default, this is set to "syn-input".
     */
    set ngModelUpdateOn(v: keyof HTMLElementEventMap);
    get ngModelUpdateOn(): keyof HTMLElementEventMap;
    /**
     * The name of the combobox, submitted as a name/value pair with form data.
     */
    set name(v: SynCombobox['name']);
    get name(): SynCombobox['name'];
    /**
     * The current value of the combobox, submitted as a name/value pair with form data.
     */
    set value(v: SynCombobox['value']);
    get value(): SynCombobox['value'];
    /**
     * The combobox's size.
     */
    set size(v: SynCombobox['size']);
    get size(): SynCombobox['size'];
    /**
     * Placeholder text to show as a hint when the combobox is empty.
     */
    set placeholder(v: SynCombobox['placeholder']);
    get placeholder(): SynCombobox['placeholder'];
    /**
     * Disables the combobox control.
     */
    set disabled(v: '' | SynCombobox['disabled']);
    get disabled(): SynCombobox['disabled'];
    /**
     * Adds a clear button when the combobox is not empty.
     */
    set clearable(v: '' | SynCombobox['clearable']);
    get clearable(): SynCombobox['clearable'];
    /**
  * Indicates whether or not the combobox is open.
  You can toggle this attribute to show and hide the listbox, or you can use the `show()`
  and `hide()` methods and this attribute will reflect the combobox's open state.
   */
    set open(v: '' | SynCombobox['open']);
    get open(): SynCombobox['open'];
    /**
  * Enable this option to prevent the listbox 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: '' | SynCombobox['hoist']);
    get hoist(): SynCombobox['hoist'];
    /**
     * The combobox's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    set label(v: SynCombobox['label']);
    get label(): SynCombobox['label'];
    /**
  * The preferred placement of the combobox's menu.
  Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
   */
    set placement(v: SynCombobox['placement']);
    get placement(): SynCombobox['placement'];
    /**
     * The combobox's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    set helpText(v: SynCombobox['helpText']);
    get helpText(): SynCombobox['helpText'];
    /**
  * By default, form controls are associated with the nearest containing `<form>` element.
  This attribute allows you to place the form control outside of a form and associate it
  with the form that has this `id`.
  The form must be in the same document or shadow root for this to work.
   */
    set form(v: SynCombobox['form']);
    get form(): SynCombobox['form'];
    /**
     * The combobox's required attribute.
     */
    set required(v: '' | SynCombobox['required']);
    get required(): SynCombobox['required'];
    /**
  * When set to `true`, restricts the combobox to only allow selection from the available options.
  Users will not be able to enter custom values that are not present in the list.
   */
    set restricted(v: '' | SynCombobox['restricted']);
    get restricted(): SynCombobox['restricted'];
    /**
  * A function that customizes the rendered option.
  * The first argument is the option, the second
  is the query string, which is typed into the combobox.
  The function should return either a Lit TemplateResult or a string containing trusted HTML
  to render in the shown list of filtered options.
  If the query string should be highlighted use the `highlightOptionRenderer` function.
   */
    set getOption(v: SynCombobox['getOption']);
    get getOption(): SynCombobox['getOption'];
    /**
  * A function used to filter options in the combobox component.
  The default filter method is a case- and diacritic-insensitive string comparison.
   */
    set filter(v: SynCombobox['filter']);
    get filter(): SynCombobox['filter'];
    /**
     * Emitted when the control's value changes.
     */
    synChangeEvent: EventEmitter<SynChangeEvent>;
    /**
     * Emitted when the control's value is cleared.
     */
    synClearEvent: EventEmitter<SynClearEvent>;
    /**
     * Emitted when the control receives input.
     */
    synInputEvent: EventEmitter<SynInputEvent>;
    /**
     * Emitted when the control gains focus.
     */
    synFocusEvent: EventEmitter<SynFocusEvent>;
    /**
     * Emitted when the control loses focus.
     */
    synBlurEvent: EventEmitter<SynBlurEvent>;
    /**
     * Emitted when the combobox's menu opens.
     */
    synShowEvent: EventEmitter<SynShowEvent>;
    /**
     * Emitted after the combobox's menu opens and all animations are complete.
     */
    synAfterShowEvent: EventEmitter<SynAfterShowEvent>;
    /**
     * Emitted when the combobox's menu closes.
     */
    synHideEvent: EventEmitter<SynHideEvent>;
    /**
     * Emitted after the combobox's menu closes and all animations are complete.
     */
    synAfterHideEvent: EventEmitter<SynAfterHideEvent>;
    /**
     * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
     */
    synInvalidEvent: EventEmitter<SynInvalidEvent>;
    /**
     * Emitted when the combobox menu fails to open.
     */
    synErrorEvent: EventEmitter<SynErrorEvent>;
    /**
     * Support for two way data binding
     */
    valueChange: EventEmitter<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynComboboxComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynComboboxComponent, "syn-combobox", never, { "ngModelUpdateOn": { "alias": "ngModelUpdateOn"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "open": { "alias": "open"; "required": false; }; "hoist": { "alias": "hoist"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "helpText": { "alias": "helpText"; "required": false; }; "form": { "alias": "form"; "required": false; }; "required": { "alias": "required"; "required": false; }; "restricted": { "alias": "restricted"; "required": false; }; "getOption": { "alias": "getOption"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; }, { "synChangeEvent": "synChangeEvent"; "synClearEvent": "synClearEvent"; "synInputEvent": "synInputEvent"; "synFocusEvent": "synFocusEvent"; "synBlurEvent": "synBlurEvent"; "synShowEvent": "synShowEvent"; "synAfterShowEvent": "synAfterShowEvent"; "synHideEvent": "synHideEvent"; "synAfterHideEvent": "synAfterHideEvent"; "synInvalidEvent": "synInvalidEvent"; "synErrorEvent": "synErrorEvent"; "valueChange": "valueChange"; }, never, ["*"], true, never>;
}

export { SynComboboxComponent };