diff --git a/libs/ui/accordion/accordion.stories.ts b/libs/ui/accordion/accordion.stories.ts index eb58dc9e7..ecee2cc21 100644 --- a/libs/ui/accordion/accordion.stories.ts +++ b/libs/ui/accordion/accordion.stories.ts @@ -1,14 +1,14 @@ import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; import { BrnAccordionComponent, BrnAccordionImports } from './brain/src'; -import { HlmAccordionImports, HlmAccordionTriggerDirective } from './helm/src'; +import { HlmAccordionImports } from './helm/src'; const meta: Meta = { title: 'Accordion', component: BrnAccordionComponent, decorators: [ moduleMetadata({ - imports: [BrnAccordionImports, HlmAccordionImports, HlmAccordionTriggerDirective], + imports: [BrnAccordionImports, HlmAccordionImports], }), ], }; @@ -20,35 +20,35 @@ export const Default: Story = { render: () => ({ template: ` - - - - It is a collection of full-stack technologies that provide end-to-end type-safety. - - + + + + It is a collection of full-stack technologies that provide end-to-end type-safety. + + - - - - A collection of unstyled UI primitives that provide accessibility out of the box. - - + + + + A collection of unstyled UI primitives that provide accessibility out of the box. + + - - - - Directives, sometimes additional components, that provide shadcn like styles for the Angular ecosystem. - - + + + + Directives, sometimes additional components, that provide shadcn like styles for the Angular ecosystem. + + `, }), diff --git a/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.directive.ts b/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.directive.ts index 0be5f1012..a104fe9c5 100644 --- a/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.directive.ts +++ b/libs/ui/accordion/brain/src/lib/brn-accordion-trigger.directive.ts @@ -1,5 +1,7 @@ import { AfterContentInit, Directive, ElementRef, inject } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { rxHostPressedListener } from '@spartan-ng/ui-core'; +import { fromEvent } from 'rxjs'; import { BrnAccordionItemComponent } from './brn-accordion-item.component'; import { BrnAccordionComponent } from './brn-accordion.component'; @@ -34,8 +36,14 @@ export class BrnAccordionTriggerDirective implements AfterContentInit { throw Error('Accordion trigger can only be used inside an AccordionItem. Add brnAccordionItem to parent.'); } this._HostPressedListener.subscribe(() => { - this.toggleAccordionItem(); + this._accordion.toggleItem(this._item.id); }); + + fromEvent(this._elementRef.nativeElement, 'focus') + .pipe(takeUntilDestroyed()) + .subscribe(() => { + this._accordion.setActiveItem(this._item.id); + }); } ngAfterContentInit(): void { console.log('BrnAccordionTriggerDirective.ngAfterContentInit'); @@ -44,8 +52,4 @@ export class BrnAccordionTriggerDirective implements AfterContentInit { public focus() { this._elementRef.nativeElement.focus(); } - - protected toggleAccordionItem() { - this._accordion.toggleItem(this._item.id); - } } diff --git a/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts b/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts index 1d5af1994..2fb49ef49 100644 --- a/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts +++ b/libs/ui/accordion/brain/src/lib/brn-accordion.component.ts @@ -65,9 +65,11 @@ export class BrnAccordionComponent implements AfterContentInit { this._keyManager?.onKeydown(event as KeyboardEvent); }); } + public setActiveItem(id: number) { + this._keyManager?.setActiveItem(id); + } public toggleItem(id: number) { - this._keyManager?.setActiveItem(id); if (this._openItemIds().includes(id)) { this._openItemIds.update((ids) => ids.filter((openId) => id !== openId)); return;