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

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

@@ -0,0 +1,43 @@
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+}
+
+:host(.frg-section--sm) {
+  --section-padding: 1.5rem;
+}
+
+:host(.frg-section--md) {
+  --section-padding: 2.5rem;
+}
+
+:host(.frg-section--lg) {
+  --section-padding: 4rem;
+}
+
+:host(.frg-section) {
+  padding-block: var(--section-padding, 2.5rem);
+}
+
+:host(.frg-section--divider) {
+  padding-bottom: calc(var(--section-padding, 2.5rem) + 1rem);
+}
+
+.frg-section__header {
+  margin-bottom: 1.25rem;
+}
+
+.frg-section__title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.frg-section__description {
+  margin: 0;
+  font-size: 0.95rem;
+  color: $color-dark-neutral;
+}

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

@@ -0,0 +1,33 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { TSectionHeading, TSectionSpacing } from './section.type';
+
+@Component({
+  selector: 'frg-section',
+  templateUrl: './section.component.html',
+  styleUrl: './section.component.scss'
+})
+export class SectionComponent {
+  @Input() title?: string;
+  @Input() description?: string;
+  @Input() spacing: TSectionSpacing = 'md';
+  @Input() divider: boolean = false;
+  @Input() headingLevel: TSectionHeading = 2;
+
+  @HostBinding('class.frg-section') baseClass = true;
+  @HostBinding('class.frg-section--sm') get isSmall() {
+    return this.spacing === 'sm';
+  }
+  @HostBinding('class.frg-section--md') get isMedium() {
+    return this.spacing === 'md';
+  }
+  @HostBinding('class.frg-section--lg') get isLarge() {
+    return this.spacing === 'lg';
+  }
+  @HostBinding('class.frg-section--divider') get hasDivider() {
+    return this.divider;
+  }
+
+  get hasHeader(): boolean {
+    return !!(this.title || this.description);
+  }
+}

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

@@ -0,0 +1,2 @@
+export type TSectionSpacing = 'sm' | 'md' | 'lg';
+export type TSectionHeading = 1 | 2 | 3 | 4 | 5 | 6;

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

@@ -0,0 +1,9 @@
+<div class="frg-separator__row">
+  @if (label) {
+    <span class="frg-separator__line" aria-hidden="true"></span>
+    <span class="frg-separator__label">{{ label }}</span>
+    <span class="frg-separator__line" aria-hidden="true"></span>
+  } @else {
+    <span class="frg-separator__line frg-separator__line--full" aria-hidden="true"></span>
+  }
+</div>

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

@@ -0,0 +1,52 @@
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  box-sizing: border-box;
+  display: block;
+}
+
+:host(.frg-separator) {
+  --frg-separator-spacing: 1rem;
+  --frg-separator-font-size: 0.85rem;
+  margin-block: var(--frg-separator-spacing);
+}
+
+:host(.frg-separator--sm) {
+  --frg-separator-spacing: 0.75rem;
+  --frg-separator-font-size: 0.75rem;
+}
+
+:host(.frg-separator--md) {
+  --frg-separator-spacing: 1rem;
+  --frg-separator-font-size: 0.85rem;
+}
+
+:host(.frg-separator--lg) {
+  --frg-separator-spacing: 1.5rem;
+  --frg-separator-font-size: 0.95rem;
+}
+
+.frg-separator__row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: $color-dark-neutral;
+}
+
+.frg-separator__line {
+  flex: 1;
+  height: 1px;
+  background-color: $color-light-soft;
+}
+
+.frg-separator__line--full {
+  flex: 1;
+}
+
+.frg-separator__label {
+  font-size: var(--frg-separator-font-size);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  color: $color-dark-soft;
+}

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

