@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,278 @@
+import * as i0 from "@angular/core";
+import { OnDestroy } from "@angular/core";
+import { SafeHtml } from "@angular/platform-browser";
+import { CodeBlockLanguage } from "@lifecorner/angular-ui-kit/code-block";
+export interface MarkdownHeading {
+  level: number;
+  text: string;
+  id: string;
+}
+export interface MarkdownLinkClick {
+  href: string;
+  event: MouseEvent;
+}
+export interface MarkdownRendered {
+  headings: MarkdownHeading[];
+}
+export interface MarkdownChangesHighlighted {
+  /** Number of changed/added blocks highlighted in the current render. */
+  changedBlocks: number;
+}
+export interface RenderPart {
+  type: 'html' | 'code' | 'mermaid';
+  index: number;
+  safeHtml?: SafeHtml;
+  code?: string;
+  lang?: CodeBlockLanguage;
+}
+/**
+ * Markdown renderer component.
+ *
+ * Renders GitHub-Flavored Markdown (GFM) to sanitized HTML with
+ * optional syntax highlighting via `<lc-code-block>`.
+ *
+ * Supports headings (+ anchors), paragraphs, ordered/unordered lists, task lists
+ * (`- [ ]` / `- [x]` → accessible checkbox), blockquotes, horizontal rules,
+ * images, GFM tables (column alignment + horizontal scroll), bold/italic/
+ * strikethrough, inline code, fenced code (incl. `mermaid`), explicit links and
+ * autolinks (bare URLs / `www.` / emails, never inside code).
+ *
+ * Optionally highlights *changed* blocks in place: pass the pre-edit markdown as
+ * `previousContent` and set `highlightChanges` — added/edited blocks (diffed at
+ * block / list-item level) gain a left accent bar + subtle tint, can auto-fade
+ * (`changeHighlightFadeMs`) and scroll into view (`scrollToFirstChange`).
+ *
+ * @example
+ * ```html
+ * <lc-markdown [content]="'# Hello World'" />
+ * <lc-markdown [src]="'/docs/readme.md'" />
+ * <lc-markdown
+ *   [content]="current" [previousContent]="prev"
+ *   [highlightChanges]="true" [changeHighlightFadeMs]="3000" />
+ * ```
+ */
+export declare class MarkdownComponent implements OnDestroy {
+  private readonly sanitizer;
+  private readonly instanceId;
+  private readonly http;
+  private readonly host;
+  private httpSub?;
+  private fadeTimer?;
+  private scrollTimer?;
+  private mermaidApiPromise?;
+  private mermaidInitialized;
+  private mermaidRenderRun;
+  /** URL or path to load markdown from */
+  readonly src: import("@angular/core").InputSignal<string | undefined>;
+  /** Raw markdown string */
+  readonly content: import("@angular/core").InputSignal<string | undefined>;
+  /** Display variant */
+  readonly variant: import("@angular/core").InputSignal<"default" | "compact" | "chat">;
+  /** Target for links */
+  readonly linkTarget: import("@angular/core").InputSignal<"_self" | "_blank">;
+  /** Whether to sanitize HTML output */
+  readonly sanitize: import("@angular/core").InputSignal<boolean>;
+  /** Whether to use code-block for fenced code */
+  readonly syntaxHighlight: import("@angular/core").InputSignal<boolean>;
+  /** Whether to show anchor links on headings */
+  readonly showHeadingAnchors: import("@angular/core").InputSignal<boolean>;
+  /** Base URL for resolving relative links/images */
+  readonly baseUrl: import("@angular/core").InputSignal<string | undefined>;
+  /** Enable change highlighting (requires `previousContent` to compute a diff). */
+  readonly highlightChanges: import("@angular/core").InputSignal<boolean>;
+  /**
+   * The prior Markdown. When it differs from `content`, the changed/added blocks
+   * in `content` are highlighted. The caller passes the pre-edit markdown.
+   */
+  readonly previousContent: import("@angular/core").InputSignal<string | undefined>;
+  /** Auto-fade the highlight after N ms. 0 / undefined ⇒ persist until content changes. */
+  readonly changeHighlightFadeMs: import("@angular/core").InputSignal<number | undefined>;
+  /** Scroll the first changed block into view when highlights appear. */
+  readonly scrollToFirstChange: import("@angular/core").InputSignal<boolean>;
+  /** Screen-reader marker put in front of each highlighted block (`highlightChanges`). */
+  readonly changedMarkerLabel: import("@angular/core").InputSignal<string>;
+  /** Announced after the count when one block changed: `1 Abschnitt geändert`. */
+  readonly changedSummaryOneLabel: import("@angular/core").InputSignal<string>;
+  /** Announced after the count when several blocks changed: `3 Abschnitte geändert`. */
+  readonly changedSummaryManyLabel: import("@angular/core").InputSignal<string>;
+  /** Shown while a Mermaid diagram renders. */
+  readonly mermaidLoadingLabel: import("@angular/core").InputSignal<string>;
+  /** Shown above the source when a Mermaid diagram fails. */
+  readonly mermaidErrorLabel: import("@angular/core").InputSignal<string>;
+  /** Shown above the source when the optional `mermaid` package cannot be loaded. */
+  readonly mermaidUnavailableLabel: import("@angular/core").InputSignal<string>;
+  /** Emitted when a link is clicked */
+  readonly linkClick: import("@angular/core").OutputEmitterRef<MarkdownLinkClick>;
+  /** Emitted after rendering with heading TOC */
+  readonly rendered: import("@angular/core").OutputEmitterRef<MarkdownRendered>;
+  /** Emitted after a render that produced change highlights. */
+  readonly changesHighlighted: import("@angular/core").OutputEmitterRef<MarkdownChangesHighlighted>;
+  /** Internal resolved markdown source */
+  protected resolvedMarkdown: import("@angular/core").WritableSignal<string>;
+  /** Parsed result (computed once from resolvedMarkdown) */
+  private parsed;
+  /**
+   * Rendered HTML after applying change highlights. When highlighting is off (or
+   * there is no differing `previousContent`) this returns the parsed HTML
+   * unchanged, so the non-highlight path is byte-for-byte identical to before.
+   */
+  private readonly highlightResult;
+  /** Number of changed/added blocks highlighted in the current render. */
+  protected readonly changedCount: import("@angular/core").Signal<number>;
+  /** Visually-hidden polite summary announced when highlights appear. */
+  protected readonly changeSummary: import("@angular/core").Signal<string>;
+  /** Whether the current highlights have faded out (after `changeHighlightFadeMs`). */
+  protected readonly highlightsFaded: import("@angular/core").WritableSignal<boolean>;
+  /** Computed render parts (HTML chunks + code blocks interleaved) */
+  protected renderParts: import("@angular/core").Signal<RenderPart[]>;
+  /**
+   * The HTML as it may go into the DOM. With `sanitize` on (the default) that is
+   * Angular's HTML sanitizer's output — which drops every `id`, since `id` isn't
+   * on its attribute allow-list. The heading ids are put back afterwards: they
+   * are what anchors and the `rendered` TOC point at, and each is a `[\w-]`
+   * slug this parser produced itself, so re-adding them reopens nothing. The
+   * cursor walks the parsed headings in document order across the parts.
+   */
+  private sanitizeHtml;
+  protected containerClasses: import("@angular/core").Signal<string>;
+  protected mermaidSvgs: import("@angular/core").WritableSignal<Record<number, SafeHtml>>;
+  protected mermaidErrors: import("@angular/core").WritableSignal<Record<number, string>>;
+  private headings;
+  constructor();
+  ngOnDestroy(): void;
+  protected onLinkClick(event: MouseEvent): void;
+  /** Side-effects for a render: emit, (re)arm the fade timer, optional scroll. */
+  private onHighlightResult;
+  private scrollToFirstChanged;
+  /**
+   * Wraps the changed/added top-level blocks of `html` with
+   * `.lc-markdown__block--changed`. A block is "changed" when its normalized
+   * text is not present among the blocks of `prevMarkdown`. Lists are diffed
+   * per `<li>` and tables per `<tr>` so a single edited item highlights alone.
+   */
+  private applyChangeHighlights;
+  /** Normalized text set of the logical blocks within an HTML fragment. */
+  private collectBlockKeys;
+  /**
+   * Visits each diffable block under `root`: top-level elements, but descending
+   * into `<ul>`/`<ol>` (per `<li>`) and `<table>` (per `<tr>`).
+   */
+  private eachLogicalBlock;
+  private blockTextKey;
+  private htmlToElement;
+  private loadFromUrl;
+  private splitIntoParts;
+  private parseMarkdown;
+  private parseTables;
+  /** Splits a pipe-table row into trimmed cells, dropping the leading/trailing edges. */
+  private splitTableRow;
+  private escapeHtml;
+  /**
+   * Linkifies bare URLs (`http(s)://…`, `www.…`) and email addresses in text,
+   * leaving anything inside an existing `<a>` or `<code>` (and all tag
+   * attributes) untouched. The HTML is tokenized into tags vs. text so only
+   * top-level text runs are linkified.
+   */
+  private autolink;
+  protected mermaidSvgFor(index: number): SafeHtml | null;
+  protected mermaidErrorFor(index: number): string | null;
+  private renderMermaidParts;
+  private getMermaidApi;
+  static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<MarkdownComponent, "lc-markdown", never, {
+    "src": {
+      "alias": "src";
+      "required": false;
+      "isSignal": true;
+    };
+    "content": {
+      "alias": "content";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "linkTarget": {
+      "alias": "linkTarget";
+      "required": false;
+      "isSignal": true;
+    };
+    "sanitize": {
+      "alias": "sanitize";
+      "required": false;
+      "isSignal": true;
+    };
+    "syntaxHighlight": {
+      "alias": "syntaxHighlight";
+      "required": false;
+      "isSignal": true;
+    };
+    "showHeadingAnchors": {
+      "alias": "showHeadingAnchors";
+      "required": false;
+      "isSignal": true;
+    };
+    "baseUrl": {
+      "alias": "baseUrl";
+      "required": false;
+      "isSignal": true;
+    };
+    "highlightChanges": {
+      "alias": "highlightChanges";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousContent": {
+      "alias": "previousContent";
+      "required": false;
+      "isSignal": true;
+    };
+    "changeHighlightFadeMs": {
+      "alias": "changeHighlightFadeMs";
+      "required": false;
+      "isSignal": true;
+    };
+    "scrollToFirstChange": {
+      "alias": "scrollToFirstChange";
+      "required": false;
+      "isSignal": true;
+    };
+    "changedMarkerLabel": {
+      "alias": "changedMarkerLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "changedSummaryOneLabel": {
+      "alias": "changedSummaryOneLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "changedSummaryManyLabel": {
+      "alias": "changedSummaryManyLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "mermaidLoadingLabel": {
+      "alias": "mermaidLoadingLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "mermaidErrorLabel": {
+      "alias": "mermaidErrorLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "mermaidUnavailableLabel": {
+      "alias": "mermaidUnavailableLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "linkClick": "linkClick";
+    "rendered": "rendered";
+    "changesHighlighted": "changesHighlighted";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,152 @@
+import * as i0 from "@angular/core";
+import { OnDestroy } from "@angular/core";
+export interface MenuItem {
+  id: string;
+  label: string;
+  icon?: string;
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  variant?: 'default' | 'danger';
+  dividerAfter?: boolean;
+  disabled?: boolean;
+  metadata?: {
+    subtitle?: string;
+    badge?: string;
+  };
+}
+/**
+ * Menu Component - Dropdown menu for navigation and actions
+ *
+ * Features:
+ * - Customizable menu items with icons
+ * - Support for links and buttons
+ * - Dividers between menu sections
+ * - Optional subtitle/metadata for items
+ * - Danger variant for destructive actions
+ * - Click outside to close (top-most overlay only)
+ * - Keyboard navigation: focus moves into the menu on open, Arrow keys /
+ *   Home / End move between items (roving tabindex), Enter / Space activate,
+ *   Escape closes and returns focus to the trigger, Tab closes
+ * - ARIA menu semantics (`aria-haspopup` / `aria-expanded` / `aria-controls`
+ *   on the projected trigger, `role="menu"` / `role="menuitem"` on the panel)
+ * - OnPush change detection for performance
+ *
+ * @example
+ * ```html
+ * <lc-menu
+ *   [items]="menuItems"
+ *   [isOpen]="isMenuOpen"
+ *   (itemClick)="handleMenuClick($event)"
+ *   (closed)="isMenuOpen = false"
+ * >
+ *   <button trigger>Open Menu</button>
+ *   <div header>User Profile</div>
+ * </lc-menu>
+ * ```
+ */
+export declare class MenuComponent implements OnDestroy {
+  private static nextId;
+  /** Identifies this instance in the overlay stack. */
+  private readonly menuId;
+  readonly items: import("@angular/core").InputSignal<MenuItem[]>;
+  readonly isOpen: import("@angular/core").InputSignal<boolean>;
+  readonly position: import("@angular/core").InputSignal<"bottom-left" | "bottom-right" | "top-left" | "top-right">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+  readonly minWidth: import("@angular/core").InputSignal<string>;
+  /**
+   * Maximum width of the panel (any CSS width, e.g. `min(18rem, calc(100vw - 2rem))`).
+   * Empty leaves it unbounded. Long item labels and header lines wrap within it.
+   */
+  readonly maxWidth: import("@angular/core").InputSignal<string>;
+  readonly itemClick: import("@angular/core").OutputEmitterRef<MenuItem>;
+  readonly closed: import("@angular/core").OutputEmitterRef<void>;
+  /** Id of the `role="menu"` element, referenced by the trigger's `aria-controls`. */
+  protected readonly panelId: string;
+  /** Index (into `items()`) of the item that currently owns the roving tabindex. */
+  protected readonly activeIndex: import("@angular/core").WritableSignal<number>;
+  private readonly itemElements;
+  private readonly elementRef;
+  private readonly renderer;
+  private readonly injector;
+  private readonly overlayStack;
+  constructor();
+  ngOnDestroy(): void;
+  /**
+   * Handle menu item click
+   */
+  onItemClick(item: MenuItem, event: Event): void;
+  /**
+   * Close the menu
+   */
+  close(): void;
+  /**
+   * Handle click outside to close menu — only while the menu is the top-most
+   * overlay, so a click inside a layer above it (a modal opened from a menu
+   * item) is left alone.
+   */
+  onDocumentClick(event: MouseEvent): void;
+  /**
+   * Escape closes the menu (top-most overlay only) and returns focus to the
+   * trigger; the event is consumed so overlays underneath stay open.
+   */
+  onEscapeKey(event: Event): void;
+  /** Keyboard navigation inside the `role="menu"` panel. */
+  protected onPanelKeydown(event: KeyboardEvent): void;
+  /** Roving tabindex: only the active item is in the tab sequence. */
+  protected tabindexFor(index: number, item: MenuItem): number;
+  private focusIndex;
+  private focusActiveItem;
+  private firstEnabledIndex;
+  /** Index of the next enabled item in `direction`, wrapping around; -1 if none. */
+  private nextEnabledIndex;
+  /**
+   * The element that carries the menu-button ARIA attributes and receives
+   * focus back: the projected `[trigger]` node itself when it is natively
+   * interactive, otherwise the first interactive element inside it (e.g. the
+   * `<button>` inside an `<lc-button trigger>`).
+   */
+  private triggerElement;
+  /**
+   * Closing removes the panel from the DOM; if focus is inside it (an item was
+   * activated by keyboard) it would silently drop to `<body>`, so send it back
+   * to the trigger.
+   */
+  private restoreFocus;
+  static ɵfac: i0.ɵɵFactoryDeclaration<MenuComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<MenuComponent, "lc-menu", never, {
+    "items": {
+      "alias": "items";
+      "required": false;
+      "isSignal": true;
+    };
+    "isOpen": {
+      "alias": "isOpen";
+      "required": false;
+      "isSignal": true;
+    };
+    "position": {
+      "alias": "position";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "minWidth": {
+      "alias": "minWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxWidth": {
+      "alias": "maxWidth";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "itemClick": "itemClick";
+    "closed": "closed";
+  }, never, ["[trigger]", "[header]", "[footer]"], true, never>;
+}

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

@@ -0,0 +1,207 @@
+import * as i0 from "@angular/core";
+import { OnDestroy } from "@angular/core";
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Where the dialog sits.
+ * - `center`: centred on every screen (3.2)
+ * - `auto`: a bottom sheet below 640 px viewport width (full width, top
+ *   corners rounded, above the safe-area inset, in thumb reach), centred above
+ * - `sheet`: a bottom sheet on every screen
+ */
+export type ModalPlacement = 'center' | 'auto' | 'sheet';
+/**
+ * Modal dialog component for focused user interactions.
+ *
+ * Features:
+ * - Size presets (sm, md, lg, xl, full)
+ * - Placement: centred, or a bottom sheet on phones (`placement="auto"`)
+ * - Header and footer stay visible while the body scrolls; the close button
+ *   is a 44 px target
+ * - Focus trap for keyboard accessibility
+ * - Backdrop click and Escape key to close
+ * - Two-way open binding
+ * - Header, body, and footer content slots
+ * - Optional close button
+ * - Accessible with ARIA dialog role
+ *
+ * @example
+ * ```html
+ * <lc-modal [(open)]="isOpen" size="md" [closeOnBackdropClick]="true">
+ *   <div slot="header"><h2>Title</h2></div>
+ *   <div slot="body">Content</div>
+ *   <div slot="footer"><lc-button (click)="close()">Close</lc-button></div>
+ * </lc-modal>
+ * ```
+ */
+export declare class ModalComponent implements OnDestroy {
+  private static nextId;
+  /**
+   * Whether the modal is open (input from parent)
+   * @default false
+   */
+  open: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Modal size
+   * @default 'md'
+   */
+  size: import("@angular/core").InputSignal<ModalSize>;
+  /**
+   * Where the dialog sits: `center` (3.2), `auto` — a bottom sheet below
+   * 640 px viewport width and centred above — or `sheet` (always a bottom
+   * sheet). The sheet spans the width, rounds its top corners, keeps clear of
+   * `env(safe-area-inset-bottom)` and is at most 90 % of the dynamic viewport
+   * high; header and footer stay visible while the body scrolls. `full`
+   * size ignores it.
+   * @default 'center'
+   */
+  placement: import("@angular/core").InputSignal<ModalPlacement>;
+  /**
+   * Whether clicking backdrop closes modal
+   * @default true
+   */
+  closeOnBackdropClick: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether pressing Escape closes modal
+   * @default true
+   */
+  closeOnEscape: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether to show close button in header
+   * @default true
+   */
+  showCloseButton: import("@angular/core").InputSignal<boolean>;
+  /**
+   * ARIA label for accessibility
+   */
+  ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * ARIA labelledby ID
+   */
+  ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * ARIA describedby ID
+   */
+  ariaDescribedBy: import("@angular/core").InputSignal<string | undefined>;
+  /** Accessible name of the close button (`showCloseButton`). */
+  closeAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Emitted when modal opens
+   */
+  readonly modalOpened: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Emitted when modal closes
+   */
+  readonly modalClosed: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Two-way binding for open state
+   */
+  readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
+  /**
+   * Emitted when backdrop is clicked
+   */
+  readonly backdropClicked: import("@angular/core").OutputEmitterRef<MouseEvent>;
+  /**
+   * Internal open state (protected for AOT); follows the `open` input and is
+   * also set by the programmatic open/close methods.
+   */
+  protected _open: import("@angular/core").WritableSignal<boolean>;
+  /**
+   * Computed modal classes
+   */
+  protected modalClasses: import("@angular/core").Signal<string>;
+  private readonly overlayStack;
+  /** Identifies this instance in the overlay stack. */
+  private readonly modalId;
+  private originalOverflow?;
+  constructor();
+  ngOnDestroy(): void;
+  /**
+   * Open the modal programmatically
+   */
+  openModal(): void;
+  /**
+   * Close the modal programmatically
+   */
+  closeModal(): void;
+  /**
+   * Handle backdrop click. Ignored while another overlay (popover, menu,
+   * confirm dialog, …) sits above this modal — the click belongs to that layer.
+   */
+  protected onBackdropClick(event: MouseEvent): void;
+  /**
+   * Handle close button click
+   */
+  protected onCloseClick(event: Event): void;
+  /**
+   * Escape closes the modal only while it is the top-most overlay; the event
+   * is consumed either way so overlays underneath stay open.
+   */
+  protected onDocumentKeydown(event: KeyboardEvent): void;
+  /**
+   * Show the modal. Focus is moved inside and restored on close by the
+   * template's `cdkTrapFocus` / `cdkTrapFocusAutoCapture`.
+   */
+  private showModal;
+  /**
+   * Hide the modal
+   */
+  private hideModal;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "lc-modal", never, {
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "placement": {
+      "alias": "placement";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeOnBackdropClick": {
+      "alias": "closeOnBackdropClick";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeOnEscape": {
+      "alias": "closeOnEscape";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCloseButton": {
+      "alias": "showCloseButton";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledBy": {
+      "alias": "ariaLabelledBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaDescribedBy": {
+      "alias": "ariaDescribedBy";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeAriaLabel": {
+      "alias": "closeAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "modalOpened": "modalOpened";
+    "modalClosed": "modalClosed";
+    "openChange": "openChange";
+    "backdropClicked": "backdropClicked";
+  }, never, ["[slot='header']", "[slot='body']", "*", "[slot='footer']"], true, never>;
+}