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

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

@@ -1,299 +0,0 @@
-import { AsyncPipe, formatDate } from '@angular/common';
-import { Component, EventEmitter, inject, Input, LOCALE_ID, OnInit, Output } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { ChunkPipe } from '../../../pipes/chunk.pipe';
-
-@Component({
-  selector: 'frg-input-calendar',
-  imports: [ChunkPipe, AsyncPipe],
-  templateUrl: './input-calendar.component.html',
-  styleUrl: './input-calendar.component.scss',
-})
-export class InputCalendarComponent implements OnInit {
-  private readonly locale: string = inject(LOCALE_ID);
-
-  /**
-   * Current day
-   */
-  public currentDay: number = new Date().getDate();
-  /**
-   * Month is 0 indexed in JavaScript Date, so we add 1 to make it 1 indexed
-   */
-  public currentMonth: number = new Date().getMonth() + 1;
-  /**
-   * Current year
-   */
-  public currentYear: number = new Date().getFullYear();
-
-  /**
-   * Minimum date selectable in the calendar
-   * @default 0
-   */
-  @Input() public minDate: Date = new Date(0, 0, 1);
-  /**
-   * Maximum date selectable in the calendar
-   * @default 9999-12-31
-   */
-  @Input() public maxDate: Date = new Date(9999, 11, 31);
-  /**
-   * The currently selected date
-   * @default null
-   */
-  @Input() public selectedValue: Date | null = null;
-  /**
-   * Event emitted when a date is selected
-   * @type {EventEmitter<Date>}
-   */
-  @Output() selectDate = new EventEmitter<Date>();
-  /**
-   * Event emitted when value is hi than max date
-   * @type {EventEmitter<Date>}
-   */
-  @Output() handleMaxDate = new EventEmitter<Date>();
-  /**
-   * Event emitted when value is less than min date
-   * @type {EventEmitter<Date>}
-   */
-  @Output() handleMinDate = new EventEmitter<Date>();
-
-  /**
-   * Used for show month selection
-   */
-  public hasMonthSelectionOpen$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-
-  /**
-   * Used for show year selection
-   */
-  public hasYearSelectionOpen$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-
-  /**
-   * Array of dates to display in the calendar
-   */
-  public get calendarDays(): Date[] {
-    const days: Date[] = [];
-    const monthIndex = this.currentMonth - 1;
-    const firstDayOfMonth = new Date(this.currentYear, monthIndex, 1);
-    const lastDayOfMonth = new Date(this.currentYear, monthIndex + 1, 0);
-
-    const startDayOfWeek = firstDayOfMonth.getDay();
-    for (let i = startDayOfWeek - 1; i >= 0; i--) {
-      days.push(new Date(this.currentYear, monthIndex, -i));
-    }
-
-    for (let day = 1; day <= lastDayOfMonth.getDate(); day++) {
-      days.push(new Date(this.currentYear, monthIndex, day));
-    }
-
-    const endDayOfWeek = lastDayOfMonth.getDay();
-    for (let i = 1; i < 7 - endDayOfWeek; i++) {
-      days.push(new Date(this.currentYear, monthIndex + 1, i));
-    }
-    return days;
-  }
-
-  /**
-   * Get the short names of the weekdays based on the current locale
-   */
-  public get weekDays(): string[] {
-    const referenceDate = new Date(2025, 0, 5);
-    const week: string[] = [];
-
-    for (let i = 0; i < 7; i++) {
-      const day = new Date(referenceDate);
-      day.setDate(referenceDate.getDate() + i);
-      week.push(formatDate(day, 'EEE', this.locale));
-    }
-
-    return week;
-  }
-
-  public get years(): number[] {
-    const years: number[] = [];
-    for (let y = this.minDate.getFullYear(); y <= this.maxDate.getFullYear(); y++) {
-      years.push(y);
-    }
-    return years;
-  }
-
-  public get months(): string[] {
-    const months: string[] = [];
-    for (let m = 0; m < 12; m++) {
-      const date = new Date(this.currentYear, m, 1);
-      months.push(formatDate(date, 'LLLL', this.locale));
-    }
-    return months;
-  }
-
-  /**
-   * Get the current month in long format (e.g., January, February)
-   */
-  public get month(): string {
-    const date = new Date(this.currentYear, this.currentMonth - 1);
-    return formatDate(date, 'LLLL', this.locale);
-  }
-
-  /**
-   * Get the current year as a string
-   */
-  public get year(): string {
-    return this.currentYear.toString();
-  }
-
-  ngOnInit() {
-    if (this.selectedValue) {
-      this.currentDay = this.selectedValue.getDate();
-      this.currentMonth = this.selectedValue.getMonth() + 1;
-      this.currentYear = this.selectedValue.getFullYear();
-    } else {
-      const today = new Date();
-      this.currentDay = today.getDate();
-      this.currentMonth = today.getMonth() + 1;
-      this.currentYear = today.getFullYear();
-    }
-  }
-
-  /**
-   * Check if a given day is today
-   * @param day - The date to check
-   * @returns True if the given day is today, false otherwise
-   */
-  protected isToday(day: Date): boolean {
-    const today = new Date();
-    return day.getDate() === today.getDate() &&
-      day.getMonth() === today.getMonth() &&
-      day.getFullYear() === today.getFullYear();
-  }
-
-  /**
-   * Change the current month, adjusting the year if necessary
-   * @param month - The new month to set (1-12)
-   */
-  protected changeMonth(month: number){
-    if(month >= 13){
-      this.currentMonth = 1;
-      this.currentYear++;
-    } else if(month <= 0){
-      this.currentMonth = 12;
-      this.currentYear--;
-    } else {
-      this.currentMonth = month;
-    }
-
-    if(this.currentYear > this.maxDate.getFullYear()){
-      this.currentDay = this.maxDate.getDate();
-      this.currentMonth = this.maxDate.getMonth() + 1;
-      this.currentYear = this.maxDate.getFullYear();
-      this.handleMaxDate.emit(this.maxDate);
-    }
-
-    if(this.currentYear < this.minDate.getFullYear()){
-      this.currentDay = this.minDate.getDate();
-      this.currentMonth = this.minDate.getMonth() + 1;
-      this.currentYear = this.minDate.getFullYear();
-      this.handleMinDate.emit(this.minDate);
-    }
-  }
-
-  /**
-   * Open or close the month selection dropdown
-   */
-  protected openYearSelection() {
-    this.hasYearSelectionOpen$.next(!this.hasYearSelectionOpen$.value);
-    this.hasMonthSelectionOpen$.next(false);
-
-    if (this.hasYearSelectionOpen$.value) {
-      requestAnimationFrame(() => {
-        const yearButtons = document.querySelectorAll<HTMLButtonElement>(
-          '.frg-date-selection__year__item-list button'
-        );
-
-        yearButtons.forEach(btn => {
-          if (this.currentYear === parseInt(btn.textContent || '', 10)) {
-            btn.focus();
-          }
-        });
-      });
-    }
-  }
-  /**
-   * Open or close the month selection dropdown
-   */
-  protected openMonthSelection() {
-    this.hasMonthSelectionOpen$.next(!this.hasMonthSelectionOpen$.value);
-    this.hasYearSelectionOpen$.next(false);
-
-    if (this.hasMonthSelectionOpen$.value) {
-      requestAnimationFrame(() => {
-        const monthButtons = document.querySelectorAll<HTMLButtonElement>(
-          '.frg-date-selection__month__item-list button'
-        );
-
-        monthButtons.forEach((btn, index) => {
-          if (this.currentMonth === index + 1) {
-            btn.focus();
-          }
-        });
-      });
-    }
-  }
-
-  /**
-   * Handle the selection of a date and emit the selected date
-   * @param date - The date that was selected
-   */
-  protected onSelectDate(event: PointerEvent, date: Date): void {
-    event.stopPropagation();
-    this.selectDate.emit(date);
-  }
-
-  /**
-   * Check if a date is disabled based on minDate and maxDate
-   * @param a - The date to check
-   * @returns True if the date is disabled, false otherwise
-   */
-  protected isDisabled(a: Date): boolean {
-    if (this.minDate && this.maxDate) {
-      return a < this.minDate || a > this.maxDate;
-    }
-
-    return false;
-  }
-
-  /**
-   * Check if a date is the currently selected date
-   * @param a - The date to check
-   * @param b - The currently selected date
-   * @returns True if the dates are the same, false otherwise
-   */
-  protected isSelected(a: Date, b: Date | null): boolean {
-    if (b) {
-      return a.getDate() === b.getDate()
-      && a.getMonth() === b.getMonth()
-      && a.getFullYear() === b.getFullYear();
-    }
-
-    return false;
-  }
-
-  /**
-   * Check if a date is the currently selected date
-   * @param a - The date to check
-   * @param b - The currently selected date
-   * @returns True if the dates are the same, false otherwise
-   */
-  protected isSelectedYearOrMonth(a: number, b: number | null): boolean {
-    return Boolean(b && a === b);
-  }
-
-  protected selectMonth(event: MouseEvent, month: number): void {
-    event.stopPropagation();
-    this.currentMonth = month;
-    this.hasMonthSelectionOpen$.next(false);
-  }
-
-  protected selectYear(event: MouseEvent, year: number): void {
-    event.stopPropagation();
-    this.currentYear = year;
-    this.hasYearSelectionOpen$.next(false);
-  }
-}

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

