feat(angular): move to standalone components and directives

Author: arnobl

projects/interacto-angular/src/lib/components/dwell-spring/dwell-spring.component.spec.ts

@@ -8,7 +8,7 @@ describe('DwellSpringComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [DwellSpringComponent]
+      imports: [DwellSpringComponent]
     });
     fixture = TestBed.createComponent(DwellSpringComponent);
     component = fixture.componentInstance;

projects/interacto-angular/src/lib/components/dwell-spring/dwell-spring.component.ts

@@ -3,7 +3,8 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 @Component({
   selector: 'io-dwell-spring',
   templateUrl: './dwell-spring.component.html',
-  styleUrls: ['./dwell-spring.component.css']
+  styleUrls: ['./dwell-spring.component.css'],
+  standalone: true
 })
 export class DwellSpringComponent {
   @ViewChild('handle')

projects/interacto-angular/src/lib/components/linear-history/linear-history.component.spec.ts

@@ -1,16 +1,15 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {LinearHistoryComponent} from './linear-history.component';
-import {InteractoModule} from '../../interacto-angular.module';
+import {TestingInteractoModule} from '../../testing-interacto-angular.module';
 
 describe('LinearHistoryComponent', () => {
   let component: LinearHistoryComponent;
   let fixture: ComponentFixture<LinearHistoryComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [LinearHistoryComponent],
-      imports: [InteractoModule]
+      imports: [TestingInteractoModule, LinearHistoryComponent]
     })
       .compileComponents();
   });

projects/interacto-angular/src/lib/components/linear-history/linear-history.component.ts

@@ -1,10 +1,19 @@
 import {AfterViewInit, Component, ElementRef, Input, Optional, ViewChild} from '@angular/core';
 import {Bindings, RedoNTimes, Undoable, UndoHistory, UndoHistoryBase, UndoNTimes} from 'interacto';
