carriera-intern 0.0.0

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

@@ -0,0 +1,181 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { InputAddressComponent } from '../input-address.component';
+
+const meta: Meta<InputAddressComponent> = {
+  title: 'Components/InputAddress',
+  component: InputAddressComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  argTypes: {},
+  args: {
+    id: 'my-input',
+    config: {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<InputAddressComponent>;
+
+// --- Stories ---
+
+export const Default: Story = {
+  args: {
+    id: 'default-input',
+    type: 'longAddress',
+    config: {
+      required: true,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl({ value: '', disabled: false }, [
+          Validators.required,
+        ]),
+      }),
+      onClear: () => {
+        console.log('onClear');
+      },
+    },
+    template: `
+      <form [formGroup]="form" style="width: 400px;">
+        <cai-input-address [type]="type" [config]="config" [id]="id" [formControlName]="'input'" (onClear)="onClear()"></cai-input-address>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+      <button (click)="form.markAllAsTouched()">Mark All As Touched</button>
+    `,
+  }),
+};
+
+export const Short: Story = {
+  args: {
+    id: 'default-input',
+    type: 'shortAddress',
+    config: {
+      required: true,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl(),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 400px;">
+        <cai-input-address [type]="type" [config]="config" [id]="id" formControlName="input"></cai-input-address>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const Filled: Story = {
+  args: {
+    id: 'default-input',
+    type: 'longAddress',
+    config: {
+      name: 'Address, City, State Zip',
+      required: true,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl('14 Pirot Circle, New Haven, CT, US'),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 400px;">
+        <cai-input-address [type]="type" [config]="config" [id]="id" formControlName="input"></cai-input-address>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const NoIcon: Story = {
+  args: {
+    id: 'default-input',
+    type: 'longAddress',
+    config: {
+      name: 'Address, City, State Zip',
+      required: true,
+      icon: null,
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl('14 Pirot Circle, New Haven, CT, US'),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 400px;">
+        <cai-input-address [type]="type" [config]="config" [id]="id" formControlName="input"></cai-input-address>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const inTable: Story = {
+  args: {
+    id: 'default-input',
+    type: 'longAddress',
+    isInTable: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl('14 Pirot Circle, New Haven, CT, US'),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 400px;">
+        <cai-input-address [type]="type" [isInTable]="isInTable" [id]="id" formControlName="input"></cai-input-address>
+      </form>
+      <pre style="margin-top: 12px">{{ form.value | json }}</pre>
+    `,
+  }),
+};
+
+export const Filter: Story = {
+  args: {
+    id: 'default-input',
+    type: 'shortAddress',
+    config: {
+      inverse: true,
+      name: 'Location',
+      size: 22,
+    },
+  },
+  globals: {
+    backgrounds: { value: 'dark' },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      form: new FormGroup({
+        input: new FormControl(),
+      }),
+    },
+    template: `
+      <form [formGroup]="form" style="width: 400px;">
+        <cai-input-address [type]="type" [config]="config" [id]="id" formControlName="input"></cai-input-address>
+      </form>
+      <pre style="margin-top: 12px; color: white;">{{ form.value | json }}</pre>
+    `,
+  }),
+};

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

@@ -0,0 +1,180 @@
+@let inTable = inputConfig?.inTable; @let inverse = inputConfig?.inverse;
+@let size = inputConfig?.size;
+<!--  -->
+@let invalid =
+  getSuperControl?.invalid &&
+  (getSuperControl?.touched || getSuperControl?.dirty);
+@let valid = getSuperControl?.valid && getSuperControl?.value;
+@let disabled = getSuperControl?.disabled || inputConfig?.isDisabled;
+@let isBilling = inputConfig?.isBilling;
+@let showClear = !disabled && !inputConfig.hideClear;
+<!-- Date Time Input -->
+<div
+  [id]="id"
+  class="datetime-input-container"
+  [class]="{
+    'datetime-valid': valid,
+    'datetime-invalid': invalid,
+    'datetime-disabled': disabled,
+    'datetime-focus': isFocusInput,
+    'datetime-has-text': getSuperControl?.value,
+    'datetime-required': isRequired && !disabled,
+    'datetime-in-table': inTable,
+    'datetime-inverse': inverse,
+    'datetime-billing': isBilling,
+    'datetime-popover-open': t2.isOpen(),
+    'datetime-size-22': size === 22,
+    'datetime-icon-hidden': inputConfig.isIconHidden,
+  }"
+  #t2="ngbPopover"
+  [ngbPopover]="!disabled ? dateTimePopover : null"
+  [placement]="['bottom-start', 'top-start']"
+  [triggers]="'manual'"
+  [popoverClass]="'datetimepopovermain'"
+  [autoClose]="'outside'"
+  [container]="'body'"
+  (pointerdown)="onPopoverClick($event)"
+  (shown)="onPopoverShown()"
+  (hidden)="onPopoverHidden()"
+>
+  <div class="datetime-label">
+    {{ inputConfig.label }}
+  </div>
+
+  <div
+    #holder1
+    [tabindex]="disabled ? '-1' : '0'"
+    contenteditable="true"
+    (keydown)="changeSelection($event)"
+    (input)="preventInput($event)"
+    (focus)="onEditableFocus($event)"
+    (blur)="blurInput()"
+    (paste)="onDatePaste($event)"
+    class="datetime-input-listener"
+    [ngbTooltip]="errorTooltip"
+    [container]="'body'"
+    [placement]="'bottom'"
+    [disableTooltip]="isFocusInput"
+    tooltipClass="tooltip tooltip-bg-red-500 input-tooltip"
+  ></div>
+
+  @if (!inputConfig.isIconHidden) {
+    <div class="datetime-icon-container" (pointerdown)="openPopover($event)">
+      <svg-icon
+        class="datetime-icon"
+        [name]="
+          inputConfig.placeholderIcon === 'date' ? 'cai-date' : 'cai-time'
+        "
+      ></svg-icon>
+      <div class="datetime-separator"></div>
+    </div>
+  }
+  <div class="datetime-input">
+    <span
+      #span1
+      class="main"
+      [ngClass]="{
+        'reset-selection-color': !isFocusInput,
+      }"
+      [innerHTML]="inputConfig.name === 'datepicker' ? 'mm' : 'HH'"
+    ></span>
+    <span>
+      <div
+        class="border-picker"
+        [innerHTML]="inputConfig.name === 'datepicker' ? '/' : ':'"
+      ></div>
+    </span>
+    <span
+      #span2
+      class="main"
+      [ngClass]="{
+        'reset-selection-color': !isFocusInput,
+      }"
+      [innerHTML]="inputConfig.name === 'datepicker' ? 'dd' : 'MM'"
+    ></span>
+    <span>
+      <div
+        class="border-picker"
+        [innerHTML]="inputConfig.name === 'datepicker' ? '/' : ' '"
+      ></div>
+    </span>
+    <span
+      #span3
+      class="main"
+      [class.time-am-pm]="inputConfig.name !== 'datepicker'"
+      [ngClass]="{
+        'reset-selection-color': !isFocusInput,
+      }"
+      [innerHTML]="inputConfig.name === 'datepicker' ? 'yy' : 'AM'"
+    ></span>
+  </div>
+
+  @if (!disabled) {
+    @let tooltipClass =
+      inverse
+        ? "tooltip input-tooltip tooltip-bg-white-700 tooltip-text-black-500"
+        : "tooltip input-tooltip";
+
+    @if (showClear) {
+      <button
+        class="datetime-cancel-button"
+        tabindex="-1"
+        ngbTooltip="Clear"
+        [openDelay]="600"
+        [tooltipClass]="tooltipClass"
+        [placement]="'top'"
+        [container]="'body'"
+        [autoClose]="true"
+        #closeTooltip="ngbTooltip"
+        (click)="clearInput($event)"
+        (pointerdown)="handleCloseTooltip()"
+        (mouseleave)="handleCloseTooltip()"
+      >
+        <svg-icon class="datetime-bg-icon" name="cai-cancel"></svg-icon>
+      </button>
+    }
+    <svg-icon
+      class="datetime-icon datetime-dropdown-icon"
+      (pointerdown)="openPopover($event)"
+      name="cai-arrow-secondary-down"
+    ></svg-icon>
+  }
+  <!-- Error Message -->
+  @if (!inTable || isBilling) {
+    <div class="datetime-error-message">
+      {{
+        invalid
+          ? (getSuperControl?.errors
+              | errorMessage: inputConfig.customErrors)[0]
+          : ""
+      }}
+    </div>
+  }
+</div>
+
+<!-- Popover for DateTime Pickers -->
+<ng-template #dateTimePopover let-data="data">
+  <div
+    class="datetime-dropdown-holder"
+    [class.datetime-has-stroke]="inputConfig.hasStroke"
+  >
+    <cai-custom-datetime-pickers
+      [calendarType]="
+        inputConfig.name === 'datepicker' ||
+        inputConfig.name === 'datepickerBankCard'
+          ? 'date'
+          : 'time'
+      "
+      [inputConfig]="inputConfig"
+      [placeholder]="'MM/DD/YY'"
+      [dateTime]="dateTimeInputDate"
+      (closePopover)="closePopover($event)"
+    ></cai-custom-datetime-pickers>
+  </div>
+</ng-template>
+
+<ng-template #errorTooltip>
+  @if (inTable && invalid && !isFocusInput) {
+    {{ (getSuperControl?.errors | errorMessage: inputConfig.customErrors)[0] }}
+  }
+</ng-template>