diff --git a/libs/decoupling/brain/src/index.ts b/libs/decoupling/brain/src/index.ts index 2bf3f9a23..8eb5b50e1 100644 --- a/libs/decoupling/brain/src/index.ts +++ b/libs/decoupling/brain/src/index.ts @@ -1,4 +1 @@ -export { - BtnDisabledDirective, - ButtonState, -} from './lib/button-disabled.directive'; +export { BtnDisabledDirective } from './lib/button-disabled.directive'; diff --git a/libs/decoupling/brain/src/lib/button-disabled.directive.ts b/libs/decoupling/brain/src/lib/button-disabled.directive.ts index e98b53477..49b253d0b 100644 --- a/libs/decoupling/brain/src/lib/button-disabled.directive.ts +++ b/libs/decoupling/brain/src/lib/button-disabled.directive.ts @@ -1,10 +1,18 @@ /* eslint-disable @angular-eslint/directive-selector */ +import { + BUTTON_STATE_PROVIDER, + ButtonState, +} from '@angular-challenges/decoupling/core'; import { Directive, signal, WritableSignal } from '@angular/core'; -export type ButtonState = 'enabled' | 'disabled'; - @Directive({ selector: 'button[btnDisabled]', + providers: [ + { + provide: BUTTON_STATE_PROVIDER, + useExisting: BtnDisabledDirective, + }, + ], host: { '(click)': 'toggleState()', }, diff --git a/libs/decoupling/core/src/index.ts b/libs/decoupling/core/src/index.ts index 5d71ecd07..a80459f40 100644 --- a/libs/decoupling/core/src/index.ts +++ b/libs/decoupling/core/src/index.ts @@ -1 +1,13 @@ +import { InjectionToken, Signal } from '@angular/core'; + export const DECOUPLING_CORE = 'DECOUPLING_CORE'; + +export type ButtonState = 'enabled' | 'disabled'; + +export interface ButtonStateProvider { + state: Signal; +} + +export const BUTTON_STATE_PROVIDER = new InjectionToken( + 'BUTTON_STATE_PROVIDER', +); diff --git a/libs/decoupling/helmet/src/lib/btn-style.directive.ts b/libs/decoupling/helmet/src/lib/btn-style.directive.ts index f3adf6cd3..2e0df7fdf 100644 --- a/libs/decoupling/helmet/src/lib/btn-style.directive.ts +++ b/libs/decoupling/helmet/src/lib/btn-style.directive.ts @@ -1,12 +1,11 @@ /* eslint-disable @angular-eslint/directive-selector */ -import { BtnDisabledDirective } from '@angular-challenges/decoupling/brain'; +import { BUTTON_STATE_PROVIDER } from '@angular-challenges/decoupling/core'; import { Directive, effect, ElementRef, inject, Renderer2, - signal, } from '@angular/core'; @Directive({ @@ -17,8 +16,7 @@ import { }, }) export class BtnHelmetDirective { - btnState = inject(BtnDisabledDirective, { self: true }); - public state = this.btnState?.state ?? signal('disabled').asReadonly(); + private btnState = inject(BUTTON_STATE_PROVIDER, { self: true }); private renderer = inject(Renderer2); private element = inject(ElementRef); @@ -26,7 +24,7 @@ export class BtnHelmetDirective { this.renderer.setAttribute( this.element.nativeElement, 'data-state', - this.state(), + this.btnState.state(), ); }); }