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

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import SynCombobox from '@synergy-design-system/components/components/combobox/combobox.component.js';
import { 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 A combobox component that combines the functionality of a text input with a dropdown listbox,
 * allowing users to either select from predefined options or enter custom values (when not restricted).
 *
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
 * @status stable
 * @since 2.8.0
 *
 * @dependency syn-icon
 * @dependency syn-popup
 * @dependency syn-tag
 *
 * @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 that 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.
 * @csspart tags - The container that houses option tags when `multiple` is used.
 * @csspart tag - The individual tags that represent each selected option in `multiple`.
 * @csspart tag__base - The tag's base part.
 * @csspart tag__content - The tag's content part.
 * @csspart tag__remove-button - The tag's remove button.
 * @csspart tag__remove-button__base - The tag's remove button base part.
 *
 * @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 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'];
    /**
     * Sets the combobox to a readonly state.
     */
    set readonly(v: '' | SynCombobox['readonly']);
    get readonly(): SynCombobox['readonly'];
    /**
     * 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'];
    /**
     * 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 maximum length of input that will be considered valid.
     */
    set maxlength(v: SynCombobox['maxlength']);
    get maxlength(): SynCombobox['maxlength'];
    /**
  * 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.
  This will always be true, if `multiple` is active.
   */
    set restricted(v: '' | SynCombobox['restricted']);
    get restricted(): SynCombobox['restricted'];
    /**
  * Allows more than one option to be selected.
  If `multiple` is set, the combobox will always be `restricted` to the available options
   */
    set multiple(v: '' | SynCombobox['multiple']);
    get multiple(): SynCombobox['multiple'];
    /**
  * 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'];
    /**
  * The delimiter to use when setting the value when `multiple` is enabled.
  The default is a space ' ', but you can set it to a comma or other character(s).
   */
    set delimiter(v: SynCombobox['delimiter']);
    get delimiter(): SynCombobox['delimiter'];
    /**
  * The maximum number of selected options to show when `multiple` is true.
  * After the maximum, "+n" will be shown to
  indicate the number of additional items that are selected.
  * Set to 0 to remove the limit.
   */
    set maxOptionsVisible(v: SynCombobox['maxOptionsVisible']);
    get maxOptionsVisible(): SynCombobox['maxOptionsVisible'];
    /**
  * A function that customizes the tags to be rendered when `multiple` is true.
  * The first argument is the option, the second
  is the current tag's index.
  * The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at
  the specified value.
   */
    set getTag(v: SynCombobox['getTag']);
    get getTag(): SynCombobox['getTag'];
    /**
  * The current value of the combobox, submitted as a name/value pair with form data.
  * When `multiple` is enabled, the
  value attribute will be a list of values  separated by the delimiter, based on the options selected, and the value property will
  be an array.
  * **For this reason, values must not contain the delimiter character.**
   */
    set value(v: SynCombobox['value']);
    get value(): SynCombobox['value'];
    /**
     * 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 | number | (string | number)[]>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynComboboxComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynComboboxComponent, "syn-combobox", never, { "ngModelUpdateOn": { "alias": "ngModelUpdateOn"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "open": { "alias": "open"; "required": false; }; "label": { "alias": "label"; "required": false; }; "maxlength": { "alias": "maxlength"; "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; }; "multiple": { "alias": "multiple"; "required": false; }; "getOption": { "alias": "getOption"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "delimiter": { "alias": "delimiter"; "required": false; }; "maxOptionsVisible": { "alias": "maxOptionsVisible"; "required": false; }; "getTag": { "alias": "getTag"; "required": false; }; "value": { "alias": "value"; "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 };