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

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

@@ -1,96 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { animate, svg } from 'animejs';
-import { MorphBase } from '../morph.abstract';
-import { SpinnerComponent } from '../../loader/spinner/spinner.component';
-
-@Component({
-  selector: 'app-blob-morph',
-  templateUrl: './blob-morph.component.html',
-  imports: [SpinnerComponent],
-  styleUrls: ['./blob-morph.component.scss'],
-})
-export class BlobMorphComponent extends MorphBase implements AfterViewInit {
-  @Input() override imageUrl: string | null = null;
-  @Input() override fillColor: string | null = null;
-  @Input() override pathStart: string = this.generateRandomPath();
-  @Input() override pathEnd: string = this.generateRandomPath();
-  @Input() override duration: number = 4000;
-
-  @Output() loadEvent: EventEmitter<void> = new EventEmitter<void>();
-
-  @ViewChild('morphPath', { static: false })
-    morphPathRef!: ElementRef<SVGPathElement>;
-  clipId = `clip-${Math.random().toString(36).substring(2, 10)}`;
-
-  protected isLoaded: boolean = false;
-
-  ngAfterViewInit(): void {
-    const startPath = this.morphPathRef.nativeElement;
-    const endPath = document.getElementById(
-      `morph-path-end-${this.clipId}`
-    ) as SVGPathElement | null;
-
-    if (startPath && endPath) {
-      animate(startPath, {
-        d: svg.morphTo(endPath),
-        direction: 'alternate-reverse',
-        duration: this.duration,
-        ease: 'inOut',
-        loop: true,
-        alternate: true,
-      });
-    } else {
-      console.error('Path elements not found');
-    }
-  }
-
-  protected override generateRandomPath(
-    points = 8,
-    radius = 60,
-    variability = 20
-  ): string {
-    const angleStep = (Math.PI * 2) / points;
-    const coords: { x: number; y: number }[] = [];
-
-    for (let i = 0; i < points; i++) {
-      const angle = i * angleStep;
-      const randRadius = radius + (Math.random() - 0.5) * 2 * variability;
-      const x = Math.cos(angle) * randRadius;
-      const y = Math.sin(angle) * randRadius;
-      coords.push({ x, y });
-    }
-
-    let path = `M${coords[0].x.toFixed(1)},${coords[0].y.toFixed(1)}`;
-
-    for (let i = 0; i < coords.length; i++) {
-      const p0 = coords[i];
-      const p1 = coords[(i + 1) % coords.length];
-      const pPrev = coords[(i - 1 + coords.length) % coords.length];
-      const pNext = coords[(i + 2) % coords.length];
-
-      const control1X = p0.x + (p1.x - pPrev.x) * 0.2;
-      const control1Y = p0.y + (p1.y - pPrev.y) * 0.2;
-
-      const control2X = p1.x - (pNext.x - p0.x) * 0.2;
-      const control2Y = p1.y - (pNext.y - p0.y) * 0.2;
-
-      path += ` C${control1X.toFixed(1)},${control1Y.toFixed(1)} ${control2X.toFixed(1)},${control2Y.toFixed(1)} ${p1.x.toFixed(1)},${p1.y.toFixed(1)}`;
-    }
-
-    path += ' Z';
-    return path;
-  }
-
-  onLoadEvent(): void {
-    this.isLoaded = true;
-    this.loadEvent.emit();
-  }
-}

package/src/lib/components/morph/blob-moph/blob-morph.component.html

