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

package/src/lib/components/side-nav/side-nav.component.html

@@ -1,101 +0,0 @@
-<div class="frg-side-nav">
-  <div class="frg-side-nav__container">
-    <nav>
-      @for (section of config.sections; track section.id ?? $index) {
-        <div
-          class="frg-side-nav__section"
-          [ngClass]="{
-            'frg-side-nav__section--primary': section.styleType === 'primary',
-            'frg-side-nav__section--secondary': section.styleType === 'secondary',
-            'frg-side-nav__section--tertiary': section.styleType === 'tertiary',
-            'frg-side-nav__section--success': section.styleType === 'success',
-            'frg-side-nav__section--warning': section.styleType === 'warning',
-            'frg-side-nav__section--danger': section.styleType === 'danger',
-            'frg-side-nav__section--dark': section.styleType === 'dark',
-            'frg-side-nav__section--light': section.styleType === 'light'
-          }"
-        >
-          @if (section.title) {
-            <span class="frg-side-nav__section-title">
-              @if (section.icon) {
-                <i class="frg-side-nav__icon" [ngClass]="section.icon" aria-hidden="true"></i>
-              }
-              <span class="frg-side-nav__text">{{ section.title }}</span>
-            </span>
-          }
-          <ng-container
-            [ngTemplateOutlet]="listTemplate"
-            [ngTemplateOutletContext]="{ $implicit: section.items, isSubnav: false, isOpen: true }">
-          </ng-container>
-        </div>
-      }
-    </nav>
-  </div>
-</div>
-
-<ng-template #listTemplate let-items let-isSubnav="isSubnav" let-isOpen="isOpen">
-  <ul
-    class="frg-side-nav__list"
-    [ngClass]="{
-      'frg-side-nav__sublist': isSubnav,
-      'frg-side-nav__sublist--open': isSubnav && isOpen
-    }"
-  >
-    @for (item of items; track item.id ?? $index) {
-      <li
-        class="frg-side-nav__item"
-        [ngClass]="{
-          'frg-side-nav__item--has-children': item.children?.length,
-          'frg-side-nav__item--expanded': item.expanded
-        }"
-      >
-        @if (item.children?.length) {
-          <button
-            type="button"
-            class="frg-side-nav__toggle"
-            (click)="toggleItem(item)"
-            [attr.aria-expanded]="item.expanded ? 'true' : 'false'"
-          >
-            <span class="frg-side-nav__label">
-              @if (item.icon) {
-                <i class="frg-side-nav__icon" [ngClass]="item.icon" aria-hidden="true"></i>
-              }
-              <span class="frg-side-nav__text">{{ item.label }}</span>
-            </span>
-            <span class="frg-side-nav__chevron" aria-hidden="true"></span>
-          </button>
-          <ng-container
-            [ngTemplateOutlet]="listTemplate"
-            [ngTemplateOutletContext]="{ $implicit: item.children, isSubnav: true, isOpen: item.expanded }">
-          </ng-container>
-        } @else {
-          @if (item.link?.kind === "route") {
-            <a
-              class="frg-side-nav__link"
-              [routerLink]="item.link.value"
-              routerLinkActive="active"
-              [routerLinkActiveOptions]="{ exact: item.link?.exact ?? false }"
-            >
-              @if (item.icon) {
-                <i class="frg-side-nav__icon" [ngClass]="item.icon" aria-hidden="true"></i>
-              }
-              <span class="frg-side-nav__text">{{ item.label }}</span>
-            </a>
-          } @else {
-            <a
-              class="frg-side-nav__link"
-              [href]="item.link?.value"
-              [attr.target]="item.link?.kind === 'href' ? item.link.target : null"
-              rel="noopener"
-            >
-              @if (item.icon) {
-                <i class="frg-side-nav__icon" [ngClass]="item.icon" aria-hidden="true"></i>
-              }
-              <span class="frg-side-nav__text">{{ item.label }}</span>
-            </a>
-          }
-        }
-      </li>
-    }
-  </ul>
-</ng-template>

package/src/lib/components/side-nav/side-nav.component.scss

