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

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

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

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

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

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

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

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

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