2022-11-17 17:10:01 +01:00
|
|
|
import { DIALOG_DATA, DialogModule, DialogRef } from "@angular/cdk/dialog";
|
2022-08-05 17:45:36 +02:00
|
|
|
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-11-17 17:10:01 +01:00
|
|
|
import { IconButtonModule } from "../icon-button";
|
|
|
|
import { SharedModule } from "../shared";
|
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({
|
|
|
|
template: `<button bitButton (click)="openDialog()">Open Dialog</button>`,
|
|
|
|
})
|
|
|
|
class StoryDialogComponent {
|
|
|
|
constructor(public dialogService: DialogService) {}
|
|
|
|
|
|
|
|
openDialog() {
|
|
|
|
this.dialogService.open(StoryDialogContentComponent, {
|
|
|
|
data: {
|
|
|
|
animal: "panda",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
template: `
|
2022-11-17 17:10:01 +01:00
|
|
|
<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>
|
2023-05-01 11:11:39 +02:00
|
|
|
<ng-container bitDialogFooter>
|
2022-08-05 17:45:36 +02:00
|
|
|
<button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
|
|
|
|
<button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
|
2023-05-01 11:11:39 +02:00
|
|
|
</ng-container>
|
2022-08-05 17:45:36 +02:00
|
|
|
</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-11-17 17:10:01 +01:00
|
|
|
imports: [SharedModule, ButtonModule, DialogModule, IconButtonModule],
|
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({});
|