feat(select): add story for select component

libs/sketch/src/lib/components/select/components/select-option/select-option.component.ts

@@ -53,9 +53,6 @@ export class SelectOptionComponent<T> {
     } else {
       this.selected = selectedValue === value;
     }
-    console.log('selectedValue', selectedValue);
-    console.log('value', value);
-    console.log('this.selected', this.selected);
   });
 
   // WORKAROUND: This is a workaround until the HostBinding can also use as signal

libs/sketch/src/lib/components/select/select.component.html

@@ -4,7 +4,7 @@
   [skCdkOverlayShow]="panelIsVisible()"
   [skCdkOverlayDisposeDelay]="animationDelay()"
   [tabIndex]="0"
-  (click)="togglePanel(true)"
+  (click)="togglePanel(true, false)"
   (keydown.enter)="togglePanel(!this.panelIsVisible())"
   (keydown.space)="togglePanel(!this.panelIsVisible())"
   (skCdkOverlayVisible)="togglePanel($event)"
@@ -23,7 +23,7 @@
     (keydown.arrowUp)="keyArrowUp($event)"
     (keydown.arrowDown)="keyArrowDown($event)"
     cdkTrapFocus
-    [cdkTrapFocusAutoCapture]="true"
+    [cdkTrapFocusAutoCapture]="autoFocus()"
   >
     <ng-content></ng-content>
   </div>

libs/sketch/src/lib/components/select/select.component.stories.ts

@@ -0,0 +1,39 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { SelectComponent } from './select.component';
+import { SelectOptionComponent } from './components/select-option/select-option.component';
+
+const meta: Meta<SelectComponent<number>> = {
+  component: SelectComponent,
+  title: 'SelectComponent',
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, SelectComponent, SelectOptionComponent],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<SelectComponent<number>>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<sk-select [closeOnSelect]="true">
+          <span skSelectPlaceholder>Placeholder</span>
+          <span skSelectLabel>Selected</span>
+          <sk-select-option [value]="1">Option 1</sk-select-option>
+          <sk-select-option [value]="2">Option 2</sk-select-option>
+          <sk-select-option [value]="3">Option 3</sk-select-option>
+          <sk-select-option [value]="4">Option 4</sk-select-option>
+          <sk-select-option [value]="5">Option 5</sk-select-option>
+          <sk-select-option [value]="6">Option 6</sk-select-option>
+          <sk-select-option [value]="7">Option 7</sk-select-option>
+          <sk-select-option [value]="8">Option 8</sk-select-option>
+          <sk-select-option [value]="9">Option 9</sk-select-option>
+          <sk-select-option [value]="10">Option 10</sk-select-option>
+      </sk-select>`,
+  }),
+};

libs/sketch/src/lib/components/select/select.component.ts

@@ -39,6 +39,7 @@ export class SelectComponent<T> implements ControlValueAccessor {
   animationDelay = input(0);
   closeOnSelect = input(false);
   multiple = input(false, { transform: booleanAttribute });
+  readonly autoFocus = signal(false);
   readonly selectedValue = signal<T | T[] | undefined>(undefined);
   readonly panelIsVisible = signal(false);
   readonly showPlaceholder = computed(() => {
@@ -72,8 +73,9 @@ export class SelectComponent<T> implements ControlValueAccessor {
     { allowSignalWrites: true }
   );
 
-  togglePanel(visible: boolean): void {
+  togglePanel(visible: boolean, focus = true): void {
     this.panelIsVisible.set(visible);
+    this.autoFocus.set(focus);
     this.open.emit(visible);
   }