import { Component, ContentChildren, EventEmitter, forwardRef, HostListener, Input, Output, QueryList } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { RadioComponent } from './radio.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class RadioGroupComponent {
    constructor() {
        this.change = new EventEmitter();
        this.radios = new QueryList();
    }
    /**
     * @deprecated Use direction to replace.
     */
    set cssStyle(direction) {
        this.direction = direction;
    }
    onRadioChange(event) {
        if (event.target.tagName.toLowerCase() === 'input') {
            if (this.disabled) {
                event.preventDefault();
            }
            this.canChange().then((change) => {
                if (!change) {
                    event.preventDefault();
                }
            });
        }
    }
    ngAfterViewInit() {
        this.radios.forEach((radio) => {
            this.registerRadio(radio);
        });
        this.radios.changes.subscribe((newRadios) => {
            newRadios.forEach((radio) => {
                this.registerRadio(radio);
                Promise.resolve(true).then(() => radio.writeValue(this._value));
            });
        });
        this.radios.notifyOnChanges();
    }
    ngOnChanges(changes) {
        if (changes && changes.name && this.radios) {
            this.radios.forEach((radio) => {
                radio.name = this.name;
            });
        }
        if (changes && changes.disabled && this.radios) {
            this.radios.forEach((radio) => {
                radio.disabled = this.disabled;
            });
        }
        if (changes && this.radios) {
            this.radios.forEach((radio) => {
                radio.disabled = this.disabled;
            });
        }
    }
    registerRadio(radio) {
        radio.registerOnChange((value) => {
            this.writeValue(value);
            this.onChange(value);
            Promise.resolve().then(() => this.onTouched());
            this.change.emit(value);
        });
    }
    canChange() {
        let changeResult = Promise.resolve(true);
        if (this.beforeChange) {
            const result = this.beforeChange(this.values);
            if (typeof result !== 'undefined') {
                if (result.then) {
                    changeResult = result;
                }
                else if (result.subscribe) {
                    changeResult = result.toPromise();
                }
                else {
                    changeResult = Promise.resolve(result);
                }
            }
        }
        return changeResult;
    }
    handleChange($event, value) {
        $event.stopPropagation();
        this.writeValue(value);
        this.onChange(value);
        this.change.emit(value);
    }
    writeValue(value) {
        this._value = value;
        if (this.radios && this.radios.length > 0) {
            this.radios.forEach((radio) => {
                radio.writeValue(this._value);
            });
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
}
RadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: RadioGroupComponent, selector: "d-radio-group", inputs: { name: "name", values: "values", cssStyle: "cssStyle", direction: "direction", disabled: "disabled", beforeChange: "beforeChange" }, outputs: { change: "change" }, host: { listeners: { "click": "onRadioChange($event)" } }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => RadioGroupComponent),
            multi: true,
        },
    ], queries: [{ propertyName: "radios", predicate: RadioComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"devui-radio-group\">\n  <ul [class.devui-radio-horizontal]=\"direction === 'row'\">\n    <ng-container *ngIf=\"radios.length === 0\">\n      <li *ngFor=\"let value of values\" class=\"devui-radio-list-item\">\n        <label class=\"devui-radio\" [class.active]=\"value == _value\" [class.disabled]=\"disabled\">\n          <input\n            type=\"radio\"\n            class=\"devui-radio-input\"\n            [disabled]=\"disabled\"\n            [name]=\"name\"\n            [id]=\"name + '-' + value\"\n            [value]=\"value\"\n            [checked]=\"value == _value\"\n            (change)=\"handleChange($event, value)\"\n          />\n          <span class=\"devui-radio-material\">\n            <svg height=\"100%\" width=\"100%\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle class=\"devui-outer\" [class.disabled]=\"disabled\" cx=\"512\" cy=\"512\" r=\"486.5\" stroke-width=\"51\" />\n              <circle class=\"devui-inner\" [class.disabled]=\"disabled\" cx=\"512\" fill-rule=\"nonzero\" cy=\"512\" r=\"320\" />\n            </svg>\n          </span>\n          <span class=\"devui-radio-label\">{{ value }}</span>\n        </label>\n      </li>\n    </ng-container>\n\n    <ng-content select=\"d-radio\"></ng-content>\n  </ul>\n</div>\n", styles: [".devui-radio-horizontal .devui-radio-list-item{display:inline-block}.devui-radio-horizontal .devui-radio-list-item:not(:last-child){padding-right:20px}.devui-radio-horizontal ::ng-deep d-radio{display:inline-block}.devui-radio-list-item{position:relative;line-height:28px}:host ::ng-deep d-radio{line-height:28px}\n", ".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}:host{padding-right:20px;display:block;line-height:18px}.devui-radio{font-size:12px;font-size:var(--devui-font-size, 12px);line-height:1.5;font-weight:400;cursor:pointer;color:#252b3a;color:var(--devui-text, #252b3a);margin:0 auto}.devui-radio.disabled{cursor:not-allowed}.devui-radio.disabled .devui-radio-label{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-radio svg .devui-outer{stroke:#d7d8da;stroke:var(--devui-line, #d7d8da);fill:transparent}.devui-radio svg .devui-outer.disabled{stroke:#dfe1e6;stroke:var(--devui-disabled-line, #dfe1e6);fill:#f5f5f5;fill:var(--devui-disabled-bg, #f5f5f5)}.devui-radio svg .devui-inner{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.devui-radio:hover:not(.disabled) svg .devui-outer{stroke:#5e7ce0;stroke:var(--devui-form-control-line-active, #5e7ce0)}.devui-radio:hover:not(.disabled) .devui-radio-label{color:#7693f5;color:var(--devui-primary-hover, #7693f5)}.devui-radio:active:not(.disabled) svg .devui-outer,.devui-radio:focus:not(.disabled) svg .devui-outer{stroke:#5e7ce0;stroke:var(--devui-form-control-line-active, #5e7ce0)}.devui-radio.active svg .devui-outer{opacity:1;stroke:#5e7ce0;stroke:var(--devui-form-control-line-active, #5e7ce0);transition:stroke 50ms cubic-bezier(.5,.05,.5,.95);transition:stroke 50ms var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio.active svg .devui-outer.disabled{stroke:#beccfa;stroke:var(--devui-icon-fill-active-disabled, #beccfa);fill:transparent}.devui-radio.active svg .devui-inner{opacity:1;transform:scale(1);transition:transform .2s cubic-bezier(.5,.05,.5,.95),opacity .2s cubic-bezier(.5,.05,.5,.95);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio.active svg .devui-inner.disabled{fill:#beccfa;fill:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-radio.active:not(.disabled):active .devui-radio-material svg .devui-outer,.devui-radio.active:not(.disabled):focus .devui-radio-material svg .devui-outer,.devui-radio.active:not(.disabled):hover .devui-radio-material svg .devui-outer{stroke:#344899;stroke:var(--devui-form-control-line-active-hover, #344899)}.devui-radio.active:not(.disabled):active .devui-radio-material svg .devui-inner,.devui-radio.active:not(.disabled):focus .devui-radio-material svg .devui-inner,.devui-radio.active:not(.disabled):hover .devui-radio-material svg .devui-inner{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.devui-radio .devui-outer{opacity:1;transition:stroke 50ms cubic-bezier(.5,.05,.5,.95);transition:stroke 50ms var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio .devui-inner{opacity:0;transform:scale(0);transform-origin:50% 50%;transition:transform .2s cubic-bezier(.5,.05,.5,.95),opacity .2s cubic-bezier(.5,.05,.5,.95);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio .devui-radio-material{vertical-align:middle;position:relative;display:inline-block;overflow:hidden;height:16px;width:16px;-webkit-user-select:none;-moz-user-select:none;user-select:none;transform:translateY(-1px)}.devui-radio .devui-radio-label{color:#252b3a;color:var(--devui-text, #252b3a);margin-left:8px;font-size:12px;font-size:var(--devui-font-size, 12px);transition:color .3s cubic-bezier(.5,.05,.5,.95);transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio .devui-radio-input{opacity:0;z-index:-1;width:0;height:0;display:none;overflow:hidden;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RadioGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-radio-group', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => RadioGroupComponent),
                            multi: true,
                        },
                    ], preserveWhitespaces: false, template: "<div class=\"devui-radio-group\">\n  <ul [class.devui-radio-horizontal]=\"direction === 'row'\">\n    <ng-container *ngIf=\"radios.length === 0\">\n      <li *ngFor=\"let value of values\" class=\"devui-radio-list-item\">\n        <label class=\"devui-radio\" [class.active]=\"value == _value\" [class.disabled]=\"disabled\">\n          <input\n            type=\"radio\"\n            class=\"devui-radio-input\"\n            [disabled]=\"disabled\"\n            [name]=\"name\"\n            [id]=\"name + '-' + value\"\n            [value]=\"value\"\n            [checked]=\"value == _value\"\n            (change)=\"handleChange($event, value)\"\n          />\n          <span class=\"devui-radio-material\">\n            <svg height=\"100%\" width=\"100%\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle class=\"devui-outer\" [class.disabled]=\"disabled\" cx=\"512\" cy=\"512\" r=\"486.5\" stroke-width=\"51\" />\n              <circle class=\"devui-inner\" [class.disabled]=\"disabled\" cx=\"512\" fill-rule=\"nonzero\" cy=\"512\" r=\"320\" />\n            </svg>\n          </span>\n          <span class=\"devui-radio-label\">{{ value }}</span>\n        </label>\n      </li>\n    </ng-container>\n\n    <ng-content select=\"d-radio\"></ng-content>\n  </ul>\n</div>\n", styles: [".devui-radio-horizontal .devui-radio-list-item{display:inline-block}.devui-radio-horizontal .devui-radio-list-item:not(:last-child){padding-right:20px}.devui-radio-horizontal ::ng-deep d-radio{display:inline-block}.devui-radio-list-item{position:relative;line-height:28px}:host ::ng-deep d-radio{line-height:28px}\n", ".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}:host{padding-right:20px;display:block;line-height:18px}.devui-radio{font-size:12px;font-size:var(--devui-font-size, 12px);line-height:1.5;font-weight:400;cursor:pointer;color:#252b3a;color:var(--devui-text, #252b3a);margin:0 auto}.devui-radio.disabled{cursor:not-allowed}.devui-radio.disabled .devui-radio-label{color:#cfd0d3;color:var(--devui-disabled-text, #cfd0d3)}.devui-radio svg .devui-outer{stroke:#d7d8da;stroke:var(--devui-line, #d7d8da);fill:transparent}.devui-radio svg .devui-outer.disabled{stroke:#dfe1e6;stroke:var(--devui-disabled-line, #dfe1e6);fill:#f5f5f5;fill:var(--devui-disabled-bg, #f5f5f5)}.devui-radio svg .devui-inner{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.devui-radio:hover:not(.disabled) svg .devui-outer{stroke:#5e7ce0;stroke:var(--devui-form-control-line-active, #5e7ce0)}.devui-radio:hover:not(.disabled) .devui-radio-label{color:#7693f5;color:var(--devui-primary-hover, #7693f5)}.devui-radio:active:not(.disabled) svg .devui-outer,.devui-radio:focus:not(.disabled) svg .devui-outer{stroke:#5e7ce0;stroke:var(--devui-form-control-line-active, #5e7ce0)}.devui-radio.active svg .devui-outer{opacity:1;stroke:#5e7ce0;stroke:var(--devui-form-control-line-active, #5e7ce0);transition:stroke 50ms cubic-bezier(.5,.05,.5,.95);transition:stroke 50ms var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio.active svg .devui-outer.disabled{stroke:#beccfa;stroke:var(--devui-icon-fill-active-disabled, #beccfa);fill:transparent}.devui-radio.active svg .devui-inner{opacity:1;transform:scale(1);transition:transform .2s cubic-bezier(.5,.05,.5,.95),opacity .2s cubic-bezier(.5,.05,.5,.95);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio.active svg .devui-inner.disabled{fill:#beccfa;fill:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-radio.active:not(.disabled):active .devui-radio-material svg .devui-outer,.devui-radio.active:not(.disabled):focus .devui-radio-material svg .devui-outer,.devui-radio.active:not(.disabled):hover .devui-radio-material svg .devui-outer{stroke:#344899;stroke:var(--devui-form-control-line-active-hover, #344899)}.devui-radio.active:not(.disabled):active .devui-radio-material svg .devui-inner,.devui-radio.active:not(.disabled):focus .devui-radio-material svg .devui-inner,.devui-radio.active:not(.disabled):hover .devui-radio-material svg .devui-inner{fill:#5e7ce0;fill:var(--devui-brand, #5e7ce0)}.devui-radio .devui-outer{opacity:1;transition:stroke 50ms cubic-bezier(.5,.05,.5,.95);transition:stroke 50ms var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio .devui-inner{opacity:0;transform:scale(0);transform-origin:50% 50%;transition:transform .2s cubic-bezier(.5,.05,.5,.95),opacity .2s cubic-bezier(.5,.05,.5,.95);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio .devui-radio-material{vertical-align:middle;position:relative;display:inline-block;overflow:hidden;height:16px;width:16px;-webkit-user-select:none;-moz-user-select:none;user-select:none;transform:translateY(-1px)}.devui-radio .devui-radio-label{color:#252b3a;color:var(--devui-text, #252b3a);margin-left:8px;font-size:12px;font-size:var(--devui-font-size, 12px);transition:color .3s cubic-bezier(.5,.05,.5,.95);transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio .devui-radio-input{opacity:0;z-index:-1;width:0;height:0;display:none;overflow:hidden;pointer-events:none}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { name: [{
                type: Input
            }], values: [{
                type: Input
            }], cssStyle: [{
                type: Input
            }], direction: [{
                type: Input
            }], disabled: [{
                type: Input
            }], beforeChange: [{
                type: Input
            }], change: [{
                type: Output
            }], radios: [{
                type: ContentChildren,
                args: [RadioComponent]
            }], onRadioChange: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 