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

package/src/lib/components/input/input-toggle-switch/input-toggle-switch.component.html

@@ -0,0 +1,36 @@
+
+<div class="frg-toggle-switch__wrapper" 
+  [class.input-error]="hasError"
+  [class.input-warning]="hasWarning"
+>
+    @if(label){
+      <label [for]="id">{{ label | inputRequiredLabel: required }}</label>
+    }
+    <button
+      type="button"
+      class="frg-toggle-switch"
+      [ngClass]="[
+        'frg-toggle-switch--' + type,
+        value ? 'frg-toggle-switch--on' : 'frg-toggle-switch--off',
+        disabled ? 'disabled' : ''
+      ]"
+    [aria-checked]="value"
+    [disabled]="disabled"
+    (click)="toggle()"
+    (keydown)="onKeydown($event)"
+  >
+    <span class="handle">
+      @if (disabled) {
+        <span class="fas fa-ban"></span>
+      }
+    </span>
+  </button>
+  
+  @if(showValidation) {
+    <frg-input-validation
+      [errorList]="errorList"
+      [warningList]="warningList"
+      [isFormInvalid]="hasError"
+    ></frg-input-validation>
+  }
+</div>

package/src/lib/components/input/input-toggle-switch/input-toggle-switch.component.scss

@@ -0,0 +1,121 @@
+@use "sass:color";
+@use './../../../../../assets/styles/scss/variables' as *;
+@use './../../../../../assets/styles/scss/functions' as *;
+
+:host {
+  $switch-width: 40px;
+  $switch-height: 20px;
+  $switch-padding: 2px;
+  $handle-size: $switch-height - ($switch-padding * 2);
+  $handle-font-ratio: 0.7;
+  $handle-font-size: $handle-size * $handle-font-ratio;
+  $handle-font-size-rem: px-to-rem($handle-font-size);
+  $translate-x: $switch-width - $switch-height;
+  
+
+  label {
+    display: flex;
+    font-size: $font-size-xs;
+    color: $input-text-color;
+  }
+
+  .input-error label {
+    color: $color-danger;
+  }
+
+  .frg-toggle-switch {
+    width: $switch-width;
+    height: $switch-height;
+    position: relative;
+    display: inline-block;
+    background: $color-light-soft;
+    border-radius: .25rem;
+    border: none;
+    padding: 0;
+    box-shadow: $box-shadow-inner-sm;
+    box-sizing: content-box;
+    cursor: pointer;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    transition: background 180ms ease, border-color 180ms ease, box-shadow 160ms ease;
+    vertical-align: middle;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 4px rgba($color-primary, 0.14);
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.65;
+      pointer-events: none;
+      background: $input-disabled-background;
+      border-color: $input-disabled-border-color;
+    }
+
+    &--off {
+      background: $color-light-soft;
+    }
+
+    &--on {
+      background: $color-primary;
+      border-color: color.scale($color-primary, $lightness: -20%);
+    }
+
+    .handle {
+      width: $handle-size;
+      height: $handle-size;
+      background: $color-light;
+      border-radius: .25rem;
+      position: absolute;
+      top: $switch-padding;
+      left: $switch-padding;
+      box-shadow: $box-shadow-md;
+      transition: transform 160ms cubic-bezier(.2, .8, .2, 1), box-shadow 120ms ease;
+      will-change: transform;
+      display: block;
+      font-weight: 600;
+      color: $color-dark-neutral;
+      text-transform: uppercase;
+      font-size: $handle-font-size-rem;
+    }
+
+    &--circle {
+      border-radius: $switch-height;
+
+      .handle {
+        border-radius: 50%;
+      }
+    }
+
+    &.frg-toggle-switch--on .handle {
+      transform: translateX($translate-x);
+    }
+
+    &:not(.disabled):hover .handle {
+      box-shadow: $box-shadow-md;
+    }
+
+    &:active .handle {
+      transform: translateX(0) scale(0.98);
+    }
+
+    &.frg-toggle-switch--on:active .handle {
+      transform: translateX($translate-x) scale(0.98);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+
+      .handle,
+      & {
+        transition: none !important;
+      }
+    }
+  }
+}

