carriera-intern 0.0.0

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

@@ -0,0 +1,150 @@
+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 { dispatches } from '../mock/dispatches.json';
+import { brokers } from '../mock/brokers.json';
+import { contacts } from '../mock/contacts.json';
+import { shippers } from '../mock/shipper.json';
+import { noboard } from '../mock/noboard.json';
+import { dispatchers } from '../mock/dispatchers.json';
+import { truckTypes, trailerTypes } from '../mock/truck_trailer.json';
+import { generalCommodities } from '../mock/commodities.json';
+import { hazardous } from '../mock/hazardous.json';
+import { dispatches as newLoadModalRes } from '../mock/new-load-modal-res.json';
+import { splitDrivers } from '../mock/split-driver.json';
+import { splitTrucks } from '../mock/split-truck.json';
+import { splitTrailers } from '../mock/split-trailer.json';
+
+const meta: Meta<InputComponent> = {
+  title: 'Components/Input/Load',
+  component: InputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  argTypes: {
+    config: {
+      control: 'object',
+      defaultValue: {
+        summary: {},
+      },
+    },
+  },
+  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 StaticRightAlignedNumber: Story = {
+  args: {
+    id: 'icon-input',
+    config: {
+      type: 'number',
+      name: 'Static Placeholder',
+      required: true,
+      alignment: 'right',
+      icon: 'cai-money-additional',
+      placeholderBehavior: 'static',
+      iconColor: '#F89B2E',
+    },
+  },
+  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 StaticRightAlignedNumberDisabled: Story = {
+  args: {
+    id: 'icon-input',
+    config: {
+      type: 'number',
+      name: 'Static Placeholder',
+      required: true,
+      alignment: 'right',
+      icon: 'cai-money-additional',
+      placeholderBehavior: 'static',
+      iconColor: '#F89B2E',
+      disabled: 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 LoadBillingDropdown: Story = {
+  args: {
+    id: 'icon-input',
+    config: {
+      type: 'text',
+      name: 'Static Placeholder',
+      required: true,
+      alignment: 'right',
+      icon: 'cai-count',
+      placeholderBehavior: 'static',
+      dropdown: 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>
+    `,
+  }),
+};

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

@@ -0,0 +1,225 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { InputComponent } from '../input.component';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+import { ReactiveFormsModule } from '@angular/forms';
+
+const meta: Meta<InputComponent> = {
+  title: 'Components/Input/Placeholder Behavior',
+  component: InputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  argTypes: {
+    config: {
+      control: 'object',
+      defaultValue: {
+        summary: {},
+      },
+    },
+  },
+  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 behavior',
+      placeholderBehavior: 'dynamic',
+    },
+  },
+  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 FadePlaceholder: Story = {
+  args: {
+    id: 'icon-input',
+    config: {
+      type: 'text',
+      name: 'Fade Placeholder',
+      required: false,
+      alignment: 'left',
+      icon: 'cai-email',
+      placeholderBehavior: 'fade',
+    },
+  },
+  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 FadePlaceholderRight: Story = {
+  args: {
+    id: 'icon-input',
+    config: {
+      type: 'text',
+      name: 'Fade Placeholder',
+      icon: 'cai-email',
+      alignment: 'right',
+      required: true,
+      placeholderBehavior: 'fade',
+    },
+  },
+  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 StaticRightAlignedNumber: Story = {
+  args: {
+    id: 'icon-input',
+    config: {
+      type: 'number',
+      name: 'Static Placeholder',
+      required: true,
+      alignment: 'right',
+      icon: 'cai-money-additional',
+      placeholderBehavior: 'static',
+      iconColor: '#F89B2E',
+    },
+  },
+  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 StaticError: Story = {
+  args: {
+    id: 'error-input',
+    config: {
+      type: 'number',
+      name: 'Static Error',
+      required: true,
+      alignment: 'right',
+      icon: 'cai-money-additional',
+      placeholderBehavior: 'static',
+      iconColor: '#F89B2E',
+      errorBehavior: 'static',
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl(
+          {
+            value: 2,
+            disabled: false,
+          },
+          [Validators.required, Validators.max(10)]
+        ),
+      }),
+    },
+    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 FloatingError: Story = {
+  args: {
+    id: 'error-input',
+    config: {
+      name: 'Floating Error',
+      required: true,
+      errorBehavior: 'floating',
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl(
+          {
+            value: 2,
+            disabled: false,
+          },
+          [Validators.required, Validators.max(10)]
+        ),
+      }),
+    },
+    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>
+    `,
+  }),
+};

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

@@ -0,0 +1,264 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { InputComponent } from '../input.component';
+import { FormControl, FormGroup } from '@angular/forms';
+
+import { ReactiveFormsModule } from '@angular/forms';
+
+const meta: Meta<InputComponent> = {
+  title: 'Components/Input/Subcontent',
+  component: InputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  argTypes: {
+    config: {
+      control: 'object',
+      defaultValue: {
+        summary: {},
+      },
+    },
+  },
+  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 Subcontent: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Default input',
+      subcontent: 'lbs',
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl(),
+      }),
+    },
+    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 SubcontentWithIcon: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'number',
+      name: 'Subcontent with icon',
+      subcontent: 'USD',
+      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 SubcontentWithIconAndDrop: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'number',
+      name: 'Subcontent with icon',
+      subcontent: 'USD',
+      icon: 'cai-money',
+      dropdown: 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 SubcontentWithDrop: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'number',
+      name: 'Subcontent with icon',
+      subcontent: 'USD',
+      dropdown: 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 NumberInputWithSubcontent: Story = {
+  args: {
+    id: 'number-input',
+    config: {
+      type: 'number',
+      name: 'Number input',
+      required: false,
+      min: 0,
+      max: 999999,
+      subcontent: 'months',
+      withButtons: 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 SubcontentRight: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Default input',
+      subcontent: 'lbs',
+      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 SubcontentWithIconRight: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'number',
+      name: 'Subcontent with icon',
+      subcontent: 'USD',
+      icon: 'cai-money',
+      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 NumberInputWithSubcontentRight: Story = {
+  args: {
+    id: 'number-input',
+    config: {
+      type: 'number',
+      name: 'Number input',
+      required: false,
+      min: 0,
+      max: 999999,
+      subcontent: 'months',
+      withButtons: true,
+      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>
+    `,
+  }),
+};