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

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

@@ -1,211 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import {
-  Component,
-  ContentChild,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  QueryList,
-  SimpleChanges,
-  TemplateRef,
-  ViewChildren
-} from '@angular/core';
-import {
-  AccordionItem,
-  AccordionItemContext,
-  AccordionToggleEvent,
-  TAccordionSize,
-  TAccordionStyle
-} from './accordion.type';
-
-@Component({
-  selector: 'frg-accordion',
-  standalone: true,
-  imports: [NgTemplateOutlet],
-  templateUrl: './accordion.component.html',
-  styleUrl: './accordion.component.scss'
-})
-export class AccordionComponent implements OnChanges {
-  @Input() items: AccordionItem[] = [];
-  @Input() expandedIds: string[] = [];
-  @Input() multi: boolean = false;
-  @Input() styleType: TAccordionStyle = 'default';
-  @Input() size: TAccordionSize = 'large';
-  @Input() toggleOnHeaderClick: boolean = true;
-  @Input() animated: boolean = true;
-  @Input() focusPanelOnOpen: boolean = false;
-
-  @Output() expandedIdsChange = new EventEmitter<string[]>();
-  @Output() toggled = new EventEmitter<AccordionToggleEvent>();
-  @Output() opened = new EventEmitter<AccordionToggleEvent>();
-  @Output() closed = new EventEmitter<AccordionToggleEvent>();
-
-  @ContentChild('frgAccordionHeader', { read: TemplateRef }) headerTemplate?: TemplateRef<AccordionItemContext>;
-  @ContentChild('frgAccordionContent', { read: TemplateRef }) contentTemplate?: TemplateRef<AccordionItemContext>;
-  @ContentChild('frgAccordionIcon', { read: TemplateRef }) iconTemplate?: TemplateRef<AccordionItemContext>;
-  @ContentChild('frgAccordionToggle', { read: TemplateRef }) toggleIconTemplate?: TemplateRef<AccordionItemContext>;
-
-  @ViewChildren('headerBtn') headerButtons!: QueryList<ElementRef<HTMLButtonElement>>;
-  @ViewChildren('panelBody') panelBodies!: QueryList<ElementRef<HTMLElement>>;
-
-  public viewItems: AccordionItem[] = [];
-  private uidCounter = 0;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['items']) {
-      this.viewItems = this.normalizeItems(this.items);
-      const initialExpanded = this.expandedIds?.length
-        ? [...this.expandedIds]
-        : this.viewItems.filter(item => item.expanded).map(item => item.id!) || [];
-      this.setExpandedIds(initialExpanded, false);
-    }
-
-    if (changes['expandedIds'] && !changes['expandedIds'].firstChange) {
-      this.setExpandedIds(this.expandedIds || [], false);
-    }
-  }
-
-  isExpanded(id?: string): boolean {
-    return !!id && (this.expandedIds?.includes(id) ?? false);
-  }
-
-  headerId(id: string): string {
-    return `${id}-header`;
-  }
-
-  panelId(id: string): string {
-    return `${id}-panel`;
-  }
-
-  onHeaderClick(index: number, event: Event): void {
-    if (!this.toggleOnHeaderClick) {
-      return;
-    }
-    event.preventDefault();
-    this.toggleAt(index);
-  }
-
-  onHeaderKeydown(event: KeyboardEvent, index: number): void {
-    const key = event.key;
-    if (key === 'Enter' || key === ' ') {
-      event.preventDefault();
-      this.toggleAt(index);
-      return;
-    }
-
-    const headers = this.headerButtons?.toArray() || [];
-    if (!headers.length) {
-      return;
-    }
-
-    if (key === 'ArrowDown' || key === 'ArrowRight') {
-      event.preventDefault();
-      const next = (index + 1) % headers.length;
-      headers[next].nativeElement.focus();
-    } else if (key === 'ArrowUp' || key === 'ArrowLeft') {
-      event.preventDefault();
-      const prev = (index - 1 + headers.length) % headers.length;
-      headers[prev].nativeElement.focus();
-    } else if (key === 'Home') {
-      event.preventDefault();
-      headers[0].nativeElement.focus();
-    } else if (key === 'End') {
-      event.preventDefault();
-      headers.at(-1)?.nativeElement.focus();
-    }
-  }
-
-  toggleAt(index: number): void {
-    const item = this.viewItems[index];
-    if (!item || item.disabled) {
-      return;
-    }
-
-    const itemId = item.id!;
-    const currentlyExpanded = this.isExpanded(itemId);
-    let nextExpandedIds: string[];
-
-    if (this.multi) {
-      nextExpandedIds = currentlyExpanded ? this.collapseMulti(itemId) : this.expandMulti(itemId);
-    } else {
-      nextExpandedIds = currentlyExpanded ? this.collapseSingle() : this.expandSingle(itemId);
-    }
-
-    this.setExpandedIds(nextExpandedIds, true, item, index);
-  }
-
-  buildContext<T = unknown>(item: AccordionItem<T>, index: number): AccordionItemContext<T> {
-    return {
-      $implicit: item,
-      item,
-      index,
-      expanded: this.isExpanded(item.id),
-      toggle: () => this.toggleAt(index)
-    };
-  }
-
-  private normalizeItems(items: AccordionItem[]): AccordionItem[] {
-    return (items || []).map((item, index) => ({
-      ...item,
-      id: item.id ?? this.generateId(index)
-    }));
-  }
-
-  private generateId(index: number): string {
-    this.uidCounter += 1;
-    return `frg-accordion-item-${index}-${this.uidCounter}`;
-  }
-
-  private expandSingle(id: string): string[] {
-    return [id];
-  }
-
-  private collapseSingle(): string[] {
-    return [];
-  }
-
-  private expandMulti(id: string): string[] {
-    return Array.from(new Set([...(this.expandedIds || []), id]));
-  }
-
-  private collapseMulti(id: string): string[] {
-    return (this.expandedIds || []).filter(activeId => activeId !== id);
-  }
-
-  private setExpandedIds(nextIds: string[], emit: boolean, item?: AccordionItem, index?: number): void {
-    const normalized = this.multi ? nextIds : nextIds.slice(0, 1);
-    this.expandedIds = normalized;
-    this.viewItems = this.viewItems.map(viewItem => ({
-      ...viewItem,
-      expanded: normalized.includes(viewItem.id!)
-    }));
-
-    if (emit) {
-      this.expandedIdsChange.emit(this.expandedIds);
-      if (item && index !== undefined) {
-        const payload: AccordionToggleEvent = {
-          id: item.id!,
-          index,
-          expanded: this.isExpanded(item.id),
-          item,
-          expandedIds: this.expandedIds
-        };
-        this.toggled.emit(payload);
-        (payload.expanded ? this.opened : this.closed).emit(payload);
-      }
-    }
-
-    if (item && this.focusPanelOnOpen && this.isExpanded(item.id)) {
-      setTimeout(() => this.focusPanel(index!), 0);
-    }
-  }
-
-  private focusPanel(index: number): void {
-    const panel = this.panelBodies?.get(index);
-    if (panel?.nativeElement) {
-      panel.nativeElement.focus();
-    }
-  }
-}

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

