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

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

@@ -0,0 +1,140 @@
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+
+  @mixin checkbox-group-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-group__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .frg-checkbox-group__wrapper.frg-checkbox-group__primary {
+    @include checkbox-group-style($color-primary);
+  }
+
+  .frg-checkbox-group__wrapper.frg-checkbox-group__secondary {
+    @include checkbox-group-style($color-secondary);
+  }
+
+  .frg-checkbox-group__wrapper.frg-checkbox-group__tertiary {
+    @include checkbox-group-style($color-tertiary);
+  }
+
+  .frg-checkbox-group__wrapper.frg-checkbox-group__success {
+    @include checkbox-group-style($color-success);
+  }
+
+  .frg-checkbox-group__wrapper.frg-checkbox-group__warning {
+    @include checkbox-group-style($color-warning);
+  }
+
+  .frg-checkbox-group__wrapper.frg-checkbox-group__danger {
+    @include checkbox-group-style($color-danger);
+  }
+
+  .frg-checkbox-group__wrapper.frg-checkbox-group__light {
+    @include checkbox-group-style($color-light);
+  }
+
+  .frg-checkbox-group__wrapper.frg-checkbox-group__dark {
+    @include checkbox-group-style($color-dark);
+  }
+
+  .frg-checkbox-group__label {
+    font-size: $font-size-xs;
+    color: $input-text-color;
+  }
+
+  .frg-checkbox-group__list {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .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-group__label,
+  .input-error .frg-checkbox {
+    color: $color-danger;
+  }
+
+  .input-warning .frg-checkbox-group__label,
+  .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-group/input-checkbox-group.component.spec.ts

@@ -0,0 +1,62 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { InputCheckboxGroupComponent, InputCheckboxGroupItem } from './input-checkbox-group.component';
+
+describe('InputCheckboxGroupComponent', () => {
+  let fixture: ComponentFixture<InputCheckboxGroupComponent<string>>;
+  let component: InputCheckboxGroupComponent<string>;
+
+  const items: Array<InputCheckboxGroupItem<string>> = [
+    { id: 'a', label: 'Option A', value: 'a' },
+    { id: 'b', label: 'Option B', value: 'b' }
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputCheckboxGroupComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputCheckboxGroupComponent<string>);
+    component = fixture.componentInstance;
+    component.items = items;
+  });
+
+  it('adds a value when checked', () => {
+    component.value = [];
+
+    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).toEqual(['a']);
+  });
+
+  it('removes a value when unchecked', () => {
+    component.value = ['a'];
+
+    fixture.detectChanges();
+
+    const input = fixture.debugElement.query(By.css('input[type="checkbox"]'));
+    input.nativeElement.checked = false;
+    input.nativeElement.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+
+    expect(component.value).toEqual([]);
+  });
+
+  it('does not toggle when disabled', () => {
+    component.value = [];
+    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).toEqual([]);
+  });
+});

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

