Deploying to gh-pages from @ 1b8542f 🚀

.cache/storybook/default/dev-server/storybook-0c9aba2732f8798ca2ae104c09855acc

@@ -1 +1 @@
-{"key":"lastEvents","content":{"boot":{"body":{"eventType":"boot","eventId":"bDdpm69Smsg83s94mdrDI","sessionId":"ejzqN-RX2tPwkkVGsRg6k","payload":{"eventType":"build"},"context":{"inCI":true,"platform":"Linux","nodeVersion":"20.18.1","cliVersion":"8.4.7"}},"timestamp":1737635301248}}}
+{"key":"lastEvents","content":{"boot":{"body":{"eventType":"boot","eventId":"xzBblSuaGpfxPh5syXgkh","sessionId":"eEyMTirvnhJFc1BiDmI8G","payload":{"eventType":"build"},"context":{"inCI":true,"platform":"Linux","nodeVersion":"20.18.1","cliVersion":"8.4.7"}},"timestamp":1737823355211}}}

.cache/storybook/default/dev-server/storybook-21d6f40cfb511982e4424e0e250a9557

@@ -1 +1 @@
-{"key":"session","content":{"id":"ejzqN-RX2tPwkkVGsRg6k","lastUsed":1737635301245}}
+{"key":"session","content":{"id":"eEyMTirvnhJFc1BiDmI8G","lastUsed":1737823355195}}

app/design/organisms/image-carousel-card/image-carousel-card.component.html

