carriera-intern 0.0.0

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

@@ -0,0 +1,405 @@
+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 { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+
+const meta: Meta<InputComponent> = {
+  title: 'Components/Input/Dropdown',
+  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 WithDropdown: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Dropdown',
+      search: true,
+      dropdown: true,
+      optionLabel: 'name',
+    },
+    options: [
+      {
+        id: 1,
+        name: 'Lorem ipsum',
+      },
+      {
+        id: 2,
+        name: 'dolor sit amet',
+      },
+      {
+        id: 3,
+        name: 'consectetur adipiscing elit',
+      },
+    ],
+  },
+  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" [options]="options"></cai-input>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const Preselected: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Dropdown',
+      search: true,
+      dropdown: true,
+      optionLabel: 'name',
+    },
+    options: [
+      {
+        id: 0,
+        name: 'Lorem ipsum',
+      },
+      {
+        id: 1,
+        name: 'dolor sit amet',
+      },
+      {
+        id: 2,
+        name: 'consectetur adipiscing elit',
+      },
+    ],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl({ value: 0, disabled: false }, [
+          Validators.required,
+        ]),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 280px;">
+        <cai-input [id]="id" [config]="config" formControlName="input" [options]="options"></cai-input>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const DropdownWithIcon: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Dropdown',
+      icon: 'cai-label',
+      dropdown: true,
+      optionLabel: 'businessName',
+    },
+    options: [
+      {
+        id: 1,
+        businessName: 'Lorem ipsum',
+      },
+      {
+        id: 2,
+        businessName: 'dolor sit amet',
+      },
+      {
+        id: 3,
+        businessName: 'consectetur adipiscing elit',
+      },
+    ],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl(),
+      }),
+      onSelectedObject: (value: any) => {
+        console.log(value);
+      },
+    },
+    template: `
+      <form [formGroup]="form" style="width: 140px;">
+        <cai-input [id]="id" [config]="config" formControlName="input" [options]="options" (onSelectedObject)="onSelectedObject($event)"></cai-input>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const WithSearch: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Dropdown with Search',
+      dropdown: true,
+      search: true,
+      optionLabel: 'label',
+    },
+    options: [
+      {
+        id: 1,
+        label: 'Lorem ipsum',
+      },
+      {
+        id: 2,
+        label: 'dolor sit amet',
+      },
+      {
+        id: 3,
+        label: 'consectetur adipiscing elit',
+      },
+    ],
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl({ value: 1, disabled: false }, [
+          Validators.required,
+        ]),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 280px;">
+        <cai-input [id]="id" [config]="config" formControlName="input" [options]="options"></cai-input>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const WithDropdownAutocomplete: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Dropdown with Autocomplete',
+      dropdown: true,
+      search: true,
+      dropdownAutocomplete: true,
+      optionLabel: 'label',
+      optionValue: 'label',
+      textTransform: 'uppercase',
+    },
+    options: [
+      {
+        id: 1,
+        label: 'EXPRESS SERIES',
+      },
+      {
+        id: 2,
+        label: 'EXPRESS 1500',
+      },
+      {
+        id: 3,
+        label: 'EXPRESS 2500',
+      },
+      {
+        id: 4,
+        label: 'EXPRESS 3500',
+      },
+      {
+        id: 5,
+        label: 'CITY EXPRESS',
+      },
+    ],
+    isLoading: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl({ value: 'Lorem ipsum', disabled: false }, [
+          Validators.required,
+        ]),
+      }),
+    },
+    template: `
+        <form [formGroup]="form" style="width: 280px;">
+          <cai-input [id]="id" [config]="config" formControlName="input" [options]="options" [showNoResults]="false" [isLoading]="isLoading"></cai-input>
+        </form>
+        <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+      `,
+  }),
+};
+
+export const WithAdd: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Dropdown with Add',
+      writeAddValue: true,
+      required: false,
+      alignment: 'left',
+      icon: 'cai-email',
+      inverse: false,
+      dropdown: true,
+      search: true,
+      add: true,
+      optionLabel: 'businessName',
+    },
+    options: [
+      {
+        id: 1,
+        businessName: 'Lorem ipsum',
+      },
+      {
+        id: 2,
+        businessName: 'dolor sit amet',
+      },
+      {
+        id: 3,
+        businessName: 'consectetur adipiscing elit',
+      },
+    ],
+  },
+  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" [options]="options"></cai-input>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+@Component({
+  selector: 'ca-dropdown-in-popover-test',
+  imports: [CommonModule, NgbPopover, InputComponent, ReactiveFormsModule],
+  template: `
+    <div style="padding: 20px;">
+      <h2 style="margin-bottom: 20px;">Input Dropdown in Popover</h2>
+
+      <button
+        type="button"
+        class="btn btn-primary"
+        [ngbPopover]="popContent"
+        popoverTitle="Dropdown Input"
+        placement="bottom"
+      >
+        Open Dropdown Popover
+      </button>
+
+      <ng-template #popContent>
+        <div style="padding: 10px; min-width: 280px; z-index: 1000;">
+          <form [formGroup]="form">
+            <cai-input
+              [id]="id"
+              [config]="config"
+              formControlName="input"
+              [options]="options"
+            ></cai-input>
+          </form>
+        </div>
+      </ng-template>
+
+      <div
+        style="margin-top: 20px; padding: 15px; background-color: #e3f2fd; border-radius: 4px; border-left: 4px solid #2196f3;"
+      >
+        <p style="margin: 0;">
+          <strong>Instructions:</strong> Click the button to open a popover
+          containing the default input dropdown.
+        </p>
+      </div>
+    </div>
+  `,
+})
+class DropdownInPopoverTestComponent {
+  id = 'popover-input';
+  config = {
+    type: 'text',
+    name: 'Dropdown',
+    search: true,
+    dropdown: true,
+    optionLabel: 'name',
+  };
+  options = [
+    {
+      id: 1,
+      name: 'Lorem ipsum',
+    },
+    {
+      id: 2,
+      name: 'dolor sit amet',
+    },
+    {
+      id: 3,
+      name: 'consectetur adipiscing elit',
+    },
+  ];
+  form = new FormGroup({
+    input: new FormControl(),
+  });
+}
+
+export const DropdownInPopover: StoryObj = {
+  render: () => ({
+    props: {},
+    template: `<ca-dropdown-in-popover-test></ca-dropdown-in-popover-test>`,
+    moduleMetadata: {
+      imports: [DropdownInPopoverTestComponent],
+    },
+  }),
+};

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

@@ -0,0 +1,232 @@
+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 { dropdownOptions } from './dropdown-options';
+
+const meta: Meta<InputComponent> = {
+  title: 'Components/Input/Inverse',
+  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,
+    },
+  },
+  globals: {
+    backgrounds: { value: 'dark' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<InputComponent>;
+
+// --- Stories ---
+
+export const Inverse: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Inverse',
+      inverse: 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="color: white; margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const WithIcon: Story = {
+  args: {
+    id: 'default-input',
+    config: {
+      type: 'text',
+      name: 'Inverse',
+      inverse: true,
+      icon: 'cai-email',
+    },
+  },
+  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="color: white; margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const NumberInput: Story = {
+  args: {
+    id: 'number-input',
+    config: {
+      type: 'number',
+      name: 'Number input',
+      inverse: true,
+      min: 0,
+      max: 999999,
+      icon: 'cai-money',
+      alignment: 'left',
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl({ value: 1000, disabled: false }, [
+          Validators.required,
+          Validators.min(200),
+          Validators.max(4000),
+        ]),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 280px;">
+        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
+      </form>
+      <pre style="color: white; margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const Size22: Story = {
+  args: {
+    id: 'number-input',
+    config: {
+      type: 'number',
+      name: 'Number input',
+      inverse: true,
+      min: 0,
+      max: 999999,
+      icon: 'cai-email',
+      alignment: 'left',
+      size: 22,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl({ value: 1000, disabled: false }, [
+          Validators.required,
+          Validators.min(200),
+          Validators.max(4000),
+        ]),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 280px;">
+        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
+      </form>
+      <pre style="color: white; margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const Size22_2: Story = {
+  args: {
+    id: 'number-input',
+    config: {
+      type: 'number',
+      name: 'Number input',
+      inverse: true,
+      min: 0,
+      max: 999999,
+      size: 22,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl({ value: 1000, disabled: false }, [
+          Validators.required,
+          Validators.min(200),
+          Validators.max(4000),
+        ]),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 280px;">
+        <cai-input [id]="id" [config]="config" formControlName="input"></cai-input>
+      </form>
+      <pre style="color: white; margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const Size22_Dropdown: Story = {
+  args: {
+    id: 'number-input',
+    config: {
+      type: 'text',
+      name: 'Dropdown',
+      inverse: true,
+      hasStroke: true,
+      size: 22,
+      dropdown: true,
+      optionLabel: 'name',
+    },
+    options: dropdownOptions.basic,
+  },
+  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" [options]="options"></cai-input>
+      </form>
+      <pre style="color: white; margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};