@@ -0,0 +1,136 @@
+import { Component, Input } from '@angular/core';
+import { InputBase } from '../input-base';
+import { DEFAULT_INPUT_CHECKBOX_GROUP_ERROR_MESSAGES, DEFAULT_INPUT_CHECKBOX_GROUP_WARNINGS_MESSAGES } from '../input-consts';
+import { InputChoiceStyleType } from '../input-type';
+import { InputValidationComponent } from '../input-validation/input-validation.component';
+import { InputRequiredLabelPipe } from '../input.pipe';
+import { NgClass } from '@angular/common';
+
+export interface InputCheckboxGroupItem<T> {
+  id: string;
+  label: string;
+  value: T;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'frg-input-checkbox-group',
+  imports: [NgClass, InputRequiredLabelPipe, InputValidationComponent],
+  templateUrl: './input-checkbox-group.component.html',
+  styleUrl: './input-checkbox-group.component.scss',
+})
+export class InputCheckboxGroupComponent<T> extends InputBase<Array<T>> {
+  /**
+   * @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 group.
+   */
+  @Input() public styleType: InputChoiceStyleType = 'primary';
+
+  @Input() public items: Array<InputCheckboxGroupItem<T>> = [];
+  @Input() public compareWith: (a: T, b: T) => boolean = (a, b) => a === b;
+
+  /**
+   * Toggles a checkbox item value.
+   */
+  public toggleItem(item: InputCheckboxGroupItem<T>, event: Event): void {
+    if (this.disabled || item.disabled) return;
+
+    const input = event.target as HTMLInputElement;
+    const current = this.value ? [...this.value] : [];
+    const isSelected = current.some(value => this.compareWith(value, item.value));
+
+    const next = input.checked
+      ? (isSelected ? current : [...current, item.value])
+      : current.filter(value => !this.compareWith(value, item.value));
+
+    this.value = next;
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  /**
+   * Checks if the item is selected.
+   */
+  public isSelected(item: InputCheckboxGroupItem<T>): boolean {
+    return (this.value ?? []).some(value => this.compareWith(value, item.value));
+  }
+
+  /**
+   * @inheritdoc
+   */
+  public override onBlur(): void {
+    this.onTouched();
+  }
+
+  /**
+   * @inheritdoc
+   */
+  protected updateView(_value: Array<T> | 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_GROUP_ERROR_MESSAGES[key] || 'Invalid field.';
+    });
+  }
+
+  /**
+   * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
+   * Falls back to DEFAULT_INPUT_CHECKBOX_GROUP_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_GROUP_WARNINGS_MESSAGES[key] ||
+        ''
+      );
+    });
+  }
+
+  /**
+   * Returns whether any warnings are active.
+   */
+  protected get hasWarning(): boolean {
+    return this.warningList.length > 0;
+  }
+}

package/src/lib/components/input/input-clock-picker/input-clock-picker.component.html

@@ -0,0 +1,81 @@
+<div class="clock-mode-toggle">
+  <button
+    type="button"
+    class="clock-mode-toggle__btn"
+    [class.is-active]="showHoursPicker$ | async"
+    (click)="showHours()">
+    Hours
+  </button>
+  <button
+    type="button"
+    class="clock-mode-toggle__btn"
+    [class.is-active]="showMinutesPicker$ | async"
+    (click)="showMinutes()">
+    Minutes
+  </button>
+</div>
+
+<div class="clock-picker">
+  <div class="clock-face">
+    @if(showHoursPicker$ | async){
+      @for(hour of clockHours; track hour){
+        <button
+          class="clock-hour"
+          [class.is-selected]="hour === selectedHour"
+          (mouseenter)="onHourHover(hour)"
+          (mouseleave)="onHourLeave()"
+          (click)="onHourClick($event, hour)">
+          {{hour}}
+        </button>
+      }
+      @if(!isMeridiemFormat){
+        @for(hour of fullClockHours; track hour){
+          <button
+            class="clock-hour"
+            [class.is-selected]="hour === selectedHour"
+            (mouseenter)="onHourHover(hour)"
+            (mouseleave)="onHourLeave()"
+            (click)="onHourClick($event, hour)">
+            {{hour}}
+          </button>
+        }
+      }
+    }
+
+    @if(showMinutesPicker$ | async){
+      @for(minute of clockMinutes; track minute){
+        <button
+          class="clock-minute"
+          [class.is-selected]="minute === selectedMinute"
+          (mouseenter)="onMinuteHover(minute)"
+          (mouseleave)="onMinuteLeave()"
+          (click)="onMinuteClick($event, minute)">
+          {{minute}}
+        </button>
+      }
+    }
+
+    <div class="clock-hand clock-hand--minutes" [class.clock-hand--opacity]="showHoursPicker$ | async" #handMinutes></div>
+    <div class="clock-hand clock-hand--hours" #handHours></div>
+  </div>
+</div>
+
+@if(isMeridiemFormat){
+  <div class="clock-footer">
+    <div class="clock-picker__meridiem">
+      <input
+        [id]="'meridiem'"
+        [attr.data-partialTime]="'meridiem'"
+        type="checkbox"
+        tabindex="0"
+        role="switch"
+        [checked]="selectedMeridiem === 'PM'"
+        aria-checked="{{ selectedMeridiem === 'PM' }}"
+        placeholder="AM/PM"
+        (change)="onMeridiemChange($event)"
+        (keydown.enter)="onMeridiemChange($event)"
+      />
+    </div>
+    <span class="focus-line"></span>
+  </div>
+}

