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

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

@@ -1,112 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges } from '@angular/core';
-import { SnackbarCloseEvent, TSnackbarCloseReason, TSnackbarPosition, TSnackbarSize, TSnackbarStyle } from './snackbar.type';
-
-@Component({
-  selector: 'frg-snackbar',
-  imports: [NgClass],
-  templateUrl: './snackbar.component.html',
-  styleUrl: './snackbar.component.scss'
-})
-export class SnackbarComponent implements OnChanges, OnDestroy {
-  @Input() open: boolean = false;
-  @Input() message: string = '';
-  @Input() actionLabel: string = '';
-  @Input() styleType: TSnackbarStyle = 'default';
-  @Input() position: TSnackbarPosition = 'bottom-center';
-  @Input() size: TSnackbarSize = 'medium';
-  @Input() autoClose: boolean = true;
-  @Input() duration: number = 4000;
-  @Input() hasCloseButton: boolean = false;
-  @Input() ariaLabel: string = 'Notification';
-
-  @Output() closed = new EventEmitter<SnackbarCloseEvent>();
-  @Output() action = new EventEmitter<void>();
-
-  private closeTimerId: ReturnType<typeof setTimeout> | null = null;
-
-  get statusIconClass(): string | null {
-    switch (this.styleType) {
-      case 'info':
-        return 'fas fa-info-circle';
-      case 'success':
-        return 'fas fa-check-circle';
-      case 'warning':
-        return 'fas fa-exclamation-triangle';
-      case 'danger':
-        return 'fas fa-times-circle';
-      default:
-        return null;
-    }
-  }
-
-  get snackbarClassMap() {
-    return {
-      'frg-snackbar--top-left': this.position === 'top-left',
-      'frg-snackbar--top-center': this.position === 'top-center',
-      'frg-snackbar--top-right': this.position === 'top-right',
-      'frg-snackbar--bottom-left': this.position === 'bottom-left',
-      'frg-snackbar--bottom-center': this.position === 'bottom-center',
-      'frg-snackbar--bottom-right': this.position === 'bottom-right',
-      'frg-snackbar--size-small': this.size === 'small',
-      'frg-snackbar--size-medium': this.size === 'medium',
-      'frg-snackbar--size-large': this.size === 'large',
-      'frg-snackbar--primary': this.styleType === 'primary',
-      'frg-snackbar--secondary': this.styleType === 'secondary',
-      'frg-snackbar--tertiary': this.styleType === 'tertiary',
-      'frg-snackbar--dark': this.styleType === 'dark',
-      'frg-snackbar--light': this.styleType === 'light',
-      'frg-snackbar--info': this.styleType === 'info',
-      'frg-snackbar--success': this.styleType === 'success',
-      'frg-snackbar--warning': this.styleType === 'warning',
-      'frg-snackbar--danger': this.styleType === 'danger',
-      'frg-snackbar--default': this.styleType === 'default'
-    };
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['open'] || changes['autoClose'] || changes['duration']) {
-      this.syncAutoClose();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.clearCloseTimer();
-  }
-
-  onCloseClick(): void {
-    this.requestClose('close-button');
-  }
-
-  onActionClick(): void {
-    this.action.emit();
-    this.requestClose('action');
-  }
-
-  private syncAutoClose(): void {
-    this.clearCloseTimer();
-
-    if (!this.open || !this.autoClose || this.duration <= 0) {
-      return;
-    }
-
-    this.closeTimerId = setTimeout(() => {
-      this.requestClose('timeout');
-    }, this.duration);
-  }
-
-  private requestClose(reason: TSnackbarCloseReason): void {
-    if (!this.open) {
-      return;
-    }
-    this.clearCloseTimer();
-    this.closed.emit({ reason });
-  }
-
-  private clearCloseTimer(): void {
-    if (this.closeTimerId) {
-      clearTimeout(this.closeTimerId);
-      this.closeTimerId = null;
-    }
-  }
-}

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

