@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,213 @@
+import * as i0 from "@angular/core";
+/** Visual variant of `lc-card`. */
+export type CardVariant = 'elevated' | 'outlined' | 'flat' | 'raised' | 'dashed';
+/** Heading level of `lc-card`'s built-in title. */
+export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Card component for content grouping and visual hierarchy.
+ *
+ * Features:
+ * - Variant styles (elevated, outlined, flat, raised, dashed)
+ * - Configurable padding (none, xs, sm, md, lg)
+ * - Border radius options (none, sm, md, lg, xl, full)
+ * - Optional title display, with an optional leading icon tile
+ * - Content projection for flexible body content
+ *
+ * @example
+ * ```html
+ * <lc-card title="Card Title" variant="elevated" padding="md">
+ *   <p>Card body content</p>
+ * </lc-card>
+ *
+ * <!-- With a leading brand-tile icon in the header -->
+ * <lc-card title="Repository" subtitle="Checkout &amp; profile" icon="git-branch">
+ *   ...
+ * </lc-card>
+ * ```
+ */
+export declare class CardComponent {
+  /**
+   * Optional title rendered as a styled header.
+   * For complex headers (e.g. title + action button), use content projection instead.
+   */
+  title: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Optional subtitle rendered below the title.
+   */
+  subtitle: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Optional leading icon (Tabler icon name) rendered as a teal brand tile to
+   * the left of the title. Only shown when `title` is set.
+   */
+  icon: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Visual treatment of the leading icon tile.
+   * - brand: gradient teal tile with light ink (default)
+   * - subtle: translucent surface tile with brand-teal ink
+   * @default 'brand'
+   */
+  iconVariant: import("@angular/core").InputSignal<"brand" | "subtle">;
+  /**
+   * Size of the leading icon tile.
+   * - md: 2.25rem tile (default)
+   * - sm: compact ~1.75rem chip for dense card headers
+   * @default 'md'
+   */
+  iconSize: import("@angular/core").InputSignal<"sm" | "md">;
+  /**
+   * Optional badge text/count shown next to the title (e.g. item count).
+   * For a richer status badge (e.g. a leading status dot), project an
+   * `lc-badge` into the `card-badge` slot instead — the slot takes precedence.
+   */
+  badge: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Badge color variant.
+   * @default 'default'
+   */
+  badgeVariant: import("@angular/core").InputSignal<"default" | "primary" | "success" | "warning" | "error">;
+  /**
+   * Visual variant of the card
+   * - elevated: Box shadow (default)
+   * - outlined: Border only (the hairline `--color-border`, no shadow) — the
+   *   content card on the "Weite" sky with `borderRadius="xl"`
+   * - flat: No shadow or border
+   * - raised: plain surface, hairline border and the long, soft
+   *   `--shadow-auth-card`, no accent line — the sign-in card
+   * - dashed: the muted "coming soon" tile — `--color-muted-tile` fill, 1 px
+   *   dashed `--color-muted-tile-border`, secondary ink, icons in
+   *   `--color-muted-tile-icon`. Never clickable: `clickable` is ignored
+   * @default 'elevated'
+   */
+  variant: import("@angular/core").InputSignal<CardVariant>;
+  /**
+   * Padding inside the card
+   * @default 'md'
+   */
+  padding: import("@angular/core").InputSignal<"sm" | "md" | "none" | "xs" | "lg">;
+  /**
+   * Whether the card is clickable (hover effects, cursor pointer)
+   * @default false
+   */
+  clickable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the card is selected (if clickable)
+   * @default false
+   */
+  selected: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Border radius size: `none`, `sm`, `md`, `lg` (18 px), `xl` (24 px, the
+   * "Weite" content card) or `full`.
+   * @default 'md'
+   */
+  borderRadius: import("@angular/core").InputSignal<"sm" | "md" | "none" | "lg" | "xl" | "full">;
+  /**
+   * Heading level of the built-in `title` (`h2`–`h6`), so the card fits the
+   * page's outline. Semantics only, the look stays the same.
+   * @default 3
+   */
+  headingLevel: import("@angular/core").InputSignal<CardHeadingLevel>;
+  /**
+   * ARIA label for accessibility
+   */
+  ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Emitted when card is clicked (if clickable)
+   */
+  readonly cardClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
+  /**
+   * Whether the card acts as a button: `clickable`, except for the dashed
+   * "coming soon" tile, which is never interactive.
+   */
+  protected isClickable: import("@angular/core").Signal<boolean>;
+  /**
+   * Compute card CSS classes based on inputs
+   */
+  protected cardClasses: import("@angular/core").Signal<string>;
+  /**
+   * Compute ARIA role based on clickable state
+   */
+  protected role: import("@angular/core").Signal<"button" | "article">;
+  /**
+   * Handle card click events
+   */
+  protected handleClick(event: MouseEvent): void;
+  /**
+   * Handle keyboard events for accessibility
+   */
+  protected handleKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "lc-card", never, {
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "subtitle": {
+      "alias": "subtitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconVariant": {
+      "alias": "iconVariant";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconSize": {
+      "alias": "iconSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "badge": {
+      "alias": "badge";
+      "required": false;
+      "isSignal": true;
+    };
+    "badgeVariant": {
+      "alias": "badgeVariant";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "padding": {
+      "alias": "padding";
+      "required": false;
+      "isSignal": true;
+    };
+    "clickable": {
+      "alias": "clickable";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "borderRadius": {
+      "alias": "borderRadius";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "cardClick": "cardClick";
+  }, never, ["[card-badge]", "[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;
+}

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

@@ -0,0 +1,379 @@
+import * as i0 from "@angular/core";
+import { TemplateRef } from "@angular/core";
+export type ChatMessageRole = 'user' | 'agent' | 'system';
+/**
+ * Semantic status of a chat message — orthogonal to `role` (role = *who*
+ * speaks; status = *what kind* of message). Reuses the semantic vocabulary of
+ * `lc-alert` / `lc-callout` and drives the rail dot/accent colour + a status
+ * icon. `'default'` (or omitted) reproduces the role-coloured behaviour exactly.
+ */
+export type ChatMessageStatus = 'default' | 'info' | 'success' | 'warning' | 'error';
+/**
+ * Controls which messages are rendered as Markdown via `<lc-markdown>`.
+ * - `false` (default): plain text rendering (legacy behavior)
+ * - `true` / `'all'`: render every role as Markdown
+ * - `'agent'`: only agent messages are rendered as Markdown (recommended)
+ */
+export type ChatRenderMarkdown = boolean | 'agent' | 'all';
+/**
+ * Represents a file attached to a chat message or pending in the input.
+ *
+ * The `file` reference is only available for attachments produced by the
+ * input (i.e. emitted via `messageSend` / `fileAttach`). Attachments
+ * coming from the server or message history typically rely on `url` only.
+ */
+export interface ChatAttachment {
+  id: string;
+  name: string;
+  /** MIME type, e.g. `image/png`, `application/pdf`. */
+  type?: string;
+  /** Size in bytes. */
+  size?: number;
+  /** Object URL or remote URL to preview / download the file. */
+  url?: string;
+  /** Raw browser File reference (set for newly uploaded files). */
+  file?: File;
+}
+export interface ChatMessage {
+  id: string;
+  role: ChatMessageRole;
+  content: string;
+  timestamp?: Date | string;
+  avatar?: string;
+  name?: string;
+  streaming?: boolean;
+  /**
+   * Semantic status — colours the rail dot/accent and shows a status icon.
+   * Independent of `role`: a `role: 'agent'` message can be `status: 'error'`
+   * (failed reply) or `status: 'success'` (tool finished). Defaults to
+   * `'default'`, which reproduces today's role-coloured behaviour exactly.
+   * An `'error'` message never pulses and is announced assertively (`role="alert"`).
+   */
+  status?: ChatMessageStatus;
+  /** Optional file attachments associated with the message. */
+  attachments?: ChatAttachment[];
+  /** Arbitrary data passed to a custom messageTemplate. */
+  data?: Record<string, unknown>;
+}
+export interface ChatSendEvent {
+  content: string;
+  /** Files attached to the outgoing message, if any. */
+  attachments?: ChatAttachment[];
+}
+export interface ChatFileAttachEvent {
+  attachments: ChatAttachment[];
+  /** Files rejected because of `accept` / `maxFileSize` constraints. */
+  rejected: {
+    file: File;
+    reason: 'type' | 'size';
+  }[];
+}
+export declare class ChatComponent {
+  private static nextId;
+  /** Id of the composer textarea (links the visually-hidden label). */
+  protected readonly inputId: string;
+  /** Messages to display. */
+  messages: import("@angular/core").InputSignal<ChatMessage[]>;
+  /** Placeholder text for the input. */
+  placeholder: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the composer textarea (visually hidden label). */
+  inputLabel: import("@angular/core").InputSignal<string>;
+  /** Title displayed in the header. */
+  title: import("@angular/core").InputSignal<string>;
+  /** Whether the agent is currently streaming / typing. */
+  isStreaming: import("@angular/core").InputSignal<boolean>;
+  /** Show the header bar. */
+  showHeader: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Draw the chat's own border + rounded corners. Defaults to `true` (card
+   * style). Set `false` to render flush/edge-to-edge — e.g. when the chat is
+   * the full-height body of an `<lc-page-layout>` and should sit directly under
+   * a page header without a nested box.
+   */
+  bordered: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Where messages stack when they don't fill the height.
+   * - `'top'` (default): messages grow from the top down.
+   * - `'bottom'`: messages anchor to the bottom (empty space above), like most
+   *   messaging apps. Still scrolls to reveal the top once they overflow.
+   */
+  messageAnchor: import("@angular/core").InputSignal<"top" | "bottom">;
+  /**
+   * Width of the message thread and composer.
+   * - `'full'` (default): messages span the full available width.
+   * - `'narrow'`: a centered, readable column (~46rem) like a document-style chat.
+   */
+  contentWidth: import("@angular/core").InputSignal<"narrow" | "full">;
+  /** Disable the input. */
+  disabled: import("@angular/core").InputSignal<boolean>;
+  /** Show avatars next to messages. */
+  showAvatars: import("@angular/core").InputSignal<boolean>;
+  /** Show timestamps. */
+  showTimestamps: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Render message content as Markdown using `<lc-markdown variant="chat">`.
+   * Defaults to `'agent'` so agent replies get rich formatting while user
+   * input stays as plain text. Pass `false` to opt out, or `true`/`'all'`
+   * to render every role as Markdown.
+   */
+  renderMarkdown: import("@angular/core").InputSignal<ChatRenderMarkdown>;
+  /** Enable the file-upload (paperclip) button in the input area. */
+  allowFileUpload: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Comma-separated list of accepted file types, forwarded to the native
+   * `<input accept>` attribute. Examples: `image/*`, `.pdf,.docx`.
+   */
+  accept: import("@angular/core").InputSignal<string>;
+  /** Allow selecting multiple files at once. Defaults to `true`. */
+  multiple: import("@angular/core").InputSignal<boolean>;
+  /** Maximum file size in bytes. `0` disables the check. */
+  maxFileSize: import("@angular/core").InputSignal<number>;
+  /** BCP 47 locale of the message times (hour and minute). */
+  locale: import("@angular/core").InputSignal<string>;
+  /** Header badge while a message is streaming. */
+  streamingLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the attach button (`allowFileUpload`). */
+  attachAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the send button. */
+  sendAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Screen-reader prefix of messages with status `info`. */
+  statusInfoLabel: import("@angular/core").InputSignal<string>;
+  /** Screen-reader prefix of messages with status `success`. */
+  statusSuccessLabel: import("@angular/core").InputSignal<string>;
+  /** Screen-reader prefix of messages with status `warning`. */
+  statusWarningLabel: import("@angular/core").InputSignal<string>;
+  /** Screen-reader prefix of messages with status `error`. */
+  statusErrorLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name prefix of a pending attachment's remove button, followed by the file name. */
+  removeAttachmentAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Emits when user sends a message. */
+  messageSend: import("@angular/core").OutputEmitterRef<ChatSendEvent>;
+  /** Emits whenever files are added to the pending attachments list. */
+  fileAttach: import("@angular/core").OutputEmitterRef<ChatFileAttachEvent>;
+  /** Custom template for rendering message content. Context: { $implicit: ChatMessage } */
+  messageTemplate?: TemplateRef<{
+    $implicit: ChatMessage;
+  }>;
+  protected readonly inputValue: import("@angular/core").WritableSignal<string>;
+  protected readonly pendingAttachments: import("@angular/core").WritableSignal<ChatAttachment[]>;
+  private attachmentCounter;
+  private readonly injector;
+  private readonly destroyRef;
+  private readonly ngZone;
+  /**
+   * Whether the reader is (near) the bottom of the thread. Auto-scroll only
+   * follows new content while this is true, so scrolling up to re-read is
+   * never fought. Plain field: updated from a passive scroll listener outside
+   * the zone, read untracked by the follow effect.
+   */
+  private atBottom;
+  /** Distance from the bottom (px) still counted as "at the bottom". */
+  private static readonly AT_BOTTOM_THRESHOLD;
+  private readonly scrollContainer;
+  private fileInput?;
+  private composerInput?;
+  /** Upper bound for the auto-growing composer before it starts scrolling (px). */
+  private static readonly INPUT_MAX_HEIGHT;
+  protected readonly formattedMessages: import("@angular/core").Signal<{
+    timestamp: Date | undefined;
+    id: string;
+    role: ChatMessageRole;
+    content: string;
+    avatar?: string;
+    name?: string;
+    streaming?: boolean;
+    /**
+     * Semantic status — colours the rail dot/accent and shows a status icon.
+     * Independent of `role`: a `role: 'agent'` message can be `status: 'error'`
+     * (failed reply) or `status: 'success'` (tool finished). Defaults to
+     * `'default'`, which reproduces today's role-coloured behaviour exactly.
+     * An `'error'` message never pulses and is announced assertively (`role="alert"`).
+     */
+    status?: ChatMessageStatus;
+    /** Optional file attachments associated with the message. */
+    attachments?: ChatAttachment[];
+    /** Arbitrary data passed to a custom messageTemplate. */
+    data?: Record<string, unknown>;
+  }[]>;
+  /**
+   * Text for the visually-hidden live region: the most recent *completed*
+   * non-user message. Streaming turns are announced once they finish (a
+   * token-by-token live region would be unusable); user turns were typed by
+   * the reader; semantic-status messages carry their own `aria-live`/`alert`.
+   */
+  protected readonly announcement: import("@angular/core").Signal<string>;
+  constructor();
+  protected onInput(event: Event): void;
+  /** Resize the textarea to fit its content so the composer hugs the text. */
+  private autoGrow;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected send(): void;
+  protected openFilePicker(): void;
+  protected onFilesSelected(event: Event): void;
+  protected removeAttachment(id: string): void;
+  protected formatBytes(size: number | undefined): string;
+  protected isImage(att: ChatAttachment): boolean;
+  private addFiles;
+  private matchesAccept;
+  protected formatTime(date: Date | undefined): string;
+  /**
+   * Up to two uppercase initials from a name (first + last word), used for the
+   * user avatar monogram when no `avatar` image is provided. Returns `''` for an
+   * empty/whitespace name so the caller can skip rendering.
+   */
+  protected initials(name: string | undefined): string;
+  /**
+   * Whether to show an avatar on a user turn: only when avatars are enabled and
+   * the message carries either an image or a name we can build a monogram from.
+   * Keeps the labelless bubble clean when there's nothing to show.
+   */
+  protected showUserAvatar(msg: ChatMessage): boolean;
+  protected shouldRenderMarkdown(role: ChatMessageRole): boolean;
+  /** Whether a message carries a semantic (non-`default`) status. */
+  protected isSemanticStatus(status: ChatMessageStatus | undefined): boolean;
+  /** Rail icon for a semantic status — reuses the `lc-alert` icon names. */
+  protected statusIcon(status: ChatMessageStatus | undefined): string;
+  /** Semantic token colour for a status dot/icon. */
+  protected statusColor(status: ChatMessageStatus | undefined): string;
+  /** Visually-hidden prefix so colour/icon is never the only signal. */
+  protected statusLabel(status: ChatMessageStatus | undefined): string;
+  /** ARIA live priority: assertive for `error`, polite for other statuses. */
+  protected statusAriaLive(status: ChatMessageStatus | undefined): 'assertive' | 'polite' | null;
+  private scrollToBottom;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ChatComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ChatComponent, "lc-chat", never, {
+    "messages": {
+      "alias": "messages";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputLabel": {
+      "alias": "inputLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "isStreaming": {
+      "alias": "isStreaming";
+      "required": false;
+      "isSignal": true;
+    };
+    "showHeader": {
+      "alias": "showHeader";
+      "required": false;
+      "isSignal": true;
+    };
+    "bordered": {
+      "alias": "bordered";
+      "required": false;
+      "isSignal": true;
+    };
+    "messageAnchor": {
+      "alias": "messageAnchor";
+      "required": false;
+      "isSignal": true;
+    };
+    "contentWidth": {
+      "alias": "contentWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "showAvatars": {
+      "alias": "showAvatars";
+      "required": false;
+      "isSignal": true;
+    };
+    "showTimestamps": {
+      "alias": "showTimestamps";
+      "required": false;
+      "isSignal": true;
+    };
+    "renderMarkdown": {
+      "alias": "renderMarkdown";
+      "required": false;
+      "isSignal": true;
+    };
+    "allowFileUpload": {
+      "alias": "allowFileUpload";
+      "required": false;
+      "isSignal": true;
+    };
+    "accept": {
+      "alias": "accept";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiple": {
+      "alias": "multiple";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxFileSize": {
+      "alias": "maxFileSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "streamingLabel": {
+      "alias": "streamingLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "attachAriaLabel": {
+      "alias": "attachAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "sendAriaLabel": {
+      "alias": "sendAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "statusInfoLabel": {
+      "alias": "statusInfoLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "statusSuccessLabel": {
+      "alias": "statusSuccessLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "statusWarningLabel": {
+      "alias": "statusWarningLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "statusErrorLabel": {
+      "alias": "statusErrorLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "removeAttachmentAriaLabel": {
+      "alias": "removeAttachmentAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "messageSend": "messageSend";
+    "fileAttach": "fileAttach";
+  }, ["messageTemplate"], never, true, never>;
+}