@tacdaed/fragments 1.0.0-beta.1 → 1.0.0-beta.3

package/src/lib/components/input/input-base.ts

@@ -1,187 +0,0 @@
-import { Directive, OnInit, inject } from '@angular/core';
-import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
-
-/**
- * Base class for input components, providing common functionality for form controls.
- * This class implements ControlValueAccessor to integrate with Angular forms.
- * Subclasses must implement the abstract methods to update the view and disabled state.
- * It also provides properties for label, placeholder, required state, and error handling.
- * The errorMessages property can be customized to provide specific validation messages.
- * The hasError getter can be used in templates to conditionally display error messages.
- * Subclasses should call super.ngOnInit() if they override ngOnInit().
- *
- * @see ControlValueAccessor
- */
-@Directive()
-export abstract class InputBase<T> implements ControlValueAccessor, OnInit {
-  /**
-   * Unique identifier for the input element.
-   */
-  id: string = crypto.randomUUID();
-  /**
-   * The current value of the input element.
-   */
-  value: T | null = null;
-  /**
-   * Indicates whether the input element is disabled.
-   */
-  disabled: boolean = false;
-  /**
-   * The label for the input element.
-   */
-  label: string = '';
-  /**
-   * The placeholder text for the input element.
-   */
-  placeholder: string = '';
-  /**
-   * Indicates whether the input element is required.
-   * If true, a visual indicator is shown next to the label.
-   */
-  required: boolean = false;
-  /**
-   * The FormControl associated with this input element.
-   */
-  control: FormControl | null = null;
-  /**
-   * Indicates whether to show validation messages.
-   * If false, validation messages will be hidden.
-   * Default is true.
-   */
-  showValidation: boolean = true;
-  /**
-   * The NgControl associated with this input element, if any.
-   * This is injected to link the component with Angular forms.
-   */
-  protected ngControl: NgControl | null = null;
-
-  /**
-   * Holds the registered callback function to notify when the value changes.
-   */
-  protected onChange: (value: T | null) => void = () => {};
-  /**
-   * Holds the registered callback function to notify when the input is touched.
-   */
-  protected onTouched: () => void = () => {};
-
-  constructor() {
-    this.ngControl = inject(NgControl, { self: true, optional: true });
-    if (this.ngControl) {
-      this.ngControl.valueAccessor = this;
-      this.control = this.ngControl.control as FormControl;
-    }
-  }
-
-  /**
-   * @inheritdoc
-   */
-  ngOnInit(): void {
-    if (this.ngControl && !this.control) {
-      this.control = this.ngControl.control as FormControl;
-    }
-  }
-
-  /**
-   * @inheritdoc
-   */
-  writeValue(value: T): void {
-    this.value = value;
-    this.updateView(value);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  registerOnChange(fn: (value: T | null) => void): void {
-    this.onChange = fn;
-  }
-
-  /**
-   * @inheritdoc
-   */
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  /**
-   * @inheritdoc
-   */
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-    this.updateDisabledState(isDisabled);
-  }
-
-  /**
-   * Indicates whether the input has validation errors and has been touched.
-   * This is used to conditionally display error messages in the template.
-   * @return True if the input has errors and has been touched, false otherwise.
-   */
-  get hasError(): boolean {
-    return !!this.control?.errors && !!this.control?.touched;
-  }
-
-  /**
-   * Updates the view to reflect the current value.
-   * This method should be implemented by subclasses to update the specific input element.
-   * @param value The new value to set in the view.
-   */
-  protected abstract updateView(value: T | null): void;
-  /**
-   * Updates the disabled state of the input element in the view.
-   * This method should be implemented by subclasses to update the specific input element.
-   * @param isDisabled True if the input should be disabled, false otherwise.
-   */
-  protected abstract updateDisabledState(isDisabled: boolean): void;
-
-  /**
-   * Handles blur event.
-   * Subclasses can override to provide custom behavior.
-   * Default implementation does nothing.
-   */
-  protected onBlur(_: FocusEvent): void {}
-
-  /**
-   * Handles focus event.
-   * Subclasses can override to provide custom behavior.
-   * Default implementation does nothing.
-   */
-  protected onFocus(_: FocusEvent): void {}
-
-  /**
-   * Handles input event.
-   * Subclasses can override to provide custom behavior.
-   * Default implementation does nothing.
-   */
-  protected onInput(_: Event): void { }
-
-  /**
-   * A mapping of validation error keys to user-friendly error messages.
-   * This can be customized to provide specific messages for different validation errors.
-   * By default, it uses the DEFAULT_ERROR_MESSAGES constant.
-   * If a specific error key is not found in this mapping, a generic message is used.
-   */
-  protected errorMessages: Record<string, string> = {};
-
-  /**
-   * A mapping of validation warnning keys to user-friendly warnning messages.
-   * This can be customized to provide specific messages for different validation warnnings.
-   * By default, it uses the DEFAULT_WARNING_MESSAGES constant.
-   * If a specific warnning key is not found in this mapping, a generic message is used.
-   */
-  protected warningMessages: Record<string, string> = {};
-
-  /**
-   * Returns the list of error messages for the input.
-   *
-   * This property should be implemented by subclasses to provide
-   * the current validation errors as an array of strings.
-   */
-  protected abstract get errorList(): string[];
-  /**
-   * Returns the list of error messages for the input.
-   *
-   * This property should be implemented by subclasses to provide
-   * the current validation errors as an array of strings.
-   */
-  protected abstract get warningList(): string[] | undefined;
-}

