import { ChangeDetectorRef, Component, ElementRef, HostBinding, Input, Renderer2, TemplateRef } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class FormControlComponent {
    constructor(elementRef, renderer, cdr) {
        this.elementRef = elementRef;
        this.cdr = cdr;
        renderer.addClass(elementRef.nativeElement, 'devui-form-controls');
    }
    get extraInfoTemplate() {
        return this.extraInfo instanceof TemplateRef ? this.extraInfo : null;
    }
    get status() {
        return !!this.feedbackStatus;
    }
    get suffix() {
        return !!this.suffixTemplate;
    }
    /**
     * @desc Compatible with z-index of components that include dropdown menu, will be remove.
     *
     */
    get dropdownOpen() {
        return !!this.elementRef.nativeElement.querySelector('.devui-dropdown-origin-open');
    }
    ngOnInit() { }
    updateErrorMessage(message) {
        this.errorMessage = message;
        this.cdr.detectChanges();
    }
    updateFeedbackStatus(status) {
        this.feedbackStatus = status;
        this.cdr.detectChanges();
    }
}
FormControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FormControlComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
FormControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: FormControlComponent, selector: "d-form-control", inputs: { extraInfo: "extraInfo", feedbackStatus: "feedbackStatus", suffixTemplate: "suffixTemplate" }, host: { properties: { "class.devui-form-control-has-feedback": "this.status", "class.devui-form-control-has-suffix": "this.suffix", "class.devui-control-has-open-dropdown": "this.dropdownOpen" } }, ngImport: i0, template: "<div class=\"devui-form-control-container\">\n  <ng-content></ng-content>\n  <span *ngIf=\"suffixTemplate\" class=\"devui-form-item-suffix suffix\">\n    <ng-template [ngTemplateOutlet]=\"suffixTemplate\"></ng-template>\n  </span>\n\n  <span [attr.class]=\"'devui-form-item-icon devui-form-item-icon-' + feedbackStatus\" *ngIf=\"feedbackStatus\">\n    <svg *ngIf=\"feedbackStatus === 'error'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n        <polygon\n          points=\"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712\"\n        ></polygon>\n      </g>\n    </svg>\n    <svg *ngIf=\"feedbackStatus === 'success'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n        <polygon\n          points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\n        ></polygon>\n      </g>\n    </svg>\n    <svg *ngIf=\"feedbackStatus === 'pending'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n      <g id=\"loading\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          d=\"M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z M8,1 C4.15,1 1,4.15 1,8 C1,11.85 4.15,15 8,15 C11.85,15 15,11.85 15,8 C15,4.15 11.85,1 8,1 Z\"\n          fill-rule=\"nonzero\"\n        ></path>\n        <path d=\"M8,0 C12.4,0 16,3.6 16,8 L15,8 C15,4.15 11.85,1 8,1 L8,0 Z\" fill-rule=\"nonzero\"></path>\n      </g>\n    </svg>\n  </span>\n</div>\n<div class=\"devui-form-control-inner-content\">\n  <div class=\"devui-form-message\" *ngIf=\"errorMessage\">\n    <span class=\"devui-form-message-text\">\n      <span>\n        {{ errorMessage }}\n      </span>\n    </span>\n  </div>\n  <div *ngIf=\"extraInfo\" class=\"devui-form-control-extra-info\">\n    <ng-template [ngTemplateOutlet]=\"extraInfoTemplate || defaultTemplate\"> </ng-template>\n    <ng-template #defaultTemplate>\n      {{ extraInfo }}\n    </ng-template>\n  </div>\n</div>\n", styles: [".mr-content-spacing{margin-right:4px}.padding-element-spacing{padding:16px!important}.ml-element-spacing{margin-left:16px}.mr-element-spacing{margin-right:16px}.mt-element-spacing{margin-top:16px}.mb-element-spacing{margin-bottom:16px}.mlr-element-spacing{margin-left:16px;margin-right:16px}.mtb-element-spacing{margin-top:16px;margin-bottom:16px}.m-element-spacing{margin:16px}.grid{letter-spacing:-.31em;*letter-spacing: normal;word-spacing:-.43em}.u,.u-1,.u-1-2,.u-1-3,.u-2-3,.u-1-4,.u-3-4,.u-1-5,.u-2-5,.u-3-5,.u-4-5,.u-1-6,.u-5-6,.u-1-8,.u-3-8,.u-5-8,.u-7-8,.u-1-12,.u-5-12,.u-7-12,.u-11-12,.u-1-24,.u-5-24,.u-7-24,.u-11-24,.u-13-24,.u-17-24,.u-19-24,.u-23-24{display:inline-block;*display: inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top}.u-1{display:block}.u-1-2{width:49.99999%}.u-1-3{width:33.33333%}.u-2-3{width:66.66666%}.u-1-4{width:24.99999%}.u-3-4{width:74.99999%}.u-1-5{width:19.99999%}.u-2-5{width:39.99999%}.u-3-5{width:59.99999%}.u-4-5{width:79.99999%}.u-1-6{width:16.64999%}.u-5-6{width:83.33333%}.u-1-8{width:12.49999%}.u-3-8{width:37.49999%}.u-5-8{width:62.49999%}.u-7-8{width:87.49999%}.u-1-12{width:8.33333%}.u-5-12{width:41.66666%}.u-7-12{width:58.33333%}.u-11-12{width:91.66666%}.u-1-24{width:4.16666%}.u-5-24{width:20.83333%}.u-7-24{width:29.16666%}.u-11-24{width:45.83333%}.u-13-24{width:54.16666%}.u-17-24{width:70.83333%}.u-19-24{width:79.16666%}.u-23-24{width:95.83333%}.u-content{padding:0 0 10px 10px}.devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-form-horizontal :host.devui-form-controls{flex:1 1 auto;margin-left:16px}.devui-form-vertical :host.devui-form-controls{flex:1 1 auto}.devui-form-columns :host.devui-form-controls{flex:1 1 auto;margin-right:24px}.devui-form-control-extra-info{font-size:12px;font-size:var(--devui-font-size, 12px);color:#71757f;color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}.devui-form-control-inner-content{line-height:1}.devui-form-message{display:inline-block;font-size:12px;font-size:var(--devui-font-size, 12px);min-height:20px;position:relative;left:1px;color:#f66f6a;color:var(--devui-danger, #f66f6a)}.devui-form-message .devui-form-message-text{display:inline-flex;align-items:center;line-height:1.5;border-top:1px solid transparent;border-bottom:1px solid transparent}.devui-form-message .devui-form-message-text .devui-form-message-svg{line-height:1}.devui-form-message .devui-icon.devui-icon-error{margin-right:4px}.devui-form-message .devui-icon.devui-icon-error>g>path{fill:#f66f6a;fill:var(--devui-danger, #f66f6a)}.devui-form-message .devui-icon.devui-icon-error>g>circle{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-form-item-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form-item-icon.devui-form-item-icon-error svg circle{fill:#f66f6a;fill:var(--devui-danger, #f66f6a)}.devui-form-item-icon.devui-form-item-icon-error svg polygon{fill:#fff;fill:var(--devui-base-bg, #ffffff)}.devui-form-item-icon.devui-form-item-icon-success svg circle{fill:#50d4ab;fill:var(--devui-success, #50d4ab)}.devui-form-item-icon.devui-form-item-icon-success svg polygon{fill:#fff;fill:var(--devui-base-bg, #ffffff)}.devui-form-item-icon.devui-form-item-icon-pending svg{-webkit-animation:devui-loading-keyframes 1s infinite linear;animation:devui-loading-keyframes 1s infinite linear}.devui-form-item-icon.devui-form-item-icon-pending svg path{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}:host.devui-form-control-has-feedback .devui-form-control-container,:host.devui-form-control-has-suffix .devui-form-control-container{position:relative}:host.devui-form-control-has-suffix .devui-form-item-suffix{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:auto;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}:host.devui-form-control-has-suffix .suffix{cursor:pointer}:host.devui-form-control-has-feedback.devui-form-control-has-suffix .devui-form-item-icon{right:32px}@-webkit-keyframes devui-loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes devui-loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FormControlComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-form-control', preserveWhitespaces: false, template: "<div class=\"devui-form-control-container\">\n  <ng-content></ng-content>\n  <span *ngIf=\"suffixTemplate\" class=\"devui-form-item-suffix suffix\">\n    <ng-template [ngTemplateOutlet]=\"suffixTemplate\"></ng-template>\n  </span>\n\n  <span [attr.class]=\"'devui-form-item-icon devui-form-item-icon-' + feedbackStatus\" *ngIf=\"feedbackStatus\">\n    <svg *ngIf=\"feedbackStatus === 'error'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n        <polygon\n          points=\"8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 8.07106781 3.82842712 5.24264069 5.24264069 3.82842712\"\n        ></polygon>\n      </g>\n    </svg>\n    <svg *ngIf=\"feedbackStatus === 'success'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <circle cx=\"8\" cy=\"8\" r=\"8\"></circle>\n        <polygon\n          points=\"6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459\"\n        ></polygon>\n      </g>\n    </svg>\n    <svg *ngIf=\"feedbackStatus === 'pending'\" width=\"14px\" height=\"14px\" viewBox=\"0 0 16 16\">\n      <g id=\"loading\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          d=\"M8,0 C12.4,0 16,3.6 16,8 C16,12.4 12.4,16 8,16 C3.6,16 0,12.4 0,8 C0,3.6 3.6,0 8,0 Z M8,1 C4.15,1 1,4.15 1,8 C1,11.85 4.15,15 8,15 C11.85,15 15,11.85 15,8 C15,4.15 11.85,1 8,1 Z\"\n          fill-rule=\"nonzero\"\n        ></path>\n        <path d=\"M8,0 C12.4,0 16,3.6 16,8 L15,8 C15,4.15 11.85,1 8,1 L8,0 Z\" fill-rule=\"nonzero\"></path>\n      </g>\n    </svg>\n  </span>\n</div>\n<div class=\"devui-form-control-inner-content\">\n  <div class=\"devui-form-message\" *ngIf=\"errorMessage\">\n    <span class=\"devui-form-message-text\">\n      <span>\n        {{ errorMessage }}\n      </span>\n    </span>\n  </div>\n  <div *ngIf=\"extraInfo\" class=\"devui-form-control-extra-info\">\n    <ng-template [ngTemplateOutlet]=\"extraInfoTemplate || defaultTemplate\"> </ng-template>\n    <ng-template #defaultTemplate>\n      {{ extraInfo }}\n    </ng-template>\n  </div>\n</div>\n", styles: [".mr-content-spacing{margin-right:4px}.padding-element-spacing{padding:16px!important}.ml-element-spacing{margin-left:16px}.mr-element-spacing{margin-right:16px}.mt-element-spacing{margin-top:16px}.mb-element-spacing{margin-bottom:16px}.mlr-element-spacing{margin-left:16px;margin-right:16px}.mtb-element-spacing{margin-top:16px;margin-bottom:16px}.m-element-spacing{margin:16px}.grid{letter-spacing:-.31em;*letter-spacing: normal;word-spacing:-.43em}.u,.u-1,.u-1-2,.u-1-3,.u-2-3,.u-1-4,.u-3-4,.u-1-5,.u-2-5,.u-3-5,.u-4-5,.u-1-6,.u-5-6,.u-1-8,.u-3-8,.u-5-8,.u-7-8,.u-1-12,.u-5-12,.u-7-12,.u-11-12,.u-1-24,.u-5-24,.u-7-24,.u-11-24,.u-13-24,.u-17-24,.u-19-24,.u-23-24{display:inline-block;*display: inline;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top}.u-1{display:block}.u-1-2{width:49.99999%}.u-1-3{width:33.33333%}.u-2-3{width:66.66666%}.u-1-4{width:24.99999%}.u-3-4{width:74.99999%}.u-1-5{width:19.99999%}.u-2-5{width:39.99999%}.u-3-5{width:59.99999%}.u-4-5{width:79.99999%}.u-1-6{width:16.64999%}.u-5-6{width:83.33333%}.u-1-8{width:12.49999%}.u-3-8{width:37.49999%}.u-5-8{width:62.49999%}.u-7-8{width:87.49999%}.u-1-12{width:8.33333%}.u-5-12{width:41.66666%}.u-7-12{width:58.33333%}.u-11-12{width:91.66666%}.u-1-24{width:4.16666%}.u-5-24{width:20.83333%}.u-7-24{width:29.16666%}.u-11-24{width:45.83333%}.u-13-24{width:54.16666%}.u-17-24{width:70.83333%}.u-19-24{width:79.16666%}.u-23-24{width:95.83333%}.u-content{padding:0 0 10px 10px}.devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.devui-form-horizontal :host.devui-form-controls{flex:1 1 auto;margin-left:16px}.devui-form-vertical :host.devui-form-controls{flex:1 1 auto}.devui-form-columns :host.devui-form-controls{flex:1 1 auto;margin-right:24px}.devui-form-control-extra-info{font-size:12px;font-size:var(--devui-font-size, 12px);color:#71757f;color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}.devui-form-control-inner-content{line-height:1}.devui-form-message{display:inline-block;font-size:12px;font-size:var(--devui-font-size, 12px);min-height:20px;position:relative;left:1px;color:#f66f6a;color:var(--devui-danger, #f66f6a)}.devui-form-message .devui-form-message-text{display:inline-flex;align-items:center;line-height:1.5;border-top:1px solid transparent;border-bottom:1px solid transparent}.devui-form-message .devui-form-message-text .devui-form-message-svg{line-height:1}.devui-form-message .devui-icon.devui-icon-error{margin-right:4px}.devui-form-message .devui-icon.devui-icon-error>g>path{fill:#f66f6a;fill:var(--devui-danger, #f66f6a)}.devui-form-message .devui-icon.devui-icon-error>g>circle{fill:#fff;fill:var(--devui-light-text, #ffffff)}.devui-form-item-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form-item-icon.devui-form-item-icon-error svg circle{fill:#f66f6a;fill:var(--devui-danger, #f66f6a)}.devui-form-item-icon.devui-form-item-icon-error svg polygon{fill:#fff;fill:var(--devui-base-bg, #ffffff)}.devui-form-item-icon.devui-form-item-icon-success svg circle{fill:#50d4ab;fill:var(--devui-success, #50d4ab)}.devui-form-item-icon.devui-form-item-icon-success svg polygon{fill:#fff;fill:var(--devui-base-bg, #ffffff)}.devui-form-item-icon.devui-form-item-icon-pending svg{-webkit-animation:devui-loading-keyframes 1s infinite linear;animation:devui-loading-keyframes 1s infinite linear}.devui-form-item-icon.devui-form-item-icon-pending svg path{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}:host.devui-form-control-has-feedback .devui-form-control-container,:host.devui-form-control-has-suffix .devui-form-control-container{position:relative}:host.devui-form-control-has-suffix .devui-form-item-suffix{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:auto;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}:host.devui-form-control-has-suffix .suffix{cursor:pointer}:host.devui-form-control-has-feedback.devui-form-control-has-suffix .devui-form-item-icon{right:32px}@-webkit-keyframes devui-loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes devui-loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { extraInfo: [{
                type: Input
            }], feedbackStatus: [{
                type: Input
            }], suffixTemplate: [{
                type: Input
            }], status: [{
                type: HostBinding,
                args: ['class.devui-form-control-has-feedback']
            }], suffix: [{
                type: HostBinding,
                args: ['class.devui-form-control-has-suffix']
            }], dropdownOpen: [{
                type: HostBinding,
                args: ['class.devui-control-has-open-dropdown']
            }] } });
//# sourceMappingURL=data:application/json;base64, 