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
359 lines (353 loc) • 14.9 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, forwardRef, input, EventEmitter, computed, 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 { BaseEditableHolder } from 'primeng/baseeditableholder';
import { style } from '@primeuix/styles/radiobutton';
import { BaseStyle } from 'primeng/base';
const theme = /*css*/ `
${style}
/* For PrimeNG */
p-radioButton.ng-invalid.ng-dirty .p-radiobutton-box,
p-radio-button.ng-invalid.ng-dirty .p-radiobutton-box,
p-radiobutton.ng-invalid.ng-dirty .p-radiobutton-box {
border-color: dt('radiobutton.invalid.border.color');
}
`;
const classes = {
root: ({ instance }) => [
'p-radiobutton p-component',
{
'p-radiobutton-checked': instance.checked,
'p-disabled': instance.$disabled(),
'p-invalid': instance.invalid(),
'p-variant-filled': instance.$variant() === 'filled',
'p-radiobutton-sm p-inputfield-sm': instance.size() === 'small',
'p-radiobutton-lg p-inputfield-lg': instance.size() === 'large'
}
],
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: "20.1.3", ngImport: i0, type: RadioButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioButtonStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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: "20.1.3", ngImport: i0, type: RadioControlRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioControlRegistry, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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 BaseEditableHolder {
/**
* Value of the radiobutton.
* @group Props
*/
value;
/**
* 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;
/**
* Style class of the component.
* @deprecated since v20.0.0, use `class` instead.
* @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;
/**
* Specifies the input variant of the component.
* @defaultValue undefined
* @group Props
*/
variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
/**
* Specifies the size of the component.
* @defaultValue undefined
* @group Props
*/
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
/**
* 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;
$variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), ...(ngDevMode ? [{ debugName: "$variant" }] : []));
checked;
focused;
control;
_componentStyle = inject(RadioButtonStyle);
injector = inject(Injector);
registry = inject(RadioControlRegistry);
ngOnInit() {
super.ngOnInit();
this.control = this.injector.get(NgControl);
this.registry.add(this.control, this);
}
onChange(event) {
if (!this.$disabled()) {
this.select(event);
}
}
select(event) {
if (!this.$disabled()) {
this.checked = true;
this.writeModelValue(this.checked);
this.onModelChange(this.value);
this.registry.select(this);
this.onClick.emit({ originalEvent: event, value: this.value });
}
}
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();
}
/**
* @override
*
* @see {@link BaseEditableHolder.writeControlValue}
* Writes the value to the control.
*/
writeControlValue(value, setModelValue) {
this.checked = !this.binary ? value == this.value : !!value;
setModelValue(this.checked);
this.cd.markForCheck();
}
ngOnDestroy() {
this.registry.remove(this);
super.ngOnDestroy();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: RadioButton, isStandalone: true, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "attr.data-pc-name": "'radiobutton'", "attr.data-pc-section": "'root'", "class": "cx('root')" } }, providers: [RADIO_VALUE_ACCESSOR, RadioButtonStyle], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<input
#input
[attr.id]="inputId"
type="radio"
[class]="cx('input')"
[attr.name]="name()"
[attr.required]="required() ? '' : undefined"
[attr.disabled]="$disabled() ? '' : undefined"
[checked]="checked"
[attr.value]="modelValue()"
[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]="cx('box')" [attr.data-pc-section]="'input'">
<div [class]="cx('icon')" [attr.data-pc-section]="'icon'"></div>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioButton, decorators: [{
type: Component,
args: [{
selector: 'p-radioButton, p-radiobutton, p-radio-button',
standalone: true,
imports: [CommonModule, AutoFocus, SharedModule],
template: `
<input
#input
[attr.id]="inputId"
type="radio"
[class]="cx('input')"
[attr.name]="name()"
[attr.required]="required() ? '' : undefined"
[attr.disabled]="$disabled() ? '' : undefined"
[checked]="checked"
[attr.value]="modelValue()"
[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]="cx('box')" [attr.data-pc-section]="'input'">
<div [class]="cx('icon')" [attr.data-pc-section]="'icon'"></div>
</div>
`,
providers: [RADIO_VALUE_ACCESSOR, RadioButtonStyle],
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[attr.data-pc-name]': "'radiobutton'",
'[attr.data-pc-section]': "'root'",
'[class]': "cx('root')"
}
}]
}], propDecorators: { value: [{
type: Input
}], tabindex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], inputId: [{
type: Input
}], ariaLabelledBy: [{
type: Input
}], ariaLabel: [{
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: "20.1.3", ngImport: i0, type: RadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: RadioButtonModule, imports: [RadioButton, SharedModule], exports: [RadioButton, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioButtonModule, imports: [RadioButton, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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