@@ -1,82 +0,0 @@
-import { TemplateRef } from '@angular/core';
-import { TBaseSize, TBaseStyle } from '../../types/base.types';
-
-export type TAccordionStyle = TBaseStyle;
-export type TAccordionSize = TBaseSize;
-
-export interface AccordionItemContext<T = unknown> {
-  $implicit: AccordionItem<T>;
-  item: AccordionItem<T>;
-  index: number;
-  expanded: boolean;
-  toggle: () => void;
-}
-
-export interface AccordionItem<T = unknown> {
-  /**
-   * Unique identifier for the accordion item.
-   * If not provided, it will be generated automatically.
-   */
-  id?: string;
-  /**
-   * Visible title inside the header.
-   */
-  title: string;
-  /**
-   * Optional subtitle rendered below the title in the default header.
-   */
-  subtitle?: string;
-  /**
-   * Prevents interaction when true.
-   */
-  disabled?: boolean;
-  /**
-   * Allows setting initial expansion per item.
-   */
-  expanded?: boolean;
-  /**
-   * Optional style override using the shared palette.
-   */
-  style?: TAccordionStyle;
-  /**
-   * Optional size override for the item header.
-   */
-  size?: TAccordionSize;
-  /**
-   * Optional icon rendered on the left of the header when no custom template is provided.
-   * Typically a CSS class (e.g., for an icon font) or plain text.
-   */
-  icon?: string;
-  /**
-   * Custom icon template for this item only.
-   */
-  iconTemplate?: TemplateRef<AccordionItemContext<T>>;
-  /**
-   * Custom toggle icon template for this item only (replaces the default chevron).
-   */
-  toggleIconTemplate?: TemplateRef<AccordionItemContext<T>>;
-  /**
-   * Arbitrary data that can be passed to templates for custom rendering.
-   */
-  data?: T;
-  /**
-   * Optional plain content for quick rendering when no template is provided.
-   */
-  content?: string;
-  /**
-   * Custom header template for this item only.
-   */
-  headerTemplate?: TemplateRef<AccordionItemContext<T>>;
-  /**
-   * Custom body template for this item only.
-   */
-  contentTemplate?: TemplateRef<AccordionItemContext<T>>;
-}
-
-export interface AccordionToggleEvent<T = unknown> {
-  id: string;
-  index: number;
-  expanded: boolean;
-  item: AccordionItem<T>;
-  expandedIds: string[];
-}

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

