@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/fesm2022/lifecorner-angular-ui-kit-rich-text-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-rich-text-editor.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/rich-text-editor/rich-text-editor.component.ts","../../../../libs/angular-ui-kit/src/lib/rich-text-editor/rich-text-editor.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ElementRef,\n  SecurityContext,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  linkedSignal,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { isSafeImageUrl, isSafeLinkUrl } from '@lifecorner/angular-ui-kit/internal/url';\n\nexport type RichTextEditorMode = 'rich' | 'markdown' | 'split';\nexport type ToolbarAction =\n  | 'bold'\n  | 'italic'\n  | 'underline'\n  | 'strikethrough'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'ul'\n  | 'ol'\n  | 'blockquote'\n  | 'code'\n  | 'codeblock'\n  | 'link'\n  | 'image'\n  | 'hr';\n\nexport interface ToolbarConfig {\n  actions: ToolbarAction[];\n}\n\nconst HTML_ESCAPES: Record<string, string> = {\n  '&': '&amp;',\n  '<': '&lt;',\n  '>': '&gt;',\n  '\"': '&quot;',\n  \"'\": '&#39;',\n};\n\n/** Escapes text for HTML — every character that could open a tag or an attribute. */\nfunction escapeHtml(text: string): string {\n  return text.replace(/[&<>\"']/g, (c) => HTML_ESCAPES[c]);\n}\n\n/**\n * The URL as it may go into `href`/`src`, or null if it must not: only relative\n * URLs and the allow-listed schemes pass (see `safe-url.ts`), so a link in\n * user-supplied markdown can never run script when clicked.\n */\nfunction safeUrl(url: string, image = false): string | null {\n  const value = url.trim();\n  if (!value) return null;\n  return (image ? isSafeImageUrl(value) : isSafeLinkUrl(value)) ? value : null;\n}\n\nconst DEFAULT_TOOLBAR: ToolbarConfig = {\n  actions: [\n    'bold',\n    'italic',\n    'underline',\n    'strikethrough',\n    'h1',\n    'h2',\n    'h3',\n    'ul',\n    'ol',\n    'blockquote',\n    'code',\n    'codeblock',\n    'link',\n    'hr',\n  ],\n};\n\n/**\n * Rich Text Editor with Markdown support.\n *\n * Supports three modes:\n * - `rich`: WYSIWYG editing with toolbar\n * - `markdown`: Raw markdown editing with syntax highlighting\n * - `split`: Side-by-side markdown and preview\n *\n * Implements ControlValueAccessor for reactive form integration.\n * The value is always stored as Markdown.\n *\n * The built-in markdown → HTML conversion escapes the source before it applies\n * any markup and only lets http(s)/mailto/tel and relative URLs through as\n * links, so markdown that arrives from a server or another user cannot inject\n * markup or script. The result is additionally run through Angular's HTML\n * sanitizer before it reaches the DOM.\n *\n * @example\n * ```html\n * <lc-rich-text-editor\n *   [(ngModel)]=\"content\"\n *   mode=\"split\"\n *   placeholder=\"Write something...\" />\n * ```\n */\n@Component({\n  selector: 'lc-rich-text-editor',\n  standalone: true,\n  imports: [CommonModule],\n  templateUrl: './rich-text-editor.component.html',\n  styleUrl: './rich-text-editor.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => RichTextEditorComponent),\n      multi: true,\n    },\n  ],\n})\nexport class RichTextEditorComponent implements ControlValueAccessor {\n  /** Editor mode */\n  mode = input<RichTextEditorMode>('rich');\n\n  /** Placeholder text */\n  placeholder = input<string>('Start typing...');\n\n  /** Minimum height in px */\n  minHeight = input<number>(200);\n\n  /** Maximum height in px (0 = unlimited) */\n  maxHeight = input<number>(0);\n\n  /** Whether the editor is disabled */\n  disabled = input<boolean>(false);\n\n  /** Whether the editor is readonly */\n  readonly = input<boolean>(false);\n\n  /** Toolbar configuration */\n  toolbar = input<ToolbarConfig>(DEFAULT_TOOLBAR);\n\n  /** Whether to show word count */\n  showWordCount = input<boolean>(true);\n\n  /** Tooltips and accessible names of the toolbar actions, by action (`{ bold: 'Fett' }`); missing ones keep the English default. */\n  actionTitles = input<Partial<Record<ToolbarAction, string>>>({});\n\n  /** Label of the rich-text mode button. */\n  richModeLabel = input('Rich');\n\n  /** Tooltip of the rich-text mode button. */\n  richModeTitle = input('Rich Text');\n\n  /** Label of the Markdown mode button. */\n  markdownModeLabel = input('MD');\n\n  /** Tooltip of the Markdown mode button. */\n  markdownModeTitle = input('Markdown');\n\n  /** Label of the split-view mode button. */\n  splitModeLabel = input('Split');\n\n  /** Tooltip of the split-view mode button. */\n  splitModeTitle = input('Split View');\n\n  /** Accessible name of the Markdown text area. */\n  markdownEditorAriaLabel = input('Markdown editor');\n\n  /** Unit after the word count (`showWordCount`). */\n  wordsLabel = input('words');\n\n  /** Unit after the character count (`showWordCount`). */\n  charactersLabel = input('characters');\n\n  /** Emitted on every content change */\n  readonly contentChange = output<string>();\n\n  private readonly editorArea = viewChild<ElementRef<HTMLTextAreaElement>>('editorArea');\n  private readonly richArea = viewChild<ElementRef<HTMLDivElement>>('richArea');\n  private readonly sanitizer = inject(DomSanitizer);\n\n  /** Internal markdown value */\n  protected markdown = signal('');\n\n  /** Current active mode: follows the `mode` input until the user toggles it. */\n  protected activeMode = linkedSignal<RichTextEditorMode>(() => this.mode());\n\n  /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n  private readonly formDisabled = signal(false);\n\n  /** Disabled by either route — the one flag the template consults. */\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  /** Whether the content can currently be edited at all. */\n  protected readonly editable = computed(() => !this.isDisabled() && !this.readonly());\n\n  /** Word count */\n  protected wordCount = computed(() => {\n    const text = this.markdown().trim();\n    if (!text) return 0;\n    return text.split(/\\s+/).length;\n  });\n\n  /** Character count */\n  protected charCount = computed(() => this.markdown().length);\n\n  /**\n   * Rendered HTML from markdown — escaped by the converter and, on top of that,\n   * passed through Angular's HTML sanitizer, so it is safe to assign to\n   * `innerHTML` directly.\n   */\n  protected renderedHtml = computed(() => this.sanitizeHtml(this.markdownToHtml(this.markdown())));\n\n  // CVA\n  private onChange: (value: string) => void = () => { /* set by registerOnChange */ };\n  private onTouched: () => void = () => { /* set by registerOnTouched */ };\n\n  constructor() {\n    // The rich area lives inside an `@switch`, so it comes and goes with the\n    // mode. Whenever it (re)appears, it starts empty and has to be filled from\n    // the markdown — including the very first time, which is after any\n    // `writeValue` a form control performs before the view exists. Only the\n    // element's presence is tracked: re-rendering on every markdown change would\n    // wipe the caret while the user types in it.\n    effect(() => {\n      const el = this.richArea()?.nativeElement;\n      if (el) untracked(() => this.renderRich(el));\n    });\n  }\n\n  // -- ControlValueAccessor --\n  writeValue(value: string | null | undefined): void {\n    this.markdown.set(value || '');\n    const el = this.richArea()?.nativeElement;\n    if (el) this.renderRich(el);\n  }\n\n  registerOnChange(fn: (value: string) => 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  // -- Mode switching --\n  protected switchMode(mode: RichTextEditorMode): void {\n    if (this.activeMode() === 'rich' && mode !== 'rich') {\n      // Sync rich content to markdown before the rich area is torn down.\n      const el = this.richArea()?.nativeElement;\n      if (el) this.markdown.set(this.htmlToMarkdown(el.innerHTML));\n    }\n    // Entering rich mode: the effect in the constructor renders the markdown\n    // into the freshly created rich area.\n    this.activeMode.set(mode);\n  }\n\n  // -- Toolbar actions --\n  protected onToolbarAction(action: ToolbarAction): void {\n    if (!this.editable()) return;\n\n    if (this.activeMode() === 'rich') {\n      this.execRichCommand(action);\n    } else {\n      this.insertMarkdownSyntax(action);\n    }\n  }\n\n  private execRichCommand(action: ToolbarAction): void {\n    switch (action) {\n      case 'bold':\n        document.execCommand('bold');\n        break;\n      case 'italic':\n        document.execCommand('italic');\n        break;\n      case 'underline':\n        document.execCommand('underline');\n        break;\n      case 'strikethrough':\n        document.execCommand('strikeThrough');\n        break;\n      case 'h1':\n        document.execCommand('formatBlock', false, 'h1');\n        break;\n      case 'h2':\n        document.execCommand('formatBlock', false, 'h2');\n        break;\n      case 'h3':\n        document.execCommand('formatBlock', false, 'h3');\n        break;\n      case 'ul':\n        document.execCommand('insertUnorderedList');\n        break;\n      case 'ol':\n        document.execCommand('insertOrderedList');\n        break;\n      case 'blockquote':\n        document.execCommand('formatBlock', false, 'blockquote');\n        break;\n      case 'code':\n        document.execCommand('insertHTML', false, '<code>' + this.getSelection() + '</code>');\n        break;\n      case 'codeblock':\n        document.execCommand('insertHTML', false, '<pre><code>' + this.getSelection() + '</code></pre>');\n        break;\n      case 'link': {\n        const url = prompt('Enter URL:');\n        if (url) document.execCommand('createLink', false, url);\n        break;\n      }\n      case 'hr':\n        document.execCommand('insertHorizontalRule');\n        break;\n    }\n    this.syncFromRich();\n  }\n\n  private insertMarkdownSyntax(action: ToolbarAction): void {\n    const textarea = this.editorArea()?.nativeElement;\n    if (!textarea) return;\n\n    const start = textarea.selectionStart;\n    const end = textarea.selectionEnd;\n    const text = this.markdown();\n    const selected = text.substring(start, end);\n\n    let insertion = '';\n    let cursorOffset = 0;\n\n    switch (action) {\n      case 'bold':\n        insertion = `**${selected || 'bold text'}**`;\n        cursorOffset = selected ? insertion.length : 2;\n        break;\n      case 'italic':\n        insertion = `*${selected || 'italic text'}*`;\n        cursorOffset = selected ? insertion.length : 1;\n        break;\n      case 'underline':\n        insertion = `<u>${selected || 'underlined text'}</u>`;\n        cursorOffset = selected ? insertion.length : 3;\n        break;\n      case 'strikethrough':\n        insertion = `~~${selected || 'strikethrough'}~~`;\n        cursorOffset = selected ? insertion.length : 2;\n        break;\n      case 'h1':\n        insertion = `# ${selected || 'Heading 1'}`;\n        cursorOffset = insertion.length;\n        break;\n      case 'h2':\n        insertion = `## ${selected || 'Heading 2'}`;\n        cursorOffset = insertion.length;\n        break;\n      case 'h3':\n        insertion = `### ${selected || 'Heading 3'}`;\n        cursorOffset = insertion.length;\n        break;\n      case 'ul':\n        insertion = `- ${selected || 'List item'}`;\n        cursorOffset = insertion.length;\n        break;\n      case 'ol':\n        insertion = `1. ${selected || 'List item'}`;\n        cursorOffset = insertion.length;\n        break;\n      case 'blockquote':\n        insertion = `> ${selected || 'Quote'}`;\n        cursorOffset = insertion.length;\n        break;\n      case 'code':\n        insertion = `\\`${selected || 'code'}\\``;\n        cursorOffset = selected ? insertion.length : 1;\n        break;\n      case 'codeblock':\n        insertion = `\\`\\`\\`\\n${selected || 'code'}\\n\\`\\`\\``;\n        cursorOffset = 4;\n        break;\n      case 'link':\n        insertion = `[${selected || 'link text'}](url)`;\n        cursorOffset = selected ? insertion.length - 5 : 1;\n        break;\n      case 'image':\n        insertion = `![${selected || 'alt text'}](url)`;\n        cursorOffset = selected ? insertion.length - 5 : 2;\n        break;\n      case 'hr':\n        insertion = `\\n---\\n`;\n        cursorOffset = insertion.length;\n        break;\n    }\n\n    const newText = text.substring(0, start) + insertion + text.substring(end);\n    this.markdown.set(newText);\n    this.emitChange(newText);\n\n    setTimeout(() => {\n      textarea.focus();\n      textarea.setSelectionRange(start + cursorOffset, start + cursorOffset);\n    });\n  }\n\n  // -- Content input handlers --\n  protected onMarkdownInput(event: Event): void {\n    const value = (event.target as HTMLTextAreaElement).value;\n    this.markdown.set(value);\n    this.emitChange(value);\n  }\n\n  protected onRichInput(): void {\n    this.syncFromRich();\n  }\n\n  protected onBlur(): void {\n    this.onTouched();\n  }\n\n  private syncFromRich(): void {\n    const el = this.richArea()?.nativeElement;\n    if (!el) return;\n    const md = this.htmlToMarkdown(el.innerHTML);\n    this.markdown.set(md);\n    this.emitChange(md);\n  }\n\n  /** Puts the current markdown into the rich area, as sanitised HTML. */\n  private renderRich(el: HTMLDivElement): void {\n    el.innerHTML = this.renderedHtml();\n  }\n\n  /**\n   * Angular's HTML sanitizer, as the last line of defence behind the escaping\n   * `markdownToHtml` does itself: whatever it might miss, this strips.\n   */\n  private sanitizeHtml(html: string): string {\n    return this.sanitizer.sanitize(SecurityContext.HTML, html) ?? '';\n  }\n\n  private emitChange(value: string): void {\n    this.onChange(value);\n    this.contentChange.emit(value);\n  }\n\n  private getSelection(): string {\n    return window.getSelection()?.toString() || '';\n  }\n\n  // -- Toolbar label helpers --\n  protected getActionLabel(action: ToolbarAction): string {\n    const labels: Record<ToolbarAction, string> = {\n      bold: 'B',\n      italic: 'I',\n      underline: 'U',\n      strikethrough: 'S',\n      h1: 'H1',\n      h2: 'H2',\n      h3: 'H3',\n      ul: '•',\n      ol: '1.',\n      blockquote: '\"',\n      code: '<>',\n      codeblock: '{ }',\n      link: '🔗',\n      image: '🖼',\n      hr: '—',\n    };\n    return labels[action] || action;\n  }\n\n  protected getActionTitle(action: ToolbarAction): string {\n    const titles: Record<ToolbarAction, string> = {\n      bold: 'Bold',\n      italic: 'Italic',\n      underline: 'Underline',\n      strikethrough: 'Strikethrough',\n      h1: 'Heading 1',\n      h2: 'Heading 2',\n      h3: 'Heading 3',\n      ul: 'Unordered List',\n      ol: 'Ordered List',\n      blockquote: 'Blockquote',\n      code: 'Inline Code',\n      codeblock: 'Code Block',\n      link: 'Insert Link',\n      image: 'Insert Image',\n      hr: 'Horizontal Rule',\n    };\n    return this.actionTitles()[action] || titles[action] || action;\n  }\n\n  // -- Markdown <-> HTML conversion (simple built-in) --\n  /**\n   * Converts the editor's markdown subset to HTML. The source is HTML-escaped\n   * *first*, so nothing in it can open a tag or an attribute; the conversions\n   * below then only ever add markup of their own. Raw HTML in the markdown is\n   * therefore shown as text — with one exception, `<u>`, which the toolbar's\n   * underline action emits (markdown has no underline) and which is let back\n   * through in escaped form only.\n   */\n  protected markdownToHtml(md: string): string {\n    if (!md) return '';\n\n    let html = escapeHtml(md);\n\n    // Code blocks (must be first)\n    html = html.replace(/```(\\w*)\\n([\\s\\S]*?)```/g, '<pre><code class=\"language-$1\">$2</code></pre>');\n\n    // Headings\n    html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');\n    html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');\n    html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');\n\n    // Horizontal rule\n    html = html.replace(/^---$/gm, '<hr>');\n\n    // Bold/Italic\n    html = html.replace(/\\*\\*\\*(.+?)\\*\\*\\*/g, '<strong><em>$1</em></strong>');\n    html = html.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');\n    html = html.replace(/\\*(.+?)\\*/g, '<em>$1</em>');\n    html = html.replace(/~~(.+?)~~/g, '<del>$1</del>');\n\n    // Underline: the one raw tag the editor itself writes into the markdown.\n    html = html.replace(/&lt;u&gt;(.+?)&lt;\\/u&gt;/g, '<u>$1</u>');\n\n    // Inline code\n    html = html.replace(/`(.+?)`/g, '<code>$1</code>');\n\n    // Links and images. Only safe URLs become attributes; anything else is\n    // shown as its text — a `javascript:` link that just isn't a link is far\n    // better than one that runs. Quotes are already escaped (see above), so\n    // the URL cannot break out of the attribute either.\n    html = html.replace(/!\\[(.+?)\\]\\((.+?)\\)/g, (_m, alt: string, src: string) => {\n      const url = safeUrl(src, true);\n      return url ? `<img alt=\"${alt}\" src=\"${url}\" />` : alt;\n    });\n    html = html.replace(/\\[(.+?)\\]\\((.+?)\\)/g, (_m, text: string, href: string) => {\n      const url = safeUrl(href);\n      return url ? `<a href=\"${url}\">${text}</a>` : text;\n    });\n\n    // Blockquotes — the marker is `&gt;` by now, the source having been escaped.\n    html = html.replace(/^&gt; (.+)$/gm, '<blockquote>$1</blockquote>');\n\n    // Unordered lists\n    html = html.replace(/^- (.+)$/gm, '<li>$1</li>');\n    html = html.replace(/(<li>.*<\\/li>\\n?)+/g, '<ul>$&</ul>');\n\n    // Ordered lists\n    html = html.replace(/^\\d+\\. (.+)$/gm, '<li>$1</li>');\n\n    // Paragraphs (lines that aren't already wrapped)\n    html = html.replace(/^(?!<[a-z])((?!^\\s*$).+)$/gm, '<p>$1</p>');\n\n    // Clean up empty paragraphs\n    html = html.replace(/<p>\\s*<\\/p>/g, '');\n\n    return html.trim();\n  }\n\n  private htmlToMarkdown(html: string): string {\n    if (!html) return '';\n\n    let md = html;\n\n    // Block elements\n    md = md.replace(/<h1[^>]*>(.*?)<\\/h1>/gi, '# $1\\n');\n    md = md.replace(/<h2[^>]*>(.*?)<\\/h2>/gi, '## $1\\n');\n    md = md.replace(/<h3[^>]*>(.*?)<\\/h3>/gi, '### $1\\n');\n    md = md.replace(/<hr\\s*\\/?>/gi, '---\\n');\n    md = md.replace(/<blockquote[^>]*>(.*?)<\\/blockquote>/gi, '> $1\\n');\n    md = md.replace(/<pre><code[^>]*>([\\s\\S]*?)<\\/code><\\/pre>/gi, '```\\n$1\\n```\\n');\n\n    // Lists\n    md = md.replace(/<ul[^>]*>([\\s\\S]*?)<\\/ul>/gi, '$1');\n    md = md.replace(/<ol[^>]*>([\\s\\S]*?)<\\/ol>/gi, '$1');\n    md = md.replace(/<li[^>]*>(.*?)<\\/li>/gi, '- $1\\n');\n\n    // Inline\n    md = md.replace(/<strong[^>]*>(.*?)<\\/strong>/gi, '**$1**');\n    md = md.replace(/<b[^>]*>(.*?)<\\/b>/gi, '**$1**');\n    md = md.replace(/<em[^>]*>(.*?)<\\/em>/gi, '*$1*');\n    md = md.replace(/<i[^>]*>(.*?)<\\/i>/gi, '*$1*');\n    md = md.replace(/<del[^>]*>(.*?)<\\/del>/gi, '~~$1~~');\n    md = md.replace(/<u[^>]*>(.*?)<\\/u>/gi, '<u>$1</u>');\n    md = md.replace(/<code[^>]*>(.*?)<\\/code>/gi, '`$1`');\n    md = md.replace(/<a[^>]*href=\"([^\"]*)\"[^>]*>(.*?)<\\/a>/gi, '[$2]($1)');\n    md = md.replace(/<img[^>]*alt=\"([^\"]*)\"[^>]*src=\"([^\"]*)\"[^>]*\\/?>/gi, '![$1]($2)');\n\n    // Paragraphs and line breaks\n    md = md.replace(/<p[^>]*>(.*?)<\\/p>/gi, '$1\\n\\n');\n    md = md.replace(/<br\\s*\\/?>/gi, '\\n');\n    md = md.replace(/<div[^>]*>(.*?)<\\/div>/gi, '$1\\n');\n\n    // Strip remaining HTML tags\n    md = md.replace(/<[^>]+>/g, '');\n\n    // Decode HTML entities\n    md = md.replace(/&amp;/g, '&');\n    md = md.replace(/&lt;/g, '<');\n    md = md.replace(/&gt;/g, '>');\n    md = md.replace(/&quot;/g, '\"');\n    md = md.replace(/&nbsp;/g, ' ');\n\n    // Normalize whitespace\n    md = md.replace(/\\n{3,}/g, '\\n\\n');\n\n    return md.trim();\n  }\n}\n","<div class=\"lc-rich-text-editor\" [class.lc-rich-text-editor--disabled]=\"isDisabled()\">\n  <!-- Toolbar -->\n  <div class=\"lc-rich-text-editor__toolbar\">\n    <div class=\"lc-rich-text-editor__toolbar-actions\">\n      @for (action of toolbar().actions; track action) {\n        <button\n          type=\"button\"\n          class=\"lc-rich-text-editor__toolbar-btn\"\n          [title]=\"getActionTitle(action)\"\n          [attr.aria-label]=\"getActionTitle(action)\"\n          [disabled]=\"!editable()\"\n          (click)=\"onToolbarAction(action)\"\n        >\n          {{ getActionLabel(action) }}\n        </button>\n      }\n    </div>\n    <div class=\"lc-rich-text-editor__toolbar-modes\">\n      <button\n        type=\"button\"\n        class=\"lc-rich-text-editor__mode-btn\"\n        [class.active]=\"activeMode() === 'rich'\"\n        (click)=\"switchMode('rich')\"\n        [attr.title]=\"richModeTitle()\"\n      >{{ richModeLabel() }}</button>\n      <button\n        type=\"button\"\n        class=\"lc-rich-text-editor__mode-btn\"\n        [class.active]=\"activeMode() === 'markdown'\"\n        (click)=\"switchMode('markdown')\"\n        [attr.title]=\"markdownModeTitle()\"\n      >{{ markdownModeLabel() }}</button>\n      <button\n        type=\"button\"\n        class=\"lc-rich-text-editor__mode-btn\"\n        [class.active]=\"activeMode() === 'split'\"\n        (click)=\"switchMode('split')\"\n        [attr.title]=\"splitModeTitle()\"\n      >{{ splitModeLabel() }}</button>\n    </div>\n  </div>\n\n  <!-- Editor area -->\n  <div\n    class=\"lc-rich-text-editor__content\"\n    [style.min-height.px]=\"minHeight()\"\n    [style.max-height.px]=\"maxHeight() || null\"\n  >\n    @switch (activeMode()) {\n      @case ('rich') {\n        <!-- The rich area is filled from the markdown by the component (see the\n             constructor effect); it must never receive markup Angular hasn't\n             sanitised. `contenteditable` follows the disabled/readonly state —\n             a greyed-out toolbar alone would still let the user type. -->\n        <div\n          #richArea\n          class=\"lc-rich-text-editor__rich\"\n          [attr.contenteditable]=\"editable() ? 'true' : 'false'\"\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n          [attr.aria-readonly]=\"readonly() && !isDisabled() ? 'true' : null\"\n          [attr.data-placeholder]=\"placeholder()\"\n          [class.lc-rich-text-editor__rich--empty]=\"!markdown()\"\n          (input)=\"onRichInput()\"\n          (blur)=\"onBlur()\"\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          [attr.aria-label]=\"placeholder()\"\n        ></div>\n      }\n      @case ('markdown') {\n        <textarea\n          #editorArea\n          class=\"lc-rich-text-editor__textarea\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"markdown()\"\n          [disabled]=\"isDisabled()\"\n          [readOnly]=\"readonly()\"\n          (input)=\"onMarkdownInput($event)\"\n          (blur)=\"onBlur()\"\n          spellcheck=\"false\"\n          [attr.aria-label]=\"markdownEditorAriaLabel()\"\n        ></textarea>\n      }\n      @case ('split') {\n        <div class=\"lc-rich-text-editor__split\">\n          <textarea\n            #editorArea\n            class=\"lc-rich-text-editor__textarea lc-rich-text-editor__split-editor\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"markdown()\"\n            [disabled]=\"isDisabled()\"\n            [readOnly]=\"readonly()\"\n            (input)=\"onMarkdownInput($event)\"\n            (blur)=\"onBlur()\"\n            spellcheck=\"false\"\n            [attr.aria-label]=\"markdownEditorAriaLabel()\"\n          ></textarea>\n          <div\n            class=\"lc-rich-text-editor__split-preview\"\n            [innerHTML]=\"renderedHtml()\"\n          ></div>\n        </div>\n      }\n    }\n  </div>\n\n  <!-- Footer -->\n  @if (showWordCount()) {\n    <div class=\"lc-rich-text-editor__footer\">\n      <span>{{ wordCount() }} {{ wordsLabel() }}</span>\n      <span>{{ charCount() }} {{ charactersLabel() }}</span>\n    </div>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-scatter-plot.mjs

@@ -0,0 +1,415 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from "@angular/core";
+import { chartColor, formatChartValue, niceScale, toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+const TOOLTIP_CHAR_W = 6;
+const TOOLTIP_H = 18;
+var ScatterPlotComponent = class ScatterPlotComponent {
+	series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	width = input(400, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(300, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []);
+	showXLabels = input(true, ...ngDevMode ? [{ debugName: "showXLabels" }] : /* istanbul ignore next */ []);
+	showYLabels = input(true, ...ngDevMode ? [{ debugName: "showYLabels" }] : /* istanbul ignore next */ []);
+	showLegend = input(false, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
+	showTooltip = input(true, ...ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []);
+	dotRadius = input(4, ...ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []);
+	xAxisLabel = input("", ...ngDevMode ? [{ debugName: "xAxisLabel" }] : /* istanbul ignore next */ []);
+	yAxisLabel = input("", ...ngDevMode ? [{ debugName: "yAxisLabel" }] : /* istanbul ignore next */ []);
+	interactive = input(true, ...ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []);
+	formatValue = input(formatChartValue, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	pointClick = output();
+	hoveredPoint = signal(null, ...ngDevMode ? [{ debugName: "hoveredPoint" }] : /* istanbul ignore next */ []);
+	PL = 48;
+	PR = 16;
+	PT = 16;
+	PB = 36;
+	viewBox = computed(() => `0 0 ${this.width()} ${this.height()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	cleanSeries = computed(() => (this.series() ?? []).map((ser) => ({
+		...ser,
+		data: (ser.data ?? []).map((p) => ({
+			...p,
+			x: toFinite(p.x),
+			y: toFinite(p.y)
+		}))
+	})), ...ngDevMode ? [{ debugName: "cleanSeries" }] : /* istanbul ignore next */ []);
+	allPoints = computed(() => this.cleanSeries().flatMap((s) => s.data), ...ngDevMode ? [{ debugName: "allPoints" }] : /* istanbul ignore next */ []);
+	extent(values) {
+		if (!values.length) return niceScale(0, 1, 5);
+		const min = Math.min(...values);
+		const max = Math.max(...values);
+		const pad = (max - min) * .05 || .5;
+		return niceScale(min - pad, max + pad, 5);
+	}
+	xScale = computed(() => this.extent(this.allPoints().map((p) => p.x)), ...ngDevMode ? [{ debugName: "xScale" }] : /* istanbul ignore next */ []);
+	yScale = computed(() => this.extent(this.allPoints().map((p) => p.y)), ...ngDevMode ? [{ debugName: "yScale" }] : /* istanbul ignore next */ []);
+	plotArea = computed(() => ({
+		x: this.PL,
+		y: this.PT,
+		w: this.width() - this.PL - this.PR,
+		h: this.height() - this.PT - this.PB
+	}), ...ngDevMode ? [{ debugName: "plotArea" }] : /* istanbul ignore next */ []);
+	toSx(x) {
+		const { min, max } = this.xScale();
+		const pa = this.plotArea();
+		return pa.x + (x - min) / (max - min || 1) * pa.w;
+	}
+	toSy(y) {
+		const { min, max } = this.yScale();
+		const pa = this.plotArea();
+		return pa.y + pa.h - (y - min) / (max - min || 1) * pa.h;
+	}
+	gridLinesX = computed(() => {
+		if (!this.showGrid()) return [];
+		const fmt = this.formatValue();
+		return this.xScale().ticks.map((tick) => ({
+			x: this.toSx(tick),
+			label: fmt(tick)
+		}));
+	}, ...ngDevMode ? [{ debugName: "gridLinesX" }] : /* istanbul ignore next */ []);
+	gridLinesY = computed(() => {
+		if (!this.showGrid()) return [];
+		const fmt = this.formatValue();
+		return this.yScale().ticks.map((tick) => ({
+			y: this.toSy(tick),
+			label: fmt(tick)
+		}));
+	}, ...ngDevMode ? [{ debugName: "gridLinesY" }] : /* istanbul ignore next */ []);
+	renderedSeries = computed(() => {
+		const dr = this.dotRadius();
+		const fmt = this.formatValue();
+		return this.cleanSeries().map((ser, si) => {
+			const color = ser.color || chartColor(si);
+			const points = ser.data.map((p) => {
+				const coords = `(${fmt(p.x)}, ${fmt(p.y)})`;
+				const label = p.label || coords;
+				return {
+					cx: this.toSx(p.x),
+					cy: this.toSy(p.y),
+					r: Math.max(0, toFinite(p.size, dr)),
+					label,
+					ariaLabel: `${ser.label}: ${p.label ? `${p.label} ${coords}` : coords}`,
+					orig: p
+				};
+			});
+			return {
+				label: ser.label,
+				color,
+				points
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "renderedSeries" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		if (!this.showLegend()) return [];
+		return this.renderedSeries().map((s) => ({
+			label: s.label,
+			color: s.color
+		}));
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	axisLine = computed(() => {
+		const pa = this.plotArea();
+		return {
+			vx1: pa.x,
+			vy1: pa.y,
+			vx2: pa.x,
+			vy2: pa.y + pa.h,
+			hx1: pa.x,
+			hy1: pa.y + pa.h,
+			hx2: pa.x + pa.w,
+			hy2: pa.y + pa.h
+		};
+	}, ...ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const series = this.cleanSeries();
+		const xl = this.xAxisLabel();
+		const yl = this.yAxisLabel();
+		const axes = xl || yl ? ` (${xl || "x"} vs ${yl || "y"})` : "";
+		if (!series.length) return `Scatter plot${axes}: no data`;
+		return `Scatter plot${axes}: ${series.map((s, i) => {
+			const n = s.data.length;
+			return `${s.label || `Series ${i + 1}`} ${n} ${n === 1 ? "point" : "points"}`;
+		}).join(", ")}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	onDotEnter(cx, cy, label) {
+		if (!this.showTooltip()) return;
+		const w = label.length * TOOLTIP_CHAR_W + 16;
+		const half = w / 2;
+		const sx = Math.min(Math.max(cx, half), this.width() - half);
+		const above = cy - 12 - TOOLTIP_H;
+		this.hoveredPoint.set({
+			label,
+			sx,
+			ty: above < 0 ? cy + 12 : above,
+			w
+		});
+	}
+	onDotLeave() {
+		this.hoveredPoint.set(null);
+	}
+	onDotClick(seriesLabel, point) {
+		this.pointClick.emit({
+			series: seriesLabel,
+			point
+		});
+	}
+	tooltipH = TOOLTIP_H;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ScatterPlotComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ScatterPlotComponent,
+		isStandalone: true,
+		selector: "lc-scatter-plot",
+		inputs: {
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showGrid: {
+				classPropertyName: "showGrid",
+				publicName: "showGrid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showXLabels: {
+				classPropertyName: "showXLabels",
+				publicName: "showXLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showYLabels: {
+				classPropertyName: "showYLabels",
+				publicName: "showYLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLegend: {
+				classPropertyName: "showLegend",
+				publicName: "showLegend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTooltip: {
+				classPropertyName: "showTooltip",
+				publicName: "showTooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dotRadius: {
+				classPropertyName: "dotRadius",
+				publicName: "dotRadius",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			xAxisLabel: {
+				classPropertyName: "xAxisLabel",
+				publicName: "xAxisLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			yAxisLabel: {
+				classPropertyName: "yAxisLabel",
+				publicName: "yAxisLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			interactive: {
+				classPropertyName: "interactive",
+				publicName: "interactive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formatValue: {
+				classPropertyName: "formatValue",
+				publicName: "formatValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { pointClick: "pointClick" },
+		ngImport: i0,
+		template: "<div class=\"lc-scatter-plot\">\n  <svg\n    [attr.width]=\"width()\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.role]=\"interactive() ? 'group' : 'img'\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-scatter-plot__svg\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    <!-- Grid, axes and tick labels are decoration for AT; the summary carries the meaning. -->\n    <g aria-hidden=\"true\">\n      <!-- Grid lines Y -->\n      @for (line of gridLinesY(); track line.y) {\n        <line\n          [attr.x1]=\"axisLine().hx1\"\n          [attr.y1]=\"line.y\"\n          [attr.x2]=\"axisLine().hx2\"\n          [attr.y2]=\"line.y\"\n          class=\"lc-scatter-plot__grid-line\"\n        />\n        @if (showYLabels()) {\n          <text\n            [attr.x]=\"axisLine().vx1 - 6\"\n            [attr.y]=\"line.y\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"lc-scatter-plot__label\"\n          >{{ line.label }}</text>\n        }\n      }\n\n      <!-- Grid lines X -->\n      @for (line of gridLinesX(); track line.x) {\n        <line\n          [attr.x1]=\"line.x\"\n          [attr.y1]=\"axisLine().vy1\"\n          [attr.x2]=\"line.x\"\n          [attr.y2]=\"axisLine().vy2\"\n          class=\"lc-scatter-plot__grid-line\"\n        />\n        @if (showXLabels()) {\n          <!-- Tick labels sit just under the plot; the axis title takes the last line of\n               the bottom padding, so the two never overlap. -->\n          <text\n            [attr.x]=\"line.x\"\n            [attr.y]=\"plotArea().y + plotArea().h + 14\"\n            text-anchor=\"middle\"\n            class=\"lc-scatter-plot__label\"\n          >{{ line.label }}</text>\n        }\n      }\n\n      <!-- Axes -->\n      <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-scatter-plot__axis\" />\n      <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-scatter-plot__axis\" />\n\n      <!-- Axis labels -->\n      @if (xAxisLabel()) {\n        <text [attr.x]=\"plotArea().x + plotArea().w / 2\" [attr.y]=\"height() - 3\" text-anchor=\"middle\" class=\"lc-scatter-plot__axis-label\">{{ xAxisLabel() }}</text>\n      }\n      @if (yAxisLabel()) {\n        <text [attr.x]=\"12\" [attr.y]=\"plotArea().y + plotArea().h / 2\" text-anchor=\"middle\" [attr.transform]=\"'rotate(-90, 12, ' + (plotArea().y + plotArea().h / 2) + ')'\" class=\"lc-scatter-plot__axis-label\">{{ yAxisLabel() }}</text>\n      }\n    </g>\n\n    <!-- Series dots -->\n    @for (ser of renderedSeries(); track $index) {\n      @for (pt of ser.points; track $index) {\n        <circle\n          [attr.cx]=\"pt.cx\"\n          [attr.cy]=\"pt.cy\"\n          [attr.r]=\"pt.r\"\n          [attr.fill]=\"ser.color\"\n          class=\"lc-scatter-plot__dot\"\n          [class.lc-scatter-plot__dot--interactive]=\"interactive()\"\n          [attr.tabindex]=\"interactive() ? 0 : null\"\n          [attr.role]=\"interactive() ? 'button' : null\"\n          [attr.aria-label]=\"interactive() ? pt.ariaLabel : null\"\n          (mouseenter)=\"onDotEnter(pt.cx, pt.cy, pt.label)\"\n          (mouseleave)=\"onDotLeave()\"\n          (focus)=\"onDotEnter(pt.cx, pt.cy, pt.label)\"\n          (blur)=\"onDotLeave()\"\n          (click)=\"onDotClick(ser.label, pt.orig)\"\n          (keydown.enter)=\"onDotClick(ser.label, pt.orig)\"\n          (keydown.space)=\"$event.preventDefault(); onDotClick(ser.label, pt.orig)\"\n        />\n      }\n    }\n\n    <!-- Tooltip -->\n    @if (hoveredPoint(); as hp) {\n      <g class=\"lc-scatter-plot__tooltip\" aria-hidden=\"true\">\n        <rect\n          [attr.x]=\"hp.sx - hp.w / 2\"\n          [attr.y]=\"hp.ty\"\n          [attr.width]=\"hp.w\"\n          [attr.height]=\"tooltipH\"\n          rx=\"4\"\n          class=\"lc-scatter-plot__tooltip-bg\"\n        />\n        <text\n          [attr.x]=\"hp.sx\"\n          [attr.y]=\"hp.ty + tooltipH / 2\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n          class=\"lc-scatter-plot__tooltip-text\"\n        >{{ hp.label }}</text>\n      </g>\n    }\n  </svg>\n\n  @if (legendItems().length) {\n    <div class=\"lc-scatter-plot__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-scatter-plot__legend-item\">\n          <span class=\"lc-scatter-plot__legend-dot\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-scatter-plot__legend-label\">{{ item.label }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+		styles: [".lc-scatter-plot{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem}.lc-scatter-plot__svg{overflow:visible}.lc-scatter-plot__axis{stroke:var(--color-border);stroke-width:1}.lc-scatter-plot__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-scatter-plot__label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-scatter-plot__axis-label{font-size:.6875rem;fill:var(--color-text-secondary);font-weight:500}.lc-scatter-plot__dot{opacity:.8;transition:opacity .15s,r .15s}.lc-scatter-plot__dot--interactive{cursor:pointer}.lc-scatter-plot__dot:hover{opacity:1;r:6}.lc-scatter-plot__dot:focus-visible{outline:none;opacity:1;stroke:var(--color-text-primary);stroke-width:2}.lc-scatter-plot__tooltip{pointer-events:none}.lc-scatter-plot__tooltip-bg{fill:var(--color-surface-raised);stroke:var(--color-border-strong);stroke-width:1}.lc-scatter-plot__tooltip-text{font-size:.625rem;fill:var(--color-text-primary)}.lc-scatter-plot__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-scatter-plot__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-scatter-plot__legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-scatter-plot__legend-label{color:var(--color-text-secondary)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ScatterPlotComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-scatter-plot",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-scatter-plot\">\n  <svg\n    [attr.width]=\"width()\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.role]=\"interactive() ? 'group' : 'img'\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-scatter-plot__svg\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    <!-- Grid, axes and tick labels are decoration for AT; the summary carries the meaning. -->\n    <g aria-hidden=\"true\">\n      <!-- Grid lines Y -->\n      @for (line of gridLinesY(); track line.y) {\n        <line\n          [attr.x1]=\"axisLine().hx1\"\n          [attr.y1]=\"line.y\"\n          [attr.x2]=\"axisLine().hx2\"\n          [attr.y2]=\"line.y\"\n          class=\"lc-scatter-plot__grid-line\"\n        />\n        @if (showYLabels()) {\n          <text\n            [attr.x]=\"axisLine().vx1 - 6\"\n            [attr.y]=\"line.y\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"lc-scatter-plot__label\"\n          >{{ line.label }}</text>\n        }\n      }\n\n      <!-- Grid lines X -->\n      @for (line of gridLinesX(); track line.x) {\n        <line\n          [attr.x1]=\"line.x\"\n          [attr.y1]=\"axisLine().vy1\"\n          [attr.x2]=\"line.x\"\n          [attr.y2]=\"axisLine().vy2\"\n          class=\"lc-scatter-plot__grid-line\"\n        />\n        @if (showXLabels()) {\n          <!-- Tick labels sit just under the plot; the axis title takes the last line of\n               the bottom padding, so the two never overlap. -->\n          <text\n            [attr.x]=\"line.x\"\n            [attr.y]=\"plotArea().y + plotArea().h + 14\"\n            text-anchor=\"middle\"\n            class=\"lc-scatter-plot__label\"\n          >{{ line.label }}</text>\n        }\n      }\n\n      <!-- Axes -->\n      <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-scatter-plot__axis\" />\n      <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-scatter-plot__axis\" />\n\n      <!-- Axis labels -->\n      @if (xAxisLabel()) {\n        <text [attr.x]=\"plotArea().x + plotArea().w / 2\" [attr.y]=\"height() - 3\" text-anchor=\"middle\" class=\"lc-scatter-plot__axis-label\">{{ xAxisLabel() }}</text>\n      }\n      @if (yAxisLabel()) {\n        <text [attr.x]=\"12\" [attr.y]=\"plotArea().y + plotArea().h / 2\" text-anchor=\"middle\" [attr.transform]=\"'rotate(-90, 12, ' + (plotArea().y + plotArea().h / 2) + ')'\" class=\"lc-scatter-plot__axis-label\">{{ yAxisLabel() }}</text>\n      }\n    </g>\n\n    <!-- Series dots -->\n    @for (ser of renderedSeries(); track $index) {\n      @for (pt of ser.points; track $index) {\n        <circle\n          [attr.cx]=\"pt.cx\"\n          [attr.cy]=\"pt.cy\"\n          [attr.r]=\"pt.r\"\n          [attr.fill]=\"ser.color\"\n          class=\"lc-scatter-plot__dot\"\n          [class.lc-scatter-plot__dot--interactive]=\"interactive()\"\n          [attr.tabindex]=\"interactive() ? 0 : null\"\n          [attr.role]=\"interactive() ? 'button' : null\"\n          [attr.aria-label]=\"interactive() ? pt.ariaLabel : null\"\n          (mouseenter)=\"onDotEnter(pt.cx, pt.cy, pt.label)\"\n          (mouseleave)=\"onDotLeave()\"\n          (focus)=\"onDotEnter(pt.cx, pt.cy, pt.label)\"\n          (blur)=\"onDotLeave()\"\n          (click)=\"onDotClick(ser.label, pt.orig)\"\n          (keydown.enter)=\"onDotClick(ser.label, pt.orig)\"\n          (keydown.space)=\"$event.preventDefault(); onDotClick(ser.label, pt.orig)\"\n        />\n      }\n    }\n\n    <!-- Tooltip -->\n    @if (hoveredPoint(); as hp) {\n      <g class=\"lc-scatter-plot__tooltip\" aria-hidden=\"true\">\n        <rect\n          [attr.x]=\"hp.sx - hp.w / 2\"\n          [attr.y]=\"hp.ty\"\n          [attr.width]=\"hp.w\"\n          [attr.height]=\"tooltipH\"\n          rx=\"4\"\n          class=\"lc-scatter-plot__tooltip-bg\"\n        />\n        <text\n          [attr.x]=\"hp.sx\"\n          [attr.y]=\"hp.ty + tooltipH / 2\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n          class=\"lc-scatter-plot__tooltip-text\"\n        >{{ hp.label }}</text>\n      </g>\n    }\n  </svg>\n\n  @if (legendItems().length) {\n    <div class=\"lc-scatter-plot__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-scatter-plot__legend-item\">\n          <span class=\"lc-scatter-plot__legend-dot\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-scatter-plot__legend-label\">{{ item.label }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+			styles: [".lc-scatter-plot{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem}.lc-scatter-plot__svg{overflow:visible}.lc-scatter-plot__axis{stroke:var(--color-border);stroke-width:1}.lc-scatter-plot__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-scatter-plot__label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-scatter-plot__axis-label{font-size:.6875rem;fill:var(--color-text-secondary);font-weight:500}.lc-scatter-plot__dot{opacity:.8;transition:opacity .15s,r .15s}.lc-scatter-plot__dot--interactive{cursor:pointer}.lc-scatter-plot__dot:hover{opacity:1;r:6}.lc-scatter-plot__dot:focus-visible{outline:none;opacity:1;stroke:var(--color-text-primary);stroke-width:2}.lc-scatter-plot__tooltip{pointer-events:none}.lc-scatter-plot__tooltip-bg{fill:var(--color-surface-raised);stroke:var(--color-border-strong);stroke-width:1}.lc-scatter-plot__tooltip-text{font-size:.625rem;fill:var(--color-text-primary)}.lc-scatter-plot__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-scatter-plot__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-scatter-plot__legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.lc-scatter-plot__legend-label{color:var(--color-text-secondary)}\n"]
+		}]
+	}],
+	propDecorators: {
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: true
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		showGrid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showGrid",
+				required: false
+			}]
+		}],
+		showXLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showXLabels",
+				required: false
+			}]
+		}],
+		showYLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showYLabels",
+				required: false
+			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		showTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTooltip",
+				required: false
+			}]
+		}],
+		dotRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dotRadius",
+				required: false
+			}]
+		}],
+		xAxisLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "xAxisLabel",
+				required: false
+			}]
+		}],
+		yAxisLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "yAxisLabel",
+				required: false
+			}]
+		}],
+		interactive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "interactive",
+				required: false
+			}]
+		}],
+		formatValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formatValue",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		pointClick: [{
+			type: i0.Output,
+			args: ["pointClick"]
+		}]
+	}
+});
+export { ScatterPlotComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-scatter-plot.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-scatter-plot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-scatter-plot.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/scatter-plot/scatter-plot.component.ts","../../../../libs/angular-ui-kit/src/lib/scatter-plot/scatter-plot.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n  signal,\n  output,\n} from '@angular/core';\nimport { chartColor } from '@lifecorner/angular-ui-kit/internal/chart';\nimport {\n  ChartValueFormatter,\n  formatChartValue,\n  niceScale,\n  toFinite,\n} from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface ScatterPoint {\n  x: number;\n  y: number;\n  label?: string;\n  size?: number;\n}\n\nexport interface ScatterSeries {\n  label: string;\n  data: ScatterPoint[];\n  color?: string;\n}\n\n/** Approximate glyph width of the 10px tooltip font, used to size its backplate. */\nconst TOOLTIP_CHAR_W = 6;\nconst TOOLTIP_PAD_X = 8;\nconst TOOLTIP_H = 18;\n\n@Component({\n  selector: 'lc-scatter-plot',\n  standalone: true,\n  templateUrl: './scatter-plot.component.html',\n  styleUrls: ['./scatter-plot.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Scatter plot for visualizing correlations between two variables.\n *\n * Features:\n * - Multiple data series with automatic color assignment\n * - Variable dot sizes for bubble-chart style (`size` on data points)\n * - Configurable axis labels (X / Y) and grid on a nice tick scale\n * - Interactive dots: hover/focus tooltip, click and Enter/Space emit `pointClick`\n * - Optional legend for multi-series data\n *\n * @example\n * ```html\n * <lc-scatter-plot [series]=\"data\" xAxisLabel=\"Weight\" yAxisLabel=\"Height\" (pointClick)=\"select($event)\" />\n * ```\n */\nexport class ScatterPlotComponent {\n  readonly series = input.required<ScatterSeries[]>();\n  /** Chart width in pixels (fixed; the SVG is not fluid). */\n  readonly width = input(400);\n  /** Chart height in pixels. */\n  readonly height = input(300);\n  readonly showGrid = input(true);\n  readonly showXLabels = input(true);\n  readonly showYLabels = input(true);\n  readonly showLegend = input(false);\n  readonly showTooltip = input(true);\n  readonly dotRadius = input(4);\n  readonly xAxisLabel = input('');\n  readonly yAxisLabel = input('');\n  /**\n   * Whether the dots are interactive: keyboard-focusable buttons that show\n   * the tooltip on focus and emit `pointClick` on click / Enter / Space. When\n   * false the chart is a static image (`role=\"img\"`).\n   */\n  readonly interactive = input(true);\n  /** Formats axis ticks and the default point label. Defaults to a float-safe `String(value)`. */\n  readonly formatValue = input<ChartValueFormatter>(formatChartValue);\n  /**\n   * Accessible name of the chart. Defaults to a generated summary naming the\n   * axes and each series with its point count.\n   */\n  readonly ariaLabel = input<string>('');\n\n  readonly pointClick = output<{ series: string; point: ScatterPoint }>();\n\n  /** Tooltip: label, backplate centre x / top y and width (SVG units). */\n  protected hoveredPoint = signal<{ label: string; sx: number; ty: number; w: number } | null>(null);\n\n  private readonly PL = 48;\n  private readonly PR = 16;\n  private readonly PT = 16;\n  private readonly PB = 36;\n\n  protected readonly viewBox = computed(() => `0 0 ${this.width()} ${this.height()}`);\n\n  private readonly cleanSeries = computed(() =>\n    (this.series() ?? []).map((ser) => ({\n      ...ser,\n      data: (ser.data ?? []).map((p) => ({ ...p, x: toFinite(p.x), y: toFinite(p.y) })),\n    }))\n  );\n\n  private readonly allPoints = computed(() => this.cleanSeries().flatMap(s => s.data));\n\n  /** Nice tick scale over the data extent, padded 5% so edge points don't sit on the axis. */\n  private extent(values: number[]) {\n    if (!values.length) return niceScale(0, 1, 5);\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const pad = (max - min) * 0.05 || 0.5;\n    return niceScale(min - pad, max + pad, 5);\n  }\n\n  private readonly xScale = computed(() => this.extent(this.allPoints().map(p => p.x)));\n  private readonly yScale = computed(() => this.extent(this.allPoints().map(p => p.y)));\n\n  protected readonly plotArea = computed(() => ({\n    x: this.PL,\n    y: this.PT,\n    w: this.width() - this.PL - this.PR,\n    h: this.height() - this.PT - this.PB,\n  }));\n\n  private toSx(x: number): number {\n    const { min, max } = this.xScale();\n    const pa = this.plotArea();\n    return pa.x + ((x - min) / (max - min || 1)) * pa.w;\n  }\n\n  private toSy(y: number): number {\n    const { min, max } = this.yScale();\n    const pa = this.plotArea();\n    return pa.y + pa.h - ((y - min) / (max - min || 1)) * pa.h;\n  }\n\n  protected readonly gridLinesX = computed(() => {\n    if (!this.showGrid()) return [];\n    const fmt = this.formatValue();\n    return this.xScale().ticks.map((tick) => ({ x: this.toSx(tick), label: fmt(tick) }));\n  });\n\n  protected readonly gridLinesY = computed(() => {\n    if (!this.showGrid()) return [];\n    const fmt = this.formatValue();\n    return this.yScale().ticks.map((tick) => ({ y: this.toSy(tick), label: fmt(tick) }));\n  });\n\n  protected readonly renderedSeries = computed(() => {\n    const dr = this.dotRadius();\n    const fmt = this.formatValue();\n\n    return this.cleanSeries().map((ser, si) => {\n      const color = ser.color || chartColor(si);\n      const points = ser.data.map(p => {\n        const coords = `(${fmt(p.x)}, ${fmt(p.y)})`;\n        const label = p.label || coords;\n        return {\n          cx: this.toSx(p.x),\n          cy: this.toSy(p.y),\n          r: Math.max(0, toFinite(p.size, dr)),\n          label,\n          ariaLabel: `${ser.label}: ${p.label ? `${p.label} ${coords}` : coords}`,\n          orig: p,\n        };\n      });\n      return { label: ser.label, color, points };\n    });\n  });\n\n  protected readonly legendItems = computed(() => {\n    if (!this.showLegend()) return [];\n    return this.renderedSeries().map(s => ({ label: s.label, color: s.color }));\n  });\n\n  protected readonly axisLine = computed(() => {\n    const pa = this.plotArea();\n    return {\n      vx1: pa.x, vy1: pa.y, vx2: pa.x, vy2: pa.y + pa.h,\n      hx1: pa.x, hy1: pa.y + pa.h, hx2: pa.x + pa.w, hy2: pa.y + pa.h,\n    };\n  });\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const series = this.cleanSeries();\n    const xl = this.xAxisLabel();\n    const yl = this.yAxisLabel();\n    const axes = xl || yl ? ` (${xl || 'x'} vs ${yl || 'y'})` : '';\n    if (!series.length) return `Scatter plot${axes}: no data`;\n    const parts = series.map((s, i) => {\n      const n = s.data.length;\n      return `${s.label || `Series ${i + 1}`} ${n} ${n === 1 ? 'point' : 'points'}`;\n    });\n    return `Scatter plot${axes}: ${parts.join(', ')}`;\n  });\n\n  protected onDotEnter(cx: number, cy: number, label: string): void {\n    if (!this.showTooltip()) return;\n    // Size the backplate from the label and keep it inside the SVG: clamped\n    // horizontally, flipped below the dot when there is no room above it.\n    const w = label.length * TOOLTIP_CHAR_W + TOOLTIP_PAD_X * 2;\n    const half = w / 2;\n    const sx = Math.min(Math.max(cx, half), this.width() - half);\n    const above = cy - 12 - TOOLTIP_H;\n    this.hoveredPoint.set({ label, sx, ty: above < 0 ? cy + 12 : above, w });\n  }\n\n  protected onDotLeave(): void {\n    this.hoveredPoint.set(null);\n  }\n\n  protected onDotClick(seriesLabel: string, point: ScatterPoint): void {\n    this.pointClick.emit({ series: seriesLabel, point });\n  }\n\n  protected readonly tooltipH = TOOLTIP_H;\n}\n","<div class=\"lc-scatter-plot\">\n  <svg\n    [attr.width]=\"width()\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    [attr.role]=\"interactive() ? 'group' : 'img'\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-scatter-plot__svg\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    <!-- Grid, axes and tick labels are decoration for AT; the summary carries the meaning. -->\n    <g aria-hidden=\"true\">\n      <!-- Grid lines Y -->\n      @for (line of gridLinesY(); track line.y) {\n        <line\n          [attr.x1]=\"axisLine().hx1\"\n          [attr.y1]=\"line.y\"\n          [attr.x2]=\"axisLine().hx2\"\n          [attr.y2]=\"line.y\"\n          class=\"lc-scatter-plot__grid-line\"\n        />\n        @if (showYLabels()) {\n          <text\n            [attr.x]=\"axisLine().vx1 - 6\"\n            [attr.y]=\"line.y\"\n            text-anchor=\"end\"\n            dominant-baseline=\"central\"\n            class=\"lc-scatter-plot__label\"\n          >{{ line.label }}</text>\n        }\n      }\n\n      <!-- Grid lines X -->\n      @for (line of gridLinesX(); track line.x) {\n        <line\n          [attr.x1]=\"line.x\"\n          [attr.y1]=\"axisLine().vy1\"\n          [attr.x2]=\"line.x\"\n          [attr.y2]=\"axisLine().vy2\"\n          class=\"lc-scatter-plot__grid-line\"\n        />\n        @if (showXLabels()) {\n          <!-- Tick labels sit just under the plot; the axis title takes the last line of\n               the bottom padding, so the two never overlap. -->\n          <text\n            [attr.x]=\"line.x\"\n            [attr.y]=\"plotArea().y + plotArea().h + 14\"\n            text-anchor=\"middle\"\n            class=\"lc-scatter-plot__label\"\n          >{{ line.label }}</text>\n        }\n      }\n\n      <!-- Axes -->\n      <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-scatter-plot__axis\" />\n      <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-scatter-plot__axis\" />\n\n      <!-- Axis labels -->\n      @if (xAxisLabel()) {\n        <text [attr.x]=\"plotArea().x + plotArea().w / 2\" [attr.y]=\"height() - 3\" text-anchor=\"middle\" class=\"lc-scatter-plot__axis-label\">{{ xAxisLabel() }}</text>\n      }\n      @if (yAxisLabel()) {\n        <text [attr.x]=\"12\" [attr.y]=\"plotArea().y + plotArea().h / 2\" text-anchor=\"middle\" [attr.transform]=\"'rotate(-90, 12, ' + (plotArea().y + plotArea().h / 2) + ')'\" class=\"lc-scatter-plot__axis-label\">{{ yAxisLabel() }}</text>\n      }\n    </g>\n\n    <!-- Series dots -->\n    @for (ser of renderedSeries(); track $index) {\n      @for (pt of ser.points; track $index) {\n        <circle\n          [attr.cx]=\"pt.cx\"\n          [attr.cy]=\"pt.cy\"\n          [attr.r]=\"pt.r\"\n          [attr.fill]=\"ser.color\"\n          class=\"lc-scatter-plot__dot\"\n          [class.lc-scatter-plot__dot--interactive]=\"interactive()\"\n          [attr.tabindex]=\"interactive() ? 0 : null\"\n          [attr.role]=\"interactive() ? 'button' : null\"\n          [attr.aria-label]=\"interactive() ? pt.ariaLabel : null\"\n          (mouseenter)=\"onDotEnter(pt.cx, pt.cy, pt.label)\"\n          (mouseleave)=\"onDotLeave()\"\n          (focus)=\"onDotEnter(pt.cx, pt.cy, pt.label)\"\n          (blur)=\"onDotLeave()\"\n          (click)=\"onDotClick(ser.label, pt.orig)\"\n          (keydown.enter)=\"onDotClick(ser.label, pt.orig)\"\n          (keydown.space)=\"$event.preventDefault(); onDotClick(ser.label, pt.orig)\"\n        />\n      }\n    }\n\n    <!-- Tooltip -->\n    @if (hoveredPoint(); as hp) {\n      <g class=\"lc-scatter-plot__tooltip\" aria-hidden=\"true\">\n        <rect\n          [attr.x]=\"hp.sx - hp.w / 2\"\n          [attr.y]=\"hp.ty\"\n          [attr.width]=\"hp.w\"\n          [attr.height]=\"tooltipH\"\n          rx=\"4\"\n          class=\"lc-scatter-plot__tooltip-bg\"\n        />\n        <text\n          [attr.x]=\"hp.sx\"\n          [attr.y]=\"hp.ty + tooltipH / 2\"\n          text-anchor=\"middle\"\n          dominant-baseline=\"central\"\n          class=\"lc-scatter-plot__tooltip-text\"\n        >{{ hp.label }}</text>\n      </g>\n    }\n  </svg>\n\n  @if (legendItems().length) {\n    <div class=\"lc-scatter-plot__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-scatter-plot__legend-item\">\n          <span class=\"lc-scatter-plot__legend-dot\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-scatter-plot__legend-label\">{{ item.label }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n"],"mappings":"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"}