@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/types/lifecorner-angular-ui-kit-log-viewer.d.ts

@@ -0,0 +1,355 @@
+import { Observable } from "rxjs";
+import * as i0 from "@angular/core";
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+export type LogViewerVariant = 'terminal' | 'log';
+export interface LogLine {
+  text: string;
+  level?: LogLevel;
+  timestamp?: Date;
+  source?: string;
+  meta?: Record<string, unknown>;
+}
+/**
+ * Streaming log / terminal viewer component.
+ *
+ * Supports controlled (lines input) and streaming (stream$ observable) modes,
+ * virtualized rendering for large buffers, ANSI color parsing, auto-scroll,
+ * and filtering.
+ *
+ * The virtual window is sized from the *measured* height of the scroll area
+ * (ResizeObserver), so any `height` — `400px`, `50vh`, `100%` inside a flex
+ * parent — renders a full window. Row height comes from the CSS custom
+ * property `--lc-log-viewer-line-height` (default 22px), read once after the
+ * first render; override it on the host to change the row density.
+ *
+ * @example
+ * ```html
+ * <lc-log-viewer [stream$]="logs$" autoScroll height="600px" variant="terminal" />
+ * ```
+ */
+export declare class LogViewerComponent {
+  private static nextId;
+  /** Id of the search input (links its visually-hidden label). */
+  protected readonly searchInputId: string;
+  private readonly ngZone;
+  private readonly injector;
+  private readonly destroyRef;
+  private readonly scrollContainer;
+  private readonly searchInput;
+  private streamSub?;
+  /** Controlled mode: array of log lines */
+  readonly lines: import("@angular/core").InputSignal<LogLine[]>;
+  /** Streaming mode: observable of log lines */
+  readonly stream$: import("@angular/core").InputSignal<Observable<LogLine | LogLine[]> | undefined>;
+  /** Maximum lines to keep in buffer */
+  readonly maxLines: import("@angular/core").InputSignal<number>;
+  /**
+   * Follow new lines: scroll to the bottom whenever the visible line count
+   * changes — but only while the reader is already at the bottom, so scrolling
+   * up to inspect older output is never fought.
+   */
+  readonly autoScroll: import("@angular/core").InputSignal<boolean>;
+  /** Show timestamps column */
+  readonly showTimestamps: import("@angular/core").InputSignal<boolean>;
+  /** Show line numbers */
+  readonly showLineNumbers: import("@angular/core").InputSignal<boolean>;
+  /** Parse ANSI color codes */
+  readonly ansiColors: import("@angular/core").InputSignal<boolean>;
+  /** Filter by log levels */
+  readonly levelFilter: import("@angular/core").InputSignal<LogLevel[] | undefined>;
+  /** Search query to highlight */
+  readonly searchQuery: import("@angular/core").InputSignal<string | undefined>;
+  /** Container height */
+  readonly height: import("@angular/core").InputSignal<string>;
+  /** Visual variant */
+  readonly variant: import("@angular/core").InputSignal<LogViewerVariant>;
+  /**
+   * Render lines as interactive rows (`role="button"`, focusable, Enter/Space
+   * emit `lineClick`). Set this whenever you bind `(lineClick)` so keyboard
+   * users can activate a line too; a plain click emits either way.
+   */
+  readonly clickableLines: import("@angular/core").InputSignal<boolean>;
+  /** BCP 47 locale of the line timestamps (24-hour clock). */
+  readonly locale: import("@angular/core").InputSignal<string>;
+  /** Tooltip of the pause button while streaming. */
+  readonly pauseLabel: import("@angular/core").InputSignal<string>;
+  /** Tooltip of the pause button while paused. */
+  readonly resumeLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the pause button while streaming. */
+  readonly pauseAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the pause button while paused. */
+  readonly resumeAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Tooltip of the clear button. */
+  readonly clearLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the clear button. */
+  readonly clearAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Tooltip of the copy button. */
+  readonly copyLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the copy button. */
+  readonly copyAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Tooltip of the search toggle. */
+  readonly searchLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the search toggle. */
+  readonly searchAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Label of the search field (visually hidden). */
+  readonly searchInputLabel: import("@angular/core").InputSignal<string>;
+  /** Placeholder of the search field. */
+  readonly searchPlaceholder: import("@angular/core").InputSignal<string>;
+  /** Unit after the error count in the level filter. */
+  readonly errorsLabel: import("@angular/core").InputSignal<string>;
+  /** Unit after the warning count in the level filter. */
+  readonly warningsLabel: import("@angular/core").InputSignal<string>;
+  /** Unit after the line count. */
+  readonly linesLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the log region. */
+  readonly outputAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Label of the jump-to-bottom button. */
+  readonly jumpToBottomLabel: import("@angular/core").InputSignal<string>;
+  /** Emitted when a line is clicked (or activated with Enter/Space) */
+  readonly lineClick: import("@angular/core").OutputEmitterRef<LogLine>;
+  /**
+   * Emitted with the copied text after "Copy all" — also when the Clipboard
+   * API is unavailable (insecure context, denied permission), so consumers can
+   * offer their own fallback.
+   */
+  readonly copyAll: import("@angular/core").OutputEmitterRef<string>;
+  /** Emitted when scroll state changes */
+  readonly scrollStateChange: import("@angular/core").OutputEmitterRef<{
+    atBottom: boolean;
+  }>;
+  /** Internal buffer of all lines */
+  protected buffer: import("@angular/core").WritableSignal<LogLine[]>;
+  /** Whether stream is paused */
+  protected paused: import("@angular/core").WritableSignal<boolean>;
+  /** Whether user is at bottom of scroll */
+  protected atBottom: import("@angular/core").WritableSignal<boolean>;
+  /** Internal search input */
+  protected internalSearch: import("@angular/core").WritableSignal<string>;
+  /** Internal level filter */
+  protected internalLevelFilter: import("@angular/core").WritableSignal<Set<LogLevel>>;
+  /** Show search bar */
+  protected showSearch: import("@angular/core").WritableSignal<boolean>;
+  /** Effective search query */
+  protected effectiveSearch: import("@angular/core").Signal<string>;
+  /** Filtered lines for display */
+  protected filteredLines: import("@angular/core").Signal<LogLine[]>;
+  protected scrollTop: import("@angular/core").WritableSignal<number>;
+  /**
+   * Measured `clientHeight` of the scroll area (excludes toolbar and search
+   * bar by construction). 0 until the first ResizeObserver callback.
+   */
+  private readonly viewportHeight;
+  /** Row height in px — `--lc-log-viewer-line-height`, read once after render. */
+  protected readonly lineHeight: import("@angular/core").WritableSignal<number>;
+  protected visibleRange: import("@angular/core").Signal<{
+    start: number;
+    end: number;
+    total: number;
+    totalHeight: number;
+  }>;
+  protected visibleLines: import("@angular/core").Signal<{
+    _index: number;
+    text: string;
+    level?: LogLevel;
+    timestamp?: Date;
+    source?: string;
+    meta?: Record<string, unknown>;
+  }[]>;
+  protected containerClasses: import("@angular/core").Signal<string>;
+  /** Line counts per level for toolbar */
+  protected levelCounts: import("@angular/core").Signal<{
+    debug: number;
+    info: number;
+    warn: number;
+    error: number;
+  }>;
+  constructor();
+  private trim;
+  /** Append streamed lines to the buffer (no-op while paused). */
+  private append;
+  protected onScroll(): void;
+  protected scrollToBottom(): void;
+  protected togglePause(): void;
+  protected clearBuffer(): void;
+  protected onCopyAll(): Promise<void>;
+  protected toggleSearch(): void;
+  protected toggleLevelFilter(level: LogLevel): void;
+  protected onLineClick(line: LogLine): void;
+  /**
+   * Enter/Space activate an interactive line (see `clickableLines`). Like a
+   * native button, Enter fires on keydown and Space on keyup (keydown only
+   * prevents the page scroll) — so a consumer that moves focus in its
+   * `lineClick` handler doesn't get a stray Space keyup on the new target.
+   */
+  protected onLineKeydown(event: KeyboardEvent, line: LogLine): void;
+  protected onLineKeyup(event: KeyboardEvent, line: LogLine): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected formatTimestamp(date?: Date): string;
+  /**
+   * Render a line's text as HTML: ANSI SGR codes become `<span class="ansi-…">`
+   * wrappers, everything else is escaped, and search matches are wrapped in
+   * `<mark>`. Highlighting is applied per *text* segment — before the spans
+   * are assembled — so a query can never match inside a tag or an entity
+   * (`e` used to hit `class="ansi-red"`, `&` / `<` never matched at all).
+   */
+  protected renderLine(text: string): string;
+  private escapeHtml;
+  protected getInputValue(event: Event): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<LogViewerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<LogViewerComponent, "lc-log-viewer", never, {
+    "lines": {
+      "alias": "lines";
+      "required": false;
+      "isSignal": true;
+    };
+    "stream$": {
+      "alias": "stream$";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxLines": {
+      "alias": "maxLines";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoScroll": {
+      "alias": "autoScroll";
+      "required": false;
+      "isSignal": true;
+    };
+    "showTimestamps": {
+      "alias": "showTimestamps";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLineNumbers": {
+      "alias": "showLineNumbers";
+      "required": false;
+      "isSignal": true;
+    };
+    "ansiColors": {
+      "alias": "ansiColors";
+      "required": false;
+      "isSignal": true;
+    };
+    "levelFilter": {
+      "alias": "levelFilter";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchQuery": {
+      "alias": "searchQuery";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "clickableLines": {
+      "alias": "clickableLines";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "pauseLabel": {
+      "alias": "pauseLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "resumeLabel": {
+      "alias": "resumeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "pauseAriaLabel": {
+      "alias": "pauseAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "resumeAriaLabel": {
+      "alias": "resumeAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearLabel": {
+      "alias": "clearLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearAriaLabel": {
+      "alias": "clearAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "copyLabel": {
+      "alias": "copyLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "copyAriaLabel": {
+      "alias": "copyAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchLabel": {
+      "alias": "searchLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchAriaLabel": {
+      "alias": "searchAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchInputLabel": {
+      "alias": "searchInputLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "searchPlaceholder": {
+      "alias": "searchPlaceholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorsLabel": {
+      "alias": "errorsLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "warningsLabel": {
+      "alias": "warningsLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "linesLabel": {
+      "alias": "linesLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "outputAriaLabel": {
+      "alias": "outputAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "jumpToBottomLabel": {
+      "alias": "jumpToBottomLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "lineClick": "lineClick";
+    "copyAll": "copyAll";
+    "scrollStateChange": "scrollStateChange";
+  }, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-logo.d.ts

@@ -0,0 +1,182 @@
+import * as i0 from "@angular/core";
+import { InjectionToken } from "@angular/core";
+/**
+ * Injection token for the base path used to resolve the built-in
+ * LifeCorner logo assets. Defaults to `'/assets'` so consuming apps
+ * that copy the package's `assets/` folder to their public root keep
+ * working out of the box.
+ *
+ * Override this token at the application root if your app serves
+ * static files from a different prefix (e.g. `/static`, `/ui-kit`).
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   { provide: LC_LOGO_BASE_PATH, useValue: '/static/lc' },
+ * ]
+ * ```
+ */
+export declare const LC_LOGO_BASE_PATH: InjectionToken<string>;
+/**
+ * Logo component for displaying a brand identity.
+ *
+ * Defaults to the LifeCorner logo (Edu, the emblem, and the LifeCorner
+ * lockup) but accepts custom `src` / `emblemSrc` (and optional `darkSrc` /
+ * `darkEmblemSrc`) so consuming apps can drop in their own brand assets
+ * without forking the component.
+ *
+ * Features:
+ * - Full lockup and emblem-only variants; the emblem switches to its small
+ *   drawing at `xs` and `sm` (32 px and below)
+ * - Multiple size options (xs, sm, md, lg, xl)
+ * - Light and dark sources that follow the APP theme exactly as the theme
+ *   stylesheets do: dark under `:root.dark`, under a root without a theme
+ *   class (dark-first default), and under `:root.system` when the OS is dark;
+ *   light under `:root.light` and under `:root.system` when the OS is light.
+ *   `colorMode="light|dark"` pins one source.
+ * - The built-in logo ships its own dark drawings; nothing is inverted or
+ *   recoloured by CSS. A custom logo without a dark partner stays as it is.
+ * - The logo is flat and fixed: never animated, posed or distorted.
+ *
+ * @example Default LifeCorner logo
+ * ```html
+ * <lc-logo variant="full" size="md"></lc-logo>
+ * ```
+ *
+ * @example Custom brand logo
+ * ```html
+ * <lc-logo
+ *   src="/assets/acme-logo.svg"
+ *   emblemSrc="/assets/acme-emblem.svg"
+ *   darkSrc="/assets/acme-logo-dark.svg"
+ *   alt="Acme Inc.">
+ * </lc-logo>
+ * ```
+ */
+export declare class LogoComponent {
+  /**
+   * Logo variant to display
+   * - 'full': the lockup (emblem and name)
+   * - 'emblem': just the emblem
+   */
+  readonly variant: import("@angular/core").InputSignal<"full" | "emblem">;
+  /**
+   * Size of the logo
+   * - 'xs': 24px height (small emblem)
+   * - 'sm': 32px height (small emblem)
+   * - 'md': 48px height (default)
+   * - 'lg': 64px height
+   * - 'xl': 96px height
+   */
+  readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+  /**
+   * Alt text for accessibility. Defaults to the name of the built-in logo;
+   * set it to your brand name when you pass your own sources.
+   */
+  readonly alt: import("@angular/core").InputSignal<string>;
+  /**
+   * Makes the logo appear clickable
+   */
+  readonly clickable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Which source to show.
+   * - 'auto': follows the app theme (light source on light, dark source on dark)
+   * - 'light': always the light source (for light backgrounds)
+   * - 'dark': always the dark source (for dark backgrounds); falls back to the
+   *   light source when a custom logo has no dark partner
+   */
+  readonly colorMode: import("@angular/core").InputSignal<"auto" | "light" | "dark">;
+  /**
+   * Custom URL for the full logo. When set, overrides the built-in
+   * LifeCorner lockup.
+   */
+  readonly src: import("@angular/core").InputSignal<string>;
+  /**
+   * Custom URL for the emblem-only logo. When set, overrides the built-in
+   * LifeCorner emblem at every size.
+   */
+  readonly emblemSrc: import("@angular/core").InputSignal<string>;
+  /**
+   * Optional dark-theme URL for the full logo. When provided, the logo swaps
+   * with the app theme (see `colorMode`). Without it a custom `src` is shown
+   * on dark too; the built-in lockup brings its own dark drawing.
+   */
+  readonly darkSrc: import("@angular/core").InputSignal<string>;
+  /**
+   * Optional dark-theme URL for the emblem-only logo.
+   */
+  readonly darkEmblemSrc: import("@angular/core").InputSignal<string>;
+  /** Whether the consumer supplied at least one custom source. */
+  readonly hasCustomSrc: import("@angular/core").Signal<boolean>;
+  private readonly basePath;
+  /** The built-in LifeCorner pair for the current variant and size. */
+  private readonly builtIn;
+  /** Custom light source for the current variant, or empty string. */
+  private readonly customSrc;
+  readonly logoSrc: import("@angular/core").Signal<string>;
+  /**
+   * Dark-theme source for the current variant: the custom dark source, else
+   * the built-in dark drawing — unless a custom light logo is set without a
+   * dark partner (the kit never recolours a brand), then empty string.
+   */
+  readonly logoDarkSrc: import("@angular/core").Signal<string>;
+  /**
+   * Which sources are in the DOM. Without a dark source there is only the one
+   * image. With one, an explicit `colorMode` renders that side alone; `auto`
+   * renders BOTH and lets the stylesheet show the one matching the root theme
+   * class — that way the swap follows the app theme (also when it is toggled
+   * without `ThemeService`, e.g. Storybook), needs no JS, and is right on the
+   * first paint.
+   */
+  readonly showLightSrc: import("@angular/core").Signal<boolean>;
+  readonly showDarkSrc: import("@angular/core").Signal<boolean>;
+  readonly logoClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<LogoComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<LogoComponent, "lc-logo", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "alt": {
+      "alias": "alt";
+      "required": false;
+      "isSignal": true;
+    };
+    "clickable": {
+      "alias": "clickable";
+      "required": false;
+      "isSignal": true;
+    };
+    "colorMode": {
+      "alias": "colorMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "emblemSrc": {
+      "alias": "emblemSrc";
+      "required": false;
+      "isSignal": true;
+    };
+    "darkSrc": {
+      "alias": "darkSrc";
+      "required": false;
+      "isSignal": true;
+    };
+    "darkEmblemSrc": {
+      "alias": "darkEmblemSrc";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}