Theming | Add radioButton, remove label and labelStyleClass, fixes #1…

…6043

src/app/components/radiobutton/radiobutton.ts

@@ -1,9 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Injector, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, booleanAttribute, forwardRef, numberAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Injector, Input, NgModule, OnDestroy, OnInit, Output, ViewChild, booleanAttribute, forwardRef, inject, numberAttribute } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { Nullable } from 'primeng/ts-helpers';
 import { AutoFocusModule } from 'primeng/autofocus';
-
+import { BaseComponent } from 'primeng/basecomponent';
+import { RadioButtonStyle } from './style/radiobuttonstyle';
 import { RadioButtonClickEvent } from './radiobutton.interface';
 import { PrimeNGConfig } from 'primeng/api';
 
@@ -57,56 +58,41 @@ export class RadioControlRegistry {
             [ngClass]="{
                 'p-radiobutton p-component': true,
                 'p-radiobutton-checked': checked,
-                'p-radiobutton-disabled': disabled,
-                'p-radiobutton-focused': focused,
+                'p-disabled': disabled,
                 'p-variant-filled': variant === 'filled' || config.inputStyle() === 'filled'
             }"
             [class]="styleClass"
             [attr.data-pc-name]="'radiobutton'"
             [attr.data-pc-section]="'root'"
-            (click)="handleClick($event, input, true)"
         >
-            <div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'">
-                <input
-                    #input
-                    [attr.id]="inputId"
-                    type="radio"
-                    [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)"
-                    [attr.data-pc-section]="'hiddenInput'"
-                    pAutoFocus
-                    [autofocus]="autofocus"
-                />
-            </div>
-            <div [ngClass]="{ 'p-radiobutton-box': true, 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }" [attr.data-pc-section]="'input'">
-                <span class="p-radiobutton-icon" [attr.data-pc-section]="'icon'"></span>
+            <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]="autofocus"
+            />
+            <div class="p-radiobutton-box" [attr.data-pc-section]="'input'">
+                <div class="p-radiobutton-icon" [attr.data-pc-section]="'icon'"></div>
             </div>
         </div>
-        <label
-            (click)="select($event)"
-            [class]="labelStyleClass"
-            [ngClass]="{ 'p-radiobutton-label': true, 'p-radiobutton-label-active': input.checked, 'p-disabled': disabled, 'p-radiobutton-label-focus': focused }"
-            *ngIf="label"
-            [attr.for]="inputId"
-            [attr.data-pc-section]="'label'"
-            >{{ label }}</label
-        >
     `,
-    providers: [RADIO_VALUE_ACCESSOR],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    host: {
-        class: 'p-element'
-    }
+    providers: [RADIO_VALUE_ACCESSOR, RadioButtonStyle],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy {
+export class RadioButton extends BaseComponent implements ControlValueAccessor, OnInit, OnDestroy {
     /**
      * Value of the radiobutton.
      * @group Props
@@ -127,11 +113,6 @@ export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy {
      * @group Props
      */
     @Input({ transform: booleanAttribute }) disabled: boolean | undefined;
-    /**
-     * Label of the radiobutton.
-     * @group Props
-     */
-    @Input() label: string | undefined;
     /**
      * Specifies the input variant of the component.
      * @group Props
@@ -167,11 +148,6 @@ export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy {
      * @group Props
      */
     @Input() styleClass: string | undefined;
-    /**
-     * Style class of the label.
-     * @group Props
-     */
-    @Input() labelStyleClass: string | undefined;
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @group Props
@@ -208,36 +184,27 @@ export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy {
 
     control: Nullable<NgControl>;
 
-    constructor(
-        public cd: ChangeDetectorRef,
-        private injector: Injector,
-        private registry: RadioControlRegistry,
-        public config: PrimeNGConfig
-    ) {}
+    _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);
     }
 
-    handleClick(event: Event, radioButton: HTMLElement, focus: boolean) {
-        event.preventDefault();
-
-        if (this.disabled) {
-            return;
-        }
-
-        this.select(event);
-
-        if (focus) {
-            radioButton.focus();
+    onChange(event) {
+        if (!this.disabled) {
+            this.select(event);
         }
     }
 
     select(event: Event) {
         if (!this.disabled) {
-            this.inputViewChild.nativeElement.checked = true;
             this.checked = true;
             this.onModelChange(this.value);
             this.registry.select(this);
@@ -289,6 +256,7 @@ export class RadioButton implements ControlValueAccessor, OnInit, OnDestroy {
 
     ngOnDestroy() {
         this.registry.remove(this);
+        super.ngOnDestroy();
     }
 
     private checkName() {

src/app/components/radiobutton/style/radiobuttonstyle.ts

@@ -0,0 +1,145 @@
+import { Injectable } from '@angular/core';
+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;
+    left: 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')};
+}
+`;
+
+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.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
+        }
+    ],
+    box: 'p-radiobutton-box',
+    input: 'p-radiobutton-input',
+    icon: 'p-radiobutton-icon'
+};
+
+@Injectable()
+export class RadioButtonStyle extends BaseStyle {
+    name = 'radiobutton';
+
+    theme = theme;
+
+    classes = classes;
+}

src/app/showcase/doc/radiobutton/invaliddoc.ts

@@ -8,13 +8,13 @@ import { Code } from '@domain/code';
             <p>Invalid state style is added using the <i>ng-invalid</i> and <i>ng-dirty</i> class to indicate a failed validation.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-radioButton class="ng-invalid ng-dirty" [(ngModel)]="checked" />
+            <p-radioButton styleClass="ng-invalid ng-dirty" [(ngModel)]="checked" />
         </div>
         <app-code [code]="code" selector="radio-button-invalid-demo"></app-code>
     `
 })
 export class InvalidDoc {
-    checked: any;
+    checked: any = false;
 
     code: Code = {
         basic: `<p-radioButton class="ng-invalid ng-dirty" />`,

src/assets/showcase/styles/primeng.css

@@ -1,5 +1,4 @@
 @import '../../../app/components/common/common.css';
 @import '../../../app/components/password/password.css';
-@import '../../../app/components/radiobutton/radiobutton.css';
 @import '../../../app/components/ripple/ripple.css';
 @import '../../../app/components/tooltip/tooltip.css';