carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/input/stories/input.stories.ts

@@ -1,1159 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { InputComponent } from '../input.component';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { CustomValidators } from '../../../validators/custom-validators';
-import { ignoreWhenAutofilled } from '../../../utils/autofill-validators';
-
-import { INPUT_CHARACTER_SETS } from '../../../utils/constants';
-
-const meta: Meta<InputComponent> = {
-  title: 'Components/Input',
-  component: InputComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [ReactiveFormsModule],
-    }),
-  ],
-  argTypes: {
-    id: {
-      control: 'text',
-      table: {
-        defaultValue: {
-          summary: 'undefined',
-        },
-      },
-    },
-    config: {
-      control: 'object',
-      description:
-        "Configuration object for the input's behavior and appearance. It is provided by the parent component as an Angular input() signal. Read more in the section above for all available properties.",
-      table: {
-        defaultValue: {
-          summary: '{}',
-        },
-      },
-    },
-    options: {
-      control: 'object',
-      table: {
-        defaultValue: {
-          summary: '[]',
-        },
-      },
-    },
-    // Outputs
-    onAdd: {
-      table: { category: 'outputs', defaultValue: { summary: 'null' } },
-    },
-    onSelectionChange: {
-      table: { category: 'outputs', defaultValue: { summary: 'null' } },
-    },
-    onOptionAdded: {
-      table: { category: 'outputs', defaultValue: { summary: 'null' } },
-    },
-  },
-  args: {
-    id: 'my-input',
-    config: {
-      type: 'text',
-      name: 'defaultInput',
-      required: false,
-      alignment: 'left',
-      inverse: false,
-      icon: null,
-      dropdown: undefined,
-      search: false,
-      add: false,
-      placeholderBehavior: 'dynamic',
-      label: 'text',
-      mask: undefined,
-      min: undefined,
-      max: undefined,
-      autocomplete: undefined,
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<InputComponent>;
-
-// --- Stories ---
-
-export const Default: Story = {
-  args: {
-    id: 'default-input',
-    config: {
-      type: 'text',
-      name: 'Default input',
-      required: false,
-      alignment: 'left',
-      inverse: false,
-      icon: null,
-      dropdown: undefined,
-      search: false,
-      add: false,
-      placeholderBehavior: 'dynamic',
-      label: 'text',
-      mask: undefined,
-      min: undefined,
-      max: undefined,
-      autocomplete: undefined,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl(),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input" [isLoading]="true"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const Required: Story = {
-  args: {
-    id: 'default-input',
-    config: {
-      type: 'text',
-      name: 'Required input',
-      required: true,
-      alignment: 'left',
-      icon: null,
-      inverse: false,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: null, disabled: false }, [
-          Validators.required,
-          Validators.maxLength(3),
-        ]),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const RightAligned: Story = {
-  args: {
-    id: 'default-input',
-    config: {
-      type: 'text',
-      name: 'Right aligned input',
-      alignment: 'right',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl(),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const IconInput: Story = {
-  args: {
-    id: 'icon-input',
-    config: {
-      type: 'text',
-      name: 'Input with icon',
-      icon: 'cai-email',
-      label: 'email',
-    },
-  },
-
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }, [
-          Validators.required,
-          Validators.email,
-        ]),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const IconInputRightAligned: Story = {
-  args: {
-    id: 'icon-input',
-    config: {
-      type: 'text',
-      name: 'Input with icon',
-      icon: 'cai-email',
-      label: 'email',
-      alignment: 'right',
-    },
-  },
-
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl(),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const PasswordInput: Story = {
-  args: {
-    id: 'password-input',
-    config: {
-      type: 'password',
-      name: 'Password input',
-      required: false,
-      alignment: 'left',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const AccountInput: Story = {
-  args: {
-    id: 'account-input',
-    config: {
-      type: 'account',
-      name: 'Account input',
-      required: false,
-      alignment: 'left',
-      reveal: 4,
-      max: 17,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl(),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const PasswordInputWithRequirements: Story = {
-  args: {
-    id: 'password-input',
-    config: {
-      type: 'password',
-      name: 'Password',
-      required: true,
-      passwordRequirements: true,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }, [
-          Validators.required,
-          Validators.minLength(8),
-          CustomValidators.hasNumber(),
-          CustomValidators.hasSymbol(),
-          CustomValidators.hasUppercase(),
-        ]),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const NumberInput: Story = {
-  args: {
-    id: 'number-input',
-    config: {
-      type: 'number',
-      name: 'Number input',
-      required: false,
-      alignment: 'right',
-      min: 0,
-      max: 0.001,
-      icon: 'cai-money',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl(),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const NumberInputWithFormattingDisabled: Story = {
-  args: {
-    id: 'number-input',
-    config: {
-      type: 'number',
-      name: 'Number input',
-      required: false,
-      alignment: 'right',
-      min: 0,
-      max: 999999,
-      icon: 'cai-money',
-      isNumberFormattingDisabled: true,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl(),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-      <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const NumberInputWithButtons: Story = {
-  args: {
-    id: 'number-input',
-    config: {
-      type: 'number',
-      name: 'Number input',
-      required: false,
-      alignment: 'right',
-      min: 0,
-      max: 999999,
-      withButtons: true,
-      hasResetButton: true,
-      step: 'automatic',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: 1000, disabled: false }, [
-          Validators.required,
-          Validators.min(200),
-          Validators.max(999999),
-        ]),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const NumberInputWithDecimalsDisabled: Story = {
-  args: {
-    id: 'number-input',
-    config: {
-      type: 'number',
-      name: 'Number input',
-      required: false,
-      alignment: 'right',
-      min: 0,
-      max: 999999,
-      icon: 'cai-money',
-      disableDecimals: true,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl(),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const DisabledInput: Story = {
-  args: {
-    id: 'disabled-input',
-    config: {
-      type: 'text',
-      name: 'Disabled input',
-      required: true,
-      alignment: 'left',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: true }),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const DisabledContentfulInput: Story = {
-  args: {
-    id: 'disabled-input',
-    config: {
-      type: 'text',
-      name: 'Disabled input with content',
-      required: true,
-      alignment: 'left',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: 'Content', disabled: true }),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const MaxValue: Story = {
-  args: {
-    id: 'default-input',
-    config: {
-      type: 'text',
-      name: 'Capped max value',
-      alignment: 'left',
-      max: 10,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl(),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const MaskedPhoneValue: Story = {
-  args: {
-    id: 'default-input',
-    config: {
-      name: 'Phone Number',
-      alignment: 'left',
-      mask: '(000) 000-0000',
-      icon: 'cai-phone',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const MaskedPhoneValueRequired: Story = {
-  args: {
-    id: 'default-input',
-    config: {
-      type: 'text',
-      name: 'Phone Number',
-      alignment: 'left',
-      mask: '(000) 000-0000',
-      icon: 'cai-phone',
-      required: true,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '(123) 456-7890', disabled: false }, [
-          Validators.required,
-        ]),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 150px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const TextTransform: Story = {
-  args: {
-    id: 'transform-input',
-    config: {
-      type: 'text',
-      name: 'Text Transform',
-      textTransform: 'uppercase',
-      textTransformExceptions: ['a', 'b', 'c'],
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl(),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const LoginForm: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        email: new FormControl(
-          { value: null, disabled: false },
-          ignoreWhenAutofilled(Validators.required, Validators.email),
-        ),
-        password: new FormControl(
-          { value: null, disabled: false },
-          ignoreWhenAutofilled(Validators.required),
-        ),
-      }),
-      configA: {
-        type: 'text',
-        name: 'Email',
-        label: 'email',
-        autocomplete: 'username',
-        icon: 'cai-email',
-      },
-      configB: {
-        type: 'password',
-        name: 'Password',
-        label: 'password',
-        autocomplete: 'current-password',
-      },
-      onSubmit: (form: FormGroup) => {
-        console.log(form.value);
-      },
-      onAutofill: () => {
-        console.log('autofilled');
-      },
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px; display: flex; flex-direction: column; gap: 36px" (ngSubmit)="onSubmit(form)">
-        <cai-input [id]="'email'" [config]="configA" formControlName="email" (onAutofill)="onAutofill()"></cai-input>
-        <cai-input [id]="'pass'" [config]="configB" formControlName="password" (onAutofill)="onAutofill()"></cai-input>
-        <button type="submit">Submit</button>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-      <pre style="margin-top: 12px">{{ form.status | json }}</pre>
-    `,
-  }),
-};
-
-export const CustomErrors: Story = {
-  args: {
-    id: 'custom-errors',
-    config: {
-      type: 'text',
-      name: 'Custom errors',
-      customErrors: [
-        {
-          name: 'required',
-          message: ';)',
-        },
-      ],
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }, [
-          Validators.required,
-        ]),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const SubcontentDropdown: Story = {
-  args: {
-    id: 'subcontent-dropdown-input',
-    config: {
-      type: 'number',
-      name: 'Subcontent',
-      dropdown: 'subcontent',
-      inTable: true,
-      optionLabel: 'name',
-    },
-    preselectedUnit: 'Truckload',
-    options: [
-      { id: 1, name: 'Box' },
-      { id: 2, name: 'Pallet' },
-      { id: 3, name: 'Truckload' },
-      { id: 4, name: 'Trailerload' },
-      { id: 5, name: 'Container' },
-      { id: 6, name: 'Other' },
-    ],
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: 3333, disabled: false }, [
-          Validators.required,
-        ]),
-      }),
-      onSelectionChange: (value: number) => {
-        console.log(value);
-      },
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input" [options]="options" [preselectedUnit]="preselectedUnit" (onSelectionChange)="onSelectionChange($event)"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const isEdit: Story = {
-  args: {
-    id: 'subcontent-dropdown-input',
-    config: {
-      type: 'text',
-      name: 'Editing',
-      isEdit: true,
-      autofocus: true,
-      placeholderBehavior: 'hidden',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }),
-      }),
-      onAddItem: (value: number) => {
-        console.log(value);
-      },
-      onBlur: () => {
-        console.log('blur');
-      },
-      onClear: () => {
-        console.log('clear');
-      },
-    },
-    template: `
-      <form [formGroup]="form" style="width: 100px;">
-        <cai-input [id]="id" [config]="config" formControlName="input" (onOptionAdded)="onAddItem($event)"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const DisabledCharacters: Story = {
-  args: {
-    id: 'disabled-characters',
-    config: {
-      type: 'text',
-      name: 'Disabled characters',
-      disabledCharacters: [
-        ...INPUT_CHARACTER_SETS.SPECIAL,
-        ...INPUT_CHARACTER_SETS.DIGITS,
-      ],
-    },
-  },
-
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }, [
-          Validators.required,
-        ]),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const EnabledCharacters: Story = {
-  args: {
-    id: 'enabled-characters',
-    config: {
-      type: 'text',
-      name: 'Enabled characters',
-      enabledCharacters: [...INPUT_CHARACTER_SETS.LETTERS],
-      textTransform: 'capitalize',
-    },
-  },
-
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }, [
-          Validators.required,
-        ]),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const SpacesAllowed: Story = {
-  args: {
-    id: 'spaces-allowed',
-    config: {
-      type: 'text',
-      name: 'First Name',
-      disabledCharacters: [
-        ...INPUT_CHARACTER_SETS.SPECIAL_EXCEPT_NAME_FRIENDLY,
-      ],
-      spacesAllowed: 1,
-      textTransform: 'capitalize',
-      max: 26,
-    },
-  },
-
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }, [
-          Validators.required,
-        ]),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const MaskedSSN: Story = {
-  args: {
-    id: 'default-input',
-    config: {
-      name: 'SSN',
-      mask: '000-00-0000',
-      type: 'password',
-      reveal: 4,
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const ConditionalDropdownError: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        inputA: new FormControl({ value: '', disabled: false }, [
-          Validators.required,
-        ]),
-        inputB: new FormControl({ value: '', disabled: false }, [
-          Validators.required,
-        ]),
-      }),
-      configA: {
-        type: 'number',
-        name: 'Advance',
-        required: true,
-        alignment: 'right',
-        icon: 'cai-money',
-        placeholderBehavior: 'static',
-        iconColor: '#56B4AC',
-        prefix: '$',
-        max: 999999,
-        errorBehavior: 'static',
-      },
-      configB: {
-        type: 'text',
-        name: 'Pay Type',
-        required: true,
-        alignment: 'right',
-        icon: 'cai-count',
-        placeholderBehavior: 'static',
-        dropdown: true,
-        search: true,
-        optionLabel: 'label',
-        errorBehavior: 'static',
-      },
-      optionsA: [
-        {
-          id: 1,
-          label: 'Lorem ipsum',
-        },
-        {
-          id: 2,
-          label: 'dolor sit amet',
-        },
-        {
-          id: 3,
-          label: 'consectetur adipiscing elit i kusur',
-        },
-      ],
-      optionsB: [
-        {
-          id: 1,
-          label: 'Lorem ipsum',
-        },
-      ],
-      tab: 0,
-      toggle() {
-        this['tab'] = this['tab'] === 0 ? 1 : 0;
-      },
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-      @if(tab === 0) {
-        <cai-input [id]="'inputA'" [config]="configA" [options]="optionsA" formControlName="inputA"></cai-input>
-      } @else {
-        <cai-input [id]="'inputB'" [config]="configB" [options]="optionsB" formControlName="inputB"></cai-input>
-      }
-      </form>
-      <button (click)="toggle()">Toggle</button>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const Strikethrough: Story = {
-  args: {
-    id: 'strikethrough',
-    config: {
-      type: 'number',
-      name: 'Strikethrough',
-      strikethrough: true,
-      icon: 'cai-money',
-      alignment: 'right',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: 99999, disabled: false }),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};
-
-export const AutoPlacementTest: Story = {
-  args: {
-    id: 'auto-placement-input',
-    config: {
-      type: 'text',
-      name: 'Dropdown Placement',
-      dropdown: true,
-      search: true,
-      optionLabel: 'name',
-    },
-  },
-
-  render: (args) => {
-    const marginBottom = { value: 0 };
-    return {
-      props: {
-        ...args,
-        formTop: new FormGroup({
-          input: new FormControl({ value: null, disabled: false }),
-        }),
-        formBottom: new FormGroup({
-          input: new FormControl({ value: null, disabled: false }),
-          input2: new FormControl({ value: 1, disabled: false }),
-        }),
-        marginBottom,
-        onInput: (event: Event) => {
-          marginBottom.value = Number((event.target as HTMLInputElement).value);
-        },
-        optionsA: [
-          { id: 1, name: 'Option 1' },
-          { id: 2, name: 'Option 2' },
-          { id: 3, name: 'Option 3' },
-          { id: 4, name: 'Option 4' },
-          { id: 5, name: 'Option 5' },
-          { id: 6, name: 'Option 6' },
-          { id: 7, name: 'Option 7' },
-          { id: 8, name: 'Option 8' },
-          { id: 9, name: 'Option 9' },
-          { id: 10, name: 'Option 10' },
-        ],
-        optionsB: [
-          { id: 1, name: 'Option 1' },
-          { id: 2, name: 'Option 2' },
-          { id: 3, name: 'Option 3' },
-          { id: 4, name: 'Option 4' },
-        ],
-      },
-      template: `
-    <div style="height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 48px; box-sizing: border-box;">
-      <!-- Top section -->
-      <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-start;">
-        <form [formGroup]="formTop" style="width: 280px;">
-          <cai-input [id]="'top-input'" [config]="config" [options]="optionsA" formControlName="input"></cai-input>
-        </form>
-      </div>
-
-      <!-- Bottom section -->
-      <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end;" [style.margin-bottom.px]="marginBottom.value">
-        <form [formGroup]="formBottom" style="width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;">
-          <cai-input [id]="'bottom-input'" [config]="config" [options]="optionsA" formControlName="input"></cai-input>
-          <cai-input [id]="'bottom-input2'" [config]="config" [options]="optionsB" formControlName="input2"></cai-input>
-          <div style="opacity: 0.5; display: flex; justify-content: space-between; align-items: center; gap: 4px;">
-          <p style="font-size: 12px; width: 160px; margin: 0;">Margin Bottom: {{ marginBottom.value }}px</p>
-          <input tabindex="-1" type="range" min="0" max="250" [value]="marginBottom.value" style="height: 2px; flex: 1; min-width: 0;" (input)="onInput($event)" />
-          </div>
-        </form>
-      </div>
-    </div>
-    `,
-    };
-  },
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const AutoPlacementTestModal: Story = {
-  args: {
-    id: 'auto-placement-input',
-    config: {
-      type: 'text',
-      name: 'Dropdown Placement',
-      dropdown: true,
-      search: true,
-      optionLabel: 'name',
-    },
-  },
-
-  render: (args) => {
-    const marginBottom = { value: 0 };
-    return {
-      props: {
-        ...args,
-        formTop: new FormGroup({
-          input: new FormControl({ value: null, disabled: false }),
-        }),
-        formBottom: new FormGroup({
-          input: new FormControl({ value: null, disabled: false }),
-          input2: new FormControl({ value: 1, disabled: false }),
-        }),
-        marginBottom,
-        onInput: (event: Event) => {
-          marginBottom.value = Number((event.target as HTMLInputElement).value);
-        },
-        optionsA: [
-          { id: 1, name: 'Option 1' },
-          { id: 2, name: 'Option 2' },
-          { id: 3, name: 'Option 3' },
-          { id: 4, name: 'Option 4' },
-          { id: 5, name: 'Option 5' },
-          { id: 6, name: 'Option 6' },
-          { id: 7, name: 'Option 7' },
-          { id: 8, name: 'Option 8' },
-          { id: 9, name: 'Option 9' },
-          { id: 10, name: 'Option 10' },
-        ],
-        optionsB: [
-          { id: 1, name: 'Option 1' },
-          { id: 2, name: 'Option 2' },
-          { id: 3, name: 'Option 3' },
-          { id: 4, name: 'Option 4' },
-        ],
-      },
-      template: `
-    <div style="height: 100vh; overflow: auto; background-color: #e0e0e0;">
-      <div class="modal-container" style="height: 150vh; display: flex; flex-direction: column; overflow: hidden; margin: 48px; box-sizing: border-box; background-color: #fff; padding: 48px; border-radius: 6px; border: 1px solid #e0e0e0;">
-        <!-- Top section -->
-        <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-start;">
-          <form [formGroup]="formTop" style="width: 280px;">
-            <cai-input [id]="'top-input'" [config]="config" [options]="optionsA" formControlName="input"></cai-input>
-          </form>
-        </div>
-
-        <!-- Bottom section -->
-        <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end;" [style.margin-bottom.px]="marginBottom.value">
-          <form [formGroup]="formBottom" style="width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;">
-            <cai-input [id]="'bottom-input'" [config]="config" [options]="optionsA" formControlName="input"></cai-input>
-            <cai-input [id]="'bottom-input2'" [config]="config" [options]="optionsB" formControlName="input2"></cai-input>
-            <div style="opacity: 0.5; display: flex; justify-content: space-between; align-items: center; gap: 4px;">
-            <p style="font-size: 12px; width: 160px; margin: 0;">Margin Bottom: {{ marginBottom.value }}px</p>
-            <input tabindex="-1" type="range" min="0" max="250" [value]="marginBottom.value" style="height: 2px; flex: 1; min-width: 0;" (input)="onInput($event)" />
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-    `,
-    };
-  },
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Placeholder: Story = {
-  args: {
-    id: 'placeholder',
-    config: {
-      type: 'text',
-      name: 'Placeholder',
-      placeholder: 'Placeholder',
-    },
-  },
-  render: (args) => ({
-    props: {
-      ...args,
-      form: new FormGroup({
-        input: new FormControl({ value: '', disabled: false }),
-      }),
-    },
-    template: `
-      <form [formGroup]="form" style="width: 280px;">
-        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
-      </form>
-      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
-    `,
-  }),
-};