npm - @lifecorner/angular-ui-kit - Versions diffs - 3.26.0 → 3.27.1 - Mend

@lifecorner/angular-ui-kit 3.26.0 → 3.27.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

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

	@@ -1 +1 @@
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';\nimport { nameWithText } from '@lifecorner/angular-ui-kit/internal/a11y';\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 '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": ''',\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 /\n Tooltips and accessible names of the toolbar actions, by action\n * (`{ bold: 'Fett' }`); missing ones keep the English default. A visible\n * button label with letters or digits that the title doesn't contain is\n * appended (`Heading 1, H1`, WCAG 2.5.3 Label in Name).\n * @default {}\n /\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 /\n Tooltip and accessible name of a toolbar button (AS-33, WCAG 2.5.3 Label\n * in Name): the title, then the visible label when it has letters or digits\n * the title doesn't contain (`Heading 1, H1`). Symbol labels keep the title.\n /\n protected getActionName(action: ToolbarAction): string {\n return nameWithText(this.getActionTitle(action), this.getActionLabel(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(/<u>(.+?)<\\/u>/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 `>` by now, the source having been escaped.\n html = html.replace(/^> (.+)$/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(/&/g, '&');\n md = md.replace(/</g, '<');\n md = md.replace(/>/g, '>');\n md = md.replace(/"/g, '\"');\n md = md.replace(/ /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]=\"getActionName(action)\"\n [attr.aria-label]=\"getActionName(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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"}
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';\nimport { nameWithText } from '@lifecorner/angular-ui-kit/internal/a11y';\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 '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": ''',\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 /\n Tooltips and accessible names of the toolbar actions, by action\n * (`{ bold: 'Fett' }`); missing ones keep the English default. A visible\n * button label with letters or digits that the title doesn't contain is\n * appended (`Heading 1, H1`, WCAG 2.5.3 Label in Name).\n * @default {}\n /\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 /\n Tooltip and accessible name of a toolbar button (AS-33, WCAG 2.5.3 Label\n * in Name): the title, then the visible label when it has letters or digits\n * the title doesn't contain (`Heading 1, H1`). Symbol labels keep the title.\n /\n protected getActionName(action: ToolbarAction): string {\n return nameWithText(this.getActionTitle(action), this.getActionLabel(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(/<u>(.+?)<\\/u>/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 `>` by now, the source having been escaped.\n html = html.replace(/^> (.+)$/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(/&/g, '&');\n md = md.replace(/</g, '<');\n md = md.replace(/>/g, '>');\n md = md.replace(/"/g, '\"');\n md = md.replace(/ /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]=\"getActionName(action)\"\n [attr.aria-label]=\"getActionName(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 CHANGED Viewed

@@ -272,7 +272,7 @@ var ScatterPlotComponent = class ScatterPlotComponent {
 		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"],
+		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}@media(forced-colors:active){.lc-scatter-plot__dot:focus-visible{stroke:Highlight}}.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
 	});
 };
