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

package/src/lib/components/loader/pulse-loader/pulse-loader.component.scss

@@ -1,202 +0,0 @@
-@use './../../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-
-  .frg-pulse-loader {
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: $frg-loader-size-md;
-    color: $frg-loader-color-primary;
-    isolation: isolate;
-    overflow: visible;
-
-    &__core {
-      position: relative;
-      width: 35%;
-      aspect-ratio: 1;
-      background-color: currentColor;
-      border-radius: 50%;
-      z-index: 2;
-      box-shadow: 0 0 8px currentColor;
-
-      &::before,
-      &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: 50%;
-        background-color: currentColor;
-        opacity: 0.5;
-        z-index: -1;
-        filter: blur(0.5px);
-        transform: scale(1);
-        transform-origin: center;
-        animation: frg-dual-pulse 1.4s cubic-bezier(0.4, 0, 0.3, 1) infinite;
-      }
-
-      &::after {
-        animation-delay: 0.7s;
-      }
-    }
-
-    &__percent {
-      margin-top: 0.6rem;
-      font-weight: 600;
-      color: currentColor;
-      z-index: 3;
-      text-align: center;
-      pointer-events: none;
-      user-select: none;
-      opacity: 0.95;
-      transition: opacity 0.3s ease;
-      text-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
-    }
-
-    &--small {
-      width: $frg-loader-size-sm;
-
-      .frg-pulse-loader__core {
-        width: 45%;
-
-        &::before,
-        &::after {
-          animation-duration: 1.2s;
-        }
-      }
-
-      .frg-pulse-loader__percent {
-        font-size: $font-size-sm;
-        margin-top: 1rem;
-      }
-    }
-
-    &--medium {
-      width: calc($frg-loader-size-md * 1.25);
-
-      .frg-pulse-loader__core {
-        width: 35%;
-      }
-
-      .frg-pulse-loader__percent {
-        font-size: $font-size-md;
-        margin-top: 1.5rem;
-      }
-    }
-
-    &--large {
-      width: calc($frg-loader-size-lg * 1.5);
-
-      .frg-pulse-loader__core {
-        width: 30%;
-        box-shadow: 0 0 14px currentColor;
-
-        &::before,
-        &::after {
-          animation-duration: 1.6s;
-        }
-      }
-
-      .frg-pulse-loader__percent {
-        font-size: $font-size-lg;
-        margin-top: 2rem;
-      }
-    }
-
-    &--primary   { color: $frg-loader-color-primary; }
-    &--secondary { color: $frg-loader-color-secondary; }
-    &--tertiary  { color: $frg-loader-color-tertiary; }
-
-    &--secondary,
-    &--tertiary {
-      .frg-pulse-loader__percent {
-        text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
-        opacity: 1;
-      }
-    }
-
-    &--light {
-      color: $frg-loader-color-light;
-
-      .frg-pulse-loader__percent {
-        text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
-      }
-    }
-
-    &--dark {
-      color: $frg-loader-color-dark;
-
-      .frg-pulse-loader__percent {
-        text-shadow: 0 0 3px rgba(255, 255, 255, 0.25);
-      }
-    }
-
-    &--overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba($color-light-neutral, 0.6);
-      z-index: 9999;
-      backdrop-filter: blur(0.2rem);
-
-      &.frg-pulse-loader--small .frg-pulse-loader__core {
-        width: $frg-loader-size-sm;
-      }
-
-      &.frg-pulse-loader--medium .frg-pulse-loader__core {
-        width: $frg-loader-size-md;
-      }
-
-      &.frg-pulse-loader--large .frg-pulse-loader__core {
-        width: $frg-loader-size-lg;
-      }
-
-      &.frg-pulse-loader--small .frg-pulse-loader__percent {
-        margin-top: calc($frg-loader-size-sm * 1.25);
-      }
-
-      &.frg-pulse-loader--medium .frg-pulse-loader__percent {
-        margin-top: calc($frg-loader-size-md * 1.25);
-      }
-
-      &.frg-pulse-loader--large .frg-pulse-loader__percent {
-        margin-top: calc($frg-loader-size-lg * 1.25);
-      }
-    }
-
-    &--overlay-item {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1;
-    }
-  }
-
-  @keyframes frg-dual-pulse {
-    0% {
-      transform: scale(1);
-      opacity: 0.5;
-      filter: blur(0);
-    }
-    60% {
-      transform: scale(3);
-      opacity: 0.25;
-      filter: blur(0.5px);
-    }
-    100% {
-      transform: scale(4);
-      opacity: 0;
-      filter: blur(1px);
-    }
-  }
-}

