2022-12-05 08:49:03 +01:00
|
|
|
import { Component, Input } from "@angular/core";
|
|
|
|
import { FormsModule, ReactiveFormsModule, FormBuilder } from "@angular/forms";
|
|
|
|
import { Meta, moduleMetadata, Story } from "@storybook/angular";
|
|
|
|
|
|
|
|
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
|
|
|
|
|
|
|
import { I18nMockService } from "../utils/i18n-mock.service";
|
|
|
|
|
|
|
|
import { RadioButtonModule } from "./radio-button.module";
|
|
|
|
|
|
|
|
const template = `
|
|
|
|
<form [formGroup]="formObj">
|
|
|
|
<bit-radio-group formControlName="radio" aria-label="Example radio group">
|
|
|
|
<bit-label *ngIf="label">Group of radio buttons</bit-label>
|
|
|
|
<bit-radio-button [value]="TestValue.First" id="radio-first">First</bit-radio-button>
|
|
|
|
<bit-radio-button [value]="TestValue.Second" id="radio-second">Second</bit-radio-button>
|
2023-01-10 22:35:52 +01:00
|
|
|
<bit-radio-button [value]="TestValue.Third" [disabled]="optionDisabled" id="radio-third">Third</bit-radio-button>
|
2022-12-05 08:49:03 +01:00
|
|
|
</bit-radio-group>
|
|
|
|
</form>`;
|
|
|
|
|
|
|
|
enum TestValue {
|
|
|
|
First,
|
|
|
|
Second,
|
|
|
|
Third,
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: "app-example",
|
|
|
|
template,
|
|
|
|
})
|
|
|
|
class ExampleComponent {
|
|
|
|
protected TestValue = TestValue;
|
|
|
|
|
|
|
|
protected formObj = this.formBuilder.group({
|
|
|
|
radio: TestValue.First,
|
|
|
|
});
|
|
|
|
|
|
|
|
@Input() label: boolean;
|
|
|
|
|
|
|
|
@Input() set selected(value: TestValue) {
|
|
|
|
this.formObj.patchValue({ radio: value });
|
|
|
|
}
|
|
|
|
|
2023-01-10 22:35:52 +01:00
|
|
|
@Input() set groupDisabled(disable: boolean) {
|
2022-12-05 08:49:03 +01:00
|
|
|
if (disable) {
|
|
|
|
this.formObj.disable();
|
|
|
|
} else {
|
|
|
|
this.formObj.enable();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-01-10 22:35:52 +01:00
|
|
|
@Input() optionDisabled = false;
|
|
|
|
|
2022-12-05 08:49:03 +01:00
|
|
|
constructor(private formBuilder: FormBuilder) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default {
|
|
|
|
title: "Component Library/Form/Radio Button",
|
|
|
|
component: ExampleComponent,
|
|
|
|
decorators: [
|
|
|
|
moduleMetadata({
|
|
|
|
declarations: [ExampleComponent],
|
|
|
|
imports: [FormsModule, ReactiveFormsModule, RadioButtonModule],
|
|
|
|
providers: [
|
|
|
|
{
|
|
|
|
provide: I18nService,
|
|
|
|
useFactory: () => {
|
|
|
|
return new I18nMockService({
|
|
|
|
required: "required",
|
|
|
|
inputRequired: "Input is required.",
|
|
|
|
inputEmail: "Input is not an email-address.",
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
],
|
|
|
|
parameters: {
|
|
|
|
design: {
|
|
|
|
type: "figma",
|
|
|
|
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=3930%3A16850&t=xXPx6GJYsJfuMQPE-4",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
args: {
|
|
|
|
selected: TestValue.First,
|
2023-01-10 22:35:52 +01:00
|
|
|
groupDisabled: false,
|
|
|
|
optionDisabled: false,
|
2022-12-05 08:49:03 +01:00
|
|
|
label: true,
|
|
|
|
},
|
|
|
|
argTypes: {
|
|
|
|
selected: {
|
|
|
|
options: [TestValue.First, TestValue.Second, TestValue.Third],
|
|
|
|
control: {
|
|
|
|
type: "inline-radio",
|
|
|
|
labels: {
|
|
|
|
[TestValue.First]: "First",
|
|
|
|
[TestValue.Second]: "Second",
|
|
|
|
[TestValue.Third]: "Third",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
} as Meta;
|
|
|
|
|
|
|
|
const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({
|
|
|
|
props: args,
|
2023-01-10 22:35:52 +01:00
|
|
|
template: `<app-example [selected]="selected" [groupDisabled]="groupDisabled" [optionDisabled]="optionDisabled" [label]="label"></app-example>`,
|
2022-12-05 08:49:03 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
export const Default = DefaultTemplate.bind({});
|