96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
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: `<button bitButton (click)="openDialog()">Open Simple Dialog</button>`,
|
|
})
|
|
class StoryDialogComponent {
|
|
constructor(public dialogService: DialogService) {}
|
|
|
|
openDialog() {
|
|
this.dialogService.open(StoryDialogContentComponent, {
|
|
data: {
|
|
animal: "panda",
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
template: `
|
|
<bit-simple-dialog>
|
|
<span bitDialogTitle>Dialog Title</span>
|
|
<span bitDialogContent>
|
|
Dialog body text goes here.
|
|
<br />
|
|
Animal: {{ animal }}
|
|
</span>
|
|
<ng-container bitDialogFooter>
|
|
<button bitButton buttonType="primary" (click)="dialogRef.close()">Save</button>
|
|
<button bitButton buttonType="secondary" bitDialogClose>Cancel</button>
|
|
</ng-container>
|
|
</bit-simple-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/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<StoryDialogComponent>;
|
|
|
|
export const Default: Story = {};
|