+import {CommonModule} from '@angular/common';
+import {UndoBinderDirective} from '../../directives/undo-binder.directive';
+import {RedoBinderDirective} from '../../directives/redo-binder.directive';
 
 @Component({
   selector: 'io-linear-history',
   templateUrl: './linear-history.component.html',
-  styleUrls: ['./linear-history.component.css']
+  styleUrls: ['./linear-history.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    UndoBinderDirective,
+    RedoBinderDirective
+  ]
 })
 export class LinearHistoryComponent implements AfterViewInit {
   @ViewChild('undoButtonContainer')

projects/interacto-angular/src/lib/components/tree-history/tree-history.component.ts

@@ -1,4 +1,4 @@
-import type {KeyValue} from '@angular/common';
+import {CommonModule, KeyValue} from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -10,6 +10,11 @@ import {
 } from '@angular/core';
 import { Binding, PartialPointTypedBinder, PartialTapsTypedBinder, PartialTouchTypedBinder, TreeUndoHistory, UndoableSnapshot, UndoableTreeNode } from 'interacto';
 import { Subscription } from "rxjs";
+import {UndoBinderDirective} from '../../directives/undo-binder.directive';
+import {RedoBinderDirective} from '../../directives/redo-binder.directive';
+import {ClickBinderDirective} from '../../directives/click-binder.directive';
+import {TapsBinderDirective} from '../../directives/taps-binder.directive';
+import {LongTouchBinderDirective} from '../../directives/long-touch-binder.directive';
 
 /**
  * The Angular component for display a tree-based undo/redo history
@@ -18,6 +23,15 @@ import { Subscription } from "rxjs";
   selector: 'io-tree-history',
   templateUrl: './tree-history.component.html',
   styleUrls: ['./tree-history.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    UndoBinderDirective,
+    RedoBinderDirective,
+    ClickBinderDirective,
+    TapsBinderDirective,
+    LongTouchBinderDirective
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TreeHistoryComponent implements OnDestroy, AfterViewInit {

projects/interacto-angular/src/lib/directives/anchor-binder.directive.ts

@@ -4,7 +4,8 @@ import {InteractoBinderDirective} from './interacto-binder-directive';
 import {OnDynamicDirective} from './on-dynamic.directive';
 
 @Directive({
-  selector: 'a:[ioAnchor],[ioAnchor] [ioOnDynamic]'
+  selector: 'a:[ioAnchor],[ioAnchor] [ioOnDynamic]',
+  standalone: true
 })
 export class AnchorBinderDirective extends InteractoBinderDirective<HTMLAnchorElement, PartialAnchorTypedBinder> {
   @Output()

projects/interacto-angular/src/lib/directives/button-binder.directive.spec.ts

@@ -20,7 +20,9 @@ let ctx: BindingsContext;
     <div id="b2" ioOnDynamic [ioButton]="m2"><button id="b4">B</button></div>
     <button id="b3" [ioButton] (buttonBinder)="m3($event, 123)">b3</button>
     <button ioButton>Bad</button>
-    <button [ioButton]="rr">Bad2</button>`
+    <button [ioButton]="rr">Bad2</button>`,
+  standalone: true,
+  imports: [ButtonBinderDirective, OnDynamicDirective]
 })
 class TestComponent {
   public param: number = 0;
@@ -53,8 +55,7 @@ class TestComponent {
 describe('button directive', () => {
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      imports: [TestingInteractoModule],
-      declarations: [ButtonBinderDirective, OnDynamicDirective, TestComponent]
+      imports: [TestingInteractoModule, ButtonBinderDirective, OnDynamicDirective, TestComponent]
     }).createComponent(TestComponent);
 
     fixture.detectChanges();

projects/interacto-angular/src/lib/directives/button-binder.directive.ts

@@ -4,7 +4,8 @@ import {InteractoBinderDirective} from './interacto-binder-directive';
 import {OnDynamicDirective} from './on-dynamic.directive';
 
 @Directive({
-  selector: 'button:[ioButton],[ioButton] [ioOnDynamic]'
+  selector: 'button:[ioButton],[ioButton] [ioOnDynamic]',
+  standalone: true
 })
 export class ButtonBinderDirective extends InteractoBinderDirective<HTMLButtonElement | HTMLElement, PartialButtonTypedBinder> {
   @Output()

projects/interacto-angular/src/lib/directives/click-binder.directive.spec.ts

@@ -22,7 +22,9 @@ let ctx: BindingsContext;
     <div id="b" ioOnDynamic [ioClick]="methodDyn"><b id="b1">B</b></div>
     <b id="b2" [ioClick] (clickBinder)="methodParam($event, 'foo')"></b>
     <b ioClick>bad</b>
-    <b [ioClick]="fff">bad2</b>`
+    <b [ioClick]="fff">bad2</b>`,
+  standalone: true,
+  imports: [ClickBinderDirective, OnDynamicDirective]
 })
 class TestComponent {
   public param: string = "";
@@ -62,8 +64,7 @@ class TestComponent {
 describe('click directive', () => {
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      imports: [TestingInteractoModule],
-      declarations: [ClickBinderDirective, OnDynamicDirective, TestComponent]
+      imports: [TestingInteractoModule, ClickBinderDirective, OnDynamicDirective, TestComponent]
     }).createComponent(TestComponent);
 
     fixture.detectChanges();

projects/interacto-angular/src/lib/directives/click-binder.directive.ts

@@ -4,7 +4,8 @@ import {InteractoBinderDirective} from './interacto-binder-directive';
 import {OnDynamicDirective} from './on-dynamic.directive';
 
 @Directive({
-  selector: '[ioClick]'
+  selector: '[ioClick]',
+  standalone: true
 })
 export class ClickBinderDirective extends InteractoBinderDirective<HTMLElement, PartialPointTypedBinder> implements AfterContentInit {
   @Output()