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

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

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

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

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

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

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

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

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

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

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

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