@@ -1,37 +0,0 @@
-<div
-  class="frg-checkbox__wrapper"
-  [class.input-error]="hasError"
-  [class.input-warning]="hasWarning"
-  [ngClass]="{
-    'frg-checkbox__primary': styleType === 'primary',
-    'frg-checkbox__secondary': styleType === 'secondary',
-    'frg-checkbox__tertiary': styleType === 'tertiary',
-    'frg-checkbox__success': styleType === 'success',
-    'frg-checkbox__warning': styleType === 'warning',
-    'frg-checkbox__danger': styleType === 'danger',
-    'frg-checkbox__light': styleType === 'light',
-    'frg-checkbox__dark': styleType === 'dark'
-  }"
->
-  <label class="frg-checkbox" [class.disabled]="disabled">
-    <input
-      type="checkbox"
-      [id]="id"
-      [checked]="value"
-      [disabled]="disabled"
-      (change)="onToggle($event)"
-      (blur)="onBlur()"
-    />
-    @if (label) {
-      <span class="frg-checkbox__label">{{ label | inputRequiredLabel: required }}</span>
-    }
-  </label>
-
-  @if(showValidation) {
-    <frg-input-validation
-      [errorList]="errorList"
-      [warningList]="warningList"
-      [isFormInvalid]="hasError"
-    ></frg-input-validation>
-  }
-</div>

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