@@ -0,0 +1,25 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { TSeparatorSize } from './separator.type';
+
+@Component({
+  selector: 'frg-separator',
+  templateUrl: './separator.component.html',
+  styleUrl: './separator.component.scss'
+})
+export class SeparatorComponent {
+  @Input() label?: string;
+  @Input() size: TSeparatorSize = 'md';
+
+  @HostBinding('class.frg-separator') baseClass = true;
+  @HostBinding('class.frg-separator--sm') get isSmall() {
+    return this.size === 'sm';
+  }
+  @HostBinding('class.frg-separator--md') get isMedium() {
+    return this.size === 'md';
+  }
+  @HostBinding('class.frg-separator--lg') get isLarge() {
+    return this.size === 'lg';
+  }
+
+  @HostBinding('attr.role') role = 'separator';
+}

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

@@ -0,0 +1 @@
+export type TSeparatorSize = 'sm' | 'md' | 'lg';

package/src/lib/components/loader/content-blur/content-blur.component.html

@@ -0,0 +1,13 @@
+<div class="blur-loader">
+  <div class="blur-overlay" [style.backdropFilter]="'blur(' + blurPx + 'px)'" [style.opacity]="blurOpacity"></div>
+
+  <div class="content">
+    <ng-content></ng-content>
+  </div>
+
+  @if(showProgress) {
+    <div class="progress-text">
+      {{ safeProgress }}%
+    </div>
+  }
+</div>

package/src/lib/components/loader/content-blur/content-blur.component.scss

@@ -0,0 +1,43 @@
+@use './../../../../../assets/styles/scss/variables' as *;
+:host {
+  display: block;
+
+  .blur-loader {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 1rem;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .content {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+    }
+
+    .blur-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba($color-light, 0.6);
+      z-index: 2;
+      transition: backdrop-filter 0.2s ease, opacity 0.2s ease;
+    }
+
+    .progress-text {
+      position: absolute;
+      z-index: 3;
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: $color-dark-neutral;
+      background: rgba($color-light, 0.5);
+      box-shadow: $box-shadow-md;
+      padding: 0.25rem 0.75rem;
+      border-radius: 1rem;
+      pointer-events: none;
+    }
+  }
+}

package/src/lib/components/loader/content-blur/content-blur.component.spec.ts

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ContentBlurComponent } from './content-blur.component';
+
+describe('ContentBlurComponent', () => {
+  let fixture: ComponentFixture<ContentBlurComponent>;
+  let component: ContentBlurComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContentBlurComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContentBlurComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('clamps progress to 0-100', () => {
+    component.progress = 120;
+    component.ngOnChanges();
+
+    expect(component.safeProgress).toBe(100);
+    expect(component.showProgress).toBeFalse();
+  });
+
+  it('renders progress text when incomplete', () => {
+    component.progress = 50;
+    component.ngOnChanges();
+
+    fixture.detectChanges();
+
+    const text = fixture.debugElement.query(By.css('.progress-text'));
+    expect(text.nativeElement.textContent).toContain('50%');
+  });
+
+  it('computes blur based on progress', () => {
+    component.progress = 10;
+    component.ngOnChanges();
+
+    expect(component.blurPx).toBe(50);
+  });
+});

package/src/lib/components/loader/content-blur/content-blur.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'frg-content-blur',
+  standalone: true,
+  templateUrl: './content-blur.component.html',
+  styleUrls: ['./content-blur.component.scss'],
+})
+export class ContentBlurComponent implements OnChanges {
+  @Input() progress: number = 0;
+  safeProgress: number = 0;
+
+  ngOnChanges(): void {
+    this.safeProgress = Math.min(100, Math.max(0, this.progress));
+  }
+
+  get blurPx(): number {
+    const p = this.safeProgress;
+
+    if (p < 20) return 50;
+    if (p < 50) return 30;
+    if (p < 75) return 25;
+    if (p < 100) return 18;
+    return 0;
+  }
+
+  get blurOpacity(): number {
+    return this.blurPx / 20;
+  }
+
+  get showProgress(): boolean {
+    return this.safeProgress < 100;
+  }
+}

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