@@ -1,34 +0,0 @@
-<div class="blob-container">
-  <svg
-    viewBox="0 0 200 200"
-    xmlns="http://www.w3.org/2000/svg"
-    class="blob-svg"
-    [class.hidden]="!isLoaded"
-  >
-    <defs>
-      <clipPath [attr.id]="clipId" transform="translate(100 100)">
-        <path #morphPath [attr.d]="pathStart" />
-      </clipPath>
-      <path [attr.id]="'morph-path-end-' + clipId" [attr.d]="pathEnd" />
-    </defs>
-
-    @if (imageUrl) {
-      <image
-        [attr.href]="imageUrl"
-        width="100%"
-        height="100%"
-        preserveAspectRatio="xMidYMid slice"
-        [attr.clip-path]="'url(#' + clipId + ')'"
-        (load)="onLoadEvent()"
-      />
-    } @else {
-      <g [attr.clip-path]="'url(#' + clipId + ')'">
-        <rect width="100%" height="100%" [attr.fill]="fillColor || '#ccc'" />
-      </g>
-    }
-  </svg>
-
-  @if (!isLoaded) {
-    <frg-spinner [isOverlayItem]="true"></frg-spinner>
-  }
-</div>

package/src/lib/components/morph/blob-moph/blob-morph.component.scss

@@ -1,7 +0,0 @@
-:host {
-  display: block;
-
-  .blob-container {
-    position: relative;
-  }
-}

package/src/lib/components/morph/morph.abstract.ts

@@ -1,13 +0,0 @@
-export abstract class MorphBase {
-  protected imageUrl: string | null = null;
-  protected fillColor: string | null = null;
-  protected pathStart: string = '';
-  protected pathEnd: string = '';
-  protected duration: number = 4000;
-
-  protected abstract generateRandomPath(
-    points: number,
-    radius: number,
-    variability: number
-  ): string;
-}

package/src/lib/components/pagination/pagination.interface.ts

@@ -1,4 +0,0 @@
-export interface IPaginationOutput<T> {
-  page: number;
-  pagedData: T[];
-}

package/src/lib/components/pagination/small-pagination/small-pagination.component.html

@@ -1,61 +0,0 @@
-@if (totalItems > pageSize) {
-  <nav
-    class="frg-pagination-small"
-    aria-label="Paginazione nome lista"
-    [ngClass]="{
-      'frg-pagination-small__primary': styleType === 'primary',
-      'frg-pagination-small__secondary': styleType === 'secondary',
-      'frg-pagination-small__tertiary': styleType === 'tertiary',
-      'frg-pagination-small__dark': styleType === 'dark',
-      'frg-pagination-small__light': styleType === 'light'
-    }"
-  >
-    <ul class="frg-pagination-small__list">
-      <li class="frg-pagination-small__paging frg-pagination-small__prev">
-        <a
-          href="javascript:void(0);"
-          [class.disabled]="page === 1"
-          (click)="changePage(page - 1)"
-        >
-          <span class="visually-hidden">Pagina precedente</span>
-          <span class="fas fa-angle-left" aria-hidden="true"></span>
-        </a>
-      </li>
-      @for (pageNum of pagesArray; track pageNum; let i = $index) {
-        @if (showStartEllipsis && i === 1) {
-          <li class="frg-pagination-small__paging frg-pagination-small__ellipsis">
-            <span class="ellipsis">...</span>
-          </li>
-        }
-        <li
-          class="frg-pagination-small__paging frg-pagination-small__page-number"
-        >
-          <a
-            href="javascript:void(0);"
-            [attr.aria-current]="page === pageNum ? 'page' : null"
-            (click)="changePage(pageNum)"
-          >
-            <span class="visually-hidden">Pagina</span>
-            {{ pageNum }}
-          </a>
-        </li>
-        @if (showEndEllipsis && i === pagesArray.length - 2) {
-          <li class="frg-pagination-small__paging frg-pagination-small__ellipsis">
-            <span class="ellipsis">...</span>
-          </li>
-        }
-      }
-
-      <li class="frg-pagination-small__paging frg-pagination-small__next">
-        <a
-          href="javascript:void(0);"
-          [class.disabled]="page === totalPages"
-          (click)="changePage(page + 1)"
-        >
-          <span class="visually-hidden">Pagina successiva</span>
-          <span class="fas fa-angle-right" aria-hidden="true"></span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-}

package/src/lib/components/pagination/small-pagination/small-pagination.component.scss

