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

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

@@ -1,137 +0,0 @@
-@use './../../../../../assets/styles/scss/variables' as *;
-
-@keyframes frg-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-:host {
-  display: block;
-
-  .frg-spinner {
-    display: inline-block;
-    line-height: 0;
-    vertical-align: middle;
-
-    &--center {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &__circle {
-      box-sizing: border-box;
-      display: inline-block;
-      border-radius: 50%;
-      border-style: solid;
-      animation: frg-spin 0.8s linear infinite;
-      width: $frg-loader-size-md;
-      height: $frg-loader-size-md;
-      border-width: $frg-loader-border-width;
-    }
-
-    // Varianti dimensione
-    &--xs .frg-spinner__circle {
-      width: $frg-loader-size-xs;
-      height: $frg-loader-size-xs;
-      border-width: 0.125rem;
-    }
-
-    &--sm .frg-spinner__circle {
-      width: $frg-loader-size-sm;
-      height: $frg-loader-size-sm;
-    }
-
-    &--md .frg-spinner__circle {
-      width: $frg-loader-size-md;
-      height: $frg-loader-size-md;
-    }
-
-    &--lg .frg-spinner__circle {
-      width: $frg-loader-size-lg;
-      height: $frg-loader-size-lg;
-    }
-
-    &--xl .frg-spinner__circle {
-      width: $frg-loader-size-xl;
-      height: $frg-loader-size-xl;
-      border-width: 0.25rem;
-    }
-
-    // Colore
-    &--primary .frg-spinner__circle {
-      border-color: $frg-loader-color-primary;
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
-
-    &--secondary .frg-spinner__circle {
-      border-color: $frg-loader-color-secondary;
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
-
-    &--tertiary .frg-spinner__circle {
-      border-color: $frg-loader-color-tertiary;
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
-
-    &--dark .frg-spinner__circle {
-      border-color: $frg-loader-color-dark;
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
-
-    &--light .frg-spinner__circle {
-      border-color: $frg-loader-color-light;
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      &__circle {
-        animation: none;
-        transform: rotate(0);
-      }
-    }
-
-    &--overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba($color-light-neutral, .6);
-      z-index: 9999;
-      backdrop-filter: blur(.2rem);
-    }
-
-    &--overlay-item {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1;
-    }
-  }
-
-  /* Accessibilità */
-  .sr-only {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
-    white-space: nowrap !important;
-    border: 0 !important;
-  }
-
-}

package/src/lib/components/loader/spinner/spinner.component.spec.ts

@@ -1,43 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SimpleChange } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { SpinnerComponent } from './spinner.component';
-
-describe('SpinnerComponent', () => {
-  let fixture: ComponentFixture<SpinnerComponent>;
-  let component: SpinnerComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SpinnerComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(SpinnerComponent);
-    component = fixture.componentInstance;
-  });
-
-  afterEach(() => {
-    document.body.style.overflow = '';
-  });
-
-  it('applies overlay class when enabled', () => {
-    component.isOverlay = true;
-
-    fixture.detectChanges();
-
-    const spinner = fixture.debugElement.query(By.css('.frg-spinner'));
-    expect(spinner.nativeElement.classList).toContain('frg-spinner--overlay');
-  });
-
-  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/spinner/spinner.component.ts

@@ -1,32 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { TSpinnerSize, TSpinnerType } from './spinner.type';
-
-@Component({
-  selector: 'frg-spinner',
-  templateUrl: './spinner.component.html',
-  styleUrls: ['./spinner.component.scss'],
-  imports: [NgClass]
-})
-export class SpinnerComponent implements OnChanges, OnDestroy {
-  @Input() size: TSpinnerSize = 'medium';
-  @Input() isCentered: boolean = false;
-  @Input() isOverlay = false;
-  @Input() isOverlayItem = false;
-  @Input() label = 'Loading...';
-  @Input() styleType: TSpinnerType = 'primary';
-
-  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/spinner/spinner.type.ts

@@ -1,6 +0,0 @@
-import { TBaseSize } from "../../../types/base.types";
-import { TBaseLoaderStyle } from "../loader.type";
-
-export type TSpinnerSize = TBaseSize | 'extra-small' | 'extra-large';
-
-export type TSpinnerType = TBaseLoaderStyle;

package/src/lib/components/modal/modal.component.html

@@ -1,47 +0,0 @@
-@if (open) {
-  <div class="frg-modal__backdrop">
-    <button
-      type="button"
-      class="frg-modal__backdrop-btn"
-      aria-label="Close dialog"
-      (click)="onBackdropClick()"
-    ></button>
-    <dialog
-      class="frg-modal"
-      [ngClass]="modalClassMap"
-      aria-modal="true"
-      [attr.aria-labelledby]="ariaLabelledBy || null"
-      [attr.aria-describedby]="ariaDescribedBy || null"
-      [attr.aria-label]="ariaLabelledBy ? null : ariaLabel"
-      open
-    >
-      @if (showHeader) {
-        <div class="frg-modal__header">
-          <div class="frg-modal__header-content">
-            <ng-content select="[frg-modal-head]"></ng-content>
-          </div>
-          @if (hasCloseButton) {
-            <button
-              type="button"
-              class="frg-modal__close-btn"
-              (click)="onCloseClick()"
-              aria-label="Close dialog"
-            >
-              &times;
-            </button>
-          }
-        </div>
-      }
-
-      <div class="frg-modal__body" [ngClass]="{ 'frg-modal__body--with-footer': hasFooter }">
-        <ng-content select="[frg-modal-body]"></ng-content>
-      </div>
-
-      @if (hasFooter) {
-        <div class="frg-modal__footer">
-          <ng-content select="[frg-modal-footer]"></ng-content>
-        </div>
-      }
-    </dialog>
-  </div>
-}

package/src/lib/components/modal/modal.component.scss

@@ -1,139 +0,0 @@
-@use '../../../../assets/styles/scss/variables' as *;
-
-:host {
-  dialog {
-    padding: 0.25rem;
-  }
-  
-  .frg-modal__backdrop {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
-    background: rgba($color-dark, 0.45);
-    backdrop-filter: blur(6px);
-    z-index: 1050;
-  }
-
-  .frg-modal__backdrop-btn {
-    position: absolute;
-    inset: 0;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    cursor: pointer;
-    z-index: 0;
-  }
-
-  .frg-modal {
-    width: 100%;
-    gap: 1rem;
-    max-width: 5rem;
-    max-height: calc(100vh - 3rem);
-    background: $color-light;
-    color: $color-dark;
-    border-radius: 0.6rem;
-    border: 1px solid rgba($color-dark, 0.08);
-    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
-    overflow: hidden;
-    font-family: $base-font;
-    display: flex;
-    flex-direction: column;
-    animation: frg-modal-enter 0.2s ease-out;
-    z-index: 1;
-    position: relative;
-
-    &__size-small {
-      max-width: 28rem;
-    }
-
-    &__size-medium {
-      max-width: 40rem;
-    }
-
-    &__size-large {
-      max-width: 56rem;
-    }
-  }
-
-  .frg-modal__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 0.75rem 1.5rem 0.75rem;
-  }
-
-  .frg-modal__header-content {
-    min-width: 0;
-    flex: 1;
-    font-size: 0.95rem;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: 1.1rem;
-      margin-bottom: 0.25rem;
-    }
-
-    p {
-      font-size: 0.9rem;
-      margin-bottom: 0;
-    }
-  }
-
-  .frg-modal__body {
-    padding: 0.75rem 1.5rem 0.75rem;
-    overflow-y: auto;
-    font-size: 0.95rem;
-  }
-
-  .frg-modal__body--with-footer {
-    border-bottom: 0;
-  }
-
-  .frg-modal__footer {
-    padding: 0 1.5rem 0.75rem;
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    flex-wrap: wrap;
-  }
-
-  .frg-modal__close-btn {
-    background: transparent;
-    border: none;
-    color: $color-dark-soft;
-    font-size: 1.5rem;
-    line-height: 1;
-    padding: 0.15rem 0.4rem;
-    border-radius: 50%;
-    cursor: pointer;
-    position: absolute;
-    top: 0.65rem;
-    right: 0.75rem;
-
-    &:hover,
-    &:focus {
-      color: $color-dark;
-      outline: none;
-    }
-  }
-
-  @keyframes frg-modal-enter {
-    from {
-      opacity: 0;
-      transform: translateY(6px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-}

package/src/lib/components/modal/modal.component.spec.ts

@@ -1,60 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { ModalCloseEvent } from './modal.type';
-import { ModalComponent } from './modal.component';
-
-@Component({
-  standalone: true,
-  imports: [ModalComponent],
-  template: `
-    <frg-modal [(open)]="open" (closed)="onClosed($event)">
-      <div frg-modal-head>
-        <h5 id="modal-title">Title</h5>
-      </div>
-      <div frg-modal-body>Body</div>
-      <div frg-modal-footer>Footer</div>
-    </frg-modal>
-  `
-})
-class TestHostComponent {
-  open = true;
-  closedEvent: ModalCloseEvent | null = null;
-
-  onClosed(event: ModalCloseEvent): void {
-    this.open = false;
-    this.closedEvent = event;
-  }
-}
-
-describe('ModalComponent', () => {
-  let fixture: ComponentFixture<TestHostComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestHostComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestHostComponent);
-  });
-
-  it('renders header, body, and footer slots when open', () => {
-    fixture.detectChanges();
-
-    expect(fixture.debugElement.query(By.css('.frg-modal__header'))).toBeTruthy();
-    expect(fixture.debugElement.query(By.css('.frg-modal__body'))?.nativeElement.textContent).toContain('Body');
-    expect(fixture.debugElement.query(By.css('.frg-modal__footer'))?.nativeElement.textContent).toContain('Footer');
-  });
-
-  it('closes on close button click and emits reason', () => {
-    fixture.detectChanges();
-
-    const closeBtn = fixture.debugElement.query(By.css('.frg-modal__close-btn'));
-    closeBtn.nativeElement.click();
-    fixture.detectChanges();
-
-    expect(fixture.componentInstance.open).toBeFalse();
-    expect(fixture.componentInstance.closedEvent?.reason).toBe('close-button');
-    expect(fixture.debugElement.query(By.css('.frg-modal'))).toBeNull();
-  });
-});

package/src/lib/components/modal/modal.component.ts

@@ -1,83 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, EventEmitter, HostListener, Input, OnChanges, OnDestroy, Output, SimpleChanges } from '@angular/core';
-
-import { ModalCloseEvent, TModalCloseReason, TModalSize } from './modal.type';
-
-@Component({
-  selector: 'frg-modal',
-  imports: [NgClass],
-  templateUrl: './modal.component.html',
-  styleUrl: './modal.component.scss'
-})
-export class ModalComponent implements OnChanges, OnDestroy {
-  @Input() open: boolean = false;
-  @Input() size: TModalSize = 'medium';
-  @Input() closeOnBackdrop: boolean = true;
-  @Input() closeOnEscape: boolean = true;
-  @Input() hasCloseButton: boolean = true;
-  @Input() hasHeader: boolean = true;
-  @Input() hasFooter: boolean = true;
-  @Input() lockBodyScroll: boolean = true;
-  @Input() ariaLabel: string = 'Dialog';
-  @Input() ariaLabelledBy: string | null = null;
-  @Input() ariaDescribedBy: string | null = null;
-
-  @Output() closed = new EventEmitter<ModalCloseEvent>();
-
-  get modalClassMap() {
-    return {
-      'frg-modal__size-small': this.size === 'small',
-      'frg-modal__size-medium': this.size === 'medium',
-      'frg-modal__size-large': this.size === 'large',
-    };
-  }
-
-  get showHeader(): boolean {
-    return this.hasHeader || this.hasCloseButton;
-  }
-
-  public ngOnChanges(changes: SimpleChanges): void {
-    if (changes['open'] || changes['lockBodyScroll']) {
-      this.toggleBodyScroll(this.open && this.lockBodyScroll);
-    }
-  }
-
-  public ngOnDestroy(): void {
-    this.toggleBodyScroll(false);
-  }
-
-  protected onBackdropClick(): void {
-    if (!this.closeOnBackdrop) {
-      return;
-    }
-    this.requestClose('backdrop');
-  }
-
-  protected onCloseClick(): void {
-    this.requestClose('close-button');
-  }
-
-  @HostListener('document:keydown', ['$event'])
-  onKeydown(event: KeyboardEvent): void {
-    if (!this.open || !this.closeOnEscape) {
-      return;
-    }
-
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      this.requestClose('escape');
-    }
-  }
-
-  private requestClose(reason: TModalCloseReason): void {
-    if (!this.open) {
-      return;
-    }
-
-    this.closed.emit({ reason });
-  }
-
-  private toggleBodyScroll(disable: boolean): void {
-    document.body.style.overflow = disable ? 'hidden' : '';
-  }
-}

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