package/src/lib/components/loader/pulse-loader/pulse-loader.component.spec.ts

@@ -1,55 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SimpleChange } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { PulseLoaderComponent } from './pulse-loader.component';
-
-describe('PulseLoaderComponent', () => {
-  let fixture: ComponentFixture<PulseLoaderComponent>;
-  let component: PulseLoaderComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PulseLoaderComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(PulseLoaderComponent);
-    component = fixture.componentInstance;
-  });
-
-  afterEach(() => {
-    document.body.style.overflow = '';
-  });
-
-  it('renders percentage when enabled', () => {
-    component.showPercentage = true;
-    component.progress = 42;
-
-    fixture.detectChanges();
-
-    const label = fixture.debugElement.query(By.css('.frg-pulse-loader__percent'));
-    expect(label.nativeElement.textContent).toContain('42%');
-  });
-
-  it('applies size and style classes', () => {
-    component.size = 'large';
-    component.styleType = 'secondary';
-
-    fixture.detectChanges();
-
-    const output = fixture.debugElement.query(By.css('output'));
-    expect(output.nativeElement.classList).toContain('frg-pulse-loader--large');
-    expect(output.nativeElement.classList).toContain('frg-pulse-loader--secondary');
-  });
-
-  it('toggles body scroll when overlay changes', () => {
-    component.isOverlay = true;
-    component.ngOnChanges({
-      isOverlay: new SimpleChange(false, true, false)
-    });
-
-    expect(document.body.style.overflow).toBe('hidden');
-
-    component.ngOnDestroy();
-    expect(document.body.style.overflow).toBe('');
-  });
-});

package/src/lib/components/loader/pulse-loader/pulse-loader.component.ts

@@ -1,73 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { TPulseLoaderSize, TPulseLoaderType } from './pulse-loader.type';
-
-/**
- * Component representing a pulse loader with customizable size, style, and progress display.
- * Usage example:
- * ```html
- * <frg-pulse-loader [progress]="progressValue" [styleType]="'primary'" [size]="'medium'" [showPercentage]="true"></frg-pulse-loader>
- * ```
- */
-@Component({
-  selector: 'frg-pulse-loader',
-  standalone: true,
-  imports: [NgClass],
-  templateUrl: './pulse-loader.component.html',
-  styleUrls: ['./pulse-loader.component.scss'],
-})
-export class PulseLoaderComponent implements OnChanges, OnDestroy {
-  /**
-   * ARIA label for accessibility purposes.
-   * Default is 'Loading...'.
-   */
-  @Input() ariaLabel: string = 'Loading...';
-  @Input() isOverlay = false;
-  @Input() isOverlayItem = false;
-  /**
-   * The current progress value (0-100) to be displayed by the loader.
-   */
-  @Input() progress: number = 0;
-  /**
-   * The style type of the loader, affecting its color scheme.
-   * Options: 'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'info', 'light', 'dark'
-   */
-  @Input() styleType: TPulseLoaderType = 'primary';
-  /**
-   * The size of the loader.
-   * Options: 'small', 'medium', 'large'
-   */
-  @Input() size: TPulseLoaderSize = 'medium';
-  /**
-   * Whether to display the percentage text inside the loader.
-   * Default is false.
-   */
-  @Input() showPercentage: boolean = false;
-
-  /**
-   * Gets the CSS classes for the loader based on its size and style type.
-   */
-  public get classes() {
-    return {
-      'frg-pulse-loader': true,
-      [`frg-pulse-loader--${this.size}`]: true,
-      [`frg-pulse-loader--${this.styleType}`]: true,
-      'frg-pulse-loader--overlay': this.isOverlay,
-      'frg-pulse-loader--overlay-item': this.isOverlayItem,
-    };
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['isOverlay']) {
-      this.toggleBodyScroll(this.isOverlay);
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.toggleBodyScroll(false);
-  }
-
-  private toggleBodyScroll(disable: boolean): void {
-    document.body.style.overflow = disable ? 'hidden' : '';
-  }
-}