@@ -1,27 +0,0 @@
-import { TBaseSize, TBaseStyle } from '../../types/base.types';
-
-export type TSnackbarStyle = Exclude<
-  TBaseStyle,
-  | 'outline-primary'
-  | 'outline-secondary'
-  | 'outline-tertiary'
-  | 'outline-dark'
-  | 'outline-light'
-  | 'outline-info'
-  | 'outline-success'
-  | 'outline-warning'
-  | 'outline-danger'
->;
-export type TSnackbarSize = TBaseSize;
-export type TSnackbarPosition =
-  | 'top-left'
-  | 'top-center'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-center'
-  | 'bottom-right';
-export type TSnackbarCloseReason = 'close-button' | 'timeout' | 'programmatic' | 'action';
-
-export interface SnackbarCloseEvent {
-  reason: TSnackbarCloseReason;
-}

package/src/lib/components/status/chip/chip.component.html

@@ -1,51 +0,0 @@
-<span
-  class="frg-chip"
-  [ngClass]="[
-    'frg-chip--' + style,
-    'frg-chip--' + size,
-    disabled ? 'frg-chip--disabled' : '',
-    iconPosition === 'end' ? 'frg-chip--icon-end' : ''
-  ]"
->
-  @if(icon && iconPosition === 'start') {
-    <span class="frg-chip__icon">
-      <span class="frg-chip__icon-inner">
-        <i [class]="icon"></i>
-      </span>
-    </span>
-  }
-
-  @if(label) {
-    <span class="frg-chip__label">{{ label }}</span>
-  }
-
-  @if(icon && iconPosition === 'end') {
-    <span class="frg-chip__icon">
-      <span class="frg-chip__icon-inner">
-        <i [class]="icon"></i>
-      </span>
-    </span>
-  }
-
-  @if(removable) {
-    <button
-      type="button"
-      class="frg-chip__remove"
-      (click)="onRemove()"
-      [attr.aria-label]="'Remove ' + label"
-    >
-      <svg
-        class="frg-chip__remove-icon"
-        width="10"
-        height="10"
-        viewBox="0 0 14 14"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1.2"/>
-        <path d="M5 5L9 9M9 5L5 9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"></path>
-
-      </svg>
-    </button>
-  }
-</span>

package/src/lib/components/status/chip/chip.component.scss

@@ -1,149 +0,0 @@
-@use './../../../../../assets/styles/scss/variables' as *;
-@use 'sass:color';
-
-$chip-background: $color-light;
-$chip-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0px;
-
-:host {
-  display: inline-block;
-
-  .frg-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    border-radius: 999px;
-    white-space: nowrap;
-    font-weight: 400;
-    cursor: default;
-    box-shadow: $chip-box-shadow;
-    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
-
-    background-color: $chip-background;
-    color: $color-dark-soft;
-
-    &--sm {
-      font-size: 0.75rem;
-      padding: 0.12rem 0.55rem;
-    }
-
-    &--md {
-      font-size: 0.9rem;
-      padding: 0.2rem 0.8rem;
-    }
-
-    &--lg {
-      font-size: 1.1rem;
-      padding: 0.25rem 1.1rem;
-    }
-
-    &--primary {
-      color: $color-primary-dark;
-    }
-
-    &--secondary {
-      color: $color-secondary-dark;
-    }
-
-    &--tertiary {
-      color: $color-tertiary-dark;
-    }
-
-    &--info {
-      color: $color-info-dark;
-    }
-
-    &--warning {
-      color: $color-warning-dark;
-    }
-
-    &--danger {
-      color: $color-danger-dark;
-    }
-
-    &--success {
-      color: $color-success-dark;
-    }
-
-    &--dark {
-      color: $color-light;
-      background: $color-dark;
-    }
-
-    &--light {
-      color: $color-dark;
-    }
-
-    &__icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.9rem;
-    }
-
-    &__icon-inner {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      vertical-align: middle;
-    }
-
-    &--icon-end {
-      .frg-chip__icon {
-        margin-left: 0.2rem;
-        margin-right: 0;
-      }
-    }
-
-    &__label {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    &__remove {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 1rem;
-      height: 1rem;
-      padding: 0;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      color: inherit;
-      transition: filter 0.3s ease-in-out;
-
-      &:hover {
-        filter: brightness(0.6);
-      }
-
-      &:focus-visible {
-        outline: 2px solid rgba($color-primary, 0.45);
-        outline-offset: 2px;
-      }
-
-      svg {
-        width: 0.875rem;
-        height: 0.875rem;
-        display: block;
-        fill: transparent;
-        pointer-events: none;
-      }
-    }
-
-
-    &--disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-
-      .frg-chip__remove {
-        cursor: not-allowed;
-        pointer-events: none;
-        color: inherit;
-      }
-
-      .frg-chip__icon {
-        opacity: 0.6;
-      }
-    }
-  }
-}

