carbon-components-angular/search/search.component.d.ts

Next generation components

/**
 *
 * carbon-angular v0.0.0 | search.component.d.ts
 *
 * Copyright 2014, 2024 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { EventEmitter, ElementRef } from "@angular/core";
import { ControlValueAccessor } from "@angular/forms";
import { I18n } from "carbon-components-angular/i18n";
import * as i0 from "@angular/core";
/**
 * Get started with importing the module:
 *
 * ```typescript
 * import { SearchModule } from 'carbon-components-angular';
 * ```
 *
 * [See demo](../../?path=/story/components-search--basic)
 */
export declare class Search implements ControlValueAccessor {
    protected elementRef: ElementRef;
    protected i18n: I18n;
    /**
     * Variable used for creating unique ids for search components.
     */
    static searchCount: number;
    get containerClass(): boolean;
    /**
     * @deprecated since v5 - Use `cdsLayer` directive instead
     * `light` or `dark` search theme.
     */
    theme: "light" | "dark";
    /**
     * Size of the search field.
     */
    size: "sm" | "md" | "lg";
    /**
     * Set to `true` for a disabled search input.
     */
    disabled: boolean;
    /**
     * Set to `true` for a toolbar search component.
     */
    toolbar: boolean;
    /**
     * Set to `true` to make the search component expandable.
     * `expandable` would override `toolbar` property behaviours.
     */
    expandable: boolean;
    /**
     * Set to `true` for a loading search component.
     */
    skeleton: boolean;
    /**
     * Set to `true` to expand the toolbar search component.
     */
    active: boolean;
    /**
     * Specifies whether the search component is used in the table toolbar.
     */
    tableSearch: boolean;
    /**
     * Sets the name attribute on the `input` element.
     */
    name: string;
    /**
     * The unique id for the search component.
     */
    id: string;
    /**
     * Reflects the required attribute of the `input` element.
     */
    required: boolean;
    /**
     * Sets the value attribute on the `input` element.
     */
    value: string;
    /**
     * Sets the autocomplete attribute on the `input` element.
     * For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values
     */
    autocomplete: string;
    /**
     * Sets the text inside the `label` tag.
     */
    label: any;
    /**
     * Sets the placeholder attribute on the `input` element.
     */
    placeholder: any;
    /**
     * Used to set the `title` attribute of the clear button.
     */
    clearButtonTitle: any;
    /**
     * Title for the search trigger
     */
    searchTitle: string;
    /**
     * Sets the aria label on the `div` element with the `search` role.
     */
    ariaLabel: string;
    /**
     * Emits an event when value is changed.
     */
    valueChange: EventEmitter<string>;
    open: EventEmitter<boolean>;
    /**
     * Emits an event when the clear button is clicked.
     */
    clear: EventEmitter<any>;
    /**
     * Emits an event on enter.
     */
    search: EventEmitter<string>;
    inputRef: ElementRef;
    /**
     * Sets `true` when composing text via IME.
     */
    protected isComposing: boolean;
    /**
     * Creates an instance of `Search`.
     * @param i18n The i18n translations.
     */
    constructor(elementRef: ElementRef, i18n: I18n);
    /**
     * This is the initial value set to the component
     * @param value The input value.
     */
    writeValue(value: any): void;
    /**
     * Sets a method in order to propagate changes back to the form.
     */
    registerOnChange(fn: any): void;
    /**
     * Registers a callback to be triggered when the control has been touched.
     * @param fn Callback to be triggered when the search input is touched.
     */
    registerOnTouched(fn: any): void;
    /**
     * Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.
     */
    onTouched: () => any;
    /**
     * Method set in `registerOnChange` to propagate changes back to the form.
     */
    propagateChange: (_: any) => void;
    /**
     * Called when text is written in the input.
     * @param search The input text.
     */
    onSearch(search: string): void;
    /**
     * Called on enter.
     */
    onEnter(): void;
    /**
     * Called when clear button is clicked.
     */
    clearSearch(): void;
    doValueChange(): void;
    openSearch(): void;
    keyDown(event: KeyboardEvent): void;
    focusOut(event: any): void;
    focusIn(event: any): void;
    /**
     * Called when using IME composition.
     */
    compositionStart(event: any): void;
    /**
     * Called when IME composition finishes.
     */
    compositionEnd(event: any): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<Search, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<Search, "cds-search, ibm-search", never, { "theme": "theme"; "size": "size"; "disabled": "disabled"; "toolbar": "toolbar"; "expandable": "expandable"; "skeleton": "skeleton"; "active": "active"; "tableSearch": "tableSearch"; "name": "name"; "id": "id"; "required": "required"; "value": "value"; "autocomplete": "autocomplete"; "label": "label"; "placeholder": "placeholder"; "clearButtonTitle": "clearButtonTitle"; "searchTitle": "searchTitle"; "ariaLabel": "ariaLabel"; }, { "valueChange": "valueChange"; "open": "open"; "clear": "clear"; "search": "search"; }, never, never, false>;
}