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

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

@@ -1,305 +0,0 @@
-@use "sass:color";
-@use "sass:list";
-@use './../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-  font-family: $base-font;
-}
-
-.frg-tabs {
-  display: flex;
-  flex-direction: column;
-
-  &[data-align='center'] .frg-tabs__list {
-    justify-content: center;
-  }
-
-  &[data-align='end'] .frg-tabs__list {
-    justify-content: flex-end;
-  }
-
-  &[data-align='stretch'] .frg-tabs__list {
-    justify-content: stretch;
-
-    .frg-tabs__tab {
-      flex: 1 1 auto;
-      text-align: center;
-    }
-  }
-}
-
-.frg-tabs__list {
-  display: flex;
-  align-items: flex-end;
-  border-bottom: 1px solid $color-light-soft;
-  flex-wrap: wrap;
-  overflow: visible;
-}
-
-.frg-tabs__tab {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  border: none;
-  background: transparent;
-  color: $color-dark-soft;
-  padding: 0.65rem 0.9rem;
-  border-radius: 0.2rem 0.2rem 0 0;
-  cursor: pointer;
-  overflow: hidden;
-  transition:
-    color 0.16s ease,
-    background-color 0.22s ease,
-    box-shadow 0.22s ease,
-    transform 0.18s ease;
-
-  &.is-disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  &:hover:not(.is-disabled) {
-    color: $color-dark-neutral;
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px color.scale($color-primary, $lightness: 35%);
-  }
-
-  &.is-active {
-    color: $color-dark;
-  }
-
-  .frg-tabs__tab-inner {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .frg-tabs__icon {
-    min-width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 0.35rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: color.scale($color-light, $lightness: -3%);
-    color: $color-dark;
-    flex-shrink: 0;
-    margin: 0 0.5rem;
-    font-weight: 600;
-    font-size: $font-size-xs;
-  }
-
-  .frg-tabs__icon-shape {
-    font-size: $font-size-sm;
-    line-height: 1;
-  }
-
-  .frg-tabs__label {
-    display: flex;
-    flex-direction: column;
-    gap: 0.05rem;
-    text-align: left;
-  }
-
-  .frg-tabs__label-text {
-    font-size: $font-size-sm;
-    font-weight: 600;
-    line-height: 1.35;
-  }
-
-  .frg-tabs__label-desc {
-    color: $color-dark-soft;
-    font-size: $font-size-2xs;
-    line-height: 1.3;
-  }
-
-  .frg-tabs__underline {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -1px;
-    height: 2px;
-    border-radius: 2px;
-    background-color: $color-primary;
-    opacity: 0;
-    transform: scaleX(0);
-    transform-origin: left center;
-    transition:
-      transform 0.250s cubic-bezier(0.25, 0.8, 0.4, 1),
-      opacity 0.18s ease;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background-color: transparent;
-    z-index: -1;
-    display: none;
-  }
-}
-
-.frg-tabs__tab[data-style^='outline-'] {
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-}
-
-.frg-tabs__tab[data-style^='outline-'] .frg-tabs__underline {
-  display: none;
-}
-
-.frg-tabs.is-animated {
-  .frg-tabs__panel {
-    transition: opacity 0.18s ease, transform 0.18s ease;
-  }
-}
-
-.frg-tabs__panels {
-  position: relative;
-  padding-top: 0.85rem;
-}
-
-.frg-tabs__panel {
-  padding: 0.75rem 0;
-  color: $color-dark-neutral;
-  outline: none;
-  line-height: 1.5;
-  opacity: 0;
-  transform: translateY(2px);
-
-  &.is-active {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  &:focus-visible {
-    outline: 2px solid $color-primary;
-    outline-offset: 2px;
-  }
-}
-
-.frg-tabs__tab[data-size='small'] {
-  padding: 0.5rem 0.7rem;
-
-  .frg-tabs__icon {
-    min-width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 0.3rem;
-  }
-
-  .frg-tabs__label-text {
-    font-size: $font-size-xs;
-  }
-
-  .frg-tabs__label-desc {
-    font-size: $font-size-2xs;
-  }
-}
-
-.frg-tabs__tab[data-size='large'] {
-  padding: 0.85rem 1.05rem;
-
-  .frg-tabs__icon {
-    min-width: 2rem;
-    height: 2rem;
-  }
-
-  .frg-tabs__label-text {
-    font-size: $font-size-md;
-  }
-}
-
-$tab-colors: (
-  'primary': $color-primary,
-  'secondary': $color-secondary,
-  'tertiary': $color-tertiary,
-  'info': $color-info,
-  'success': $color-success,
-  'warning': $color-warning,
-  'danger': $color-danger,
-  'dark': $color-dark,
-  'light': $color-light,
-  'outline-primary': $color-primary,
-  'outline-secondary': $color-secondary,
-  'outline-tertiary': $color-tertiary,
-  'outline-info': $color-info,
-  'outline-success': $color-success,
-  'outline-warning': $color-warning,
-  'outline-danger': $color-danger,
-  'outline-dark': $color-dark,
-  'outline-light': $color-light-soft,
-  'default': $color-dark-neutral
-);
-
-$solid-variants: ('primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'danger', 'dark', 'light', 'default');
-$outline-variants: (
-  'outline-primary',
-  'outline-secondary',
-  'outline-tertiary',
-  'outline-info',
-  'outline-success',
-  'outline-warning',
-  'outline-danger',
-  'outline-dark',
-  'outline-light'
-);
-
-@each $variant, $tone in $tab-colors {
-  .frg-tabs__tab[data-style="#{$variant}"] {
-    border: none;
-
-    .frg-tabs__underline {
-      background-color: $tone;
-    }
-
-      &.is-active {
-      @if list.index($solid-variants, $variant) {
-        $fill: if($variant == 'light', color.scale($tone, $lightness: -8%), $tone);
-        background-color: $fill;
-        color: if($variant == 'light', $color-dark, $color-light);
-        border-color: transparent;
-          box-shadow: inset 0 -2px 0 rgba($tone, 0.28);
-          .frg-tabs__underline {
-            opacity: 0;
-            height: 2px;
-            transform: scaleX(0);
-          }
-        } @else if list.index($outline-variants, $variant) {
-          background-color: transparent;
-          border-color: transparent;
-          border-width: 2px;
-          color: if($variant == 'outline-light', $color-dark, $tone);
-          border-bottom: 2px solid $tone;
-          margin-bottom: -1px;
-          .frg-tabs__underline {
-            display: none;
-          }
-          .frg-tabs__label-desc {
-            color: $color-dark-neutral;
-          }
-        }
-
-      .frg-tabs__label-desc {
-        color: if(
-          list.index($outline-variants, $variant),
-          $color-dark-neutral,
-          if($variant == 'light', $color-dark-soft, color.scale($color-light, $lightness: -5%))
-        );
-      }
-
-      .frg-tabs__icon {
-        @if list.index($solid-variants, $variant) {
-          background-color: color.scale($tone, $lightness: 12%);
-          color: if($variant == 'light', $color-dark, $color-light);
-        } @else {
-          background-color: transparent;
-          color: if($variant == 'outline-light', $color-dark, $tone);
-        }
-      }
-    }
-  }
-}

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

@@ -1,94 +0,0 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { TabsComponent } from './tabs.component';
-import { TabItem } from './tabs.type';
-
-const items: TabItem[] = [
-  { id: 'tab-a', label: 'Alpha', content: 'A' },
-  { id: 'tab-b', label: 'Beta', content: 'B' },
-  { id: 'tab-c', label: 'Gamma', content: 'C', disabled: true }
-];
-
-@Component({
-  standalone: true,
-  imports: [TabsComponent],
-  template: `
-    <frg-tabs
-      [items]="items"
-      [activeId]="activeId"
-      (activeIdChange)="activeId = $event">
-    </frg-tabs>
-  `
-})
-class TestHostComponent {
-  items = [...items];
-  activeId: string | null = null;
-}
-
-describe('TabsComponent', () => {
-  let fixture: ComponentFixture<TestHostComponent>;
-
-  const getTabs = (): TabsComponent =>
-    fixture.debugElement.query(By.directive(TabsComponent)).componentInstance as TabsComponent;
-
-  const getTabButtons = () =>
-    fixture.debugElement.queryAll(By.css('.frg-tabs__tab'));
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestHostComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestHostComponent);
-  });
-
-  it('renders the tab labels', () => {
-    fixture.detectChanges();
-
-    const labels = fixture.debugElement.queryAll(By.css('.frg-tabs__label-text'));
-    expect(labels.length).toBe(3);
-    expect(labels[0].nativeElement.textContent).toContain('Alpha');
-    expect(labels[1].nativeElement.textContent).toContain('Beta');
-  });
-
-  it('defaults to the first enabled tab when activeId is null', () => {
-    fixture.detectChanges();
-
-    const tabs = getTabs();
-    expect(tabs.activeId as unknown as string).toBe('tab-a');
-  });
-
-  it('emits changes when a tab is clicked', () => {
-    const tabs = getTabs();
-    const changeSpy = spyOn(tabs.changed, 'emit');
-    fixture.detectChanges();
-
-    const buttons = getTabButtons();
-    buttons[1].nativeElement.click();
-
-    expect(tabs.activeId).toBe('tab-b');
-    expect(fixture.componentInstance.activeId).toBe('tab-b');
-    expect(changeSpy).toHaveBeenCalled();
-  });
-
-  it('does not activate disabled tabs', () => {
-    fixture.detectChanges();
-
-    const tabs = getTabs();
-    const buttons = getTabButtons();
-    buttons[2].nativeElement.click();
-
-    expect(tabs.activeId).toBe('tab-a');
-  });
-
-  it('activates tab on Enter keydown', () => {
-    fixture.detectChanges();
-
-    const tabs = getTabs();
-    const buttons = getTabButtons();
-    buttons[1].nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-
-    expect(tabs.activeId).toBe('tab-b');
-  });
-});

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

