-
Notifications
You must be signed in to change notification settings - Fork 117
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dialog): open dynamic component in dialog (#180)
refactor(dialog): working on new dialog approach refactor(dialog): refactor dialog component to use global dialog service refactor(dialog): remove provider function for BrnDialog feat(dialog): add HlmDialogService for opening components in a dialog dynamically chore: add dynamic dialog component section to docs chore: add note about injectDialogContext refactor(dialog): dialog overlay class names and dialog options as reusable defaults chore: add story for dialog dynamic components refactor(dialog): make HlmDialogService options optional (defaults are provided) refactor(dialog): continue support for injectBrnDialogCtx (deprecated) refactor(dialog): move (click) handlers back into metadata host refactor(dialog): prefer early returns refactor(dialog): injectDialogContext -> injectBrnDialogContext chore: add nested dialog stories and e2e tests refactor(dialog): use input function in brnDialogTrigger refactor(dialog): use optional chaining in dialog component refactor(dialog): _id() renamed to id(), use in inheriting classes refactor(popover): change ariaDescribedBy, ariaLabelledBy to empty string so not assigned defaults refactor(dialog): use correct member names after merge
- Loading branch information
Showing
28 changed files
with
1,052 additions
and
248 deletions.
There are no files selected for viewing
239 changes: 239 additions & 0 deletions
239
apps/app/src/app/pages/(components)/components/(dialog)/dialog-dynamic-component.preview.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,239 @@ | ||
| import { Component, HostBinding, inject } from '@angular/core'; | ||
| import { lucideCheck } from '@ng-icons/lucide'; | ||
| import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; | ||
| import { BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/ui-dialog-brain'; | ||
| import { | ||
| HlmDialogDescriptionDirective, | ||
| HlmDialogHeaderComponent, | ||
| HlmDialogService, | ||
| HlmDialogTitleDirective, | ||
| } from '@spartan-ng/ui-dialog-helm'; | ||
| import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm'; | ||
| import { HlmTableComponent, HlmTdComponent, HlmThComponent, HlmTrowComponent } from '@spartan-ng/ui-table-helm'; | ||
|
|
||
| type ExampleUser = { | ||
| name: string; | ||
| email: string; | ||
| phone: string; | ||
| }; | ||
|
|
||
| @Component({ | ||
| selector: 'spartan-dialog-dynamic-component-preview', | ||
| standalone: true, | ||
| imports: [HlmButtonDirective], | ||
| template: ` | ||
| <button hlmBtn (click)="openDynamicComponent()">Select User</button> | ||
| `, | ||
| }) | ||
| export class DialogDynamicComponentPreviewComponent { | ||
| private readonly _hlmDialogService = inject(HlmDialogService); | ||
|
|
||
| private readonly _users: ExampleUser[] = [ | ||
| { | ||
| name: 'Helena Chambers', | ||
| email: 'helenachambers@chorizon.com', | ||
| phone: '+1 (812) 588-3759', | ||
| }, | ||
| { | ||
| name: 'Josie Crane', | ||
| email: 'josiecrane@hinway.com', | ||
| phone: '+1 (884) 523-3324', | ||
| }, | ||
| { | ||
| name: 'Lou Hartman', | ||
| email: 'louhartman@optyk.com', | ||
| phone: '+1 (912) 479-3998', | ||
| }, | ||
| { | ||
| name: 'Lydia Zimmerman', | ||
| email: 'lydiazimmerman@ultrasure.com', | ||
| phone: '+1 (944) 511-2111', | ||
| }, | ||
| ]; | ||
|
|
||
| public openDynamicComponent() { | ||
| const dialogRef = this._hlmDialogService.open(SelectUserComponent, { | ||
| context: { | ||
| users: this._users, | ||
| }, | ||
| contentClass: 'sm:!max-w-[750px]', | ||
| }); | ||
|
|
||
| dialogRef.closed$.subscribe((user) => { | ||
| if (user) { | ||
| console.log('Selected user:', user); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'dynamic-content', | ||
| standalone: true, | ||
| imports: [ | ||
| HlmDialogHeaderComponent, | ||
| HlmDialogTitleDirective, | ||
| HlmDialogDescriptionDirective, | ||
| HlmTableComponent, | ||
| HlmThComponent, | ||
| HlmTrowComponent, | ||
| HlmTdComponent, | ||
| HlmButtonDirective, | ||
| HlmIconComponent, | ||
| ], | ||
| providers: [provideIcons({ lucideCheck })], | ||
| template: ` | ||
| <hlm-dialog-header> | ||
| <h3 hlmDialogTitle>Select user</h3> | ||
| <p hlmDialogDescription>Click a row to select a user.</p> | ||
| </hlm-dialog-header> | ||
| <hlm-table> | ||
| <hlm-trow> | ||
| <hlm-th class="w-44">Name</hlm-th> | ||
| <hlm-th class="w-60">Email</hlm-th> | ||
| <hlm-th class="w-48">Phone</hlm-th> | ||
| </hlm-trow> | ||
| @for (user of users; track user.name) { | ||
| <button class="text-left" (click)="selectUser(user)"> | ||
| <hlm-trow> | ||
| <hlm-td truncate class="w-44 font-medium">{{ user.name }}</hlm-td> | ||
| <hlm-td class="w-60">{{ user.email }}</hlm-td> | ||
| <hlm-td class="w-48">{{ user.phone }}</hlm-td> | ||
| </hlm-trow> | ||
| </button> | ||
| } | ||
| </hlm-table> | ||
| `, | ||
| }) | ||
| class SelectUserComponent { | ||
| @HostBinding('class') private readonly _class: string = 'flex flex-col gap-4'; | ||
|
|
||
| private readonly _dialogRef = inject<BrnDialogRef<ExampleUser>>(BrnDialogRef); | ||
| private readonly _dialogContext = injectBrnDialogContext<{ users: ExampleUser[] }>(); | ||
|
|
||
| protected readonly users = this._dialogContext.users; | ||
|
|
||
| public selectUser(user: ExampleUser) { | ||
| this._dialogRef.close(user); | ||
| } | ||
| } | ||
|
|
||
| export const dynamicComponentCode = ` | ||
| import { | ||
| HlmDialogDescriptionDirective, | ||
| HlmDialogHeaderComponent, | ||
| HlmDialogService, | ||
| HlmDialogTitleDirective, | ||
| } from '@spartan-ng/ui-dialog-helm'; | ||
| import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm'; | ||
| import { HlmTableComponent, HlmTdComponent, HlmThComponent, HlmTrowComponent } from '@spartan-ng/ui-table-helm'; | ||
| type ExampleUser = { | ||
| name: string; | ||
| email: string; | ||
| phone: string; | ||
| }; | ||
| @Component({ | ||
| selector: 'spartan-dialog-dynamic-component-preview', | ||
| standalone: true, | ||
| imports: [HlmButtonDirective], | ||
| template: \` | ||
| <button hlmBtn (click)="openDynamicComponent()">Select User</button> | ||
| \`, | ||
| }) | ||
| export class DialogDynamicComponentPreviewComponent { | ||
| private readonly _hlmDialogService = inject(HlmDialogService); | ||
| private readonly _users: ExampleUser[] = [ | ||
| { | ||
| name: 'Helena Chambers', | ||
| email: 'helenachambers@chorizon.com', | ||
| phone: '+1 (812) 588-3759', | ||
| }, | ||
| { | ||
| name: 'Josie Crane', | ||
| email: 'josiecrane@hinway.com', | ||
| phone: '+1 (884) 523-3324', | ||
| }, | ||
| { | ||
| name: 'Lou Hartman', | ||
| email: 'louhartman@optyk.com', | ||
| phone: '+1 (912) 479-3998', | ||
| }, | ||
| { | ||
| name: 'Lydia Zimmerman', | ||
| email: 'lydiazimmerman@ultrasure.com', | ||
| phone: '+1 (944) 511-2111', | ||
| }, | ||
| ]; | ||
| public openDynamicComponent() { | ||
| const dialogRef = this._hlmDialogService.open(SelectUserComponent, { | ||
| context: { | ||
| users: this._users, | ||
| }, | ||
| contentClass: 'sm:!max-w-[750px]', | ||
| }); | ||
| dialogRef.closed$.subscribe((user) => { | ||
| if (user) { | ||
| console.log('Selected user:', user); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| @Component({ | ||
| selector: 'dynamic-content', | ||
| standalone: true, | ||
| imports: [ | ||
| HlmDialogHeaderComponent, | ||
| HlmDialogTitleDirective, | ||
| HlmDialogDescriptionDirective, | ||
| HlmTableComponent, | ||
| HlmThComponent, | ||
| HlmTrowComponent, | ||
| HlmTdComponent, | ||
| HlmButtonDirective, | ||
| HlmIconComponent, | ||
| ], | ||
| providers: [provideIcons({ lucideCheck })], | ||
| template: \` | ||
| <hlm-dialog-header> | ||
| <h3 hlmDialogTitle>Select user</h3> | ||
| <p hlmDialogDescription>Click a row to select a user.</p> | ||
| </hlm-dialog-header> | ||
| <hlm-table> | ||
| <hlm-trow> | ||
| <hlm-th class="w-44">Name</hlm-th> | ||
| <hlm-th class="w-60">Email</hlm-th> | ||
| <hlm-th class="w-48">Phone</hlm-th> | ||
| </hlm-trow> | ||
| @for (user of users; track user.name) { | ||
| <button class="text-left" (click)="selectUser(user)"> | ||
| <hlm-trow> | ||
| <hlm-td truncate class="w-44 font-medium">{{ user.name }}</hlm-td> | ||
| <hlm-td class="w-60">{{ user.email }}</hlm-td> | ||
| <hlm-td class="w-48">{{ user.phone }}</hlm-td> | ||
| </hlm-trow> | ||
| </button> | ||
| } | ||
| </hlm-table> | ||
| \`, | ||
| }) | ||
| class SelectUserComponent { | ||
| @HostBinding('class') private readonly _class: string = 'flex flex-col gap-4'; | ||
| private readonly _dialogRef = inject<BrnDialogRef<ExampleUser>>(BrnDialogRef); | ||
| private readonly _dialogContext = injectBrnDialogContext<{ users: ExampleUser[] }>(); | ||
| protected readonly users = this._dialogContext.users; | ||
| public selectUser(user: ExampleUser) { | ||
| this._dialogRef.close(user); | ||
| } | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.