@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/types/lifecorner-angular-ui-kit-description-list.d.ts

@@ -0,0 +1,137 @@
+import * as i0 from "@angular/core";
+/**
+ * Emphasis treatment applied to a row's value.
+ * - `mono` renders the value in the monospace font (paths, URLs, hashes).
+ */
+export type DescriptionListEmphasis = 'default' | 'strong' | 'muted' | 'primary' | 'mono';
+export interface DescriptionListItem {
+  /** Label shown on the term side of the row. */
+  term: string;
+  /** Value shown on the description side of the row. */
+  value: string;
+  /**
+   * Optional qualifying suffix appended after the value on the same line and
+   * rendered muted (e.g. a rating grade or "last checked" hint). Wraps if the
+   * combined value + suffix exceed the available width.
+   */
+  valueSuffix?: string;
+  /** Optional link — renders the value as an anchor. */
+  href?: string;
+  /**
+   * Machine-readable date or time of the value (ISO 8601, e.g.
+   * `2026-10-12T18:05:00+02:00`): renders the value inside
+   * `<time datetime>`, so assistive tech and parsers get the exact moment
+   * behind „heute 18:05“. Ignored together with `href`.
+   */
+  datetime?: string;
+  /** Optional visual emphasis for the value. @default 'default' */
+  emphasis?: DescriptionListEmphasis;
+  /** Optional opaque payload echoed back in `itemClick`. */
+  id?: string;
+}
+export type DescriptionListLayout = 'rows' | 'stacked';
+export type DescriptionListSize = 'sm' | 'md';
+/**
+ * Per-row separator style (applies to the `rows` layout).
+ * - `line`    solid hairline under each row (default — unchanged look)
+ * - `divider` subtle dashed line, for the dense card look
+ * - `none`    no row separator
+ *
+ * Orthogonal to `leaders`, which draws dotted leaders *between* term and value.
+ */
+export type DescriptionListSeparator = 'line' | 'divider' | 'none';
+/**
+ * Description list for key/value metadata (a styled `<dl>`).
+ *
+ * Features:
+ * - `rows` layout: term on the left, value on the right, with an optional
+ *   dotted leader line connecting them (the DS2.0 "spec sheet" look).
+ * - `stacked` layout: term above value, for narrow columns.
+ * - Per-row value emphasis and optional links.
+ * - Semantic markup (`<dl>`/`<dt>`/`<dd>`) for accessibility; `clickable`
+ *   rows are focusable and keyboard-activatable.
+ *
+ * @example
+ * ```html
+ * <lc-description-list
+ *   [items]="[
+ *     { term: 'Repository', value: 'example/project', href: '#', emphasis: 'primary' },
+ *     { term: 'Access', value: 'Token stored · read only' },
+ *     { term: 'Status', value: 'Maintained', emphasis: 'strong' }
+ *   ]"
+ *   [leaders]="true" />
+ * ```
+ */
+export declare class DescriptionListComponent {
+  /** Rows to render. */
+  readonly items: import("@angular/core").InputSignal<readonly DescriptionListItem[]>;
+  /**
+   * Row layout.
+   * - rows: term left / value right (default)
+   * - stacked: term above value
+   * @default 'rows'
+   */
+  readonly layout: import("@angular/core").InputSignal<DescriptionListLayout>;
+  /**
+   * Draw a dotted leader line between term and value. Only applies to the
+   * `rows` layout.
+   * @default false
+   */
+  readonly leaders: import("@angular/core").InputSignal<boolean>;
+  /** Density of the rows. @default 'md' */
+  readonly size: import("@angular/core").InputSignal<DescriptionListSize>;
+  /**
+   * Per-row separator style for the `rows` layout. Defaults to `line`, which is
+   * identical to the previous behavior. Orthogonal to `leaders`.
+   * @default 'line'
+   */
+  readonly separator: import("@angular/core").InputSignal<DescriptionListSeparator>;
+  /**
+   * Whether rows are interactive. When set, each row is focusable and
+   * Enter / Space emit `itemClick`, so the click handler is reachable from
+   * the keyboard. Set this whenever you handle `itemClick`.
+   * @default false
+   */
+  readonly clickable: import("@angular/core").InputSignal<boolean>;
+  /** Emitted when a row is clicked (or activated via keyboard when `clickable`). */
+  readonly itemClick: import("@angular/core").OutputEmitterRef<DescriptionListItem>;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  protected valueClass(item: DescriptionListItem): string;
+  /** Keyboard activation of a clickable row (only from the row itself, not a nested link). */
+  protected onRowKeydown(event: KeyboardEvent, item: DescriptionListItem): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DescriptionListComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DescriptionListComponent, "lc-description-list", never, {
+    "items": {
+      "alias": "items";
+      "required": true;
+      "isSignal": true;
+    };
+    "layout": {
+      "alias": "layout";
+      "required": false;
+      "isSignal": true;
+    };
+    "leaders": {
+      "alias": "leaders";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "separator": {
+      "alias": "separator";
+      "required": false;
+      "isSignal": true;
+    };
+    "clickable": {
+      "alias": "clickable";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "itemClick": "itemClick";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,93 @@
+import * as i0 from "@angular/core";
+export type DiffViewMode = 'side-by-side' | 'inline';
+interface DiffLine {
+  type: 'unchanged' | 'added' | 'removed';
+  leftNum: number | null;
+  rightNum: number | null;
+  content: string;
+}
+export declare class DiffViewerComponent {
+  readonly oldText: import("@angular/core").InputSignal<string>;
+  readonly newText: import("@angular/core").InputSignal<string>;
+  readonly oldLabel: import("@angular/core").InputSignal<string>;
+  readonly newLabel: import("@angular/core").InputSignal<string>;
+  readonly mode: import("@angular/core").InputSignal<DiffViewMode>;
+  readonly showLineNumbers: import("@angular/core").InputSignal<boolean>;
+  readonly contextLines: import("@angular/core").InputSignal<number>;
+  /**
+   * Upper bound (per side, in lines) above which no diff is computed and a
+   * "too large" notice is rendered instead — a UI diff of that size is neither
+   * readable nor cheap. Raise it deliberately when you know the inputs.
+   */
+  readonly maxLines: import("@angular/core").InputSignal<number>;
+  private readonly oldLines;
+  private readonly newLines;
+  protected readonly oldLineCount: import("@angular/core").Signal<number>;
+  protected readonly newLineCount: import("@angular/core").Signal<number>;
+  /** True when either side exceeds `maxLines`; the diff is then skipped. */
+  protected readonly tooLarge: import("@angular/core").Signal<boolean>;
+  protected readonly diffLines: import("@angular/core").Signal<DiffLine[]>;
+  protected readonly filteredLines: import("@angular/core").Signal<DiffLine[]>;
+  protected readonly sideBySide: import("@angular/core").Signal<{
+    left: {
+      num: number | null;
+      content: string;
+      type: string;
+    }[];
+    right: {
+      num: number | null;
+      content: string;
+      type: string;
+    }[];
+  }>;
+  protected readonly stats: import("@angular/core").Signal<{
+    additions: number;
+    deletions: number;
+  }>;
+  /** Expand the edit script into numbered lines (removed before added). */
+  private numberOps;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DiffViewerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DiffViewerComponent, "lc-diff-viewer", never, {
+    "oldText": {
+      "alias": "oldText";
+      "required": true;
+      "isSignal": true;
+    };
+    "newText": {
+      "alias": "newText";
+      "required": true;
+      "isSignal": true;
+    };
+    "oldLabel": {
+      "alias": "oldLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "newLabel": {
+      "alias": "newLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "mode": {
+      "alias": "mode";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLineNumbers": {
+      "alias": "showLineNumbers";
+      "required": false;
+      "isSignal": true;
+    };
+    "contextLines": {
+      "alias": "contextLines";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxLines": {
+      "alias": "maxLines";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export {};

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

@@ -0,0 +1,66 @@
+import * as i0 from "@angular/core";
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+export type DividerSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Divider component for visual separation of content.
+ *
+ * Features:
+ * - Horizontal and vertical orientations
+ * - Line style variants (solid, dashed, dotted)
+ * - Configurable spacing (none, sm, md, lg)
+ * - Optional centered text label
+ * - Dark mode support
+ *
+ * @example
+ * ```html
+ * <lc-divider></lc-divider>
+ * <lc-divider orientation="vertical" variant="dashed"></lc-divider>
+ * <lc-divider spacing="lg">OR</lc-divider>
+ * ```
+ */
+export declare class DividerComponent {
+  /**
+   * Orientation of the divider line.
+   * @default 'horizontal'
+   */
+  orientation: import("@angular/core").InputSignal<DividerOrientation>;
+  /**
+   * Line style.
+   * @default 'solid'
+   */
+  variant: import("@angular/core").InputSignal<DividerVariant>;
+  /**
+   * Spacing (margin) around the divider.
+   * @default 'md'
+   */
+  spacing: import("@angular/core").InputSignal<DividerSpacing>;
+  /**
+   * Optional inline text label (e.g. "OR", "Section").
+   */
+  label: import("@angular/core").InputSignal<string | undefined>;
+  protected dividerClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DividerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DividerComponent, "lc-divider", never, {
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "spacing": {
+      "alias": "spacing";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,256 @@
+import * as i0 from "@angular/core";
+import { OnDestroy } from "@angular/core";
+import { SafeResourceUrl } from "@angular/platform-browser";
+import { CodeBlockLanguage } from "@lifecorner/angular-ui-kit/code-block";
+export type DocumentType = 'pdf' | 'markdown' | 'image' | 'text' | 'code' | 'auto';
+/**
+ * Document viewer component for previewing various file types.
+ *
+ * Features:
+ * - Auto-detects file type from URL extension or explicit type input
+ * - PDF rendering via browser-native iframe viewer
+ * - Markdown rendered through `lc-markdown` (escaped and sanitised — a fetched
+ *   `.md` file cannot inject markup)
+ * - Image display with zoom controls (25% – 500%)
+ * - Code display using the built-in code block component
+ * - Plain text display
+ * - Toolbar with filename, type badge, zoom, download, and fullscreen
+ * - Loading and error states
+ * - Dark/light theme support
+ *
+ * `src` is only ever embedded (iframe) or downloaded when it is a http(s),
+ * blob: or relative URL — or a `data:application/pdf` — so a `javascript:` URL
+ * handed in as a document can neither run in the frame nor be "downloaded".
+ *
+ * @example
+ * ```html
+ * <lc-document-viewer src="https://example.com/report.pdf" />
+ * <lc-document-viewer [content]="markdownString" type="markdown" filename="README.md" />
+ * <lc-document-viewer src="/assets/diagram.png" />
+ * ```
+ */
+export declare class DocumentViewerComponent implements OnDestroy {
+  /** URL of the document to display (for PDF, images, or remote files) */
+  readonly src: import("@angular/core").InputSignal<string>;
+  /** Direct content string (for markdown, text, or code — takes precedence over src for content-based types) */
+  readonly content: import("@angular/core").InputSignal<string>;
+  /** File type — set to 'auto' to detect from URL extension */
+  readonly type: import("@angular/core").InputSignal<DocumentType>;
+  /** Display name shown in the toolbar */
+  readonly filename: import("@angular/core").InputSignal<string>;
+  /** Code language for syntax highlighting (when type is 'code') */
+  readonly language: import("@angular/core").InputSignal<CodeBlockLanguage>;
+  /** Whether to display the toolbar */
+  readonly showToolbar: import("@angular/core").InputSignal<boolean>;
+  /** Whether to show the download button in the toolbar */
+  readonly showDownload: import("@angular/core").InputSignal<boolean>;
+  /** Height of the viewer container */
+  readonly height: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the zoom-out button. */
+  readonly zoomOutAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the zoom-in button. */
+  readonly zoomInAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the reset-zoom button. */
+  readonly resetZoomAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the toolbar download button. */
+  readonly downloadAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the fullscreen button. */
+  readonly fullscreenAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the fullscreen button while in fullscreen. */
+  readonly exitFullscreenAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Shown while the document loads. */
+  readonly loadingLabel: import("@angular/core").InputSignal<string>;
+  /** Title shown for file types without a preview. */
+  readonly previewUnavailableTitle: import("@angular/core").InputSignal<string>;
+  /** Message shown for file types without a preview. */
+  readonly previewUnavailableMessage: import("@angular/core").InputSignal<string>;
+  /** Label of the download button shown instead of a preview. */
+  readonly downloadFileLabel: import("@angular/core").InputSignal<string>;
+  /** Toolbar name when neither `filename` nor a file name in `src` is available. */
+  readonly untitledLabel: import("@angular/core").InputSignal<string>;
+  /** Type badge for Markdown documents. */
+  readonly markdownTypeLabel: import("@angular/core").InputSignal<string>;
+  /** Type badge for images. */
+  readonly imageTypeLabel: import("@angular/core").InputSignal<string>;
+  /** Type badge for plain text. */
+  readonly textTypeLabel: import("@angular/core").InputSignal<string>;
+  /** Type badge for other files. */
+  readonly fileTypeLabel: import("@angular/core").InputSignal<string>;
+  /** Prefix of the error shown when fetching the document fails. */
+  readonly loadErrorLabel: import("@angular/core").InputSignal<string>;
+  /** Error shown when `src` is not an allowed URL (e.g. `javascript:`). */
+  readonly blockedUrlMessage: import("@angular/core").InputSignal<string>;
+  protected loading: import("@angular/core").WritableSignal<boolean>;
+  protected error: import("@angular/core").WritableSignal<string | null>;
+  protected fetchedContent: import("@angular/core").WritableSignal<string>;
+  protected zoom: import("@angular/core").WritableSignal<number>;
+  protected isFullscreen: import("@angular/core").WritableSignal<boolean>;
+  private readonly sanitizer;
+  private readonly elementRef;
+  private fullscreenHandler;
+  /** Resolved document type from input or URL extension */
+  protected resolvedType: import("@angular/core").Signal<DocumentType | "unknown">;
+  /** Display name for the toolbar */
+  protected displayName: import("@angular/core").Signal<string>;
+  /** Icon name for the document type */
+  protected typeIcon: import("@angular/core").Signal<string>;
+  /** Type label for the toolbar badge */
+  protected typeLabel: import("@angular/core").Signal<string>;
+  /** Resolved code language */
+  protected resolvedLanguage: import("@angular/core").Signal<CodeBlockLanguage>;
+  /** Whether `src` may be embedded in a frame or downloaded at all. */
+  protected srcEmbeddable: import("@angular/core").Signal<boolean>;
+  /**
+   * `src` as the iframe accepts it. Bypassing the resource-URL check is what
+   * lets a PDF URL into an iframe at all; it is only done for URLs that passed
+   * `isSafeResourceUrl` — anything else resolves to an empty frame.
+   */
+  protected safeSrc: import("@angular/core").Signal<SafeResourceUrl>;
+  /** Effective content: direct content input or fetched content */
+  protected effectiveContent: import("@angular/core").Signal<string>;
+  /** Image transform style for zoom */
+  protected imageTransform: import("@angular/core").Signal<string>;
+  /** Whether zoom controls should be shown */
+  protected showZoom: import("@angular/core").Signal<boolean>;
+  constructor();
+  private load;
+  ngOnDestroy(): void;
+  protected zoomIn(): void;
+  protected zoomOut(): void;
+  protected resetZoom(): void;
+  protected download(): void;
+  protected toggleFullscreen(): void;
+  protected onIframeLoad(): void;
+  protected onImageLoad(): void;
+  protected onImageError(): void;
+  private extractExtension;
+  private fetchContent;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DocumentViewerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DocumentViewerComponent, "lc-document-viewer", never, {
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "content": {
+      "alias": "content";
+      "required": false;
+      "isSignal": true;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "filename": {
+      "alias": "filename";
+      "required": false;
+      "isSignal": true;
+    };
+    "language": {
+      "alias": "language";
+      "required": false;
+      "isSignal": true;
+    };
+    "showToolbar": {
+      "alias": "showToolbar";
+      "required": false;
+      "isSignal": true;
+    };
+    "showDownload": {
+      "alias": "showDownload";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "zoomOutAriaLabel": {
+      "alias": "zoomOutAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "zoomInAriaLabel": {
+      "alias": "zoomInAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "resetZoomAriaLabel": {
+      "alias": "resetZoomAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "downloadAriaLabel": {
+      "alias": "downloadAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "fullscreenAriaLabel": {
+      "alias": "fullscreenAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "exitFullscreenAriaLabel": {
+      "alias": "exitFullscreenAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "loadingLabel": {
+      "alias": "loadingLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "previewUnavailableTitle": {
+      "alias": "previewUnavailableTitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "previewUnavailableMessage": {
+      "alias": "previewUnavailableMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "downloadFileLabel": {
+      "alias": "downloadFileLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "untitledLabel": {
+      "alias": "untitledLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "markdownTypeLabel": {
+      "alias": "markdownTypeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "imageTypeLabel": {
+      "alias": "imageTypeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "textTypeLabel": {
+      "alias": "textTypeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "fileTypeLabel": {
+      "alias": "fileTypeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "loadErrorLabel": {
+      "alias": "loadErrorLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "blockedUrlMessage": {
+      "alias": "blockedUrlMessage";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-donut-chart.d.ts

@@ -0,0 +1,92 @@
+import * as i0 from "@angular/core";
+export interface DonutSegment {
+  /** Share of the whole. Non-finite and negative values count as 0. */
+  value: number;
+  label?: string;
+  color?: string;
+}
+export type DonutChartSize = 'sm' | 'md' | 'lg';
+export declare class DonutChartComponent {
+  /** Segments to render. */
+  segments: import("@angular/core").InputSignal<DonutSegment[]>;
+  /** Size preset. */
+  size: import("@angular/core").InputSignal<DonutChartSize>;
+  /** Thickness of the donut ring (0-1 ratio of radius). */
+  thickness: import("@angular/core").InputSignal<number>;
+  /** Show the center label area. */
+  showCenter: import("@angular/core").InputSignal<boolean>;
+  /** Center label text. */
+  centerLabel: import("@angular/core").InputSignal<string>;
+  /** Center value text (large number). */
+  centerValue: import("@angular/core").InputSignal<string>;
+  /** Show legend below the chart. */
+  showLegend: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Accessible name of the chart. Defaults to a generated summary listing
+   * every segment's label and share, e.g. "Donut chart: A 40%, B 60%".
+   */
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  protected readonly sizeMap: Record<DonutChartSize, number>;
+  protected readonly svgSize: import("@angular/core").Signal<number>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  protected readonly center: import("@angular/core").Signal<number>;
+  protected readonly outerRadius: import("@angular/core").Signal<number>;
+  protected readonly innerRadius: import("@angular/core").Signal<number>;
+  protected readonly arcs: import("@angular/core").Signal<{
+    d: string;
+    color: string;
+    label: string;
+    value: number;
+    percentage: number;
+  }[]>;
+  protected readonly legendItems: import("@angular/core").Signal<{
+    color: string;
+    label: string;
+    value: number;
+    percentage: number;
+  }[]>;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<DonutChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<DonutChartComponent, "lc-donut-chart", never, {
+    "segments": {
+      "alias": "segments";
+      "required": true;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "thickness": {
+      "alias": "thickness";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCenter": {
+      "alias": "showCenter";
+      "required": false;
+      "isSignal": true;
+    };
+    "centerLabel": {
+      "alias": "centerLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "centerValue": {
+      "alias": "centerValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}