primeng
Version:
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
566 lines (540 loc) • 20.6 kB
JavaScript
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, ViewChild, Output, Input, ChangeDetectionStrategy, Component, 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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioButtonStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioButtonStyle, decorators: [{
type: Injectable
}] });
/**
*
* 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 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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioControlRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioControlRegistry, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioControlRegistry, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
/**
* 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;
/**
* 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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: RadioButton, isStandalone: true, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: { value: "value", formControlName: "formControlName", name: "name", disabled: ["disabled", "disabled", booleanAttribute], variant: "variant", size: "size", tabindex: ["tabindex", "tabindex", numberAttribute], inputId: "inputId", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", autofocus: ["autofocus", "autofocus", booleanAttribute], binary: ["binary", "binary", booleanAttribute] }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [RADIO_VALUE_ACCESSOR, RadioButtonStyle], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, 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>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioButton, decorators: [{
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
}]
}], propDecorators: { 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']
}] } });
class RadioButtonModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: RadioButtonModule, imports: [RadioButton, SharedModule], exports: [RadioButton, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioButtonModule, imports: [RadioButton, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: RadioButtonModule, decorators: [{
type: NgModule,
args: [{
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