import { DialogModule, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { ButtonModule } from "../button";
import { IconButtonModule } from "../icon-button";
import { SharedModule } from "../shared/shared.module";
import { I18nMockService } from "../utils/i18n-mock.service";
import { DialogService } from "./dialog.service";
import { DialogCloseDirective } from "./directives/dialog-close.directive";
import { DialogTitleContainerDirective } from "./directives/dialog-title-container.directive";
import { SimpleDialogComponent } from "./simple-dialog/simple-dialog.component";
interface Animal {
animal: string;
}
@Component({
template: ``,
})
class StoryDialogComponent {
constructor(public dialogService: DialogService) {}
openDialog() {
this.dialogService.open(StoryDialogContentComponent, {
data: {
animal: "panda",
},
});
}
}
@Component({
template: `
Dialog Title
Dialog body text goes here.
Animal: {{ animal }}
`,
})
class StoryDialogContentComponent {
constructor(public dialogRef: DialogRef, @Inject(DIALOG_DATA) private data: Animal) {}
get animal() {
return this.data?.animal;
}
}
export default {
title: "Component Library/Dialogs/Service/Simple",
component: StoryDialogComponent,
decorators: [
moduleMetadata({
declarations: [
StoryDialogContentComponent,
DialogCloseDirective,
DialogTitleContainerDirective,
SimpleDialogComponent,
],
imports: [SharedModule, IconButtonModule, ButtonModule, DialogModule],
providers: [
DialogService,
{
provide: I18nService,
useFactory: () => {
return new I18nMockService({
close: "Close",
});
},
},
],
}),
],
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library",
},
},
} as Meta;
type Story = StoryObj;
export const Default: Story = {};