@@ -1,187 +0,0 @@
-@use "sass:color";
-@use './../../../../../assets/styles/scss/variables' as *;
-
-.frg-pagination-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 12px 0;
-  gap: 0.2rem;
-
-  &__list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    li:first-child {
-      margin-right: 0.5rem;
-    }
-
-    li:last-child {
-      margin-left: 0.5rem;
-    }
-  }
-
-  & a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 999px;
-    min-width: 1.9rem;
-    height: 1.9rem;
-    font-weight: 500;
-    border: 1px solid transparent;
-    text-decoration: none;
-    text-align: center;
-    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-    cursor: pointer;
-    background-color: transparent;
-    color: $color-dark-soft;
-
-    &.disabled {
-      cursor: default;
-      color: $color-disabled;
-      background-color: transparent;
-    }
-
-    &:focus-visible {
-      outline: 2px solid color.scale($color-primary, $lightness: 35%);
-      outline-offset: 2px;
-    }
-  }
-
-  &__primary {
-    a {
-      margin: 0 2px;
-
-      &[aria-current='page'] {
-        background-color: $color-primary;
-        color: $color-light;
-        border-color: transparent;
-        pointer-events: none;
-      }
-
-      &:hover:not([aria-current='page']) {
-        background-color: color.scale($color-primary, $lightness: 40%);
-        color: $color-light;
-      }
-
-      &.disabled {
-        &:hover {
-          background-color: #f1f2f5;
-          color: $color-disabled;
-        }
-      }
-    }
-  }
-
-  &__secondary {
-    a {
-      margin: 0 2px;
-
-      &[aria-current='page'] {
-        background-color: $color-secondary;
-        color: $color-light;
-        border-color: transparent;
-        pointer-events: none;
-      }
-
-      &:hover:not([aria-current='page']) {
-        background-color: color.scale($color-secondary, $lightness: 40%);
-        color: $color-light;
-      }
-
-      &.disabled {
-        &:hover {
-          background-color: #f1f2f5;
-          color: $color-disabled;
-        }
-      }
-    }
-  }
-
-  &__tertiary {
-    a {
-      margin: 0 2px;
-
-      &[aria-current='page'] {
-        background-color: $color-tertiary;
-        color: $color-light;
-        border-color: transparent;
-        pointer-events: none;
-      }
-
-      &:hover:not([aria-current='page']) {
-        background-color: color.scale($color-tertiary, $lightness: 40%);
-        color: $color-light;
-      }
-
-      &.disabled {
-        &:hover {
-          background-color: #f1f2f5;
-          color: $color-disabled;
-        }
-      }
-    }
-  }
-
-  &__dark {
-    a {
-      margin: 0 2px;
-      background-color: $color-light;
-      border: 1px solid rgba($color-light, 0.12);
-      color: $color-dark-soft;
-
-      &[aria-current='page'] {
-        background-color: rgba($color-dark, 0.9);
-        border-color: rgba($color-dark, 0.85);
-        color: $color-light-soft;
-        pointer-events: none;
-      }
-
-      &:hover:not([aria-current='page']) {
-        background-color: color.scale($color-dark-neutral, $lightness: 45%);
-        color: $color-light;
-      }
-
-      &.disabled {
-        border-color: rgba($color-light, 0.08);
-        color: $color-disabled;
-
-        &:hover {
-          background-color: $color-dark-neutral;
-        }
-      }
-    }
-  }
-
-  &__light {
-    a {
-      margin: 0 2px;
-      color: $color-light-neutral;
-
-      &[aria-current='page'] {
-        background-color: $color-light;
-        color: $color-dark-neutral;
-        pointer-events: none;
-      }
-
-      &:hover:not([aria-current='page']) {
-        background-color: $color-light-soft;
-        color: $color-dark-neutral;
-      }
-
-      &.disabled {
-        color: $color-dark-soft;
-        &:hover {
-          background-color: transparent;
-          color: $color-dark-soft;
-          pointer-events: none;
-        }
-      }
-    }
-  }
-}

package/src/lib/components/pagination/small-pagination/small-pagination.component.spec.ts

