refactor: drop @Attribute decorators

libs/canvas/src/contexts/canvas-2d.ts

@@ -1,4 +1,4 @@
-import {Attribute, Directive, ElementRef, inject} from '@angular/core';
+import {Directive, ElementRef, inject, Input} from '@angular/core';
 
 import {WaDrawService} from '../services/draw.service';
 import {CANVAS_2D_CONTEXT} from '../tokens/canvas-2d-context';
@@ -9,19 +9,10 @@ import {CANVAS_2D_CONTEXT} from '../tokens/canvas-2d-context';
     providers: [
         {
             provide: CANVAS_2D_CONTEXT,
-            deps: [
-                ElementRef,
-                // TODO: find any solution for that
-                // [new Attribute('waOpaque')],
-                // [new Attribute('waDesynchronized')],
-            ],
-            useFactory: (
-                {nativeElement}: ElementRef<HTMLCanvasElement>,
-                opaque: string | null = nativeElement.getAttribute('waOpaque'),
-                desynchronized: string | null = nativeElement.getAttribute(
-                    'waDesynchronized',
-                ),
-            ): CanvasRenderingContext2D => {
+            useFactory: (): CanvasRenderingContext2D => {
+                const {nativeElement} = inject(ElementRef);
+                const opaque = nativeElement.getAttribute('waOpaque');
+                const desynchronized = nativeElement.getAttribute('waDesynchronized');
                 const context = nativeElement.getContext('2d', {
                     alpha: opaque === null,
                     desynchronized: desynchronized !== null,
@@ -41,10 +32,13 @@ export class WaCanvas2d {
     private readonly context = inject(CANVAS_2D_CONTEXT);
     private readonly method = inject(WaDrawService);
 
-    constructor(
-        @Attribute('opaque') _opaque: string | null,
-        @Attribute('desynchronized') _desynchronized: string | null,
-    ) {
+    @Input()
+    public waOpaque = '' as const;
+
+    @Input()
+    public waDesynchronized = '' as const;
+
+    constructor() {
         this.context.strokeStyle = 'transparent';
 
         this.method.call = (context) => {

libs/intersection-observer/src/directives/intersection-observer.directive.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @angular-eslint/no-attribute-decorator */
-import type {ElementRef, OnDestroy} from '@angular/core';
-import {Attribute, Directive, inject} from '@angular/core';
+import type {OnDestroy} from '@angular/core';
+import {Directive, inject} from '@angular/core';
 
 import {SafeObserver} from '../classes/safe-observer';
 import {INTERSECTION_ROOT} from '../tokens/intersection-root';
@@ -10,16 +10,17 @@ import {thresholdFactory} from '../utils/threshold-factory';
 @Directive({
     standalone: true,
     selector: '[waIntersectionObserver]',
+    inputs: ['waIntersectionRootMargin: margin', 'waIntersectionThreshold: threshold'],
     exportAs: 'IntersectionObserver',
 })
 export class WaIntersectionObserverDirective extends SafeObserver implements OnDestroy {
     private readonly callbacks = new Map<Element, IntersectionObserverCallback>();
 
-    constructor(
-        @Attribute('waIntersectionRootMargin') rootMargin: string | null,
-        @Attribute('waIntersectionThreshold') threshold: string | null,
-    ) {
-        const root = inject<ElementRef<Element>>(INTERSECTION_ROOT, {optional: true});
+    public margin = '';
+    public threshold = '';
+
+    constructor() {
+        const root = inject(INTERSECTION_ROOT, {optional: true});
 
         super(
             (entries) => {
@@ -31,8 +32,8 @@ export class WaIntersectionObserverDirective extends SafeObserver implements OnD
             },
             {
                 root: root?.nativeElement,
-                rootMargin: rootMarginFactory(rootMargin),
-                threshold: thresholdFactory(threshold),
+                rootMargin: rootMarginFactory(),
+                threshold: thresholdFactory(),
             },
         );
     }

libs/intersection-observer/src/module.ts

@@ -8,7 +8,7 @@ export const WaIntersectionObserver = [
     WaIntersectionObserverDirective,
     WaIntersectionObservee,
     WaIntersectionRoot,
-];
+] as const;
 
 /**
  * @deprecated: use {@link WaIntersectionObserver}

libs/intersection-observer/src/utils/root-margin-factory.ts

@@ -1,5 +1,10 @@
+import {ElementRef, inject} from '@angular/core';
+
 import {INTERSECTION_ROOT_MARGIN_DEFAULT} from '../tokens/intersection-root-margin';
 
-export function rootMarginFactory(rootMargin: string | null): string {
-    return rootMargin || INTERSECTION_ROOT_MARGIN_DEFAULT;
+export function rootMarginFactory(): string {
+    return (
+        inject(ElementRef).nativeElement.getAttribute('waIntersectionRootMargin') ||
+        INTERSECTION_ROOT_MARGIN_DEFAULT
+    );
 }

libs/intersection-observer/src/utils/threshold-factory.ts

@@ -1,5 +1,12 @@
+import {ElementRef, inject} from '@angular/core';
+
 import {INTERSECTION_THRESHOLD_DEFAULT} from '../tokens/intersection-threshold';
 
-export function thresholdFactory(threshold: string | null): number[] | number {
-    return threshold?.split(',').map(parseFloat) || INTERSECTION_THRESHOLD_DEFAULT;
+export function thresholdFactory(): number[] | number {
+    return (
+        inject(ElementRef)
+            .nativeElement.getAttribute('waIntersectionThreshold')
+            ?.split(',')
+            .map(parseFloat) || INTERSECTION_THRESHOLD_DEFAULT
+    );
 }

libs/mutation-observer/src/directives/mutation-observer.directive.ts

@@ -1,13 +1,6 @@
 /* eslint-disable @angular-eslint/no-attribute-decorator */
 import type {OnDestroy} from '@angular/core';
-import {
-    Attribute,
-    Directive,
-    ElementRef,
-    EventEmitter,
-    inject,
-    Output,
-} from '@angular/core';
+import {Directive, ElementRef, EventEmitter, inject, Input, Output} from '@angular/core';
 
 import {SafeObserver} from '../classes/safe-observer';
 import {MUTATION_OBSERVER_INIT} from '../tokens/mutation-observer-init';
@@ -19,7 +12,6 @@ import {mutationObserverInitFactory} from '../utils/mutation-observer-init-facto
     providers: [
         {
             provide: MUTATION_OBSERVER_INIT,
-            deps: [ElementRef],
             useFactory: mutationObserverInitFactory,
         },
     ],
@@ -29,18 +21,31 @@ export class WaMutationObserver extends SafeObserver implements OnDestroy {
     private readonly nativeElement: Node = inject(ElementRef).nativeElement;
     private readonly config = inject(MUTATION_OBSERVER_INIT);
 
+    @Input()
+    public attributeFilter = '';
+
+    @Input()
+    public attributeOldValue = '' as const;
+
+    @Input()
+    public attributes = '' as const;
+
+    @Input()
+    public characterData = '' as const;
+
+    @Input()
+    public characterDataOldValue = '' as const;
+
+    @Input()
+    public childList = '' as const;
+
+    @Input()
+    public subtree = '' as const;
+
     @Output()
     public readonly waMutationObserver = new EventEmitter<MutationRecord[]>();
 
-    constructor(
-        @Attribute('attributeFilter') _1: unknown,
-        @Attribute('attributeOldValue') _2: unknown,
-        @Attribute('attributes') _3: unknown,
-        @Attribute('characterData') _4: unknown,
-        @Attribute('characterDataOldValue') _5: unknown,
-        @Attribute('childList') _6: unknown,
-        @Attribute('subtree') _7: unknown,
-    ) {
+    constructor() {
         super((records) => {
             this.waMutationObserver.emit(records);
         });

libs/mutation-observer/src/utils/mutation-observer-init-factory.ts

@@ -1,11 +1,10 @@
-import type {ElementRef} from '@angular/core';
+import {ElementRef, inject} from '@angular/core';
 
 import {booleanAttribute} from './boolean-attribute';
 
-export function mutationObserverInitFactory({
-    nativeElement,
-}: ElementRef<Element>): MutationObserverInit {
-    const attributeFilter = nativeElement.getAttribute('attributeFilter');
+export function mutationObserverInitFactory(): MutationObserverInit {
+    const {nativeElement} = inject(ElementRef);
+    const attributeFilter: string | null = nativeElement.getAttribute('attributeFilter');
 
     return {
         attributeFilter: attributeFilter?.split(',').map((attr) => attr.trim()),

libs/resize-observer/src/directives/resize-observer.directive.ts

@@ -1,36 +1,27 @@
-import {Attribute, Directive, ElementRef, inject} from '@angular/core';
+import {Directive, ElementRef, inject} from '@angular/core';
 
 import {ResizeObserverService} from '../services/resize-observer.service';
 import {RESIZE_OPTION_BOX, RESIZE_OPTION_BOX_DEFAULT} from '../tokens/resize-option-box';
 
 @Directive({
     standalone: true,
     selector: '[waResizeObserver]',
+    inputs: ['waResizeBox: box'],
     outputs: ['waResizeObserver'],
     providers: [
         ResizeObserverService,
         {
             provide: RESIZE_OPTION_BOX,
-            deps: [ElementRef],
-            useFactory: ({
-                nativeElement,
-            }: ElementRef<Element>): ResizeObserverBoxOptions => {
-                const attribute = nativeElement.getAttribute(
-                    'waResizeBox',
-                ) as ResizeObserverBoxOptions;
-
-                return attribute || RESIZE_OPTION_BOX_DEFAULT;
-            },
+            useFactory: (): ResizeObserverBoxOptions =>
+                inject(ElementRef).nativeElement.getAttribute('waResizeBox') ||
+                RESIZE_OPTION_BOX_DEFAULT,
         },
     ],
 })
 export class WaResizeObserver {
     protected readonly waResizeObserver = inject(ResizeObserverService);
 
-    constructor(
-        // eslint-disable-next-line @angular-eslint/no-attribute-decorator
-        @Attribute('waResizeBox') protected readonly box: ResizeObserverBoxOptions,
-    ) {}
+    public box: ResizeObserverBoxOptions = RESIZE_OPTION_BOX_DEFAULT;
 }
 
 /**