package/src/lib/components/input/input-toggle-switch/input-toggle-switch.component.spec.ts

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { InputToggleSwitchComponent } from './input-toggle-switch.component';
+
+describe('InputToggleSwitchComponent', () => {
+  let fixture: ComponentFixture<InputToggleSwitchComponent>;
+  let component: InputToggleSwitchComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputToggleSwitchComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputToggleSwitchComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('toggles on click', () => {
+    component.value = false;
+
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('.frg-toggle-switch'));
+    button.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(component.value).toBeTrue();
+    expect(button.nativeElement.classList).toContain('frg-toggle-switch--on');
+  });
+
+  it('does not toggle when disabled', () => {
+    component.value = false;
+    component.disabled = true;
+
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('.frg-toggle-switch'));
+    button.nativeElement.click();
+
+    expect(component.value).toBeFalse();
+  });
+
+  it('toggles on Enter key', () => {
+    component.value = false;
+
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('.frg-toggle-switch'));
+    button.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    fixture.detectChanges();
+
+    expect(component.value).toBeTrue();
+  });
+});

package/src/lib/components/input/input-toggle-switch/input-toggle-switch.component.ts

@@ -0,0 +1,117 @@
+import { Component, Input } from '@angular/core';
+import { InputBase } from '../input-base';
+import { DEFAULT_INPUT_TOGGLE_SWITCH_ERROR_MESSAGES, DEFAULT_INPUT_TOGGLE_SWITCH_WARNINGS_MESSAGES } from '../input-consts';
+import { InputToggleSwitchType } from '../input-type';
+import { InputValidationComponent } from '../input-validation/input-validation.component';
+import { InputRequiredLabelPipe } from '../input.pipe';
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'frg-input-toggle-switch',
+  imports: [InputRequiredLabelPipe ,InputValidationComponent, NgClass],
+  templateUrl: './input-toggle-switch.component.html',
+  styleUrls: ['./input-toggle-switch.component.scss'],
+})
+export class InputToggleSwitchComponent 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;
+  /**
+   * The toggle switch type
+   * @default 'square'
+   */
+  @Input() public type: InputToggleSwitchType = 'square';
+
+  /**
+   * Toggles the switch value
+   */
+  public toggle(): void {
+    if(this.disabled) return;
+
+    this.value = !this.value;
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  public onKeydown(event: KeyboardEvent) {
+    if (this.disabled) return;
+
+    const keys = ['Enter', ' ', 'Spacebar', 'ArrowLeft', 'ArrowRight'];
+    if (keys.includes(event.key)) {
+      event.preventDefault();
+      this.toggle();
+    }
+  }
+
+  /**
+   * @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_TOGGLE_SWITCH_ERROR_MESSAGES[key] || 'Invalid field.';
+    });
+  }
+
+  /**
+   * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
+   * Falls back to DEFAULT_INPUT_TOGGLE_SWITCH_WARNINGS_MESSAGES or a generic message.
+   */
+  protected override get warningList(): string[] {
+    return Object.keys(this.warningMessages).map(key => {
+      return (
+        this.warningMessages[key] ||
+        DEFAULT_INPUT_TOGGLE_SWITCH_WARNINGS_MESSAGES[key] ||
+        ''
+      );
+    });
+  }
+
+  /**
+   * Returns whether any warnings are active.
+   */
+  protected get hasWarning(): boolean {
+    return this.warningList.length > 0;
+  }
+
+}

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

@@ -0,0 +1,18 @@
+export type InputTextType = 'text' | 'email' | 'password' | 'tel' | 'url';
+export type InputNumberType = 'number' | 'decimal';
+export type InputDateType = 'date' | 'datetime-local';
+export type InputTimeType = 'time';
+export type InputTimePartial = 'hour' | 'minute' | 'second' | 'meridiem';
+export type InputTimeMeridiem = 'AM' | 'PM';
+export type InputToggleSwitchType =  'square' | 'circle';
+export type InputSliderSize = 'small' | 'medium' | 'big';
+export type InputChoiceStyleType =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'light'
+  | 'dark';

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

@@ -0,0 +1,19 @@
+@if(errorList.length && isFormInvalid){
+  <div class="frg-input__error-list">
+    <ul>
+      @for(error of errorList; track error){
+        <li>{{ error }}</li>
+      }
+    </ul>
+  </div>
+}
+
+@if(warningList.length){
+  <div class="frg-input__warning-list">
+    <ul>
+      @for(warning of warningList; track warning){
+        <li>{{ warning }}</li>
+      }
+    </ul>
+  </div>
+}

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