@@ -1,88 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { SmallPaginationComponent } from './small-pagination.component';
-import { IPaginationOutput } from '../pagination.interface';
-
-type DemoItem = { id: number };
-
-describe('SmallPaginationComponent', () => {
-  let fixture: ComponentFixture<SmallPaginationComponent<DemoItem>>;
-  let component: SmallPaginationComponent<DemoItem>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SmallPaginationComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(SmallPaginationComponent<DemoItem>);
-    component = fixture.componentInstance;
-  });
-
-  it('builds simple pages when ellipsis disabled', () => {
-    component.totalItems = 20;
-    component.pageSize = 5;
-    component.fullData = Array.from({ length: 20 }, (_, i) => ({ id: i + 1 }));
-    component.hasElipsisPages = false;
-
-    fixture.detectChanges();
-
-    expect(component.pagesArray).toEqual([1, 2, 3, 4]);
-    expect(component.showStartEllipsis).toBeFalse();
-    expect(component.showEndEllipsis).toBeFalse();
-  });
-
-  it('builds ellipsis pages for large datasets', () => {
-    component.totalItems = 48;
-    component.pageSize = 4;
-    component.fullData = Array.from({ length: 48 }, (_, i) => ({ id: i + 1 }));
-    component.page = 3;
-    component.hasElipsisPages = true;
-
-    fixture.detectChanges();
-
-    expect(component.pagesArray).toEqual([1, 2, 3, 4, 12]);
-    expect(component.showStartEllipsis).toBeFalse();
-    expect(component.showEndEllipsis).toBeTrue();
-  });
-
-  it('emits pageChange with paged data', () => {
-    const emitSpy = spyOn(component.pageChange, 'emit');
-
-    component.totalItems = 10;
-    component.pageSize = 2;
-    component.fullData = Array.from({ length: 10 }, (_, i) => ({ id: i + 1 }));
-
-    fixture.detectChanges();
-
-    component.changePage(2);
-
-    const expected: IPaginationOutput<DemoItem> = {
-      page: 2,
-      pagedData: [{ id: 3 }, { id: 4 }]
-    };
-
-    expect(emitSpy).toHaveBeenCalledWith(expected);
-  });
-
-  it('clamps page to 1 on init', () => {
-    component.totalItems = 5;
-    component.pageSize = 5;
-    component.fullData = [{ id: 1 }];
-    component.page = 0;
-
-    fixture.detectChanges();
-
-    expect(component.page).toBe(1);
-  });
-
-  it('does not render pagination when only one page', () => {
-    component.totalItems = 4;
-    component.pageSize = 4;
-    component.fullData = Array.from({ length: 4 }, (_, i) => ({ id: i + 1 }));
-
-    fixture.detectChanges();
-
-    const nav = fixture.debugElement.query(By.css('nav'));
-    expect(nav).toBeNull();
-  });
-});

package/src/lib/components/pagination/small-pagination/small-pagination.component.ts

