carriera-intern 0.0.0

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

@@ -0,0 +1,1159 @@
+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>
+    `,
+  }),
+};