feat(challenge33): add new challenge about decoupling

libs/decoupling/helmet/src/index.ts

@@ -0,0 +1 @@
+export { BtnHelmetDirective } from './lib/btn-style.directive';

libs/decoupling/helmet/src/lib/btn-style.directive.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { BtnDisabledDirective } from '@angular-challenges/decoupling/brain';
+import {
+  Directive,
+  ElementRef,
+  Renderer2,
+  effect,
+  inject,
+  signal,
+} from '@angular/core';
+
+@Directive({
+  selector: 'button[hlm]',
+  standalone: true,
+  host: {
+    class:
+      'border border-black p-4 rounded-md bg-white data-[state=disabled]:bg-gray-400 data-[state=disabled]:text-white',
+  },
+})
+export class BtnHelmetDirective {
+  btnState = inject(BtnDisabledDirective, { self: true });
+  public state = this.btnState?.state ?? signal('disabled').asReadonly();
+  private renderer = inject(Renderer2);
+  private element = inject(ElementRef);
+
+  private rendererEffect = effect(() => {
+    this.renderer.setAttribute(
+      this.element.nativeElement,
+      'data-state',
+      this.state()
+    );
+  });
+}

libs/decoupling/helmet/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';