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

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

@@ -0,0 +1,81 @@
+import { TemplateRef } from '@angular/core';
+import { TBaseSize, TBaseStyle } from '../../types/base.types';
+
+/**
+ * Style variants supported by tabs.
+ */
+export type TTabStyle = TBaseStyle;
+/**
+ * Size variants supported by tabs.
+ */
+export type TTabSize = TBaseSize;
+
+/**
+ * Context passed into projected templates for tabs.
+ */
+export interface TabItemContext<T = unknown> {
+  /**
+   * Implicit reference to the current tab item.
+   */
+  $implicit: TabItem<T>;
+  /**
+   * Named reference to the current tab item.
+   */
+  item: TabItem<T>;
+  /**
+   * Zero-based index of the tab.
+   */
+  index: number;
+  /**
+   * Whether this tab is currently active.
+   */
+  active: boolean;
+  /**
+   * Function to activate this tab.
+   */
+  select: () => void;
+}
+
+/**
+ * Definition for a single tab.
+ */
+export interface TabItem<T = unknown> {
+  /** Unique identifier for the tab. Auto-generated when omitted. */
+  id?: string;
+  /** Visible label shown on the tab button. */
+  label: string;
+  /** Optional secondary label or helper text. */
+  description?: string;
+  /** Optional icon to render when no template is provided. */
+  icon?: string;
+  /** Disable interaction for this tab. */
+  disabled?: boolean;
+  /** Apply a style variant to this tab. */
+  style?: TTabStyle;
+  /** Adjust spacing and typography for this tab. */
+  size?: TTabSize;
+  /** Mark this tab as initially active when no activeId input is provided. */
+  active?: boolean;
+  /** Arbitrary data available to projected templates. */
+  data?: T;
+  /** Simple content rendering when no template is provided. */
+  content?: string;
+  /** Custom icon template for this tab only. */
+  iconTemplate?: TemplateRef<TabItemContext<T>>;
+  /** Custom label template for this tab only. */
+  labelTemplate?: TemplateRef<TabItemContext<T>>;
+  /** Custom body template for this tab only. */
+  contentTemplate?: TemplateRef<TabItemContext<T>>;
+}
+
+/**
+ * Payload emitted when the active tab changes.
+ */
+export interface TabChangeEvent<T = unknown> {
+  /** Identifier of the active tab, or null when none available. */
+  id: string | null;
+  /** Index of the active tab in the view items. */
+  index: number;
+  /** The full tab item associated with the change. */
+  item?: TabItem<T>;
+}

package/src/lib/components/title-bar/title-bar.component.html

@@ -0,0 +1,21 @@
+@if (title) {
+  <div
+    class="frg-title-bar"
+    [ngClass]="{
+      'frg-title-bar__primary': styleType === 'primary',
+      'frg-title-bar__secondary': styleType === 'secondary',
+      'frg-title-bar__tertiary': styleType === 'tertiary',
+      'frg-title-bar__dark': styleType === 'dark',
+      'frg-title-bar__light': styleType === 'light'
+    }"
+  >
+    <div
+      class="frg-title-bar-title d-flex justify-content-between"
+      aria-level="3"
+    >
+      <div class="frg-title-bar-title__text">
+        {{ title }}
+      </div>
+    </div>
+  </div>
+}

package/src/lib/components/title-bar/title-bar.component.scss

