@tacdaed/fragments 1.0.0-beta.0 → 1.0.0-beta.2

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

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

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

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

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

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

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