primeng/fesm2022/primeng-radiobutton.mjs

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, forwardRef, EventEmitter, inject, Injector, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
import { SharedModule } from 'primeng/api';
import { AutoFocus } from 'primeng/autofocus';
import { BaseComponent } from 'primeng/basecomponent';
import { BaseStyle } from 'primeng/base';

const theme = ({ dt }) => `
.p-radiobutton {
    position: relative;
    display: inline-flex;
    user-select: none;
    vertical-align: bottom;
    width: ${dt('radiobutton.width')};
    height: ${dt('radiobutton.height')};
}

.p-radiobutton-input {
    cursor: pointer;
    appearance: none;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    z-index: 1;
    outline: 0 none;
    border: 1px solid transparent;
    border-radius: 50%;
}

.p-radiobutton-box {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid ${dt('radiobutton.border.color')};
    background: ${dt('radiobutton.background')};
    width: ${dt('radiobutton.width')};
    height: ${dt('radiobutton.height')};
    transition: background ${dt('radiobutton.transition.duration')}, color ${dt('radiobutton.transition.duration')}, border-color ${dt('radiobutton.transition.duration')}, box-shadow ${dt('radiobutton.transition.duration')}, outline-color ${dt('radiobutton.transition.duration')};
    outline-color: transparent;
    box-shadow: ${dt('radiobutton.shadow')};
}

.p-radiobutton-icon {
    transition-duration: ${dt('radiobutton.transition.duration')};
    background: transparent;
    font-size: ${dt('radiobutton.icon.size')};
    width: ${dt('radiobutton.icon.size')};
    height: ${dt('radiobutton.icon.size')};
    border-radius: 50%;
    backface-visibility: hidden;
    transform: translateZ(0) scale(0.1);
}

.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
    border-color: ${dt('radiobutton.hover.border.color')};
}

.p-radiobutton-checked .p-radiobutton-box {
    border-color: ${dt('radiobutton.checked.border.color')};
    background: ${dt('radiobutton.checked.background')};
}

.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
    background: ${dt('radiobutton.icon.checked.color')};
    transform: translateZ(0) scale(1, 1);
    visibility: visible;
}

.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
    border-color: ${dt('radiobutton.checked.hover.border.color')};
    background: ${dt('radiobutton.checked.hover.background')};
}

.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
    background: ${dt('radiobutton.icon.checked.hover.color')};
}

.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
    border-color: ${dt('radiobutton.focus.border.color')};
    box-shadow: ${dt('radiobutton.focus.ring.shadow')};
    outline: ${dt('radiobutton.focus.ring.width')} ${dt('radiobutton.focus.ring.style')} ${dt('radiobutton.focus.ring.color')};
    outline-offset: ${dt('radiobutton.focus.ring.offset')};
}

.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
    border-color: ${dt('radiobutton.checked.focus.border.color')};
}

.p-radiobutton.ng-invalid.ng-dirty > .p-radiobutton-box {
    border-color: ${dt('radiobutton.invalid.border.color')};
}

.p-radiobutton.p-variant-filled .p-radiobutton-box {
    background: ${dt('radiobutton.filled.background')};
}

.p-radiobutton.p-variant-filled.p-radiobutton-checked .p-radiobutton-box {
    background: ${dt('radiobutton.checked.background')};
}

.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box {
    background: ${dt('radiobutton.checked.hover.background')};
}

.p-radiobutton.p-disabled {
    opacity: 1;
}

.p-radiobutton.p-disabled .p-radiobutton-box {
    background: ${dt('radiobutton.disabled.background')};
    border-color: ${dt('radiobutton.checked.disabled.border.color')};
}

.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
    background: ${dt('radiobutton.icon.disabled.color')};
}

.p-radiobutton-sm,
.p-radiobutton-sm .p-radiobutton-box {
    width: ${dt('radiobutton.sm.width')};
    height: ${dt('radiobutton.sm.height')};
}

.p-radiobutton-sm .p-radiobutton-icon {
    font-size: ${dt('radiobutton.icon.sm.size')};
    width: ${dt('radiobutton.icon.sm.size')};
    height: ${dt('radiobutton.icon.sm.size')};
}

.p-radiobutton-lg,
.p-radiobutton-lg .p-radiobutton-box {
    width: ${dt('radiobutton.lg.width')};
    height: ${dt('radiobutton.lg.height')};
}

.p-radiobutton-lg .p-radiobutton-icon {
    font-size: ${dt('radiobutton.icon.lg.size')};
    width: ${dt('radiobutton.icon.lg.size')};
    height: ${dt('radiobutton.icon.lg.size')};
}
`;
const classes = {
    root: ({ instance, props }) => [
        'p-radiobutton p-component',
        {
            'p-radiobutton-checked': instance.checked,
            'p-disabled': props.disabled,
            'p-invalid': props.invalid,
            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.config.inputStyle === 'filled' || instance.config.inputVariant === 'filled'
        }
    ],
    box: 'p-radiobutton-box',
    input: 'p-radiobutton-input',
    icon: 'p-radiobutton-icon'
};
class RadioButtonStyle extends BaseStyle {
    name = 'radiobutton';
    theme = theme;
    classes = classes;
    static ɵfac = /*@__PURE__*/ (() => { let ɵRadioButtonStyle_BaseFactory; return function RadioButtonStyle_Factory(__ngFactoryType__) { return (ɵRadioButtonStyle_BaseFactory || (ɵRadioButtonStyle_BaseFactory = i0.ɵɵgetInheritedFactory(RadioButtonStyle)))(__ngFactoryType__ || RadioButtonStyle); }; })();
    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: RadioButtonStyle, factory: RadioButtonStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadioButtonStyle, [{
        type: Injectable
    }], null, null); })();
