/*!
 *
 * carbon-angular v0.0.7 | select.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, Output, ViewChild, ElementRef, HostListener, EventEmitter, TemplateRef } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
/**
 * `ibm-select` provides a styled `select` component.
 *
 * [See demo](../../?path=/story/select--basic)
 *
 * Example:
 *
 * ```
 * <ibm-select [(ngModel)]="model">
 * 	<option value="default" disabled selected hidden>Choose an option</option>
 * 	<option value="option1">Option 1</option>
 *	<option value="option2">Option 2</option>
 * 	<option value="option3">Option 3</option>
 * </ibm-select>
 *	```
 *
 * <example-url>../../iframe.html?id=select--basic</example-url>
 */
var Select = /** @class */ (function () {
    function Select() {
        /**
         * `inline` or `default` select displays
         */
        this.display = "default";
        /**
         * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`
         */
        this.id = "select-" + Select.selectCount++;
        /**
         * Set to true to disable component.
         */
        this.disabled = false;
        /**
         * Set to true for a loading select.
         */
        this.skeleton = false;
        /**
         * Set to `true` for an invalid select component.
         */
        this.invalid = false;
        /**
         * `light` or `dark` select theme
         */
        this.theme = "dark";
        /**
         * emits the selected options `value`
         */
        this.selected = new EventEmitter();
        /**
         * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`
         */
        this.onChangeHandler = function (_) { };
        this.onTouchedHandler = function () { };
    }
    Object.defineProperty(Select.prototype, "value", {
        get: function () {
            return this.select.nativeElement.value;
        },
        set: function (v) {
            this.select.nativeElement.value = v;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * Receives a value from the model.
     */
    Select.prototype.writeValue = function (obj) {
        this.value = obj;
    };
    /**
     * Registers a listener that notifies the model when the control updates
     */
    Select.prototype.registerOnChange = function (fn) {
        this.onChangeHandler = fn;
    };
    /**
     * Registers a listener that notifies the model when the control is blurred
     */
    Select.prototype.registerOnTouched = function (fn) {
        this.onTouchedHandler = fn;
    };
    /**
     * Sets the disabled state through the model
     */
    Select.prototype.setDisabledState = function (isDisabled) {
        this.disabled = isDisabled;
    };
    /**
     * Handles the change event from the `select`.
     * Sends events to the change handler and emits a `selected` event.
     */
    Select.prototype.onChange = function (event) {
        this.onChangeHandler(event.target.value);
        this.selected.emit(event.target.value);
    };
    /**
     * Listens for the host blurring, and notifies the model
     */
    Select.prototype.blur = function () {
        this.onTouchedHandler();
    };
    Select.prototype.isTemplate = function (value) {
        return value instanceof TemplateRef;
    };
    /**
     * Tracks the total number of selects instantiated. Used to generate unique IDs
     */
    Select.selectCount = 0;
    Select.decorators = [
        { type: Component, args: [{
                    selector: "ibm-select",
                    template: "\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label *ngIf=\"skeleton && label\" [for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 *ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t",
                    styles: ["\n\t\t[data-invalid] ~ .bx--select__arrow {\n\t\t\tbottom: 2.25rem;\n\t\t}\n\t"],
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: Select,
                            multi: true
                        }
                    ]
                },] },
    ];
    Select.propDecorators = {
        display: [{ type: Input }],
        label: [{ type: Input }],
        helperText: [{ type: Input }],
        invalidText: [{ type: Input }],
        id: [{ type: Input }],
        disabled: [{ type: Input }],
        skeleton: [{ type: Input }],
        invalid: [{ type: Input }],
        theme: [{ type: Input }],
        selected: [{ type: Output }],
        select: [{ type: ViewChild, args: ["select",] }],
        blur: [{ type: HostListener, args: ["blur",] }]
    };
    return Select;
}());
export { Select };
//# sourceMappingURL=select.component.js.map