carriera-intern 0.0.0 → 1.1.76

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

@@ -1,507 +0,0 @@
-import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
-} from '@angular/forms';
-
-// modules
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
-// components
-import { CaiInputDatetimePickerComponent } from './cai-input-datetime-picker.component';
-
-const meta: Meta<CaiInputDatetimePickerComponent> = {
-  title: 'Components/DateTimePicker',
-  component: CaiInputDatetimePickerComponent,
-  tags: ['autodocs'],
-  decorators: [
-    moduleMetadata({
-      imports: [
-        // Module
-        ReactiveFormsModule,
-        NgbModule,
-      ],
-    }),
-  ],
-  argTypes: {
-    inputConfig: {
-      control: { type: 'object' },
-    },
-  },
-  args: {
-    inputConfig: {
-      name: 'datepicker',
-      isDisabled: false,
-      type: 'text',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<CaiInputDatetimePickerComponent>;
-
-const DateTimePickerTemplate: string = `
-  <form style='width: 400px' [formGroup]="form">
-    <cai-input-datetime-picker
-      formControlName="datetimepicker"
-      [inputConfig]="config"
-    >
-    </cai-input-datetime-picker>
-    <pre style="margin-top: 12px;">{{ form.value | json }}</pre>
-  </form>
-`;
-
-export const DatePicker: Story = {
-  render: (args) => {
-    return {
-      props: {
-        ...args,
-        config: {
-          name: 'datepicker',
-          label: 'Date',
-          placeholderIcon: 'date',
-        },
-        form: new FormGroup({
-          datetimepicker: new FormControl('', [Validators.required]),
-        }),
-      },
-      template: DateTimePickerTemplate,
-    };
-  },
-};
-
-export const TableDatePicker: Story = {
-  render: (args) => {
-    return {
-      props: {
-        ...args,
-        config: {
-          name: 'datepicker',
-          label: 'Date In Table',
-          placeholderIcon: 'date',
-          inTable: true,
-          isIconHidden: true,
-        },
-        form: new FormGroup({
-          datetimepicker: new FormControl('', [Validators.required]),
-        }),
-      },
-      template: DateTimePickerTemplate,
-    };
-  },
-};
-
-export const InverseDatePicker: Story = {
-  globals: {
-    backgrounds: { value: 'dark' },
-  },
-  render: (args) => {
-    return {
-      props: {
-        ...args,
-        config: {
-          name: 'datepicker',
-          label: 'Date Inverse',
-          placeholderIcon: 'date',
-          inverse: true,
-        },
-        form: new FormGroup({
-          datetimepicker: new FormControl('', [Validators.required]),
-        }),
-      },
-      template: DateTimePickerTemplate,
-    };
-  },
-};
-
-export const BillingDatePicker: Story = {
-  render: (args) => {
-    return {
-      props: {
-        ...args,
-        config: {
-          name: 'datepicker',
-          label: 'Date Billing',
-          placeholderIcon: 'date',
-          isBilling: true,
-          inTable: true,
-        },
-        form: new FormGroup({
-          datetimepicker: new FormControl('', [Validators.required]),
-        }),
-      },
-      template: DateTimePickerTemplate,
-    };
-  },
-};
-
-export const TimePicker: Story = {
-  render: (args) => {
-    return {
-      props: {
-        ...args,
-        config: {
-          name: 'timepicker',
-          label: 'Time',
-          placeholderIcon: 'time',
-        },
-        form: new FormGroup({
-          datetimepicker: new FormControl('07:30', [Validators.required]),
-        }),
-      },
-      template: DateTimePickerTemplate,
-    };
-  },
-};
-
-export const TableTimePicker: Story = {
-  render: (args) => {
-    return {
-      props: {
-        ...args,
-        config: {
-          name: 'timepicker',
-          label: 'Time In Table',
-          placeholderIcon: 'time',
-          inTable: true,
-        },
-        form: new FormGroup({
-          datetimepicker: new FormControl('', [Validators.required]),
-        }),
-      },
-      template: DateTimePickerTemplate,
-    };
-  },
-};
-
-export const InverseTimePicker: Story = {
-  globals: {
-    backgrounds: { value: 'dark' },
-  },
-  render: (args) => {
-    return {
-      props: {
-        ...args,
-        config: {
-          name: 'timepicker',
-          label: 'Time Inverse',
-          placeholderIcon: 'time',
-          inverse: true,
-        },
-        form: new FormGroup({
-          datetimepicker: new FormControl('', [Validators.required]),
-        }),
-      },
-      template: DateTimePickerTemplate,
-    };
-  },
-};
-
-// OLD STORIES
-/**
-const formGroup = new FormGroup({
-  date: new FormControl(
-    { value: '2025-05-16T12:27:57.076783', disabled: true },
-    [Validators.required],
-  ),
-  date2: new FormControl(undefined, [Validators.required]),
-  time: new FormControl('9:15 AM', [Validators.required]),
-  time2: new FormControl(undefined, [Validators.required]),
-  dispatchHistory: new FormControl('07/10/25'),
-});
-
-const formTemplate: string = `
-  <form style='width: 400px' [formGroup]="form">
-    <cai-input-datetime-picker
-      formControlName="date"
-      [inputConfig]="config"
-    >
-    </cai-input-datetime-picker>
-    <pre>{{ form.value | json }}</pre>
-  </form>
-`;
-
-export const DatetimePicker: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      config: {
-        ...args.inputConfig,
-        name: 'datepicker',
-        type: 'text',
-        label: 'DOB',
-        isDropdown: true,
-        placeholderIcon: 'date',
-        isRequired: true,
-        customClass: 'datetimeclass',
-      },
-      form: formGroup,
-    },
-    template: formTemplate,
-  }),
-};
-
-const formDateTemplate: string = `
-  <form style='width: 400px' [formGroup]="form">
-    <cai-input-datetime-picker
-      formControlName="date2"
-      [inputConfig]="config"
-    >
-    </cai-input-datetime-picker>
-    <pre>{{ form.value | json }}</pre>
-  </form>
-`;
-
-export const DateDtimePicker: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      config: {
-        ...args.inputConfig,
-        name: 'datepicker',
-        type: 'text',
-        label: 'DOB',
-        isDropdown: true,
-        placeholderIcon: 'date',
-        isRequired: true,
-        customClass: 'datetimeclass',
-      },
-      form: formGroup,
-    },
-    template: formDateTemplate,
-  }),
-};
-
-const time2Template: string = `
-  <form style='width: 400px' [formGroup]="form">
-    <cai-input-datetime-picker
-      [formFormat]="'HH:mm'"
-      formControlName="time2"
-      [inputConfig]="config"
-    >
-    </cai-input-datetime-picker>
-    <pre>{{ form.value | json }}</pre>
-  </form>`;
-
-export const FirstTimePicker: Story = {
-  render: (args) => {
-    setTimeout(() => {
-      formGroup.get('time2')?.setValue('10:15 PM' as never); // ✅ Simulates user input
-    }, 5000);
-    return {
-      props: {
-        ...args,
-        config: {
-          ...args.inputConfig,
-          name: 'timepicker',
-          type: 'text',
-          label: 'From',
-          placeholderIcon: 'time',
-          isDropdown: true,
-          isRequired: true,
-          customClass: 'datetimeclass',
-        },
-        form: formGroup,
-      },
-      template: time2Template,
-    };
-  },
-};
-
-const timeTemplate: string = `
-  <form style='width: 400px' [formGroup]="form">
-  {{form.get('time').value}}
-    <cai-input-datetime-picker
-      [formFormat]="'HH:mm'"
-      formControlName="time"
-      [inputConfig]="config"
-    >
-    </cai-input-datetime-picker>
-    <pre>{{ form.value | json }}</pre>
-  </form>`;
-
-export const TimePickerMinutesGapFive: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      config: {
-        ...args.inputConfig,
-        name: 'timepicker',
-        type: 'text',
-        label: 'From',
-        placeholderIcon: 'time',
-        isDropdown: true,
-        customClass: 'datetimeclass',
-        minutesGapFive: true,
-      },
-      form: formGroup,
-    },
-    template: timeTemplate,
-  }),
-};
-
-const dispatchHistoryTemplate: string = `
-  <form style='width: 400px' [formGroup]="form">
-    <cai-input-datetime-picker
-      formControlName="dispatchHistory"
-      [inputConfig]="config"
-    >
-    </cai-input-datetime-picker>
-    <pre>{{ form.value | json }}</pre>
-  </form>
-`;
-
-export const DispatchboardHistoryPicker: Story = {
-  render: (args) => {
-    setTimeout(() => {
-      console.log('SET AS INVALID');
-      formGroup.get('dispatchHistory')?.setErrors({ invalid: true }); // ✅ Simulates user input
-    }, 10000);
-
-    return {
-      props: {
-        ...args,
-        config: {
-          name: 'datepicker',
-          type: 'text',
-          isDropdown: true,
-          isIconHidden: true,
-          transparentInput: true,
-          hideClear: true,
-          hideErrorMessage: true,
-        },
-        form: formGroup,
-      },
-      template: dispatchHistoryTemplate,
-    };
-  },
-};
-
-const maxDateTemplate: string = `
-  <form style='width: 400px' [formGroup]="form">
-    <cai-input-datetime-picker
-      formControlName="maxDate"
-      [inputConfig]="config"
-    >
-    </cai-input-datetime-picker>
-    <div style="margin-top: 10px; font-size: 12px; color: #666;">
-      Cannot select dates after January 1st, 2026
-    </div>
-    <pre>{{ form.value | json }}</pre>
-  </form>
-`;
-
-export const MaxDateRestriction: Story = {
-  render: (args) => {
-    // Create a form control with custom validator
-    const maxDateForm = new FormGroup({
-      maxDate: new FormControl('12/15/25', [
-        Validators.required,
-        (control) => {
-          if (!control.value) return null;
-
-          const selectedDate = new Date(control.value);
-          const maxAllowedDate = new Date('2026-01-01');
-
-          if (selectedDate > maxAllowedDate) {
-            return { maxDateExceeded: true };
-          }
-
-          return null;
-        },
-      ]),
-    });
-
-    return {
-      props: {
-        ...args,
-        config: {
-          name: 'datepicker',
-          type: 'text',
-          label: 'Select Date',
-          isDropdown: true,
-          placeholderIcon: 'date',
-          isRequired: true,
-          customClass: 'datetimeclass',
-          isFutureDateDisabled: false, // We'll handle the restriction with custom validator
-        },
-        form: maxDateForm,
-      },
-      template: maxDateTemplate,
-    };
-  },
-};
-
-const customMaxDateTemplate: string = `
-  <form style='width: 400px' [formGroup]="form">
-    <cai-input-datetime-picker
-      formControlName="customMaxDate"
-      [inputConfig]="config"
-    >
-    </cai-input-datetime-picker>
-    <div style="margin-top: 10px; font-size: 12px; color: #666;">
-      Custom restriction: Cannot select dates after January 1st, 2026
-    </div>
-    <div style="margin-top: 5px; font-size: 11px; color: #999;">
-      This example shows how to extend the inputConfig with custom maxDate property
-    </div>
-    <pre>{{ form.value | json }}</pre>
-  </form>
-`;
-
-export const CustomMaxDateRestriction: Story = {
-  render: (args) => {
-    // Create a form control with custom validator that uses a custom maxDate property
-    const customMaxDateForm = new FormGroup({
-      customMaxDate: new FormControl('11/20/25', [
-        Validators.required,
-        (control) => {
-          if (!control.value) return null;
-
-          const selectedDate = new Date(control.value);
-          // This would come from the inputConfig.maxDate property
-          const maxAllowedDate = new Date('2026-01-01');
-
-          if (selectedDate > maxAllowedDate) {
-            return {
-              maxDateExceeded: {
-                maxDate: '2026-01-01',
-                selectedDate: control.value,
-              },
-            };
-          }
-
-          return null;
-        },
-      ]),
-    });
-
-    // Extended config with custom maxDate property
-    const extendedConfig = {
-      name: 'datepicker',
-      type: 'text',
-      label: 'Select Date (Max: 2026-01-01)',
-      isDropdown: true,
-      placeholderIcon: 'date',
-      isRequired: true,
-      customClass: 'datetimeclass',
-      isFutureDateDisabled: false,
-      // Custom property for max date restriction
-      maxDate: '2026-01-01',
-      // Custom property to enable max date validation
-      enableMaxDateValidation: true,
-    };
-
-    return {
-      props: {
-        ...args,
-        config: extendedConfig,
-        form: customMaxDateForm,
-      },
-      template: customMaxDateTemplate,
-    };
-  },
-};
- */

package/projects/carriera-intern-components/src/app/components/input-datetime-picker/components/cai-custom-datetime-pickers/cai-custom-datetime-pickers.component.html

@@ -1,134 +0,0 @@
-<div class="temp_inp_holder" (pointerdown)="refocusInput($event)">
-  <div>
-    <div class="pickers_holder dark_picker">
-      @if (calendarMainType === "date") {
-        <div class="date_picker">
-          <cai-custom-datetime-pickers-date-calendars
-            [listPreview]="listPreview"
-            [dateTime]="dateTime"
-            [isMonthAndYearOnly]="_inputConfig.name === 'datepickerBankCard'"
-            (setListPreviewValue)="setListPreview($event)"
-            (onRefocusInput)="refocusInput($event)"
-          ></cai-custom-datetime-pickers-date-calendars>
-        </div>
-      }
-      @if (calendarMainType === "time") {
-        <div class="time_picker">
-          <div class="time_picker_head d-flex">
-            <div class="selected_time ta-font-bold">
-              {{ selectedTime || (dateTime | date: "hh:mm aa") }}
-            </div>
-            <div class="sel_now ta-font-bold" (click)="setDefaultTime($event)">
-              Default
-            </div>
-          </div>
-          <div class="time_picker_body">
-            <div class="picker_body_head">
-              <div
-                class="ta-font-bold"
-                [class.active]="hoveredItem === 'hours'"
-              >
-                Hour
-              </div>
-              <div
-                class="ta-font-bold"
-                [class.active]="hoveredItem === 'minutes'"
-              >
-                Minute
-              </div>
-              <div
-                class="ta-font-bold"
-                [class.active]="hoveredItem === 'times'"
-              >
-                AM/PM
-              </div>
-            </div>
-            <div class="picker_body">
-              <div
-                #hourScroll
-                (mouseout)="hoveredItem = null"
-                (mouseover)="hoveredItem = 'hours'"
-                (scroll)="onScroll($event, 'hourScroll')"
-                class="scroll_pickers"
-                [tabindex]="-1"
-              >
-                @for (hour of hourTimes; let indx = $index; track indx) {
-                  <div
-                    class="scroll_item ta-font-medium"
-                    [ngClass]="{
-                      'active_item ta-font-bold':
-                        scrollTypes.hourScroll === indx,
-                    }"
-                    (click)="onScroll($event, 'hourScroll', indx)"
-                  >
-                    {{ hour }}
-                  </div>
-                }
-              </div>
-              <div
-                #minutesScroll
-                (mouseout)="hoveredItem = null"
-                (mouseover)="hoveredItem = 'minutes'"
-                (scroll)="onScroll($event, 'minutesScroll')"
-                class="scroll_pickers"
-                [tabindex]="-1"
-              >
-                @for (minutes of timeMinutes; let indx = $index; track indx) {
-                  <div
-                    class="scroll_item ta-font-medium"
-                    [ngClass]="{
-                      'active_item ta-font-bold':
-                        scrollTypes.minutesScroll === indx,
-                    }"
-                    (click)="onScroll($event, 'minutesScroll', indx)"
-                  >
-                    {{ minutes }}
-                  </div>
-                }
-              </div>
-              <div
-                #pmAmScroll
-                (mouseout)="hoveredItem = null"
-                (mouseover)="hoveredItem = 'times'"
-                (scroll)="onScroll($event, 'pmAmScroll')"
-                class="scroll_pickers"
-                [tabindex]="-1"
-              >
-                @for (when of timeOfDay; let indx = $index; track indx) {
-                  <div
-                    class="scroll_item ta-font-medium"
-                    [ngClass]="{
-                      'active_item ta-font-bold':
-                        scrollTypes.pmAmScroll === indx,
-                    }"
-                    (click)="onScroll($event, 'pmAmScroll', indx)"
-                  >
-                    {{ when }}
-                  </div>
-                }
-              </div>
-              <div class="picker_line">
-                <span class="border_line"></span>
-                <span class="border_line line_2"></span>
-              </div>
-            </div>
-            <div class="picker_buttons">
-              <div
-                (click)="closePopup($event)"
-                class="pick_button ta-font-bold"
-              >
-                Cancel
-              </div>
-              <div
-                (click)="setTime($event)"
-                class="pick_button set_button ta-font-bold"
-              >
-                Set
-              </div>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
-  </div>
-</div>

package/projects/carriera-intern-components/src/app/components/input-datetime-picker/components/cai-custom-datetime-pickers/cai-custom-datetime-pickers.component.spec.ts

@@ -1,24 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CaCustomDatetimePickersComponent } from './cai-custom-datetime-pickers.component';
-
-describe('CaCustomDatetimePickersComponent', () => {
-    let component: CaCustomDatetimePickersComponent;
-    let fixture: ComponentFixture<CaCustomDatetimePickersComponent>;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [CaCustomDatetimePickersComponent],
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(CaCustomDatetimePickersComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});