/**
 *
 * RadioButton is an extension to standard radio button element with theming.
 *
 * [Live Demo](https://www.primeng.org/radiobutton/)
 *
 * @module radiobuttonstyle
 *
 */
var RadioButtonClasses;
(function (RadioButtonClasses) {
    /**
     * Class name of the root element
     */
    RadioButtonClasses["root"] = "p-radiobutton";
    /**
     * Class name of the box element
     */
    RadioButtonClasses["box"] = "p-radiobutton-box";
    /**
     * Class name of the input element
     */
    RadioButtonClasses["input"] = "p-radiobutton-input";
    /**
     * Class name of the icon element
     */
    RadioButtonClasses["icon"] = "p-radiobutton-icon";
})(RadioButtonClasses || (RadioButtonClasses = {}));

const _c0 = ["input"];
const _c1 = (a0, a1, a2, a3, a4) => ({ "p-radiobutton p-component": true, "p-radiobutton-checked": a0, "p-disabled": a1, "p-variant-filled": a2, "p-radiobutton-sm p-inputfield-sm": a3, "p-radiobutton-lg p-inputfield-lg": a4 });
const RADIO_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => RadioButton),
    multi: true
};
class RadioControlRegistry {
    accessors = [];
    add(control, accessor) {
        this.accessors.push([control, accessor]);
    }
    remove(accessor) {
        this.accessors = this.accessors.filter((c) => {
            return c[1] !== accessor;
        });
    }
    select(accessor) {
        this.accessors.forEach((c) => {
            if (this.isSameGroup(c, accessor) && c[1] !== accessor) {
                c[1].writeValue(accessor.value);
            }
        });
    }
    isSameGroup(controlPair, accessor) {
        if (!controlPair[0].control) {
            return false;
        }
        return controlPair[0].control.root === accessor.control.control.root && controlPair[1].name === accessor.name;
    }
    static ɵfac = function RadioControlRegistry_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RadioControlRegistry)(); };
    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: RadioControlRegistry, factory: RadioControlRegistry.ɵfac, providedIn: 'root' });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadioControlRegistry, [{
        type: Injectable,
        args: [{
                providedIn: 'root'
            }]
    }], null, null); })();
/**
 * RadioButton is an extension to standard radio button element with theming.
 * @group Components
 */