@@ -1,177 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { TBaseStyle } from '../../../types/base.types';
-import { IPaginationOutput } from '../pagination.interface';
-
-@Component({
-  selector: 'frg-small-pagination',
-  imports: [CommonModule],
-  templateUrl: './small-pagination.component.html',
-  styleUrls: ['./small-pagination.component.scss']
-})
-export class SmallPaginationComponent<T> implements OnInit, OnChanges {
-  @Input() totalItems = 0;
-  @Input() fullData = [] as T[];
-  @Input() page = 0;
-  @Input() pageSize = 0;
-  @Input() hasElipsisPages = false;
-  @Input() styleType: TBaseStyle = 'primary';
-
-  @Output() pageChange = new EventEmitter<IPaginationOutput<T>>();
-
-  pagesArray: number[] = [];
-  pagedData: T[] = [];
-  totalPages = 0;
-  showStartEllipsis = false;
-  showEndEllipsis = false;
-  maxVisiblePages = 4;
-
-  ngOnInit() {
-    this.calculateTotalPages();
-    this.setCurrentPage();
-    this.generatePagesArray();
-    this.changePage(this.page);
-  }
-
-  ngOnChanges() {
-    this.calculateTotalPages();
-    this.setCurrentPage();
-    this.generatePagesArray();
-    this.changePage(this.page);
-  }
-
-  private calculateTotalPages() {
-    this.totalPages = Math.ceil(this.totalItems / this.pageSize);
-  }
-
-  private generatePagesArray() {
-    this.pagesArray = [];
-
-    if (this.totalPages <= 0) {
-      this.resetEllipsis();
-      return;
-    }
-
-    const currentPage = this.clampPage(this.page);
-
-    if (!this.hasElipsisPages || this.isSimplePagination()) {
-      this.buildSimplePages();
-      return;
-    }
-
-    this.buildEllipsisPages(currentPage);
-  }
-
-  private buildSimplePages() {
-    this.pagesArray = this.range(1, this.totalPages);
-    this.resetEllipsis();
-  }
-
-  private buildEllipsisPages(currentPage: number) {
-    const startPage = 1;
-    const endPage = this.totalPages;
-    const visibleMiddle = this.getVisibleMiddleCount();
-
-    if (visibleMiddle === 0) {
-      this.pagesArray = endPage === 1 ? [startPage] : [startPage, endPage];
-      this.showStartEllipsis = currentPage > startPage + 1;
-      this.showEndEllipsis = currentPage < endPage - 1;
-      return;
-    }
-
-    const { middleStart, middleEnd } = this.getMiddleRange(
-      currentPage,
-      visibleMiddle,
-      startPage,
-      endPage
-    );
-
-    const pagesToAdd = [
-      startPage,
-      ...this.range(middleStart, middleEnd),
-      endPage,
-    ];
-
-    this.pagesArray = this.uniquePages(pagesToAdd);
-    this.showStartEllipsis = middleStart > startPage + 1;
-    this.showEndEllipsis = middleEnd < endPage - 1;
-  }
-
-  private getVisibleMiddleCount(): number {
-    return Math.max(this.maxVisiblePages - 1, 0);
-  }
-
-  private getMiddleRange(
-    currentPage: number,
-    visibleMiddle: number,
-    startPage: number,
-    endPage: number
-  ): { middleStart: number; middleEnd: number } {
-    let middleStart = currentPage - Math.floor(visibleMiddle / 2);
-    let middleEnd = middleStart + visibleMiddle - 1;
-
-    if (middleStart < startPage + 1) {
-      middleStart = startPage + 1;
-      middleEnd = middleStart + visibleMiddle - 1;
-    }
-
-    if (middleEnd > endPage - 1) {
-      middleEnd = endPage - 1;
-      middleStart = Math.max(startPage + 1, middleEnd - visibleMiddle + 1);
-    }
-
-    return { middleStart, middleEnd };
-  }
-
-  private uniquePages(pages: number[]): number[] {
-    return pages.filter((value, index, array) => array.indexOf(value) === index);
-  }
-
-  private resetEllipsis() {
-    this.showStartEllipsis = false;
-    this.showEndEllipsis = false;
-  }
-
-  private clampPage(page: number): number {
-    return Math.min(Math.max(page, 1), this.totalPages);
-  }
-
-  changePage(newPage: number) {
-    if (newPage >= 1 && newPage <= this.totalPages) {
-      this.page = newPage;
-      const startIndex = (this.page - 1) * this.pageSize;
-      const endIndex = startIndex + this.pageSize;
-      const pagedData = this.fullData.slice(startIndex, endIndex);
-      this.pagedData = pagedData;
-      this.pageChange.emit({
-        page: this.page,
-        pagedData: this.pagedData,
-      });
-      this.generatePagesArray();
-    }
-  }
-
-  setCurrentPage() {
-    this.page = Math.max(this.page, 1);
-  }
-
-  private isSimplePagination(): boolean {
-    return (
-      !!this.maxVisiblePages &&
-      (this.totalPages <= this.maxVisiblePages || this.maxVisiblePages <= 2)
-    );
-  }
-
-  private range(start: number, end: number): number[] {
-    const result = [];
-    for (let i = start; i <= end; i++) result.push(i);
-    return result;
-  }
-}