@@ -0,0 +1,2 @@
+export type TBaseLoaderStyle = 'primary' | 'secondary' | 'tertiary' | 'dark' | 'light';
+export type TBaseLoaderSize = 'small' | 'medium' | 'large';

package/src/lib/components/loader/progress-bar/progress-bar.component.html

@@ -0,0 +1,26 @@
+<div
+  class="frg-progress-bar"
+  [ngClass]="{
+    'frg-progress-bar--primary': styleType === 'primary',
+    'frg-progress-bar--secondary': styleType === 'secondary',
+    'frg-progress-bar--tertiary': styleType === 'tertiary',
+    'frg-progress-bar--dark': styleType === 'dark',
+    'frg-progress-bar--light': styleType === 'light',
+    'frg-progress-bar--small': size === 'small',
+    'frg-progress-bar--medium': size === 'medium',
+    'frg-progress-bar--large': size === 'large',
+    'frg-progress-bar--fill': animation === 'fill',
+    'frg-progress-bar--slide': animation === 'slide',
+    'frg-progress-bar--pulse': animation === 'pulse',
+    'frg-progress-bar--rotate': animation === 'rotate'
+  }"
+  [style.--segments]="segmentsList.length"
+>
+  @for(segment of segmentsList; let i = $index; track $index) {
+    <div class="frg-progress-bar__segment" [class.filled]="i < filledSegments"></div>
+  }
+
+  @if(showPercentage) {
+    <span class="frg-progress-label">{{ safeProgress }}%</span>
+  }
+</div>

package/src/lib/components/loader/progress-bar/progress-bar.component.scss