@@ -1,282 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import {
-  Component,
-  ContentChild,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  QueryList,
-  SimpleChanges,
-  TemplateRef,
-  ViewChildren
-} from '@angular/core';
-import { TabChangeEvent, TabItem, TabItemContext, TTabSize, TTabStyle } from './tabs.type';
-
-/**
- * TabsComponent
- *
- * Accessible tabset that supports keyboard navigation, style variants,
- * projected templates, and two-way active state management.
- */
-@Component({
-  selector: 'frg-tabs',
-  standalone: true,
-  imports: [NgTemplateOutlet],
-  templateUrl: './tabs.component.html',
-  styleUrl: './tabs.component.scss'
-})
-export class TabsComponent implements OnChanges {
-  /**
-   * Tab definitions rendered by the component.
-   */
-  @Input() items: TabItem[] = [];
-  /**
-   * Identifier of the currently active tab. Auto-resolved when null.
-   */
-  @Input() activeId: string | null = null;
-  /**
-   * Visual style applied to tabs when no per-item style is provided.
-   */
-  @Input() styleType: TTabStyle = 'default';
-  /**
-   * Size variant applied to tabs when no per-item size is provided.
-   */
-  @Input() size: TTabSize = 'medium';
-  /**
-   * Horizontal alignment of the tab list.
-   */
-  @Input() align: 'start' | 'center' | 'end' | 'stretch' = 'start';
-  /**
-   * Enables panel fade/slide animations.
-   */
-  @Input() animated: boolean = true;
-  /**
-   * When true, moves focus to the active panel after selection.
-   */
-  @Input() focusPanelOnSelect: boolean = false;
-
-  /**
-   * Emits whenever the active tab changes (for two-way binding).
-   */
-  @Output() activeIdChange = new EventEmitter<string | null>();
-  /**
-   * Detailed change event emitted on active tab updates.
-   */
-  @Output() changed = new EventEmitter<TabChangeEvent>();
-
-  /**
-   * Optional projected template for tab labels.
-   */
-  @ContentChild('frgTabLabel', { read: TemplateRef }) labelTemplate?: TemplateRef<TabItemContext>;
-  /**
-   * Optional projected template for tab panels.
-   */
-  @ContentChild('frgTabContent', { read: TemplateRef }) contentTemplate?: TemplateRef<TabItemContext>;
-  /**
-   * Optional projected template for tab icons.
-   */
-  @ContentChild('frgTabIcon', { read: TemplateRef }) iconTemplate?: TemplateRef<TabItemContext>;
-
-  /**
-   * References to rendered tab buttons for keyboard focus.
-   */
-  @ViewChildren('tabBtn') tabButtons!: QueryList<ElementRef<HTMLButtonElement>>;
-  /**
-   * References to rendered panel elements for focus management.
-   */
-  @ViewChildren('panelBody') panelBodies!: QueryList<ElementRef<HTMLElement>>;
-
-  /**
-   * Normalized copy of `items` with generated ids and active flags.
-   */
-  viewItems: TabItem[] = [];
-  /**
-   * Internal counter used for deterministic id generation.
-   */
-  private uidCounter = 0;
-
-  /**
-   * Syncs inputs into internal view state and resolves active tab.
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['items']) {
-      this.viewItems = this.normalizeItems(this.items);
-      const initialActive = this.resolveActiveId(this.activeId);
-      this.setActiveId(initialActive, false);
-    }
-
-    if (changes['activeId'] && !changes['activeId'].firstChange) {
-      this.setActiveId(this.activeId, false);
-    }
-  }
-
-  /**
-   * Determines whether a given tab id matches the current active id.
-   */
-  isActive(id?: string | null): boolean {
-    return !!id && this.activeId === id;
-  }
-
-  /**
-   * Builds the DOM id for a tab element.
-   */
-  tabId(id: string): string {
-    return `${id}-tab`;
-  }
-
-  /**
-   * Builds the DOM id for a panel element.
-   */
-  panelId(id: string): string {
-    return `${id}-panel`;
-  }
-
-  /**
-   * Handles click selection for a tab at the given index.
-   */
-  onTabClick(index: number, event: Event): void {
-    event.preventDefault();
-    this.selectAt(index);
-  }
-
-  /**
-   * Keyboard interaction handler to navigate and activate tabs.
-   */
-  onTabKeydown(event: KeyboardEvent, index: number): void {
-    const key = event.key;
-    const tabs = this.tabButtons?.toArray() || [];
-    if (!tabs.length) {
-      return;
-    }
-
-    if (key === 'Enter' || key === ' ') {
-      event.preventDefault();
-      this.selectAt(index);
-      return;
-    }
-
-    if (key === 'ArrowRight' || key === 'ArrowDown') {
-      event.preventDefault();
-      this.focusTab((index + 1) % tabs.length);
-    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {
-      event.preventDefault();
-      this.focusTab((index - 1 + tabs.length) % tabs.length);
-    } else if (key === 'Home') {
-      event.preventDefault();
-      this.focusTab(0);
-    } else if (key === 'End') {
-      event.preventDefault();
-      this.focusTab(tabs.length - 1);
-    }
-  }
-
-  /**
-   * Builds a template context for projected templates.
-   */
-  buildContext<T = unknown>(item: TabItem<T>, index: number): TabItemContext<T> {
-    return {
-      $implicit: item,
-      item,
-      index,
-      active: this.isActive(item.id),
-      select: () => this.selectAt(index)
-    };
-  }
-
-  /**
-   * Selects the tab at the given index if enabled and different.
-   */
-  private selectAt(index: number): void {
-    const item = this.viewItems[index];
-    if (!item || item.disabled || !item.id || this.isActive(item.id)) {
-      return;
-    }
-    this.setActiveId(item.id, true, item, index);
-  }
-
-  /**
-   * Ensures every tab has an id and returns a new items array.
-   */
-  private normalizeItems(items: TabItem[]): TabItem[] {
-    return (items || []).map((item, index) => ({
-      ...item,
-      id: item.id ?? this.generateId(index)
-    }));
-  }
-
-  /**
-   * Generates a deterministic id for tabs lacking one.
-   */
-  private generateId(index: number): string {
-    this.uidCounter += 1;
-    return `frg-tab-${index}-${this.uidCounter}`;
-  }
-
-  /**
-   * Resolves the next active id based on provided preference and availability.
-   */
-  private resolveActiveId(candidate: string | null): string | null {
-    const available = (this.viewItems || []).filter(item => !item.disabled);
-    if (!available.length) {
-      return null;
-    }
-    if (candidate && available.some(item => item.id === candidate)) {
-      return candidate;
-    }
-    const preselected = available.find(item => item.active && item.id);
-    if (preselected?.id) {
-      return preselected.id;
-    }
-    return available[0].id ?? null;
-  }
-
-  /**
-   * Applies the active id, updates view state, emits events, and manages focus.
-   */
-  private setActiveId(nextId: string | null, emit: boolean, item?: TabItem, index?: number): void {
-    const resolved = this.resolveActiveId(nextId);
-    this.activeId = resolved;
-    this.viewItems = this.viewItems.map(viewItem => ({
-      ...viewItem,
-      active: resolved ? viewItem.id === resolved : false
-    }));
-
-    if (emit) {
-      this.activeIdChange.emit(this.activeId);
-      this.changed.emit({
-        id: this.activeId,
-        index: index ?? this.viewItems.findIndex(viewItem => viewItem.id === this.activeId),
-        item
-      });
-    }
-
-    if (this.focusPanelOnSelect && resolved) {
-      const targetIndex = index ?? this.viewItems.findIndex(viewItem => viewItem.id === resolved);
-      if (targetIndex >= 0) {
-        setTimeout(() => this.focusPanel(targetIndex), 0);
-      }
-    }
-  }
-
-  /**
-   * Moves focus to the tab at the given index.
-   */
-  private focusTab(index: number): void {
-    const tab = this.tabButtons?.get(index);
-    if (tab?.nativeElement) {
-      tab.nativeElement.focus();
-    }
-  }
-
-  /**
-   * Moves focus to the panel at the given index.
-   */
-  private focusPanel(index: number): void {
-    const panel = this.panelBodies?.get(index);
-    if (panel?.nativeElement) {
-      panel.nativeElement.focus();
-    }
-  }
-}