@@ -288,7 +288,7 @@ i0.ɵɵngDeclareClassMetadata({
 			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"]
+			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}@media(forced-colors:active){.lc-scatter-plot__dot:focus-visible{stroke:Highlight}}.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: {

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

	@@ -1 +1 @@
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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"}
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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"}

package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs CHANGED Viewed

@@ -161,7 +161,7 @@ var SearchInputComponent = class SearchInputComponent {
 		}],
 		ngImport: i0,
 		template: "<div [class]=\"wrapperClasses()\">\n  <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n  <input\n    #searchInputEl\n    type=\"search\"\n    class=\"search-input__field\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  />\n  @if (value()) {\n    <button\n      type=\"button\"\n      class=\"search-input__clear\"\n      (click)=\"clear()\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"disabled()\"\n    >\n      <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n    </button>\n  }\n</div>\n",
-		styles: [":host{display:block;width:100%}.search-input{display:flex;align-items:center;gap:.5rem;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:border-color .15s ease,box-shadow .15s ease}.search-input:hover:not(.search-input--disabled){border-color:var(--color-text-secondary)}.search-input:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 2px #20849733}.search-input--sm{padding:.375rem .625rem;font-size:.8125rem}.search-input--md{padding:.5rem .75rem;font-size:.875rem}.search-input--lg{padding:.625rem 1rem;font-size:1rem}.search-input--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.search-input__icon{flex-shrink:0;color:var(--color-text-tertiary);--icon-size: 1rem}.search-input__field{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--color-text-primary);min-width:0}.search-input__field::placeholder{color:var(--color-text-tertiary)}.search-input__field::-webkit-search-cancel-button,.search-input__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.search-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;transition:background .15s ease}.search-input__clear:hover{background:var(--color-border-strong)}.search-input__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.search-input__clear-icon{--icon-size: .75rem;color:var(--color-text-secondary)}\n"],
+		styles: [":host{display:block;width:100%}.search-input{display:flex;align-items:center;gap:.5rem;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:border-color .15s ease,box-shadow .15s ease}.search-input:hover:not(.search-input--disabled):not(:focus-within){border-color:var(--color-text-secondary)}.search-input:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 2px #20849733}.search-input--sm{padding:.375rem .625rem;font-size:.8125rem}.search-input--md{padding:.5rem .75rem;font-size:.875rem}.search-input--lg{padding:.625rem 1rem;font-size:1rem}.search-input--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.search-input__icon{flex-shrink:0;color:var(--color-text-tertiary);--icon-size: 1rem}.search-input__field{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--color-text-primary);min-width:0}.search-input__field::placeholder{color:var(--color-text-tertiary)}.search-input__field::-webkit-search-cancel-button,.search-input__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.search-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;transition:background .15s ease}.search-input__clear:hover{background:var(--color-border-strong)}.search-input__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.search-input__clear-icon{--icon-size: .75rem;color:var(--color-text-secondary)}\n"],
 		dependencies: [{
 			kind: "component",
 			type: IconComponent,
@@ -194,7 +194,7 @@ i0.ɵɵngDeclareClassMetadata({
 			viewProviders: [ɵprovideKitIcons([ICON_X_MARK, ICON_SEARCH])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<div [class]=\"wrapperClasses()\">\n  <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n  <input\n    #searchInputEl\n    type=\"search\"\n    class=\"search-input__field\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  />\n  @if (value()) {\n    <button\n      type=\"button\"\n      class=\"search-input__clear\"\n      (click)=\"clear()\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"disabled()\"\n    >\n      <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n    </button>\n  }\n</div>\n",
-			styles: [":host{display:block;width:100%}.search-input{display:flex;align-items:center;gap:.5rem;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:border-color .15s ease,box-shadow .15s ease}.search-input:hover:not(.search-input--disabled){border-color:var(--color-text-secondary)}.search-input:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 2px #20849733}.search-input--sm{padding:.375rem .625rem;font-size:.8125rem}.search-input--md{padding:.5rem .75rem;font-size:.875rem}.search-input--lg{padding:.625rem 1rem;font-size:1rem}.search-input--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.search-input__icon{flex-shrink:0;color:var(--color-text-tertiary);--icon-size: 1rem}.search-input__field{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--color-text-primary);min-width:0}.search-input__field::placeholder{color:var(--color-text-tertiary)}.search-input__field::-webkit-search-cancel-button,.search-input__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.search-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;transition:background .15s ease}.search-input__clear:hover{background:var(--color-border-strong)}.search-input__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.search-input__clear-icon{--icon-size: .75rem;color:var(--color-text-secondary)}\n"]
+			styles: [":host{display:block;width:100%}.search-input{display:flex;align-items:center;gap:.5rem;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:border-color .15s ease,box-shadow .15s ease}.search-input:hover:not(.search-input--disabled):not(:focus-within){border-color:var(--color-text-secondary)}.search-input:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 2px #20849733}.search-input--sm{padding:.375rem .625rem;font-size:.8125rem}.search-input--md{padding:.5rem .75rem;font-size:.875rem}.search-input--lg{padding:.625rem 1rem;font-size:1rem}.search-input--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.search-input__icon{flex-shrink:0;color:var(--color-text-tertiary);--icon-size: 1rem}.search-input__field{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--color-text-primary);min-width:0}.search-input__field::placeholder{color:var(--color-text-tertiary)}.search-input__field::-webkit-search-cancel-button,.search-input__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.search-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;transition:background .15s ease}.search-input__clear:hover{background:var(--color-border-strong)}.search-input__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.search-input__clear-icon{--icon-size: .75rem;color:var(--color-text-secondary)}\n"]
 		}]
 	}],
 	ctorParameters: () => [],

package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lifecorner-angular-ui-kit-search-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.ts","../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n effect,\n input,\n model,\n output,\n computed,\n ElementRef,\n untracked,\n viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_SEARCH, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { Subject, debounce, distinctUntilChanged, filter, of, timer } from 'rxjs';\n\nexport type SearchInputSize = 'sm' \| 'md' \| 'lg';\n\n/** A value travelling through the debounce pipe. /\ninterface SearchEmission {\n readonly value: string;\n /* Bypass the debounce (clear button, external writes). /\n readonly immediate: boolean;\n /* Only update the dedupe baseline, never reach `searchChange` (external writes). /\n readonly silent: boolean;\n}\n\nlet nextUniqueId = 0;\n\n/\n Search input component with integrated search functionality.\n \n Features:\n * - Built-in search icon\n * - Clear button for resetting input\n * - RxJS-based configurable debounce\n * - Multiple size variants (sm, md, lg)\n * - Disabled state support\n * - Submit event on Enter key\n * - Two-way bindable `value` so a parent can preset or reset the query\n \n @example\n * ```html\n * <lc-search-input\n * placeholder=\"Search...\"\n * [debounceMs]=\"300\"\n * [(value)]=\"query\"\n * (searchChange)=\"onSearch($event)\"\n * ></lc-search-input>\n * ```\n /\n@Component({\n selector: 'lc-search-input',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_X_MARK, ICON_SEARCH])],\n templateUrl: './search-input.component.html',\n styleUrls: ['./search-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SearchInputComponent {\n /\n id of the native input (lets a parent `<label for>` point at it).\n * @default generated\n /\n readonly inputId = input<string>(`lc-search-input-${++nextUniqueId}`);\n\n /\n Placeholder text.\n * @default 'Search…'\n /\n placeholder = input<string>('Search…');\n\n /\n Size variant.\n * @default 'md'\n /\n size = input<SearchInputSize>('md');\n\n /\n Debounce delay in milliseconds. 0 means no debounce.\n * @default 300\n /\n debounceMs = input<number>(300);\n\n /\n Whether the search input is disabled.\n * @default false\n /\n disabled = input<boolean>(false);\n\n /\n Accessible name of the input.\n * @default 'Search'\n /\n readonly ariaLabel = input<string>();\n\n /* id(s) of external element(s) labelling the input (wins over `ariaLabel`). /\n readonly ariaLabelledBy = input<string>();\n\n /* Accessible name of the clear button. /\n readonly clearAriaLabel = input('Clear search');\n\n /\n Current query (two-way bindable). Writing it from outside updates the\n * field without emitting `searchChange`; `valueChange` emits on every\n * keystroke (undebounced) and on clear.\n /\n readonly value = model<string>('');\n\n /\n Emitted when the search value changes (debounced).\n /\n readonly searchChange = output<string>();\n\n /\n Emitted when the user presses Enter.\n /\n readonly searchSubmit = output<string>();\n\n protected readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('searchInputEl');\n\n protected wrapperClasses = computed(() => {\n return [\n 'search-input',\n `search-input--${this.size()}`,\n this.disabled() ? 'search-input--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n private readonly input$ = new Subject<SearchEmission>();\n /* Last value pushed into the pipe (by typing, clear or an external write). */\n private lastPushed = '';\n\n constructor() {\n this.input$\n .pipe(\n // debounceMs is read per emission, so changing it takes effect immediately.\n // 0 means \"no debounce\" — emit synchronously rather than on a 0ms timer.\n debounce(({ immediate }) => {\n const ms = this.debounceMs();\n return immediate \|\| ms <= 0 ? of(null) : timer(ms);\n }),\n distinctUntilChanged((a, b) => a.value === b.value),\n filter(({ silent }) => !silent),\n takeUntilDestroyed(),\n )\n .subscribe(({ value }) => this.searchChange.emit(value));\n\n // A value written from outside is already known to the parent: run it through\n // the pipe silently so it becomes the dedupe baseline (and cancels a pending\n // debounce) without echoing a searchChange back.\n effect(() => {\n const value = this.value();\n untracked(() => {\n if (value !== this.lastPushed) {\n this.push(value, { immediate: true, silent: true });\n }\n });\n });\n }\n\n protected onInput(event: Event): void {\n const val = (event.target as HTMLInputElement).value;\n this.value.set(val);\n this.push(val, { immediate: false, silent: false });\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this.searchSubmit.emit(this.value());\n }\n }\n\n protected clear(): void {\n this.value.set('');\n // immediate: emits '' synchronously through the pipe, exactly once\n this.push('', { immediate: true, silent: false });\n this.inputRef()?.nativeElement.focus();\n }\n\n private push(value: string, opts: Omit<SearchEmission, 'value'>): void {\n this.lastPushed = value;\n this.input$.next({ value, ...opts });\n }\n}\n","<div [class]=\"wrapperClasses()\">\n <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n <input\n #searchInputEl\n type=\"search\"\n class=\"search-input__field\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() \|\| 'Search'\"\n [attr.aria-labelledby]=\"ariaLabelledBy() \|\| null\"\n />\n @if (value()) {\n <button\n type=\"button\"\n class=\"search-input__clear\"\n (click)=\"clear()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"disabled()\"\n >\n <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n </button>\n }\n</div>\n"],"mappings":"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"}
1	+ {"version":3,"file":"lifecorner-angular-ui-kit-search-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.ts","../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.html"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n effect,\n input,\n model,\n output,\n computed,\n ElementRef,\n untracked,\n viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_SEARCH, ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { Subject, debounce, distinctUntilChanged, filter, of, timer } from 'rxjs';\n\nexport type SearchInputSize = 'sm' \| 'md' \| 'lg';\n\n/** A value travelling through the debounce pipe. /\ninterface SearchEmission {\n readonly value: string;\n /* Bypass the debounce (clear button, external writes). /\n readonly immediate: boolean;\n /* Only update the dedupe baseline, never reach `searchChange` (external writes). /\n readonly silent: boolean;\n}\n\nlet nextUniqueId = 0;\n\n/\n Search input component with integrated search functionality.\n \n Features:\n * - Built-in search icon\n * - Clear button for resetting input\n * - RxJS-based configurable debounce\n * - Multiple size variants (sm, md, lg)\n * - Disabled state support\n * - Submit event on Enter key\n * - Two-way bindable `value` so a parent can preset or reset the query\n \n @example\n * ```html\n * <lc-search-input\n * placeholder=\"Search...\"\n * [debounceMs]=\"300\"\n * [(value)]=\"query\"\n * (searchChange)=\"onSearch($event)\"\n * ></lc-search-input>\n * ```\n /\n@Component({\n selector: 'lc-search-input',\n standalone: true,\n imports: [IconComponent],\n viewProviders: [ɵprovideKitIcons([ICON_X_MARK, ICON_SEARCH])],\n templateUrl: './search-input.component.html',\n styleUrls: ['./search-input.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SearchInputComponent {\n /\n id of the native input (lets a parent `<label for>` point at it).\n * @default generated\n /\n readonly inputId = input<string>(`lc-search-input-${++nextUniqueId}`);\n\n /\n Placeholder text.\n * @default 'Search…'\n /\n placeholder = input<string>('Search…');\n\n /\n Size variant.\n * @default 'md'\n /\n size = input<SearchInputSize>('md');\n\n /\n Debounce delay in milliseconds. 0 means no debounce.\n * @default 300\n /\n debounceMs = input<number>(300);\n\n /\n Whether the search input is disabled.\n * @default false\n /\n disabled = input<boolean>(false);\n\n /\n Accessible name of the input.\n * @default 'Search'\n /\n readonly ariaLabel = input<string>();\n\n /* id(s) of external element(s) labelling the input (wins over `ariaLabel`). /\n readonly ariaLabelledBy = input<string>();\n\n /* Accessible name of the clear button. /\n readonly clearAriaLabel = input('Clear search');\n\n /\n Current query (two-way bindable). Writing it from outside updates the\n * field without emitting `searchChange`; `valueChange` emits on every\n * keystroke (undebounced) and on clear.\n /\n readonly value = model<string>('');\n\n /\n Emitted when the search value changes (debounced).\n /\n readonly searchChange = output<string>();\n\n /\n Emitted when the user presses Enter.\n /\n readonly searchSubmit = output<string>();\n\n protected readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('searchInputEl');\n\n protected wrapperClasses = computed(() => {\n return [\n 'search-input',\n `search-input--${this.size()}`,\n this.disabled() ? 'search-input--disabled' : '',\n ]\n .filter(Boolean)\n .join(' ');\n });\n\n private readonly input$ = new Subject<SearchEmission>();\n /* Last value pushed into the pipe (by typing, clear or an external write). */\n private lastPushed = '';\n\n constructor() {\n this.input$\n .pipe(\n // debounceMs is read per emission, so changing it takes effect immediately.\n // 0 means \"no debounce\" — emit synchronously rather than on a 0ms timer.\n debounce(({ immediate }) => {\n const ms = this.debounceMs();\n return immediate \|\| ms <= 0 ? of(null) : timer(ms);\n }),\n distinctUntilChanged((a, b) => a.value === b.value),\n filter(({ silent }) => !silent),\n takeUntilDestroyed(),\n )\n .subscribe(({ value }) => this.searchChange.emit(value));\n\n // A value written from outside is already known to the parent: run it through\n // the pipe silently so it becomes the dedupe baseline (and cancels a pending\n // debounce) without echoing a searchChange back.\n effect(() => {\n const value = this.value();\n untracked(() => {\n if (value !== this.lastPushed) {\n this.push(value, { immediate: true, silent: true });\n }\n });\n });\n }\n\n protected onInput(event: Event): void {\n const val = (event.target as HTMLInputElement).value;\n this.value.set(val);\n this.push(val, { immediate: false, silent: false });\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this.searchSubmit.emit(this.value());\n }\n }\n\n protected clear(): void {\n this.value.set('');\n // immediate: emits '' synchronously through the pipe, exactly once\n this.push('', { immediate: true, silent: false });\n this.inputRef()?.nativeElement.focus();\n }\n\n private push(value: string, opts: Omit<SearchEmission, 'value'>): void {\n this.lastPushed = value;\n this.input$.next({ value, ...opts });\n }\n}\n","<div [class]=\"wrapperClasses()\">\n <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n <input\n #searchInputEl\n type=\"search\"\n class=\"search-input__field\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n autocomplete=\"off\"\n [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() \|\| 'Search'\"\n [attr.aria-labelledby]=\"ariaLabelledBy() \|\| null\"\n />\n @if (value()) {\n <button\n type=\"button\"\n class=\"search-input__clear\"\n (click)=\"clear()\"\n [attr.aria-label]=\"clearAriaLabel()\"\n [disabled]=\"disabled()\"\n >\n <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n </button>\n }\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-select.mjs CHANGED Viewed

@@ -387,7 +387,7 @@ var SelectComponent = class SelectComponent {
 		}],
 		ngImport: i0,
 		template: "<div class=\"lc-select-wrapper\">\n  <div\n    #selectTrigger\n    [class]=\"selectClasses()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n  >\n    <div class=\"lc-select__value\">\n      <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n        {{ displayValue() }}\n      </span>\n    </div>\n\n    <div class=\"lc-select__icons\">\n      @if (loading()) {\n        <svg\n          class=\"lc-select__spinner\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <circle\n            class=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n          ></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n      } @else if (value() && !isDisabled() && !multiple()) {\n        <button\n          type=\"button\"\n          class=\"lc-select__clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n\n      <svg\n        class=\"lc-select__chevron\"\n        [class.lc-select__chevron--open]=\"isOpen()\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div #dropdownPanel class=\"lc-select__dropdown\" [class.lc-select__dropdown--open]=\"isOpen()\">\n      @if (searchable()) {\n        <div class=\"lc-select__search\">\n          <input\n            type=\"text\"\n            class=\"lc-select__search-input\"\n            [placeholder]=\"searchPlaceholder()\"\n            aria-autocomplete=\"list\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            [attr.aria-label]=\"searchAriaLabel() || (ariaLabel() ? 'Search ' + ariaLabel() : 'Search options')\"\n            [(ngModel)]=\"searchQuery\"\n            (keydown)=\"onKeyDown($event)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"lc-select__options\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n      >\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"lc-select__option lc-select__option--no-results\"\n            role=\"option\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\"\n          >\n            {{ noOptionsLabel() }}\n          </div>\n        } @else {\n          @for (option of filteredOptions(); track option.value; let i = $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays on the trigger/search, keyboard selection via aria-activedescendant -->\n            <div\n              class=\"lc-select__option\"\n              role=\"option\"\n              [id]=\"optionId(i)\"\n              [attr.aria-selected]=\"isSelected(option) ? 'true' : 'false'\"\n              [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n              [class.lc-select__option--selected]=\"isSelected(option)\"\n              [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n              [class.lc-select__option--disabled]=\"option.disabled\"\n              (click)=\"selectOption(option)\"\n              (mouseenter)=\"highlightedIndex.set(i)\"\n            >\n              @if (multiple()) {\n                <!-- Purely visual: the option itself carries the selected state (role=option\n                     + aria-selected); the checkbox is inert so clicks land on the option. -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(option)\"\n                  [disabled]=\"option.disabled\"\n                  class=\"lc-select__checkbox\"\n                  tabindex=\"-1\"\n                  aria-hidden=\"true\"\n                />\n              }\n              <span class=\"lc-select__option-label\">{{ option.label }}</span>\n              @if (isSelected(option) && !multiple()) {\n                <svg\n                  class=\"lc-select__check\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-select__error\" [id]=\"selectId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-select__helper\" [id]=\"selectId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
-		styles: [".lc-select-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-select{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-select:hover:not(.lc-select--disabled){border-color:var(--color-text-secondary)}.lc-select:focus,.lc-select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-select.lc-select--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-8);font-size:var(--size-interactive-xs-font-size)}.lc-select.lc-select--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-9);font-size:var(--size-interactive-sm-font-size)}.lc-select.lc-select--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-md-font-size)}.lc-select.lc-select--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-lg-font-size)}.lc-select.lc-select--filled{background-color:var(--color-surface-sunken);border-color:transparent}.lc-select.lc-select--filled:hover:not(.lc-select--disabled){background-color:var(--color-surface-hover);border-color:var(--color-border)}.lc-select.lc-select--filled:focus,.lc-select.lc-select--filled:focus-visible{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-select.lc-select--error{border-color:var(--color-error-600)}.lc-select.lc-select--error:focus,.lc-select.lc-select--error:focus-visible{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-select.lc-select--disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-select__placeholder{color:var(--color-text-secondary)}.lc-select__icons{position:absolute;right:var(--spacing-3);display:flex;align-items:center;gap:var(--spacing-1);flex-shrink:0;pointer-events:none}.lc-select__icons button{pointer-events:auto}.lc-select__spinner{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lc-select__clear{display:var(--lc-select-clear-display, flex);align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--lc-select-clear-fg, var(--color-text-secondary));cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__clear:hover{color:var(--lc-select-clear-hover-fg, var(--color-text-primary));background-color:var(--lc-select-clear-hover-bg, var(--color-surface-hover))}.lc-select__clear svg{width:1rem;height:1rem}.lc-select__chevron{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);transition:transform var(--animation-duration-base) var(--animation-timing-ease)}.lc-select__chevron.lc-select__chevron--open{transform:rotate(180deg)}.lc-select__dropdown{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-xs, var(--spacing-2));background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);min-width:200px;max-height:320px;overflow-y:auto;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-select__dropdown.lc-select__dropdown--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-select__dropdown::-webkit-scrollbar{width:8px}.lc-select__dropdown::-webkit-scrollbar-track{background:var(--color-surface-sunken);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong)}.lc-select__search{padding:var(--lc-density-padding-xs, var(--spacing-2));border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-2)}.lc-select__search-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);outline:none;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__search-input:focus{border-color:var(--color-primary-500)}.lc-select__search-input::placeholder{color:var(--color-text-secondary)}.lc-select__options{list-style:none;padding:0;margin:0}.lc-select__option{display:flex;align-items:center;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease);text-align:left;width:100%}.lc-select__option:hover:not(.lc-select__option--disabled){background-color:var(--color-surface-hover)}.lc-select__option.lc-select__option--selected{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-select__option.lc-select__option--highlighted{background-color:var(--color-surface-hover);outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-select__option.lc-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-select__option-label{flex:1}.lc-select__check{width:1rem;height:1rem;margin-left:var(--spacing-2);flex-shrink:0;color:var(--color-primary-600)}.lc-select__checkbox{margin-right:var(--spacing-2);width:1rem;height:1rem;pointer-events:none}.lc-select__empty{padding:var(--lc-density-padding-md, var(--spacing-4));text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.lc-select__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-select__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}@media(forced-colors:active){.lc-select__option.lc-select__option--highlighted{outline-color:Highlight}}\n"],
+		styles: [".lc-select-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-select{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-select:hover:not(.lc-select--disabled):not(.lc-select--error):not(:focus){border-color:var(--color-text-secondary)}.lc-select:focus,.lc-select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-select.lc-select--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-8);font-size:var(--size-interactive-xs-font-size)}.lc-select.lc-select--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-9);font-size:var(--size-interactive-sm-font-size)}.lc-select.lc-select--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-md-font-size)}.lc-select.lc-select--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-lg-font-size)}.lc-select.lc-select--filled{background-color:var(--color-surface-sunken);border-color:transparent}.lc-select.lc-select--filled:hover:not(.lc-select--disabled):not(.lc-select--error):not(:focus){background-color:var(--color-surface-hover);border-color:var(--color-border)}.lc-select.lc-select--filled:focus,.lc-select.lc-select--filled:focus-visible{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-select.lc-select--error{border-color:var(--color-error-600)}.lc-select.lc-select--error:focus,.lc-select.lc-select--error:focus-visible{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-select.lc-select--disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-select__placeholder{color:var(--color-text-secondary)}.lc-select__icons{position:absolute;right:var(--spacing-3);display:flex;align-items:center;gap:var(--spacing-1);flex-shrink:0;pointer-events:none}.lc-select__icons button{pointer-events:auto}.lc-select__spinner{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lc-select__clear{position:relative;display:var(--lc-select-clear-display, flex);align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-.125rem;padding:.125rem;background:none;background-clip:content-box;border:none;border-radius:calc(var(--border-radius-sm) + .125rem);color:var(--lc-select-clear-fg, var(--color-text-secondary));cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__clear:hover{color:var(--lc-select-clear-hover-fg, var(--color-text-primary));background-color:var(--lc-select-clear-hover-bg, var(--color-surface-hover))}.lc-select__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0}.lc-select__clear svg{width:1rem;height:1rem}.lc-select__chevron{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);transition:transform var(--animation-duration-base) var(--animation-timing-ease)}.lc-select__chevron.lc-select__chevron--open{transform:rotate(180deg)}.lc-select__dropdown{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-xs, var(--spacing-2));background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);min-width:200px;max-height:320px;overflow-y:auto;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-select__dropdown.lc-select__dropdown--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-select__dropdown::-webkit-scrollbar{width:8px}.lc-select__dropdown::-webkit-scrollbar-track{background:var(--color-surface-sunken);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong)}.lc-select__search{padding:var(--lc-density-padding-xs, var(--spacing-2));border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-2)}.lc-select__search-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);outline:none;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__search-input:focus{border-color:var(--color-primary-500)}.lc-select__search-input::placeholder{color:var(--color-text-secondary)}.lc-select__options{list-style:none;padding:0;margin:0}.lc-select__option{display:flex;align-items:center;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease);text-align:left;width:100%}.lc-select__option:hover:not(.lc-select__option--disabled){background-color:var(--color-surface-hover)}.lc-select__option.lc-select__option--selected{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-select__option.lc-select__option--highlighted{background-color:var(--color-surface-hover);outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-select__option.lc-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-select__option-label{flex:1}.lc-select__check{width:1rem;height:1rem;margin-left:var(--spacing-2);flex-shrink:0;color:var(--color-primary-600)}.lc-select__checkbox{margin-right:var(--spacing-2);width:1rem;height:1rem;pointer-events:none}.lc-select__empty{padding:var(--lc-density-padding-md, var(--spacing-4));text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.lc-select__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-select__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}@media(forced-colors:active){.lc-select__option.lc-select__option--highlighted{outline-color:Highlight}.lc-select__clear:focus-visible{outline-color:Highlight}}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -483,7 +483,7 @@ i0.ɵɵngDeclareClassMetadata({
 				multi: true
 			}],
 			template: "<div class=\"lc-select-wrapper\">\n  <div\n    #selectTrigger\n    [class]=\"selectClasses()\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.aria-invalid]=\"error() ? 'true' : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    (click)=\"toggle()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onBlur()\"\n  >\n    <div class=\"lc-select__value\">\n      <span [class.lc-select__placeholder]=\"!selectedLabel()\">\n        {{ displayValue() }}\n      </span>\n    </div>\n\n    <div class=\"lc-select__icons\">\n      @if (loading()) {\n        <svg\n          class=\"lc-select__spinner\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <circle\n            class=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n          ></circle>\n          <path\n            class=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n          ></path>\n        </svg>\n      } @else if (value() && !isDisabled() && !multiple()) {\n        <button\n          type=\"button\"\n          class=\"lc-select__clear\"\n          (click)=\"clear(); $event.stopPropagation()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n            />\n          </svg>\n        </button>\n      }\n\n      <svg\n        class=\"lc-select__chevron\"\n        [class.lc-select__chevron--open]=\"isOpen()\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown Panel -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"selectTrigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"onClickOutside()\"\n    (detach)=\"close()\"\n  >\n    <div #dropdownPanel class=\"lc-select__dropdown\" [class.lc-select__dropdown--open]=\"isOpen()\">\n      @if (searchable()) {\n        <div class=\"lc-select__search\">\n          <input\n            type=\"text\"\n            class=\"lc-select__search-input\"\n            [placeholder]=\"searchPlaceholder()\"\n            aria-autocomplete=\"list\"\n            [attr.aria-controls]=\"listboxId\"\n            [attr.aria-activedescendant]=\"activeDescendantId()\"\n            [attr.aria-label]=\"searchAriaLabel() || (ariaLabel() ? 'Search ' + ariaLabel() : 'Search options')\"\n            [(ngModel)]=\"searchQuery\"\n            (keydown)=\"onKeyDown($event)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        </div>\n      }\n\n      <div\n        class=\"lc-select__options\"\n        role=\"listbox\"\n        [id]=\"listboxId\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n      >\n        @if (filteredOptions().length === 0) {\n          <div\n            class=\"lc-select__option lc-select__option--no-results\"\n            role=\"option\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\"\n          >\n            {{ noOptionsLabel() }}\n          </div>\n        } @else {\n          @for (option of filteredOptions(); track option.value; let i = $index) {\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- listbox option: focus stays on the trigger/search, keyboard selection via aria-activedescendant -->\n            <div\n              class=\"lc-select__option\"\n              role=\"option\"\n              [id]=\"optionId(i)\"\n              [attr.aria-selected]=\"isSelected(option) ? 'true' : 'false'\"\n              [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n              [class.lc-select__option--selected]=\"isSelected(option)\"\n              [class.lc-select__option--highlighted]=\"highlightedIndex() === i\"\n              [class.lc-select__option--disabled]=\"option.disabled\"\n              (click)=\"selectOption(option)\"\n              (mouseenter)=\"highlightedIndex.set(i)\"\n            >\n              @if (multiple()) {\n                <!-- Purely visual: the option itself carries the selected state (role=option\n                     + aria-selected); the checkbox is inert so clicks land on the option. -->\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(option)\"\n                  [disabled]=\"option.disabled\"\n                  class=\"lc-select__checkbox\"\n                  tabindex=\"-1\"\n                  aria-hidden=\"true\"\n                />\n              }\n              <span class=\"lc-select__option-label\">{{ option.label }}</span>\n              @if (isSelected(option) && !multiple()) {\n                <svg\n                  class=\"lc-select__check\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Text -->\n  @if (error() && errorMessage()) {\n    <div class=\"lc-select__error\" [id]=\"selectId + '-error'\" role=\"alert\">\n      {{ errorMessage() }}\n    </div>\n  } @else if (helperText()) {\n    <div class=\"lc-select__helper\" [id]=\"selectId + '-helper'\">\n      {{ helperText() }}\n    </div>\n  }\n</div>\n",
-			styles: [".lc-select-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-select{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-select:hover:not(.lc-select--disabled){border-color:var(--color-text-secondary)}.lc-select:focus,.lc-select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-select.lc-select--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-8);font-size:var(--size-interactive-xs-font-size)}.lc-select.lc-select--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-9);font-size:var(--size-interactive-sm-font-size)}.lc-select.lc-select--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-md-font-size)}.lc-select.lc-select--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-lg-font-size)}.lc-select.lc-select--filled{background-color:var(--color-surface-sunken);border-color:transparent}.lc-select.lc-select--filled:hover:not(.lc-select--disabled){background-color:var(--color-surface-hover);border-color:var(--color-border)}.lc-select.lc-select--filled:focus,.lc-select.lc-select--filled:focus-visible{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-select.lc-select--error{border-color:var(--color-error-600)}.lc-select.lc-select--error:focus,.lc-select.lc-select--error:focus-visible{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-select.lc-select--disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-select__placeholder{color:var(--color-text-secondary)}.lc-select__icons{position:absolute;right:var(--spacing-3);display:flex;align-items:center;gap:var(--spacing-1);flex-shrink:0;pointer-events:none}.lc-select__icons button{pointer-events:auto}.lc-select__spinner{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lc-select__clear{display:var(--lc-select-clear-display, flex);align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;border-radius:var(--border-radius-sm);color:var(--lc-select-clear-fg, var(--color-text-secondary));cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__clear:hover{color:var(--lc-select-clear-hover-fg, var(--color-text-primary));background-color:var(--lc-select-clear-hover-bg, var(--color-surface-hover))}.lc-select__clear svg{width:1rem;height:1rem}.lc-select__chevron{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);transition:transform var(--animation-duration-base) var(--animation-timing-ease)}.lc-select__chevron.lc-select__chevron--open{transform:rotate(180deg)}.lc-select__dropdown{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-xs, var(--spacing-2));background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);min-width:200px;max-height:320px;overflow-y:auto;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-select__dropdown.lc-select__dropdown--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-select__dropdown::-webkit-scrollbar{width:8px}.lc-select__dropdown::-webkit-scrollbar-track{background:var(--color-surface-sunken);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong)}.lc-select__search{padding:var(--lc-density-padding-xs, var(--spacing-2));border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-2)}.lc-select__search-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);outline:none;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__search-input:focus{border-color:var(--color-primary-500)}.lc-select__search-input::placeholder{color:var(--color-text-secondary)}.lc-select__options{list-style:none;padding:0;margin:0}.lc-select__option{display:flex;align-items:center;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease);text-align:left;width:100%}.lc-select__option:hover:not(.lc-select__option--disabled){background-color:var(--color-surface-hover)}.lc-select__option.lc-select__option--selected{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-select__option.lc-select__option--highlighted{background-color:var(--color-surface-hover);outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-select__option.lc-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-select__option-label{flex:1}.lc-select__check{width:1rem;height:1rem;margin-left:var(--spacing-2);flex-shrink:0;color:var(--color-primary-600)}.lc-select__checkbox{margin-right:var(--spacing-2);width:1rem;height:1rem;pointer-events:none}.lc-select__empty{padding:var(--lc-density-padding-md, var(--spacing-4));text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.lc-select__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-select__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}@media(forced-colors:active){.lc-select__option.lc-select__option--highlighted{outline-color:Highlight}}\n"]
+			styles: [".lc-select-wrapper{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1));width:100%;position:relative}.lc-select{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:all var(--animation-duration-base) var(--animation-timing-ease);cursor:pointer;-webkit-user-select:none;user-select:none}.lc-select:hover:not(.lc-select--disabled):not(.lc-select--error):not(:focus){border-color:var(--color-text-secondary)}.lc-select:focus,.lc-select:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0px;border-color:var(--color-primary-500)}.lc-select.lc-select--xs{height:var(--size-interactive-xs-height);padding:var(--size-interactive-xs-padding);padding-right:var(--spacing-8);font-size:var(--size-interactive-xs-font-size)}.lc-select.lc-select--sm{height:var(--size-interactive-sm-height);padding:var(--size-interactive-sm-padding);padding-right:var(--spacing-9);font-size:var(--size-interactive-sm-font-size)}.lc-select.lc-select--md{height:var(--size-interactive-md-height);padding:var(--size-interactive-md-padding);padding-right:var(--spacing-10);font-size:var(--size-interactive-md-font-size)}.lc-select.lc-select--lg{height:var(--size-interactive-lg-height);padding:var(--size-interactive-lg-padding);padding-right:var(--spacing-12);font-size:var(--size-interactive-lg-font-size)}.lc-select.lc-select--filled{background-color:var(--color-surface-sunken);border-color:transparent}.lc-select.lc-select--filled:hover:not(.lc-select--disabled):not(.lc-select--error):not(:focus){background-color:var(--color-surface-hover);border-color:var(--color-border)}.lc-select.lc-select--filled:focus,.lc-select.lc-select--filled:focus-visible{background-color:var(--color-surface);border-color:var(--color-primary-500)}.lc-select.lc-select--error{border-color:var(--color-error-600)}.lc-select.lc-select--error:focus,.lc-select.lc-select--error:focus-visible{outline-color:var(--color-error-600);border-color:var(--color-error-600)}.lc-select.lc-select--disabled{background-color:var(--color-surface-muted);border-color:var(--color-border);cursor:not-allowed;opacity:.6}.lc-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-select__placeholder{color:var(--color-text-secondary)}.lc-select__icons{position:absolute;right:var(--spacing-3);display:flex;align-items:center;gap:var(--spacing-1);flex-shrink:0;pointer-events:none}.lc-select__icons button{pointer-events:auto}.lc-select__spinner{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lc-select__clear{position:relative;display:var(--lc-select-clear-display, flex);align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:-.125rem;padding:.125rem;background:none;background-clip:content-box;border:none;border-radius:calc(var(--border-radius-sm) + .125rem);color:var(--lc-select-clear-fg, var(--color-text-secondary));cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__clear:hover{color:var(--lc-select-clear-hover-fg, var(--color-text-primary));background-color:var(--lc-select-clear-hover-bg, var(--color-surface-hover))}.lc-select__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:0}.lc-select__clear svg{width:1rem;height:1rem}.lc-select__chevron{width:1.25rem;height:1.25rem;color:var(--color-text-secondary);transition:transform var(--animation-duration-base) var(--animation-timing-ease)}.lc-select__chevron.lc-select__chevron--open{transform:rotate(180deg)}.lc-select__dropdown{position:absolute;z-index:1000;margin-top:var(--spacing-1);padding:var(--lc-density-padding-xs, var(--spacing-2));background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);min-width:200px;max-height:320px;overflow-y:auto;opacity:0;transform:translateY(-8px);transition:all var(--animation-duration-base) var(--animation-timing-ease);pointer-events:none}.lc-select__dropdown.lc-select__dropdown--open{opacity:1;transform:translateY(0);pointer-events:auto}.lc-select__dropdown::-webkit-scrollbar{width:8px}.lc-select__dropdown::-webkit-scrollbar-track{background:var(--color-surface-sunken);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-md)}.lc-select__dropdown::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong)}.lc-select__search{padding:var(--lc-density-padding-xs, var(--spacing-2));border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-2)}.lc-select__search-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);outline:none;transition:all var(--animation-duration-fast) var(--animation-timing-ease)}.lc-select__search-input:focus{border-color:var(--color-primary-500)}.lc-select__search-input::placeholder{color:var(--color-text-secondary)}.lc-select__options{list-style:none;padding:0;margin:0}.lc-select__option{display:flex;align-items:center;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));font-size:var(--font-size-sm);color:var(--color-text-primary);background:none;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--animation-duration-fast) var(--animation-timing-ease);text-align:left;width:100%}.lc-select__option:hover:not(.lc-select__option--disabled){background-color:var(--color-surface-hover)}.lc-select__option.lc-select__option--selected{font-weight:var(--font-weight-semibold);color:var(--color-primary-600);background-color:var(--color-primary-50)}.lc-select__option.lc-select__option--highlighted{background-color:var(--color-surface-hover);outline:2px solid var(--color-primary-500);outline-offset:-2px}.lc-select__option.lc-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed;opacity:.5}.lc-select__option-label{flex:1}.lc-select__check{width:1rem;height:1rem;margin-left:var(--spacing-2);flex-shrink:0;color:var(--color-primary-600)}.lc-select__checkbox{margin-right:var(--spacing-2);width:1rem;height:1rem;pointer-events:none}.lc-select__empty{padding:var(--lc-density-padding-md, var(--spacing-4));text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.lc-select__error{font-size:var(--font-size-xs);color:var(--color-error-600);margin-top:var(--spacing-1)}.lc-select__helper{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:var(--spacing-1)}@media(forced-colors:active){.lc-select__option.lc-select__option--highlighted{outline-color:Highlight}.lc-select__clear:focus-visible{outline-color:Highlight}}\n"]
 		}]
 	}],
 	propDecorators: {