@@ -0,0 +1,139 @@
+@use './../../../../assets/styles/scss/variables' as *;
+@use './../../../../assets/styles/scss/fonts';
+
+.frg-title-bar {
+  color: $color-dark;
+  font-weight: normal;
+  font-size: 1.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-family:
+    'frg-opensans',
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+
+  &__primary {
+    background-color: $color-primary-dark;
+    color: $color-light;
+
+    & .frg-title-bar-title {
+      & button {
+        color: $color-primary-dark;
+      }
+    }
+
+    & .frg-title-bar-filter {
+      background-color: $color-primary;
+    }
+
+    & .frg-title-bar-search {
+      background-color: $color-primary;
+    }
+  }
+
+  &__secondary {
+    background-color: $color-secondary-dark;
+    color: $color-light;
+
+    & .frg-title-bar-title {
+      & button {
+        color: $color-secondary-dark;
+      }
+    }
+
+    & .frg-title-bar-filter {
+      background-color: $color-secondary;
+    }
+
+    & .frg-title-bar-search {
+      background-color: $color-secondary;
+    }
+  }
+
+  &__tertiary {
+    background-color: $color-tertiary-dark;
+    color: $color-light;
+
+    & .frg-title-bar-title {
+      & button {
+        color: $color-tertiary-dark;
+      }
+    }
+
+    & .frg-title-bar-filter {
+      background-color: $color-tertiary;
+    }
+
+    & .frg-title-bar-search {
+      background-color: $color-tertiary;
+    }
+  }
+
+  &__dark {
+    background-color: $color-dark;
+    color: #fff;
+  }
+
+  &__light {
+    background-color: $color-light;
+  }
+
+  & .frg-title-bar-title {
+    padding: 15px 25px;
+
+    & button {
+      outline: none;
+      border: none;
+      border-radius: 50%;
+      width: 25px;
+      height: 25px;
+      padding: 15px;
+      font-size: 1rem;
+
+      &:focus {
+        color: $color-dark;
+        background-color: $input-background;
+        border-color: $input-focus-border-color;
+        outline: 0;
+        outline: 3px solid $color-primary;
+        box-shadow: none;
+      }
+
+      &:focus-visible {
+        outline-offset: 5px;
+      }
+    }
+  }
+
+  & .frg-title-bar-filter {
+    &__container {
+      padding: 25px;
+    }
+
+    & label {
+      display: block;
+      font-size: 0.8rem;
+      font-weight: lighter;
+    }
+  }
+
+  & .frg-title-bar-search {
+    &__container {
+      padding: 25px;
+    }
+
+    & label {
+      display: block;
+      font-size: 0.8rem;
+      font-weight: lighter;
+    }
+  }
+}

package/src/lib/components/title-bar/title-bar.component.spec.ts

@@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TitleBarComponent } from './title-bar.component';
+
+describe('TitleBarComponent', () => {
+  let fixture: ComponentFixture<TitleBarComponent>;
+  let component: TitleBarComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TitleBarComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TitleBarComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders title when provided', () => {
+    component.title = 'Dashboard';
+
+    fixture.detectChanges();
+
+    const title = fixture.debugElement.query(By.css('.frg-title-bar-title__text'));
+    expect(title.nativeElement.textContent).toContain('Dashboard');
+  });
+
+  it('does not render when title is empty', () => {
+    component.title = '';
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('.frg-title-bar'))).toBeNull();
+  });
+
+  it('applies style class based on styleType', () => {
+    component.title = 'Dashboard';
+    component.styleType = 'dark';
+
+    fixture.detectChanges();
+
+    const wrapper = fixture.debugElement.query(By.css('.frg-title-bar'));
+    expect(wrapper.nativeElement.classList).toContain('frg-title-bar__dark');
+  });
+});

package/src/lib/components/title-bar/title-bar.component.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { TBaseStyle } from '../../types/base.types';
+@Component({
+  selector: 'frg-title-bar',
+  imports: [CommonModule],
+  templateUrl: './title-bar.component.html',
+  styleUrls: ['./title-bar.component.scss']
+})
+export class TitleBarComponent {
+  @Input() title = '';
+  @Input() styleType: TBaseStyle = 'primary';
+}

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