@@ -1,43 +0,0 @@
-@if (breadcrumbItems.length) {
-  <nav
-    class="frg-breadcrumb"
-    aria-label="Breadcrumb"
-    [ngClass]="{
-      'frg-breadcrumb--primary': styleType === 'primary' || styleType === 'outline-primary',
-      'frg-breadcrumb--secondary': styleType === 'secondary' || styleType === 'outline-secondary',
-      'frg-breadcrumb--tertiary': styleType === 'tertiary' || styleType === 'outline-tertiary',
-      'frg-breadcrumb--info': styleType === 'info' || styleType === 'outline-info',
-      'frg-breadcrumb--success': styleType === 'success' || styleType === 'outline-success',
-      'frg-breadcrumb--warning': styleType === 'warning' || styleType === 'outline-warning',
-      'frg-breadcrumb--danger': styleType === 'danger' || styleType === 'outline-danger',
-      'frg-breadcrumb--dark': styleType === 'dark' || styleType === 'outline-dark',
-      'frg-breadcrumb--light': styleType === 'light' || styleType === 'outline-light'
-    }"
-  >
-    <ol class="frg-breadcrumb__list">
-      @for (item of breadcrumbItems; track item.label; let isLast = $last) {
-        <li class="frg-breadcrumb__item" [class.is-active]="item.isActive || isLast">
-          @if (item.url && !isLast) {
-            <a class="frg-breadcrumb__link" [routerLink]="item.url" [attr.aria-label]="item.ariaLabel || null">
-              @if (item.iconClass) {
-                <span class="frg-breadcrumb__icon" [ngClass]="item.iconClass" aria-hidden="true"></span>
-              }
-              <span class="frg-breadcrumb__label">{{ item.label }}</span>
-            </a>
-          } @else {
-            <span class="frg-breadcrumb__current" [attr.aria-label]="item.ariaLabel || null">
-              @if (item.iconClass) {
-                <span class="frg-breadcrumb__icon" [ngClass]="item.iconClass" aria-hidden="true"></span>
-              }
-              <span class="frg-breadcrumb__label">{{ item.label }}</span>
-            </span>
-          }
-
-          @if (!isLast) {
-            <span class="frg-breadcrumb__separator">{{ separator }}</span>
-          }
-        </li>
-      }
-    </ol>
-  </nav>
-}

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

