@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

package/src/lib/field/field.ts

@@ -1,111 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-import { vikingUid } from "../../core/uid";
-
-/**
- * viking-field — label / description / error wrapper for any control
- *.
- * The projected control is associated with the label by wrapping.
- */
-@Component({
-  selector: "viking-field",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { "[class.viking-field-invalid]": "!!error()" },
-  template: `
-    <!-- The projected control lives inside the label, which associates it implicitly. -->
-    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
-    <label class="viking-field-label-wrap">
-      @if (label()) {
-        <span class="viking-field-label" [id]="labelId">
-          {{ label() }}
-          @if (required()) {
-            <span class="viking-field-required" aria-hidden="true">*</span>
-          }
-        </span>
-      }
-      <ng-content />
-    </label>
-    @if (description() && !error()) {
-      <p class="viking-field-description" [id]="descriptionId">
-        {{ description() }}
-      </p>
-    }
-    @if (error()) {
-      <p class="viking-field-error" [id]="errorId" role="alert">
-        {{ error() }}
-      </p>
-    }
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        font-family: var(--viking-font-family);
-      }
-      :host(.viking-field-invalid) {
-        animation: viking-shake var(--viking-duration-slow)
-          var(--viking-ease-default);
-      }
-      .viking-field-label-wrap {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-half);
-      }
-      .viking-field-label {
-        font-size: var(--viking-font-size-sm);
-        font-weight: var(--viking-font-weight-semibold);
-        color: var(--viking-text);
-        letter-spacing: var(--viking-letter-spacing-wide);
-        line-height: var(--viking-line-height-tight);
-      }
-      .viking-field-required {
-        color: var(--viking-danger);
-        margin-left: 2px;
-      }
-      .viking-field-description,
-      .viking-field-error {
-        margin: var(--viking-space-half) 0 0;
-        font-size: var(--viking-font-size-sm);
-        line-height: var(--viking-line-height-normal);
-      }
-      .viking-field-description {
-        color: var(--viking-text-muted);
-      }
-      .viking-field-error {
-        color: var(--viking-danger-text, var(--viking-danger));
-        font-weight: var(--viking-font-weight-semibold);
-        display: flex;
-        align-items: center;
-        gap: var(--viking-space-half);
-      }
-      .viking-field-error::before {
-        content: "";
-        width: 6px;
-        height: 6px;
-        border-radius: var(--viking-radius-pill);
-        background: var(--viking-danger);
-        flex-shrink: 0;
-      }
-      :host(.viking-field-invalid) ::ng-deep .viking-control {
-        border-color: var(--viking-danger);
-        box-shadow: 0 0 0 1px
-          color-mix(in srgb, var(--viking-danger) 25%, transparent);
-      }
-      :host ::ng-deep viking-select,
-      :host ::ng-deep viking-native-select {
-        display: block;
-        width: 100%;
-        min-width: 0;
-      }
-    `,
-  ],
-})
-export class VikingField {
-  readonly label = input<string>("");
-  readonly description = input<string>("");
-  readonly error = input<string>("");
-  readonly required = input<boolean>(false);
-
-  protected readonly descriptionId = vikingUid("viking-field-description");
-  protected readonly errorId = vikingUid("viking-field-error");
-  protected readonly labelId = vikingUid("viking-field-label");
-}

package/src/lib/file-upload/file-upload.ts