package/src/lib/components/status/chip/chip.component.spec.ts

@@ -1,62 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { ChipComponent } from './chip.component';
-
-describe('ChipComponent', () => {
-  let fixture: ComponentFixture<ChipComponent>;
-  let component: ChipComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ChipComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ChipComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('renders the label', () => {
-    component.label = 'Active';
-
-    fixture.detectChanges();
-
-    const label = fixture.debugElement.query(By.css('.frg-chip__label'));
-    expect(label.nativeElement.textContent).toContain('Active');
-  });
-
-  it('renders icon on the start when configured', () => {
-    component.icon = 'fa fa-star';
-    component.iconPosition = 'start';
-
-    fixture.detectChanges();
-
-    const icon = fixture.debugElement.query(By.css('.frg-chip__icon i'));
-    expect(icon).toBeTruthy();
-  });
-
-  it('emits removed when removable and not disabled', () => {
-    const emitSpy = spyOn(component.removed, 'emit');
-    component.removable = true;
-    component.disabled = false;
-
-    fixture.detectChanges();
-
-    const removeButton = fixture.debugElement.query(By.css('.frg-chip__remove'));
-    removeButton.nativeElement.click();
-
-    expect(emitSpy).toHaveBeenCalledWith(component.id);
-  });
-
-  it('does not emit removed when disabled', () => {
-    const emitSpy = spyOn(component.removed, 'emit');
-    component.removable = true;
-    component.disabled = true;
-
-    fixture.detectChanges();
-
-    const removeButton = fixture.debugElement.query(By.css('.frg-chip__remove'));
-    removeButton.nativeElement.click();
-
-    expect(emitSpy).not.toHaveBeenCalled();
-  });
-});

package/src/lib/components/status/chip/chip.component.ts

@@ -1,83 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { generateUUID } from '../../../utils/uuid.utils';
-import { Chip, TChipIconPosition, TChipSize, TChipType } from './chip.type';
-
-/**
- * TagComponent
- *
- * A small UI element used to display labeled statuses, metadata, or categories.
- * Supports icons, removable behavior, disabled state, and standardized design-
- * system styles and sizes. Implements the shared `Tag` interface to ensure
- * consistency across all status-driven UI components (Tag, Badge, Chip, etc.).
- */
-@Component({
-  selector: 'frg-chip',
-  templateUrl: './chip.component.html',
-  styleUrls: ['./chip.component.scss'],
-  imports: [NgClass]
-})
-export class ChipComponent implements Chip {
-
-  /**
-   * Unique identifier for the chip.
-   * Automatically generated if not provided by the parent.
-   * Used primarily for tracking and removal events.
-   */
-  @Input() id: string = generateUUID();
-
-  /**
-   * Text content displayed inside the chip.
-   */
-  @Input() label?: string = '';
-
-  /**
-   * Visual style of the chip.
-   * Corresponds to design-system status color tokens.
-   * Example: 'primary', 'secondary', 'success', 'warning', etc.
-   */
-  @Input() style: TChipType = 'primary';
-
-  /**
-   * Size variant of the chip.
-   * Options follow the standardized sizing tokens: 'sm', 'md', or 'lg'.
-   */
-  @Input() size: TChipSize = 'md';
-
-  /**
-   * Optional icon class displayed before the label.
-   * Example: 'frg-icon-info', 'frg-icon-alert'.
-   */
-  @Input() icon: string | undefined = undefined;
-
-  /**
-   *  Position of the icon
-   */
-  @Input() iconPosition: TChipIconPosition = 'end';
-
-  /**
-   * Whether the chip is disabled.
-   * Disables interactions and applies the disabled visual style.
-   */
-  @Input() disabled = false;
-
-  /**
-   * If true, displays a remove button allowing the chip to be dismissed.
-   */
-  @Input() removable = false;
-
-  /**
-   * Emits the ID of the chip when it is removed.
-   */
-  @Output() removed = new EventEmitter<string>();
-
-  /**
-   * Emits the `removed` event when the remove button is clicked,
-   * provided the chip is not disabled and removal is allowed.
-   */
-  onRemove(): void {
-    if (!this.disabled && this.removable) {
-      this.removed.emit(this.id);
-    }
-  }
-}