@@ -1,295 +0,0 @@
-@use "./../../../../assets/styles/scss/variables" as *;
-
-:host {
-  display: block;
-  height: 100%;
-  min-height: 0;
-}
-
-.frg-side-nav {
-  height: 100%;
-  position: sticky;
-  top: 0;
-  max-height: var(--frg-side-nav-max-height, 100vh);
-  padding: 1rem;
-  overflow-y: auto;
-  background: $color-light;
-  border-right: 1px solid rgba($color-light-soft, 0.5);
-  transition: width 0.2s ease, min-width 0.2s ease, padding 0.2s ease;
-
-  :host(.frg-side-nav--right) & {
-    border-right: none;
-    border-left: 1px solid rgba($color-light-soft, 0.5);
-    text-align: right;
-
-    .frg-side-nav__section-title {
-      flex-direction: row-reverse;
-      justify-content: flex-end;
-      text-align: right;
-    }
-
-    .frg-side-nav__toggle,
-    .frg-side-nav__link {
-      width: 100%;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-      text-align: right;
-    }
-
-    .frg-side-nav__label {
-      flex: 1;
-      justify-content: flex-end;
-      text-align: right;
-      flex-direction: row-reverse;
-    }
-
-    .frg-side-nav__link {
-      gap: 0.5rem;
-    }
-
-    .frg-side-nav__item {
-      text-align: right;
-    }
-
-    .frg-side-nav__section,
-    .frg-side-nav__list {
-      text-align: right;
-    }
-
-    .frg-side-nav__text {
-      text-align: right;
-    }
-
-    .frg-side-nav__sublist {
-      padding-left: 0;
-      padding-right: 0.75rem;
-      border-left: none;
-      border-right: 2px solid $color-light-soft;
-    }
-  }
-
-  &__container {
-    height: 100%;
-  }
-
-  &::-webkit-scrollbar {
-    width: 0.2rem;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    background-color: $color-light-soft;
-  }
-
-
-  &__section {
-    margin-bottom: 1.5rem;
-    --frg-side-nav-accent: #{$color-primary};
-    --frg-side-nav-accent-light: #{$color-primary-light};
-    --frg-side-nav-accent-dark: #{$color-primary-dark};
-    --frg-side-nav-active-bg: var(--frg-side-nav-accent);
-    --frg-side-nav-active-color: #{$color-light};
-  }
-
-  &__section--primary {
-    --frg-side-nav-accent: #{$color-primary};
-    --frg-side-nav-accent-light: #{$color-primary-light};
-    --frg-side-nav-accent-dark: #{$color-primary-dark};
-    --frg-side-nav-active-bg: #{$color-primary};
-    --frg-side-nav-active-color: #{$color-light};
-  }
-
-  &__section--secondary {
-    --frg-side-nav-accent: #{$color-secondary};
-    --frg-side-nav-accent-light: #{$color-secondary-light};
-    --frg-side-nav-accent-dark: #{$color-secondary-dark};
-    --frg-side-nav-active-bg: #{$color-secondary};
-    --frg-side-nav-active-color: #{$color-light};
-  }
-
-  &__section--tertiary {
-    --frg-side-nav-accent: #{$color-tertiary};
-    --frg-side-nav-accent-light: #{$color-tertiary-light};
-    --frg-side-nav-accent-dark: #{$color-tertiary-dark};
-    --frg-side-nav-active-bg: #{$color-tertiary};
-    --frg-side-nav-active-color: #{$color-light};
-  }
-
-  &__section--success {
-    --frg-side-nav-accent: #{$color-success};
-    --frg-side-nav-accent-light: #{$color-success-light};
-    --frg-side-nav-accent-dark: #{$color-success-dark};
-    --frg-side-nav-active-bg: #{$color-success};
-    --frg-side-nav-active-color: #{$color-light};
-  }
-
-  &__section--warning {
-    --frg-side-nav-accent: #{$color-warning};
-    --frg-side-nav-accent-light: #{$color-warning-light};
-    --frg-side-nav-accent-dark: #{$color-warning-dark};
-    --frg-side-nav-active-bg: #{$color-warning};
-    --frg-side-nav-active-color: #{$color-light};
-  }
-
-  &__section--danger {
-    --frg-side-nav-accent: #{$color-danger};
-    --frg-side-nav-accent-light: #{$color-danger-light};
-    --frg-side-nav-accent-dark: #{$color-danger-dark};
-    --frg-side-nav-active-bg: #{$color-danger};
-    --frg-side-nav-active-color: #{$color-light};
-  }
-
-  &__section--dark {
-    --frg-side-nav-accent: #{$color-dark};
-    --frg-side-nav-accent-light: #{$color-dark-soft};
-    --frg-side-nav-accent-dark: #{$color-dark};
-    --frg-side-nav-active-bg: #{$color-dark};
-    --frg-side-nav-active-color: #{$color-light};
-  }
-
-  &__section--light {
-    --frg-side-nav-accent: #{$color-dark-neutral};
-    --frg-side-nav-accent-light: #{$color-light-soft};
-    --frg-side-nav-accent-dark: #{$color-dark};
-    --frg-side-nav-active-bg: #{$color-light};
-    --frg-side-nav-active-color: #{$color-dark};
-
-    .frg-side-nav__section-title {
-      color: $color-light;
-      border-bottom-color: $color-light;
-    }
-  }
-
-
-  &__section-title {
-    font-size: $font-size-xs;
-    text-transform: uppercase;
-    color: var(--frg-side-nav-accent);
-    margin-bottom: 0.5rem;
-    border-bottom: 1px solid var(--frg-side-nav-accent);
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-  }
-
-  &__list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  &__item {
-    margin: 0.25rem 0;
-  }
-
-  &__toggle {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    border: none;
-    background: none;
-    padding: 0.35rem 0.5rem;
-    border-radius: 4px;
-    color: $color-dark-neutral;
-    cursor: pointer;
-    transition: background 0.15s, color 0.15s;
-    text-align: left;
-
-    &:hover {
-      background: $color-light-soft;
-    }
-  }
-
-  &__label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex: 1;
-  }
-
-  &__text {
-    flex: 1;
-  }
-
-  &__chevron {
-    width: 0.6rem;
-    height: 0.6rem;
-    border-right: 2px solid currentColor;
-    border-bottom: 2px solid currentColor;
-    transform: rotate(45deg);
-    transition: transform 0.2s ease;
-  }
-
-  &__item--expanded {
-    > .frg-side-nav__toggle .frg-side-nav__chevron {
-      transform: rotate(225deg);
-    }
-  }
-
-  &__link {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.35rem 0.5rem;
-    border-radius: 4px;
-    text-decoration: none;
-    color: $color-dark-neutral;
-    transition: background 0.15s, color 0.15s;
-
-    &:hover {
-      background: $color-light-soft;
-    }
-  }
-
-  &__link.active {
-    background: var(--frg-side-nav-active-bg);
-    color: var(--frg-side-nav-active-color);
-    box-shadow: $box-shadow-light-sm;
-  }
-
-  &__link.active:hover {
-    background: var(--frg-side-nav-accent);
-  }
-
-  &__sublist {
-    list-style: none;
-    padding-left: 0.75rem;
-    margin: 0.35rem 0 0.25rem;
-    border-left: 2px solid $color-light-soft;
-    display: none;
-    .frg-side-nav__item {
-      margin: 0.15rem 0;
-    }
-
-    .frg-side-nav__link {
-      font-size: $font-size-sm;
-      padding: 0.3rem 0.5rem;
-    }
-  }
-
-  &__icon {
-    font-size: 0.85rem;
-    color: inherit;
-  }
-
-  &__sublist--open {
-    display: block;
-  }
-
-}
-
-@media (max-width: $screen-md-min) {
-  .frg-side-nav {
-    width: 100%;
-    min-width: 100%;
-    height: auto;
-    position: relative;
-    border-right: none;
-    border-bottom: 1px solid $color-light-soft;
-  }
-}