@@ -1,208 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  output,
-  signal,
-} from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-
-/**
- * viking-file-upload — drag & drop file zone.
- */
-@Component({
-  selector: "viking-file-upload",
-  imports: [VikingIcon],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <label
-      class="viking-upload-zone"
-      [class.viking-dragover]="dragOver()"
-      (dragover)="onDragOver($event)"
-      (dragleave)="dragOver.set(false)"
-      (drop)="onDrop($event)"
-    >
-      <input
-        type="file"
-        [accept]="accept()"
-        [multiple]="multiple()"
-        [disabled]="disabled()"
-        [attr.aria-label]="heading()"
-        (change)="onSelect($event)"
-      />
-      <viking-icon name="upload" [size]="27" />
-      <span class="viking-upload-heading">{{ heading() }}</span>
-      <span class="viking-upload-hint">{{ hint() }}</span>
-    </label>
-    @if (fileList().length > 0) {
-      <ul class="viking-upload-list">
-        @for (file of fileList(); track file.name) {
-          <li class="viking-upload-file">
-            <viking-icon name="file" [size]="18" />
-            <span class="viking-upload-name">{{ file.name }}</span>
-            <span class="viking-upload-size">{{ formatSize(file.size) }}</span>
-            <button
-              type="button"
-              class="viking-upload-remove"
-              [attr.aria-label]="'Remove ' + file.name"
-              (click)="removeFile(file)"
-            >
-              <viking-icon name="x" [size]="16" />
-            </button>
-          </li>
-        }
-      </ul>
-    }
-  `,
-  styles: [
-    `
-      :host {
-        display: block;
-        font-family: var(--viking-font-family);
-      }
-      .viking-upload-zone {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: var(--viking-space-1);
-        padding: var(--viking-space-4) var(--viking-space-2);
-        border: 2px dashed var(--viking-border-strong);
-        border-radius: var(--viking-radius);
-        background: var(--viking-surface);
-        color: var(--viking-text-muted);
-        cursor: pointer;
-        transition: var(--viking-transition);
-        text-align: center;
-      }
-      .viking-upload-zone:hover,
-      .viking-dragover {
-        border-color: var(--viking-accent);
-        background: var(--viking-accent-soft);
-        color: var(--viking-accent);
-      }
-      .viking-upload-zone:focus-within {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      /* The native input fills the drop zone so clicks and focus land on it. */
-      input {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        opacity: 0;
-        cursor: pointer;
-      }
-      .viking-upload-heading {
-        font-size: var(--viking-font-size);
-        font-weight: 600;
-        color: var(--viking-text);
-      }
-      .viking-upload-hint {
-        font-size: var(--viking-font-size);
-        color: var(--viking-text-muted);
-      }
-      .viking-upload-list {
-        list-style: none;
-        margin: var(--viking-space-1) 0 0;
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        gap: calc(var(--viking-space-1) / 2);
-      }
-      .viking-upload-file {
-        display: flex;
-        align-items: center;
-        gap: var(--viking-space-1);
-        padding: var(--viking-space-1);
-        border: 1px solid var(--viking-border);
-        border-radius: var(--viking-radius);
-        background: var(--viking-surface);
-        font-size: var(--viking-font-size);
-        color: var(--viking-text);
-      }
-      .viking-upload-name {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .viking-upload-size {
-        color: var(--viking-text-muted);
-        font-variant-numeric: tabular-nums;
-      }
-      .viking-upload-remove {
-        display: inline-flex;
-        border: none;
-        background: transparent;
-        color: var(--viking-text-muted);
-        cursor: pointer;
-        padding: 3px;
-        border-radius: var(--viking-radius-pill);
-      }
-      .viking-upload-remove:hover {
-        color: var(--viking-danger);
-      }
-      .viking-upload-remove:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: 1px;
-      }
-    `,
-  ],
-})
-export class VikingFileUpload {
-  readonly heading = input<string>("Drop files here or click to browse");
-  readonly hint = input<string>("");
-  readonly accept = input<string>("");
-  readonly multiple = input<boolean>(true);
-  readonly disabled = input<boolean>(false);
-
-  readonly filesChanged = output<File[]>();
-
-  protected readonly dragOver = signal(false);
-  protected readonly fileList = signal<File[]>([]);
-
-  protected onDragOver = (event: DragEvent): void => {
-    event.preventDefault();
-    this.dragOver.set(true);
-  };
-
-  protected onDrop = (event: DragEvent): void => {
-    event.preventDefault();
-    this.dragOver.set(false);
-    this.addFiles(Array.from(event.dataTransfer?.files ?? []));
-  };
-
-  protected onSelect = (event: Event): void => {
-    this.addFiles(Array.from((event.target as HTMLInputElement).files ?? []));
-  };
-
-  protected removeFile = (file: File): void => {
-    this.fileList.update((list) => list.filter((item) => item !== file));
-    this.filesChanged.emit(this.fileList());
-  };
-
-  protected formatSize = (bytes: number): string => {
-    if (bytes < 1024) {
-      return `${bytes} B`;
-    }
-    if (bytes < 1024 * 1024) {
-      return `${(bytes / 1024).toFixed(1)} KB`;
-    }
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  };
-
-  private addFiles(files: File[]): void {
-    if (files.length === 0) {
-      return;
-    }
-    this.fileList.update((list) =>
-      this.multiple() ? [...list, ...files] : files.slice(0, 1),
-    );
-    this.filesChanged.emit(this.fileList());
-  }
-}

package/src/lib/footer/footer.scss

@@ -1,162 +0,0 @@
-.viking-footer,
-.mega-footer {
-  background-color: var(--viking-surface, var(--color-surface));
-  border-top: 1px solid var(--viking-border-strong, var(--border-layout));
-  padding: calc(var(--viking-space-2) * 2) var(--viking-space-2);
-  font-family: var(--viking-font-family);
-  color: var(--viking-text-muted);
-}
-
-.viking-footer-content,
-.footer-content {
-  max-width: var(--container-max-width, 1260px);
-  margin: 0 auto;
-}
-
-.viking-footer-directory,
-.footer-directory {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: calc(var(--viking-space-2) * 1.75);
-  padding-bottom: calc(var(--viking-space-2) * 2);
-  border-bottom: 1px solid var(--viking-border-strong, var(--border-layout));
-}
-
-@media (min-width: 600px) {
-  .viking-footer-directory,
-  .footer-directory {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 900px) {
-  .viking-footer-directory,
-  .footer-directory {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.viking-footer-column-title,
-.footer-column-title {
-  font-size: var(--viking-font-size);
-  font-weight: 700;
-  color: var(--viking-text);
-  margin: 0 0 var(--viking-space-2);
-  letter-spacing: 0.05em;
-}
-
-.viking-footer-list,
-.footer-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-1);
-}
-
-.viking-footer-list a,
-.footer-list a {
-  font-size: var(--viking-font-size);
-  color: var(--viking-text-muted);
-  text-decoration: none !important;
-  border-bottom: 1px solid transparent;
-  transition: color 0.2s ease, border-color 0.2s ease;
-}
-
-.viking-footer-list a:hover,
-.footer-list a:hover {
-  color: var(--viking-text);
-  border-bottom-color: var(--viking-text);
-}
-
-.viking-footer-bottom,
-.footer-bottom {
-  padding-top: var(--viking-space-2);
-  display: flex;
-  flex-direction: column;
-  gap: var(--viking-space-2);
-}
-
-.viking-footer-badges-top,
-.footer-badges-top {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--viking-space-2);
-}
-
-.viking-footer-compliance-row,
-.footer-compliance-row {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.viking-copyright-info,
-.copyright-info {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: var(--viking-space-2);
-  font-size: var(--viking-font-size);
-  color: var(--viking-text-muted);
-  text-align: center;
-}
-
-.viking-copyright-info a,
-.copyright-info a {
-  color: var(--viking-text-muted);
-  text-decoration: none !important;
-  border-bottom: 1px solid transparent;
-  transition: color 0.2s ease, border-color 0.2s ease;
-}
-
-.viking-copyright-info a:hover,
-.copyright-info a:hover {
-  color: var(--viking-text);
-  border-bottom-color: var(--viking-text);
-}
-
-.viking-usa-badge,
-.usa-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--viking-space-1);
-  padding: var(--viking-space-1) var(--viking-space-2);
-  border-radius: var(--viking-radius-pill);
-  background-color: transparent;
-  border: 1px solid var(--viking-border);
-  cursor: pointer;
-  transition: var(--viking-transition-colors);
-  font-size: var(--viking-font-size);
-  font-weight: 500;
-  color: var(--viking-text-muted);
-}
-
-.viking-usa-badge:focus-visible,
-.usa-badge:focus-visible {
-  outline: var(--viking-ring-width, 2px) solid
-    var(--viking-ring, var(--viking-ring));
-  outline-offset: var(--viking-ring-offset, 2px);
-}
-
-.viking-usa-badge:hover,
-.usa-badge:hover {
-  background-color: color-mix(in srgb, var(--viking-surface) 95%, var(--viking-accent) 5%);
-  border-color: var(--viking-border-strong);
-  color: var(--viking-text);
-  box-shadow: var(--viking-shadow-sm);
-}
-
-.viking-usa-badge-icon,
-.usa-badge-icon {
-  font-size: 1.1em;
-  line-height: 1;
-  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.viking-usa-badge:hover .viking-usa-badge-icon,
-.usa-badge:hover .usa-badge-icon {
-  transform: scale(1.15) rotate(-5deg);
-}

package/src/lib/footer/footer.ts

@@ -1,28 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-} from "@angular/core";
-
-/**
- * viking-footer — site-wide Drakkar footer shell. Project directory columns and bottom row via slots.
- * Static apps (marketing, backend) use the same class names from viking-ui.css.
- */
-@Component({
-  selector: "viking-footer",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: "viking-footer-host" },
-  template: `
-    <footer class="viking-footer mega-footer">
-      <div class="viking-footer-content footer-content">
-        <ng-content select="[vikingFooterDirectory]" />
-        <section class="viking-footer-bottom footer-bottom">
-          <ng-content select="[vikingFooterBottom]" />
-        </section>
-      </div>
-    </footer>
-  `,
-  styleUrl: "./footer.scss",
-})
-export class VikingFooter {}

package/src/lib/form-section/form-section.ts

@@ -1,200 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
-import { VikingIcon } from "../icon/icon";
-import { VikingIconName } from "../../core/icons";
-
-export type VikingFormSectionLayout = "inline" | "stack" | "status";
-
-/**
- * viking-form-panel — groups related form sections inside a card without nested outlines.
- */
-@Component({
-  selector: "viking-form-panel",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: "viking-form-panel" },
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: 0;
-        width: 100%;
-        min-width: 0;
-      }
-      :host ::ng-deep viking-form-section + viking-form-section {
-        border-top: 1px solid var(--viking-border-subtle);
-        margin-top: var(--viking-space-3);
-        padding-top: var(--viking-space-3);
-      }
-    `,
-  ],
-})
-export class VikingFormPanel {}
-
-/**
- * viking-form-section — standard dashboard form row: heading, fields, and actions.
- * Use inside viking-form-panel (or a card body) to avoid nested bordered sub-forms.
- */
-@Component({
-  selector: "viking-form-section",
-  imports: [VikingIcon],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: "viking-form-section",
-    "[class.viking-form-section-inline]": "layout() === 'inline'",
-    "[class.viking-form-section-stack]": "layout() === 'stack'",
-    "[class.viking-form-section-status]": "layout() === 'status'",
-  },
-  template: `
-    <header class="viking-form-section-header">
-      @if (icon()) {
-        <viking-icon
-          [name]="icon()!"
-          [size]="16"
-          class="viking-form-section-icon"
-        />
-      }
-      <h3 class="viking-form-section-title">{{ heading() }}</h3>
-    </header>
-
-    <div class="viking-form-section-body">
-      <div class="viking-form-section-fields">
-        <ng-content />
-      </div>
-      <div class="viking-form-section-actions">
-        <ng-content select="[vikingFormActions]" />
-      </div>
-    </div>
-
-    <div class="viking-form-section-footer">
-      <ng-content select="[vikingFormFooter]" />
-    </div>
-  `,
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-2);
-        width: 100%;
-        min-width: 0;
-        font-family: var(--viking-font-family);
-      }
-
-      .viking-form-section-header {
-        display: flex;
-        align-items: center;
-        gap: var(--viking-space-1);
-        min-width: 0;
-      }
-
-      .viking-form-section-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        border-radius: var(--viking-radius-sm);
-        background: var(--viking-accent-soft);
-        color: var(--viking-accent-strong);
-        flex-shrink: 0;
-      }
-
-      .viking-form-section-title {
-        margin: 0;
-        font-size: var(--viking-font-size-ui);
-        font-weight: var(--viking-font-weight-semibold);
-        letter-spacing: var(--viking-letter-spacing-caps);
-        text-transform: uppercase;
-        color: var(--viking-text);
-        line-height: var(--viking-line-height-tight);
-      }
-
-      .viking-form-section-body {
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        gap: var(--viking-space-2);
-        width: 100%;
-        min-width: 0;
-      }
-
-      .viking-form-section-fields {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-2);
-        min-width: 0;
-        flex: 1;
-      }
-
-      .viking-form-section-actions {
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        gap: var(--viking-space-1);
-        flex-shrink: 0;
-      }
-
-      .viking-form-section-actions:empty {
-        display: none;
-      }
-
-      .viking-form-section-footer:empty {
-        display: none;
-      }
-
-      .viking-form-section-footer:not(:empty) {
-        display: flex;
-        flex-direction: column;
-        gap: var(--viking-space-1);
-      }
-
-      :host(.viking-form-section-inline) .viking-form-section-body {
-        @media (min-width: 601px) {
-          flex-direction: row;
-          align-items: flex-end;
-        }
-      }
-
-      :host(.viking-form-section-inline) .viking-form-section-actions {
-        @media (min-width: 601px) {
-          align-items: center;
-          justify-content: flex-end;
-          width: auto;
-        }
-      }
-
-      :host(.viking-form-section-status) .viking-form-section-body {
-        @media (min-width: 601px) {
-          flex-direction: row;
-          align-items: flex-start;
-          justify-content: space-between;
-        }
-      }
-
-      :host(.viking-form-section-status) .viking-form-section-fields {
-        flex-direction: row;
-        align-items: flex-start;
-        gap: var(--viking-space-1, 8px);
-      }
-
-      :host(.viking-form-section-status) .viking-form-section-actions {
-        @media (min-width: 601px) {
-          align-items: flex-start;
-          padding-top: 1px;
-          margin-left: auto;
-        }
-      }
-
-      :host ::ng-deep viking-field {
-        width: 100%;
-        min-width: 0;
-      }
-    `,
-  ],
-})
-export class VikingFormSection {
-  readonly heading = input.required<string>();
-  readonly icon = input<VikingIconName | null>(null);
-  readonly layout = input<VikingFormSectionLayout>("inline");
-}