@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,718 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, SecurityContext, computed, effect, forwardRef, inject, input, linkedSignal, output, signal, untracked, viewChild } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { DomSanitizer } from "@angular/platform-browser";
+import { isSafeImageUrl, isSafeLinkUrl } from "@lifecorner/angular-ui-kit/internal/url";
+const HTML_ESCAPES = {
+	"&": "&",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
+function escapeHtml(text) {
+	return text.replace(/[&<>"']/g, (c) => HTML_ESCAPES[c]);
+}
+function safeUrl(url, image = false) {
+	const value = url.trim();
+	if (!value) return null;
+	return (image ? isSafeImageUrl(value) : isSafeLinkUrl(value)) ? value : null;
+}
+const DEFAULT_TOOLBAR = { actions: [
+	"bold",
+	"italic",
+	"underline",
+	"strikethrough",
+	"h1",
+	"h2",
+	"h3",
+	"ul",
+	"ol",
+	"blockquote",
+	"code",
+	"codeblock",
+	"link",
+	"hr"
+] };
+var RichTextEditorComponent = class RichTextEditorComponent {
+	mode = input("rich", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	placeholder = input("Start typing...", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	minHeight = input(200, ...ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []);
+	maxHeight = input(0, ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
+	toolbar = input(DEFAULT_TOOLBAR, ...ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []);
+	showWordCount = input(true, ...ngDevMode ? [{ debugName: "showWordCount" }] : /* istanbul ignore next */ []);
+	actionTitles = input({}, ...ngDevMode ? [{ debugName: "actionTitles" }] : /* istanbul ignore next */ []);
+	richModeLabel = input("Rich", ...ngDevMode ? [{ debugName: "richModeLabel" }] : /* istanbul ignore next */ []);
+	richModeTitle = input("Rich Text", ...ngDevMode ? [{ debugName: "richModeTitle" }] : /* istanbul ignore next */ []);
+	markdownModeLabel = input("MD", ...ngDevMode ? [{ debugName: "markdownModeLabel" }] : /* istanbul ignore next */ []);
+	markdownModeTitle = input("Markdown", ...ngDevMode ? [{ debugName: "markdownModeTitle" }] : /* istanbul ignore next */ []);
+	splitModeLabel = input("Split", ...ngDevMode ? [{ debugName: "splitModeLabel" }] : /* istanbul ignore next */ []);
+	splitModeTitle = input("Split View", ...ngDevMode ? [{ debugName: "splitModeTitle" }] : /* istanbul ignore next */ []);
+	markdownEditorAriaLabel = input("Markdown editor", ...ngDevMode ? [{ debugName: "markdownEditorAriaLabel" }] : /* istanbul ignore next */ []);
+	wordsLabel = input("words", ...ngDevMode ? [{ debugName: "wordsLabel" }] : /* istanbul ignore next */ []);
+	charactersLabel = input("characters", ...ngDevMode ? [{ debugName: "charactersLabel" }] : /* istanbul ignore next */ []);
+	contentChange = output();
+	editorArea = viewChild("editorArea", ...ngDevMode ? [{ debugName: "editorArea" }] : /* istanbul ignore next */ []);
+	richArea = viewChild("richArea", ...ngDevMode ? [{ debugName: "richArea" }] : /* istanbul ignore next */ []);
+	sanitizer = inject(DomSanitizer);
+	markdown = signal("", ...ngDevMode ? [{ debugName: "markdown" }] : /* istanbul ignore next */ []);
+	activeMode = linkedSignal(() => this.mode(), ...ngDevMode ? [{ debugName: "activeMode" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	editable = computed(() => !this.isDisabled() && !this.readonly(), ...ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []);
+	wordCount = computed(() => {
+		const text = this.markdown().trim();
+		if (!text) return 0;
+		return text.split(/\s+/).length;
+	}, ...ngDevMode ? [{ debugName: "wordCount" }] : /* istanbul ignore next */ []);
+	charCount = computed(() => this.markdown().length, ...ngDevMode ? [{ debugName: "charCount" }] : /* istanbul ignore next */ []);
+	renderedHtml = computed(() => this.sanitizeHtml(this.markdownToHtml(this.markdown())), ...ngDevMode ? [{ debugName: "renderedHtml" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	constructor() {
+		effect(() => {
+			const el = this.richArea()?.nativeElement;
+			if (el) untracked(() => this.renderRich(el));
+		});
+	}
+	writeValue(value) {
+		this.markdown.set(value || "");
+		const el = this.richArea()?.nativeElement;
+		if (el) this.renderRich(el);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	switchMode(mode) {
+		if (this.activeMode() === "rich" && mode !== "rich") {
+			const el = this.richArea()?.nativeElement;
+			if (el) this.markdown.set(this.htmlToMarkdown(el.innerHTML));
+		}
+		this.activeMode.set(mode);
+	}
+	onToolbarAction(action) {
+		if (!this.editable()) return;
+		if (this.activeMode() === "rich") this.execRichCommand(action);
+		else this.insertMarkdownSyntax(action);
+	}
+	execRichCommand(action) {
+		switch (action) {
+			case "bold":
+				document.execCommand("bold");
+				break;
+			case "italic":
+				document.execCommand("italic");
+				break;
+			case "underline":
+				document.execCommand("underline");
+				break;
+			case "strikethrough":
+				document.execCommand("strikeThrough");
+				break;
+			case "h1":
+				document.execCommand("formatBlock", false, "h1");
+				break;
+			case "h2":
+				document.execCommand("formatBlock", false, "h2");
+				break;
+			case "h3":
+				document.execCommand("formatBlock", false, "h3");
+				break;
+			case "ul":
+				document.execCommand("insertUnorderedList");
+				break;
+			case "ol":
+				document.execCommand("insertOrderedList");
+				break;
+			case "blockquote":
+				document.execCommand("formatBlock", false, "blockquote");
+				break;
+			case "code":
+				document.execCommand("insertHTML", false, "<code>" + this.getSelection() + "</code>");
+				break;
+			case "codeblock":
+				document.execCommand("insertHTML", false, "<pre><code>" + this.getSelection() + "</code></pre>");
+				break;
+			case "link": {
+				const url = prompt("Enter URL:");
+				if (url) document.execCommand("createLink", false, url);
+				break;
+			}
+			case "hr": document.execCommand("insertHorizontalRule");
+		}
+		this.syncFromRich();
+	}
+	insertMarkdownSyntax(action) {
+		const textarea = this.editorArea()?.nativeElement;
+		if (!textarea) return;
+		const start = textarea.selectionStart;
+		const end = textarea.selectionEnd;
+		const text = this.markdown();
+		const selected = text.substring(start, end);
+		let insertion = "";
+		let cursorOffset = 0;
+		switch (action) {
+			case "bold":
+				insertion = `**${selected || "bold text"}**`;
+				cursorOffset = selected ? insertion.length : 2;
+				break;
+			case "italic":
+				insertion = `*${selected || "italic text"}*`;
+				cursorOffset = selected ? insertion.length : 1;
+				break;
+			case "underline":
+				insertion = `<u>${selected || "underlined text"}</u>`;
+				cursorOffset = selected ? insertion.length : 3;
+				break;
+			case "strikethrough":
+				insertion = `~~${selected || "strikethrough"}~~`;
+				cursorOffset = selected ? insertion.length : 2;
+				break;
+			case "h1":
+				insertion = `# ${selected || "Heading 1"}`;
+				cursorOffset = insertion.length;
+				break;
+			case "h2":
+				insertion = `## ${selected || "Heading 2"}`;
+				cursorOffset = insertion.length;
+				break;
+			case "h3":
+				insertion = `### ${selected || "Heading 3"}`;
+				cursorOffset = insertion.length;
+				break;
+			case "ul":
+				insertion = `- ${selected || "List item"}`;
+				cursorOffset = insertion.length;
+				break;
+			case "ol":
+				insertion = `1. ${selected || "List item"}`;
+				cursorOffset = insertion.length;
+				break;
+			case "blockquote":
+				insertion = `> ${selected || "Quote"}`;
+				cursorOffset = insertion.length;
+				break;
+			case "code":
+				insertion = `\`${selected || "code"}\``;
+				cursorOffset = selected ? insertion.length : 1;
+				break;
+			case "codeblock":
+				insertion = `\`\`\`\n${selected || "code"}\n\`\`\``;
+				cursorOffset = 4;
+				break;
+			case "link":
+				insertion = `[${selected || "link text"}](url)`;
+				cursorOffset = selected ? insertion.length - 5 : 1;
+				break;
+			case "image":
+				insertion = `![${selected || "alt text"}](url)`;
+				cursorOffset = selected ? insertion.length - 5 : 2;
+				break;
+			case "hr":
+				insertion = `\n---\n`;
+				cursorOffset = insertion.length;
+		}
+		const newText = text.substring(0, start) + insertion + text.substring(end);
+		this.markdown.set(newText);
+		this.emitChange(newText);
+		setTimeout(() => {
+			textarea.focus();
+			textarea.setSelectionRange(start + cursorOffset, start + cursorOffset);
+		});
+	}
+	onMarkdownInput(event) {
+		const value = event.target.value;
+		this.markdown.set(value);
+		this.emitChange(value);
+	}
+	onRichInput() {
+		this.syncFromRich();
+	}
+	onBlur() {
+		this.onTouched();
+	}
+	syncFromRich() {
+		const el = this.richArea()?.nativeElement;
+		if (!el) return;
+		const md = this.htmlToMarkdown(el.innerHTML);
+		this.markdown.set(md);
+		this.emitChange(md);
+	}
+	renderRich(el) {
+		el.innerHTML = this.renderedHtml();
+	}
+	sanitizeHtml(html) {
+		return this.sanitizer.sanitize(SecurityContext.HTML, html) ?? "";
+	}
+	emitChange(value) {
+		this.onChange(value);
+		this.contentChange.emit(value);
+	}
+	getSelection() {
+		return window.getSelection()?.toString() || "";
+	}
+	getActionLabel(action) {
+		return {
+			bold: "B",
+			italic: "I",
+			underline: "U",
+			strikethrough: "S",
+			h1: "H1",
+			h2: "H2",
+			h3: "H3",
+			ul: "•",
+			ol: "1.",
+			blockquote: "\"",
+			code: "<>",
+			codeblock: "{ }",
+			link: "🔗",
+			image: "🖼",
+			hr: "—"
+		}[action] || action;
+	}
+	getActionTitle(action) {
+		return this.actionTitles()[action] || {
+			bold: "Bold",
+			italic: "Italic",
+			underline: "Underline",
+			strikethrough: "Strikethrough",
+			h1: "Heading 1",
+			h2: "Heading 2",
+			h3: "Heading 3",
+			ul: "Unordered List",
+			ol: "Ordered List",
+			blockquote: "Blockquote",
+			code: "Inline Code",
+			codeblock: "Code Block",
+			link: "Insert Link",
+			image: "Insert Image",
+			hr: "Horizontal Rule"
+		}[action] || action;
+	}
+	markdownToHtml(md) {
+		if (!md) return "";
+		let html = escapeHtml(md);
+		html = html.replace(/```(\w*)\n([\s\S]*?)```/g, "<pre><code class=\"language-$1\">$2</code></pre>");
+		html = html.replace(/^### (.+)$/gm, "<h3>$1</h3>");
+		html = html.replace(/^## (.+)$/gm, "<h2>$1</h2>");
+		html = html.replace(/^# (.+)$/gm, "<h1>$1</h1>");
+		html = html.replace(/^---$/gm, "<hr>");
+		html = html.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>");
+		html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+		html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
+		html = html.replace(/~~(.+?)~~/g, "<del>$1</del>");
+		html = html.replace(/&lt;u&gt;(.+?)&lt;\/u&gt;/g, "<u>$1</u>");
+		html = html.replace(/`(.+?)`/g, "<code>$1</code>");
+		html = html.replace(/!\[(.+?)\]\((.+?)\)/g, (_m, alt, src) => {
+			const url = safeUrl(src, true);
+			return url ? `<img alt="${alt}" src="${url}" />` : alt;
+		});
+		html = html.replace(/\[(.+?)\]\((.+?)\)/g, (_m, text, href) => {
+			const url = safeUrl(href);
+			return url ? `<a href="${url}">${text}</a>` : text;
+		});
+		html = html.replace(/^&gt; (.+)$/gm, "<blockquote>$1</blockquote>");
+		html = html.replace(/^- (.+)$/gm, "<li>$1</li>");
+		html = html.replace(/(<li>.*<\/li>\n?)+/g, "<ul>$&</ul>");
+		html = html.replace(/^\d+\. (.+)$/gm, "<li>$1</li>");
+		html = html.replace(/^(?!<[a-z])((?!^\s*$).+)$/gm, "<p>$1</p>");
+		html = html.replace(/<p>\s*<\/p>/g, "");
+		return html.trim();
+	}
+	htmlToMarkdown(html) {
+		if (!html) return "";
+		let md = html;
+		md = md.replace(/<h1[^>]*>(.*?)<\/h1>/gi, "# $1\n");
+		md = md.replace(/<h2[^>]*>(.*?)<\/h2>/gi, "## $1\n");
+		md = md.replace(/<h3[^>]*>(.*?)<\/h3>/gi, "### $1\n");
+		md = md.replace(/<hr\s*\/?>/gi, "---\n");
+		md = md.replace(/<blockquote[^>]*>(.*?)<\/blockquote>/gi, "> $1\n");
+		md = md.replace(/<pre><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, "```\n$1\n```\n");
+		md = md.replace(/<ul[^>]*>([\s\S]*?)<\/ul>/gi, "$1");
+		md = md.replace(/<ol[^>]*>([\s\S]*?)<\/ol>/gi, "$1");
+		md = md.replace(/<li[^>]*>(.*?)<\/li>/gi, "- $1\n");
+		md = md.replace(/<strong[^>]*>(.*?)<\/strong>/gi, "**$1**");
+		md = md.replace(/<b[^>]*>(.*?)<\/b>/gi, "**$1**");
+		md = md.replace(/<em[^>]*>(.*?)<\/em>/gi, "*$1*");
+		md = md.replace(/<i[^>]*>(.*?)<\/i>/gi, "*$1*");
+		md = md.replace(/<del[^>]*>(.*?)<\/del>/gi, "~~$1~~");
+		md = md.replace(/<u[^>]*>(.*?)<\/u>/gi, "<u>$1</u>");
+		md = md.replace(/<code[^>]*>(.*?)<\/code>/gi, "`$1`");
+		md = md.replace(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gi, "[$2]($1)");
+		md = md.replace(/<img[^>]*alt="([^"]*)"[^>]*src="([^"]*)"[^>]*\/?>/gi, "![$1]($2)");
+		md = md.replace(/<p[^>]*>(.*?)<\/p>/gi, "$1\n\n");
+		md = md.replace(/<br\s*\/?>/gi, "\n");
+		md = md.replace(/<div[^>]*>(.*?)<\/div>/gi, "$1\n");
+		md = md.replace(/<[^>]+>/g, "");
+		md = md.replace(/&amp;/g, "&");
+		md = md.replace(/&lt;/g, "<");
+		md = md.replace(/&gt;/g, ">");
+		md = md.replace(/&quot;/g, "\"");
+		md = md.replace(/&nbsp;/g, " ");
+		md = md.replace(/\n{3,}/g, "\n\n");
+		return md.trim();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RichTextEditorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RichTextEditorComponent,
+		isStandalone: true,
+		selector: "lc-rich-text-editor",
+		inputs: {
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minHeight: {
+				classPropertyName: "minHeight",
+				publicName: "minHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxHeight: {
+				classPropertyName: "maxHeight",
+				publicName: "maxHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toolbar: {
+				classPropertyName: "toolbar",
+				publicName: "toolbar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showWordCount: {
+				classPropertyName: "showWordCount",
+				publicName: "showWordCount",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			actionTitles: {
+				classPropertyName: "actionTitles",
+				publicName: "actionTitles",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			richModeLabel: {
+				classPropertyName: "richModeLabel",
+				publicName: "richModeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			richModeTitle: {
+				classPropertyName: "richModeTitle",
+				publicName: "richModeTitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			markdownModeLabel: {
+				classPropertyName: "markdownModeLabel",
+				publicName: "markdownModeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			markdownModeTitle: {
+				classPropertyName: "markdownModeTitle",
+				publicName: "markdownModeTitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			splitModeLabel: {
+				classPropertyName: "splitModeLabel",
+				publicName: "splitModeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			splitModeTitle: {
+				classPropertyName: "splitModeTitle",
+				publicName: "splitModeTitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			markdownEditorAriaLabel: {
+				classPropertyName: "markdownEditorAriaLabel",
+				publicName: "markdownEditorAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			wordsLabel: {
+				classPropertyName: "wordsLabel",
+				publicName: "wordsLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			charactersLabel: {
+				classPropertyName: "charactersLabel",
+				publicName: "charactersLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { contentChange: "contentChange" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => RichTextEditorComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "editorArea",
+			first: true,
+			predicate: ["editorArea"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "richArea",
+			first: true,
+			predicate: ["richArea"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"lc-rich-text-editor\" [class.lc-rich-text-editor--disabled]=\"isDisabled()\">\n  <!-- Toolbar -->\n  <div class=\"lc-rich-text-editor__toolbar\">\n    <div class=\"lc-rich-text-editor__toolbar-actions\">\n      @for (action of toolbar().actions; track action) {\n        <button\n          type=\"button\"\n          class=\"lc-rich-text-editor__toolbar-btn\"\n          [title]=\"getActionTitle(action)\"\n          [attr.aria-label]=\"getActionTitle(action)\"\n          [disabled]=\"!editable()\"\n          (click)=\"onToolbarAction(action)\"\n        >\n          {{ getActionLabel(action) }}\n        </button>\n      }\n    </div>\n    <div class=\"lc-rich-text-editor__toolbar-modes\">\n      <button\n        type=\"button\"\n        class=\"lc-rich-text-editor__mode-btn\"\n        [class.active]=\"activeMode() === 'rich'\"\n        (click)=\"switchMode('rich')\"\n        [attr.title]=\"richModeTitle()\"\n      >{{ richModeLabel() }}</button>\n      <button\n        type=\"button\"\n        class=\"lc-rich-text-editor__mode-btn\"\n        [class.active]=\"activeMode() === 'markdown'\"\n        (click)=\"switchMode('markdown')\"\n        [attr.title]=\"markdownModeTitle()\"\n      >{{ markdownModeLabel() }}</button>\n      <button\n        type=\"button\"\n        class=\"lc-rich-text-editor__mode-btn\"\n        [class.active]=\"activeMode() === 'split'\"\n        (click)=\"switchMode('split')\"\n        [attr.title]=\"splitModeTitle()\"\n      >{{ splitModeLabel() }}</button>\n    </div>\n  </div>\n\n  <!-- Editor area -->\n  <div\n    class=\"lc-rich-text-editor__content\"\n    [style.min-height.px]=\"minHeight()\"\n    [style.max-height.px]=\"maxHeight() || null\"\n  >\n    @switch (activeMode()) {\n      @case ('rich') {\n        <!-- The rich area is filled from the markdown by the component (see the\n             constructor effect); it must never receive markup Angular hasn't\n             sanitised. `contenteditable` follows the disabled/readonly state —\n             a greyed-out toolbar alone would still let the user type. -->\n        <div\n          #richArea\n          class=\"lc-rich-text-editor__rich\"\n          [attr.contenteditable]=\"editable() ? 'true' : 'false'\"\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n          [attr.aria-readonly]=\"readonly() && !isDisabled() ? 'true' : null\"\n          [attr.data-placeholder]=\"placeholder()\"\n          [class.lc-rich-text-editor__rich--empty]=\"!markdown()\"\n          (input)=\"onRichInput()\"\n          (blur)=\"onBlur()\"\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          [attr.aria-label]=\"placeholder()\"\n        ></div>\n      }\n      @case ('markdown') {\n        <textarea\n          #editorArea\n          class=\"lc-rich-text-editor__textarea\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"markdown()\"\n          [disabled]=\"isDisabled()\"\n          [readOnly]=\"readonly()\"\n          (input)=\"onMarkdownInput($event)\"\n          (blur)=\"onBlur()\"\n          spellcheck=\"false\"\n          [attr.aria-label]=\"markdownEditorAriaLabel()\"\n        ></textarea>\n      }\n      @case ('split') {\n        <div class=\"lc-rich-text-editor__split\">\n          <textarea\n            #editorArea\n            class=\"lc-rich-text-editor__textarea lc-rich-text-editor__split-editor\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"markdown()\"\n            [disabled]=\"isDisabled()\"\n            [readOnly]=\"readonly()\"\n            (input)=\"onMarkdownInput($event)\"\n            (blur)=\"onBlur()\"\n            spellcheck=\"false\"\n            [attr.aria-label]=\"markdownEditorAriaLabel()\"\n          ></textarea>\n          <div\n            class=\"lc-rich-text-editor__split-preview\"\n            [innerHTML]=\"renderedHtml()\"\n          ></div>\n        </div>\n      }\n    }\n  </div>\n\n  <!-- Footer -->\n  @if (showWordCount()) {\n    <div class=\"lc-rich-text-editor__footer\">\n      <span>{{ wordCount() }} {{ wordsLabel() }}</span>\n      <span>{{ charCount() }} {{ charactersLabel() }}</span>\n    </div>\n  }\n</div>\n",
+		styles: [".lc-rich-text-editor{border:1px solid var(--color-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);overflow:hidden;font-family:var(--typography-font-family)}.lc-rich-text-editor--disabled{opacity:.6;pointer-events:none}.lc-rich-text-editor__toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));background-color:var(--color-surface);border-bottom:1px solid var(--color-divider);flex-wrap:wrap;gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-rich-text-editor__toolbar-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap}.lc-rich-text-editor__toolbar-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-sm);font-weight:var(--typography-font-weight-semibold);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-rich-text-editor__toolbar-btn:disabled{cursor:not-allowed;opacity:.4}.lc-rich-text-editor__toolbar-modes{display:flex;align-items:center;gap:2px;border-left:1px solid var(--color-divider);padding-left:var(--spacing-2);margin-left:var(--spacing-2)}.lc-rich-text-editor__mode-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__mode-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-rich-text-editor__mode-btn.active{background-color:var(--color-primary);color:#fff}.lc-rich-text-editor__content{overflow-y:auto}.lc-rich-text-editor__rich{padding:var(--lc-density-padding-md, var(--spacing-4));min-height:100%;outline:none;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__rich--empty:before{content:attr(data-placeholder);color:var(--color-text-secondary);opacity:.6;pointer-events:none}.lc-rich-text-editor__rich h1,.lc-rich-text-editor__rich h2,.lc-rich-text-editor__rich h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold);color:var(--color-text-primary)}.lc-rich-text-editor__rich h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__rich h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__rich h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__rich p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich ul,.lc-rich-text-editor__rich ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__rich code{background-color:var(--color-surface-hover);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__rich pre{background-color:var(--color-surface-hover);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto;margin:var(--spacing-3) 0}.lc-rich-text-editor__rich pre code{background:none;padding:0}.lc-rich-text-editor__rich a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__rich hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__rich img{max-width:100%;border-radius:var(--border-radius-md)}.lc-rich-text-editor__textarea{width:100%;height:100%;min-height:inherit;border:none;outline:none;resize:vertical;padding:var(--lc-density-padding-md, var(--spacing-4));font-family:var(--typography-font-family-mono, monospace);font-size:var(--typography-font-size-sm);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary);background-color:var(--color-surface);tab-size:2}.lc-rich-text-editor__split{display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:inherit}.lc-rich-text-editor__split-editor{border-right:1px solid var(--color-divider);min-height:inherit;resize:none}.lc-rich-text-editor__split-preview{padding:var(--lc-density-padding-md, var(--spacing-4));overflow-y:auto;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__split-preview h1,.lc-rich-text-editor__split-preview h2,.lc-rich-text-editor__split-preview h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold)}.lc-rich-text-editor__split-preview h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__split-preview h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__split-preview h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__split-preview p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview ul,.lc-rich-text-editor__split-preview ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__split-preview code{background-color:var(--color-surface-hover);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__split-preview pre{background-color:var(--color-surface-hover);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto}.lc-rich-text-editor__split-preview pre code{background:none;padding:0}.lc-rich-text-editor__split-preview a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__split-preview hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__footer{display:flex;justify-content:flex-end;gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider);font-size:var(--typography-font-size-xs);color:var(--color-text-secondary)}\n"],
+		dependencies: [{
+			kind: "ngmodule",
+			type: CommonModule
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RichTextEditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-rich-text-editor",
+			standalone: true,
+			imports: [CommonModule],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RichTextEditorComponent),
+				multi: true
+			}],
+			template: "<div class=\"lc-rich-text-editor\" [class.lc-rich-text-editor--disabled]=\"isDisabled()\">\n  <!-- Toolbar -->\n  <div class=\"lc-rich-text-editor__toolbar\">\n    <div class=\"lc-rich-text-editor__toolbar-actions\">\n      @for (action of toolbar().actions; track action) {\n        <button\n          type=\"button\"\n          class=\"lc-rich-text-editor__toolbar-btn\"\n          [title]=\"getActionTitle(action)\"\n          [attr.aria-label]=\"getActionTitle(action)\"\n          [disabled]=\"!editable()\"\n          (click)=\"onToolbarAction(action)\"\n        >\n          {{ getActionLabel(action) }}\n        </button>\n      }\n    </div>\n    <div class=\"lc-rich-text-editor__toolbar-modes\">\n      <button\n        type=\"button\"\n        class=\"lc-rich-text-editor__mode-btn\"\n        [class.active]=\"activeMode() === 'rich'\"\n        (click)=\"switchMode('rich')\"\n        [attr.title]=\"richModeTitle()\"\n      >{{ richModeLabel() }}</button>\n      <button\n        type=\"button\"\n        class=\"lc-rich-text-editor__mode-btn\"\n        [class.active]=\"activeMode() === 'markdown'\"\n        (click)=\"switchMode('markdown')\"\n        [attr.title]=\"markdownModeTitle()\"\n      >{{ markdownModeLabel() }}</button>\n      <button\n        type=\"button\"\n        class=\"lc-rich-text-editor__mode-btn\"\n        [class.active]=\"activeMode() === 'split'\"\n        (click)=\"switchMode('split')\"\n        [attr.title]=\"splitModeTitle()\"\n      >{{ splitModeLabel() }}</button>\n    </div>\n  </div>\n\n  <!-- Editor area -->\n  <div\n    class=\"lc-rich-text-editor__content\"\n    [style.min-height.px]=\"minHeight()\"\n    [style.max-height.px]=\"maxHeight() || null\"\n  >\n    @switch (activeMode()) {\n      @case ('rich') {\n        <!-- The rich area is filled from the markdown by the component (see the\n             constructor effect); it must never receive markup Angular hasn't\n             sanitised. `contenteditable` follows the disabled/readonly state —\n             a greyed-out toolbar alone would still let the user type. -->\n        <div\n          #richArea\n          class=\"lc-rich-text-editor__rich\"\n          [attr.contenteditable]=\"editable() ? 'true' : 'false'\"\n          [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n          [attr.aria-readonly]=\"readonly() && !isDisabled() ? 'true' : null\"\n          [attr.data-placeholder]=\"placeholder()\"\n          [class.lc-rich-text-editor__rich--empty]=\"!markdown()\"\n          (input)=\"onRichInput()\"\n          (blur)=\"onBlur()\"\n          role=\"textbox\"\n          aria-multiline=\"true\"\n          [attr.aria-label]=\"placeholder()\"\n        ></div>\n      }\n      @case ('markdown') {\n        <textarea\n          #editorArea\n          class=\"lc-rich-text-editor__textarea\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"markdown()\"\n          [disabled]=\"isDisabled()\"\n          [readOnly]=\"readonly()\"\n          (input)=\"onMarkdownInput($event)\"\n          (blur)=\"onBlur()\"\n          spellcheck=\"false\"\n          [attr.aria-label]=\"markdownEditorAriaLabel()\"\n        ></textarea>\n      }\n      @case ('split') {\n        <div class=\"lc-rich-text-editor__split\">\n          <textarea\n            #editorArea\n            class=\"lc-rich-text-editor__textarea lc-rich-text-editor__split-editor\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"markdown()\"\n            [disabled]=\"isDisabled()\"\n            [readOnly]=\"readonly()\"\n            (input)=\"onMarkdownInput($event)\"\n            (blur)=\"onBlur()\"\n            spellcheck=\"false\"\n            [attr.aria-label]=\"markdownEditorAriaLabel()\"\n          ></textarea>\n          <div\n            class=\"lc-rich-text-editor__split-preview\"\n            [innerHTML]=\"renderedHtml()\"\n          ></div>\n        </div>\n      }\n    }\n  </div>\n\n  <!-- Footer -->\n  @if (showWordCount()) {\n    <div class=\"lc-rich-text-editor__footer\">\n      <span>{{ wordCount() }} {{ wordsLabel() }}</span>\n      <span>{{ charCount() }} {{ charactersLabel() }}</span>\n    </div>\n  }\n</div>\n",
+			styles: [".lc-rich-text-editor{border:1px solid var(--color-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);overflow:hidden;font-family:var(--typography-font-family)}.lc-rich-text-editor--disabled{opacity:.6;pointer-events:none}.lc-rich-text-editor__toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));background-color:var(--color-surface);border-bottom:1px solid var(--color-divider);flex-wrap:wrap;gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-rich-text-editor__toolbar-actions{display:flex;align-items:center;gap:2px;flex-wrap:wrap}.lc-rich-text-editor__toolbar-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-sm);font-weight:var(--typography-font-weight-semibold);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__toolbar-btn:hover:not(:disabled){background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-rich-text-editor__toolbar-btn:disabled{cursor:not-allowed;opacity:.4}.lc-rich-text-editor__toolbar-modes{display:flex;align-items:center;gap:2px;border-left:1px solid var(--color-divider);padding-left:var(--spacing-2);margin-left:var(--spacing-2)}.lc-rich-text-editor__mode-btn{appearance:none;border:none;background:transparent;color:var(--color-text-secondary);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--border-radius-sm);font-size:var(--typography-font-size-xs);font-weight:var(--typography-font-weight-medium);cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-rich-text-editor__mode-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.lc-rich-text-editor__mode-btn.active{background-color:var(--color-primary);color:#fff}.lc-rich-text-editor__content{overflow-y:auto}.lc-rich-text-editor__rich{padding:var(--lc-density-padding-md, var(--spacing-4));min-height:100%;outline:none;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__rich--empty:before{content:attr(data-placeholder);color:var(--color-text-secondary);opacity:.6;pointer-events:none}.lc-rich-text-editor__rich h1,.lc-rich-text-editor__rich h2,.lc-rich-text-editor__rich h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold);color:var(--color-text-primary)}.lc-rich-text-editor__rich h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__rich h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__rich h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__rich p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich ul,.lc-rich-text-editor__rich ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__rich blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__rich code{background-color:var(--color-surface-hover);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__rich pre{background-color:var(--color-surface-hover);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto;margin:var(--spacing-3) 0}.lc-rich-text-editor__rich pre code{background:none;padding:0}.lc-rich-text-editor__rich a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__rich hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__rich img{max-width:100%;border-radius:var(--border-radius-md)}.lc-rich-text-editor__textarea{width:100%;height:100%;min-height:inherit;border:none;outline:none;resize:vertical;padding:var(--lc-density-padding-md, var(--spacing-4));font-family:var(--typography-font-family-mono, monospace);font-size:var(--typography-font-size-sm);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary);background-color:var(--color-surface);tab-size:2}.lc-rich-text-editor__split{display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:inherit}.lc-rich-text-editor__split-editor{border-right:1px solid var(--color-divider);min-height:inherit;resize:none}.lc-rich-text-editor__split-preview{padding:var(--lc-density-padding-md, var(--spacing-4));overflow-y:auto;font-size:var(--typography-font-size-base);line-height:var(--typography-line-height-relaxed, 1.7);color:var(--color-text-primary)}.lc-rich-text-editor__split-preview h1,.lc-rich-text-editor__split-preview h2,.lc-rich-text-editor__split-preview h3{margin-top:var(--spacing-4);margin-bottom:var(--spacing-2);font-weight:var(--typography-font-weight-bold)}.lc-rich-text-editor__split-preview h1{font-size:var(--typography-font-size-2xl)}.lc-rich-text-editor__split-preview h2{font-size:var(--typography-font-size-xl)}.lc-rich-text-editor__split-preview h3{font-size:var(--typography-font-size-lg)}.lc-rich-text-editor__split-preview p{margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview ul,.lc-rich-text-editor__split-preview ol{padding-left:var(--spacing-6);margin-bottom:var(--spacing-3)}.lc-rich-text-editor__split-preview blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-4);margin:var(--spacing-3) 0;color:var(--color-text-secondary);font-style:italic}.lc-rich-text-editor__split-preview code{background-color:var(--color-surface-hover);padding:2px var(--spacing-1);border-radius:var(--border-radius-sm);font-family:var(--typography-font-family-mono, monospace);font-size:.9em}.lc-rich-text-editor__split-preview pre{background-color:var(--color-surface-hover);padding:var(--spacing-3);border-radius:var(--border-radius-md);overflow-x:auto}.lc-rich-text-editor__split-preview pre code{background:none;padding:0}.lc-rich-text-editor__split-preview a{color:var(--color-primary);text-decoration:underline}.lc-rich-text-editor__split-preview hr{border:none;border-top:1px solid var(--color-divider);margin:var(--spacing-4) 0}.lc-rich-text-editor__footer{display:flex;justify-content:flex-end;gap:var(--lc-density-gap-md, var(--spacing-4));padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider);font-size:var(--typography-font-size-xs);color:var(--color-text-secondary)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		minHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minHeight",
+				required: false
+			}]
+		}],
+		maxHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxHeight",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		toolbar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toolbar",
+				required: false
+			}]
+		}],
+		showWordCount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showWordCount",
+				required: false
+			}]
+		}],
+		actionTitles: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionTitles",
+				required: false
+			}]
+		}],
+		richModeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "richModeLabel",
+				required: false
+			}]
+		}],
+		richModeTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "richModeTitle",
+				required: false
+			}]
+		}],
+		markdownModeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "markdownModeLabel",
+				required: false
+			}]
+		}],
+		markdownModeTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "markdownModeTitle",
+				required: false
+			}]
+		}],
+		splitModeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "splitModeLabel",
+				required: false
+			}]
+		}],
+		splitModeTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "splitModeTitle",
+				required: false
+			}]
+		}],
+		markdownEditorAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "markdownEditorAriaLabel",
+				required: false
+			}]
+		}],
+		wordsLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "wordsLabel",
+				required: false
+			}]
+		}],
+		charactersLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "charactersLabel",
+				required: false
+			}]
+		}],
+		contentChange: [{
+			type: i0.Output,
+			args: ["contentChange"]
+		}],
+		editorArea: [{
+			type: i0.ViewChild,
+			args: ["editorArea", { isSignal: true }]
+		}],
+		richArea: [{
+			type: i0.ViewChild,
+			args: ["richArea", { isSignal: true }]
+		}]
+	}
+});
+export { RichTextEditorComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-rich-text-editor.mjs.map