Fix stories.

Squidex · Sep 5, 2024 · 751e53c · 751e53c
1 parent 55dfc04
commit 751e53c
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 11 deletions.
diff --git a/frontend/src/app/framework/angular/forms/editors/checkbox-group.stories.ts b/frontend/src/app/framework/angular/forms/editors/checkbox-group.stories.ts
@@ -5,6 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
+import { FormsModule } from '@angular/forms';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { CheckboxGroupComponent } from '@app/framework';
 
@@ -18,6 +19,9 @@ export default {
         unsorted: {
             control: 'boolean',
         },
+        change: {
+            action:'ngModelChange',
+        },
     },
     render: args => ({
         props: args,
@@ -26,7 +30,7 @@ export default {
                 <sqx-checkbox-group
                     [disabled]="disabled"
                     [layout]="layout"
-                    (ngModelChange)="ngModelChange"
+                    (ngModelChange)="change($event)"
                     [ngModel]="model"
                     [unsorted]="unsorted"
                     [values]="values">
@@ -36,7 +40,9 @@ export default {
     }),
     decorators: [
         moduleMetadata({
-            imports: [],
+            imports: [
+                FormsModule,
+            ],
         }),
     ],
 } as Meta;

diff --git a/frontend/src/app/framework/angular/forms/editors/code-editor.stories.ts b/frontend/src/app/framework/angular/forms/editors/code-editor.stories.ts
@@ -23,9 +23,9 @@ export default {
         singleLine: {
             control: false,
         },
-    },
-    args: {
-        ngModelChange: action('ngModelChange'),
+        change: {
+            action: 'ngModelChange',
+        },
     },
     render: args => ({
         props: args,
@@ -36,7 +36,7 @@ export default {
                     [disabled]="disabled"
                     [height]="height"
                     [maxLines]="maxLines"
-                    (ngModelChange)="ngModelChange"
+                    (ngModelChange)="change($event)"
                     [ngModel]="ngModel"
                     [singleLine]="singleLine"
                     [valueFile]="valueFile"

diff --git a/frontend/src/app/framework/angular/forms/editors/dropdown.component.html b/frontend/src/app/framework/angular/forms/editors/dropdown.component.html
@@ -29,7 +29,6 @@
         adjustHeight="false"
         [adjustWidth]="dropdownFullWidth"
         [position]="dropdownPosition"
-        r
         scrollX="false"
         scrollY="true"
         [sqxAnchoredTo]="input"

diff --git a/frontend/src/app/framework/angular/forms/editors/dropdown.stories.ts b/frontend/src/app/framework/angular/forms/editors/dropdown.stories.ts
@@ -6,6 +6,8 @@
  */
 
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { DropdownComponent, LocalizerService, RootViewComponent } from '@app/framework';
 
@@ -52,17 +54,31 @@ export default {
         dropdownFullWidth: {
             control: 'boolean',
         },
+        change: {
+            action:'ngModelChange',
+        },
+        position: {
+            control: 'radio',
+            options: [
+                'bottom-start',
+                'bottom-end',
+            ],
+        },
+    },
+    args: {
+        position: 'bottom-start',
     },
     render: args => ({
         props: args,
         template: `
             <sqx-root-view>
                 <sqx-dropdown 
                     [disabled]="disabled"
-                    [dropdownPosition]="'bottom-left'"
+                    [dropdownPosition]="position"
                     [dropdownFullWidth]="dropdownFullWidth"
                     [items]="items"
                     [itemsLoading]="itemsLoading"
+                    (ngModelChange)="change($event)"
                     [ngModel]="model">
                 </sqx-dropdown>
             </sqx-root-view>
@@ -74,6 +90,8 @@ export default {
                 TestComponent,
             ],
             imports: [
+                BrowserAnimationsModule,
+                FormsModule,
                 RootViewComponent,
             ],
             providers: [
@@ -146,7 +164,7 @@ export const ComplexValues: Story = {
             <sqx-root-view>
                 <sqx-dropdown
                     [disabled]="disabled"
-                    [dropdownPosition]="'bottom-left'"
+                    [dropdownPosition]="'bottom-start'"
                     [dropdownFullWidth]="dropdownFullWidth"
                     [items]="items"
                     [itemsLoading]="itemsLoading"

diff --git a/frontend/src/app/framework/angular/forms/editors/radio-group.stories.ts b/frontend/src/app/framework/angular/forms/editors/radio-group.stories.ts
@@ -5,6 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
+import { FormsModule } from '@angular/forms';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { RadioGroupComponent } from '@app/framework';
 
@@ -18,6 +19,9 @@ export default {
         unsorted: {
             control: 'boolean',
         },
+        change: {
+            action:'ngModelChange',
+        },
     },
     render: args => ({
         props: args,
@@ -26,7 +30,7 @@ export default {
                 <sqx-radio-group
                     [disabled]="disabled"
                     [layout]="layout"
-                    (ngModelChange)="ngModelChange"
+                    (ngModelChange)="change($event)"
                     [ngModel]="model"
                     [unsorted]="unsorted"
                     [values]="values">
@@ -36,7 +40,9 @@ export default {
     }),
     decorators: [
         moduleMetadata({
-            imports: [],
+            imports: [
+                FormsModule,
+            ],
         }),
     ],
 } as Meta;

diff --git a/frontend/src/app/framework/angular/forms/editors/tag-editor.stories.ts b/frontend/src/app/framework/angular/forms/editors/tag-editor.stories.ts
@@ -6,6 +6,7 @@
  */
 
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { LocalizerService, RootViewComponent, TagEditorComponent } from '@app/framework';
 
@@ -52,6 +53,9 @@ export default {
         disabled: {
             control: 'boolean',
         },
+        change: {
+            action:'ngModelChange',
+        },
     },
     render: args => ({
         props: args,
@@ -62,6 +66,7 @@ export default {
                     [disabled]="disabled"
                     [itemsSource]="itemsSource"
                     [itemsSourceLoading]="itemsSourceLoading"
+                    (ngModelChange)="change($event)"
                     [ngModel]="model"
                     [styleScrollable]="styleScrollable"
                     [styleBlank]="styleBlank"
@@ -76,6 +81,7 @@ export default {
                 TestComponent,
             ],
             imports: [
+                FormsModule,
                 RootViewComponent,
             ],
             providers: [