@@ -0,0 +1,39 @@
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  .frg-input {
+    &__error-list {
+      width: 100%;
+      margin-top: 0.25rem;
+      
+      ul {
+        padding: 0 0 0 1.5rem;
+        font-size: $font-size-xs;
+        color: $color-danger;
+        list-style: square;
+        margin-bottom: 0;
+      }
+      
+      li {
+        margin-bottom: 0.25rem;
+      }
+    }
+
+    &__warning-list {
+      width: 100%;
+      margin-top: 0.25rem;
+      
+      ul {
+        padding: 0 0 0 1.5rem;
+        font-size: $font-size-xs;
+        color: $color-warning;
+        list-style: square;
+        margin-bottom: 0;
+      }
+      
+      li {
+        margin-bottom: 0.25rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { InputValidationComponent } from './input-validation.component';
+
+describe('InputValidationComponent', () => {
+  let fixture: ComponentFixture<InputValidationComponent>;
+  let component: InputValidationComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputValidationComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputValidationComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders error list when form is invalid', () => {
+    component.errorList = ['Required', 'Too short'];
+    component.isFormInvalid = true;
+
+    fixture.detectChanges();
+
+    const errors = fixture.debugElement.queryAll(By.css('.frg-input__error-list li'));
+    expect(errors.length).toBe(2);
+  });
+
+  it('does not render errors when form is valid', () => {
+    component.errorList = ['Required'];
+    component.isFormInvalid = false;
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('.frg-input__error-list'))).toBeNull();
+  });
+
+  it('renders warning list when provided', () => {
+    component.warningList = ['Check value'];
+
+    fixture.detectChanges();
+
+    const warnings = fixture.debugElement.queryAll(By.css('.frg-input__warning-list li'));
+    expect(warnings.length).toBe(1);
+  });
+});

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

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'frg-input-validation',
+  imports: [],
+  templateUrl: './input-validation.component.html',
+  styleUrl: './input-validation.component.scss',
+})
+export class InputValidationComponent {
+  @Input() errorList: string[] = [];
+  @Input() warningList: string[] = [];
+  @Input() isFormInvalid: boolean = true;
+}

package/src/lib/components/input/input.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'inputRequiredLabel',
+  standalone: true
+})
+export class InputRequiredLabelPipe implements PipeTransform {
+  transform(label: string, isRequired: boolean): string {
+    if (isRequired) {
+      return `${label} *`;
+    }
+    return label;
+  }
+}

package/src/lib/components/layout/container/container.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/components/layout/container/container.component.scss

@@ -0,0 +1,33 @@
+:host {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+}
+
+:host(.frg-container) {
+  margin-inline: auto;
+}
+
+:host(.frg-container--padded) {
+  padding-inline: 1.5rem;
+}
+
+:host(.frg-container--sm) {
+  max-width: 36rem;
+}
+
+:host(.frg-container--md) {
+  max-width: 54rem;
+}
+
+:host(.frg-container--lg) {
+  max-width: 72rem;
+}
+
+:host(.frg-container--xl) {
+  max-width: 90rem;
+}
+
+:host(.frg-container--full) {
+  max-width: none;
+}

package/src/lib/components/layout/container/container.component.ts

@@ -0,0 +1,32 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { TContainerSize } from './container.type';
+
+@Component({
+  selector: 'frg-container',
+  templateUrl: './container.component.html',
+  styleUrl: './container.component.scss'
+})
+export class ContainerComponent {
+  @Input() size: TContainerSize = 'lg';
+  @Input() padded: boolean = true;
+
+  @HostBinding('class.frg-container') baseClass = true;
+  @HostBinding('class.frg-container--sm') get isSmall() {
+    return this.size === 'sm';
+  }
+  @HostBinding('class.frg-container--md') get isMedium() {
+    return this.size === 'md';
+  }
+  @HostBinding('class.frg-container--lg') get isLarge() {
+    return this.size === 'lg';
+  }
+  @HostBinding('class.frg-container--xl') get isXLarge() {
+    return this.size === 'xl';
+  }
+  @HostBinding('class.frg-container--full') get isFull() {
+    return this.size === 'full';
+  }
+  @HostBinding('class.frg-container--padded') get isPadded() {
+    return this.padded;
+  }
+}

package/src/lib/components/layout/container/container.type.ts

@@ -0,0 +1 @@
+export type TContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';

package/src/lib/components/layout/divider/divider.component.html

