refactor: update imports and descriptions in Angular stories

- Consolidated import statements in forms.stories.ts and other story files to use the new design system paths.
- Enhanced documentation in MDX files for various components, including Accordion, Dialog, and Form controls, to provide clearer descriptions and usage examples.
- Added event binding examples for form controls in wrappers-form.stories.ts to demonstrate how to handle state changes.
- Improved overall consistency and clarity in story descriptions across multiple components.

Author: Diaan

packages/angular/package.json

@@ -17,8 +17,8 @@
     "start": "wireit",
     "storybook": "wireit",
     "extract-templates": "wireit",
-    "extract-templates:force": "node ../../scripts/extract-story-templates.js --force",
-    "extract-templates:watch": "node ../../scripts/extract-story-templates.js --watch"
+    "extract-templates:force": "wireit",
+    "extract-templates:watch": "wireit"
   },
   "wireit": {
     "build": {
@@ -72,6 +72,16 @@
       "output": [
         "stories/generated/*.mdx"
       ]
+    },
+    "extract-templates:force": {
+      "command": "node ../../scripts/extract-story-templates.js --force",
+      "output": [
+        "stories/generated/*.mdx"
+      ]
+    },
+    "extract-templates:watch": {
+      "command": "node ../../scripts/extract-story-templates.js --watch",
+      "service": true
     }
   },
   "dependencies": {

packages/angular/src/forms/combobox-directive.ts renamed to packages/angular/src/forms/combobox.directive.ts

@@ -1,5 +1,6 @@
 export * from './checkbox-group.directive';
 export * from './checkbox.directive';
+export * from './combobox.directive';
 export * from './form-control-element.directive';
 export * from './number-field.directive';
 export * from './radio-group.directive';

packages/angular/src/forms/public-api.ts

@@ -47,7 +47,7 @@ export default {
 
 export const ExternalActions: StoryObj = {
   render: () => ({
-    description: `There are scenarios where you want to be able to controle the state of the accordion with an external trigger, for example when the user selects an option elsewhere on the page.
+    description: `There are scenarios where you want to be able to control the state of the accordion with an external trigger, for example when the user selects an option elsewhere on the page.
 
               This example shows how to bind a boolean that exist in your angular component to the open state of the accordion item. It also shows how to update your boolean when the value is changed from within the accordion itself.`,
     template: '<sla-accordion-external-actions></sla-accordion-external-actions>'

packages/angular/stories/accordion.stories.ts

@@ -225,7 +225,8 @@ export default {
 } as Meta;
 
 export const DialogServiceExample: StoryFn = () => ({
-  description: 'A button bar groups multiple buttons together.',
+  description:
+    'A simple example of using the DialogService to open a dialog. This works with any dialog. How you can create a dialog can be seen in the next example.<br/><br/>Note the <code>@Inject(DIALOG_DATA)</code> that is used to get the data passed to the dialog component.',
   template: '<sla-dialog-service></sla-dialog-service>'
 });
 

packages/angular/stories/dialog-service.stories.ts

@@ -8,35 +8,34 @@ import {
   ReactiveFormsModule,
   type ValidationErrors
 } from '@angular/forms';
+import { ButtonComponent } from '@sl-design-system/angular/button';
+import { ButtonBarComponent } from '@sl-design-system/angular/button-bar';
+import { CheckboxComponent, CheckboxGroupComponent } from '@sl-design-system/angular/checkbox';
+import { ComboboxComponent } from '@sl-design-system/angular/combobox';
+import { FormComponent, FormFieldComponent } from '@sl-design-system/angular/form';
+import {
+  CheckboxDirective,
+  CheckboxGroupDirective,
+  ComboboxDirective,
+  NumberFieldDirective,
+  RadioGroupDirective,
+  SelectDirective,
+  SwitchDirective,
+  TextAreaDirective,
+  TextFieldDirective,
+  TimeFieldDirective
+} from '@sl-design-system/angular/forms';
+import { InlineMessageComponent } from '@sl-design-system/angular/inline-message';
+import { OptionComponent } from '@sl-design-system/angular/listbox';
+import { NumberFieldComponent } from '@sl-design-system/angular/number-field';
+import { RadioComponent, RadioGroupComponent } from '@sl-design-system/angular/radio-group';
+import { SelectComponent } from '@sl-design-system/angular/select';
+import { SwitchComponent } from '@sl-design-system/angular/switch';
+import { TextAreaComponent } from '@sl-design-system/angular/text-area';
+import { TextFieldComponent } from '@sl-design-system/angular/text-field';
+import { TimeFieldComponent } from '@sl-design-system/angular/time-field';
 import { Form } from '@sl-design-system/form';
 import { type Meta, type StoryFn, moduleMetadata } from '@storybook/angular';
-import { ButtonComponent } from '../src/button/button.component';
-import { ButtonBarComponent } from '../src/button-bar/button-bar.component';
-import { CheckboxGroupComponent } from '../src/checkbox/checkbox-group.component';
-import { CheckboxComponent } from '../src/checkbox/checkbox.component';
-import { ComboboxComponent } from '../src/combobox/combobox.component';
-import { FormFieldComponent } from '../src/form/form-field.component';
-import { FormComponent } from '../src/form/form.component';
-import { CheckboxGroupDirective } from '../src/forms/checkbox-group.directive';
-import { CheckboxDirective } from '../src/forms/checkbox.directive';
-import { ComboboxDirective } from '../src/forms/combobox-directive';
-import { NumberFieldDirective } from '../src/forms/number-field.directive';
-import { RadioGroupDirective } from '../src/forms/radio-group.directive';
-import { SelectDirective } from '../src/forms/select.directive';
-import { SwitchDirective } from '../src/forms/switch.directive';
-import { TextAreaDirective } from '../src/forms/text-area.directive';
-import { TextFieldDirective } from '../src/forms/text-field.directive';
-import { TimeFieldDirective } from '../src/forms/time-field.directive';
-import { InlineMessageComponent } from '../src/inline-message/inline-message.component';
-import { OptionComponent } from '../src/listbox/option.component';
-import { NumberFieldComponent } from '../src/number-field/number-field.component';
-import { RadioGroupComponent } from '../src/radio-group/radio-group.component';
-import { RadioComponent } from '../src/radio-group/radio.component';
-import { SelectComponent } from '../src/select/select.component';
-import { SwitchComponent } from '../src/switch/switch.component';
-import { TextAreaComponent } from '../src/text-area/text-area.component';
-import { TextFieldComponent } from '../src/text-field/text-field.component';
-import { TimeFieldComponent } from '../src/time-field/time-field.component';
 
 @Component({
   selector: 'sla-all-form-controls-reactive',

packages/angular/stories/forms.stories.ts

@@ -11,12 +11,15 @@ To add custom introduction content, create accordion.intro.md */}
 
 ## External Actions
 
-There are scenarios where you want to be able to controle the state of the accordion with an external trigger, for example when the user selects an option elsewhere on the page.
+There are scenarios where you want to be able to control the state of the accordion with an external trigger, for example when the user selects an option elsewhere on the page.
 
               This example shows how to bind a boolean that exist in your angular component to the open state of the accordion item. It also shows how to update your boolean when the value is changed from within the accordion itself.
 
 
 ```typescript
+import { AccordionComponent } from '@sl-design-system/angular/accordion';
+import { ButtonComponent } from '@sl-design-system/angular/button';
+
 @Component({
   selector: 'sla-accordion-external-actions',
   template: `<sl-button (click)="this.onClick('dino')">Toggle 🦖</sl-button>

packages/angular/stories/generated/accordion.mdx

@@ -11,10 +11,20 @@ To add custom introduction content, create dialog-service.intro.md */}
 
 ## Dialog Service Example
 
-A button bar groups multiple buttons together.
+A simple example of using the DialogService to open a dialog. This works with any dialog. How you can create a dialog can be seen in the next example.<br/><br/>Note the <code>@Inject(DIALOG_DATA)</code> that is used to get the data passed to the dialog component.
 
 
 ```typescript
+import { ButtonComponent } from '../src/button/button.component';
+import { DialogComponent } from '../src/dialog/dialog.component';
+import { FormFieldComponent } from '../src/form/form-field.component';
+import { FormComponent } from '../src/form/form.component';
+import { TextAreaDirective } from '../src/forms/text-area.directive';
+import { TextFieldDirective } from '../src/forms/text-field.directive';
+import { DialogRef, DialogService } from '../src/services/dialog.service';
+import { TextAreaComponent } from '../src/text-area/text-area.component';
+import { TextFieldComponent } from '../src/text-field/text-field.component';
+
 @Component({
   selector: 'sla-dialog-service',
   template: `<h3>Dialog Service examples</h3>
@@ -72,6 +82,16 @@ Example of using a form inside a dialog.
 
 
 ```typescript
+import { ButtonComponent } from '../src/button/button.component';
+import { DialogComponent } from '../src/dialog/dialog.component';
+import { FormFieldComponent } from '../src/form/form-field.component';
+import { FormComponent } from '../src/form/form.component';
+import { TextAreaDirective } from '../src/forms/text-area.directive';
+import { TextFieldDirective } from '../src/forms/text-field.directive';
+import { DialogRef, DialogService } from '../src/services/dialog.service';
+import { TextAreaComponent } from '../src/text-area/text-area.component';
+import { TextFieldComponent } from '../src/text-field/text-field.component';
+
 @Component({
   selector: 'sla-dialog-form',
   template: `<span slot="title">{{ data.title }}</span>

packages/angular/stories/generated/dialog-service.mdx

@@ -15,6 +15,34 @@ An example form that includes all form controls using reactive forms.
 
 
 ```typescript
+import { ButtonComponent } from '@sl-design-system/angular/button';
+import { ButtonBarComponent } from '@sl-design-system/angular/button-bar';
+import { CheckboxComponent, CheckboxGroupComponent } from '@sl-design-system/angular/checkbox';
+import { ComboboxComponent } from '@sl-design-system/angular/combobox';
+import { FormComponent, FormFieldComponent } from '@sl-design-system/angular/form';
+import {
+  CheckboxDirective,
+  CheckboxGroupDirective,
+  ComboboxDirective,
+  NumberFieldDirective,
+  RadioGroupDirective,
+  SelectDirective,
+  SwitchDirective,
+  TextAreaDirective,
+  TextFieldDirective,
+  TimeFieldDirective
+} from '@sl-design-system/angular/forms';
+import { InlineMessageComponent } from '@sl-design-system/angular/inline-message';
+import { OptionComponent } from '@sl-design-system/angular/listbox';
+import { NumberFieldComponent } from '@sl-design-system/angular/number-field';
+import { RadioComponent, RadioGroupComponent } from '@sl-design-system/angular/radio-group';
+import { SelectComponent } from '@sl-design-system/angular/select';
+import { SwitchComponent } from '@sl-design-system/angular/switch';
+import { TextAreaComponent } from '@sl-design-system/angular/text-area';
+import { TextFieldComponent } from '@sl-design-system/angular/text-field';
+import { TimeFieldComponent } from '@sl-design-system/angular/time-field';
+import { Form } from '@sl-design-system/form';
+
 @Component({
   selector: 'sla-all-form-controls-reactive',
   template: `<sl-form [formGroup]="formGroup">
@@ -140,6 +168,34 @@ An example form that includes all form controls using reactive forms with empty
 
 
 ```typescript
+import { ButtonComponent } from '@sl-design-system/angular/button';
+import { ButtonBarComponent } from '@sl-design-system/angular/button-bar';
+import { CheckboxComponent, CheckboxGroupComponent } from '@sl-design-system/angular/checkbox';
+import { ComboboxComponent } from '@sl-design-system/angular/combobox';
+import { FormComponent, FormFieldComponent } from '@sl-design-system/angular/form';
+import {
+  CheckboxDirective,
+  CheckboxGroupDirective,
+  ComboboxDirective,
+  NumberFieldDirective,
+  RadioGroupDirective,
+  SelectDirective,
+  SwitchDirective,
+  TextAreaDirective,
+  TextFieldDirective,
+  TimeFieldDirective
+} from '@sl-design-system/angular/forms';
+import { InlineMessageComponent } from '@sl-design-system/angular/inline-message';
+import { OptionComponent } from '@sl-design-system/angular/listbox';
+import { NumberFieldComponent } from '@sl-design-system/angular/number-field';
+import { RadioComponent, RadioGroupComponent } from '@sl-design-system/angular/radio-group';
+import { SelectComponent } from '@sl-design-system/angular/select';
+import { SwitchComponent } from '@sl-design-system/angular/switch';
+import { TextAreaComponent } from '@sl-design-system/angular/text-area';
+import { TextFieldComponent } from '@sl-design-system/angular/text-field';
+import { TimeFieldComponent } from '@sl-design-system/angular/time-field';
+import { Form } from '@sl-design-system/form';
+
 @Component({
   selector: 'sla-all-form-controls-empty-reactive',
   template: `<sl-form #form [formGroup]="formGroup">
@@ -277,6 +333,34 @@ An example form that includes all form controls using template-driven forms.
 
 
 ```typescript
+import { ButtonComponent } from '@sl-design-system/angular/button';
+import { ButtonBarComponent } from '@sl-design-system/angular/button-bar';
+import { CheckboxComponent, CheckboxGroupComponent } from '@sl-design-system/angular/checkbox';
+import { ComboboxComponent } from '@sl-design-system/angular/combobox';
+import { FormComponent, FormFieldComponent } from '@sl-design-system/angular/form';
+import {
+  CheckboxDirective,
+  CheckboxGroupDirective,
+  ComboboxDirective,
+  NumberFieldDirective,
+  RadioGroupDirective,
+  SelectDirective,
+  SwitchDirective,
+  TextAreaDirective,
+  TextFieldDirective,
+  TimeFieldDirective
+} from '@sl-design-system/angular/forms';
+import { InlineMessageComponent } from '@sl-design-system/angular/inline-message';
+import { OptionComponent } from '@sl-design-system/angular/listbox';
+import { NumberFieldComponent } from '@sl-design-system/angular/number-field';
+import { RadioComponent, RadioGroupComponent } from '@sl-design-system/angular/radio-group';
+import { SelectComponent } from '@sl-design-system/angular/select';
+import { SwitchComponent } from '@sl-design-system/angular/switch';
+import { TextAreaComponent } from '@sl-design-system/angular/text-area';
+import { TextFieldComponent } from '@sl-design-system/angular/text-field';
+import { TimeFieldComponent } from '@sl-design-system/angular/time-field';
+import { Form } from '@sl-design-system/form';
+
 @Component({
   selector: 'sla-all-form-controls-template',
   template: `<sl-form>
@@ -390,6 +474,34 @@ An example form that includes all form controls using template-driven forms with
 
 
 ```typescript
+import { ButtonComponent } from '@sl-design-system/angular/button';
+import { ButtonBarComponent } from '@sl-design-system/angular/button-bar';
+import { CheckboxComponent, CheckboxGroupComponent } from '@sl-design-system/angular/checkbox';
+import { ComboboxComponent } from '@sl-design-system/angular/combobox';
+import { FormComponent, FormFieldComponent } from '@sl-design-system/angular/form';
+import {
+  CheckboxDirective,
+  CheckboxGroupDirective,
+  ComboboxDirective,
+  NumberFieldDirective,
+  RadioGroupDirective,
+  SelectDirective,
+  SwitchDirective,
+  TextAreaDirective,
+  TextFieldDirective,
+  TimeFieldDirective
+} from '@sl-design-system/angular/forms';
+import { InlineMessageComponent } from '@sl-design-system/angular/inline-message';
+import { OptionComponent } from '@sl-design-system/angular/listbox';
+import { NumberFieldComponent } from '@sl-design-system/angular/number-field';
+import { RadioComponent, RadioGroupComponent } from '@sl-design-system/angular/radio-group';
+import { SelectComponent } from '@sl-design-system/angular/select';
+import { SwitchComponent } from '@sl-design-system/angular/switch';
+import { TextAreaComponent } from '@sl-design-system/angular/text-area';
+import { TextFieldComponent } from '@sl-design-system/angular/text-field';
+import { TimeFieldComponent } from '@sl-design-system/angular/time-field';
+import { Form } from '@sl-design-system/form';
+
 @Component({
   selector: 'sla-all-form-controls-empty-template',
   template: `<sl-form #form>
@@ -510,6 +622,34 @@ A simple login form example using reactive forms with custom validation.
 
 
 ```typescript
+import { ButtonComponent } from '@sl-design-system/angular/button';
+import { ButtonBarComponent } from '@sl-design-system/angular/button-bar';
+import { CheckboxComponent, CheckboxGroupComponent } from '@sl-design-system/angular/checkbox';
+import { ComboboxComponent } from '@sl-design-system/angular/combobox';
+import { FormComponent, FormFieldComponent } from '@sl-design-system/angular/form';
+import {
+  CheckboxDirective,
+  CheckboxGroupDirective,
+  ComboboxDirective,
+  NumberFieldDirective,
+  RadioGroupDirective,
+  SelectDirective,
+  SwitchDirective,
+  TextAreaDirective,
+  TextFieldDirective,
+  TimeFieldDirective
+} from '@sl-design-system/angular/forms';
+import { InlineMessageComponent } from '@sl-design-system/angular/inline-message';
+import { OptionComponent } from '@sl-design-system/angular/listbox';
+import { NumberFieldComponent } from '@sl-design-system/angular/number-field';
+import { RadioComponent, RadioGroupComponent } from '@sl-design-system/angular/radio-group';
+import { SelectComponent } from '@sl-design-system/angular/select';
+import { SwitchComponent } from '@sl-design-system/angular/switch';
+import { TextAreaComponent } from '@sl-design-system/angular/text-area';
+import { TextFieldComponent } from '@sl-design-system/angular/text-field';
+import { TimeFieldComponent } from '@sl-design-system/angular/time-field';
+import { Form } from '@sl-design-system/form';
+
 @Component({
   selector: 'sla-login-form',
   template: `<sl-form #form [formGroup]="formGroup">

packages/angular/stories/generated/forms.mdx

@@ -29,6 +29,10 @@ providers: [
 
 
 ```typescript
+import { MenuComponent } from '../src/menu/menu.component';
+import { TabGroupComponent } from '../src/tabs/tab-group.component';
+import { TabComponent } from '../src/tabs/tab.component';
+
 @Component({
   selector: 'sla-routing',
   template: `<sl-tab-group>