@dataengineeringformachinelearning/viking-ui 3.0.0-alpha.2 → 3.0.0-alpha.4

package/src/lib/separator/separator.ts

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/**
+ * viking-separator — horizontal/vertical rule with optional label
+ *.
+ */
+@Component({
+  selector: "viking-separator",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "separator",
+    "[attr.aria-orientation]": "orientation()",
+    "[class.viking-vertical]": "orientation() === 'vertical'",
+  },
+  template: `
+    @if (text() && orientation() === "horizontal") {
+      <span class="viking-separator-line" aria-hidden="true"></span>
+      <span class="viking-separator-text">{{ text() }}</span>
+      <span class="viking-separator-line" aria-hidden="true"></span>
+    } @else {
+      <span class="viking-separator-line" aria-hidden="true"></span>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-2);
+        width: 100%;
+      }
+      :host(.viking-vertical) {
+        width: auto;
+        align-self: stretch;
+      }
+      .viking-separator-line {
+        flex: 1;
+        border-top: 1px solid var(--viking-border);
+      }
+      :host(.viking-vertical) .viking-separator-line {
+        flex: none;
+        border-top: none;
+        border-left: 1px solid var(--viking-border);
+        height: 100%;
+        min-height: var(--viking-space-3);
+      }
+      .viking-separator-text {
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        white-space: nowrap;
+      }
+    `,
+  ],
+})
+export class VikingSeparator {
+  readonly orientation = input<"horizontal" | "vertical">("horizontal");
+  readonly text = input<string>("");
+}

package/src/lib/sheet/sheet.ts

