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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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