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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,79 @@
+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();
+  });
+});