package/src/lib/components/input/input-clock-picker/input-clock-picker.component.scss

@@ -0,0 +1,228 @@
+@use "sass:color";
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+  position: relative;
+
+  .clock-picker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: $input-font-family;
+    margin: 0.5rem;
+    padding: 0.5rem;
+    background: $color-primary-light;
+    border-radius: 200px;
+    box-shadow: $box-shadow-md;
+
+    .clock-face {
+      position: relative;
+      width: 15rem;
+      height: 15rem;
+      border-radius: 50%;
+      background: $input-background;
+
+      /* ------------------- HOURS ------------------- */
+      .clock-hour {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        padding: 0;
+        top: 50%;
+        left: 50%;
+        margin: -15px;
+        color: $input-text-color;
+        font-size: $font-size-md;
+        border-radius: 50px;
+        border: 0.1rem solid transparent;
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
+
+        &.is-selected {
+          border: 0.15rem solid $color-primary;
+          color: $color-light;
+          background-color: $color-primary;
+        }
+
+        &:hover {
+          border: 0.15rem solid $color-primary;
+        }
+
+        @for $i from 1 through 12 {
+          $angle: ($i - 1) * 30deg - 90deg;
+          &:nth-child(#{$i}) {
+            transform: rotate($angle) translate(6.25rem) rotate(-$angle);
+          }
+        }
+
+        @for $i from 13 through 24 {
+          $angle: ($i - 13) * 30deg - 90deg;
+          &:nth-child(#{$i}) {
+            transform: rotate($angle) translate(3.75rem) rotate(-$angle);
+          }
+        }
+      }
+
+      /* ------------------- MINUTES ------------------- */
+      .clock-minute {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        padding: 0;
+        top: 50%;
+        left: 50%;
+        margin: -15px;
+        color: $input-text-color;
+        font-size: $font-size-md;
+        border-radius: 50px;
+        border: 0.1rem solid transparent;
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
+
+        &.is-selected {
+          border: 0.15rem solid $color-primary;
+          color: $color-light;
+          background-color: $color-primary;
+        }
+
+        &:hover {
+          border: 0.15rem solid $color-primary;
+        }
+
+        @for $i from 0 through 11 {
+          $angle: ($i * 5 * 6deg) - 90deg;
+          &:nth-child(#{$i + 1}) {
+            transform: rotate($angle) translate(6.25rem) rotate(-$angle);
+          }
+        }
+      }
+
+      /* ------------------- CENTER PIN ------------------- */
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        border-radius: 2px;
+        transform: translate(-50%, -50%);
+        padding: 0.3rem;
+        background-color: $color-primary-dark;
+      }
+    }
+
+    /* ------------------- CLOCK HANDS ------------------- */
+    .clock-hand {
+      position: absolute;
+      height: 0.25rem;
+      top: 50%;
+      left: 50%;
+      transform-origin: 0 50%;
+      transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
+      transform: translateY(-50%) rotate(var(--angle, -90deg));
+
+      &--hours {
+        width: 15%;
+        background: $color-primary;
+      }
+
+      &--minutes {
+        width: 25%;
+        background: $color-primary-dark;
+      }
+
+      &--opacity {
+        opacity: 0.3;
+      }
+    }
+
+  }
+
+  .clock-mode-toggle {
+    display: inline-flex;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+    justify-content: center;
+    width: 100%;
+
+    &__btn {
+      border: 1px solid $input-border-color;
+      background: $color-light;
+      color: $input-text-color;
+      border-radius: 0.25rem;
+      padding: 0.2rem 0.6rem;
+      cursor: pointer;
+      font-size: $font-size-xs;
+
+      &.is-active {
+        background: $color-primary;
+        border-color: $color-primary;
+        color: $color-light;
+      }
+    }
+  }
+
+  /* ------------------- FOOTER ------------------- */
+  .clock-footer {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  /* ------------------- MERIDIEM SWITCH ------------------- */
+  .clock-picker__meridiem {
+    width: 3.5rem;
+    height: 1.5rem;
+    margin-top: 0.5rem;
+
+    input[type="checkbox"] {
+      appearance: none;
+      width: 100%;
+      height: 100%;
+      border-radius: 0.25rem;
+      background-color: $color-light-soft;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: background-color 0.25s ease;
+
+      &:before,
+      &:after {
+        content: "AM";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: $font-size-md;
+        font-weight: 600;
+        color: $color-dark-neutral;
+        transition: transform 0.25s ease, opacity 0.25s ease;
+      }
+
+      &:after {
+        content: "PM";
+        opacity: 0;
+        transform: translate(-50%, 150%);
+        color: $color-light;
+      }
+
+      &:checked {
+        background-color: $color-primary;
+
+        &:before {
+          transform: translate(-50%, -150%);
+          opacity: 0;
+        }
+
+        &:after {
+          transform: translate(-50%, -50%);
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

package/src/lib/components/input/input-clock-picker/input-clock-picker.component.spec.ts

@@ -0,0 +1,62 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { InputClockPickerComponent } from './input-clock-picker.component';
+
+describe('InputClockPickerComponent', () => {
+  let fixture: ComponentFixture<InputClockPickerComponent>;
+  let component: InputClockPickerComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputClockPickerComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputClockPickerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('emits hour selection and switches to minutes', () => {
+    const emitSpy = spyOn(component.selectHour, 'emit');
+
+    fixture.detectChanges();
+
+    const hourButtons = fixture.debugElement.queryAll(By.css('.clock-hour'));
+    hourButtons[0].nativeElement.click();
+    fixture.detectChanges();
+
+    expect(emitSpy).toHaveBeenCalled();
+    expect(component.showHoursPicker$.value).toBeFalse();
+    expect(component.showMinutesPicker$.value).toBeTrue();
+  });
+
+  it('emits minute selection and closes picker', () => {
+    const emitSpy = spyOn(component.closePicker, 'emit');
+
+    fixture.detectChanges();
+
+    const hourButtons = fixture.debugElement.queryAll(By.css('.clock-hour'));
+    hourButtons[0].nativeElement.click();
+    fixture.detectChanges();
+
+    const minuteButtons = fixture.debugElement.queryAll(By.css('.clock-minute'));
+    minuteButtons[0].nativeElement.click();
+    fixture.detectChanges();
+
+    expect(component.showMinutesPicker$.value).toBeTrue();
+    expect(emitSpy).toHaveBeenCalled();
+  });
+
+  it('toggles meridiem when format is 12h', () => {
+    component.timeFormat = 'hh:mm a';
+    const emitSpy = spyOn(component.selectMeridiem, 'emit');
+
+    fixture.detectChanges();
+
+    const meridiemInput = fixture.debugElement.query(By.css('input[role="switch"]')).nativeElement as HTMLInputElement;
+    meridiemInput.checked = true;
+    meridiemInput.dispatchEvent(new Event('change'));
+
+    expect(component.selectedMeridiem).toBe('PM');
+    expect(emitSpy).toHaveBeenCalledWith('PM');
+  });
+});