@@ -0,0 +1,36 @@
+@if (isRendered) {
+  <div
+    class="frg-toast"
+    [ngClass]="toastClassMap"
+    role="status"
+    aria-live="polite"
+    [attr.aria-label]="ariaLabel"
+    [style.--frg-toast-motion]="motionDuration + 'ms'"
+  >
+    <div class="frg-toast__accent"></div>
+    @if (statusIconClass) {
+      <span class="frg-toast__status-icon" [ngClass]="statusIconClass" aria-hidden="true"></span>
+    }
+    <div class="frg-toast__content">
+      @if (title) {
+        <div class="frg-toast__title">{{ title }}</div>
+      }
+      <ng-content select="[frg-toast-title]"></ng-content>
+      @if (message) {
+        <div class="frg-toast__message">{{ message }}</div>
+      }
+      <ng-content select="[frg-toast-body]"></ng-content>
+      <ng-content></ng-content>
+    </div>
+    @if (hasCloseButton) {
+      <button
+        type="button"
+        class="frg-toast__close"
+        aria-label="Close notification"
+        (click)="onCloseClick()"
+      >
+        &times;
+      </button>
+    }
+  </div>
+}

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

@@ -0,0 +1,241 @@
+@use 'sass:color';
+@use '../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+
+  .frg-toast {
+    position: fixed;
+    display: grid;
+    grid-template-columns: 0.35rem auto 1fr auto;
+    gap: 0.75rem;
+    align-items: start;
+    padding: 0.75rem 0.9rem;
+    background: var(--frg-toast-bg, $color-light);
+    color: var(--frg-toast-text, $color-dark);
+    border-radius: 0.25rem;
+    border: 1px solid var(--frg-toast-border, rgba($color-dark, 0.1));
+    box-shadow: $box-shadow-md;
+    min-width: 16rem;
+    max-width: 22rem;
+    z-index: 1100;
+
+    &--size-small {
+      padding: 0.6rem 0.75rem;
+      min-width: 14rem;
+      max-width: 20rem;
+      .frg-toast__content {
+        font-size: 0.8rem;
+      }
+      .frg-toast__title {
+        font-size: 0.85rem;
+      }
+    }
+
+    &--size-medium {
+      padding: 0.75rem 0.9rem;
+    }
+
+    &--size-large {
+      padding: 0.9rem 1.1rem;
+      min-width: 18rem;
+      max-width: 26rem;
+      .frg-toast__content {
+        font-size: 0.9rem;
+      }
+      .frg-toast__title {
+        font-size: 1rem;
+      }
+    }
+
+    &--stacked {
+      position: relative;
+      top: auto !important;
+      right: auto !important;
+      bottom: auto !important;
+      left: auto !important;
+      width: 100%;
+      max-width: 100%;
+    }
+
+    &--enter {
+      animation: frg-toast-enter var(--frg-toast-motion, 200ms) ease;
+    }
+
+    &--leave {
+      animation: frg-toast-leave var(--frg-toast-motion, 200ms) ease forwards;
+    }
+
+    &__accent {
+      width: 0.35rem;
+      border-radius: 0.35rem;
+      background: var(--frg-toast-accent, $color-primary);
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+      font-size: 0.85rem;
+    }
+
+    &__status-icon {
+      color: var(--frg-toast-accent, $color-primary);
+      font-size: 1rem;
+      line-height: 1;
+      margin-top: 0.15rem;
+    }
+
+    &__title {
+      font-weight: 600;
+      font-size: 0.9rem;
+    }
+
+    &__message {
+      color: var(--frg-toast-message, $color-dark-soft);
+    }
+
+    &__close {
+      border: 0;
+      background: transparent;
+      color: var(--frg-toast-text, $color-dark-soft);
+      font-size: 1.2rem;
+      line-height: 1;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    &__close:hover,
+    &__close:focus-visible {
+      color: var(--frg-toast-text, $color-dark);
+    }
+  }
+
+  .frg-toast--top-left {
+    top: 1.5rem;
+    left: 1.5rem;
+    --frg-toast-translate-x: -16px;
+    --frg-toast-translate-y: -6px;
+  }
+
+  .frg-toast--top-right {
+    top: 1.5rem;
+    right: 1.5rem;
+    --frg-toast-translate-x: 16px;
+    --frg-toast-translate-y: -6px;
+  }
+
+  .frg-toast--bottom-left {
+    bottom: 1.5rem;
+    left: 1.5rem;
+    --frg-toast-translate-x: -16px;
+    --frg-toast-translate-y: 6px;
+  }
+
+  .frg-toast--bottom-right {
+    bottom: 1.5rem;
+    right: 1.5rem;
+    --frg-toast-translate-x: 16px;
+    --frg-toast-translate-y: 6px;
+  }
+
+  .frg-toast--default {
+    --frg-toast-accent: #{$color-dark-neutral};
+    --frg-toast-bg: #{$color-neutral};
+    --frg-toast-text: #{$color-dark};
+    --frg-toast-message: #{$color-dark-soft};
+  }
+
+  .frg-toast--primary {
+    --frg-toast-accent: #{$color-primary};
+    --frg-toast-bg: #{color.scale($color-primary-light, $lightness: 50%)};
+    --frg-toast-text: #{color.scale($color-primary-dark, $lightness: -25%)};
+    --frg-toast-message: #{color.scale($color-primary-dark, $lightness: -25%)};
+  }
+
+  .frg-toast--secondary {
+    --frg-toast-accent: #{$color-secondary};
+    --frg-toast-bg: #{color.scale($color-secondary-light, $lightness: 50%)};
+    --frg-toast-text: #{color.scale($color-secondary-dark, $lightness: -25%)};
+    --frg-toast-message: #{color.scale($color-secondary-dark, $lightness: -25%)};
+  }
+
+  .frg-toast--tertiary {
+    --frg-toast-accent: #{$color-tertiary};
+    --frg-toast-bg: #{color.scale($color-tertiary-light, $lightness: 50%)};
+    --frg-toast-text: #{color.scale($color-tertiary-dark, $lightness: -25%)};
+    --frg-toast-message: #{color.scale($color-tertiary-dark, $lightness: -25%)};
+  }
+
+  .frg-toast--info {
+    --frg-toast-accent: #{$color-info};
+    --frg-toast-bg: #{$color-light};
+    --frg-toast-text: #{$color-dark};
+    --frg-toast-message: #{$color-dark-soft};
+    border-top: 0.3rem solid #{$color-info};
+    border-bottom: 0.3rem solid #{$color-info};
+  }
+
+  .frg-toast--success {
+    --frg-toast-accent: #{$color-success};
+    --frg-toast-bg: #{$color-light};
+    --frg-toast-text: #{$color-dark};
+    --frg-toast-message: #{$color-dark-soft};
+    border-top: 0.3rem solid #{$color-success};
+    border-bottom: 0.3rem solid #{$color-success};
+  }
+
+  .frg-toast--warning {
+    --frg-toast-accent: #{$color-warning};
+    --frg-toast-bg: #{$color-light};
+    --frg-toast-text: #{$color-dark};
+    --frg-toast-message: #{$color-dark-soft};
+    border-top: 0.3rem solid #{$color-warning};
+    border-bottom: 0.3rem solid #{$color-warning};
+  }
+
+  .frg-toast--danger {
+    --frg-toast-accent: #{$color-danger};
+    --frg-toast-bg: #{$color-light};
+    --frg-toast-text: #{$color-dark};
+    --frg-toast-message: #{$color-dark-soft};
+    border-top: 0.3rem solid #{$color-danger};
+    border-bottom: 0.3rem solid #{$color-danger};
+  }
+
+  .frg-toast--dark {
+    --frg-toast-accent: #{$color-dark};
+    --frg-toast-bg: #{$color-dark};
+    --frg-toast-text: #{$color-light};
+    --frg-toast-message: #{color.scale($color-light, $lightness: -12%)};
+  }
+
+  .frg-toast--light {
+    --frg-toast-accent: #{$color-light-neutral};
+    --frg-toast-bg: #{$color-light};
+    --frg-toast-text: #{$color-dark};
+    --frg-toast-message: #{$color-dark-soft};
+  }
+}
+
+@keyframes frg-toast-enter {
+  from {
+    opacity: 0;
+    transform: translate(var(--frg-toast-translate-x, 0), var(--frg-toast-translate-y, 0));
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes frg-toast-leave {
+  from {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate(var(--frg-toast-translate-x, 0), var(--frg-toast-translate-y, 0));
+  }
+}