diff --git a/packages/component-library-angular/src/radio-button/component.ts b/packages/component-library-angular/src/radio-button/component.ts index 36656555..f7700b4c 100644 --- a/packages/component-library-angular/src/radio-button/component.ts +++ b/packages/component-library-angular/src/radio-button/component.ts @@ -16,5 +16,13 @@ export class TilburgRadioButton { @Input() invalid: boolean = false; @Input() disabled: boolean = false; @Input() checked: boolean = false; + constructor() {} + mouseUp(event: MouseEvent) { + (event.target as HTMLInputElement).classList.remove('tilburg-radio-pressed'); + } + mouseDown(event: MouseEvent) { + (event.target as HTMLInputElement).classList.add('tilburg-radio-pressed'); + (event.target as HTMLInputElement).focus(); + } } diff --git a/packages/component-library-angular/src/radio-button/index.html b/packages/component-library-angular/src/radio-button/index.html index 15b19013..ab97265a 100644 --- a/packages/component-library-angular/src/radio-button/index.html +++ b/packages/component-library-angular/src/radio-button/index.html @@ -8,5 +8,7 @@ [attr.value]="value" [formControl]="control" [checked]="checked" + (mouseup)="mouseUp($event)" + (mousedown)="mouseDown($event)" utrecht-radio-button /> diff --git a/packages/component-library-angular/src/radio-button/index.scss b/packages/component-library-angular/src/radio-button/index.scss index be7188ce..43bb30fa 100644 --- a/packages/component-library-angular/src/radio-button/index.scss +++ b/packages/component-library-angular/src/radio-button/index.scss @@ -18,8 +18,15 @@ filter: brightness(90%); } - &:focus, - &:focus-visible { + &:focus-visible:not([aria-disabled="true"], :disabled, .tilburg-radio-pressed) { + background-color: var(--utrecht-radio-button-disabled-background-color); + border-color: var(--utrecht-form-control-focus-border-color); + border-width: 1px; + outline: dashed black thin; + } + + &:focus.tilburg-radio-pressed, + &:focus-visible:not(.tilburg-radio-pressed) { --utrecht-radio-button-color: black; --_utrecht-radio-button-color: black; --utrecht-radio-button-background-color: #e6f6ff; @@ -43,27 +50,20 @@ background-color: #e6f6ff; } - } - - &:invalid:not(:checked) { - background-color: #ffe1e0; - } - &:focus-visible:not([aria-disabled="true"], :disabled) { - background-color: var(--utrecht-radio-button-disabled-background-color); - border-color: var(--utrecht-form-control-focus-border-color); - border-width: 1px; - outline: dashed black thin; - } + &:focus:not([aria-disabled="true"], :disabled) { + background-color: var(--utrecht-radio-button-disabled-background-color); + border-color: var(--utrecht-form-control-focus-border-color); + border-width: 1px; + } - &:focus:not([aria-disabled="true"], :disabled) { - background-color: var(--utrecht-radio-button-disabled-background-color); - border-color: var(--utrecht-form-control-focus-border-color); - border-width: 1px; + &:invalid:not(:checked) { + background-color: #ffe1e0; + } } &:focus-visible:not([aria-disabled="true"], :disabled):checked, - &:focus:not([aria-disabled="true"], :disabled):checked { + &:focus:not([aria-disabled="true"], :disabled).tilburg-radio-pressed { --_utrecht-radio-button-color: black; } }