@@ -0,0 +1,151 @@
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+
+  .frg-progress-bar {
+    position: relative;
+    width: 100%;
+    background-color: $color-light-soft;
+    border-radius: 0.1rem;
+    overflow: hidden;
+    height: 0.75rem;
+
+    display: flex;
+
+    .frg-progress-bar__segment {
+      flex: 0 0 auto;
+      width: calc((100% / var(--segments)));
+      background-color: $color-light-soft;
+      transition: background-color 0.3s ease;
+    }
+
+    .frg-progress-label {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: $font-size-xs;
+      font-weight: 600;
+      color: $color-light;
+      user-select: none;
+      pointer-events: none;
+    }
+
+    &--small {
+      height: 0.5rem;
+      .frg-progress-label {
+        font-size: $font-size-2xs;
+      }
+    }
+
+    &--medium {
+      height: 0.75rem;
+    }
+
+    &--large {
+      height: 1rem;
+    }
+
+    &--primary {
+      .frg-progress-bar__segment.filled {
+        background-color: $color-primary;
+      }
+    }
+
+    &--secondary {
+      .frg-progress-bar__segment.filled {
+        background-color: $color-secondary;
+      }
+    }
+
+    &--tertiary {
+      .frg-progress-bar__segment.filled {
+        background-color: $color-tertiary;
+      }
+    }
+
+    &--dark {
+      .frg-progress-bar__segment.filled {
+        background-color: $color-dark;
+      }
+    }
+
+    &--light {
+      .frg-progress-bar__segment.filled {
+        background-color: $color-light;
+      }
+
+      .frg-progress-label {
+        color: $color-dark-soft;
+      }
+    }
+
+    &--fill {
+      .frg-progress-bar__segment.filled {
+        transform-origin: left;
+        animation: fill-in 0.4s ease forwards;
+      }
+    }
+
+    @keyframes fill-in {
+      from {
+        opacity: 0.5;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    &--slide {
+      .frg-progress-bar__segment.filled {
+        transform-origin: left;
+        animation: slide-in 0.4s ease forwards;
+      }
+    }
+
+    @keyframes slide-in {
+      from {
+        transform: translateX(-100%);
+        opacity: 0.1;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    &--rotate {
+      .frg-progress-bar__segment.filled {
+        transform-origin: left;
+        animation: rotate 0.5s ease forwards;
+      }
+    }
+
+    @keyframes rotate {
+      from {
+        transform: translateX(-100%) rotate(-360deg);
+        opacity: 0.1;
+      }
+      to {
+        transform: translateX(0) rotate(0deg);
+        opacity: 1;
+      }
+    }
+
+    &--pulse {
+      .frg-progress-bar__segment.filled {
+        animation: pulse 1.2s ease-in-out infinite;
+      }
+    }
+
+    @keyframes pulse {
+      0%, 100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+  }
+}

package/src/lib/components/loader/progress-bar/progress-bar.component.spec.ts

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ProgressBarComponent } from './progress-bar.component';
+
+describe('ProgressBarComponent', () => {
+  let fixture: ComponentFixture<ProgressBarComponent>;
+  let component: ProgressBarComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProgressBarComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProgressBarComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('calculates filled segments from progress', () => {
+    component.progress = 50;
+    component.segments = 10;
+
+    component.ngOnChanges();
+
+    expect(component.segmentsList.length).toBe(10);
+    expect(component.filledSegments).toBe(5);
+  });
+
+  it('renders percentage label when enabled', () => {
+    component.progress = 30;
+    component.showPercentage = true;
+
+    component.ngOnChanges();
+    fixture.detectChanges();
+
+    const label = fixture.debugElement.query(By.css('.frg-progress-label'));
+    expect(label.nativeElement.textContent).toContain('30%');
+  });
+
+  it('hides percentage label when disabled', () => {
+    component.showPercentage = false;
+
+    component.ngOnChanges();
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('.frg-progress-label'))).toBeNull();
+  });
+});

package/src/lib/components/loader/progress-bar/progress-bar.component.ts

@@ -0,0 +1,28 @@
+import { NgClass } from '@angular/common';
+import { Component, Input, OnChanges } from '@angular/core';
+import { TProgressBarAnimation, TProgressBarSize, TProgressBarType } from './progress-bar.type';
+
+@Component({
+  selector: 'frg-progress-bar',
+  imports: [NgClass],
+  templateUrl: './progress-bar.component.html',
+  styleUrl: './progress-bar.component.scss',
+})
+export class ProgressBarComponent implements OnChanges {
+  @Input() progress: number = 0;
+  @Input() styleType: TProgressBarType = 'primary';
+  @Input() size: TProgressBarSize = 'medium';
+  @Input() showPercentage: boolean = true;
+  @Input() segments: number = 100;
+  @Input() animation: TProgressBarAnimation = 'fill';
+
+  protected safeProgress: number = 0;
+  segmentsList: Array<number> = [];
+  filledSegments: number = 0;
+
+  ngOnChanges(): void {
+    this.safeProgress = Math.min(100, Math.max(0, this.progress));
+    this.segmentsList = Array.from({ length: this.segments }, (_, i) => i + 1);
+    this.filledSegments = Math.round((this.safeProgress / 100) * this.segments);
+  }
+}

package/src/lib/components/loader/progress-bar/progress-bar.type.ts

@@ -0,0 +1,8 @@
+import { TBaseSize } from "../../../types/base.types";
+import { TBaseLoaderStyle } from "../loader.type";
+
+export type TProgressBarSize = TBaseSize;
+
+export type TProgressBarType = TBaseLoaderStyle;
+
+export type TProgressBarAnimation = 'fill' | 'slide' | 'pulse' | 'rotate';

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

@@ -0,0 +1,12 @@
+<output
+  [ngClass]="classes"
+  [attr.aria-label]="ariaLabel"
+>
+  <div class="frg-pulse-loader__core"></div>
+
+  @if (showPercentage) {
+    <span class="frg-pulse-loader__percent">
+      {{ progress }}%
+    </span>
+  }
+</output>