@@ -1,128 +0,0 @@
-@use './../../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-
-  @mixin checkbox-style($color) {
-    input[type="checkbox"]::after {
-      border-right-color: $color;
-      border-bottom-color: $color;
-    }
-
-    input[type="checkbox"]:checked {
-      border-color: $color;
-    }
-
-    input[type="checkbox"]:focus-visible {
-      box-shadow: 0 0 0 4px rgba($color, 0.14);
-    }
-  }
-
-  .frg-checkbox__wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 0.35rem;
-  }
-
-  .frg-checkbox__wrapper.frg-checkbox__primary {
-    @include checkbox-style($color-primary);
-  }
-
-  .frg-checkbox__wrapper.frg-checkbox__secondary {
-    @include checkbox-style($color-secondary);
-  }
-
-  .frg-checkbox__wrapper.frg-checkbox__tertiary {
-    @include checkbox-style($color-tertiary);
-  }
-
-  .frg-checkbox__wrapper.frg-checkbox__success {
-    @include checkbox-style($color-success);
-  }
-
-  .frg-checkbox__wrapper.frg-checkbox__warning {
-    @include checkbox-style($color-warning);
-  }
-
-  .frg-checkbox__wrapper.frg-checkbox__danger {
-    @include checkbox-style($color-danger);
-  }
-
-  .frg-checkbox__wrapper.frg-checkbox__light {
-    @include checkbox-style($color-light);
-  }
-
-  .frg-checkbox__wrapper.frg-checkbox__dark {
-    @include checkbox-style($color-dark);
-  }
-
-  .frg-checkbox {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    font-size: $font-size-xs;
-    color: $input-text-color;
-  }
-
-  .input-error .frg-checkbox {
-    color: $color-danger;
-  }
-
-  .input-warning .frg-checkbox {
-    color: $color-warning;
-  }
-
-  input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    width: 1.1rem;
-    height: 1.1rem;
-    border-radius: 0.25rem;
-    background: transparent;
-    border: 1px solid $input-border-color;
-    display: inline-grid;
-    place-content: center;
-    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
-    cursor: pointer;
-  }
-
-  input[type="checkbox"]::after {
-    content: "";
-    width: 0.5rem;
-    height: 0.75rem;
-    border-right: 2px solid $color-primary;
-    border-bottom: 2px solid $color-primary;
-    transform: translateY(-1px) rotate(45deg) scale(0);
-    transform-origin: center;
-    transition: transform 140ms ease;
-  }
-
-  input[type="checkbox"]:checked {
-    background: transparent;
-    border-color: $color-primary;
-  }
-
-  input[type="checkbox"]:checked::after {
-    transform: translateY(-1px) rotate(45deg) scale(1);
-  }
-
-  input[type="checkbox"]:focus {
-    outline: none;
-  }
-
-  input[type="checkbox"]:focus-visible {
-    box-shadow: 0 0 0 4px rgba($color-primary, 0.14);
-  }
-
-  input[type="checkbox"]:disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-    background: transparent;
-    border-color: $input-disabled-border-color;
-  }
-
-  .frg-checkbox.disabled {
-    cursor: not-allowed;
-  }
-}

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