@@ -0,0 +1,192 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  effect,
+  inject,
+  input,
+  model,
+  viewChild,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+
+export type VikingSheetSide = "left" | "right";
+
+/**
+ * viking-sheet — slide-over panel.
+ */
+@Component({
+  selector: "viking-sheet",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <dialog
+      #dialog
+      class="viking-sheet"
+      [class.viking-sheet-left]="side() === 'left'"
+      tabindex="-1"
+      [attr.aria-label]="heading() || 'Panel'"
+      (close)="open.set(false)"
+      (click)="onBackdropClick($event)"
+      (keydown.escape)="dismissible() && open.set(false)"
+    >
+      <div class="viking-sheet-surface">
+        <header class="viking-sheet-header">
+          @if (heading()) {
+            <h2 class="viking-sheet-heading">{{ heading() }}</h2>
+          }
+          @if (dismissible()) {
+            <button
+              type="button"
+              class="viking-sheet-close"
+              aria-label="Close panel"
+              (click)="open.set(false)"
+            >
+              <viking-icon name="x" [size]="20" />
+            </button>
+          }
+        </header>
+        <div class="viking-sheet-body"><ng-content /></div>
+        <footer class="viking-sheet-footer">
+          <ng-content select="[vikingSheetActions]" />
+        </footer>
+      </div>
+    </dialog>
+  `,
+  styles: [
+    `
+      .viking-sheet {
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+        max-width: none;
+        max-height: none;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        inset: 0;
+      }
+      .viking-sheet::backdrop {
+        background: var(--viking-overlay-backdrop);
+        backdrop-filter: blur(6px);
+        animation: viking-backdrop-in var(--viking-duration-fast)
+          var(--viking-ease-default);
+      }
+      .viking-sheet-surface {
+        position: fixed;
+        top: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        width: min(420px, 100vw);
+        height: 100%;
+        background: var(--viking-surface);
+        border-left: 1px solid var(--viking-border-strong);
+        box-shadow: var(--viking-shadow-lg);
+        font-family: var(--viking-font-family);
+        animation: viking-slide-in-right var(--viking-duration)
+          var(--viking-ease-default);
+      }
+      .viking-sheet-left .viking-sheet-surface {
+        right: auto;
+        left: 0;
+        border-left: none;
+        border-right: 1px solid var(--viking-border-strong);
+      }
+      .viking-sheet-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--viking-space-2);
+        padding: var(--viking-space-2);
+        border-bottom: 1px solid var(--viking-border);
+      }
+      .viking-sheet-heading {
+        margin: 0;
+        font-size: var(--viking-font-size-ui);
+        font-weight: 700;
+        letter-spacing: var(--header-letter-spacing, -0.02em);
+      }
+      .viking-sheet-close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--viking-control-height-sm);
+        height: var(--viking-control-height-sm);
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--viking-text-muted);
+        cursor: pointer;
+        padding: 0;
+        border-radius: var(--viking-radius);
+        transition: var(--viking-transition-interactive);
+      }
+      .viking-sheet-close:hover {
+        color: var(--viking-text);
+        background: var(--viking-accent-soft);
+        border-color: var(--viking-border-subtle);
+      }
+      .viking-sheet-close:active {
+        transform: scale(var(--viking-state-active-scale));
+      }
+      .viking-sheet-close:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-sheet-body {
+        flex: 1;
+        overflow: auto;
+        padding: var(--viking-space-2);
+        font-size: var(--viking-font-size);
+        color: var(--viking-text);
+        line-height: 1.6;
+      }
+      .viking-sheet-footer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--viking-space-2);
+        justify-content: flex-end;
+        align-items: center;
+        padding: var(--viking-space-2);
+        border-top: 1px solid var(--viking-border);
+      }
+      :host ::ng-deep .viking-sheet-footer [vikingSheetActions] {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--viking-space-2);
+        width: 100%;
+      }
+    `,
+  ],
+})
+export class VikingSheet {
+  readonly open = model(false);
+  readonly heading = input("");
+  readonly dismissible = input(true);
+  readonly side = input<VikingSheetSide>("right");
+
+  private readonly dialogRef =
+    viewChild.required<ElementRef<HTMLDialogElement>>("dialog");
+
+  constructor() {
+    effect(() => {
+      const dialog = this.dialogRef().nativeElement;
+      if (this.open() && !dialog.open) {
+        dialog.showModal();
+      } else if (!this.open() && dialog.open) {
+        dialog.close();
+      }
+    });
+  }
+
+  protected onBackdropClick = (event: MouseEvent): void => {
+    if (!this.dismissible()) return;
+    const dialog = this.dialogRef().nativeElement;
+    if (event.target === dialog) {
+      this.open.set(false);
+    }
+  };
+}

package/src/lib/sidebar-nav/sidebar-nav.scss

@@ -0,0 +1,218 @@
+:host(.viking-sidebar-nav) {
+  padding: var(--viking-space-1) var(--viking-space-1) var(--viking-space-1);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+@media (min-width: 901px) {
+  :host(.viking-sidebar-nav) {
+    padding: var(--viking-space-2) 0;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: var(--viking-space-1);
+  }
+}
+
+:host(.viking-sidebar-nav-link) {
+  display: contents;
+
+  a {
+    display: flex;
+    align-items: center;
+    gap: var(--viking-space-1);
+    padding: 10px 14px;
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: var(--viking-font-weight-semibold);
+    font-size: var(--viking-font-size-base);
+    transition:
+      color var(--viking-duration) var(--viking-ease-default),
+      background-color var(--viking-duration) var(--viking-ease-default),
+      border-color var(--viking-duration) var(--viking-ease-default);
+    border-left: 3px solid transparent;
+    border-bottom: 3px solid transparent;
+    border-radius: var(--viking-radius);
+    flex: 0 0 auto;
+    min-height: 44px;
+    white-space: nowrap;
+    cursor: pointer;
+    background: transparent;
+    font-family: var(--viking-font-family);
+    box-sizing: border-box;
+    width: auto;
+
+    &:hover {
+      background-color: var(--sidebar-hover-bg);
+      color: var(--text-color);
+    }
+
+    &:focus-visible {
+      outline: var(--viking-ring-width) solid var(--viking-ring);
+      outline-offset: var(--viking-ring-offset);
+    }
+
+    &.viking-sidebar-nav-link-active {
+      background: var(--sidebar-active-bg);
+      border-left-color: transparent;
+      border-bottom-color: var(--sidebar-active-border);
+      color: var(--sidebar-active-border);
+    }
+  }
+}
+
+@media (min-width: 901px) {
+  :host(.viking-sidebar-nav-link) a {
+    width: 100%;
+    padding: var(--viking-space-1) var(--viking-space-2);
+    border-bottom: none;
+    border-left: 3px solid transparent;
+    border-radius: 0;
+    min-height: 0;
+
+    &.viking-sidebar-nav-link-active {
+      border-left-color: var(--sidebar-active-border);
+      border-bottom-color: transparent;
+    }
+  }
+}
+
+:host(.viking-sidebar-nav-tree) {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100%;
+  width: 100%;
+  margin: 4px 0 0;
+  padding-top: var(--viking-space-1);
+  border-top: 1px solid var(--sidebar-border);
+}
+
+@media (min-width: 901px) {
+  :host(.viking-sidebar-nav-tree) {
+    flex: none;
+    width: auto;
+    margin: var(--viking-space-1) 0;
+    padding-top: 0;
+    border-top: none;
+  }
+}
+
+:host(.viking-sidebar-nav-tree-header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--viking-space-1) var(--viking-space-2) var(--viking-space-1) 56px;
+  color: var(--text-muted);
+  font-size: var(--viking-font-size-base);
+  font-weight: var(--viking-font-weight-bold);
+  text-transform: uppercase;
+  letter-spacing: var(--viking-letter-spacing-wide);
+  cursor: pointer;
+  transition: color var(--viking-duration) var(--viking-ease-default);
+  font-family: var(--viking-font-family);
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
+    color: var(--text-color);
+  }
+
+  &:focus-visible {
+    outline: var(--viking-ring-width) solid var(--viking-ring);
+    outline-offset: var(--viking-ring-offset);
+  }
+}
+
+:host(.viking-sidebar-nav-tree-children) {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+:host(.viking-sidebar-nav-tree-item) {
+  display: flex;
+  align-items: center;
+  gap: var(--viking-space-1);
+  padding: var(--viking-space-1) var(--viking-space-2) var(--viking-space-1) 56px;
+  color: var(--text-muted);
+  font-size: var(--viking-font-size-base);
+  font-weight: var(--viking-font-weight-medium);
+  cursor: pointer;
+  transition:
+    color var(--viking-duration) var(--viking-ease-default),
+    background-color var(--viking-duration) var(--viking-ease-default),
+    border-color var(--viking-duration) var(--viking-ease-default);
+  border-left: 3px solid transparent;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: transparent;
+  font-family: var(--viking-font-family);
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  width: 100%;
+  text-align: left;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: var(--sidebar-hover-bg);
+    color: var(--text-color);
+  }
+
+  &:focus-visible {
+    outline: var(--viking-ring-width) solid var(--viking-ring);
+    outline-offset: var(--viking-ring-offset);
+  }
+
+  &.viking-sidebar-nav-tree-item-active {
+    background: var(--sidebar-active-bg);
+    border-left-color: var(--sidebar-active-border);
+    color: var(--sidebar-active-border);
+    font-weight: var(--viking-font-weight-semibold);
+  }
+
+  &.viking-sidebar-nav-tree-item-empty {
+    font-style: italic;
+    color: var(--text-muted);
+    cursor: default;
+
+    &:hover {
+      background-color: transparent;
+      color: var(--text-muted);
+    }
+  }
+
+  &.viking-sidebar-nav-tree-item-accent {
+    color: var(--status-accent);
+    font-weight: var(--viking-font-weight-semibold);
+    border-left: 3px solid transparent;
+
+    &:hover {
+      background-color: var(--sidebar-hover-bg);
+      color: var(--status-accent);
+    }
+  }
+}
+
+.viking-sidebar-nav-tree-arrow {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  color: var(--text-muted);
+}
+
+.viking-sidebar-nav-tree-icon {
+  font-size: var(--viking-icon-size-md, var(--base-font-size));
+  width: var(--viking-icon-size-md, var(--base-font-size));
+  height: var(--viking-icon-size-md, var(--base-font-size));
+  line-height: var(--viking-icon-size-md, var(--base-font-size));
+}

package/src/lib/sidebar-nav/sidebar-nav.ts

@@ -0,0 +1,158 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  ViewEncapsulation,
+} from "@angular/core";
+import { RouterLink, RouterLinkActive } from "@angular/router";
+
+/**
+ * viking-sidebar-nav — composable sidebar navigation container.
+ */
+@Component({
+  selector: "viking-sidebar-nav",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: "viking-sidebar-nav",
+    role: "navigation",
+  },
+  template: `<ng-content />`,
+  styleUrl: "./sidebar-nav.scss",
+})
+export class VikingSidebarNav {}
+
+/**
+ * viking-sidebar-nav-link — router-aware sidebar nav item.
+ */
+@Component({
+  selector: "viking-sidebar-nav-link",
+  imports: [RouterLink, RouterLinkActive],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: "viking-sidebar-nav-link",
+  },
+  template: `
+    <a
+      [routerLink]="routerLink()"
+      routerLinkActive="viking-sidebar-nav-link-active"
+      [routerLinkActiveOptions]="routerLinkActiveOptions()"
+      [title]="title()"
+      [attr.aria-label]="title() || null"
+    >
+      <ng-content />
+    </a>
+  `,
+  styleUrl: "./sidebar-nav.scss",
+})
+export class VikingSidebarNavLink {
+  readonly routerLink = input.required<string | string[]>();
+  readonly routerLinkActiveOptions = input<{ exact: boolean }>({ exact: true });
+  readonly title = input<string>("");
+}
+
+/**
+ * viking-sidebar-nav-tree — expandable tree section within sidebar nav.
+ */
+@Component({
+  selector: "viking-sidebar-nav-tree",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: "viking-sidebar-nav-tree" },
+  template: `<ng-content />`,
+  styleUrl: "./sidebar-nav.scss",
+})
+export class VikingSidebarNavTree {}
+
+/**
+ * viking-sidebar-nav-tree-header — collapsible tree section header.
+ */
+@Component({
+  selector: "viking-sidebar-nav-tree-header",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: "viking-sidebar-nav-tree-header",
+    role: "button",
+    tabindex: "0",
+    "[attr.aria-expanded]": "expanded()",
+    "(click)": "onToggle()",
+    "(keydown.enter)": "onToggle()",
+    "(keydown.space)": "onSpace($event)",
+  },
+  template: `
+    <span class="viking-sidebar-nav-tree-label">{{ label() }}</span>
+    <ng-content select="[vikingSidebarTreeArrow]" />
+  `,
+  styleUrl: "./sidebar-nav.scss",
+})
+export class VikingSidebarNavTreeHeader {
+  readonly label = input.required<string>();
+  readonly expanded = input<boolean>(true);
+  readonly toggled = output<void>();
+
+  protected onToggle = (): void => {
+    this.toggled.emit();
+  };
+
+  protected onSpace = (event: Event): void => {
+    event.preventDefault();
+    this.onToggle();
+  };
+}
+
+/**
+ * viking-sidebar-nav-tree-children — tree item list container.
+ */
+@Component({
+  selector: "viking-sidebar-nav-tree-children",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: "viking-sidebar-nav-tree-children" },
+  template: `<ng-content />`,
+  styleUrl: "./sidebar-nav.scss",
+})
+export class VikingSidebarNavTreeChildren {}
+
+export type VikingSidebarNavTreeItemVariant = "default" | "empty" | "accent";
+
+/**
+ * viking-sidebar-nav-tree-item — selectable tree leaf or action row.
+ */
+@Component({
+  selector: "viking-sidebar-nav-tree-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: "viking-sidebar-nav-tree-item",
+    role: "button",
+    tabindex: "0",
+    "[class.viking-sidebar-nav-tree-item-active]": "active()",
+    "[class.viking-sidebar-nav-tree-item-empty]": "variant() === 'empty'",
+    "[class.viking-sidebar-nav-tree-item-accent]": "variant() === 'accent'",
+    "(click)": "onActivate($event)",
+    "(keydown.enter)": "onActivate($event)",
+    "(keydown.space)": "onSpace($event)",
+  },
+  template: `<ng-content />`,
+  styleUrl: "./sidebar-nav.scss",
+})
+export class VikingSidebarNavTreeItem {
+  readonly active = input<boolean>(false);
+  readonly variant = input<VikingSidebarNavTreeItemVariant>("default");
+  readonly activated = output<void>();
+
+  protected onActivate = (event: Event): void => {
+    if (this.variant() === "empty") {
+      return;
+    }
+    this.activated.emit();
+  };
+
+  protected onSpace = (event: Event): void => {
+    event.preventDefault();
+    this.onActivate(event);
+  };
+}