@tacdaed/fragments 1.0.0-beta.0 → 1.0.0-beta.1

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

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

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

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

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

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

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

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

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