Answer: 33 decoupling components

libs/decoupling/brain/src/index.ts

@@ -1,4 +1 @@
-export {
-  BtnDisabledDirective,
-  ButtonState,
-} from './lib/button-disabled.directive';
+export { BtnDisabledDirective } from './lib/button-disabled.directive';

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()',
   },

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<ButtonState>;
+}
+
+export const BUTTON_STATE_PROVIDER = new InjectionToken<ButtonStateProvider>(
+  'BUTTON_STATE_PROVIDER',
+);

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,16 +16,15 @@ 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);
 
   private rendererEffect = effect(() => {
     this.renderer.setAttribute(
       this.element.nativeElement,
       'data-state',
-      this.state(),
+      this.btnState.state(),
     );
   });
 }