/*!
 * Copyright 2020 VMware, Inc.
 * SPDX-License-Identifier: BSD-2-Clause
 */
import { Component, Input, Optional, Self } from '@angular/core';
import { BaseFormControl } from '../base-form-control';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@vcd/i18n";
import * as i3 from "@clr/angular";
import * as i4 from "@angular/common";
import * as i5 from "../../lib/directives/responsive-input/responsive-input.directive";
import * as i6 from "../../lib/directives/alternative-text/alternative-text.directive";
/**
 * {@link FormControl} wrapper around a select HTML element
 */
export class FormSelectComponent extends BaseFormControl {
    constructor(ngControl, translationService) {
        super(ngControl, translationService);
        this.translationService = translationService;
        /**
         * The displayed options for the select element
         */
        this.options = [];
        /**
         * The direction for displaying the hint
         */
        this.hintPosition = 'top-left';
    }
    get selectedOption() {
        if (!this.options || this.formControl.value === null || this.formControl.value === undefined) {
            return undefined;
        }
        // option.value and formControl.value can be of type number or string
        return this.options.find((option) => option.value.toString() === this.formControl.value.toString());
    }
}
/** @nocollapse */ FormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: FormSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ FormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: FormSelectComponent, selector: "vcd-form-select", inputs: { options: "options", hintPosition: "hintPosition", hint: "hint" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-group\">\n    <div\n        class=\"clr-form-control\"\n        [vcdResponsiveInput]=\"{ disabled: !isResponsive }\"\n        [ngClass]=\"{ 'clr-form-control-disabled': disabled }\"\n    >\n        <label *ngIf=\"label\" [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\" [ngClass]=\"{ 'showing-hint': !!hint }\" *ngIf=\"!isReadOnly\">\n                <select\n                    class=\"clr-select\"\n                    [id]=\"id\"\n                    [attr.aria-required]=\"showAsterisk\"\n                    [attr.aria-describedby]=\"showErrors ? errorsId : descriptionId\"\n                    [formControl]=\"formControl\"\n                >\n                    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">\n                        {{ option.isTranslatable ? (option.display | translate) : option.display }}\n                    </option>\n                </select>\n                <clr-icon *ngIf=\"showErrors\" class=\"clr-validate-icon\" shape=\"exclamation-circle\"></clr-icon>\n            </div>\n\n            <ng-content select=\"aside\"></ng-content>\n\n            <clr-signpost *ngIf=\"hint && !showErrors\">\n                <clr-signpost-content [clrPosition]=\"hintPosition\" *clrIfOpen>\n                    <p>{{ hint }}</p>\n                </clr-signpost-content>\n            </clr-signpost>\n\n            <span class=\"clr-subtext\" *ngIf=\"showErrors\" [id]=\"errorsId\">\n                <div *ngFor=\"let error of translatedErrors\">\n                    <div>{{ error }}</div>\n                </div>\n            </span>\n\n            <span class=\"clr-subtext\" *ngIf=\"!showErrors && description\" [id]=\"descriptionId\">\n                {{ description }}\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 ::ng-deep aside{display:inline-block}clr-signpost-content p:first-child{margin-top:0;white-space:pre-line}\n", ".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}label{white-space:normal}clr-signpost-content{white-space:pre}clr-signpost{margin-right:-12px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrIfOpen, selector: "[clrIfOpen]", inputs: ["clrIfOpen"], outputs: ["clrIfOpenChange"] }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "component", type: i3.ClrSignpost, selector: "clr-signpost" }, { kind: "component", type: i3.ClrSignpostContent, selector: "clr-signpost-content", inputs: ["clrPosition"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ResponsiveInputDirective, selector: ".clr-form-control[vcdResponsiveInput]", inputs: ["vcdResponsiveInput"] }, { kind: "directive", type: i6.AlternativeTextDirective, selector: "clr-icon", inputs: ["vcdAlternativeText"] }, { kind: "pipe", type: i2.TranslationPipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vcd-form-select', template: "<div class=\"form-group\">\n    <div\n        class=\"clr-form-control\"\n        [vcdResponsiveInput]=\"{ disabled: !isResponsive }\"\n        [ngClass]=\"{ 'clr-form-control-disabled': disabled }\"\n    >\n        <label *ngIf=\"label\" [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\" [ngClass]=\"{ 'showing-hint': !!hint }\" *ngIf=\"!isReadOnly\">\n                <select\n                    class=\"clr-select\"\n                    [id]=\"id\"\n                    [attr.aria-required]=\"showAsterisk\"\n                    [attr.aria-describedby]=\"showErrors ? errorsId : descriptionId\"\n                    [formControl]=\"formControl\"\n                >\n                    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">\n                        {{ option.isTranslatable ? (option.display | translate) : option.display }}\n                    </option>\n                </select>\n                <clr-icon *ngIf=\"showErrors\" class=\"clr-validate-icon\" shape=\"exclamation-circle\"></clr-icon>\n            </div>\n\n            <ng-content select=\"aside\"></ng-content>\n\n            <clr-signpost *ngIf=\"hint && !showErrors\">\n                <clr-signpost-content [clrPosition]=\"hintPosition\" *clrIfOpen>\n                    <p>{{ hint }}</p>\n                </clr-signpost-content>\n            </clr-signpost>\n\n            <span class=\"clr-subtext\" *ngIf=\"showErrors\" [id]=\"errorsId\">\n                <div *ngFor=\"let error of translatedErrors\">\n                    <div>{{ error }}</div>\n                </div>\n            </span>\n\n            <span class=\"clr-subtext\" *ngIf=\"!showErrors && description\" [id]=\"descriptionId\">\n                {{ description }}\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 ::ng-deep aside{display:inline-block}clr-signpost-content p:first-child{margin-top:0;white-space:pre-line}\n", ".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}label{white-space:normal}clr-signpost-content{white-space:pre}clr-signpost{margin-right:-12px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
                    type: Self
                }, {
                    type: Optional
                }] }, { type: i2.TranslationService }]; }, propDecorators: { options: [{
                type: Input
            }], hintPosition: [{
                type: Input
            }], hint: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 