@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/src/lib/separator/separator.ts

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

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

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

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