@angular/material
Version:
Angular Material
752 lines (748 loc) • 48.8 kB
JavaScript
import { FocusMonitor, _IdGenerator } from '@angular/cdk/a11y';
import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
import * as i0 from '@angular/core';
import { InjectionToken, forwardRef, inject, ElementRef, ChangeDetectorRef, NgZone, Renderer2, EventEmitter, Injector, HostAttributeToken, numberAttribute, afterNextRender, booleanAttribute, Input, ContentChildren, Output, Directive, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
import { _animationsDisabled } from './_animation-chunk.mjs';
import { _StructuralStylesLoader } from './_structural-styles-chunk.mjs';
import { MatRipple } from './_ripple-chunk.mjs';
import { _MatInternalFormField } from './_internal-form-field-chunk.mjs';
import { BidiModule } from '@angular/cdk/bidi';
import { MatRippleModule } from './_ripple-module-chunk.mjs';
import '@angular/cdk/layout';
import '@angular/cdk/platform';
import '@angular/cdk/coercion';
class MatRadioChange {
source;
value;
constructor(source, value) {
this.source = source;
this.value = value;
}
}
const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MatRadioGroup),
multi: true
};
const MAT_RADIO_GROUP = new InjectionToken('MatRadioGroup');
const MAT_RADIO_DEFAULT_OPTIONS = new InjectionToken('mat-radio-default-options', {
providedIn: 'root',
factory: () => ({
color: 'accent',
disabledInteractive: false
})
});
class MatRadioGroup {
_changeDetector = inject(ChangeDetectorRef);
_value = null;
_name = inject(_IdGenerator).getId('mat-radio-group-');
_selected = null;
_isInitialized = false;
_labelPosition = 'after';
_disabled = false;
_required = false;
_buttonChanges;
_controlValueAccessorChangeFn = () => {};
onTouched = () => {};
change = new EventEmitter();
_radios;
color;
get name() {
return this._name;
}
set name(value) {
this._name = value;
this._updateRadioButtonNames();
}
get labelPosition() {
return this._labelPosition;
}
set labelPosition(v) {
this._labelPosition = v === 'before' ? 'before' : 'after';
this._markRadiosForCheck();
}
get value() {
return this._value;
}
set value(newValue) {
if (this._value !== newValue) {
this._value = newValue;
this._updateSelectedRadioFromValue();
this._checkSelectedRadioButton();
}
}
_checkSelectedRadioButton() {
if (this._selected && !this._selected.checked) {
this._selected.checked = true;
}
}
get selected() {
return this._selected;
}
set selected(selected) {
this._selected = selected;
this.value = selected ? selected.value : null;
this._checkSelectedRadioButton();
}
get disabled() {
return this._disabled;
}
set disabled(value) {
this._disabled = value;
this._markRadiosForCheck();
}
get required() {
return this._required;
}
set required(value) {
this._required = value;
this._markRadiosForCheck();
}
get disabledInteractive() {
return this._disabledInteractive;
}
set disabledInteractive(value) {
this._disabledInteractive = value;
this._markRadiosForCheck();
}
_disabledInteractive = false;
constructor() {}
ngAfterContentInit() {
this._isInitialized = true;
this._buttonChanges = this._radios.changes.subscribe(() => {
if (this.selected && !this._radios.find(radio => radio === this.selected)) {
this._selected = null;
}
});
}
ngOnDestroy() {
this._buttonChanges?.unsubscribe();
}
_touch() {
if (this.onTouched) {
this.onTouched();
}
}
_updateRadioButtonNames() {
if (this._radios) {
this._radios.forEach(radio => {
radio.name = this.name;
radio._markForCheck();
});
}
}
_updateSelectedRadioFromValue() {
const isAlreadySelected = this._selected !== null && this._selected.value === this._value;
if (this._radios && !isAlreadySelected) {
this._selected = null;
this._radios.forEach(radio => {
radio.checked = this.value === radio.value;
if (radio.checked) {
this._selected = radio;
}
});
}
}
_emitChangeEvent() {
if (this._isInitialized) {
this.change.emit(new MatRadioChange(this._selected, this._value));
}
}
_markRadiosForCheck() {
if (this._radios) {
this._radios.forEach(radio => radio._markForCheck());
}
}
writeValue(value) {
this.value = value;
this._changeDetector.markForCheck();
}
registerOnChange(fn) {
this._controlValueAccessorChangeFn = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this._changeDetector.markForCheck();
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatRadioGroup,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "16.1.0",
version: "22.0.0-next.5",
type: MatRadioGroup,
isStandalone: true,
selector: "mat-radio-group",
inputs: {
color: "color",
name: "name",
labelPosition: "labelPosition",
value: "value",
selected: "selected",
disabled: ["disabled", "disabled", booleanAttribute],
required: ["required", "required", booleanAttribute],
disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute]
},
outputs: {
change: "change"
},
host: {
attributes: {
"role": "radiogroup"
},
classAttribute: "mat-mdc-radio-group"
},
providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, {
provide: MAT_RADIO_GROUP,
useExisting: MatRadioGroup
}],
queries: [{
propertyName: "_radios",
predicate: i0.forwardRef(() => MatRadioButton),
descendants: true
}],
exportAs: ["matRadioGroup"],
ngImport: i0
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatRadioGroup,
decorators: [{
type: Directive,
args: [{
selector: 'mat-radio-group',
exportAs: 'matRadioGroup',
providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, {
provide: MAT_RADIO_GROUP,
useExisting: MatRadioGroup
}],
host: {
'role': 'radiogroup',
'class': 'mat-mdc-radio-group'
}
}]
}],
ctorParameters: () => [],
propDecorators: {
change: [{
type: Output
}],
_radios: [{
type: ContentChildren,
args: [forwardRef(() => MatRadioButton), {
descendants: true
}]
}],
color: [{
type: Input
}],
name: [{
type: Input
}],
labelPosition: [{
type: Input
}],
value: [{
type: Input
}],
selected: [{
type: Input
}],
disabled: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
required: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
disabledInteractive: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}]
}
});
class MatRadioButton {
_elementRef = inject(ElementRef);
_changeDetector = inject(ChangeDetectorRef);
_focusMonitor = inject(FocusMonitor);
_radioDispatcher = inject(UniqueSelectionDispatcher);
_defaultOptions = inject(MAT_RADIO_DEFAULT_OPTIONS, {
optional: true
});
_ngZone = inject(NgZone);
_renderer = inject(Renderer2);
_uniqueId = inject(_IdGenerator).getId('mat-radio-');
_cleanupClick;
id = this._uniqueId;
name;
ariaLabel;
ariaLabelledby;
ariaDescribedby;
disableRipple = false;
tabIndex = 0;
get checked() {
return this._checked;
}
set checked(value) {
if (this._checked !== value) {
this._checked = value;
if (value && this.radioGroup && this.radioGroup.value !== this.value) {
this.radioGroup.selected = this;
} else if (!value && this.radioGroup && this.radioGroup.value === this.value) {
this.radioGroup.selected = null;
}
if (value) {
this._radioDispatcher.notify(this.id, this.name);
}
this._changeDetector.markForCheck();
}
}
get value() {
return this._value;
}
set value(value) {
if (this._value !== value) {
this._value = value;
if (this.radioGroup !== null) {
if (!this.checked) {
this.checked = this.radioGroup.value === value;
}
if (this.checked) {
this.radioGroup.selected = this;
}
}
}
}
get labelPosition() {
return this._labelPosition || this.radioGroup && this.radioGroup.labelPosition || 'after';
}
set labelPosition(value) {
this._labelPosition = value;
}
_labelPosition;
get disabled() {
return this._disabled || this.radioGroup !== null && this.radioGroup.disabled;
}
set disabled(value) {
this._setDisabled(value);
}
get required() {
return this._required || this.radioGroup && this.radioGroup.required;
}
set required(value) {
if (value !== this._required) {
this._changeDetector.markForCheck();
}
this._required = value;
}
get color() {
return this._color || this.radioGroup && this.radioGroup.color || this._defaultOptions && this._defaultOptions.color || 'accent';
}
set color(newValue) {
this._color = newValue;
}
_color;
get disabledInteractive() {
return this._disabledInteractive || this.radioGroup !== null && this.radioGroup.disabledInteractive;
}
set disabledInteractive(value) {
this._disabledInteractive = value;
}
_disabledInteractive;
change = new EventEmitter();
radioGroup;
get inputId() {
return `${this.id || this._uniqueId}-input`;
}
_checked = false;
_disabled = false;
_required = false;
_value = null;
_removeUniqueSelectionListener = () => {};
_previousTabIndex;
_inputElement;
_rippleTrigger;
_noopAnimations = _animationsDisabled();
_injector = inject(Injector);
constructor() {
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
const radioGroup = inject(MAT_RADIO_GROUP, {
optional: true
});
const tabIndex = inject(new HostAttributeToken('tabindex'), {
optional: true
});
this.radioGroup = radioGroup;
this._disabledInteractive = this._defaultOptions?.disabledInteractive ?? false;
if (tabIndex) {
this.tabIndex = numberAttribute(tabIndex, 0);
}
}
focus(options, origin) {
if (origin) {
this._focusMonitor.focusVia(this._inputElement, origin, options);
} else {
this._inputElement.nativeElement.focus(options);
}
}
_markForCheck() {
this._changeDetector.markForCheck();
}
ngOnInit() {
if (this.radioGroup) {
this.checked = this.radioGroup.value === this._value;
if (this.checked) {
this.radioGroup.selected = this;
}
this.name = this.radioGroup.name;
}
this._removeUniqueSelectionListener = this._radioDispatcher.listen((id, name) => {
if (id !== this.id && name === this.name) {
this.checked = false;
}
});
}
ngDoCheck() {
this._updateTabIndex();
}
ngAfterViewInit() {
this._updateTabIndex();
this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {
if (!focusOrigin && this.radioGroup) {
this.radioGroup._touch();
}
});
this._ngZone.runOutsideAngular(() => {
this._cleanupClick = this._renderer.listen(this._inputElement.nativeElement, 'click', this._onInputClick);
});
}
ngOnDestroy() {
this._cleanupClick?.();
this._focusMonitor.stopMonitoring(this._elementRef);
this._removeUniqueSelectionListener();
}
_emitChangeEvent() {
this.change.emit(new MatRadioChange(this, this._value));
}
_isRippleDisabled() {
return this.disableRipple || this.disabled;
}
_onInputInteraction(event) {
event.stopPropagation();
if (!this.checked && !this.disabled) {
const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
this.checked = true;
this._emitChangeEvent();
if (this.radioGroup) {
this.radioGroup._controlValueAccessorChangeFn(this.value);
if (groupValueChanged) {
this.radioGroup._emitChangeEvent();
}
}
}
}
_onTouchTargetClick(event) {
this._onInputInteraction(event);
if (!this.disabled || this.disabledInteractive) {
this._inputElement?.nativeElement.focus();
}
}
_setDisabled(value) {
if (this._disabled !== value) {
this._disabled = value;
this._changeDetector.markForCheck();
}
}
_onInputClick = event => {
if (this.disabled && this.disabledInteractive) {
event.preventDefault();
}
};
_updateTabIndex() {
const group = this.radioGroup;
let value;
if (!group || !group.selected || this.disabled) {
value = this.tabIndex;
} else {
value = group.selected === this ? this.tabIndex : -1;
}
if (value !== this._previousTabIndex) {
const input = this._inputElement?.nativeElement;
if (input) {
input.setAttribute('tabindex', value + '');
this._previousTabIndex = value;
afterNextRender(() => {
queueMicrotask(() => {
if (group && group.selected && group.selected !== this && document.activeElement === input) {
group.selected?._inputElement.nativeElement.focus();
if (document.activeElement === input) {
this._inputElement.nativeElement.blur();
}
}
});
}, {
injector: this._injector
});
}
}
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatRadioButton,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "16.1.0",
version: "22.0.0-next.5",
type: MatRadioButton,
isStandalone: true,
selector: "mat-radio-button",
inputs: {
id: "id",
name: "name",
ariaLabel: ["aria-label", "ariaLabel"],
ariaLabelledby: ["aria-labelledby", "ariaLabelledby"],
ariaDescribedby: ["aria-describedby", "ariaDescribedby"],
disableRipple: ["disableRipple", "disableRipple", booleanAttribute],
tabIndex: ["tabIndex", "tabIndex", value => value == null ? 0 : numberAttribute(value)],
checked: ["checked", "checked", booleanAttribute],
value: "value",
labelPosition: "labelPosition",
disabled: ["disabled", "disabled", booleanAttribute],
required: ["required", "required", booleanAttribute],
color: "color",
disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute]
},
outputs: {
change: "change"
},
host: {
listeners: {
"focus": "_inputElement.nativeElement.focus()"
},
properties: {
"attr.id": "id",
"class.mat-primary": "color === \"primary\"",
"class.mat-accent": "color === \"accent\"",
"class.mat-warn": "color === \"warn\"",
"class.mat-mdc-radio-checked": "checked",
"class.mat-mdc-radio-disabled": "disabled",
"class.mat-mdc-radio-disabled-interactive": "disabledInteractive",
"class._mat-animation-noopable": "_noopAnimations",
"attr.tabindex": "null",
"attr.aria-label": "null",
"attr.aria-labelledby": "null",
"attr.aria-describedby": "null"
},
classAttribute: "mat-mdc-radio-button"
},
viewQueries: [{
propertyName: "_inputElement",
first: true,
predicate: ["input"],
descendants: true
}, {
propertyName: "_rippleTrigger",
first: true,
predicate: ["formField"],
descendants: true,
read: ElementRef,
static: true
}],
exportAs: ["matRadioButton"],
ngImport: i0,
template: "<div mat-internal-form-field [labelPosition]=\"labelPosition\" #formField>\n <div class=\"mdc-radio\" [class.mdc-radio--disabled]=\"disabled\">\n <!-- Render this element first so the input is on top. -->\n <div\n class=\"mat-mdc-radio-touch-target\"\n (click)=\"_onTouchTargetClick($event)\"\n aria-hidden=\"true\"></div>\n <!--\n Note that we set `aria-invalid=\"false\"` on the input, because otherwise some screen readers\n will read out \"required, invalid data\" for each radio button that hasn't been checked.\n An alternate approach is to use `aria-required` instead of `required`, however we have an\n internal check which enforces that elements marked as `aria-required` also have the `required`\n attribute which ends up re-introducing the issue for us.\n -->\n <input #input class=\"mdc-radio__native-control\" type=\"radio\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled && !disabledInteractive\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [required]=\"required\"\n aria-invalid=\"false\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-disabled]=\"disabled && disabledInteractive ? 'true' : null\"\n (change)=\"_onInputInteraction($event)\">\n <div class=\"mdc-radio__background\" aria-hidden=\"true\">\n <div class=\"mdc-radio__outer-circle\"></div>\n <div class=\"mdc-radio__inner-circle\"></div>\n </div>\n <div mat-ripple class=\"mat-radio-ripple mat-focus-indicator\"\n [matRippleTrigger]=\"_rippleTrigger.nativeElement\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"true\"\n aria-hidden=\"true\">\n <div class=\"mat-ripple-element mat-radio-persistent-ripple\"></div>\n </div>\n </div>\n <label class=\"mdc-label\" [for]=\"inputId\">\n <ng-content></ng-content>\n </label>\n</div>\n",
styles: [".mat-mdc-radio-button {\n -webkit-tap-highlight-color: transparent;\n}\n.mat-mdc-radio-button .mdc-radio {\n display: inline-block;\n position: relative;\n flex: 0 0 auto;\n box-sizing: content-box;\n width: 20px;\n height: 20px;\n cursor: pointer;\n will-change: opacity, transform, border-color, color;\n padding: calc((var(--mat-radio-state-layer-size, 40px) - 20px) / 2);\n}\n.mat-mdc-radio-button .mdc-radio:hover > .mdc-radio__native-control:not([disabled]):not(:focus) ~ .mdc-radio__background::before {\n opacity: 0.04;\n transform: scale(1);\n}\n.mat-mdc-radio-button .mdc-radio:hover > .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-unselected-hover-icon-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button .mdc-radio:hover > .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button .mdc-radio:hover > .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary, currentColor));\n}\n.mat-mdc-radio-button .mdc-radio:active > .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-unselected-pressed-icon-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button .mdc-radio:active > .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button .mdc-radio:active > .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary, currentColor));\n}\n.mat-mdc-radio-button .mdc-radio__background {\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n}\n.mat-mdc-radio-button .mdc-radio__background::before {\n position: absolute;\n transform: scale(0, 0);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n transition: opacity 90ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms cubic-bezier(0.4, 0, 0.6, 1);\n width: var(--mat-radio-state-layer-size, 40px);\n height: var(--mat-radio-state-layer-size, 40px);\n top: calc(-1 * (var(--mat-radio-state-layer-size, 40px) - 20px) / 2);\n left: calc(-1 * (var(--mat-radio-state-layer-size, 40px) - 20px) / 2);\n}\n.mat-mdc-radio-button .mdc-radio__outer-circle {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border-width: 2px;\n border-style: solid;\n border-radius: 50%;\n transition: border-color 90ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n.mat-mdc-radio-button .mdc-radio__inner-circle {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n transform: scale(0);\n border-radius: 50%;\n transition: transform 90ms cubic-bezier(0.4, 0, 0.6, 1), background-color 90ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n@media (forced-colors: active) {\n .mat-mdc-radio-button .mdc-radio__inner-circle {\n background-color: CanvasText !important;\n }\n}\n.mat-mdc-radio-button .mdc-radio__native-control {\n position: absolute;\n margin: 0;\n padding: 0;\n opacity: 0;\n top: 0;\n right: 0;\n left: 0;\n cursor: inherit;\n z-index: 1;\n width: var(--mat-radio-state-layer-size, 40px);\n height: var(--mat-radio-state-layer-size, 40px);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background, .mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background {\n transition: opacity 90ms cubic-bezier(0, 0, 0.2, 1), transform 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__outer-circle, .mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background > .mdc-radio__outer-circle {\n transition: border-color 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__inner-circle, .mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background > .mdc-radio__inner-circle {\n transition: transform 90ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:focus + .mdc-radio__background::before {\n transform: scale(1);\n opacity: 0.12;\n transition: opacity 90ms cubic-bezier(0, 0, 0.2, 1), transform 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-radio-disabled-unselected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background {\n cursor: default;\n}\n.mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-radio-disabled-selected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));\n opacity: var(--mat-radio-disabled-selected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-unselected-icon-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-selected-icon-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-selected-icon-color, var(--mat-sys-primary, currentColor));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary, currentColor));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n transform: scale(0.5);\n transition: transform 90ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled {\n pointer-events: auto;\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-radio-disabled-unselected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__outer-circle,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus + .mdc-radio__background > .mdc-radio__outer-circle,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-radio-disabled-selected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__inner-circle,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus + .mdc-radio__background > .mdc-radio__inner-circle,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));\n opacity: var(--mat-radio-disabled-selected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__background::before,\n.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__outer-circle,\n.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__inner-circle {\n transition: none !important;\n}\n.mat-mdc-radio-button label {\n cursor: pointer;\n}\n.mat-mdc-radio-button label:empty {\n display: none;\n}\n.mat-mdc-radio-button .mdc-radio__background::before {\n background-color: var(--mat-radio-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,\n.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before {\n background-color: var(--mat-radio-checked-ripple-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mat-ripple-element,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__background::before {\n background-color: var(--mat-radio-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button .mat-internal-form-field {\n color: var(--mat-radio-label-text-color, var(--mat-sys-on-surface));\n font-family: var(--mat-radio-label-text-font, var(--mat-sys-body-medium-font));\n line-height: var(--mat-radio-label-text-line-height, var(--mat-sys-body-medium-line-height));\n font-size: var(--mat-radio-label-text-size, var(--mat-sys-body-medium-size));\n letter-spacing: var(--mat-radio-label-text-tracking, var(--mat-sys-body-medium-tracking));\n font-weight: var(--mat-radio-label-text-weight, var(--mat-sys-body-medium-weight));\n}\n.mat-mdc-radio-button .mdc-radio--disabled + label {\n color: var(--mat-radio-disabled-label-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-mdc-radio-button .mat-radio-ripple {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n pointer-events: none;\n border-radius: 50%;\n}\n.mat-mdc-radio-button .mat-radio-ripple > .mat-ripple-element {\n opacity: 0.14;\n}\n.mat-mdc-radio-button .mat-radio-ripple::before {\n border-radius: 50%;\n}\n.mat-mdc-radio-button .mdc-radio > .mdc-radio__native-control:focus:enabled:not(:checked) ~ .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-unselected-focus-icon-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button.cdk-focused .mat-focus-indicator::before {\n content: \"\";\n}\n\n.mat-mdc-radio-disabled {\n cursor: default;\n pointer-events: none;\n}\n.mat-mdc-radio-disabled.mat-mdc-radio-disabled-interactive {\n pointer-events: auto;\n}\n\n.mat-mdc-radio-touch-target {\n position: absolute;\n top: 50%;\n left: 50%;\n height: var(--mat-radio-touch-target-size, 48px);\n width: var(--mat-radio-touch-target-size, 48px);\n transform: translate(-50%, -50%);\n display: var(--mat-radio-touch-target-display, block);\n}\n[dir=rtl] .mat-mdc-radio-touch-target {\n left: auto;\n right: 50%;\n transform: translate(50%, -50%);\n}\n"],
dependencies: [{
kind: "directive",
type: MatRipple,
selector: "[mat-ripple], [matRipple]",
inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"],
exportAs: ["matRipple"]
}, {
kind: "component",
type: _MatInternalFormField,
selector: "div[mat-internal-form-field]",
inputs: ["labelPosition"]
}],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatRadioButton,
decorators: [{
type: Component,
args: [{
selector: 'mat-radio-button',
host: {
'class': 'mat-mdc-radio-button',
'[attr.id]': 'id',
'[class.mat-primary]': 'color === "primary"',
'[class.mat-accent]': 'color === "accent"',
'[class.mat-warn]': 'color === "warn"',
'[class.mat-mdc-radio-checked]': 'checked',
'[class.mat-mdc-radio-disabled]': 'disabled',
'[class.mat-mdc-radio-disabled-interactive]': 'disabledInteractive',
'[class._mat-animation-noopable]': '_noopAnimations',
'[attr.tabindex]': 'null',
'[attr.aria-label]': 'null',
'[attr.aria-labelledby]': 'null',
'[attr.aria-describedby]': 'null',
'(focus)': '_inputElement.nativeElement.focus()'
},
exportAs: 'matRadioButton',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatRipple, _MatInternalFormField],
template: "<div mat-internal-form-field [labelPosition]=\"labelPosition\" #formField>\n <div class=\"mdc-radio\" [class.mdc-radio--disabled]=\"disabled\">\n <!-- Render this element first so the input is on top. -->\n <div\n class=\"mat-mdc-radio-touch-target\"\n (click)=\"_onTouchTargetClick($event)\"\n aria-hidden=\"true\"></div>\n <!--\n Note that we set `aria-invalid=\"false\"` on the input, because otherwise some screen readers\n will read out \"required, invalid data\" for each radio button that hasn't been checked.\n An alternate approach is to use `aria-required` instead of `required`, however we have an\n internal check which enforces that elements marked as `aria-required` also have the `required`\n attribute which ends up re-introducing the issue for us.\n -->\n <input #input class=\"mdc-radio__native-control\" type=\"radio\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled && !disabledInteractive\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [required]=\"required\"\n aria-invalid=\"false\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-disabled]=\"disabled && disabledInteractive ? 'true' : null\"\n (change)=\"_onInputInteraction($event)\">\n <div class=\"mdc-radio__background\" aria-hidden=\"true\">\n <div class=\"mdc-radio__outer-circle\"></div>\n <div class=\"mdc-radio__inner-circle\"></div>\n </div>\n <div mat-ripple class=\"mat-radio-ripple mat-focus-indicator\"\n [matRippleTrigger]=\"_rippleTrigger.nativeElement\"\n [matRippleDisabled]=\"_isRippleDisabled()\"\n [matRippleCentered]=\"true\"\n aria-hidden=\"true\">\n <div class=\"mat-ripple-element mat-radio-persistent-ripple\"></div>\n </div>\n </div>\n <label class=\"mdc-label\" [for]=\"inputId\">\n <ng-content></ng-content>\n </label>\n</div>\n",
styles: [".mat-mdc-radio-button {\n -webkit-tap-highlight-color: transparent;\n}\n.mat-mdc-radio-button .mdc-radio {\n display: inline-block;\n position: relative;\n flex: 0 0 auto;\n box-sizing: content-box;\n width: 20px;\n height: 20px;\n cursor: pointer;\n will-change: opacity, transform, border-color, color;\n padding: calc((var(--mat-radio-state-layer-size, 40px) - 20px) / 2);\n}\n.mat-mdc-radio-button .mdc-radio:hover > .mdc-radio__native-control:not([disabled]):not(:focus) ~ .mdc-radio__background::before {\n opacity: 0.04;\n transform: scale(1);\n}\n.mat-mdc-radio-button .mdc-radio:hover > .mdc-radio__native-control:not([disabled]) ~ .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-unselected-hover-icon-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button .mdc-radio:hover > .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button .mdc-radio:hover > .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-selected-hover-icon-color, var(--mat-sys-primary, currentColor));\n}\n.mat-mdc-radio-button .mdc-radio:active > .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-unselected-pressed-icon-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button .mdc-radio:active > .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button .mdc-radio:active > .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-selected-pressed-icon-color, var(--mat-sys-primary, currentColor));\n}\n.mat-mdc-radio-button .mdc-radio__background {\n display: inline-block;\n position: relative;\n box-sizing: border-box;\n width: 20px;\n height: 20px;\n}\n.mat-mdc-radio-button .mdc-radio__background::before {\n position: absolute;\n transform: scale(0, 0);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n content: \"\";\n transition: opacity 90ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms cubic-bezier(0.4, 0, 0.6, 1);\n width: var(--mat-radio-state-layer-size, 40px);\n height: var(--mat-radio-state-layer-size, 40px);\n top: calc(-1 * (var(--mat-radio-state-layer-size, 40px) - 20px) / 2);\n left: calc(-1 * (var(--mat-radio-state-layer-size, 40px) - 20px) / 2);\n}\n.mat-mdc-radio-button .mdc-radio__outer-circle {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border-width: 2px;\n border-style: solid;\n border-radius: 50%;\n transition: border-color 90ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n.mat-mdc-radio-button .mdc-radio__inner-circle {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n transform: scale(0);\n border-radius: 50%;\n transition: transform 90ms cubic-bezier(0.4, 0, 0.6, 1), background-color 90ms cubic-bezier(0.4, 0, 0.6, 1);\n}\n@media (forced-colors: active) {\n .mat-mdc-radio-button .mdc-radio__inner-circle {\n background-color: CanvasText !important;\n }\n}\n.mat-mdc-radio-button .mdc-radio__native-control {\n position: absolute;\n margin: 0;\n padding: 0;\n opacity: 0;\n top: 0;\n right: 0;\n left: 0;\n cursor: inherit;\n z-index: 1;\n width: var(--mat-radio-state-layer-size, 40px);\n height: var(--mat-radio-state-layer-size, 40px);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background, .mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background {\n transition: opacity 90ms cubic-bezier(0, 0, 0.2, 1), transform 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__outer-circle, .mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background > .mdc-radio__outer-circle {\n transition: border-color 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__inner-circle, .mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background > .mdc-radio__inner-circle {\n transition: transform 90ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:focus + .mdc-radio__background::before {\n transform: scale(1);\n opacity: 0.12;\n transition: opacity 90ms cubic-bezier(0, 0, 0.2, 1), transform 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:disabled:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-radio-disabled-unselected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background {\n cursor: default;\n}\n.mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-radio-disabled-selected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:disabled + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));\n opacity: var(--mat-radio-disabled-selected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-unselected-icon-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-selected-icon-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-selected-icon-color, var(--mat-sys-primary, currentColor));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:enabled:focus:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-selected-focus-icon-color, var(--mat-sys-primary, currentColor));\n}\n.mat-mdc-radio-button .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__inner-circle {\n transform: scale(0.5);\n transition: transform 90ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled {\n pointer-events: auto;\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:not(:checked) + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-disabled-unselected-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-radio-disabled-unselected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__outer-circle,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus + .mdc-radio__background > .mdc-radio__outer-circle,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control + .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface));\n opacity: var(--mat-radio-disabled-selected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled:hover .mdc-radio__native-control:checked + .mdc-radio__background > .mdc-radio__inner-circle,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control:checked:focus + .mdc-radio__background > .mdc-radio__inner-circle,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__native-control + .mdc-radio__background > .mdc-radio__inner-circle {\n background-color: var(--mat-radio-disabled-selected-icon-color, var(--mat-sys-on-surface, currentColor));\n opacity: var(--mat-radio-disabled-selected-icon-opacity, 0.38);\n}\n.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__background::before,\n.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__outer-circle,\n.mat-mdc-radio-button._mat-animation-noopable .mdc-radio__inner-circle {\n transition: none !important;\n}\n.mat-mdc-radio-button label {\n cursor: pointer;\n}\n.mat-mdc-radio-button label:empty {\n display: none;\n}\n.mat-mdc-radio-button .mdc-radio__background::before {\n background-color: var(--mat-radio-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element,\n.mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__background::before {\n background-color: var(--mat-radio-checked-ripple-color, var(--mat-sys-primary));\n}\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mat-ripple-element,\n.mat-mdc-radio-button.mat-mdc-radio-disabled-interactive .mdc-radio--disabled .mdc-radio__background::before {\n background-color: var(--mat-radio-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button .mat-internal-form-field {\n color: var(--mat-radio-label-text-color, var(--mat-sys-on-surface));\n font-family: var(--mat-radio-label-text-font, var(--mat-sys-body-medium-font));\n line-height: var(--mat-radio-label-text-line-height, var(--mat-sys-body-medium-line-height));\n font-size: var(--mat-radio-label-text-size, var(--mat-sys-body-medium-size));\n letter-spacing: var(--mat-radio-label-text-tracking, var(--mat-sys-body-medium-tracking));\n font-weight: var(--mat-radio-label-text-weight, var(--mat-sys-body-medium-weight));\n}\n.mat-mdc-radio-button .mdc-radio--disabled + label {\n color: var(--mat-radio-disabled-label-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent));\n}\n.mat-mdc-radio-button .mat-radio-ripple {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n pointer-events: none;\n border-radius: 50%;\n}\n.mat-mdc-radio-button .mat-radio-ripple > .mat-ripple-element {\n opacity: 0.14;\n}\n.mat-mdc-radio-button .mat-radio-ripple::before {\n border-radius: 50%;\n}\n.mat-mdc-radio-button .mdc-radio > .mdc-radio__native-control:focus:enabled:not(:checked) ~ .mdc-radio__background > .mdc-radio__outer-circle {\n border-color: var(--mat-radio-unselected-focus-icon-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-radio-button.cdk-focused .mat-focus-indicator::before {\n content: \"\";\n}\n\n.mat-mdc-radio-disabled {\n cursor: default;\n pointer-events: none;\n}\n.mat-mdc-radio-disabled.mat-mdc-radio-disabled-interactive {\n pointer-events: auto;\n}\n\n.mat-mdc-radio-touch-target {\n position: absolute;\n top: 50%;\n left: 50%;\n height: var(--mat-radio-touch-target-size, 48px);\n width: var(--mat-radio-touch-target-size, 48px);\n transform: translate(-50%, -50%);\n display: var(--mat-radio-touch-target-display, block);\n}\n[dir=rtl] .mat-mdc-radio-touch-target {\n left: auto;\n right: 50%;\n transform: translate(50%, -50%);\n}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
id: [{
type: Input
}],
name: [{
type: Input
}],
ariaLabel: [{
type: Input,
args: ['aria-label']
}],
ariaLabelledby: [{
type: Input,
args: ['aria-labelledby']
}],
ariaDescribedby: [{
type: Input,
args: ['aria-describedby']
}],
disableRipple: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
tabIndex: [{
type: Input,
args: [{
transform: value => value == null ? 0 : numberAttribute(value)
}]
}],
checked: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
value: [{
type: Input
}],
labelPosition: [{
type: Input
}],
disabled: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
required: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
color: [{
type: Input
}],
disabledInteractive: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
change: [{
type: Output
}],
_inputElement: [{
type: ViewChild,
args: ['input']
}],
_rippleTrigger: [{
type: ViewChild,
args: ['formField', {
read: ElementRef,
static: true
}]
}]
}
});
class MatRadioModule {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatRadioModule,
deps: [],
target: i0.ɵɵFactoryTarget.NgModule
});
static ɵmod = i0.ɵɵngDeclareNgModule({
minVersion: "14.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatRadioModule,
imports: [MatRippleModule, MatRadioGroup, MatRadioButton],
exports: [BidiModule, MatRadioGroup, MatRadioButton]
});
static ɵinj = i0.ɵɵngDeclareInjector({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatRadioModule,
imports: [MatRippleModule, MatRadioButton, BidiModule]
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatRadioModule,
decorators: [{
type: NgModule,
args: [{
imports: [MatRippleModule, MatRadioGroup, MatRadioButton],
exports: [BidiModule, MatRadioGroup, MatRadioButton]
}]
}]
});
export { MAT_RADIO_DEFAULT_OPTIONS, MAT_RADIO_GROUP, MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, MatRadioButton, MatRadioChange, MatRadioGroup, MatRadioModule };
//# sourceMappingURL=radio.mjs.map