/**
 * @fileoverview added by tsickle
 * Generated from: form/form-select/form-select.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/*!
 * Copyright 2020 VMware, Inc.
 * SPDX-License-Identifier: BSD-2-Clause
 */
import { Component, Input, Optional, Self } from '@angular/core';
import { NgControl } from '@angular/forms';
import { BaseFormControl } from '../base-form-control';
/**
 * {\@link FormControl} wrapper around a select HTML element
 */
export class FormSelectComponent extends BaseFormControl {
    /**
     * @param {?} ngControl
     */
    constructor(ngControl) {
        super(ngControl);
        /**
         * The displayed options for the select element
         */
        this.options = [];
    }
    /**
     * @return {?}
     */
    get selectedOption() {
        if (!this.options) {
            return undefined;
        }
        // option.value and formControl.value can be of type number or string
        return this.options.find((/**
         * @param {?} option
         * @return {?}
         */
        option => option.value.toString() === this.formControl.value.toString()));
    }
}
FormSelectComponent.decorators = [
    { type: Component, args: [{
                selector: 'vcd-form-select',
                template: "<div class=\"form-group\">\n    <div class=\"clr-form-control\">\n        <label *ngIf=\"label\" [attr.for]=\"id\" class=\"clr-control-label\" [ngClass]=\"{ 'required-field': showAsterisk }\">\n            {{ label }}\n        </label>\n        <span *ngIf=\"isReadOnly && selectedOption\" class=\"readOnly\">\n            {{ selectedOption.isTranslatable ? (selectedOption.display | translate) : selectedOption.display }}\n        </span>\n        <div class=\"clr-control-container\" [ngClass]=\"{ 'clr-error': showErrors }\">\n            <div class=\"clr-select-wrapper\" *ngIf=\"!isReadOnly\">\n                <select [id]=\"id\" [formControl]=\"formControl\">\n                    <option *ngFor=\"let option of options\" [value]=\"option.value\">\n                        {{ option.isTranslatable ? (option.display | translate) : option.display }}\n                    </option>\n                </select>\n            </div>\n\n            <ng-content select=\"aside\"></ng-content>\n\n            <span class=\"clr-subtext\" *ngIf=\"showErrors\">\n                <div *ngFor=\"let key of errorKeys\">\n                    <div>{{ key | translate: [formControl.value] }}</div>\n                </div>\n            </span>\n        </div>\n    </div>\n    <span class=\"clr-subtext\">\n        <ng-content select=\"footer\"></ng-content>\n    </span>\n</div>\n",
                styles: [".required-field:after{content:\"*\";color:red;padding-left:5px}", ".form-group.hide-label{padding-left:0}.form-group.hide-label label:first-child{visibility:hidden}.error-content{white-space:normal}:host(.site-selector-single-site){display:none}"]
            }] }
];
/** @nocollapse */
FormSelectComponent.ctorParameters = () => [
    { type: NgControl, decorators: [{ type: Self }, { type: Optional }] }
];
FormSelectComponent.propDecorators = {
    options: [{ type: Input }]
};
if (false) {
    /**
     * The displayed options for the select element
     * @type {?}
     */
    FormSelectComponent.prototype.options;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1zZWxlY3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHZjZC91aS1jb21wb25lbnRzLyIsInNvdXJjZXMiOlsiZm9ybS9mb3JtLXNlbGVjdC9mb3JtLXNlbGVjdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBS0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFM0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFDOzs7O0FBVXZELE1BQU0sT0FBTyxtQkFBb0IsU0FBUSxlQUFlOzs7O0lBTXBELFlBQWdDLFNBQW9CO1FBQ2hELEtBQUssQ0FBQyxTQUFTLENBQUMsQ0FBQzs7OztRQUhaLFlBQU8sR0FBbUIsRUFBRSxDQUFDO0lBSXRDLENBQUM7Ozs7SUFFRCxJQUFJLGNBQWM7UUFDZCxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNmLE9BQU8sU0FBUyxDQUFDO1NBQ3BCO1FBQ0QscUVBQXFFO1FBQ3JFLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJOzs7O1FBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLFFBQVEsRUFBRSxLQUFLLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLFFBQVEsRUFBRSxFQUFDLENBQUM7SUFDdEcsQ0FBQzs7O1lBckJKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQixxMkNBQXlDOzthQUU1Qzs7OztZQVhRLFNBQVMsdUJBa0JELElBQUksWUFBSSxRQUFROzs7c0JBRjVCLEtBQUs7Ozs7Ozs7SUFBTixzQ0FBc0MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiFcbiAqIENvcHlyaWdodCAyMDIwIFZNd2FyZSwgSW5jLlxuICogU1BEWC1MaWNlbnNlLUlkZW50aWZpZXI6IEJTRC0yLUNsYXVzZVxuICovXG5cbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9wdGlvbmFsLCBTZWxmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ0NvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBTZWxlY3RPcHRpb24gfSBmcm9tICcuLi8uLi9jb21tb24vaW50ZXJmYWNlcy9zZWxlY3Qtb3B0aW9uJztcbmltcG9ydCB7IEJhc2VGb3JtQ29udHJvbCB9IGZyb20gJy4uL2Jhc2UtZm9ybS1jb250cm9sJztcblxuLyoqXG4gKiB7QGxpbmsgRm9ybUNvbnRyb2x9IHdyYXBwZXIgYXJvdW5kIGEgc2VsZWN0IEhUTUwgZWxlbWVudFxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3ZjZC1mb3JtLXNlbGVjdCcsXG4gICAgdGVtcGxhdGVVcmw6ICdmb3JtLXNlbGVjdC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4uL2Zvcm0uc2NzcycsICcuL2Zvcm0tc2VsZWN0LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEZvcm1TZWxlY3RDb21wb25lbnQgZXh0ZW5kcyBCYXNlRm9ybUNvbnRyb2wge1xuICAgIC8qKlxuICAgICAqIFRoZSBkaXNwbGF5ZWQgb3B0aW9ucyBmb3IgdGhlIHNlbGVjdCBlbGVtZW50XG4gICAgICovXG4gICAgQElucHV0KCkgb3B0aW9uczogU2VsZWN0T3B0aW9uW10gPSBbXTtcblxuICAgIGNvbnN0cnVjdG9yKEBTZWxmKCkgQE9wdGlvbmFsKCkgbmdDb250cm9sOiBOZ0NvbnRyb2wpIHtcbiAgICAgICAgc3VwZXIobmdDb250cm9sKTtcbiAgICB9XG5cbiAgICBnZXQgc2VsZWN0ZWRPcHRpb24oKTogU2VsZWN0T3B0aW9uIHtcbiAgICAgICAgaWYgKCF0aGlzLm9wdGlvbnMpIHtcbiAgICAgICAgICAgIHJldHVybiB1bmRlZmluZWQ7XG4gICAgICAgIH1cbiAgICAgICAgLy8gb3B0aW9uLnZhbHVlIGFuZCBmb3JtQ29udHJvbC52YWx1ZSBjYW4gYmUgb2YgdHlwZSBudW1iZXIgb3Igc3RyaW5nXG4gICAgICAgIHJldHVybiB0aGlzLm9wdGlvbnMuZmluZChvcHRpb24gPT4gb3B0aW9uLnZhbHVlLnRvU3RyaW5nKCkgPT09IHRoaXMuZm9ybUNvbnRyb2wudmFsdWUudG9TdHJpbmcoKSk7XG4gICAgfVxufVxuIl19