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

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

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

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

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

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

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

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