@@ -1,112 +0,0 @@
-@use './../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-}
-
-.frg-breadcrumb {
-  font-family: $base-font;
-  color: var(--frg-breadcrumb-text, $color-dark-neutral);
-  --frg-breadcrumb-accent: #{$color-dark-neutral};
-  --frg-breadcrumb-text: #{$color-dark-soft};
-  --frg-breadcrumb-muted: #{$color-light-neutral};
-
-  &__list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.35rem;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  &__item {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    font-size: $font-size-xs;
-    color: var(--frg-breadcrumb-text);
-
-    &.is-active {
-      color: var(--frg-breadcrumb-text);
-      font-weight: 600;
-    }
-  }
-
-  &__link,
-  &__current {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    text-decoration: none;
-    color: inherit;
-  }
-
-  &__link:hover {
-    color: var(--frg-breadcrumb-accent);
-  }
-
-  &__link:hover .frg-breadcrumb__label {
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-
-  &__icon {
-    font-size: 0.9em;
-    line-height: 1;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  &__separator {
-    color: var(--frg-breadcrumb-muted);
-    font-size: $font-size-xs;
-  }
-
-  &--primary {
-    --frg-breadcrumb-text: #{$color-primary};
-    --frg-breadcrumb-accent: #{$color-primary-dark};
-    --frg-breadcrumb-muted: #{$color-primary-light};
-  }
-  &--secondary {
-    --frg-breadcrumb-text: #{$color-secondary};
-    --frg-breadcrumb-accent: #{$color-secondary-dark};
-    --frg-breadcrumb-muted: #{$color-secondary-light};
-  }
-  &--tertiary {
-    --frg-breadcrumb-text: #{$color-tertiary};
-    --frg-breadcrumb-accent: #{$color-tertiary-dark};
-    --frg-breadcrumb-muted: #{$color-tertiary-light};
-  }
-  &--info {
-    --frg-breadcrumb-text: #{$color-info};
-    --frg-breadcrumb-accent: #{$color-info-dark};
-    --frg-breadcrumb-muted: #{$color-info-light};
-  }
-  &--success {
-    --frg-breadcrumb-text: #{$color-success};
-    --frg-breadcrumb-accent: #{$color-success-dark};
-    --frg-breadcrumb-muted: #{$color-success-light};
-  }
-  &--warning {
-    --frg-breadcrumb-text: #{$color-warning};
-    --frg-breadcrumb-accent: #{$color-warning-dark};
-    --frg-breadcrumb-muted: #{$color-warning-light};
-  }
-  &--danger {
-    --frg-breadcrumb-text: #{$color-danger};
-    --frg-breadcrumb-accent: #{$color-danger-dark};
-    --frg-breadcrumb-muted: #{$color-danger-light};
-  }
-  &--dark {
-    --frg-breadcrumb-text: #{$color-dark-neutral};
-    --frg-breadcrumb-accent: #{$color-dark};
-    --frg-breadcrumb-muted: #{$color-dark-soft};
-  }
-  &--light {
-    --frg-breadcrumb-text: #{$color-light-neutral};
-    --frg-breadcrumb-accent: #{$color-light};
-    --frg-breadcrumb-muted: #{$color-light-soft};
-  }
-}

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

@@ -1,33 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { provideRouter } from '@angular/router';
-import { BreadcrumbComponent } from './breadcrumb.component';
-
-describe('BreadcrumbComponent', () => {
-  let fixture: ComponentFixture<BreadcrumbComponent>;
-  let component: BreadcrumbComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [BreadcrumbComponent],
-      providers: [provideRouter([])]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(BreadcrumbComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('renders items provided via input', () => {
-    component.items = [
-      { label: 'Home', url: '/' },
-      { label: 'Library', url: '/library' },
-      { label: 'Books' }
-    ];
-
-    fixture.detectChanges();
-
-    const items = fixture.debugElement.queryAll(By.css('.frg-breadcrumb__item'));
-    expect(items.length).toBe(3);
-    expect(items[2].nativeElement.classList).toContain('is-active');
-  });
-});

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

@@ -1,103 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router, RouterLink } from '@angular/router';
-import { filter, Subject, takeUntil } from 'rxjs';
-import { BreadcrumbItem } from './breadcrumb.interface';
-import { TBaseStyle } from '../../types/base.types';
-
-@Component({
-  selector: 'frg-breadcrumb',
-  imports: [CommonModule, RouterLink],
-  templateUrl: './breadcrumb.component.html',
-  styleUrl: './breadcrumb.component.scss',
-})
-export class BreadcrumbComponent implements OnInit, OnDestroy {
-  private readonly router: Router = inject(Router);
-  private readonly activatedRoute: ActivatedRoute = inject(ActivatedRoute);
-  /**
-   * Breadcrumb items to render.
-   */
-  @Input() items: BreadcrumbItem[] = [];
-  /**
-   * Build breadcrumbs automatically from the current route tree.
-   */
-  @Input() auto: boolean = false;
-  /**
-   * Separator displayed between breadcrumb items.
-   */
-  @Input() separator: string = '/';
-  /**
-   * Color theme for breadcrumb text.
-   */
-  @Input() styleType: TBaseStyle = 'default';
-
-  protected autoItems: BreadcrumbItem[] = [];
-  private readonly destroy$ = new Subject<void>();
-
-  public ngOnInit(): void {
-    if (this.auto) {
-      this.buildAutoItems();
-      this.router.events
-        .pipe(filter(event => event instanceof NavigationEnd), takeUntil(this.destroy$))
-        .subscribe(() => this.buildAutoItems());
-    }
-  }
-
-  public ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  public get breadcrumbItems(): BreadcrumbItem[] {
-    const items = this.auto ? this.autoItems : this.items;
-    if (!items.length) return [];
-
-    return items.map((item, index) => ({
-      ...item,
-      isActive: item.isActive ?? index === items.length - 1
-    }));
-  }
-
-  private buildAutoItems(): void {
-    const items: BreadcrumbItem[] = [];
-    let url = '';
-    let route: ActivatedRoute | null = this.activatedRoute.root;
-
-    while (route?.firstChild) {
-      route = route.firstChild;
-      const config = route.routeConfig;
-      if (!config?.path || config.path === '**') {
-        continue;
-      }
-
-      const segments = route.snapshot.url.map(segment => segment.path).filter(Boolean);
-      if (!segments.length) {
-        continue;
-      }
-
-      const label = this.resolveLabel(route, segments);
-      url += `/${segments.join('/')}`;
-
-      items.push({
-        label,
-        url,
-        iconClass: route.snapshot.data?.['breadcrumbIcon']
-      });
-    }
-
-    this.autoItems = items;
-  }
-
-  private resolveLabel(route: ActivatedRoute, segments: string[]): string {
-    const dataLabel = route.snapshot.data?.['breadcrumb'];
-    if (typeof dataLabel === 'string' && dataLabel.trim().length) {
-      return dataLabel;
-    }
-
-    const fallback = segments.join(' ');
-    return fallback
-      .split('-')
-      .map(part => part.charAt(0).toUpperCase() + part.slice(1))
-      .join(' ');
-  }
-}

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

@@ -1,7 +0,0 @@
-export interface BreadcrumbItem {
-  label: string;
-  url?: string | (string | number)[];
-  iconClass?: string;
-  ariaLabel?: string;
-  isActive?: boolean;
-}

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

@@ -1,57 +0,0 @@
-<button
-  class="frg-btn"
-  [id]="id"
-  [class]="class"
-  [attr.aria-label]="ariaLabel || null"
-  [attr.disabled]="disabled ? true : null"
-  [attr.type]="type"
-  [routerLink]="buttonRouterLink"
-  [routerLinkActive]="buttonRouterLinkActive"
-  [ngClass]="{
-    'frg-btn__ghost': styleType === 'ghost',
-    'frg-btn__icon': styleType === 'icon',
-    'frg-btn__primary': styleType === 'primary',
-    'frg-btn__secondary': styleType === 'secondary',
-    'frg-btn__tertiary': styleType === 'tertiary',
-    'frg-btn__neutral': styleType === 'neutral',
-    'frg-btn__dark': styleType === 'dark',
-    'frg-btn__light': styleType === 'light',
-    'frg-btn__info': styleType === 'info',
-    'frg-btn__success': styleType === 'success',
-    'frg-btn__warning': styleType === 'warning',
-    'frg-btn__danger': styleType === 'danger',
-    'frg-btn__outline-primary': styleType === 'outline-primary',
-    'frg-btn__outline-secondary': styleType === 'outline-secondary',
-    'frg-btn__outline-tertiary': styleType === 'outline-tertiary',
-    'frg-btn__outline-dark': styleType === 'outline-dark',
-    'frg-btn__outline-light': styleType === 'outline-light',
-    'frg-btn__outline-info': styleType === 'outline-info',
-    'frg-btn__outline-success': styleType === 'outline-success',
-    'frg-btn__outline-warning': styleType === 'outline-warning',
-    'frg-btn__outline-danger': styleType === 'outline-danger',
-    'frg-btn--pill': shape === 'pill',
-    'frg-btn--small': size === 'small',
-    'frg-btn--medium': size === 'medium',
-    'frg-btn--large': size === 'large'
-  }"
-  (click)="onClick()"
->
-  <div
-    class="d-flex justify-content-center align-items-center"
-    [ngClass]="containerNgClass"
-  >
-    @if(text){
-      <span
-        [class]="textClass"
-      >
-        {{text}}
-      </span>
-    }
-    @if(iconClass){
-      <span
-        [class]="iconClass"
-        [ngClass]="iconClassMap"
-      ></span>
-    }
-  </div>
-</button>