package/src/lib/components/side-nav/side-nav.component.ts

@@ -1,18 +0,0 @@
-import { Component, Input } from "@angular/core";
-import { ISideNavConfig, ISideNavItem } from "./side-nav.type";
-import { NgClass, NgTemplateOutlet } from "@angular/common";
-import { RouterLink, RouterLinkActive } from "@angular/router";
-
-@Component({
-  selector: "frg-side-nav",
-  templateUrl: "./side-nav.component.html",
-  styleUrls: ["./side-nav.component.scss"],
-  imports: [NgTemplateOutlet, NgClass, RouterLink, RouterLinkActive]
-})
-export class SideNavComponent {
-  @Input() config: ISideNavConfig = {};
-
-  public toggleItem(item: ISideNavItem): void {
-    item.expanded = !item.expanded;
-  }
-}

package/src/lib/components/side-nav/side-nav.type.ts

@@ -1,28 +0,0 @@
-export type TBaseSideNavStyle = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'dark' | 'light';
-export type TBaseSideNavSize = 'small' | 'medium' | 'large';
-export type TSideNavLink =
-  | { kind: "route"; value: string; exact?: boolean }
-  | { kind: "href"; value: string; target?: "_blank" | "_self" | "_parent" | "_top" };
-
-export interface ISideNavConfig {
-  title?: string;
-  sections?: Array<ISideNavSection>;
-}
-
-export interface ISideNavSection {
-  id?: string;
-  title?: string;
-  icon?: string;
-  items?: Array<ISideNavItem>;
-  styleType?: TBaseSideNavStyle;
-  size?: TBaseSideNavSize;
-}
-
-export interface ISideNavItem {
-  id?: string;
-  label: string;
-  link?: TSideNavLink;
-  icon?: string;
-  children?: Array<ISideNavItem>;
-  expanded?: boolean;
-}

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

