@area8975/ui 0.2.2-dev.49 → 0.2.2-dev.50

package/fesm2022/area8975-ui-rich-text-editor.mjs

@@ -0,0 +1,778 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { UiButtonComponent } from "@area8975/ui/button";
+import { UiFieldComponent } from "@area8975/ui/field";
+import { UiInputComponent } from "@area8975/ui/input";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroArrowUturnLeft, heroArrowUturnRight, heroBold, heroChatBubbleLeft, heroCodeBracket, heroCodeBracketSquare, heroH1, heroH2, heroH3, heroItalic, heroLink, heroListBullet, heroMinus, heroNumberedList, heroStrikethrough, heroUnderline } from "@ng-icons/heroicons/outline";
+import { Editor } from "@tiptap/core";
+import { Placeholder } from "@tiptap/extensions";
+import StarterKit from "@tiptap/starter-kit";
+const RichTextTools = [
+	"bold",
+	"italic",
+	"underline",
+	"strike",
+	"code",
+	"heading1",
+	"heading2",
+	"heading3",
+	"bulletList",
+	"orderedList",
+	"blockquote",
+	"codeBlock",
+	"horizontalRule",
+	"link",
+	"undo",
+	"redo"
+];
+const RichTextToolGroups = [
+	[
+		"bold",
+		"italic",
+		"underline",
+		"strike",
+		"code"
+	],
+	[
+		"heading1",
+		"heading2",
+		"heading3"
+	],
+	[
+		"bulletList",
+		"orderedList",
+		"blockquote",
+		"codeBlock",
+		"horizontalRule"
+	],
+	["link"],
+	["undo", "redo"]
+];
+const TOOLS = {
+	bold: {
+		label: "Bold",
+		icon: "heroBold",
+		active: (editor) => editor.isActive("bold"),
+		run: (chain) => chain.toggleBold()
+	},
+	italic: {
+		label: "Italic",
+		icon: "heroItalic",
+		active: (editor) => editor.isActive("italic"),
+		run: (chain) => chain.toggleItalic()
+	},
+	underline: {
+		label: "Underline",
+		icon: "heroUnderline",
+		active: (editor) => editor.isActive("underline"),
+		run: (chain) => chain.toggleUnderline()
+	},
+	strike: {
+		label: "Strikethrough",
+		icon: "heroStrikethrough",
+		active: (editor) => editor.isActive("strike"),
+		run: (chain) => chain.toggleStrike()
+	},
+	code: {
+		label: "Inline code",
+		icon: "heroCodeBracket",
+		active: (editor) => editor.isActive("code"),
+		run: (chain) => chain.toggleCode()
+	},
+	heading1: {
+		label: "Heading 1",
+		icon: "heroH1",
+		active: (editor) => editor.isActive("heading", { level: 1 }),
+		run: (chain) => chain.toggleHeading({ level: 1 })
+	},
+	heading2: {
+		label: "Heading 2",
+		icon: "heroH2",
+		active: (editor) => editor.isActive("heading", { level: 2 }),
+		run: (chain) => chain.toggleHeading({ level: 2 })
+	},
+	heading3: {
+		label: "Heading 3",
+		icon: "heroH3",
+		active: (editor) => editor.isActive("heading", { level: 3 }),
+		run: (chain) => chain.toggleHeading({ level: 3 })
+	},
+	bulletList: {
+		label: "Bulleted list",
+		icon: "heroListBullet",
+		active: (editor) => editor.isActive("bulletList"),
+		run: (chain) => chain.toggleBulletList()
+	},
+	orderedList: {
+		label: "Numbered list",
+		icon: "heroNumberedList",
+		active: (editor) => editor.isActive("orderedList"),
+		run: (chain) => chain.toggleOrderedList()
+	},
+	blockquote: {
+		label: "Quote",
+		icon: "heroChatBubbleLeft",
+		active: (editor) => editor.isActive("blockquote"),
+		run: (chain) => chain.toggleBlockquote()
+	},
+	codeBlock: {
+		label: "Code block",
+		icon: "heroCodeBracketSquare",
+		active: (editor) => editor.isActive("codeBlock"),
+		run: (chain) => chain.toggleCodeBlock()
+	},
+	horizontalRule: {
+		label: "Divider",
+		icon: "heroMinus",
+		run: (chain) => chain.setHorizontalRule()
+	},
+	undo: {
+		label: "Undo",
+		icon: "heroArrowUturnLeft",
+		run: (chain) => chain.undo()
+	},
+	redo: {
+		label: "Redo",
+		icon: "heroArrowUturnRight",
+		run: (chain) => chain.redo()
+	}
+};
+const LINK_TOOL = {
+	label: "Link",
+	icon: "heroLink",
+	active: (editor) => editor.isActive("link"),
+	run: (chain) => chain
+};
+let nextId = 0;
+var UiRichTextEditorComponent = class UiRichTextEditorComponent {
+	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	classes = input("", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	tools = input(RichTextTools, ...ngDevMode ? [{ debugName: "tools" }] : /* istanbul ignore next */ []);
+	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	validationState = model(null, ...ngDevMode ? [{ debugName: "validationState" }] : /* istanbul ignore next */ []);
+	spellcheck = input(true, {
+		...ngDevMode ? { debugName: "spellcheck" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	describedBy = input("", ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	labelledBy = input("", ...ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []);
+	focused = output();
+	blurred = output();
+	injector = inject(Injector);
+	field = inject(UiFieldComponent, { optional: true });
+	host = inject(ElementRef);
+	content = viewChild.required("content", ...ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []);
+	editor = signal(null, ...ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []);
+	revision = signal(0, ...ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []);
+	lastHtml = null;
+	contentId = `ui-rich-text-editor-${nextId++}`;
+	linkInputId = `${this.contentId}-link`;
+	linkOpen = signal(false, ...ngDevMode ? [{ debugName: "linkOpen" }] : /* istanbul ignore next */ []);
+	linkHref = signal("", ...ngDevMode ? [{ debugName: "linkHref" }] : /* istanbul ignore next */ []);
+	focusIndex = signal(0, ...ngDevMode ? [{ debugName: "focusIndex" }] : /* istanbul ignore next */ []);
+	resolvedLabelledBy = computed(() => {
+		if (this.labelledBy()) return this.labelledBy();
+		const id = this.id();
+		return id && this.field?.for() === id ? this.field.labelId() : "";
+	}, ...ngDevMode ? [{ debugName: "resolvedLabelledBy" }] : /* istanbul ignore next */ []);
+	editable = computed(() => !this.disabled() && !this.readonly(), ...ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []);
+	toolGroups = computed(() => {
+		const tools = new Set(this.tools());
+		return RichTextToolGroups.map((group) => group.filter((tool) => tools.has(tool))).filter((group) => group.length > 0);
+	}, ...ngDevMode ? [{ debugName: "toolGroups" }] : /* istanbul ignore next */ []);
+	flatTools = computed(() => this.toolGroups().flat(), ...ngDevMode ? [{ debugName: "flatTools" }] : /* istanbul ignore next */ []);
+	showToolbar = computed(() => !this.readonly() && this.flatTools().length > 0, ...ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []);
+	toolState = computed(() => {
+		this.revision();
+		const editor = this.editor();
+		const editable = this.editable();
+		const state = {};
+		for (const tool of this.flatTools()) {
+			const definition = this.toolDefinition(tool);
+			const runnable = tool === "undo" || tool === "redo" ? !!editor?.can()[tool]() : true;
+			state[tool] = {
+				active: !!editor && !!definition.active?.(editor),
+				enabled: !!editor && editable && runnable
+			};
+		}
+		return state;
+	}, ...ngDevMode ? [{ debugName: "toolState" }] : /* istanbul ignore next */ []);
+	generatedClasses = computed(() => ["ui-rich-text-editor", this.classes()].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "generatedClasses" }] : /* istanbul ignore next */ []);
+	contentAttributes = computed(() => {
+		const attributes = {
+			id: this.id() || this.contentId,
+			class: "ui-rich-text-editor__content ui-text-body",
+			role: "textbox",
+			"aria-multiline": "true",
+			spellcheck: String(this.spellcheck())
+		};
+		const optional = {
+			"aria-label": this.ariaLabel(),
+			"aria-labelledby": this.resolvedLabelledBy(),
+			"aria-describedby": this.describedBy(),
+			"aria-required": this.required() && "true",
+			"aria-readonly": this.readonly() && "true",
+			"aria-disabled": this.disabled() && "true",
+			"aria-invalid": this.validationState() === false && "true"
+		};
+		for (const [name, value] of Object.entries(optional)) if (value) attributes[name] = value;
+		return attributes;
+	}, ...ngDevMode ? [{ debugName: "contentAttributes" }] : /* istanbul ignore next */ []);
+	extensions = computed(() => {
+		const tools = new Set(this.tools());
+		const on = (tool) => tools.has(tool) ? {} : false;
+		const levels = [
+			1,
+			2,
+			3
+		].filter((level) => tools.has(`heading${level}`));
+		return [StarterKit.configure({
+			bold: on("bold"),
+			italic: on("italic"),
+			underline: on("underline"),
+			strike: on("strike"),
+			code: on("code"),
+			heading: levels.length ? { levels: [...levels] } : false,
+			bulletList: on("bulletList"),
+			orderedList: on("orderedList"),
+			blockquote: on("blockquote"),
+			codeBlock: on("codeBlock"),
+			horizontalRule: on("horizontalRule"),
+			trailingNode: false,
+			link: tools.has("link") ? {
+				openOnClick: false,
+				autolink: true,
+				defaultProtocol: "https"
+			} : false
+		}), Placeholder.configure({ placeholder: () => this.placeholder() })];
+	}, ...ngDevMode ? [{ debugName: "extensions" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect(() => {
+			const extensions = this.extensions();
+			untracked(() => this.createEditor(extensions));
+		});
+		effect(() => {
+			this.editor()?.setEditable(this.editable(), false);
+		});
+		effect(() => {
+			this.editor()?.setOptions({ editorProps: { attributes: this.contentAttributes() } });
+		});
+		effect(() => {
+			const value = this.value();
+			const editor = this.editor();
+			if (editor && value !== this.lastHtml) {
+				this.lastHtml = value;
+				editor.commands.setContent(value, { emitUpdate: false });
+			}
+		});
+		inject(DestroyRef).onDestroy(() => this.editor()?.destroy());
+	}
+	toolDefinition(tool) {
+		return tool === "link" ? LINK_TOOL : TOOLS[tool];
+	}
+	runTool = (tool) => {
+		const editor = this.editor();
+		if (!editor || !this.toolState()[tool]?.enabled) return;
+		if (tool === "link") {
+			this.openLink();
+			return;
+		}
+		this.toolDefinition(tool).run(editor.chain().focus()).run();
+	};
+	onToolbarKeydown = (event) => {
+		const count = this.flatTools().length;
+		const current = this.focusIndex();
+		const next = {
+			ArrowRight: (current + 1) % count,
+			ArrowLeft: (current - 1 + count) % count,
+			Home: 0,
+			End: count - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		this.focusIndex.set(next);
+		this.host.nativeElement.querySelectorAll(".ui-rich-text-editor__tool")[next]?.focus();
+	};
+	openLink = () => {
+		const editor = this.editor();
+		if (!editor) return;
+		this.linkHref.set(editor.getAttributes("link")["href"] ?? "");
+		this.linkOpen.set(true);
+		afterNextRender(() => {
+			this.host.nativeElement.querySelector(`#${this.linkInputId}`)?.focus();
+		}, { injector: this.injector });
+	};
+	applyLink = () => {
+		const editor = this.editor();
+		const typed = this.linkHref().trim();
+		if (!editor) return;
+		if (!typed) {
+			this.removeLink();
+			return;
+		}
+		const href = /^([a-z][a-z\d+.-]*:|[/#?])/i.test(typed) ? typed : `https://${typed}`;
+		const chain = editor.chain().focus().extendMarkRange("link");
+		if (editor.state.selection.empty && !editor.isActive("link")) chain.insertContent({
+			type: "text",
+			text: href,
+			marks: [{
+				type: "link",
+				attrs: { href }
+			}]
+		});
+		else chain.setLink({ href });
+		chain.run();
+		this.linkOpen.set(false);
+	};
+	removeLink = () => {
+		this.editor()?.chain().focus().extendMarkRange("link").unsetLink().run();
+		this.linkOpen.set(false);
+	};
+	closeLink = () => {
+		this.linkOpen.set(false);
+		this.editor()?.commands.focus();
+	};
+	onLinkKeydown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			this.applyLink();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			this.closeLink();
+		}
+	};
+	createEditor(extensions) {
+		const previous = this.editor();
+		const content = previous ? this.htmlOf(previous) : this.value();
+		previous?.destroy();
+		const editor = new Editor({
+			element: this.content().nativeElement,
+			extensions,
+			content,
+			editable: this.editable(),
+			editorProps: { attributes: this.contentAttributes() },
+			onUpdate: ({ editor }) => {
+				this.lastHtml = this.htmlOf(editor);
+				this.value.set(this.lastHtml);
+			},
+			onTransaction: () => this.revision.update((revision) => revision + 1),
+			onFocus: ({ event }) => this.focused.emit(event),
+			onBlur: ({ event }) => this.blurred.emit(event)
+		});
+		this.lastHtml = content;
+		this.editor.set(editor);
+		if (previous && this.htmlOf(editor) !== content) {
+			this.lastHtml = this.htmlOf(editor);
+			this.value.set(this.lastHtml);
+		}
+	}
+	htmlOf(editor) {
+		return editor.isEmpty ? "" : editor.getHTML();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiRichTextEditorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiRichTextEditorComponent,
+		isStandalone: true,
+		selector: "ui-rich-text-editor",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			classes: {
+				classPropertyName: "classes",
+				publicName: "classes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tools: {
+				classPropertyName: "tools",
+				publicName: "tools",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			validationState: {
+				classPropertyName: "validationState",
+				publicName: "validationState",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			spellcheck: {
+				classPropertyName: "spellcheck",
+				publicName: "spellcheck",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			describedBy: {
+				classPropertyName: "describedBy",
+				publicName: "describedBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelledBy: {
+				classPropertyName: "labelledBy",
+				publicName: "labelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			validationState: "validationStateChange",
+			focused: "focused",
+			blurred: "blurred"
+		},
+		host: {
+			properties: { "attr.id": "null" },
+			classAttribute: "ui-rich-text-editor-host"
+		},
+		providers: [provideIcons({
+			heroArrowUturnLeft,
+			heroArrowUturnRight,
+			heroBold,
+			heroChatBubbleLeft,
+			heroCodeBracket,
+			heroCodeBracketSquare,
+			heroH1,
+			heroH2,
+			heroH3,
+			heroItalic,
+			heroLink,
+			heroListBullet,
+			heroMinus,
+			heroNumberedList,
+			heroStrikethrough,
+			heroUnderline
+		})],
+		viewQueries: [{
+			propertyName: "content",
+			first: true,
+			predicate: ["content"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div\n    [class]=\"generatedClasses()\"\n    [attr.data-invalid]=\"validationState() === false ? '' : null\"\n    [attr.data-valid]=\"validationState() === true ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n>\n    @if (showToolbar()) {\n        <div\n            class=\"ui-rich-text-editor__toolbar\"\n            role=\"toolbar\"\n            tabindex=\"-1\"\n            aria-label=\"Formatting\"\n            [attr.aria-controls]=\"id() || contentId\"\n            (keydown)=\"onToolbarKeydown($event)\"\n        >\n            @for (group of toolGroups(); track group[0]) {\n                @if (!$first) {\n                    <span\n                        class=\"ui-rich-text-editor__divider\"\n                        role=\"separator\"\n                        aria-orientation=\"vertical\"\n                    ></span>\n                }\n\n                @for (tool of group; track tool) {\n                    @let definition = toolDefinition(tool);\n                    @let state = toolState()[tool];\n\n                    <button\n                        type=\"button\"\n                        class=\"ui-rich-text-editor__tool\"\n                        [title]=\"definition.label\"\n                        [attr.aria-label]=\"definition.label\"\n                        [attr.aria-pressed]=\"definition.active ? state.active : null\"\n                        [attr.aria-disabled]=\"state.enabled ? null : 'true'\"\n                        [attr.data-active]=\"state.active ? '' : null\"\n                        [tabIndex]=\"flatTools().indexOf(tool) === focusIndex() ? 0 : -1\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        (focus)=\"focusIndex.set(flatTools().indexOf(tool))\"\n                        (click)=\"runTool(tool)\"\n                    >\n                        <ng-icon [name]=\"definition.icon\" aria-hidden=\"true\" />\n                    </button>\n                }\n            }\n        </div>\n    }\n\n    @if (linkOpen()) {\n        <div\n            class=\"ui-rich-text-editor__link\"\n            tabindex=\"-1\"\n            (keydown)=\"onLinkKeydown($event)\"\n        >\n            <ui-input\n                class=\"ui-rich-text-editor__link-input\"\n                type=\"url\"\n                placeholder=\"https://\"\n                ariaLabel=\"Link address\"\n                [id]=\"linkInputId\"\n                [(value)]=\"linkHref\"\n            />\n\n            <ui-button size=\"sm\" (click)=\"applyLink()\">Apply</ui-button>\n\n            @if (toolState()['link']?.active) {\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"ghost\"\n                    intent=\"danger\"\n                    (click)=\"removeLink()\"\n                >\n                    Remove\n                </ui-button>\n            }\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"ghost\"\n                intent=\"secondary\"\n                (click)=\"closeLink()\"\n            >\n                Cancel\n            </ui-button>\n        </div>\n    }\n\n    <div #content class=\"ui-rich-text-editor__body\"></div>\n</div>\n",
+		styles: ["@layer properties;@layer components{.ui-rich-text-editor-host{width:100%}}.ui-rich-text-editor-host{display:block}.ui-rich-text-editor{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}.ui-rich-text-editor:focus-within{border-color:var(--primary-focus)}.ui-rich-text-editor:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-rich-text-editor:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-rich-text-editor[data-disabled]{opacity:50%}.ui-rich-text-editor[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-rich-text-editor[data-invalid]:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-rich-text-editor[data-invalid]:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor[data-invalid]:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-rich-text-editor[data-valid]{border-color:var(--color-success-500, var(--color-teal-500))}.ui-rich-text-editor[data-valid]:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-rich-text-editor[data-valid]:focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor[data-valid]:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}.ui-rich-text-editor__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * .5);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border-line-2);padding:var(--spacing, .25rem)}.ui-rich-text-editor__divider{margin-inline:var(--spacing, .25rem);height:calc(var(--spacing, .25rem) * 5);width:1px;background-color:var(--border-line-2)}.ui-rich-text-editor__tool{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);color:var(--muted-foreground-1)}.ui-rich-text-editor__tool:hover{background-color:var(--layer-hover)}.ui-rich-text-editor__tool:hover{color:var(--foreground)}.ui-rich-text-editor__tool:focus{--tw-outline-style: none;outline-style:none}.ui-rich-text-editor__tool:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-rich-text-editor__tool:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor__tool:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-rich-text-editor__tool[data-active]{background-color:var(--color-primary-100, var(--color-blue-100));color:var(--color-primary-700, var(--color-blue-700))}.ui-rich-text-editor__tool[data-active]:where(.dark,.dark *){background-color:color-mix(in srgb,oklch(37.9% .146 265.522) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor__tool[data-active]:where(.dark,.dark *){background-color:color-mix(in oklab,var(--color-primary-900, var(--color-blue-900)) 50%,transparent)}}.ui-rich-text-editor__tool[data-active]:where(.dark,.dark *){color:var(--color-primary-300, var(--color-blue-300))}.ui-rich-text-editor__tool[aria-disabled]{pointer-events:none;opacity:40%}.ui-rich-text-editor__link{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border-line-2);padding:calc(var(--spacing, .25rem) * 2)}.ui-rich-text-editor__link-input{height:calc(var(--spacing, .25rem) * 9);flex:1}.ui-rich-text-editor__body{max-height:32rem;min-height:calc(var(--spacing, .25rem) * 32);overflow-y:auto}.ui-rich-text-editor__content{min-height:calc(var(--spacing, .25rem) * 32);padding:calc(var(--spacing, .25rem) * 3);color:var(--foreground)}.ui-rich-text-editor__content:focus{--tw-outline-style: none;outline-style:none}.ui-rich-text-editor__content>*+*{margin-top:calc(var(--spacing, .25rem) * 3)}.ui-rich-text-editor__content h1{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.ui-rich-text-editor__content h2{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.ui-rich-text-editor__content h3{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.ui-rich-text-editor__content ul{list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 6)}.ui-rich-text-editor__content ol{list-style-type:decimal;padding-inline-start:calc(var(--spacing, .25rem) * 6)}.ui-rich-text-editor__content li>p{margin-block:calc(var(--spacing, .25rem) * .5)}.ui-rich-text-editor__content blockquote{border-inline-start-style:var(--tw-border-style);border-inline-start-width:4px;border-color:var(--border-line-3);padding-inline-start:calc(var(--spacing, .25rem) * 4);color:var(--muted-foreground-1)}.ui-rich-text-editor__content code{border-radius:.25rem;background-color:var(--muted);padding-inline:var(--spacing, .25rem);padding-block:calc(var(--spacing, .25rem) * .5);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:.875em}.ui-rich-text-editor__content pre{overflow-x:auto;border-radius:var(--radius-md, .375rem);background-color:var(--muted);padding:calc(var(--spacing, .25rem) * 3);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.ui-rich-text-editor__content pre code{background-color:transparent;padding:0;color:inherit}.ui-rich-text-editor__content hr{border-color:var(--border-line-2)}.ui-rich-text-editor__content hr.ProseMirror-selectednode{border-color:var(--color-primary-500, var(--color-blue-500))}.ui-rich-text-editor__content a{color:var(--color-primary-600, var(--color-blue-600));text-decoration-line:underline}.ui-rich-text-editor__content a:where(.dark,.dark *){color:var(--color-primary-400, var(--color-blue-400))}.ui-rich-text-editor__content p.is-editor-empty:first-child:before{pointer-events:none;float:inline-start;height:0px;color:var(--muted-foreground-2);content:attr(data-placeholder)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			},
+			{
+				kind: "component",
+				type: UiButtonComponent,
+				selector: "ui-button",
+				inputs: [
+					"appearance",
+					"intent",
+					"size",
+					"classes",
+					"type",
+					"ariaLabel",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: UiInputComponent,
+				selector: "ui-input",
+				inputs: [
+					"value",
+					"classes",
+					"type",
+					"id",
+					"name",
+					"placeholder",
+					"autocomplete",
+					"inputmode",
+					"required",
+					"disabled",
+					"readonly",
+					"validationState",
+					"min",
+					"max",
+					"step",
+					"pattern",
+					"minlength",
+					"maxlength",
+					"autofocus",
+					"spellcheck",
+					"revealable",
+					"list",
+					"ariaLabel",
+					"describedBy",
+					"inputRole",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaActiveDescendant",
+					"ariaAutocomplete",
+					"ariaHasPopup"
+				],
+				outputs: [
+					"valueChange",
+					"validationStateChange",
+					"focused",
+					"blurred"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiRichTextEditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-rich-text-editor",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgIcon,
+				UiButtonComponent,
+				UiInputComponent
+			],
+			providers: [provideIcons({
+				heroArrowUturnLeft,
+				heroArrowUturnRight,
+				heroBold,
+				heroChatBubbleLeft,
+				heroCodeBracket,
+				heroCodeBracketSquare,
+				heroH1,
+				heroH2,
+				heroH3,
+				heroItalic,
+				heroLink,
+				heroListBullet,
+				heroMinus,
+				heroNumberedList,
+				heroStrikethrough,
+				heroUnderline
+			})],
+			host: {
+				class: "ui-rich-text-editor-host",
+				"[attr.id]": "null"
+			},
+			template: "<div\n    [class]=\"generatedClasses()\"\n    [attr.data-invalid]=\"validationState() === false ? '' : null\"\n    [attr.data-valid]=\"validationState() === true ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n>\n    @if (showToolbar()) {\n        <div\n            class=\"ui-rich-text-editor__toolbar\"\n            role=\"toolbar\"\n            tabindex=\"-1\"\n            aria-label=\"Formatting\"\n            [attr.aria-controls]=\"id() || contentId\"\n            (keydown)=\"onToolbarKeydown($event)\"\n        >\n            @for (group of toolGroups(); track group[0]) {\n                @if (!$first) {\n                    <span\n                        class=\"ui-rich-text-editor__divider\"\n                        role=\"separator\"\n                        aria-orientation=\"vertical\"\n                    ></span>\n                }\n\n                @for (tool of group; track tool) {\n                    @let definition = toolDefinition(tool);\n                    @let state = toolState()[tool];\n\n                    <button\n                        type=\"button\"\n                        class=\"ui-rich-text-editor__tool\"\n                        [title]=\"definition.label\"\n                        [attr.aria-label]=\"definition.label\"\n                        [attr.aria-pressed]=\"definition.active ? state.active : null\"\n                        [attr.aria-disabled]=\"state.enabled ? null : 'true'\"\n                        [attr.data-active]=\"state.active ? '' : null\"\n                        [tabIndex]=\"flatTools().indexOf(tool) === focusIndex() ? 0 : -1\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        (focus)=\"focusIndex.set(flatTools().indexOf(tool))\"\n                        (click)=\"runTool(tool)\"\n                    >\n                        <ng-icon [name]=\"definition.icon\" aria-hidden=\"true\" />\n                    </button>\n                }\n            }\n        </div>\n    }\n\n    @if (linkOpen()) {\n        <div\n            class=\"ui-rich-text-editor__link\"\n            tabindex=\"-1\"\n            (keydown)=\"onLinkKeydown($event)\"\n        >\n            <ui-input\n                class=\"ui-rich-text-editor__link-input\"\n                type=\"url\"\n                placeholder=\"https://\"\n                ariaLabel=\"Link address\"\n                [id]=\"linkInputId\"\n                [(value)]=\"linkHref\"\n            />\n\n            <ui-button size=\"sm\" (click)=\"applyLink()\">Apply</ui-button>\n\n            @if (toolState()['link']?.active) {\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"ghost\"\n                    intent=\"danger\"\n                    (click)=\"removeLink()\"\n                >\n                    Remove\n                </ui-button>\n            }\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"ghost\"\n                intent=\"secondary\"\n                (click)=\"closeLink()\"\n            >\n                Cancel\n            </ui-button>\n        </div>\n    }\n\n    <div #content class=\"ui-rich-text-editor__body\"></div>\n</div>\n",
+			styles: ["@layer properties;@layer components{.ui-rich-text-editor-host{width:100%}}.ui-rich-text-editor-host{display:block}.ui-rich-text-editor{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}.ui-rich-text-editor:focus-within{border-color:var(--primary-focus)}.ui-rich-text-editor:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-rich-text-editor:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-rich-text-editor[data-disabled]{opacity:50%}.ui-rich-text-editor[data-invalid]{border-color:var(--color-danger-500, var(--color-red-500))}.ui-rich-text-editor[data-invalid]:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-rich-text-editor[data-invalid]:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor[data-invalid]:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}.ui-rich-text-editor[data-valid]{border-color:var(--color-success-500, var(--color-teal-500))}.ui-rich-text-editor[data-valid]:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-rich-text-editor[data-valid]:focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor[data-valid]:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}.ui-rich-text-editor__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * .5);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border-line-2);padding:var(--spacing, .25rem)}.ui-rich-text-editor__divider{margin-inline:var(--spacing, .25rem);height:calc(var(--spacing, .25rem) * 5);width:1px;background-color:var(--border-line-2)}.ui-rich-text-editor__tool{display:inline-flex;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);color:var(--muted-foreground-1)}.ui-rich-text-editor__tool:hover{background-color:var(--layer-hover)}.ui-rich-text-editor__tool:hover{color:var(--foreground)}.ui-rich-text-editor__tool:focus{--tw-outline-style: none;outline-style:none}.ui-rich-text-editor__tool:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-rich-text-editor__tool:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor__tool:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-rich-text-editor__tool[data-active]{background-color:var(--color-primary-100, var(--color-blue-100));color:var(--color-primary-700, var(--color-blue-700))}.ui-rich-text-editor__tool[data-active]:where(.dark,.dark *){background-color:color-mix(in srgb,oklch(37.9% .146 265.522) 50%,transparent)}@supports (color: color-mix(in lab,red,red)){.ui-rich-text-editor__tool[data-active]:where(.dark,.dark *){background-color:color-mix(in oklab,var(--color-primary-900, var(--color-blue-900)) 50%,transparent)}}.ui-rich-text-editor__tool[data-active]:where(.dark,.dark *){color:var(--color-primary-300, var(--color-blue-300))}.ui-rich-text-editor__tool[aria-disabled]{pointer-events:none;opacity:40%}.ui-rich-text-editor__link{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border-line-2);padding:calc(var(--spacing, .25rem) * 2)}.ui-rich-text-editor__link-input{height:calc(var(--spacing, .25rem) * 9);flex:1}.ui-rich-text-editor__body{max-height:32rem;min-height:calc(var(--spacing, .25rem) * 32);overflow-y:auto}.ui-rich-text-editor__content{min-height:calc(var(--spacing, .25rem) * 32);padding:calc(var(--spacing, .25rem) * 3);color:var(--foreground)}.ui-rich-text-editor__content:focus{--tw-outline-style: none;outline-style:none}.ui-rich-text-editor__content>*+*{margin-top:calc(var(--spacing, .25rem) * 3)}.ui-rich-text-editor__content h1{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.ui-rich-text-editor__content h2{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.ui-rich-text-editor__content h3{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.ui-rich-text-editor__content ul{list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 6)}.ui-rich-text-editor__content ol{list-style-type:decimal;padding-inline-start:calc(var(--spacing, .25rem) * 6)}.ui-rich-text-editor__content li>p{margin-block:calc(var(--spacing, .25rem) * .5)}.ui-rich-text-editor__content blockquote{border-inline-start-style:var(--tw-border-style);border-inline-start-width:4px;border-color:var(--border-line-3);padding-inline-start:calc(var(--spacing, .25rem) * 4);color:var(--muted-foreground-1)}.ui-rich-text-editor__content code{border-radius:.25rem;background-color:var(--muted);padding-inline:var(--spacing, .25rem);padding-block:calc(var(--spacing, .25rem) * .5);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:.875em}.ui-rich-text-editor__content pre{overflow-x:auto;border-radius:var(--radius-md, .375rem);background-color:var(--muted);padding:calc(var(--spacing, .25rem) * 3);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.ui-rich-text-editor__content pre code{background-color:transparent;padding:0;color:inherit}.ui-rich-text-editor__content hr{border-color:var(--border-line-2)}.ui-rich-text-editor__content hr.ProseMirror-selectednode{border-color:var(--color-primary-500, var(--color-blue-500))}.ui-rich-text-editor__content a{color:var(--color-primary-600, var(--color-blue-600));text-decoration-line:underline}.ui-rich-text-editor__content a:where(.dark,.dark *){color:var(--color-primary-400, var(--color-blue-400))}.ui-rich-text-editor__content p.is-editor-empty:first-child:before{pointer-events:none;float:inline-start;height:0px;color:var(--muted-foreground-2);content:attr(data-placeholder)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		classes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "classes",
+				required: false
+			}]
+		}],
+		tools: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tools",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		validationState: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validationState",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["validationStateChange"]
+		}],
+		spellcheck: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spellcheck",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
+		labelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelledBy",
+				required: false
+			}]
+		}],
+		focused: [{
+			type: i0.Output,
+			args: ["focused"]
+		}],
+		blurred: [{
+			type: i0.Output,
+			args: ["blurred"]
+		}],
+		content: [{
+			type: i0.ViewChild,
+			args: ["content", { isSignal: true }]
+		}]
+	}
+});
+export { RichTextToolGroups, RichTextTools, UiRichTextEditorComponent };
+
+//# sourceMappingURL=area8975-ui-rich-text-editor.mjs.map