2022-08-05 17:45:36 +02:00
|
|
|
import { DialogModule, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
|
|
|
|
import { Component, Inject } from "@angular/core";
|
|
|
|
import { Meta, moduleMetadata, Story } from "@storybook/angular";
|
|
|
|
|
2022-09-08 10:37:23 +02:00
|
|
|
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
|
|
|
|
2022-08-05 17:45:36 +02:00
|
|
|
import { ButtonModule } from "../button";
|
2022-09-08 10:37:23 +02:00
|
|
|
import { I18nMockService } from "../utils/i18n-mock.service";
|
2022-08-05 17:45:36 +02:00
|
|
|
|
|
|
|
import { DialogService } from "./dialog.service";
|
|
|
|
import { DialogComponent } from "./dialog/dialog.component";
|
2022-09-08 10:37:23 +02:00
|
|
|
import { DialogCloseDirective } from "./directives/dialog-close.directive";
|
|
|
|
import { DialogTitleContainerDirective } from "./directives/dialog-title-container.directive";
|
2022-08-05 17:45:36 +02:00
|
|
|
|
|
|
|
interface Animal {
|
|
|
|
animal: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: "app-story-dialog",
|
|
|
|
template: `<button bitButton (click)="openDialog()">Open Dialog</button>`,
|
|
|
|
})
|
|
|
|
class StoryDialogComponent {
|
|
|
|
constructor(public dialogService: DialogService) {}
|
|
|
|
|
|
|
|
openDialog() {
|
|
|
|
this.dialogService.open(StoryDialogContentComponent, {
|
|
|
|
data: {
|
|
|
|
animal: "panda",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: "story-dialog-content",
|
|
|
|
template: `
|
|
|
|
<bit-dialog [dialogSize]="large">
|
2022-09-08 10:37:23 +02:00
|
|
|
<span bitDialogTitle>Dialog Title</span>
|
|
|
|
<span bitDialogContent>
|
2022-08-05 17:45:36 +02:00
|
|
|
Dialog body text goes here.
|
|
|
|
<br />
|
|
|
|
Animal: {{ animal }}
|
|
|
|
</span>
|
2022-09-08 10:37:23 +02:00
|
|
|
<div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
|
2022-08-05 17:45:36 +02:00
|
|
|
<button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
|
|
|
|
<button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
|
|
|
|
</div>
|
|
|
|
</bit-dialog>
|
|
|
|
`,
|
|
|
|
})
|
|
|
|
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",
|
|
|
|
component: StoryDialogComponent,
|
|
|
|
decorators: [
|
|
|
|
moduleMetadata({
|
2022-09-08 10:37:23 +02:00
|
|
|
declarations: [
|
|
|
|
DialogCloseDirective,
|
|
|
|
DialogComponent,
|
|
|
|
DialogTitleContainerDirective,
|
|
|
|
StoryDialogContentComponent,
|
|
|
|
],
|
2022-08-05 17:45:36 +02:00
|
|
|
imports: [ButtonModule, DialogModule],
|
2022-09-08 10:37:23 +02:00
|
|
|
providers: [
|
|
|
|
DialogService,
|
|
|
|
{
|
|
|
|
provide: I18nService,
|
|
|
|
useFactory: () => {
|
|
|
|
return new I18nMockService({
|
|
|
|
close: "Close",
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
2022-08-05 17:45:36 +02:00
|
|
|
}),
|
|
|
|
],
|
|
|
|
parameters: {
|
|
|
|
design: {
|
|
|
|
type: "figma",
|
|
|
|
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
} as Meta;
|
|
|
|
|
|
|
|
const Template: Story<StoryDialogComponent> = (args: StoryDialogComponent) => ({
|
|
|
|
props: args,
|
|
|
|
});
|
|
|
|
|
|
|
|
export const Default = Template.bind({});
|