@@ -1,33 +0,0 @@
-@if (open) {
-  <div
-    class="frg-snackbar"
-    [ngClass]="snackbarClassMap"
-    role="status"
-    aria-live="polite"
-    [attr.aria-label]="ariaLabel"
-  >
-    <div class="frg-snackbar__accent"></div>
-    @if (statusIconClass) {
-      <span class="frg-snackbar__status-icon" [ngClass]="statusIconClass" aria-hidden="true"></span>
-    }
-    <div class="frg-snackbar__message">
-      {{ message }}
-      <ng-content></ng-content>
-    </div>
-    @if (actionLabel) {
-      <button type="button" class="frg-snackbar__action" (click)="onActionClick()">
-        {{ actionLabel }}
-      </button>
-    }
-    @if (hasCloseButton) {
-      <button
-        type="button"
-        class="frg-snackbar__close"
-        aria-label="Close notification"
-        (click)="onCloseClick()"
-      >
-        &times;
-      </button>
-    }
-  </div>
-}

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

@@ -1,195 +0,0 @@
-@use 'sass:color';
-@use '../../../../assets/styles/scss/variables' as *;
-
-:host {
-  display: block;
-
-  .frg-snackbar {
-    position: fixed;
-    display: grid;
-    grid-template-columns: 0.35rem auto 1fr auto auto;
-    gap: 0.75rem;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    background: var(--frg-snackbar-bg, $color-light);
-    color: var(--frg-snackbar-text, $color-dark);
-    border-radius: 0.25rem;
-    border: 1px solid var(--frg-snackbar-border, rgba($color-dark, 0.1));
-    box-shadow: $box-shadow-md;
-    min-width: 18rem;
-    max-width: 28rem;
-    z-index: 1100;
-
-    &--size-small {
-      padding: 0.25rem 0.8rem;
-      min-width: 16rem;
-      max-width: 24rem;
-      .frg-snackbar__message {
-        font-size: 0.8rem;
-      }
-    }
-
-    &--size-medium {
-      padding: 0.5rem 1rem;
-    }
-
-    &--size-large {
-      padding: 0.75rem 1.2rem;
-      min-width: 20rem;
-      max-width: 32rem;
-      .frg-snackbar__message {
-        font-size: 0.9rem;
-      }
-    }
-
-    &__accent {
-      width: 0.35rem;
-      border-radius: 0.35rem;
-      background: var(--frg-snackbar-accent, $color-primary);
-    }
-
-    &__message {
-      font-size: 0.85rem;
-      color: var(--frg-snackbar-message, $color-dark-neutral);
-    }
-
-    &__status-icon {
-      color: var(--frg-snackbar-accent, $color-primary);
-      font-size: 1rem;
-      line-height: 1;
-    }
-
-    &__action {
-      border: 0;
-      background: transparent;
-      color: var(--frg-snackbar-action, var(--frg-snackbar-accent, $color-primary));
-      font-weight: 600;
-      font-size: 0.75rem;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-      cursor: pointer;
-    }
-
-    &__action:hover,
-    &__action:focus-visible {
-      color: $color-dark;
-    }
-
-    &__close {
-      border: 0;
-      background: transparent;
-      color: var(--frg-snackbar-text, $color-dark-soft);
-      font-size: 1.1rem;
-      line-height: 1;
-      cursor: pointer;
-    }
-
-    &__close:hover,
-    &__close:focus-visible {
-      color: var(--frg-snackbar-text, $color-dark);
-    }
-  }
-
-  .frg-snackbar--top-left {
-    top: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .frg-snackbar--top-center {
-    top: 1.5rem;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .frg-snackbar--top-right {
-    top: 1.5rem;
-    right: 1.5rem;
-  }
-
-  .frg-snackbar--bottom-left {
-    bottom: 1.5rem;
-    left: 1.5rem;
-  }
-
-  .frg-snackbar--bottom-center {
-    bottom: 1.5rem;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .frg-snackbar--bottom-right {
-    bottom: 1.5rem;
-    right: 1.5rem;
-  }
-
-  .frg-snackbar--default {
-    --frg-snackbar-accent: #{$color-dark-neutral};
-    --frg-snackbar-bg: #{$color-neutral};
-    --frg-snackbar-text: #{$color-dark};
-    --frg-snackbar-message: #{$color-dark-neutral};
-  }
-
-  .frg-snackbar--primary {
-    --frg-snackbar-accent: #{$color-primary};
-    --frg-snackbar-bg: #{color.scale($color-primary-light, $lightness: 50%)};
-    --frg-snackbar-text: #{color.scale($color-primary-dark, $lightness: -25%)};
-    --frg-snackbar-message: #{color.scale($color-primary-dark, $lightness: -25%)};
-  }
-
-  .frg-snackbar--secondary {
-    --frg-snackbar-accent: #{$color-secondary};
-    --frg-snackbar-bg: #{color.scale($color-secondary-light, $lightness: 50%)};
-    --frg-snackbar-text: #{color.scale($color-secondary-dark, $lightness: -25%)};
-    --frg-snackbar-message: #{color.scale($color-secondary-dark, $lightness: -25%)};
-  }
-
-  .frg-snackbar--tertiary {
-    --frg-snackbar-accent: #{$color-tertiary};
-    --frg-snackbar-bg: #{color.scale($color-tertiary-light, $lightness: 50%)};
-    --frg-snackbar-text: #{color.scale($color-tertiary-dark, $lightness: -25%)};
-    --frg-snackbar-message: #{color.scale($color-tertiary-dark, $lightness: -25%)};
-  }
-
-  .frg-snackbar--info {
-    --frg-snackbar-accent: #{$color-info};
-    --frg-snackbar-bg: #{color.scale($color-info-light, $lightness: 60%)};
-    --frg-snackbar-text: #{$color-dark};
-    --frg-snackbar-message: #{$color-dark-neutral};
-  }
-
-  .frg-snackbar--success {
-    --frg-snackbar-accent: #{$color-success};
-    --frg-snackbar-bg: #{color.scale($color-success-light, $lightness: 60%)};
-    --frg-snackbar-text: #{$color-dark};
-    --frg-snackbar-message: #{$color-dark-neutral};
-  }
-
-  .frg-snackbar--warning {
-    --frg-snackbar-accent: #{$color-warning};
-    --frg-snackbar-bg: #{color.scale($color-warning-light, $lightness: 60%)};
-    --frg-snackbar-text: #{$color-dark};
-    --frg-snackbar-message: #{$color-dark-neutral};
-  }
-
-  .frg-snackbar--danger {
-    --frg-snackbar-accent: #{$color-danger};
-    --frg-snackbar-bg: #{color.scale($color-danger-light, $lightness: 60%)};
-    --frg-snackbar-text: #{$color-dark};
-    --frg-snackbar-message: #{$color-dark-neutral};
-  }
-
-  .frg-snackbar--dark {
-    --frg-snackbar-accent: #{$color-dark};
-    --frg-snackbar-bg: #{$color-dark};
-    --frg-snackbar-text: #{$color-light};
-    --frg-snackbar-message: #{color.scale($color-light, $lightness: -15%)};
-    --frg-snackbar-action: #{$color-light};
-  }
-
-  .frg-snackbar--light {
-    --frg-snackbar-accent: #{$color-light-neutral};
-    --frg-snackbar-bg: #{$color-light};
-    --frg-snackbar-text: #{$color-dark};
-    --frg-snackbar-message: #{$color-dark-neutral};
-  }
-}