diff --git a/libs/sketch/src/lib/components/select/components/select-option/select-option.component.ts b/libs/sketch/src/lib/components/select/components/select-option/select-option.component.ts index cc77588..799fda9 100644 --- a/libs/sketch/src/lib/components/select/components/select-option/select-option.component.ts +++ b/libs/sketch/src/lib/components/select/components/select-option/select-option.component.ts @@ -53,9 +53,6 @@ export class SelectOptionComponent { } 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 diff --git a/libs/sketch/src/lib/components/select/select.component.html b/libs/sketch/src/lib/components/select/select.component.html index fa61499..06d2719 100644 --- a/libs/sketch/src/lib/components/select/select.component.html +++ b/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()" > diff --git a/libs/sketch/src/lib/components/select/select.component.stories.ts b/libs/sketch/src/lib/components/select/select.component.stories.ts new file mode 100644 index 0000000..b50aead --- /dev/null +++ b/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> = { + component: SelectComponent, + title: 'SelectComponent', + parameters: { + backgrounds: { default: 'dark' }, + }, + decorators: [ + moduleMetadata({ + imports: [CommonModule, SelectComponent, SelectOptionComponent], + }), + ], +}; +export default meta; +type Story = StoryObj>; + +export const Default: Story = { + render: (args) => ({ + props: args, + template: ` + Placeholder + Selected + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + Option 6 + Option 7 + Option 8 + Option 9 + Option 10 + `, + }), +}; diff --git a/libs/sketch/src/lib/components/select/select.component.ts b/libs/sketch/src/lib/components/select/select.component.ts index 6eefda2..b2297db 100644 --- a/libs/sketch/src/lib/components/select/select.component.ts +++ b/libs/sketch/src/lib/components/select/select.component.ts @@ -39,6 +39,7 @@ export class SelectComponent implements ControlValueAccessor { animationDelay = input(0); closeOnSelect = input(false); multiple = input(false, { transform: booleanAttribute }); + readonly autoFocus = signal(false); readonly selectedValue = signal(undefined); readonly panelIsVisible = signal(false); readonly showPlaceholder = computed(() => { @@ -72,8 +73,9 @@ export class SelectComponent 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); }