@@ -0,0 +1 @@
+<span class="frg-divider__line" aria-hidden="true"></span>

package/src/lib/components/layout/divider/divider.component.scss

@@ -0,0 +1,60 @@
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  box-sizing: border-box;
+  display: block;
+}
+
+:host(.frg-divider--horizontal) {
+  width: 100%;
+}
+
+:host(.frg-divider--sm.frg-divider--horizontal) {
+  margin-block: 0.5rem;
+}
+
+:host(.frg-divider--md.frg-divider--horizontal) {
+  margin-block: 1rem;
+}
+
+:host(.frg-divider--lg.frg-divider--horizontal) {
+  margin-block: 1.5rem;
+}
+
+:host(.frg-divider--sm.frg-divider--vertical) {
+  margin-inline: 0.5rem;
+}
+
+:host(.frg-divider--md.frg-divider--vertical) {
+  margin-inline: 1rem;
+}
+
+:host(.frg-divider--lg.frg-divider--vertical) {
+  margin-inline: 1.5rem;
+}
+
+.frg-divider__line {
+  display: block;
+  width: 100%;
+  border-color: $color-light-soft;
+  border-style: solid;
+  border-width: 0;
+}
+
+:host(.frg-divider--horizontal) .frg-divider__line {
+  border-top-width: 1px;
+}
+
+:host(.frg-divider--vertical) {
+  height: 100%;
+}
+
+:host(.frg-divider--vertical) .frg-divider__line {
+  width: 0;
+  height: 100%;
+  border-left-width: 1px;
+}
+
+:host(.frg-divider--dashed) .frg-divider__line {
+  border-style: dashed;
+}

package/src/lib/components/layout/divider/divider.component.ts

@@ -0,0 +1,38 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { TDividerOrientation, TDividerSpacing } from './divider.type';
+
+@Component({
+  selector: 'frg-divider',
+  templateUrl: './divider.component.html',
+  styleUrl: './divider.component.scss'
+})
+export class DividerComponent {
+  @Input() orientation: TDividerOrientation = 'horizontal';
+  @Input() spacing: TDividerSpacing = 'md';
+  @Input() dashed: boolean = false;
+
+  @HostBinding('class.frg-divider') baseClass = true;
+  @HostBinding('class.frg-divider--horizontal') get isHorizontal() {
+    return this.orientation === 'horizontal';
+  }
+  @HostBinding('class.frg-divider--vertical') get isVertical() {
+    return this.orientation === 'vertical';
+  }
+  @HostBinding('class.frg-divider--sm') get isSmall() {
+    return this.spacing === 'sm';
+  }
+  @HostBinding('class.frg-divider--md') get isMedium() {
+    return this.spacing === 'md';
+  }
+  @HostBinding('class.frg-divider--lg') get isLarge() {
+    return this.spacing === 'lg';
+  }
+  @HostBinding('class.frg-divider--dashed') get isDashed() {
+    return this.dashed;
+  }
+
+  @HostBinding('attr.role') role = 'separator';
+  @HostBinding('attr.aria-orientation') get ariaOrientation() {
+    return this.orientation;
+  }
+}

package/src/lib/components/layout/divider/divider.type.ts

@@ -0,0 +1,2 @@
+export type TDividerOrientation = 'horizontal' | 'vertical';
+export type TDividerSpacing = 'sm' | 'md' | 'lg';

package/src/lib/components/layout/section/section.component.html

@@ -0,0 +1,21 @@
+@if (hasHeader) {
+  <div class="frg-section__header">
+    @if (title) {
+      @switch (headingLevel) {
+        @case (1) { <h1 class="frg-section__title">{{ title }}</h1> }
+        @case (2) { <h2 class="frg-section__title">{{ title }}</h2> }
+        @case (3) { <h3 class="frg-section__title">{{ title }}</h3> }
+        @case (4) { <h4 class="frg-section__title">{{ title }}</h4> }
+        @case (5) { <h5 class="frg-section__title">{{ title }}</h5> }
+        @case (6) { <h6 class="frg-section__title">{{ title }}</h6> }
+        @default { <h2 class="frg-section__title">{{ title }}</h2> }
+      }
+    }
+    @if (description) {
+      <p class="frg-section__description">{{ description }}</p>
+    }
+  </div>
+}
+<div class="frg-section__content">
+  <ng-content></ng-content>
+</div>