@@ -1,43 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { InputCheckboxComponent } from './input-checkbox.component';
-
-describe('InputCheckboxComponent', () => {
-  let fixture: ComponentFixture<InputCheckboxComponent>;
-  let component: InputCheckboxComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InputCheckboxComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(InputCheckboxComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('toggles on change', () => {
-    component.value = false;
-
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input[type="checkbox"]'));
-    input.nativeElement.checked = true;
-    input.nativeElement.dispatchEvent(new Event('change'));
-    fixture.detectChanges();
-
-    expect(component.value).toBeTrue();
-  });
-
-  it('does not toggle when disabled', () => {
-    component.value = false;
-    component.disabled = true;
-
-    fixture.detectChanges();
-
-    const input = fixture.debugElement.query(By.css('input[type="checkbox"]'));
-    input.nativeElement.checked = true;
-    input.nativeElement.dispatchEvent(new Event('change'));
-
-    expect(component.value).toBeFalse();
-  });
-});

package/src/lib/components/input/input-checkbox/input-checkbox.component.ts

@@ -1,112 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { InputBase } from '../input-base';
-import { DEFAULT_INPUT_CHECKBOX_ERROR_MESSAGES, DEFAULT_INPUT_CHECKBOX_WARNINGS_MESSAGES } from '../input-consts';
-import { InputChoiceStyleType } from '../input-type';
-import { InputValidationComponent } from '../input-validation/input-validation.component';
-import { InputRequiredLabelPipe } from '../input.pipe';
-
-@Component({
-  selector: 'frg-input-checkbox',
-  imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass],
-  templateUrl: './input-checkbox.component.html',
-  styleUrl: './input-checkbox.component.scss',
-})
-export class InputCheckboxComponent extends InputBase<boolean> {
-  /**
-   * @inheritdoc
-   */
-  @Input() public override label: string = '';
-  /**
-   * @inheritdoc
-   */
-  @Input() public override required: boolean = false;
-  /**
-   * @inheritdoc
-   */
-  @Input() public override disabled: boolean = false;
-  /**
-   * @inheritdoc
-   */
-  @Input() public override errorMessages: Record<string, string> = {};
-  /**
-   * @inheritdoc
-   */
-  @Input() public override warningMessages: Record<string, string> = {};
-  /**
-   * @inheritdoc
-   */
-  @Input() public override showValidation: boolean = true;
-  /**
-   * Sets the visual style of the checkbox.
-   */
-  @Input() public styleType: InputChoiceStyleType = 'primary';
-
-  /**
-   * Toggles the checkbox value.
-   */
-  public onToggle(event: Event): void {
-    if (this.disabled) return;
-
-    const input = event.target as HTMLInputElement;
-    this.value = input.checked;
-    this.onChange(this.value);
-    this.onTouched();
-  }
-
-  /**
-   * @inheritdoc
-   */
-  public override onBlur(): void {
-    this.onTouched();
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateView(_value: boolean | null): void {
-    // Handled by Angular binding
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected updateDisabledState(_isDisabled: boolean): void {
-    // Handled by Angular binding
-  }
-
-  /**
-   * @inheritdoc
-   */
-  protected override get errorList(): string[] {
-    if (!this.control?.errors) return [];
-    const errors = this.control.errors;
-    return Object.keys(errors).map(key => {
-      if (this.errorMessages[key]) {
-        return this.errorMessages[key];
-      }
-      return DEFAULT_INPUT_CHECKBOX_ERROR_MESSAGES[key] || 'Invalid field.';
-    });
-  }
-
-  /**
-   * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
-   * Falls back to DEFAULT_INPUT_CHECKBOX_WARNINGS_MESSAGES or a generic message.
-   */
-  protected override get warningList(): string[] {
-    return Object.keys(this.warningMessages).map(key => {
-      return (
-        this.warningMessages[key] ||
-        DEFAULT_INPUT_CHECKBOX_WARNINGS_MESSAGES[key] ||
-        ''
-      );
-    });
-  }
-
-  /**
-   * Returns whether any warnings are active.
-   */
-  protected get hasWarning(): boolean {
-    return this.warningList.length > 0;
-  }
-}

package/src/lib/components/input/input-checkbox-group/input-checkbox-group.component.html

@@ -1,43 +0,0 @@
-<div
-  class="frg-checkbox-group__wrapper"
-  [class.input-error]="hasError"
-  [class.input-warning]="hasWarning"
-  [ngClass]="{
-    'frg-checkbox-group__primary': styleType === 'primary',
-    'frg-checkbox-group__secondary': styleType === 'secondary',
-    'frg-checkbox-group__tertiary': styleType === 'tertiary',
-    'frg-checkbox-group__success': styleType === 'success',
-    'frg-checkbox-group__warning': styleType === 'warning',
-    'frg-checkbox-group__danger': styleType === 'danger',
-    'frg-checkbox-group__light': styleType === 'light',
-    'frg-checkbox-group__dark': styleType === 'dark'
-  }"
->
-  @if(label){
-    <span class="frg-checkbox-group__label">{{ label | inputRequiredLabel: required }}</span>
-  }
-
-  <div class="frg-checkbox-group__list">
-    @for (item of items; track item.id) {
-      <label class="frg-checkbox" [class.disabled]="disabled || item.disabled">
-        <input
-          type="checkbox"
-          [id]="id + '-' + item.id"
-          [checked]="isSelected(item)"
-          [disabled]="disabled || item.disabled"
-          (change)="toggleItem(item, $event)"
-          (blur)="onBlur()"
-        />
-        <span class="frg-checkbox__label">{{ item.label }}</span>
-      </label>
-    }
-  </div>
-
-  @if(showValidation) {
-    <frg-input-validation
-      [errorList]="errorList"
-      [warningList]="warningList"
-      [isFormInvalid]="hasError"
-    ></frg-input-validation>
-  }
-</div>