package/src/lib/components/input/input-calendar/input-calendar.component.html

@@ -1,76 +0,0 @@
-<div class="frg-calendar" tabindex="-1">
-  <div class="frg-calendar__head">
-    <button class="frg__" href="javascript:void(0);" (click)="changeMonth(currentMonth - 1)">
-      <span class="visually-hidden">Previous Page</span>
-      <span class="fas fa-angle-left" aria-hidden="true"></span>
-    </button>
-    <button class="frg-calendar__month" (click)="openMonthSelection()">
-      {{month}}
-    </button>
-    @if((hasMonthSelectionOpen$ | async)){
-      <div class="frg-date-selection">
-        <div class="frg-date-selection__month">
-          <ul class="frg-date-selection__month__list">
-            @for(month of months; let i = $index; track $index){
-              <li class="frg-date-selection__month__item-list"
-                [class.selected-month]="isSelectedYearOrMonth(i + 1, currentMonth)"
-              >
-               <button (click)="selectMonth($event, i + 1)">
-                  {{month}}  
-                </button>
-              </li>
-            }
-          </ul>
-        </div>
-      </div>
-    }
-   <button class="frg-calendar__year" (click)="openYearSelection()">
-    {{year}}
-  </button>
-  @if((hasYearSelectionOpen$ | async)){
-    <div class="frg-date-selection">
-      <div class="frg-date-selection__year">
-        <ul class="frg-date-selection__year__list">
-          @for(year of years; track $index){
-          <li class="frg-date-selection__year__item-list"
-           [class.selected-year]="isSelectedYearOrMonth(year, currentYear)"
-          >
-            <button (click)="selectYear($event, year)">
-              {{year}}
-            </button>
-          </li>
-          }
-        </ul>
-      </div>
-    </div>
-  }
-  <button href="javascript:void(0);" (click)="changeMonth(currentMonth + 1)">
-    <span class="visually-hidden">Next Page</span>
-    <span class="fas fa-angle-right" aria-hidden="true"></span>
-  </button>
-  </div>
-  <div class="frg-calendar__body">
-    <div class="frg-calendar__week-day">
-      @for (dayName of weekDays; track $index) {
-        <span>{{dayName}}</span>
-      }
-    </div>
-    @for (week of calendarDays | chunk:7; track $index) {
-      <div class="frg-calendar__week">
-        @for (day of week; track $index){
-          <span class="frg-calendar__day"
-            [class.other-month]="day.getMonth() !== currentMonth - 1"
-            [class.current-date]="isToday(day)"
-            [class.selected-date]="isSelected(day, selectedValue)"
-            [class.disabled-date]="isDisabled(day)"
-          >
-            <button type="button" class="frg-calendar__day-button"
-              (click)="onSelectDate($event, day)">
-                {{ day.getDate() }}
-            </button>
-          </span>
-        }
-      </div>
-    }
-  </div>
-</div>

package/src/lib/components/input/input-calendar/input-calendar.component.scss