@@ -1,9 +0,0 @@
-import { TBaseSize } from '../../types/base.types';
-
-export type TModalSize = TBaseSize;
-
-export type TModalCloseReason = 'backdrop' | 'close-button' | 'escape';
-
-export interface ModalCloseEvent {
-  reason: TModalCloseReason;
-}

package/src/lib/components/morph/blob-moph/blob-moprh.component.spec.ts

@@ -1,79 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { BlobMorphComponent } from './blob-moprh.component';
-import { SpinnerComponent } from '../../loader/spinner/spinner.component';
-
-describe('BlobMorphComponent', () => {
-  let fixture: ComponentFixture<BlobMorphComponent>;
-  let component: BlobMorphComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [BlobMorphComponent, SpinnerComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(BlobMorphComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('renders an image when imageUrl is provided', () => {
-    component.imageUrl = 'https://example.com/image.jpg';
-
-    fixture.detectChanges();
-
-    const imageEl = fixture.debugElement.query(By.css('image'));
-    const rectEl = fixture.debugElement.query(By.css('rect'));
-
-    expect(imageEl).toBeTruthy();
-    expect(rectEl).toBeNull();
-  });
-
-  it('renders a fallback rect when no imageUrl is provided', () => {
-    component.imageUrl = null;
-    component.fillColor = '#123456';
-
-    fixture.detectChanges();
-
-    const rectEl = fixture.debugElement.query(By.css('rect'));
-    expect(rectEl).toBeTruthy();
-    expect(rectEl.attributes['fill']).toBe('#123456');
-  });
-
-  it('shows a spinner until load completes', () => {
-    component.imageUrl = 'https://example.com/image.jpg';
-
-    fixture.detectChanges();
-
-    expect(fixture.debugElement.query(By.css('frg-spinner'))).toBeTruthy();
-
-    component.onLoadEvent();
-    fixture.detectChanges();
-
-    expect((component as any).isLoaded).toBeTrue();
-    expect(fixture.debugElement.query(By.css('frg-spinner'))).toBeNull();
-  });
-
-  it('emits loadEvent on image load', () => {
-    const emitSpy = spyOn(component.loadEvent, 'emit');
-
-    component.onLoadEvent();
-
-    expect(emitSpy).toHaveBeenCalled();
-  });
-
-  it('does not log an error when morph paths exist', () => {
-    const errorSpy = spyOn(console, 'error');
-    component.duration = 1234;
-    component.clipId = 'test-clip';
-
-    fixture.detectChanges();
-
-    expect(errorSpy).not.toHaveBeenCalled();
-  });
-
-  it('generates a valid SVG path string', () => {
-    const path = (component as any).generateRandomPath(6, 40, 10) as string;
-    expect(path.startsWith('M')).toBeTrue();
-    expect(path.trim().endsWith('Z')).toBeTrue();
-  });
-});