/*!
 *
 * carbon-angular v0.0.7 | search.component.js
 *
 * Copyright 2014, 2019 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 { Component, Input, EventEmitter, Output, HostBinding, ElementRef, HostListener, ViewChild } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { I18n } from "../i18n/i18n.module";
/**
 * @deprecated in favor of `valueChange`, to be removed in the next major carbon-components-angular version
 * Used to emit changes performed on search components.
 */
var SearchChange = /** @class */ (function () {
    function SearchChange() {
    }
    return SearchChange;
}());
export { SearchChange };
/**
 * [See demo](../../?path=/story/search--basic)
 *
 * <example-url>../../iframe.html?id=search--basic</example-url>
 */
var Search = /** @class */ (function () {
    /**
     * Creates an instance of `Search`.
     * @param i18n The i18n translations.
     */
    function Search(elementRef, i18n) {
        this.elementRef = elementRef;
        this.i18n = i18n;
        /**
         * `light` or `dark` search theme.
         */
        this.theme = "dark";
        /**
         * Set to `true` for a disabled search input.
         */
        this.disabled = false;
        /**
         * Set to `true` for a toolbar search component.
         */
        this.toolbar = false;
        /**
         * Set to `true` for a loading search component.
         */
        this.skeleton = false;
        /**
         * Set to `true` to expand the toolbar search component.
         */
        this.active = false;
        /**
         * Specifies whether the search component is used in the table toolbar.
         */
        this.tableSearch = false;
        /**
         * The unique id for the search component.
         */
        this.id = "search-" + Search.searchCount;
        /**
         * Sets the value attribute on the `input` element.
         */
        this.value = "";
        /**
         * Sets the autocomplete attribute on the `input` element.
         * For refernece: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values
         */
        this.autocomplete = "on";
        /**
         * Sets the text inside the `label` tag.
         */
        this.label = this.i18n.get().SEARCH.LABEL;
        /**
         * Sets the placeholder attribute on the `input` element.
         */
        this.placeholder = this.i18n.get().SEARCH.PLACEHOLDER;
        /**
         * Used to set the `title` attribute of the clear button.
         */
        this.clearButtonTitle = this.i18n.get().SEARCH.CLEAR_BUTTON;
        /**
         * @deprecated in favor of `valueChange`, to be removed in the next major carbon-components-angular version
         * Emits event notifying other classes when a change in state occurs in the input.
         */
        this.change = new EventEmitter();
        /**
         * Emits an event when value is changed.
         */
        this.valueChange = new EventEmitter();
        /**
         * Emits an event when the clear button is clicked.
         */
        this.clear = new EventEmitter();
        this._size = "xl";
        /**
         * Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.
         */
        this.onTouched = function () { };
        /**
         * Method set in `registerOnChange` to propagate changes back to the form.
         */
        this.propagateChange = function (_) { };
        Search.searchCount++;
    }
    Object.defineProperty(Search.prototype, "containerClass", {
        get: function () { return !this.toolbar; },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Search.prototype, "size", {
        get: function () {
            return this._size;
        },
        /**
         * Size of the search field.
         */
        set: function (value) {
            if (value === "lg") {
                console.warn("size `lg` has been deprecated and replaced by `xl`");
                value = "xl";
            }
            this._size = value;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * This is the initial value set to the component
     * @param value The input value.
     */
    Search.prototype.writeValue = function (value) {
        this.value = value;
    };
    /**
     * Sets a method in order to propagate changes back to the form.
     */
    Search.prototype.registerOnChange = function (fn) {
        this.propagateChange = fn;
    };
    /**
     * Registers a callback to be triggered when the control has been touched.
     * @param fn Callback to be triggered when the search input is touched.
     */
    Search.prototype.registerOnTouched = function (fn) {
        this.onTouched = fn;
    };
    /**
     * Called when text is written in the input.
     * @param search The input text.
     */
    Search.prototype.onSearch = function (search) {
        this.value = search;
        this.doValueChange();
    };
    /**
     * Called when clear button is clicked.
     */
    Search.prototype.clearSearch = function () {
        this.value = "";
        this.clear.emit();
        this.propagateChange(this.value);
    };
    Search.prototype.doValueChange = function () {
        var event = new SearchChange();
        event.source = this;
        event.value = this.value;
        this.change.emit(event);
        this.valueChange.emit(this.value);
        this.propagateChange(this.value);
    };
    Search.prototype.openSearch = function () {
        var _this = this;
        this.active = true;
        setTimeout(function () { return _this.inputRef.nativeElement.focus(); });
    };
    Search.prototype.keyDown = function (event) {
        if (this.toolbar) {
            if (event.key === "Escape") {
                this.active = false;
            }
            else if (event.key === "Enter") {
                this.openSearch();
            }
        }
    };
    Search.prototype.focusOut = function (event) {
        if (this.toolbar &&
            this.inputRef.nativeElement.value === "" &&
            event.relatedTarget === null) {
            this.active = false;
        }
    };
    /**
     * Variable used for creating unique ids for search components.
     */
    Search.searchCount = 0;
    Search.decorators = [
        { type: Component, args: [{
                    selector: "ibm-search",
                    template: "<div\n\tclass=\"bx--search\"\n\t[ngClass]=\"{\n\t\t'bx--search--sm': size === 'sm',\n\t\t'bx--search--xl': size === 'xl',\n\t\t'bx--search--light': theme === 'light',\n\t\t'bx--skeleton': skeleton,\n\t\t'bx--toolbar-search': toolbar,\n\t\t'bx--toolbar-search--active': toolbar && active\n\t}\"\n\trole=\"search\">\n\t<label class=\"bx--label\" [for]=\"id\">{{label}}</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"bx--search-input\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\t*ngIf=\"!toolbar || active || value !== ''\"\n\t\t\tclass=\"bx--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\trole=\"search\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(input)=\"onSearch($event.target.value)\"/>\n\t\t<button *ngIf=\"!tableSearch && toolbar\" class=\"bx--toolbar-search__btn\" (click)=\"openSearch()\">\n\t\t\t<ibm-icon-search16 class=\"bx--search-magnifier\"></ibm-icon-search16>\n\t\t</button>\n\t\t<ibm-icon-search16 *ngIf=\"tableSearch || !toolbar\" (click)=\"openSearch()\" class=\"bx--search-magnifier\"></ibm-icon-search16>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"bx--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t[attr.aria-label]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<ibm-icon-close16></ibm-icon-close16>\n\t</button>\n</div>\n",
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: Search,
                            multi: true
                        }
                    ]
                },] },
    ];
    /** @nocollapse */
    Search.ctorParameters = function () { return [
        { type: ElementRef },
        { type: I18n }
    ]; };
    Search.propDecorators = {
        containerClass: [{ type: HostBinding, args: ["class.bx--form-item",] }],
        theme: [{ type: Input }],
        size: [{ type: Input }],
        disabled: [{ type: Input }],
        toolbar: [{ type: Input }],
        skeleton: [{ type: Input }],
        active: [{ type: Input }],
        tableSearch: [{ type: Input }],
        name: [{ type: Input }],
        id: [{ type: Input }],
        required: [{ type: Input }],
        value: [{ type: Input }],
        autocomplete: [{ type: Input }],
        label: [{ type: Input }],
        placeholder: [{ type: Input }],
        clearButtonTitle: [{ type: Input }],
        change: [{ type: Output }],
        valueChange: [{ type: Output }],
        clear: [{ type: Output }],
        inputRef: [{ type: ViewChild, args: ["input",] }],
        keyDown: [{ type: HostListener, args: ["keydown", ["$event"],] }],
        focusOut: [{ type: HostListener, args: ["focusout", ["$event"],] }]
    };
    return Search;
}());
export { Search };
//# sourceMappingURL=search.component.js.map