@@ -1,179 +0,0 @@
-@use "sass:color";
-@use './../../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-
-  .frg-calendar {
-    display: grid;
-    background-color: $color-light;
-    color: $color-dark-neutral;
-    box-shadow: $box-shadow-md;
-    border-radius: .2rem;
-    padding: .5rem;
-    margin-top: .3rem;
-    font-family: $input-font-family;
-
-    &__head {
-      display: inline-flex;
-      position: relative;
-      align-items: center;
-      justify-content: space-between;
-
-      button {
-        background: transparent;
-        border: none;
-        color: $color-dark-neutral;
-        padding: .25rem;
-
-        &:hover {
-          background: $color-primary-dark;
-          color: $color-light;
-        }
-      }
-    }
-
-    &__body {
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-    }
-
-    &__week-day {
-      padding: .25rem 0;
-      font-size: 0.75rem;
-      text-align: center;
-    }
-
-    &__week,
-    &__week-day {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 0.25rem;
-    }
-
-    &__day {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 2rem;
-
-      &:hover {
-        background-color: $color-primary;
-        color: $color-light;
-        cursor: pointer;
-      }
-    }
-
-    &__day.current-date {
-      background-color: $color-primary-light;
-      color: $color-light;
-      text-decoration: underline;
-    }
-
-    &__day.other-month {
-      opacity: 0.5;
-    }
-
-    &__day.selected-date {
-      background-color: $color-primary;
-      color: $color-light;
-    }
-
-    &__day.disabled-date, &__day.disabled-date button {
-      text-decoration: line-through;
-      pointer-events: none;
-      &:hover, button:hover {
-        cursor: not-allowed;
-      }
-    }
-
-    &__day-button {
-      background: inherit;
-      color: inherit;
-      border: none;
-    }
-
-    &__footer {
-      /**TODO**/
-    }
-  }
-
-  .frg-date-selection {
-    position: absolute;
-    overflow-y: scroll;
-    max-height: 250px;
-    right: 1rem;
-    top: 2rem;
-    border-radius: .1rem;
-    background: $color-light;
-    box-shadow: $box-shadow-sm;
-    z-index: 1;
-
-
-    scrollbar-width: thin;
-    scrollbar-color: $color-primary transparent;
-
-    &__year {
-
-      &__list {
-        list-style: none;
-        padding: 0;
-      }
-
-      &__item-list {
-
-        & button {
-          padding: .5rem 1rem;
-          width: 100%;
-
-          &:hover {
-            background-color: $color-primary-light;
-            color: $color-light;
-            cursor: pointer;
-          }
-        }
-      }
-
-      &__item-list.selected-year {
-        background-color: $color-primary;
-        color: $color-light;
-
-        & button {
-          color: $color-light;
-        }
-      }
-    }
-
-    &__month {
-
-      &__list {
-        list-style: none;
-        padding: 0;
-      }
-
-      &__item-list {
-        & button {
-          padding: .5rem 1rem;
-          width: 100%;
-
-          &:hover {
-            background-color: $color-primary;
-            color: $color-light;
-            cursor: pointer;
-          }
-
-        }
-      }
-
-      &__item-list.selected-month {
-        background-color: $color-primary;
-        color: $color-light;
-
-        & button {
-          color: $color-light;
-        }
-      }
-    }
-  }
-}

package/src/lib/components/input/input-calendar/input-calendar.component.spec.ts

@@ -1,44 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { InputCalendarComponent } from './input-calendar.component';
-
-describe('InputCalendarComponent', () => {
-  let fixture: ComponentFixture<InputCalendarComponent>;
-  let component: InputCalendarComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InputCalendarComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(InputCalendarComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('renders week day headers', () => {
-    fixture.detectChanges();
-
-    const headers = fixture.debugElement.queryAll(By.css('.frg-calendar__week-day span'));
-    expect(headers.length).toBe(7);
-  });
-
-  it('emits selectDate when a day is clicked', () => {
-    const emitSpy = spyOn(component.selectDate, 'emit');
-
-    fixture.detectChanges();
-
-    const dayButton = fixture.debugElement.query(By.css('.frg-calendar__day-button'));
-    dayButton.nativeElement.click();
-
-    expect(emitSpy).toHaveBeenCalled();
-  });
-
-  it('toggles month selection', () => {
-    fixture.detectChanges();
-
-    const monthButton = fixture.debugElement.query(By.css('.frg-calendar__month'));
-    monthButton.nativeElement.click();
-
-    expect(component.hasMonthSelectionOpen$.value).toBeTrue();
-  });
-});