@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-chat.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-chat.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/chat/chat.component.ts","../../../../libs/angular-ui-kit/src/lib/chat/chat.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  Injector,\n  NgZone,\n  TemplateRef,\n  ContentChild,\n  ViewChild,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MarkdownComponent } from '@lifecorner/angular-ui-kit/markdown';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\nexport type ChatMessageRole = 'user' | 'agent' | 'system';\n\n/**\n * Semantic status of a chat message — orthogonal to `role` (role = *who*\n * speaks; status = *what kind* of message). Reuses the semantic vocabulary of\n * `lc-alert` / `lc-callout` and drives the rail dot/accent colour + a status\n * icon. `'default'` (or omitted) reproduces the role-coloured behaviour exactly.\n */\nexport type ChatMessageStatus = 'default' | 'info' | 'success' | 'warning' | 'error';\n\n/**\n * Controls which messages are rendered as Markdown via `<lc-markdown>`.\n * - `false` (default): plain text rendering (legacy behavior)\n * - `true` / `'all'`: render every role as Markdown\n * - `'agent'`: only agent messages are rendered as Markdown (recommended)\n */\nexport type ChatRenderMarkdown = boolean | 'agent' | 'all';\n\n/**\n * Represents a file attached to a chat message or pending in the input.\n *\n * The `file` reference is only available for attachments produced by the\n * input (i.e. emitted via `messageSend` / `fileAttach`). Attachments\n * coming from the server or message history typically rely on `url` only.\n */\nexport interface ChatAttachment {\n  id: string;\n  name: string;\n  /** MIME type, e.g. `image/png`, `application/pdf`. */\n  type?: string;\n  /** Size in bytes. */\n  size?: number;\n  /** Object URL or remote URL to preview / download the file. */\n  url?: string;\n  /** Raw browser File reference (set for newly uploaded files). */\n  file?: File;\n}\n\nexport interface ChatMessage {\n  id: string;\n  role: ChatMessageRole;\n  content: string;\n  timestamp?: Date | string;\n  avatar?: string;\n  name?: string;\n  streaming?: boolean;\n  /**\n   * Semantic status — colours the rail dot/accent and shows a status icon.\n   * Independent of `role`: a `role: 'agent'` message can be `status: 'error'`\n   * (failed reply) or `status: 'success'` (tool finished). Defaults to\n   * `'default'`, which reproduces today's role-coloured behaviour exactly.\n   * An `'error'` message never pulses and is announced assertively (`role=\"alert\"`).\n   */\n  status?: ChatMessageStatus;\n  /** Optional file attachments associated with the message. */\n  attachments?: ChatAttachment[];\n  /** Arbitrary data passed to a custom messageTemplate. */\n  data?: Record<string, unknown>;\n}\n\nexport interface ChatSendEvent {\n  content: string;\n  /** Files attached to the outgoing message, if any. */\n  attachments?: ChatAttachment[];\n}\n\nexport interface ChatFileAttachEvent {\n  attachments: ChatAttachment[];\n  /** Files rejected because of `accept` / `maxFileSize` constraints. */\n  rejected: { file: File; reason: 'type' | 'size' }[];\n}\n\n@Component({\n  selector: 'lc-chat',\n  standalone: true,\n  imports: [NgTemplateOutlet, MarkdownComponent, IconComponent],\n  templateUrl: './chat.component.html',\n  styleUrls: ['./chat.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Chat component for conversational user interfaces.\n *\n * Compact, document-style layout: agent/system turns flow as full-width text on\n * a left timeline rail, while user turns render as right-aligned, accent-tinted\n * bubbles (no name label) with the timestamp on a muted line beneath. Spacing is\n * a single space-efficient scale (tunable via the `--lc-chat-*` custom\n * properties); there is no separate roomy variant.\n *\n * Features:\n * - User, agent, and system message roles\n * - Right-aligned user bubbles with an optional avatar: `msg.avatar` image, or a\n *   monogram built from `msg.name` initials (gated by `showAvatars`)\n * - Agent/system turns on a left rail with a status dot, avatar or semantic icon\n * - Streaming cursor indicator for AI responses\n * - Typing indicator with animated dots\n * - Auto-scroll to the latest message (new turns, streamed tokens, history\n *   loads) — only while the reader is at the bottom; scrolling up pauses it\n * - Optional avatars and timestamps\n * - Configurable header with title\n * - Send on Enter with Shift+Enter for newline\n * - Optional file upload (`allowFileUpload`) with `accept`/`maxFileSize`\n *   constraints, preview chips, and image/file thumbnails inside messages.\n *\n * @example Basic\n * ```html\n * <lc-chat [messages]=\"messages\" title=\"Support\" (messageSend)=\"onSend($event)\" />\n * ```\n *\n * @example With file upload\n * ```html\n * <lc-chat\n *   [messages]=\"messages\"\n *   [allowFileUpload]=\"true\"\n *   accept=\"image/*,.pdf\"\n *   [maxFileSize]=\"5 * 1024 * 1024\"\n *   (messageSend)=\"onSend($event)\"\n *   (fileAttach)=\"onAttach($event)\" />\n * ```\n */\nexport class ChatComponent {\n  private static nextId = 0;\n  /** Id of the composer textarea (links the visually-hidden label). */\n  protected readonly inputId = `lc-chat-input-${++ChatComponent.nextId}`;\n\n  /** Messages to display. */\n  messages = input<ChatMessage[]>([]);\n\n  /** Placeholder text for the input. */\n  placeholder = input<string>('Nachricht eingeben…');\n\n  /** Accessible name of the composer textarea (visually hidden label). */\n  inputLabel = input<string>('Nachricht');\n\n  /** Title displayed in the header. */\n  title = input<string>('Chat');\n\n  /** Whether the agent is currently streaming / typing. */\n  isStreaming = input<boolean>(false);\n\n  /** Show the header bar. */\n  showHeader = input<boolean>(true);\n\n  /**\n   * Draw the chat's own border + rounded corners. Defaults to `true` (card\n   * style). Set `false` to render flush/edge-to-edge — e.g. when the chat is\n   * the full-height body of an `<lc-page-layout>` and should sit directly under\n   * a page header without a nested box.\n   */\n  bordered = input<boolean>(true);\n\n  /**\n   * Where messages stack when they don't fill the height.\n   * - `'top'` (default): messages grow from the top down.\n   * - `'bottom'`: messages anchor to the bottom (empty space above), like most\n   *   messaging apps. Still scrolls to reveal the top once they overflow.\n   */\n  messageAnchor = input<'top' | 'bottom'>('top');\n\n  /**\n   * Width of the message thread and composer.\n   * - `'full'` (default): messages span the full available width.\n   * - `'narrow'`: a centered, readable column (~46rem) like a document-style chat.\n   */\n  contentWidth = input<'narrow' | 'full'>('full');\n\n  /** Disable the input. */\n  disabled = input<boolean>(false);\n\n  /** Show avatars next to messages. */\n  showAvatars = input<boolean>(true);\n\n  /** Show timestamps. */\n  showTimestamps = input<boolean>(true);\n\n  /**\n   * Render message content as Markdown using `<lc-markdown variant=\"chat\">`.\n   * Defaults to `'agent'` so agent replies get rich formatting while user\n   * input stays as plain text. Pass `false` to opt out, or `true`/`'all'`\n   * to render every role as Markdown.\n   */\n  renderMarkdown = input<ChatRenderMarkdown>('agent');\n\n  /** Enable the file-upload (paperclip) button in the input area. */\n  allowFileUpload = input<boolean>(false);\n\n  /**\n   * Comma-separated list of accepted file types, forwarded to the native\n   * `<input accept>` attribute. Examples: `image/*`, `.pdf,.docx`.\n   */\n  accept = input<string>('');\n\n  /** Allow selecting multiple files at once. Defaults to `true`. */\n  multiple = input<boolean>(true);\n\n  /** Maximum file size in bytes. `0` disables the check. */\n  maxFileSize = input<number>(0);\n\n  /** BCP 47 locale of the message times (hour and minute). */\n  locale = input('de-DE');\n\n  /** Header badge while a message is streaming. */\n  streamingLabel = input('Streaming…');\n\n  /** Accessible name of the attach button (`allowFileUpload`). */\n  attachAriaLabel = input('Datei anhängen');\n\n  /** Accessible name of the send button. */\n  sendAriaLabel = input('Send');\n\n  /** Screen-reader prefix of messages with status `info`. */\n  statusInfoLabel = input('Info:');\n\n  /** Screen-reader prefix of messages with status `success`. */\n  statusSuccessLabel = input('Erfolg:');\n\n  /** Screen-reader prefix of messages with status `warning`. */\n  statusWarningLabel = input('Warnung:');\n\n  /** Screen-reader prefix of messages with status `error`. */\n  statusErrorLabel = input('Fehler:');\n\n  /** Accessible name prefix of a pending attachment's remove button, followed by the file name. */\n  removeAttachmentAriaLabel = input('Entfernen:');\n\n  /** Emits when user sends a message. */\n  messageSend = output<ChatSendEvent>();\n\n  /** Emits whenever files are added to the pending attachments list. */\n  fileAttach = output<ChatFileAttachEvent>();\n\n  /** Custom template for rendering message content. Context: { $implicit: ChatMessage } */\n  @ContentChild('messageTemplate') messageTemplate?: TemplateRef<{ $implicit: ChatMessage }>;\n\n  protected readonly inputValue = signal('');\n  protected readonly pendingAttachments = signal<ChatAttachment[]>([]);\n  private attachmentCounter = 0;\n\n  private readonly injector = inject(Injector);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly ngZone = inject(NgZone);\n\n  /**\n   * Whether the reader is (near) the bottom of the thread. Auto-scroll only\n   * follows new content while this is true, so scrolling up to re-read is\n   * never fought. Plain field: updated from a passive scroll listener outside\n   * the zone, read untracked by the follow effect.\n   */\n  private atBottom = true;\n\n  /** Distance from the bottom (px) still counted as \"at the bottom\". */\n  private static readonly AT_BOTTOM_THRESHOLD = 32;\n\n  private readonly scrollContainer = viewChild.required<ElementRef<HTMLDivElement>>('scrollContainer');\n  @ViewChild('fileInput') private fileInput?: ElementRef<HTMLInputElement>;\n  @ViewChild('composerInput') private composerInput?: ElementRef<HTMLTextAreaElement>;\n\n  /** Upper bound for the auto-growing composer before it starts scrolling (px). */\n  private static readonly INPUT_MAX_HEIGHT = 192;\n\n  protected readonly formattedMessages = computed(() =>\n    this.messages().map(m => ({\n      ...m,\n      timestamp: m.timestamp instanceof Date ? m.timestamp : m.timestamp ? new Date(m.timestamp) : undefined,\n    }))\n  );\n\n  /**\n   * Text for the visually-hidden live region: the most recent *completed*\n   * non-user message. Streaming turns are announced once they finish (a\n   * token-by-token live region would be unusable); user turns were typed by\n   * the reader; semantic-status messages carry their own `aria-live`/`alert`.\n   */\n  protected readonly announcement = computed(() => {\n    const msgs = this.messages();\n    for (let i = msgs.length - 1; i >= 0; i--) {\n      const m = msgs[i];\n      if (m.role === 'user' || m.streaming || this.isSemanticStatus(m.status)) continue;\n      return m.name ? `${m.name}: ${m.content}` : m.content;\n    }\n    return '';\n  });\n\n  constructor() {\n    // Passive scroll tracking outside the zone — no CD per scroll frame.\n    afterNextRender(() => {\n      const el = this.scrollContainer().nativeElement;\n      const onScroll = () => {\n        this.atBottom =\n          el.scrollHeight - el.scrollTop - el.clientHeight < ChatComponent.AT_BOTTOM_THRESHOLD;\n      };\n      this.ngZone.runOutsideAngular(() => el.addEventListener('scroll', onScroll, { passive: true }));\n      this.destroyRef.onDestroy(() => el.removeEventListener('scroll', onScroll));\n    });\n\n    // Follow the conversation: a new turn, a streamed token on the last turn\n    // (the parent hands in a new `messages` array), a history load or the\n    // typing indicator appearing all grow the thread — scroll after render,\n    // but only if the reader was already at the bottom.\n    effect(() => {\n      this.messages();\n      this.isStreaming();\n      if (!this.atBottom) return;\n      afterNextRender(() => this.scrollToBottom(), { injector: this.injector });\n    });\n  }\n\n  protected onInput(event: Event): void {\n    const el = event.target as HTMLTextAreaElement;\n    this.inputValue.set(el.value);\n    this.autoGrow(el);\n  }\n\n  /** Resize the textarea to fit its content so the composer hugs the text. */\n  private autoGrow(el: HTMLTextAreaElement): void {\n    el.style.height = 'auto';\n    el.style.height = `${Math.min(el.scrollHeight, ChatComponent.INPUT_MAX_HEIGHT)}px`;\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    // Enter while an IME composition is open commits the composition, not the message.\n    if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {\n      event.preventDefault();\n      this.send();\n    }\n  }\n\n  protected send(): void {\n    const content = this.inputValue().trim();\n    const attachments = this.pendingAttachments();\n    if ((!content && attachments.length === 0) || this.disabled()) return;\n    this.messageSend.emit({\n      content,\n      attachments: attachments.length ? attachments : undefined,\n    });\n    this.inputValue.set('');\n    this.pendingAttachments.set([]);\n    // Sending re-engages follow mode: the reader wants to see their own turn\n    // and the reply, even if they had scrolled up before.\n    this.atBottom = true;\n    afterNextRender(() => this.scrollToBottom(), { injector: this.injector });\n    // Collapse the auto-grown textarea back to a single row.\n    const el = this.composerInput?.nativeElement;\n    if (el) el.style.height = 'auto';\n  }\n\n  protected openFilePicker(): void {\n    if (this.disabled() || !this.allowFileUpload()) return;\n    this.fileInput?.nativeElement.click();\n  }\n\n  protected onFilesSelected(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    if (!input.files || input.files.length === 0) return;\n    this.addFiles(Array.from(input.files));\n    // Reset so the same file can be re-selected later.\n    input.value = '';\n  }\n\n  protected removeAttachment(id: string): void {\n    this.pendingAttachments.update(list => {\n      const removed = list.find(a => a.id === id);\n      if (removed?.url && removed.file) {\n        URL.revokeObjectURL(removed.url);\n      }\n      return list.filter(a => a.id !== id);\n    });\n  }\n\n  protected formatBytes(size: number | undefined): string {\n    if (!size && size !== 0) return '';\n    if (size < 1024) return `${size} B`;\n    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;\n    return `${(size / (1024 * 1024)).toFixed(1)} MB`;\n  }\n\n  protected isImage(att: ChatAttachment): boolean {\n    return !!att.type?.startsWith('image/');\n  }\n\n  private addFiles(files: File[]): void {\n    const max = this.maxFileSize();\n    const acceptList = this.accept()\n      .split(',')\n      .map(s => s.trim())\n      .filter(Boolean);\n\n    const accepted: ChatAttachment[] = [];\n    const rejected: { file: File; reason: 'type' | 'size' }[] = [];\n\n    for (const file of files) {\n      if (max > 0 && file.size > max) {\n        rejected.push({ file, reason: 'size' });\n        continue;\n      }\n      if (acceptList.length > 0 && !this.matchesAccept(file, acceptList)) {\n        rejected.push({ file, reason: 'type' });\n        continue;\n      }\n      accepted.push({\n        id: `att-${Date.now()}-${this.attachmentCounter++}`,\n        name: file.name,\n        type: file.type,\n        size: file.size,\n        url: URL.createObjectURL(file),\n        file,\n      });\n    }\n\n    if (accepted.length) {\n      this.pendingAttachments.update(list => [...list, ...accepted]);\n    }\n    if (accepted.length || rejected.length) {\n      this.fileAttach.emit({ attachments: accepted, rejected });\n    }\n  }\n\n  private matchesAccept(file: File, acceptList: string[]): boolean {\n    const name = file.name.toLowerCase();\n    const type = file.type.toLowerCase();\n    return acceptList.some(rule => {\n      const r = rule.toLowerCase();\n      if (r.startsWith('.')) return name.endsWith(r);\n      if (r.endsWith('/*')) return type.startsWith(r.slice(0, -1));\n      return type === r;\n    });\n  }\n\n  protected formatTime(date: Date | undefined): string {\n    if (!date) return '';\n    return date.toLocaleTimeString(this.locale(), { hour: '2-digit', minute: '2-digit' });\n  }\n\n  /**\n   * Up to two uppercase initials from a name (first + last word), used for the\n   * user avatar monogram when no `avatar` image is provided. Returns `''` for an\n   * empty/whitespace name so the caller can skip rendering.\n   */\n  protected initials(name: string | undefined): string {\n    if (!name) return '';\n    const parts = name.trim().split(/\\s+/).filter(Boolean);\n    if (parts.length === 0) return '';\n    const first = parts[0][0] ?? '';\n    const last = parts.length > 1 ? parts[parts.length - 1][0] ?? '' : '';\n    return (first + last).toUpperCase();\n  }\n\n  /**\n   * Whether to show an avatar on a user turn: only when avatars are enabled and\n   * the message carries either an image or a name we can build a monogram from.\n   * Keeps the labelless bubble clean when there's nothing to show.\n   */\n  protected showUserAvatar(msg: ChatMessage): boolean {\n    return (\n      msg.role === 'user' &&\n      this.showAvatars() &&\n      !!(msg.avatar || this.initials(msg.name))\n    );\n  }\n\n  protected shouldRenderMarkdown(role: ChatMessageRole): boolean {\n    const mode = this.renderMarkdown();\n    if (mode === false) return false;\n    if (mode === true || mode === 'all') return true;\n    return role === mode;\n  }\n\n  /** Whether a message carries a semantic (non-`default`) status. */\n  protected isSemanticStatus(status: ChatMessageStatus | undefined): boolean {\n    return !!status && status !== 'default';\n  }\n\n  /** Rail icon for a semantic status — reuses the `lc-alert` icon names. */\n  protected statusIcon(status: ChatMessageStatus | undefined): string {\n    switch (status) {\n      case 'info':\n        return 'information-circle';\n      case 'success':\n        return 'check-circle';\n      case 'warning':\n        return 'exclamation-triangle';\n      case 'error':\n        return 'x-circle';\n      default:\n        return '';\n    }\n  }\n\n  /** Semantic token colour for a status dot/icon. */\n  protected statusColor(status: ChatMessageStatus | undefined): string {\n    switch (status) {\n      case 'info':\n        return 'var(--color-info-500)';\n      case 'success':\n        return 'var(--color-success-500)';\n      case 'warning':\n        return 'var(--color-warning-500)';\n      case 'error':\n        return 'var(--color-error-500)';\n      default:\n        return 'currentColor';\n    }\n  }\n\n  /** Visually-hidden prefix so colour/icon is never the only signal. */\n  protected statusLabel(status: ChatMessageStatus | undefined): string {\n    switch (status) {\n      case 'info':\n        return this.statusInfoLabel();\n      case 'success':\n        return this.statusSuccessLabel();\n      case 'warning':\n        return this.statusWarningLabel();\n      case 'error':\n        return this.statusErrorLabel();\n      default:\n        return '';\n    }\n  }\n\n  /** ARIA live priority: assertive for `error`, polite for other statuses. */\n  protected statusAriaLive(status: ChatMessageStatus | undefined): 'assertive' | 'polite' | null {\n    if (status === 'error') return 'assertive';\n    if (this.isSemanticStatus(status)) return 'polite';\n    return null;\n  }\n\n  private scrollToBottom(): void {\n    const el = this.scrollContainer().nativeElement;\n    el.scrollTop = el.scrollHeight;\n  }\n}\n","<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">{{ streamingLabel() }}</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--avatar]=\"showUserAvatar(msg)\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n          [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n          [attr.aria-live]=\"statusAriaLive(msg.status)\"\n        >\n          @if ((msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) || showUserAvatar(msg)) {\n            <div class=\"lc-chat__marker\" [class.lc-chat__marker--user]=\"msg.role === 'user'\">\n              @if (isSemanticStatus(msg.status) && msg.role !== 'user') {\n                <span class=\"lc-chat__status-icon\">\n                  <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n                </span>\n              } @else if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else if (msg.role === 'user') {\n                <span class=\"lc-chat__monogram\" [attr.aria-label]=\"msg.name\">{{ initials(msg.name) }}</span>\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.name && msg.role !== 'user') {\n              @if (showTimestamps() && msg.timestamp) {\n                <div class=\"lc-chat__meta lc-chat__meta--agent\">\n                  <span class=\"lc-chat__name\">{{ msg.name }}</span>\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                </div>\n              } @else {\n                <div class=\"lc-chat__name\">{{ msg.name }}</div>\n              }\n            }\n            <div class=\"lc-chat__content\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n              }\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user' && !msg.name) {\n              <div class=\"lc-chat__time lc-chat__time--tight\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n          @if (showTimestamps() && msg.timestamp && msg.role === 'user') {\n            <div class=\"lc-chat__time lc-chat__time--user\">{{ formatTime(msg.timestamp) }}</div>\n          }\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Announces the latest completed non-user turn (see `announcement`). -->\n  <div class=\"lc-chat__sr-only lc-chat__announcer\" aria-live=\"polite\" aria-atomic=\"true\">{{ announcement() }}</div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"removeAttachmentAriaLabel() + ' ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <label class=\"lc-chat__sr-only\" [for]=\"inputId\">{{ inputLabel() }}</label>\n      <textarea\n        #composerInput\n        [id]=\"inputId\"\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            [attr.aria-label]=\"attachAriaLabel()\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          [attr.aria-label]=\"sendAriaLabel()\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-checkbox.mjs

@@ -0,0 +1,325 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, model, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+let nextUniqueId = 0;
+var CheckboxComponent = class CheckboxComponent {
+	id = input(`lc-checkbox-${nextUniqueId++}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	error = input(false, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	errorMessage = input("", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	helpText = input("", ...ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	ariaLabelledBy = input("", ...ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []);
+	ariaDescribedBy = input("", ...ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []);
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	indeterminate = model(false, ...ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	labelClasses = computed(() => {
+		const classes = ["checkbox-label", `checkbox-${this.size()}`];
+		if (this.checked()) classes.push("checkbox-checked");
+		if (this.isDisabled()) classes.push("checkbox-disabled");
+		if (this.indeterminate()) classes.push("checkbox-indeterminate");
+		if (this.error()) classes.push("checkbox-error");
+		if (this.required()) classes.push("checkbox-required");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []);
+	helpTextId = computed(() => this.helpText() && !this.error() ? `${this.id()}-help` : null, ...ngDevMode ? [{ debugName: "helpTextId" }] : /* istanbul ignore next */ []);
+	errorMessageId = computed(() => this.error() && this.errorMessage() ? `${this.id()}-error` : null, ...ngDevMode ? [{ debugName: "errorMessageId" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		const ids = [
+			this.ariaDescribedBy(),
+			this.helpTextId(),
+			this.errorMessageId()
+		].filter(Boolean);
+		return ids.length ? ids.join(" ") : null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	writeValue(value) {
+		this.checked.set(value ?? false);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	handleChange(event) {
+		if (this.isDisabled()) {
+			event.preventDefault();
+			return;
+		}
+		const newValue = event.target.checked;
+		this.indeterminate.set(false);
+		this.checked.set(newValue);
+		this.onChange(newValue);
+	}
+	handleBlur() {
+		this.onTouched();
+	}
+	onChange = () => void 0;
+	onTouched = () => void 0;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: CheckboxComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: CheckboxComponent,
+		isStandalone: true,
+		selector: "lc-checkbox",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			helpText: {
+				classPropertyName: "helpText",
+				publicName: "helpText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledBy: {
+				classPropertyName: "ariaLabelledBy",
+				publicName: "ariaLabelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaDescribedBy: {
+				classPropertyName: "ariaDescribedBy",
+				publicName: "ariaDescribedBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			indeterminate: {
+				classPropertyName: "indeterminate",
+				publicName: "indeterminate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			checked: "checkedChange",
+			indeterminate: "indeterminateChange"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => CheckboxComponent),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    [required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"checkbox\"\n    class=\"checkbox-input\"\n    (change)=\"handleChange($event)\"\n    (blur)=\"handleBlur()\"\n  />\n  <span class=\"checkbox-box\">\n    <svg\n      class=\"checkbox-icon\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <!-- Checkmark icon -->\n      @if (checked() && !indeterminate()) {\n        <path\n          d=\"M13.5 4L6 11.5L2.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      }\n      <!-- Indeterminate icon -->\n      @if (indeterminate()) {\n        <path\n          d=\"M4 8H12\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      }\n    </svg>\n  </span>\n  @if (label()) {\n    <span class=\"checkbox-label-text\">{{ label() }}</span>\n  }\n</label>\n\n@if (helpTextId(); as helpId) {\n  <div [id]=\"helpId\" class=\"checkbox-help-text\">{{ helpText() }}</div>\n}\n\n@if (errorMessageId(); as errorId) {\n  <div [id]=\"errorId\" class=\"checkbox-error-message\">{{ errorMessage() }}</div>\n}\n",
+		styles: [":host{display:block}.checkbox-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;font-family:var(--font-family-sans);color:var(--color-text-primary);transition:opacity .15s ease-in-out}.checkbox-label:hover:not(.checkbox-disabled):not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-box{border-color:var(--color-primary-600);background-color:var(--color-primary-400)}.checkbox-label.checkbox-disabled{cursor:not-allowed;opacity:.5}.checkbox-label.checkbox-disabled .checkbox-box{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.checkbox-label.checkbox-error .checkbox-box{border-color:var(--color-error)}.checkbox-input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.checkbox-input:focus+.checkbox-box{outline:2px solid var(--color-primary-500);outline-offset:2px}.checkbox-input:focus-visible+.checkbox-box{outline:2px solid var(--color-primary-500);outline-offset:2px}.checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-surface);transition:all .15s ease-in-out;box-sizing:border-box}.checkbox-checked .checkbox-box,.checkbox-indeterminate .checkbox-box{background-color:var(--color-primary-fill);border-color:var(--color-primary-fill)}.checkbox-error .checkbox-box{border-color:var(--color-error)}.checkbox-disabled .checkbox-box{cursor:not-allowed}.checkbox-icon{width:100%;height:100%;color:var(--color-on-primary);opacity:0;transform:scale(.8);transition:all .15s ease-in-out}.checkbox-checked .checkbox-icon,.checkbox-indeterminate .checkbox-icon{opacity:1;transform:scale(1)}.checkbox-label-text{line-height:1.5;margin-top:.125rem}.checkbox-help-text{font-size:.875rem;line-height:1.25rem;color:var(--color-text-secondary);margin-top:.25rem;margin-left:calc(var(--checkbox-size) + .5rem)}.checkbox-error-message{font-size:.875rem;line-height:1.25rem;color:var(--color-text-error);margin-top:.25rem;margin-left:calc(var(--checkbox-size) + .5rem)}.checkbox-xs{--checkbox-size: 1rem;font-size:.875rem}.checkbox-xs .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-sm{--checkbox-size: 1.125rem;font-size:.875rem}.checkbox-sm .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-md{--checkbox-size: 1.25rem;font-size:1rem}.checkbox-md .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-lg{--checkbox-size: 1.5rem;font-size:1.125rem}.checkbox-lg .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-required .checkbox-label-text:after{content:\" *\";color:var(--color-text-error)}@media(prefers-reduced-motion:no-preference){.checkbox-box,.checkbox-icon{transition:all 10ms ease-in-out}}@media(prefers-reduced-motion:reduce){.checkbox-box,.checkbox-icon{transition:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CheckboxComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-checkbox",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => CheckboxComponent),
+				multi: true
+			}],
+			template: "<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    [required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"checkbox\"\n    class=\"checkbox-input\"\n    (change)=\"handleChange($event)\"\n    (blur)=\"handleBlur()\"\n  />\n  <span class=\"checkbox-box\">\n    <svg\n      class=\"checkbox-icon\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <!-- Checkmark icon -->\n      @if (checked() && !indeterminate()) {\n        <path\n          d=\"M13.5 4L6 11.5L2.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      }\n      <!-- Indeterminate icon -->\n      @if (indeterminate()) {\n        <path\n          d=\"M4 8H12\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      }\n    </svg>\n  </span>\n  @if (label()) {\n    <span class=\"checkbox-label-text\">{{ label() }}</span>\n  }\n</label>\n\n@if (helpTextId(); as helpId) {\n  <div [id]=\"helpId\" class=\"checkbox-help-text\">{{ helpText() }}</div>\n}\n\n@if (errorMessageId(); as errorId) {\n  <div [id]=\"errorId\" class=\"checkbox-error-message\">{{ errorMessage() }}</div>\n}\n",
+			styles: [":host{display:block}.checkbox-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;font-family:var(--font-family-sans);color:var(--color-text-primary);transition:opacity .15s ease-in-out}.checkbox-label:hover:not(.checkbox-disabled):not(.checkbox-checked):not(.checkbox-indeterminate) .checkbox-box{border-color:var(--color-primary-600);background-color:var(--color-primary-400)}.checkbox-label.checkbox-disabled{cursor:not-allowed;opacity:.5}.checkbox-label.checkbox-disabled .checkbox-box{background-color:var(--color-neutral-100);border-color:var(--color-neutral-300)}.checkbox-label.checkbox-error .checkbox-box{border-color:var(--color-error)}.checkbox-input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.checkbox-input:focus+.checkbox-box{outline:2px solid var(--color-primary-500);outline-offset:2px}.checkbox-input:focus-visible+.checkbox-box{outline:2px solid var(--color-primary-500);outline-offset:2px}.checkbox-box{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--color-neutral-400);border-radius:4px;background-color:var(--color-surface);transition:all .15s ease-in-out;box-sizing:border-box}.checkbox-checked .checkbox-box,.checkbox-indeterminate .checkbox-box{background-color:var(--color-primary-fill);border-color:var(--color-primary-fill)}.checkbox-error .checkbox-box{border-color:var(--color-error)}.checkbox-disabled .checkbox-box{cursor:not-allowed}.checkbox-icon{width:100%;height:100%;color:var(--color-on-primary);opacity:0;transform:scale(.8);transition:all .15s ease-in-out}.checkbox-checked .checkbox-icon,.checkbox-indeterminate .checkbox-icon{opacity:1;transform:scale(1)}.checkbox-label-text{line-height:1.5;margin-top:.125rem}.checkbox-help-text{font-size:.875rem;line-height:1.25rem;color:var(--color-text-secondary);margin-top:.25rem;margin-left:calc(var(--checkbox-size) + .5rem)}.checkbox-error-message{font-size:.875rem;line-height:1.25rem;color:var(--color-text-error);margin-top:.25rem;margin-left:calc(var(--checkbox-size) + .5rem)}.checkbox-xs{--checkbox-size: 1rem;font-size:.875rem}.checkbox-xs .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-sm{--checkbox-size: 1.125rem;font-size:.875rem}.checkbox-sm .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-md{--checkbox-size: 1.25rem;font-size:1rem}.checkbox-md .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-lg{--checkbox-size: 1.5rem;font-size:1.125rem}.checkbox-lg .checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size)}.checkbox-required .checkbox-label-text:after{content:\" *\";color:var(--color-text-error)}@media(prefers-reduced-motion:no-preference){.checkbox-box,.checkbox-icon{transition:all 10ms ease-in-out}}@media(prefers-reduced-motion:reduce){.checkbox-box,.checkbox-icon{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		helpText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helpText",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledBy",
+				required: false
+			}]
+		}],
+		ariaDescribedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaDescribedBy",
+				required: false
+			}]
+		}],
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		indeterminate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indeterminate",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["indeterminateChange"]
+		}]
+	}
+});
+export { CheckboxComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-checkbox.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-checkbox.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/checkbox/checkbox.component.ts","../../../../libs/angular-ui-kit/src/lib/checkbox/checkbox.component.html"],"sourcesContent":["import {\n  Component,\n  input,\n  model,\n  signal,\n  computed,\n  ChangeDetectionStrategy,\n  forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';\n\nlet nextUniqueId = 0;\n\n@Component({\n  selector: 'lc-checkbox',\n  standalone: true,\n  imports: [],\n  templateUrl: './checkbox.component.html',\n  styleUrl: './checkbox.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CheckboxComponent),\n      multi: true,\n    },\n  ],\n})\n/**\n * Checkbox component for boolean or indeterminate selections.\n *\n * Features:\n * - Checked, unchecked, and indeterminate states\n * - Multiple size variants (sm, md, lg)\n * - Validation error display with error message\n * - Help text support\n * - Full accessibility with ARIA attributes\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-checkbox label=\"Accept terms\" />\n * <lc-checkbox label=\"Select all\" [(checked)]=\"allSelected\" [indeterminate]=\"someSelected\" />\n * ```\n */\nexport class CheckboxComponent implements ControlValueAccessor {\n  // Inputs\n  readonly id = input<string>(`lc-checkbox-${nextUniqueId++}`);\n  readonly label = input<string>('');\n  readonly error = input<boolean>(false);\n  readonly errorMessage = input<string>('');\n  readonly helpText = input<string>('');\n  readonly size = input<CheckboxSize>('md');\n  readonly required = input<boolean>(false);\n  readonly disabled = input<boolean>(false);\n  readonly ariaLabel = input<string>('');\n  readonly ariaLabelledBy = input<string>('');\n  readonly ariaDescribedBy = input<string>('');\n\n  /**\n   * Checked state (two-way bindable). Emits `checkedChange` whenever the\n   * value changes — on user toggle as well as on form writes.\n   */\n  readonly checked = model<boolean>(false);\n\n  /**\n   * Indeterminate (\"partially checked\") state (two-way bindable). Cleared\n   * automatically on the next user interaction; emits `indeterminateChange`.\n   */\n  readonly indeterminate = model<boolean>(false);\n\n  /** Disabled state pushed by a form control (`setDisabledState`). */\n  private readonly formDisabled = signal(false);\n\n  /** Effective disabled state: `disabled` input OR form control disabled. */\n  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  readonly labelClasses = computed(() => {\n    const classes = ['checkbox-label', `checkbox-${this.size()}`];\n\n    if (this.checked()) {\n      classes.push('checkbox-checked');\n    }\n\n    if (this.isDisabled()) {\n      classes.push('checkbox-disabled');\n    }\n\n    if (this.indeterminate()) {\n      classes.push('checkbox-indeterminate');\n    }\n\n    if (this.error()) {\n      classes.push('checkbox-error');\n    }\n\n    if (this.required()) {\n      classes.push('checkbox-required');\n    }\n\n    return classes.join(' ');\n  });\n\n  /** id of the rendered help text (only while it is shown). */\n  readonly helpTextId = computed(() =>\n    this.helpText() && !this.error() ? `${this.id()}-help` : null,\n  );\n\n  /** id of the rendered error message (only while it is shown). */\n  readonly errorMessageId = computed(() =>\n    this.error() && this.errorMessage() ? `${this.id()}-error` : null,\n  );\n\n  /** aria-describedby: consumer-supplied ids plus the rendered help/error text. */\n  readonly describedBy = computed(() => {\n    const ids = [this.ariaDescribedBy(), this.helpTextId(), this.errorMessageId()].filter(Boolean);\n    return ids.length ? ids.join(' ') : null;\n  });\n\n  // ControlValueAccessor implementation\n  writeValue(value: boolean | null): void {\n    this.checked.set(value ?? false);\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  // Event handlers\n  handleChange(event: Event): void {\n    if (this.isDisabled()) {\n      event.preventDefault();\n      return;\n    }\n\n    const target = event.target as HTMLInputElement;\n    const newValue = target.checked;\n\n    // Clear indeterminate state when user interacts\n    this.indeterminate.set(false);\n\n    // model.set() emits `checkedChange` exactly once per actual change\n    this.checked.set(newValue);\n    this.onChange(newValue);\n  }\n\n  handleBlur(): void {\n    this.onTouched();\n  }\n\n  // Control Value Accessor callbacks (private)\n  private onChange: (value: boolean) => void = () => undefined;\n  private onTouched: () => void = () => undefined;\n}\n","<label [attr.for]=\"id()\" [class]=\"labelClasses()\">\n  <input\n    type=\"checkbox\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [indeterminate]=\"indeterminate()\"\n    [required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"checkbox\"\n    class=\"checkbox-input\"\n    (change)=\"handleChange($event)\"\n    (blur)=\"handleBlur()\"\n  />\n  <span class=\"checkbox-box\">\n    <svg\n      class=\"checkbox-icon\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <!-- Checkmark icon -->\n      @if (checked() && !indeterminate()) {\n        <path\n          d=\"M13.5 4L6 11.5L2.5 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      }\n      <!-- Indeterminate icon -->\n      @if (indeterminate()) {\n        <path\n          d=\"M4 8H12\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      }\n    </svg>\n  </span>\n  @if (label()) {\n    <span class=\"checkbox-label-text\">{{ label() }}</span>\n  }\n</label>\n\n@if (helpTextId(); as helpId) {\n  <div [id]=\"helpId\" class=\"checkbox-help-text\">{{ helpText() }}</div>\n}\n\n@if (errorMessageId(); as errorId) {\n  <div [id]=\"errorId\" class=\"checkbox-error-message\">{{ errorMessage() }}</div>\n}\n"],"mappings":"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"}