package/src/lib/components/loader/pulse-loader/pulse-loader.type.ts

@@ -1,6 +0,0 @@
-import { TBaseSize } from "../../../types/base.types";
-import { TBaseLoaderStyle } from "../loader.type";
-
-export type TPulseLoaderSize = TBaseSize;
-
-export type TPulseLoaderType = TBaseLoaderStyle;

package/src/lib/components/loader/skeleton-loader/skeleton-loader.component.html

@@ -1,13 +0,0 @@
-<div
-  class="skeleton-root"
-  [style.width]="isCircle ? size : width"
-  [style.height]="isCircle ? size : (isMultiRow ? null : height)"
->
-  @if (rows <= 1) {
-    <div class="skeleton-block" [style.height]="height"></div>
-  } @else {
-    @for (_ of rowArray; let i = $index; track i) {
-      <div class="skeleton-block" [style.height]="height"></div>
-    }
-  }
-</div>

package/src/lib/components/loader/skeleton-loader/skeleton-loader.component.scss

@@ -1,113 +0,0 @@
-@use './../../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: inline-block;
-
-  .skeleton-root {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  .skeleton-block {
-    width: 100%;
-    height: 1rem;
-    border-radius: 6px;
-    background: linear-gradient(
-      90deg,
-      #e0e0e0 0%,
-      #f5f5f5 50%,
-      #e0e0e0 100%
-    );
-    background-size: 200% 100%;
-  }
-
-  &.circle {
-    .skeleton-root {
-      width: auto;
-      height: auto;
-    }
-
-    .skeleton-block {
-      border-radius: 50%;
-      width: 100%;
-      height: 100%;
-      aspect-ratio: 1 / 1;
-    }
-  }
-
-  &.animated .skeleton-block {
-    animation: shimmer 1.4s linear infinite;
-  }
-
-  &.skeleton--primary .skeleton-block {
-    background: linear-gradient(
-      90deg,
-      $color-primary-dark 0%,
-      $color-primary-light 50%,
-      $color-primary-dark 100%
-    );
-    background-size: 200% 100%;
-    background-position: 0 0;
-  }
-
-  &.skeleton--secondary .skeleton-block {
-    background: linear-gradient(
-      90deg,
-      $color-secondary-dark 0%,
-      $color-secondary-light 50%,
-      $color-secondary-dark 100%
-    );
-    background-size: 200% 100%;
-    background-position: 0 0;
-  }
-
-  &.skeleton--tertiary .skeleton-block {
-    background: linear-gradient(
-      90deg,
-      $color-tertiary-dark 0%,
-      $color-tertiary-light 50%,
-      $color-tertiary-dark 100%
-    );
-    background-size: 200% 100%;
-    background-position: 0 0;
-  }
-
-  &.skeleton--dark .skeleton-block {
-    background: linear-gradient(
-      90deg,
-      $color-dark-neutral 0%,
-      $color-dark 50%,
-      $color-dark-neutral 100%
-    );
-    background-size: 200% 100%;
-    background-position: 0 0;
-  }
-
-  &.skeleton--light .skeleton-block {
-    background: linear-gradient(
-      90deg,
-      $color-light-soft 0%,
-      $color-light 50%,
-      $color-light-soft 100%
-    );
-    background-size: 200% 100%;
-    background-position: 0 0;
-  }
-
-  @keyframes shimmer {
-    0% {
-      background-position: -200% 0;
-    }
-    100% {
-      background-position: 200% 0;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    &.animated .skeleton-block {
-      animation: none;
-    }
-  }
-}

package/src/lib/components/loader/skeleton-loader/skeleton-loader.component.spec.ts

@@ -1,37 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { SkeletonLoaderComponent } from './skeleton-loader.component';
-
-describe('SkeletonLoaderComponent', () => {
-  let fixture: ComponentFixture<SkeletonLoaderComponent>;
-  let component: SkeletonLoaderComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SkeletonLoaderComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(SkeletonLoaderComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('renders the requested number of rows', () => {
-    component.rows = 3;
-
-    fixture.detectChanges();
-
-    const blocks = fixture.debugElement.queryAll(By.css('.skeleton-block'));
-    expect(blocks.length).toBe(3);
-  });
-
-  it('applies circle class when shape is circle', () => {
-    component.shape = 'circle';
-    component.animated = false;
-
-    fixture.detectChanges();
-
-    const host = fixture.debugElement.nativeElement as HTMLElement;
-    expect(host.classList).toContain('circle');
-    expect(host.classList).not.toContain('animated');
-  });
-});

package/src/lib/components/loader/skeleton-loader/skeleton-loader.component.ts

@@ -1,51 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-import { TSkeletonLoaderType } from './skeleton-loader.type';
-
-@Component({
-  selector: 'frg-skeleton-loader',
-  standalone: true,
-  templateUrl: './skeleton-loader.component.html',
-  styleUrls: ['./skeleton-loader.component.scss'],
-})
-export class SkeletonLoaderComponent {
-  /** Enables shimmer animation */
-  @Input() animated = true;
-
-  /** Rectangle height for a single row */
-  @Input() height?: string;
-
-  /** Number of skeleton rows (for multi-line placeholders) */
-  @Input() rows = 1;
-
-  /** Shape of the skeleton: rectangle or circle */
-  @Input() shape: 'rect' | 'circle' = 'rect';
-
-  /** Circle size (sets both width & height) */
-  @Input() size?: string;
-
-  /** Style type (color scheme) */
-  @Input() styleType: TSkeletonLoaderType = 'default';
-
-  /** Rectangle width (ignored for circle unless explicitly given) */
-  @Input() width?: string;
-
-  @HostBinding('class')
-  get hostClasses(): string {
-    const classes = ['skeleton', `skeleton--${this.styleType}`];
-    if (this.shape === 'circle') classes.push('circle');
-    if (this.animated) classes.push('animated');
-    return classes.join(' ');
-  }
-
-  get rowArray() {
-    return Array.from({ length: this.rows });
-  }
-
-  get isMultiRow() {
-    return this.rows > 1;
-  }
-
-  get isCircle() {
-    return this.shape === 'circle';
-  }
-}

package/src/lib/components/loader/skeleton-loader/skeleton-loader.type.ts

@@ -1,6 +0,0 @@
-import { TBaseSize } from "../../../types/base.types";
-import { TBaseLoaderStyle } from "../loader.type";
-
-export type TSkeletonLoaderSize = TBaseSize | 'full';
-
-export type TSkeletonLoaderType = TBaseLoaderStyle | 'default';

package/src/lib/components/loader/spinner/spinner.component.html

@@ -1,20 +0,0 @@
-<output class="frg-spinner" aria-label="{{label}}"
-  [ngClass]="{
-    'frg-spinner--xs' : size === 'extra-small',
-    'frg-spinner--sm' : size === 'small',
-    'frg-spinner--md' : size === 'medium',
-    'frg-spinner--lg' : size === 'large',
-    'frg-spinner--xl' : size === 'extra-large',
-    'frg-spinner--primary': styleType === 'primary',
-    'frg-spinner--secondary': styleType === 'secondary',
-    'frg-spinner--tertiary': styleType === 'tertiary',
-    'frg-spinner--dark': styleType === 'dark',
-    'frg-spinner--light': styleType === 'light',
-    'frg-spinner--center': isCentered,
-    'frg-spinner--overlay': isOverlay,
-    'frg-spinner--overlay-item': isOverlayItem
-  }"
-  >
-  <div class="frg-spinner__circle" aria-hidden="true"></div>
-  <span class="sr-only">{{label}}</span>
-</output>