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

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

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

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

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

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

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

@@ -1,62 +0,0 @@
-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');
-  });
-});