carriera-intern 0.0.0 → 1.1.76

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

@@ -1,405 +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 { 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

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