Merge pull request #94 from DDtMM/18.x

Fixes #93

.eslintrc.json

@@ -6,8 +6,9 @@
         "*.ts"
       ],
       "extends": [
-        "plugin:@angular-eslint/recommended",
+        "eslint:recommended",
         "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "parserOptions": {
@@ -29,11 +30,9 @@
         "*.html"
       ],
       "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
-      "rules": {
-        "@typescript-eslint/no-inferrable-types": "off"
-      }
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
+      ]
     }
   ]
 }

package.json

@@ -13,13 +13,13 @@
     "test": "ng test signal-generators --code-coverage true",
     "test-coverage": "ng test signal-generators --code-coverage true --watch false",
     "generate-coverage-badge": "npx istanbul-badges-readme --coverageDir=\"./coverage/signal-generators\"",
-    "lint": "ng lint signal-generators",
+    "lint": "ng lint",
     "serve:ssr:demo": "ng build demo --verbose true --configuration development --watch true & node dist/demo/server/server.mjs"
   },
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
-    "@angular/cdk": "^17.2.2",
+    "@angular/cdk": "^18.0.0",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
@@ -43,11 +43,11 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.0.1",
-    "@angular-eslint/builder": "^17.2.1",
-    "@angular-eslint/eslint-plugin": "^17.2.1",
-    "@angular-eslint/eslint-plugin-template": "^17.2.1",
-    "@angular-eslint/schematics": "^17.2.1",
-    "@angular-eslint/template-parser": "^17.2.1",
+    "@angular-eslint/builder": "^17.5.1",
+    "@angular-eslint/eslint-plugin": "^17.5.1",
+    "@angular-eslint/eslint-plugin-template": "^17.5.1",
+    "@angular-eslint/schematics": "^17.5.1",
+    "@angular-eslint/template-parser": "^17.5.1",
     "@angular/cli": "^18.0.1",
     "@angular/compiler-cli": "^18.0.0",
     "@tailwindcss/container-queries": "^0.1.1",
@@ -60,7 +60,7 @@
     "browser-sync": "^3.0.0",
     "cpy-cli": "^5.0.0",
     "daisyui": "^4.11.1",
-    "eslint": "^9.3.0",
+    "eslint": "^8.57.0",
     "glob": "^10.4.1",
     "istanbul-badges-readme": "^1.9.0",
     "jasmine-core": "~5.1.2",

projects/demo/src/app/demos/tween-signal/interpolation-demo/interpolation-demo.component.ts

@@ -17,8 +17,6 @@ export class InterpolationDemoComponent {
     duration: 2000,
     interpolator: stringInterpolationFactory
   });
-  /** This is here as a workaround for an issue with tweenSignal that appears to only occur in StackBlitz. */
-  private readonly _ = effect(() => console.log(this.$stringInterpolationTween()));
 }
 
 /** Weights the interpolation so the second half takes longer than the first. */

projects/demo/src/app/demos/tween-signal/multiple-numbers-demo/multiple-numbers-demo.component.ts

@@ -13,6 +13,4 @@ import { EasingSelectorComponent } from '../shared/easing-selector.component';
 export class MultipleNumbersDemoComponent {
   readonly $easingFn = signal<EasingFn>(easeInBack);
   readonly $coords = tweenSignal([0, 0], { easing: this.$easingFn() });
-  /** This is here as a workaround for an issue with tweenSignal that appears to only occur in StackBlitz. */
-  private readonly _ = effect(() => console.log(this.$coords()));
 }

projects/demo/src/app/demos/tween-signal/simple-demo/simple-demo.component.ts

@@ -12,6 +12,4 @@ import { EasingSelectorComponent } from '../shared/easing-selector.component';
 export class SimpleDemoComponent {
   readonly $easingFn = signal<EasingFn>(easeInBack);
   readonly $sliderValue = tweenSignal(0, { easing: this.$easingFn() });
-  /** This is here as a workaround for an issue with tweenSignal that appears to only occur in StackBlitz. */
-  private readonly _ = effect(() => console.log(this.$sliderValue()));
 }

