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

Angular wrappers for the Synergy Design System

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

/**
 * @summary Selects allow you to choose items from a menu of predefined options.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs
 * @status stable
 * @since 2.0
 *
 * @dependency syn-icon
 * @dependency syn-popup
 * @dependency syn-tag
 *
 * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
 * @slot label - The input'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 input. 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 select's menu opens.
 * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.
 * @event syn-hide - Emitted when the select's menu closes.
 * @event syn-after-hide - Emitted after the select'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.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The select's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container the wraps the prefix, suffix, 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 options are slotted.
 * @csspart tags - The container that houses option tags when `multiselect` is used.
 * @csspart tag - The individual tags that represent each multiselect option.
 * @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.
 * @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.
 */
declare class SynSelectComponent {
    nativeElement: SynSelect;
    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 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.
   */
    set delimiter(v: SynSelect['delimiter']);
    get delimiter(): SynSelect['delimiter'];
    /**
     * The name of the select, submitted as a name/value pair with form data.
     */
    set name(v: SynSelect['name']);
    get name(): SynSelect['name'];
    /**
     * The select's size.
     */
    set size(v: SynSelect['size']);
    get size(): SynSelect['size'];
    /**
     * Placeholder text to show as a hint when the select is empty.
     */
    set placeholder(v: SynSelect['placeholder']);
    get placeholder(): SynSelect['placeholder'];
    /**
     * Allows more than one option to be selected.
     */
    set multiple(v: '' | SynSelect['multiple']);
    get multiple(): SynSelect['multiple'];
    /**
  * 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: SynSelect['maxOptionsVisible']);
    get maxOptionsVisible(): SynSelect['maxOptionsVisible'];
    /**
     * Disables the select control.
     */
    set disabled(v: '' | SynSelect['disabled']);
    get disabled(): SynSelect['disabled'];
    /**
     * Adds a clear button when the select is not empty.
     */
    set clearable(v: '' | SynSelect['clearable']);
    get clearable(): SynSelect['clearable'];
    /**
  * Indicates whether or not the select is open.
  * You can toggle this attribute to show and hide the menu, or you can
  use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
   */
    set open(v: '' | SynSelect['open']);
    get open(): SynSelect['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: '' | SynSelect['hoist']);
    get hoist(): SynSelect['hoist'];
    /**
     * The select's label.
     * If you need to display HTML, use the `label` slot instead.
     */
    set label(v: SynSelect['label']);
    get label(): SynSelect['label'];
    /**
  * The preferred placement of the select's menu.
  * Note that the actual placement may vary as needed to keep the listbox
  inside of the viewport.
   */
    set placement(v: SynSelect['placement']);
    get placement(): SynSelect['placement'];
    /**
     * The select's help text.
     * If you need to display HTML, use the `help-text` slot instead.
     */
    set helpText(v: SynSelect['helpText']);
    get helpText(): SynSelect['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: SynSelect['form']);
    get form(): SynSelect['form'];
    /**
     * The select's required attribute.
     */
    set required(v: '' | SynSelect['required']);
    get required(): SynSelect['required'];
    /**
  * A function that customizes the tags to be rendered when multiple=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: SynSelect['getTag']);
    get getTag(): SynSelect['getTag'];
    /**
  * The current value of the select, submitted as a name/value pair with form data.
  * When `multiple` is enabled, the
  value attribute will be a space-delimited list of values based on the options selected, and the value property will
  be an array.
  * **For this reason, values must not contain spaces.**
   */
    set value(v: SynSelect['value']);
    get value(): SynSelect['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 select's menu opens.
     */
    synShowEvent: EventEmitter<SynShowEvent>;
    /**
     * Emitted after the select's menu opens and all animations are complete.
     */
    synAfterShowEvent: EventEmitter<SynAfterShowEvent>;
    /**
     * Emitted when the select's menu closes.
     */
    synHideEvent: EventEmitter<SynHideEvent>;
    /**
     * Emitted after the select'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>;
    /**
     * Support for two way data binding
     */
    valueChange: EventEmitter<string | number | (string | number)[]>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynSelectComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynSelectComponent, "syn-select", never, { "ngModelUpdateOn": { "alias": "ngModelUpdateOn"; "required": false; }; "delimiter": { "alias": "delimiter"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "maxOptionsVisible": { "alias": "maxOptionsVisible"; "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; }; "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"; "valueChange": "valueChange"; }, never, ["*"], true, never>;
}

export { SynSelectComponent };