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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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