class RadioButton extends BaseComponent {
    /**
     * Value of the radiobutton.
     * @group Props
     */
    value;
    /**
     * The name of the form control.
     * @group Props
     */
    formControlName;
    /**
     * Name of the radiobutton group.
     * @group Props
     */
    name;
    /**
     * When present, it specifies that the element should be disabled.
     * @group Props
     */
    disabled;
    /**
     * Specifies the input variant of the component.
     * @group Props
     */
    variant = 'outlined';
    /**
     * Defines the size of the component.
     * @group Props
     */
    size;
    /**
     * Index of the element in tabbing order.
     * @group Props
     */
    tabindex;
    /**
     * Identifier of the focus input to match a label defined for the component.
     * @group Props
     */
    inputId;
    /**
     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
     * @group Props
     */
    ariaLabelledBy;
    /**
     * Used to define a string that labels the input element.
     * @group Props
     */
    ariaLabel;
    /**
     * Inline style of the component.
     * @group Props
     */
    style;
    /**
     * Style class of the component.
     * @group Props
     */
    styleClass;
    /**
     * When present, it specifies that the component should automatically get focus on load.
     * @group Props
     */
    autofocus;
    /**
     * Allows to select a boolean value.
     * @group Props
     */
    binary;
    /**
     * Callback to invoke on radio button click.
     * @param {RadioButtonClickEvent} event - Custom click event.
     * @group Emits
     */
    onClick = new EventEmitter();
    /**
     * Callback to invoke when the receives focus.
     * @param {Event} event - Browser event.
     * @group Emits
     */
    onFocus = new EventEmitter();
    /**
     * Callback to invoke when the loses focus.
     * @param {Event} event - Browser event.
     * @group Emits
     */
    onBlur = new EventEmitter();
    inputViewChild;
    onModelChange = () => { };
    onModelTouched = () => { };
    checked;
    focused;
    control;
    _componentStyle = inject(RadioButtonStyle);
    injector = inject(Injector);
    registry = inject(RadioControlRegistry);
    ngOnInit() {
        super.ngOnInit();
        this.control = this.injector.get(NgControl);
        this.checkName();
        this.registry.add(this.control, this);
    }
    onChange(event) {
        if (!this.disabled) {
            this.select(event);
        }
    }
    select(event) {
        if (!this.disabled) {
            this.checked = true;
            this.onModelChange(this.value);
            this.registry.select(this);
            this.onClick.emit({ originalEvent: event, value: this.value });
        }
    }
    writeValue(value) {
        if (!this.binary) {
            this.checked = value == this.value;
        }
        else {
            this.checked = !!value;
        }
        if (this.inputViewChild && this.inputViewChild.nativeElement) {
            this.inputViewChild.nativeElement.checked = this.checked;
        }
        this.cd.markForCheck();
    }
    registerOnChange(fn) {
        this.onModelChange = fn;
    }
    registerOnTouched(fn) {
        this.onModelTouched = fn;
    }
    setDisabledState(val) {
        this.disabled = val;
        this.cd.markForCheck();
    }
    onInputFocus(event) {
        this.focused = true;
        this.onFocus.emit(event);
    }
    onInputBlur(event) {
        this.focused = false;
        this.onModelTouched();
        this.onBlur.emit(event);
    }
    /**
     * Applies focus to input field.
     * @group Method
     */
    focus() {
        this.inputViewChild.nativeElement.focus();
    }
    ngOnDestroy() {
        this.registry.remove(this);
        super.ngOnDestroy();
    }
    checkName() {
        if (this.name && this.formControlName && this.name !== this.formControlName) {
            this.throwNameError();
        }
        if (!this.name && this.formControlName) {
            this.name = this.formControlName;
        }
    }
    throwNameError() {
        throw new Error(`
          If you define both a name and a formControlName attribute on your radio button, their values
          must match. Ex: <p-radioButton formControlName="food" name="food"></p-radioButton>
        `);
    }
    static ɵfac = /*@__PURE__*/ (() => { let ɵRadioButton_BaseFactory; return function RadioButton_Factory(__ngFactoryType__) { return (ɵRadioButton_BaseFactory || (ɵRadioButton_BaseFactory = i0.ɵɵgetInheritedFactory(RadioButton)))(__ngFactoryType__ || RadioButton); }; })();
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadioButton, selectors: [["p-radioButton"], ["p-radiobutton"], ["p-radio-button"]], viewQuery: function RadioButton_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputViewChild = _t.first);
        } }, inputs: { value: "value", formControlName: "formControlName", name: "name", disabled: [2, "disabled", "disabled", booleanAttribute], variant: "variant", size: "size", tabindex: [2, "tabindex", "tabindex", numberAttribute], inputId: "inputId", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", autofocus: [2, "autofocus", "autofocus", booleanAttribute], binary: [2, "binary", "binary", booleanAttribute] }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, features: [i0.ɵɵProvidersFeature([RADIO_VALUE_ACCESSOR, RadioButtonStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 24, consts: [["input", ""], [3, "ngStyle", "ngClass"], ["type", "radio", 1, "p-radiobutton-input", 3, "focus", "blur", "change", "checked", "disabled", "value", "pAutoFocus"], [1, "p-radiobutton-box"], [1, "p-radiobutton-icon"]], template: function RadioButton_Template(rf, ctx) { if (rf & 1) {
            const _r1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementStart(0, "div", 1)(1, "input", 2, 0);
            i0.ɵɵlistener("focus", function RadioButton_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputFocus($event)); })("blur", function RadioButton_Template_input_blur_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputBlur($event)); })("change", function RadioButton_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onChange($event)); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(3, "div", 3);
            i0.ɵɵelement(4, "div", 4);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵclassMap(ctx.styleClass);
            i0.ɵɵproperty("ngStyle", ctx.style)("ngClass", i0.ɵɵpureFunction5(18, _c1, ctx.checked, ctx.disabled, ctx.variant === "filled" || ctx.config.inputStyle() === "filled" || ctx.config.inputVariant() === "filled", ctx.size === "small", ctx.size === "large"));
            i0.ɵɵattribute("data-pc-name", "radiobutton")("data-pc-section", "root");
            i0.ɵɵadvance();
            i0.ɵɵproperty("checked", ctx.checked)("disabled", ctx.disabled)("value", ctx.value)("pAutoFocus", ctx.autofocus);
            i0.ɵɵattribute("id", ctx.inputId)("name", ctx.name)("aria-labelledby", ctx.ariaLabelledBy)("aria-label", ctx.ariaLabel)("tabindex", ctx.tabindex)("aria-checked", ctx.checked);
            i0.ɵɵadvance(2);
            i0.ɵɵattribute("data-pc-section", "input");
            i0.ɵɵadvance();
            i0.ɵɵattribute("data-pc-section", "icon");
        } }, dependencies: [CommonModule, i1.NgClass, i1.NgStyle, AutoFocus, SharedModule], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadioButton, [{
        type: Component,
        args: [{
                selector: 'p-radioButton, p-radiobutton, p-radio-button',
                standalone: true,
                imports: [CommonModule, AutoFocus, SharedModule],
                template: `
        <div
            [ngStyle]="style"
            [ngClass]="{
                'p-radiobutton p-component': true,
                'p-radiobutton-checked': checked,
                'p-disabled': disabled,
                'p-variant-filled': variant === 'filled' || config.inputStyle() === 'filled' || config.inputVariant() === 'filled',
                'p-radiobutton-sm p-inputfield-sm': size === 'small',
                'p-radiobutton-lg p-inputfield-lg': size === 'large'
            }"
            [class]="styleClass"
            [attr.data-pc-name]="'radiobutton'"
            [attr.data-pc-section]="'root'"
        >
            <input
                #input
                [attr.id]="inputId"
                type="radio"
                class="p-radiobutton-input"
                [attr.name]="name"
                [checked]="checked"
                [disabled]="disabled"
                [value]="value"
                [attr.aria-labelledby]="ariaLabelledBy"
                [attr.aria-label]="ariaLabel"
                [attr.tabindex]="tabindex"
                [attr.aria-checked]="checked"
                (focus)="onInputFocus($event)"
                (blur)="onInputBlur($event)"
                (change)="onChange($event)"
                [pAutoFocus]="autofocus"
            />
            <div class="p-radiobutton-box" [attr.data-pc-section]="'input'">
                <div class="p-radiobutton-icon" [attr.data-pc-section]="'icon'"></div>
            </div>
        </div>
    `,
                providers: [RADIO_VALUE_ACCESSOR, RadioButtonStyle],
                changeDetection: ChangeDetectionStrategy.OnPush
            }]
    }], null, { value: [{
            type: Input
        }], formControlName: [{
            type: Input
        }], name: [{
            type: Input
        }], disabled: [{
            type: Input,
            args: [{ transform: booleanAttribute }]
        }], variant: [{
            type: Input
        }], size: [{
            type: Input
        }], tabindex: [{
            type: Input,
            args: [{ transform: numberAttribute }]
        }], inputId: [{
            type: Input
        }], ariaLabelledBy: [{
            type: Input
        }], ariaLabel: [{
            type: Input
        }], style: [{
            type: Input
        }], styleClass: [{
            type: Input
        }], autofocus: [{
            type: Input,
            args: [{ transform: booleanAttribute }]
        }], binary: [{
            type: Input,
            args: [{ transform: booleanAttribute }]
        }], onClick: [{
            type: Output
        }], onFocus: [{
            type: Output
        }], onBlur: [{
            type: Output
        }], inputViewChild: [{
            type: ViewChild,
            args: ['input']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RadioButton, { className: "RadioButton", filePath: "radiobutton.ts", lineNumber: 98 }); })();
class RadioButtonModule {
    static ɵfac = function RadioButtonModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RadioButtonModule)(); };
    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: RadioButtonModule });
    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [RadioButton, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadioButtonModule, [{
        type: NgModule,
        args: [{
                imports: [RadioButton, SharedModule],
                exports: [RadioButton, SharedModule]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(RadioButtonModule, { imports: [RadioButton, SharedModule], exports: [RadioButton, SharedModule] }); })();

/**
 * Generated bundle index. Do not edit.
 */

export { RADIO_VALUE_ACCESSOR, RadioButton, RadioButtonClasses, RadioButtonModule, RadioButtonStyle, RadioControlRegistry };
//# sourceMappingURL=primeng-radiobutton.mjs.map