package/src/lib/components/status/chip/chip.type.ts

@@ -1,42 +0,0 @@
-import { StatusIndicator } from "../status.interface";
-import { TBaseStatusIconPosition, TBaseStatusSize, TBaseStatusStyle } from "../status.type";
-
-/**
- * ChipType
- *
- * Alias for `TBaseStatusStyle`.
- * Represents the visual style of a chip according to the design system.
- * Example: 'primary', 'secondary', 'success', etc.
- */
-export type TChipType = TBaseStatusStyle;
-
-/**
- * ChipSize
- *
- * Alias for `TBaseStatusSize`.
- * Defines the size of the chip. Options: 'sm', 'md', 'lg'.
- */
-export type TChipSize = TBaseStatusSize;
-
-/**
- * ChipIconPosition
- *
- * Alias for `TBaseStatusIconPosition`.
- * Defines the icon position of the icon in the chip. Options: 'start' or 'end'.
- */
-export type TChipIconPosition = TBaseStatusIconPosition;
-/**
- * chip
- *
- * A UI element that extends the shared `StatusIndicator` interface.
- * Represents a labeled status, optionally removable.
- *
- * @extends StatusIndicator
- */
-export interface Chip extends StatusIndicator {
-  /**
-   * If true, the tag can be removed by the user.
-   * Triggers the `removed` event in the component.
-   */
-  removable?: boolean;
-}

package/src/lib/components/status/directives/badge/badge.directive.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 { FrgBadgeDirective } from './badge.directive';
-import { Badge } from './badge.interface';
-
-@Component({
-  standalone: true,
-  imports: [FrgBadgeDirective],
-  template: `<button frgBadge [badge]="badge">Inbox</button>`
-})
-class TestHostComponent {
-  badge: Badge = { value: 3, style: 'primary', size: 'sm' };
-}
-
-describe('FrgBadgeDirective', () => {
-  let fixture: ComponentFixture<TestHostComponent>;
-  let component: TestHostComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestHostComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestHostComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('adds the badge element with value', () => {
-    const badgeEl = fixture.debugElement.query(By.css('.frg-badge'));
-    expect(badgeEl).toBeTruthy();
-    expect(badgeEl.nativeElement.textContent).toContain('3');
-  });
-
-  it('hides the badge when value is null and dot is false', () => {
-    component.badge = { value: null, dot: false };
-    fixture.detectChanges();
-
-    expect(fixture.debugElement.query(By.css('.frg-badge'))).toBeNull();
-  });
-
-  it('renders dot badge when dot is true', () => {
-    component.badge = { dot: true };
-    fixture.detectChanges();
-
-    const badgeEl = fixture.debugElement.query(By.css('.frg-badge'));
-    expect(badgeEl).toBeTruthy();
-    expect(badgeEl.nativeElement.classList).toContain('frg-badge--dot');
-  });
-
-  it('renders icon before value when iconPosition is start', () => {
-    component.badge = { value: 5, icon: 'fas fa-star', iconPosition: 'start' };
-    fixture.detectChanges();
-
-    const badgeEl = fixture.debugElement.query(By.css('.frg-badge'));
-    const firstChild = badgeEl.nativeElement.firstElementChild;
-    expect(firstChild?.tagName.toLowerCase()).toBe('i');
-  });
-});