carriera-intern 0.0.0 → 1.1.76

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

@@ -1,181 +0,0 @@
-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

@@ -1,180 +0,0 @@
-@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>