projects/demo/src/app/services/demos-sources.ts

@@ -1,10 +1,10 @@
 export default {
-  "tween-signal/simple-demo/simple-demo.component.ts": "import { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';\r\nimport { EasingFn, easeInBack , tweenSignal } from '@ddtmm/angular-signal-generators';\r\nimport { EasingSelectorComponent } from '../shared/easing-selector.component';\r\n\r\n@Component({\r\n  selector: 'app-simple-demo',\r\n  standalone: true,\r\n  imports: [EasingSelectorComponent],\r\n  templateUrl: './simple-demo.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SimpleDemoComponent {\r\n  readonly $easingFn = signal<EasingFn>(easeInBack);\r\n  readonly $sliderValue = tweenSignal(0, { easing: this.$easingFn() });\r\n  /** This is here as a workaround for an issue with tweenSignal that appears to only occur in StackBlitz. */\r\n  private readonly _ = effect(() => console.log(this.$sliderValue()));\r\n}\r\n",
+  "tween-signal/simple-demo/simple-demo.component.ts": "import { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';\r\nimport { EasingFn, easeInBack , tweenSignal } from '@ddtmm/angular-signal-generators';\r\nimport { EasingSelectorComponent } from '../shared/easing-selector.component';\r\n\r\n@Component({\r\n  selector: 'app-simple-demo',\r\n  standalone: true,\r\n  imports: [EasingSelectorComponent],\r\n  templateUrl: './simple-demo.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SimpleDemoComponent {\r\n  readonly $easingFn = signal<EasingFn>(easeInBack);\r\n  readonly $sliderValue = tweenSignal(0, { easing: this.$easingFn() });\r\n}\r\n",
   "tween-signal/simple-demo/simple-demo.component.html": "<div class=\"flex flex-row gap-3 items-center pb-3\">\r\n  <span>Easing Function</span>\r\n  <app-easing-selector [(easingFn)]=\"$easingFn\" (easingFnChange)=\"$sliderValue.setOptions({ easing: $easingFn() })\" />\r\n</div>\r\n<div class=\"flex flex-col w-full sm:flex-row items-center gap-3\">\r\n  <div class=\"flex-none\">\r\n    <div class=\"join\">\r\n      <button type=\"button\" class=\"btn btn-primary join-item\" (click)=\"$sliderValue.set(0)\">0%</button>\r\n      <button type=\"button\" class=\"btn btn-primary join-item\" (click)=\"$sliderValue.set(50)\">50%</button>\r\n      <button type=\"button\" class=\"btn btn-primary join-item\" (click)=\"$sliderValue.set(100)\">100%</button>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    <input class=\"range range-primary\" type=\"range\" [value]=\"$sliderValue()\" min=\"0\" max=\"100\" />\r\n  </div>\r\n</div>\r\n",
   "tween-signal/shared/easing-selector.component.ts": "import { ChangeDetectionStrategy, Component, computed, model } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { EasingFn, easeInBack, easings } from '@ddtmm/angular-signal-generators';\r\n\r\ntype EasingFnName = keyof typeof easings;\r\n\r\n@Component({\r\n  selector: 'app-easing-selector',\r\n  standalone: true,\r\n  imports: [FormsModule],\r\n  template: `\r\n  <select class=\"select select-primary select-sm\" [ngModel]=\"$easingFnName()\" (ngModelChange)=\"setEasingFn($event)\">\r\n    @for (easing of easingNames; track easing) {\r\n      <option [value]=\"easing\">{{easing}}</option>\r\n    }\r\n  </select>\r\n  `,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class EasingSelectorComponent {\r\n  readonly easingNames = Object.keys(easings) as EasingFnName[];\r\n  readonly $easingFn = model<EasingFn>(easeInBack, { alias: 'easingFn'});\r\n  readonly $easingFnName = computed<EasingFnName>(() => this.getEasingName(this.$easingFn()));\r\n\r\n  /** Retrieves the name of the easing function based on the provided easing function or returns \"linear\". */\r\n  getEasingName(easingFn: EasingFn): EasingFnName {\r\n    return Object.entries(easings).find(([, value]) => value === easingFn)?.[0] as EasingFnName || 'linear';\r\n  }\r\n\r\n  /** Sets $easingFn based on the provided easingFnName. */\r\n  setEasingFn(easingFnName: EasingFnName): void {\r\n    this.$easingFn.set(easings[easingFnName]);\r\n  }\r\n}\r\n",
-  "tween-signal/multiple-numbers-demo/multiple-numbers-demo.component.ts": "import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';\r\nimport { EasingFn, easeInBack, tweenSignal } from '@ddtmm/angular-signal-generators';\r\nimport { EasingSelectorComponent } from '../shared/easing-selector.component';\r\n\r\n@Component({\r\n  selector: 'app-multiple-numbers-demo',\r\n  standalone: true,\r\n  imports: [CommonModule, EasingSelectorComponent],\r\n  templateUrl: './multiple-numbers-demo.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class MultipleNumbersDemoComponent {\r\n  readonly $easingFn = signal<EasingFn>(easeInBack);\r\n  readonly $coords = tweenSignal([0, 0], { easing: this.$easingFn() });\r\n  /** This is here as a workaround for an issue with tweenSignal that appears to only occur in StackBlitz. */\r\n  private readonly _ = effect(() => console.log(this.$coords()));\r\n}\r\n",
+  "tween-signal/multiple-numbers-demo/multiple-numbers-demo.component.ts": "import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';\r\nimport { EasingFn, easeInBack, tweenSignal } from '@ddtmm/angular-signal-generators';\r\nimport { EasingSelectorComponent } from '../shared/easing-selector.component';\r\n\r\n@Component({\r\n  selector: 'app-multiple-numbers-demo',\r\n  standalone: true,\r\n  imports: [CommonModule, EasingSelectorComponent],\r\n  templateUrl: './multiple-numbers-demo.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class MultipleNumbersDemoComponent {\r\n  readonly $easingFn = signal<EasingFn>(easeInBack);\r\n  readonly $coords = tweenSignal([0, 0], { easing: this.$easingFn() });\r\n}\r\n",
   "tween-signal/multiple-numbers-demo/multiple-numbers-demo.component.html": "<p>\r\n  You can tween between array values of equal length.\r\n  Here the array is an set of coordinates that changes with each change of the control surface.\r\n</p>\r\n<div class=\"flex flex-row gap-3 items-center pb-3\">\r\n  <span>Easing Function</span>\r\n  <app-easing-selector [(easingFn)]=\"$easingFn\" (easingFnChange)=\"$coords.setOptions({ easing: $easingFn() })\" />\r\n</div>\r\n<div class=\"cursor-pointer w-36 h-36 bg-green-600 rounded-lg border-slate-900 border-solid border\"\r\n  (click)=\"$coords.set([$event.offsetX - 8, $event.offsetY - 8])\">\r\n  <div class=\"w-4 h-4 bg-slate-900 rounded-full\"\r\n    [ngStyle]=\"{ 'translate': $coords()[0] + 'px ' + $coords()[1] + 'px' }\">\r\n  </div>\r\n</div>\r\n",
-  "tween-signal/interpolation-demo/interpolation-demo.component.ts": "import { ChangeDetectionStrategy, Component, effect } from '@angular/core';\r\nimport { InterpolateStepFn, sequenceSignal, tweenSignal } from '@ddtmm/angular-signal-generators';\r\n\r\n@Component({\r\n  selector: 'app-interpolation-demo',\r\n  standalone: true,\r\n  templateUrl: './interpolation-demo.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class InterpolationDemoComponent {\r\n  readonly $stringInterpolationSequence = sequenceSignal([\r\n    'Press the button to see lame typing effect.',\r\n    'I should put something funny here!',\r\n    'Does anybody know what a typewriter is?'\r\n  ]);\r\n  readonly $stringInterpolationTween = tweenSignal(this.$stringInterpolationSequence, {\r\n    duration: 2000,\r\n    interpolator: stringInterpolationFactory\r\n  });\r\n  /** This is here as a workaround for an issue with tweenSignal that appears to only occur in StackBlitz. */\r\n  private readonly _ = effect(() => console.log(this.$stringInterpolationTween()));\r\n}\r\n\r\n/** Weights the interpolation so the second half takes longer than the first. */\r\nfunction stringInterpolationFactory(a: string, b: string): InterpolateStepFn<string> {\r\n  const midPoint = (a.length / Math.max(1, a.length + b.length)) * 0.25;\r\n\r\n  return (progress: number): string => {\r\n    switch (progress) {\r\n      case 0:\r\n        return a;\r\n      case 1:\r\n        return b;\r\n      default:\r\n        const aProgress = midPoint !== 0 ? Math.min(1, progress / midPoint) : 1;\r\n        const bProgress = midPoint !== 1 ? Math.max(0, (progress - midPoint) / (1 - midPoint)) : 1;\r\n        return a.slice(0, Math.floor((1 - aProgress) * a.length)) + b.slice(0, Math.floor(bProgress * b.length));\r\n    }\r\n  };\r\n}\r\n",
+  "tween-signal/interpolation-demo/interpolation-demo.component.ts": "import { ChangeDetectionStrategy, Component, effect } from '@angular/core';\r\nimport { InterpolateStepFn, sequenceSignal, tweenSignal } from '@ddtmm/angular-signal-generators';\r\n\r\n@Component({\r\n  selector: 'app-interpolation-demo',\r\n  standalone: true,\r\n  templateUrl: './interpolation-demo.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class InterpolationDemoComponent {\r\n  readonly $stringInterpolationSequence = sequenceSignal([\r\n    'Press the button to see lame typing effect.',\r\n    'I should put something funny here!',\r\n    'Does anybody know what a typewriter is?'\r\n  ]);\r\n  readonly $stringInterpolationTween = tweenSignal(this.$stringInterpolationSequence, {\r\n    duration: 2000,\r\n    interpolator: stringInterpolationFactory\r\n  });\r\n}\r\n\r\n/** Weights the interpolation so the second half takes longer than the first. */\r\nfunction stringInterpolationFactory(a: string, b: string): InterpolateStepFn<string> {\r\n  const midPoint = (a.length / Math.max(1, a.length + b.length)) * 0.25;\r\n\r\n  return (progress: number): string => {\r\n    switch (progress) {\r\n      case 0:\r\n        return a;\r\n      case 1:\r\n        return b;\r\n      default:\r\n        const aProgress = midPoint !== 0 ? Math.min(1, progress / midPoint) : 1;\r\n        const bProgress = midPoint !== 1 ? Math.max(0, (progress - midPoint) / (1 - midPoint)) : 1;\r\n        return a.slice(0, Math.floor((1 - aProgress) * a.length)) + b.slice(0, Math.floor(bProgress * b.length));\r\n    }\r\n  };\r\n}\r\n",
   "tween-signal/interpolation-demo/interpolation-demo.component.html": "<div class=\"flex flex-col items-center sm:items-start gap-3\">\r\n  <div>\r\n    You can tween between anything as long as there is an interpolation function that can translate progress into a value.\r\n  </div>\r\n  <div class=\"flex flex-row w-full gap-3 \">\r\n    <div>\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"$stringInterpolationSequence.next()\">Type</button>\r\n    </div>\r\n    <div class=\"chat chat-start grow\">\r\n      <div class=\"chat-bubble\" [ariaDescription]=\"$stringInterpolationSequence()\">\r\n        <span aria-hidden=\"true\">{{$stringInterpolationTween()}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
   "timer-signal/timer-signal-demo/timer-signal-demo.component.ts": "import { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, computed, effect, signal } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { timerSignal } from '@ddtmm/angular-signal-generators';\r\n\r\n@Component({\r\n  selector: 'app-timer-signal-demo',\r\n  standalone: true,\r\n  imports: [CommonModule, FormsModule],\r\n  templateUrl: './timer-signal-demo.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TimerSignalDemoComponent {\r\n\r\n  readonly $executions = signal(0);\r\n  readonly $intervalRange = signal(500);\r\n  readonly $mode = signal<'timeout' | 'interval'>('interval');\r\n  readonly $timer = computed(() => this.$mode() === 'timeout' ? this.$timeoutTimer : this.$intervalTimer);\r\n  readonly $timeoutRange = signal(500);\r\n  // timer signal and SSR don't mix.\r\n  readonly $intervalTimer = timerSignal(this.$timeoutRange, this.$intervalRange);\r\n  // timer signal and SSR don't mix.\r\n  readonly $timeoutTimer = timerSignal(this.$timeoutRange);\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      const timerValue = this.$timer()();\r\n      if (timerValue !== 0) {\r\n        this.$executions.update(x => ++x);\r\n      }\r\n    }, { allowSignalWrites: true })\r\n  }\r\n\r\n  toggleMode(): void {\r\n    this.$timer().pause();\r\n    this.$mode.update(x => x === 'interval' ? 'timeout' : 'interval');\r\n    this.$timer().restart();\r\n  }\r\n}\r\n",
   "timer-signal/timer-signal-demo/timer-signal-demo.component.html": "<div class=\"flex flex-col w-full sm:flex-row gap-3\">\r\n  <div>\r\n    <p>You controls to below to manipulate the timer.  The right-most button will toggle between interval and timeout modes.</p>\r\n    <div class=\"join\">\r\n      <button type=\"button\" class=\"btn btn-primary join-item\" (click)=\"$timer().pause()\" [disabled]=\"$timer().state() !== 'running'\">Pause</button>\r\n      <button type=\"button\" class=\"btn btn-primary join-item\" (click)=\"$timer().resume()\" [disabled]=\"$timer().state() !== 'paused'\">Resume</button>\r\n      <button type=\"button\" class=\"btn btn-primary join-item\" (click)=\"$timer().restart()\">Restart</button>\r\n      <div class=\"join-item divider\"></div>\r\n      <button type=\"button\" class=\"btn btn-secondary join-item\" (click)=\"toggleMode()\">{{ $mode() }} Mode</button>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex-grow w-full\">\r\n    <div>\r\n      <label class=\"label\">Timeout Time: {{$timeoutRange()}}</label>\r\n      <input class=\"range range-primary\" type=\"range\" min=\"0\" max=\"10000\" [(ngModel)]=\"$timeoutRange\" />\r\n    </div>\r\n    <div>\r\n      <label class=\"label\" >Interval Time: {{$intervalRange()}}</label>\r\n      <input class=\"range\" type=\"range\" min=\"0\" max=\"10000\" [(ngModel)]=\"$intervalRange\"\r\n        [ngClass]=\"$mode() === 'interval' ? 'range-primary' : 'range-accent'\"\r\n        [disabled]=\"$mode() === 'timeout'\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"flex flex-col w-full sm:flex-row gap-3 pt-3\">\r\n  <div class=\"flex-grow card card-compact shadow-lg bg-base-100\">\r\n    <div class=\"card-body flex flex-col items-center\">\r\n      <div>Ticks since Restart</div>\r\n      <div class=\"h-7 text-lg\">{{$timer()()}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex-grow card card-compact shadow-lg bg-base-100\">\r\n    <div class=\"card-body flex flex-col items-center\">\r\n      <div>Total Ticks</div>\r\n      <div class=\"h-7 text-lg\">{{$executions()}}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",