@@ -1,4 +1,4 @@
-@switch (state) {
+@switch (state()) {
   @case ("DISPLAY") {
     <ng-container *ngTemplateOutlet="displayState" />
   }
@@ -15,14 +15,14 @@
 
 <ng-template #displayState>
   <app-image-carousel
-    [images]="images"
-    [serverUrl]="serverUrl"
-    [canDelete]="canDelete"
-    [canUpdate]="canUpdate"
-    [canCreate]="canCreate"
-    [currentSlideIndex]="currentImageIndex"
-    (deleteImage)="changeState(currentImage, 'DELETE')"
-    (updateImage)="changeState(currentImage, 'UPDATE')"
+    [images]="images()"
+    [serverUrl]="serverUrl()"
+    [canDelete]="canDelete()"
+    [canUpdate]="canUpdate()"
+    [canCreate]="canCreate()"
+    [currentSlideIndex]="currentImageIndex()"
+    (deleteImage)="changeState(currentImage(), 'DELETE')"
+    (updateImage)="changeState(currentImage(), 'UPDATE')"
     (createImage)="changeState({}, 'CREATE')"
     (slide)="onSlide($event)"
   ></app-image-carousel>
@@ -33,7 +33,7 @@
     <h5 class="form-card__heading">
       <app-icon [icon]="'pencil'"></app-icon>
       Updating:
-      @if (isLoading) {
+      @if (isLoading()) {
         <app-spinner />
       }
     </h5>
@@ -42,14 +42,14 @@ <h5 class="form-card__heading">
       <img
         title="None"
         class="form-card__image"
-        [src]="serverUrl + currentImage.image"
+        [src]="serverUrl() + currentImage().image"
         alt=""
       />
     </div>
 
     <app-form
       class="form-card__form"
-      [model]="userModel"
+      [model]="userModel()"
       [fields]="updateFields"
       [enctype]="'multipart/form-data'"
       [cancelButtonType]="'DARK'"
@@ -64,7 +64,7 @@ <h5 class="form-card__heading">
     <h5 class="form-card__heading">
       <app-icon [icon]="'plus-square'" />
       Upload new image
-      @if (isLoading) {
+      @if (isLoading()) {
         <app-spinner />
       }
     </h5>
@@ -86,7 +86,7 @@ <h5 class="form-card__heading">
     <h5 class="form-card__heading">
       <app-icon [icon]="'trash'" />
       Deleting:
-      @if (isLoading) {
+      @if (isLoading()) {
         <app-spinner />
       }
     </h5>
@@ -95,7 +95,7 @@ <h5 class="form-card__heading">
       <img
         title="None"
         class="form-card__image"
-        [src]="serverUrl + currentImage.image"
+        [src]="serverUrl() + currentImage().image"
         alt="image to delete"
       />
     </div>

app/design/organisms/image-carousel-card/image-carousel-card.component.ts

@@ -1,11 +1,12 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
+  ChangeDetectionStrategy,
   Component,
+  computed,
   EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
+  input,
   Output,
+  signal,
 } from '@angular/core';
 import { NgbSlideEvent } from '@ng-bootstrap/ng-bootstrap';
 import { FormlyFieldConfig } from '@ngx-formly/core';
@@ -32,24 +33,25 @@ type State = 'DISPLAY' | 'DELETE' | 'UPDATE' | 'UPDATE_OUTDATED' | 'CREATE';
     ButtonComponent,
     NgTemplateOutlet,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ImageCarouselCardComponent implements OnInit, OnChanges {
-  @Input() images!: Image[];
-  @Input() serverUrl!: string;
-  @Input() serverModel?: Image;
-  @Input() canUpdate: boolean = false;
-  @Input() canCreate: boolean = false;
-  @Input() canDelete: boolean = false;
+export class ImageCarouselCardComponent {
+  images = input.required<Image[]>();
+  serverUrl = input.required<string>();
+  serverModel = input.required<Image>();
+  canUpdate = input.required<boolean>();
+  canCreate = input.required<boolean>();
+  canDelete = input.required<boolean>();
 
   @Output() createImage: EventEmitter<Image> = new EventEmitter();
   @Output() deleteImage: EventEmitter<Image> = new EventEmitter();
   @Output() updateImage: EventEmitter<Image> = new EventEmitter();
 
-  currentImageIndex: number = 0;
-  currentImage!: Image;
-  state: State = 'DISPLAY';
-  userModel?: Image = {} as Image;
-  isLoading: boolean = false;
+  currentImageIndex = signal(0);
+  currentImage = computed(() => this.images()[this.currentImageIndex()]);
+  state = signal<State>('DISPLAY');
+  userModel = signal<Partial<Image> | null>({});
+  isLoading = signal(false);
 
   createFields: FormlyFieldConfig[] = [
     this.formlyService.buildInputConfig({
@@ -114,45 +116,36 @@ export class ImageCarouselCardComponent implements OnInit, OnChanges {
 
   constructor(private formlyService: FormlyService) {}
 
-  ngOnInit(): void {
-    this.currentImage = this.images[this.currentImageIndex];
-  }
-
-  ngOnChanges(): void {
-    this.currentImage = this.images[this.currentImageIndex];
-  }
-
   changeState(event: any, newState: State) {
-    this.userModel = event ?? null;
-    this.state = newState;
+    this.userModel.set(event ?? null);
+    this.state.set(newState);
   }
 
   onSlide(slideEvent: { event: NgbSlideEvent; index: number }) {
-    this.currentImageIndex = slideEvent.index;
-    this.currentImage = this.images[this.currentImageIndex];
+    this.currentImageIndex.set(slideEvent.index);
   }
 
   onCancel(): void {
     this.changeState(null, 'DISPLAY');
   }
 
   onSubmit(event: any): void {
-    switch (this.state) {
+    switch (this.state()) {
       case 'DELETE':
-        this.deleteImage.emit(this.currentImage);
+        this.deleteImage.emit(this.currentImage());
         break;
       case 'UPDATE':
       case 'UPDATE_OUTDATED':
-        this.updateImage.emit(this.userModel);
+        this.updateImage.emit(this.userModel() as Image);
         break;
       case 'CREATE':
-        this.createImage.emit(this.userModel);
+        this.createImage.emit(this.userModel() as Image);
         break;
       default:
         throw `ImageCarouselCard - Submitted form while in state '${this.state}', which is not possible.`;
     }
 
-    this.userModel = {} as Image;
+    this.userModel.set({});
     this.changeState(null, 'DISPLAY');
   }
 }

iframe.html

@@ -504,7 +504,7 @@
             window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};</script><script type="module">import './sb-preview/runtime.js';
 
 
-      import './runtime~main.906e9540.iframe.bundle.js';
+      import './runtime~main.0527b63e.iframe.bundle.js';
 
       import './main.6af3c178.iframe.bundle.js';
 

project.json

@@ -1 +1 @@
-{"generatedAt":1737635301741,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@types/jasmine":"4.3.6","jasmine-core":"4.5.0","karma":"6.4.4","karma-chrome-launcher":"3.1.1","karma-coverage":"2.2.1","karma-jasmine":"5.1.0","karma-jasmine-html-reporter":"2.0.0"},"packageManager":{"type":"npm","version":"10.8.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","portableStoriesFileCount":0,"storybookVersion":"8.4.7","storybookVersionSpecifier":"^8.4.5","language":"typescript","storybookPackages":{"@storybook/addon-links":{"version":"8.4.7"},"@storybook/angular":{"version":"8.4.7"},"@storybook/blocks":{"version":"8.4.7"},"@storybook/test":{"version":"8.4.7"},"storybook":{"version":"8.4.7"}},"addons":{"@storybook/addon-essentials":{"version":"8.4.7"},"@storybook/addon-interactions":{"version":"8.4.7"},"@storybook/addon-a11y":{"version":"8.4.7"},"storybook-preset-inline-svg":{"version":"1.0.1"},"@chromatic-com/storybook":{"version":"1.9.0"}}}
+{"generatedAt":1737823355636,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@types/jasmine":"4.3.6","jasmine-core":"4.5.0","karma":"6.4.4","karma-chrome-launcher":"3.1.1","karma-coverage":"2.2.1","karma-jasmine":"5.1.0","karma-jasmine-html-reporter":"2.0.0"},"packageManager":{"type":"npm","version":"10.8.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","portableStoriesFileCount":0,"storybookVersion":"8.4.7","storybookVersionSpecifier":"^8.4.5","language":"typescript","storybookPackages":{"@storybook/addon-links":{"version":"8.4.7"},"@storybook/angular":{"version":"8.4.7"},"@storybook/blocks":{"version":"8.4.7"},"@storybook/test":{"version":"8.4.7"},"storybook":{"version":"8.4.7"}},"addons":{"@storybook/addon-essentials":{"version":"8.4.7"},"@storybook/addon-interactions":{"version":"8.4.7"},"@storybook/addon-a11y":{"version":"8.4.7"},"storybook-preset-inline-svg":{"version":"1.0.1"},"@chromatic-com/storybook":{"version":"1.9.0"}}}