@memberjunction/ng-markdown 0.0.1 → 2.126.0

package/dist/lib/components/markdown.component.js

@@ -0,0 +1,553 @@
+import { Component, Input, Output, EventEmitter, ElementRef, SecurityContext, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MarkdownService } from '../services/markdown.service';
+import { DEFAULT_MARKDOWN_CONFIG } from '../types/markdown.types';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/platform-browser";
+import * as i2 from "../services/markdown.service";
+// Collapsible section toggle is handled inline in setupCollapsibleListeners
+/**
+ * Angular component for rendering markdown content.
+ *
+ * Features:
+ * - Prism.js syntax highlighting for code blocks
+ * - Mermaid diagram rendering
+ * - Copy-to-clipboard for code blocks
+ * - Collapsible heading sections
+ * - GitHub-style alerts and heading IDs
+ *
+ * Usage:
+ * ```html
+ * <mj-markdown [data]="markdownContent"></mj-markdown>
+ *
+ * <mj-markdown
+ *   [data]="content"
+ *   [enableMermaid]="true"
+ *   [enableCollapsibleHeadings]="true"
+ *   (rendered)="onRendered($event)">
+ * </mj-markdown>
+ * ```
+ */
+export class MarkdownComponent {
+    /**
+     * Public accessor for the component's element reference.
+     * Provided for backward compatibility with ngx-markdown API.
+     */
+    get element() {
+        return this.elementRef;
+    }
+    constructor(elementRef, sanitizer, markdownService, cdr) {
+        this.elementRef = elementRef;
+        this.sanitizer = sanitizer;
+        this.markdownService = markdownService;
+        this.cdr = cdr;
+        /**
+         * The markdown content to render
+         */
+        this.data = '';
+        /**
+         * Enable syntax highlighting
+         */
+        this.enableHighlight = DEFAULT_MARKDOWN_CONFIG.enableHighlight;
+        /**
+         * Enable Mermaid diagram rendering
+         */
+        this.enableMermaid = DEFAULT_MARKDOWN_CONFIG.enableMermaid;
+        /**
+         * Enable copy button on code blocks
+         */
+        this.enableCodeCopy = DEFAULT_MARKDOWN_CONFIG.enableCodeCopy;
+        /**
+         * Enable collapsible heading sections
+         */
+        this.enableCollapsibleHeadings = DEFAULT_MARKDOWN_CONFIG.enableCollapsibleHeadings;
+        /**
+         * Heading level at which to start collapsing
+         */
+        this.collapsibleHeadingLevel = DEFAULT_MARKDOWN_CONFIG.collapsibleHeadingLevel;
+        /**
+         * Whether collapsible sections should be expanded by default
+         */
+        this.collapsibleDefaultExpanded = DEFAULT_MARKDOWN_CONFIG.collapsibleDefaultExpanded;
+        /**
+         * Enable GitHub-style alerts
+         */
+        this.enableAlerts = DEFAULT_MARKDOWN_CONFIG.enableAlerts;
+        /**
+         * Enable smartypants for typography (curly quotes, em/en dashes, ellipses)
+         */
+        this.enableSmartypants = DEFAULT_MARKDOWN_CONFIG.enableSmartypants;
+        /**
+         * Enable SVG code block rendering
+         * When enabled, ```svg code blocks are rendered as actual SVG images
+         */
+        this.enableSvgRenderer = DEFAULT_MARKDOWN_CONFIG.enableSvgRenderer;
+        /**
+         * Enable raw HTML passthrough in markdown content.
+         * Scripts and event handlers are still stripped unless enableJavaScript is true.
+         */
+        this.enableHtml = DEFAULT_MARKDOWN_CONFIG.enableHtml;
+        /**
+         * Enable JavaScript in HTML content (<script> tags and on* handlers).
+         * WARNING: Major security risk - only enable for fully trusted content.
+         */
+        this.enableJavaScript = DEFAULT_MARKDOWN_CONFIG.enableJavaScript;
+        /**
+         * Enable heading IDs for anchor links
+         */
+        this.enableHeadingIds = DEFAULT_MARKDOWN_CONFIG.enableHeadingIds;
+        /**
+         * Prefix for heading IDs
+         */
+        this.headingIdPrefix = DEFAULT_MARKDOWN_CONFIG.headingIdPrefix;
+        /**
+         * Enable line numbers in code blocks
+         */
+        this.enableLineNumbers = DEFAULT_MARKDOWN_CONFIG.enableLineNumbers;
+        /**
+         * Custom CSS class for the container
+         */
+        this.containerClass = '';
+        /**
+         * Mermaid theme
+         */
+        this.mermaidTheme = DEFAULT_MARKDOWN_CONFIG.mermaidTheme;
+        /**
+         * Whether to sanitize HTML output
+         */
+        this.sanitize = DEFAULT_MARKDOWN_CONFIG.sanitize;
+        /**
+         * Emitted when rendering is complete
+         */
+        this.rendered = new EventEmitter();
+        /**
+         * Emitted when a heading anchor is clicked
+         */
+        this.headingClick = new EventEmitter();
+        /**
+         * Emitted when code is copied to clipboard
+         */
+        this.codeCopied = new EventEmitter();
+        /**
+         * The sanitized HTML content to display
+         */
+        this.renderedContent = '';
+        this.renderStartTime = 0;
+        this.hasMermaid = false;
+        this.hasCodeBlocks = false;
+    }
+    ngOnChanges(changes) {
+        // Check if any relevant input changed
+        const needsRerender = changes['data'] ||
+            changes['enableHighlight'] ||
+            changes['enableMermaid'] ||
+            changes['enableCodeCopy'] ||
+            changes['enableCollapsibleHeadings'] ||
+            changes['collapsibleHeadingLevel'] ||
+            changes['collapsibleDefaultExpanded'] ||
+            changes['autoExpandLevels'] ||
+            changes['enableAlerts'] ||
+            changes['enableSmartypants'] ||
+            changes['enableSvgRenderer'] ||
+            changes['enableHtml'] ||
+            changes['enableJavaScript'] ||
+            changes['enableHeadingIds'] ||
+            changes['headingIdPrefix'] ||
+            changes['mermaidTheme'] ||
+            changes['sanitize'];
+        if (needsRerender) {
+            this.render();
+        }
+    }
+    ngAfterViewInit() {
+        // Initial render if data was provided
+        if (this.data) {
+            this.postRenderProcessing();
+        }
+    }
+    ngOnDestroy() {
+        // Cleanup any event listeners
+        this.cleanupEventListeners();
+    }
+    /**
+     * Render the markdown content
+     */
+    render() {
+        if (!this.data) {
+            this.renderedContent = '';
+            this.cdr.markForCheck();
+            return;
+        }
+        this.renderStartTime = performance.now();
+        // Build config from inputs
+        const config = {
+            enableHighlight: this.enableHighlight,
+            enableMermaid: this.enableMermaid,
+            enableCodeCopy: this.enableCodeCopy,
+            enableCollapsibleHeadings: this.enableCollapsibleHeadings,
+            collapsibleHeadingLevel: this.collapsibleHeadingLevel,
+            collapsibleDefaultExpanded: this.collapsibleDefaultExpanded,
+            autoExpandLevels: this.autoExpandLevels,
+            enableAlerts: this.enableAlerts,
+            enableSmartypants: this.enableSmartypants,
+            enableSvgRenderer: this.enableSvgRenderer,
+            enableHtml: this.enableHtml,
+            enableJavaScript: this.enableJavaScript,
+            enableHeadingIds: this.enableHeadingIds,
+            headingIdPrefix: this.headingIdPrefix,
+            mermaidTheme: this.mermaidTheme,
+            sanitize: this.sanitize
+        };
+        // Configure service and parse
+        this.markdownService.configureMarked(config);
+        let html = this.markdownService.parse(this.data);
+        // Check for mermaid and code blocks
+        this.hasMermaid = html.includes('language-mermaid') || html.includes('class="mermaid"');
+        this.hasCodeBlocks = html.includes('<pre>') && html.includes('<code');
+        // Sanitize if enabled
+        // Note: We bypass Angular's sanitizer when SVG renderer or HTML passthrough is enabled
+        // because it strips SVG elements and most HTML layout tags.
+        const bypassAngularSanitizer = this.enableSvgRenderer || this.enableHtml;
+        if (this.sanitize && !bypassAngularSanitizer) {
+            const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html);
+            html = sanitized || '';
+        }
+        // Strip JavaScript unless explicitly enabled
+        // This removes <script> tags and on* event handlers while keeping layout HTML
+        if (bypassAngularSanitizer && !this.enableJavaScript) {
+            html = this.stripJavaScript(html);
+        }
+        // Trust the HTML for display
+        this.renderedContent = this.sanitizer.bypassSecurityTrustHtml(html);
+        this.cdr.markForCheck();
+        // Schedule post-render processing for next tick (after DOM update)
+        Promise.resolve().then(() => this.postRenderProcessing());
+    }
+    /**
+     * Process rendered content after DOM update
+     * Handles syntax highlighting, mermaid rendering, copy buttons, etc.
+     */
+    async postRenderProcessing() {
+        const container = this.elementRef.nativeElement.querySelector('.mj-markdown-container');
+        if (!container)
+            return;
+        // Add copy buttons to code blocks
+        if (this.enableCodeCopy && this.hasCodeBlocks) {
+            this.markdownService.addCodeCopyButtons(container);
+        }
+        // Initialize collapsible headings
+        if (this.enableCollapsibleHeadings) {
+            this.markdownService.initializeCollapsibleHeadings(container);
+            this.setupCollapsibleListeners(container);
+        }
+        // Render mermaid diagrams (async)
+        if (this.enableMermaid && this.hasMermaid) {
+            await this.markdownService.renderMermaid(container);
+        }
+        // Setup heading click listeners
+        if (this.enableHeadingIds) {
+            this.setupHeadingClickListeners(container);
+        }
+        // Setup code copy listeners for custom event emission
+        if (this.enableCodeCopy) {
+            this.setupCodeCopyListeners(container);
+        }
+        // Emit rendered event
+        const renderTime = performance.now() - this.renderStartTime;
+        const headingIds = this.markdownService.getHeadingList();
+        this.rendered.emit({
+            html: container.innerHTML,
+            renderTime,
+            hasMermaid: this.hasMermaid,
+            hasCodeBlocks: this.hasCodeBlocks,
+            headingIds
+        });
+    }
+    /**
+     * Setup collapsible sections by adding toggle buttons and click listeners
+     */
+    setupCollapsibleListeners(container) {
+        const sections = container.querySelectorAll('.collapsible-section');
+        sections.forEach((section) => {
+            const wrapper = section.querySelector(':scope > .collapsible-heading-wrapper');
+            if (!wrapper)
+                return;
+            // Check if toggle already exists
+            if (wrapper.querySelector('.collapsible-toggle'))
+                return;
+            const isExpanded = !section.classList.contains('collapsed');
+            const hasChildren = section.querySelector('.collapsible-section') !== null;
+            // Create toggle button (chevron)
+            const toggle = document.createElement('span');
+            toggle.className = 'collapsible-toggle';
+            toggle.setAttribute('role', 'button');
+            toggle.setAttribute('tabindex', '0');
+            toggle.setAttribute('aria-expanded', String(isExpanded));
+            toggle.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M6 12l4-4-4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>`;
+            // Insert toggle before heading
+            wrapper.insertBefore(toggle, wrapper.firstChild);
+            // Add action buttons container (only if has children)
+            if (hasChildren) {
+                const actions = this.createActionButtons(section);
+                wrapper.appendChild(actions);
+            }
+            // Make the whole wrapper clickable
+            wrapper.style.cursor = 'pointer';
+            // Add click listener to wrapper (but not on action buttons)
+            wrapper.addEventListener('click', (e) => {
+                const target = e.target;
+                // Don't toggle if clicking on action buttons
+                if (target.closest('.collapsible-actions'))
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+                this.toggleSection(section, toggle);
+            });
+            // Add keyboard support
+            wrapper.addEventListener('keydown', (e) => {
+                const target = e.target;
+                if (target.closest('.collapsible-actions'))
+                    return;
+                const keyEvent = e;
+                if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
+                    e.preventDefault();
+                    this.toggleSection(section, toggle);
+                }
+            });
+        });
+    }
+    /**
+     * Create the expand/collapse all action buttons for sections with children
+     */
+    createActionButtons(section) {
+        const container = document.createElement('span');
+        container.className = 'collapsible-actions';
+        // Expand all button
+        const expandBtn = document.createElement('button');
+        expandBtn.className = 'collapsible-action-btn expand-all';
+        expandBtn.setAttribute('type', 'button');
+        expandBtn.setAttribute('title', 'Expand all');
+        expandBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M4 6l4 4 4-4" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M4 10l4 4 4-4" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`;
+        expandBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.expandDescendants(section);
+            // Also expand the section itself if collapsed
+            if (section.classList.contains('collapsed')) {
+                section.classList.remove('collapsed');
+                const toggle = section.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');
+                if (toggle)
+                    toggle.setAttribute('aria-expanded', 'true');
+            }
+        });
+        // Collapse all button
+        const collapseBtn = document.createElement('button');
+        collapseBtn.className = 'collapsible-action-btn collapse-all';
+        collapseBtn.setAttribute('type', 'button');
+        collapseBtn.setAttribute('title', 'Collapse all');
+        collapseBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M4 10l4-4 4 4" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M4 14l4-4 4 4" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`;
+        collapseBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.collapseDescendants(section);
+        });
+        container.appendChild(expandBtn);
+        container.appendChild(collapseBtn);
+        return container;
+    }
+    /**
+     * Toggle a collapsible section
+     * @param section The section element to toggle
+     * @param toggle The toggle button element
+     */
+    toggleSection(section, toggle) {
+        const isCollapsed = section.classList.contains('collapsed');
+        // Toggle the section
+        section.classList.toggle('collapsed');
+        toggle.setAttribute('aria-expanded', String(isCollapsed));
+        // Children retain their state - CSS handles visibility via parent collapse
+    }
+    /**
+     * Collapse all descendant sections (used by action button)
+     */
+    collapseDescendants(section) {
+        const descendants = section.querySelectorAll('.collapsible-section');
+        descendants.forEach((desc) => {
+            desc.classList.add('collapsed');
+            const toggle = desc.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');
+            if (toggle) {
+                toggle.setAttribute('aria-expanded', 'false');
+            }
+        });
+    }
+    /**
+     * Expand all descendant sections (used by action button)
+     */
+    expandDescendants(section) {
+        const descendants = section.querySelectorAll('.collapsible-section');
+        descendants.forEach((desc) => {
+            desc.classList.remove('collapsed');
+            const toggle = desc.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');
+            if (toggle) {
+                toggle.setAttribute('aria-expanded', 'true');
+            }
+        });
+    }
+    /**
+     * Setup click listeners for heading anchors
+     */
+    setupHeadingClickListeners(container) {
+        const headings = container.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]');
+        headings.forEach((heading) => {
+            heading.addEventListener('click', () => {
+                const id = heading.getAttribute('id') || '';
+                const text = heading.textContent || '';
+                const level = parseInt(heading.tagName.charAt(1), 10);
+                this.headingClick.emit({
+                    id,
+                    text,
+                    level,
+                    raw: text
+                });
+            });
+        });
+    }
+    /**
+     * Setup listeners to emit code copy events
+     */
+    setupCodeCopyListeners(container) {
+        const copyButtons = container.querySelectorAll('.code-copy-btn');
+        copyButtons.forEach((button) => {
+            button.addEventListener('click', () => {
+                const pre = button.closest('pre');
+                const code = pre?.querySelector('code');
+                if (code) {
+                    this.codeCopied.emit(code.textContent || '');
+                }
+            });
+        });
+    }
+    /**
+     * Cleanup event listeners
+     */
+    cleanupEventListeners() {
+        const container = this.elementRef.nativeElement.querySelector('.mj-markdown-container');
+        if (!container)
+            return;
+        // Clone and replace to remove all listeners
+        const clone = container.cloneNode(true);
+        container.parentNode?.replaceChild(clone, container);
+    }
+    /**
+     * Force a re-render of the markdown content
+     */
+    refresh() {
+        this.render();
+    }
+    /**
+     * Get the current heading list (for TOC building)
+     */
+    getHeadings() {
+        return this.markdownService.getHeadingList();
+    }
+    /**
+     * Scroll to a heading by ID
+     */
+    scrollToHeading(headingId) {
+        const container = this.elementRef.nativeElement.querySelector('.mj-markdown-container');
+        if (!container)
+            return;
+        const heading = container.querySelector(`#${headingId}`);
+        if (heading) {
+            heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    }
+    /**
+     * Strip JavaScript from HTML content while preserving layout HTML.
+     * Removes <script> tags, on* event handlers, and javascript: URLs.
+     */
+    stripJavaScript(html) {
+        // Remove <script> tags and their content
+        html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+        // Remove on* event handlers (onclick, onload, onerror, etc.)
+        html = html.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
+        html = html.replace(/\s+on\w+\s*=\s*[^\s>]+/gi, '');
+        // Remove javascript: URLs from href and src attributes
+        html = html.replace(/\s+href\s*=\s*["']javascript:[^"']*["']/gi, '');
+        html = html.replace(/\s+src\s*=\s*["']javascript:[^"']*["']/gi, '');
+        // Remove data: URLs that could contain scripts (data:text/html, etc.)
+        html = html.replace(/\s+src\s*=\s*["']data:text\/html[^"']*["']/gi, '');
+        return html;
+    }
+    static { this.ɵfac = function MarkdownComponent_Factory(t) { return new (t || MarkdownComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i2.MarkdownService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarkdownComponent, selectors: [["mj-markdown"]], inputs: { data: "data", enableHighlight: "enableHighlight", enableMermaid: "enableMermaid", enableCodeCopy: "enableCodeCopy", enableCollapsibleHeadings: "enableCollapsibleHeadings", collapsibleHeadingLevel: "collapsibleHeadingLevel", collapsibleDefaultExpanded: "collapsibleDefaultExpanded", autoExpandLevels: "autoExpandLevels", enableAlerts: "enableAlerts", enableSmartypants: "enableSmartypants", enableSvgRenderer: "enableSvgRenderer", enableHtml: "enableHtml", enableJavaScript: "enableJavaScript", enableHeadingIds: "enableHeadingIds", headingIdPrefix: "headingIdPrefix", enableLineNumbers: "enableLineNumbers", containerClass: "containerClass", mermaidTheme: "mermaidTheme", sanitize: "sanitize" }, outputs: { rendered: "rendered", headingClick: "headingClick", codeCopied: "codeCopied" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 3, consts: [[1, "mj-markdown-container", 3, "innerHTML"]], template: function MarkdownComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.containerClass);
+            i0.ɵɵproperty("innerHTML", ctx.renderedContent, i0.ɵɵsanitizeHtml);
+        } }, styles: ["/**\n * MJ Markdown Component Styles\n *\n * These styles apply to rendered markdown content.\n * Using ViewEncapsulation.None so styles penetrate into dynamically generated content.\n */\n\n/* ============================================\n   Container\n   ============================================ */\n.mj-markdown-container {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  font-size: 15px;\n  line-height: 1.6;\n  color: #1f2937;\n  word-wrap: break-word;\n}\n\n/* ============================================\n   Typography\n   ============================================ */\n.mj-markdown-container h1,\n.mj-markdown-container h2,\n.mj-markdown-container h3,\n.mj-markdown-container h4,\n.mj-markdown-container h5,\n.mj-markdown-container h6 {\n  margin-top: 1.5em;\n  margin-bottom: 0.5em;\n  font-weight: 600;\n  line-height: 1.25;\n  color: #111827;\n}\n\n.mj-markdown-container h1 { font-size: 1.75em; }\n.mj-markdown-container h2 { font-size: 1.5em; }\n.mj-markdown-container h3 { font-size: 1.25em; }\n.mj-markdown-container h4 { font-size: 1.1em; }\n.mj-markdown-container h5 { font-size: 1em; }\n.mj-markdown-container h6 { font-size: 0.9em; color: #6b7280; }\n\n.mj-markdown-container > h1:first-child,\n.mj-markdown-container > h2:first-child,\n.mj-markdown-container > h3:first-child {\n  margin-top: 0;\n}\n\n.mj-markdown-container p {\n  margin: 0 0 1em 0;\n}\n\n.mj-markdown-container > p:last-child {\n  margin-bottom: 0;\n}\n\n.mj-markdown-container a {\n  color: #3b82f6;\n  text-decoration: none;\n}\n\n.mj-markdown-container a:hover {\n  text-decoration: underline;\n}\n\n.mj-markdown-container strong {\n  font-weight: 600;\n}\n\n.mj-markdown-container em {\n  font-style: italic;\n}\n\n/* ============================================\n   Lists\n   ============================================ */\n.mj-markdown-container ul,\n.mj-markdown-container ol {\n  margin: 0 0 1em 0;\n  padding-left: 2em;\n}\n\n.mj-markdown-container li {\n  margin-bottom: 0.25em;\n}\n\n.mj-markdown-container li > ul,\n.mj-markdown-container li > ol {\n  margin-top: 0.25em;\n  margin-bottom: 0;\n}\n\n/* Task lists */\n.mj-markdown-container ul.contains-task-list {\n  list-style: none;\n  padding-left: 0;\n}\n\n.mj-markdown-container li.task-list-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5em;\n}\n\n.mj-markdown-container li.task-list-item input[type=\"checkbox\"] {\n  margin-top: 0.35em;\n}\n\n/* ============================================\n   Blockquotes\n   ============================================ */\n.mj-markdown-container blockquote {\n  margin: 1em 0;\n  padding: 0.5em 1em;\n  border-left: 4px solid #e5e7eb;\n  background: #f9fafb;\n  color: #4b5563;\n}\n\n.mj-markdown-container blockquote > p:last-child {\n  margin-bottom: 0;\n}\n\n/* ============================================\n   Code Blocks\n   ============================================ */\n.mj-markdown-container code {\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n  font-size: 0.9em;\n}\n\n/* Inline code */\n.mj-markdown-container :not(pre) > code {\n  padding: 0.2em 0.4em;\n  background: #f3f4f6;\n  border-radius: 4px;\n  color: #be185d;\n}\n\n/* Code blocks */\n.mj-markdown-container pre {\n  margin: 1em 0;\n  padding: 1em;\n  background: #1e1e1e;\n  border-radius: 8px;\n  overflow-x: auto;\n  position: relative;\n}\n\n.mj-markdown-container pre code {\n  background: transparent;\n  padding: 0;\n  color: #d4d4d4;\n  font-size: 0.875em;\n  line-height: 1.5;\n}\n\n/* ============================================\n   Code Toolbar (copy button, language label)\n   ============================================ */\n.mj-markdown-container .code-toolbar {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  z-index: 10;\n}\n\n.mj-markdown-container .code-language-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  user-select: none;\n}\n\n.mj-markdown-container .code-copy-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 6px;\n  color: #9ca3af;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  opacity: 0;\n}\n\n.mj-markdown-container pre:hover .code-copy-btn {\n  opacity: 1;\n}\n\n.mj-markdown-container .code-copy-btn:hover {\n  background: rgba(255, 255, 255, 0.2);\n  color: #fff;\n}\n\n.mj-markdown-container .code-copy-btn.copied {\n  background: rgba(34, 197, 94, 0.2);\n  border-color: rgba(34, 197, 94, 0.3);\n  color: #22c55e;\n}\n\n.mj-markdown-container .code-copy-btn.error {\n  background: rgba(239, 68, 68, 0.2);\n  border-color: rgba(239, 68, 68, 0.3);\n  color: #ef4444;\n}\n\n/* ============================================\n   Tables\n   ============================================ */\n.mj-markdown-container table {\n  width: 100%;\n  margin: 1em 0;\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n.mj-markdown-container th,\n.mj-markdown-container td {\n  padding: 0.5em 1em;\n  border: 1px solid #e5e7eb;\n  text-align: left;\n}\n\n.mj-markdown-container th {\n  background: #f9fafb;\n  font-weight: 600;\n}\n\n.mj-markdown-container tr:nth-child(even) {\n  background: #f9fafb;\n}\n\n/* ============================================\n   Horizontal Rule\n   ============================================ */\n.mj-markdown-container hr {\n  margin: 2em 0;\n  border: none;\n  border-top: 1px solid #e5e7eb;\n}\n\n/* ============================================\n   Images\n   ============================================ */\n.mj-markdown-container img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 4px;\n}\n\n/* ============================================\n   GitHub-style Alerts (marked-alert)\n   ============================================ */\n.mj-markdown-container .markdown-alert {\n  margin: 1em 0;\n  padding: 1em;\n  border-radius: 8px;\n  border-left: 4px solid;\n}\n\n.mj-markdown-container .markdown-alert-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  margin-bottom: 0.5em;\n}\n\n.mj-markdown-container .markdown-alert > p:last-child {\n  margin-bottom: 0;\n}\n\n/* Note */\n.mj-markdown-container .markdown-alert-note {\n  background: #eff6ff;\n  border-color: #3b82f6;\n}\n\n.mj-markdown-container .markdown-alert-note .markdown-alert-title {\n  color: #1d4ed8;\n}\n\n/* Tip */\n.mj-markdown-container .markdown-alert-tip {\n  background: #f0fdf4;\n  border-color: #22c55e;\n}\n\n.mj-markdown-container .markdown-alert-tip .markdown-alert-title {\n  color: #16a34a;\n}\n\n/* Important */\n.mj-markdown-container .markdown-alert-important {\n  background: #faf5ff;\n  border-color: #a855f7;\n}\n\n.mj-markdown-container .markdown-alert-important .markdown-alert-title {\n  color: #9333ea;\n}\n\n/* Warning */\n.mj-markdown-container .markdown-alert-warning {\n  background: #fffbeb;\n  border-color: #f59e0b;\n}\n\n.mj-markdown-container .markdown-alert-warning .markdown-alert-title {\n  color: #d97706;\n}\n\n/* Caution */\n.mj-markdown-container .markdown-alert-caution {\n  background: #fef2f2;\n  border-color: #ef4444;\n}\n\n.mj-markdown-container .markdown-alert-caution .markdown-alert-title {\n  color: #dc2626;\n}\n\n/* ============================================\n   Collapsible Headings\n   ============================================ */\n.mj-markdown-container .collapsible-section {\n  margin: 0.75em 0;\n  border-left: 2px solid transparent;\n  transition: border-color 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section:hover {\n  border-left-color: #e5e7eb;\n}\n\n/* Heading wrapper - contains toggle and heading */\n.mj-markdown-container .collapsible-heading-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 0;\n  border-radius: 4px;\n  transition: background-color 0.15s ease;\n  user-select: none;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n\n/* The heading itself */\n.mj-markdown-container .collapsible-heading {\n  margin: 0 !important;\n  flex: 1;\n}\n\n/* Toggle button/icon */\n.mj-markdown-container .collapsible-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  color: #9ca3af;\n  transition: transform 0.2s ease, color 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-toggle svg {\n  width: 14px;\n  height: 14px;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-toggle {\n  color: #6b7280;\n}\n\n/* Expanded state - arrow points down */\n.mj-markdown-container .collapsible-section:not(.collapsed) .collapsible-toggle {\n  transform: rotate(90deg);\n}\n\n/* Collapsed state - arrow points right (default SVG orientation) */\n.mj-markdown-container .collapsible-section.collapsed .collapsible-toggle {\n  transform: rotate(0deg);\n}\n\n/* Content area */\n.mj-markdown-container .collapsible-content {\n  padding-left: 26px;\n  overflow: hidden;\n  max-height: 5000px; /* Large enough for most content */\n  opacity: 1;\n  transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n  max-height: 0;\n  opacity: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  visibility: hidden;\n}\n\n/* Nested sections - indent further */\n.mj-markdown-container .collapsible-section .collapsible-section {\n  margin-left: 0;\n}\n\n/* Focus styles for accessibility */\n.mj-markdown-container .collapsible-heading-wrapper:focus-within {\n  outline: 2px solid #3b82f6;\n  outline-offset: 2px;\n}\n\n.mj-markdown-container .collapsible-toggle:focus {\n  outline: none;\n}\n\n/* Action buttons container - expand/collapse all */\n.mj-markdown-container .collapsible-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  margin-left: auto;\n  padding-left: 12px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-actions {\n  opacity: 1;\n}\n\n/* Individual action buttons */\n.mj-markdown-container .collapsible-action-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: #9ca3af;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;\n}\n\n.mj-markdown-container .collapsible-action-btn:hover {\n  background-color: rgba(0, 0, 0, 0.08);\n  color: #374151;\n}\n\n.mj-markdown-container .collapsible-action-btn:active {\n  transform: scale(0.92);\n}\n\n.mj-markdown-container .collapsible-action-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Expand all button - double down chevron */\n.mj-markdown-container .collapsible-action-btn.expand-all:hover {\n  color: #059669;\n  background-color: rgba(5, 150, 105, 0.1);\n}\n\n/* Collapse all button - double up chevron */\n.mj-markdown-container .collapsible-action-btn.collapse-all:hover {\n  color: #dc2626;\n  background-color: rgba(220, 38, 38, 0.1);\n}\n\n/* ============================================\n   Mermaid Diagrams\n   ============================================ */\n.mj-markdown-container .mermaid-diagram {\n  margin: 1em 0;\n  padding: 1em;\n  background: #fff;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  text-align: center;\n  overflow-x: auto;\n}\n\n.mj-markdown-container .mermaid-diagram svg {\n  max-width: 100%;\n  height: auto;\n}\n\n.mj-markdown-container .mermaid-error {\n  background: #fef2f2;\n  border-color: #fecaca;\n}\n\n.mj-markdown-container .mermaid-error::before {\n  content: 'Diagram rendering failed';\n  display: block;\n  color: #dc2626;\n  font-size: 12px;\n  margin-bottom: 8px;\n}\n\n/* ============================================\n   Heading Anchors\n   ============================================ */\n.mj-markdown-container h1[id],\n.mj-markdown-container h2[id],\n.mj-markdown-container h3[id],\n.mj-markdown-container h4[id],\n.mj-markdown-container h5[id],\n.mj-markdown-container h6[id] {\n  scroll-margin-top: 1em;\n}\n\n.mj-markdown-container h1[id]:hover,\n.mj-markdown-container h2[id]:hover,\n.mj-markdown-container h3[id]:hover,\n.mj-markdown-container h4[id]:hover,\n.mj-markdown-container h5[id]:hover,\n.mj-markdown-container h6[id]:hover {\n  cursor: pointer;\n}\n\n/* Anchor link indicator on hover */\n.mj-markdown-container h1[id]::before,\n.mj-markdown-container h2[id]::before,\n.mj-markdown-container h3[id]::before,\n.mj-markdown-container h4[id]::before,\n.mj-markdown-container h5[id]::before,\n.mj-markdown-container h6[id]::before {\n  content: '#';\n  position: absolute;\n  left: -1.5em;\n  color: #9ca3af;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.mj-markdown-container h1[id]:hover::before,\n.mj-markdown-container h2[id]:hover::before,\n.mj-markdown-container h3[id]:hover::before,\n.mj-markdown-container h4[id]:hover::before,\n.mj-markdown-container h5[id]:hover::before,\n.mj-markdown-container h6[id]:hover::before {\n  opacity: 1;\n}\n\n/* ============================================\n   Line Numbers (optional)\n   ============================================ */\n.mj-markdown-container pre.line-numbers {\n  padding-left: 3.5em;\n  counter-reset: line;\n}\n\n.mj-markdown-container pre.line-numbers code {\n  display: block;\n}\n\n.mj-markdown-container pre.line-numbers code .line::before {\n  counter-increment: line;\n  content: counter(line);\n  display: inline-block;\n  width: 2em;\n  margin-left: -3em;\n  margin-right: 1em;\n  text-align: right;\n  color: #6b7280;\n  user-select: none;\n}\n\n/* ============================================\n   Error State\n   ============================================ */\n.mj-markdown-container .markdown-error {\n  background: #fef2f2;\n  color: #dc2626;\n  padding: 1em;\n  border-radius: 8px;\n  border: 1px solid #fecaca;\n  white-space: pre-wrap;\n  font-family: monospace;\n}\n\n/* ============================================\n   Dark Mode Support\n   ============================================ */\n@media (prefers-color-scheme: dark) {\n  .mj-markdown-container.dark-mode {\n    color: #e5e7eb;\n  }\n\n  .mj-markdown-container.dark-mode h1,\n  .mj-markdown-container.dark-mode h2,\n  .mj-markdown-container.dark-mode h3,\n  .mj-markdown-container.dark-mode h4,\n  .mj-markdown-container.dark-mode h5,\n  .mj-markdown-container.dark-mode h6 {\n    color: #f9fafb;\n  }\n\n  .mj-markdown-container.dark-mode blockquote {\n    background: #1f2937;\n    border-color: #374151;\n    color: #9ca3af;\n  }\n\n  .mj-markdown-container.dark-mode :not(pre) > code {\n    background: #374151;\n    color: #f472b6;\n  }\n\n  .mj-markdown-container.dark-mode table th {\n    background: #1f2937;\n  }\n\n  .mj-markdown-container.dark-mode table tr:nth-child(even) {\n    background: #1f2937;\n  }\n\n  .mj-markdown-container.dark-mode th,\n  .mj-markdown-container.dark-mode td {\n    border-color: #374151;\n  }\n\n  .mj-markdown-container.dark-mode hr {\n    border-color: #374151;\n  }\n}\n\n/* ============================================\n   SVG Rendered Content\n   ============================================ */\n.mj-markdown-container .svg-rendered {\n  margin: 1em 0;\n  padding: 1em;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  text-align: center;\n  overflow: auto;\n}\n\n.mj-markdown-container .svg-rendered svg {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Dark mode for SVG rendered content */\n@media (prefers-color-scheme: dark) {\n  .mj-markdown-container.dark-mode .svg-rendered {\n    background: #1f2937;\n    border-color: #374151;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n@media print {\n  .mj-markdown-container .code-toolbar {\n    display: none;\n  }\n\n  .mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n    max-height: none;\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .mj-markdown-container pre {\n    background: #f3f4f6 !important;\n    color: #1f2937 !important;\n  }\n\n  .mj-markdown-container pre code {\n    color: #1f2937 !important;\n  }\n}\n"], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MarkdownComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-markdown', template: `
+    <div
+      class="mj-markdown-container"
+      [class]="containerClass"
+      [innerHTML]="renderedContent">
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/**\n * MJ Markdown Component Styles\n *\n * These styles apply to rendered markdown content.\n * Using ViewEncapsulation.None so styles penetrate into dynamically generated content.\n */\n\n/* ============================================\n   Container\n   ============================================ */\n.mj-markdown-container {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n  font-size: 15px;\n  line-height: 1.6;\n  color: #1f2937;\n  word-wrap: break-word;\n}\n\n/* ============================================\n   Typography\n   ============================================ */\n.mj-markdown-container h1,\n.mj-markdown-container h2,\n.mj-markdown-container h3,\n.mj-markdown-container h4,\n.mj-markdown-container h5,\n.mj-markdown-container h6 {\n  margin-top: 1.5em;\n  margin-bottom: 0.5em;\n  font-weight: 600;\n  line-height: 1.25;\n  color: #111827;\n}\n\n.mj-markdown-container h1 { font-size: 1.75em; }\n.mj-markdown-container h2 { font-size: 1.5em; }\n.mj-markdown-container h3 { font-size: 1.25em; }\n.mj-markdown-container h4 { font-size: 1.1em; }\n.mj-markdown-container h5 { font-size: 1em; }\n.mj-markdown-container h6 { font-size: 0.9em; color: #6b7280; }\n\n.mj-markdown-container > h1:first-child,\n.mj-markdown-container > h2:first-child,\n.mj-markdown-container > h3:first-child {\n  margin-top: 0;\n}\n\n.mj-markdown-container p {\n  margin: 0 0 1em 0;\n}\n\n.mj-markdown-container > p:last-child {\n  margin-bottom: 0;\n}\n\n.mj-markdown-container a {\n  color: #3b82f6;\n  text-decoration: none;\n}\n\n.mj-markdown-container a:hover {\n  text-decoration: underline;\n}\n\n.mj-markdown-container strong {\n  font-weight: 600;\n}\n\n.mj-markdown-container em {\n  font-style: italic;\n}\n\n/* ============================================\n   Lists\n   ============================================ */\n.mj-markdown-container ul,\n.mj-markdown-container ol {\n  margin: 0 0 1em 0;\n  padding-left: 2em;\n}\n\n.mj-markdown-container li {\n  margin-bottom: 0.25em;\n}\n\n.mj-markdown-container li > ul,\n.mj-markdown-container li > ol {\n  margin-top: 0.25em;\n  margin-bottom: 0;\n}\n\n/* Task lists */\n.mj-markdown-container ul.contains-task-list {\n  list-style: none;\n  padding-left: 0;\n}\n\n.mj-markdown-container li.task-list-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5em;\n}\n\n.mj-markdown-container li.task-list-item input[type=\"checkbox\"] {\n  margin-top: 0.35em;\n}\n\n/* ============================================\n   Blockquotes\n   ============================================ */\n.mj-markdown-container blockquote {\n  margin: 1em 0;\n  padding: 0.5em 1em;\n  border-left: 4px solid #e5e7eb;\n  background: #f9fafb;\n  color: #4b5563;\n}\n\n.mj-markdown-container blockquote > p:last-child {\n  margin-bottom: 0;\n}\n\n/* ============================================\n   Code Blocks\n   ============================================ */\n.mj-markdown-container code {\n  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n  font-size: 0.9em;\n}\n\n/* Inline code */\n.mj-markdown-container :not(pre) > code {\n  padding: 0.2em 0.4em;\n  background: #f3f4f6;\n  border-radius: 4px;\n  color: #be185d;\n}\n\n/* Code blocks */\n.mj-markdown-container pre {\n  margin: 1em 0;\n  padding: 1em;\n  background: #1e1e1e;\n  border-radius: 8px;\n  overflow-x: auto;\n  position: relative;\n}\n\n.mj-markdown-container pre code {\n  background: transparent;\n  padding: 0;\n  color: #d4d4d4;\n  font-size: 0.875em;\n  line-height: 1.5;\n}\n\n/* ============================================\n   Code Toolbar (copy button, language label)\n   ============================================ */\n.mj-markdown-container .code-toolbar {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  z-index: 10;\n}\n\n.mj-markdown-container .code-language-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  user-select: none;\n}\n\n.mj-markdown-container .code-copy-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 6px;\n  color: #9ca3af;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  opacity: 0;\n}\n\n.mj-markdown-container pre:hover .code-copy-btn {\n  opacity: 1;\n}\n\n.mj-markdown-container .code-copy-btn:hover {\n  background: rgba(255, 255, 255, 0.2);\n  color: #fff;\n}\n\n.mj-markdown-container .code-copy-btn.copied {\n  background: rgba(34, 197, 94, 0.2);\n  border-color: rgba(34, 197, 94, 0.3);\n  color: #22c55e;\n}\n\n.mj-markdown-container .code-copy-btn.error {\n  background: rgba(239, 68, 68, 0.2);\n  border-color: rgba(239, 68, 68, 0.3);\n  color: #ef4444;\n}\n\n/* ============================================\n   Tables\n   ============================================ */\n.mj-markdown-container table {\n  width: 100%;\n  margin: 1em 0;\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n.mj-markdown-container th,\n.mj-markdown-container td {\n  padding: 0.5em 1em;\n  border: 1px solid #e5e7eb;\n  text-align: left;\n}\n\n.mj-markdown-container th {\n  background: #f9fafb;\n  font-weight: 600;\n}\n\n.mj-markdown-container tr:nth-child(even) {\n  background: #f9fafb;\n}\n\n/* ============================================\n   Horizontal Rule\n   ============================================ */\n.mj-markdown-container hr {\n  margin: 2em 0;\n  border: none;\n  border-top: 1px solid #e5e7eb;\n}\n\n/* ============================================\n   Images\n   ============================================ */\n.mj-markdown-container img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 4px;\n}\n\n/* ============================================\n   GitHub-style Alerts (marked-alert)\n   ============================================ */\n.mj-markdown-container .markdown-alert {\n  margin: 1em 0;\n  padding: 1em;\n  border-radius: 8px;\n  border-left: 4px solid;\n}\n\n.mj-markdown-container .markdown-alert-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  margin-bottom: 0.5em;\n}\n\n.mj-markdown-container .markdown-alert > p:last-child {\n  margin-bottom: 0;\n}\n\n/* Note */\n.mj-markdown-container .markdown-alert-note {\n  background: #eff6ff;\n  border-color: #3b82f6;\n}\n\n.mj-markdown-container .markdown-alert-note .markdown-alert-title {\n  color: #1d4ed8;\n}\n\n/* Tip */\n.mj-markdown-container .markdown-alert-tip {\n  background: #f0fdf4;\n  border-color: #22c55e;\n}\n\n.mj-markdown-container .markdown-alert-tip .markdown-alert-title {\n  color: #16a34a;\n}\n\n/* Important */\n.mj-markdown-container .markdown-alert-important {\n  background: #faf5ff;\n  border-color: #a855f7;\n}\n\n.mj-markdown-container .markdown-alert-important .markdown-alert-title {\n  color: #9333ea;\n}\n\n/* Warning */\n.mj-markdown-container .markdown-alert-warning {\n  background: #fffbeb;\n  border-color: #f59e0b;\n}\n\n.mj-markdown-container .markdown-alert-warning .markdown-alert-title {\n  color: #d97706;\n}\n\n/* Caution */\n.mj-markdown-container .markdown-alert-caution {\n  background: #fef2f2;\n  border-color: #ef4444;\n}\n\n.mj-markdown-container .markdown-alert-caution .markdown-alert-title {\n  color: #dc2626;\n}\n\n/* ============================================\n   Collapsible Headings\n   ============================================ */\n.mj-markdown-container .collapsible-section {\n  margin: 0.75em 0;\n  border-left: 2px solid transparent;\n  transition: border-color 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section:hover {\n  border-left-color: #e5e7eb;\n}\n\n/* Heading wrapper - contains toggle and heading */\n.mj-markdown-container .collapsible-heading-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 0;\n  border-radius: 4px;\n  transition: background-color 0.15s ease;\n  user-select: none;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}\n\n/* The heading itself */\n.mj-markdown-container .collapsible-heading {\n  margin: 0 !important;\n  flex: 1;\n}\n\n/* Toggle button/icon */\n.mj-markdown-container .collapsible-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  color: #9ca3af;\n  transition: transform 0.2s ease, color 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-toggle svg {\n  width: 14px;\n  height: 14px;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-toggle {\n  color: #6b7280;\n}\n\n/* Expanded state - arrow points down */\n.mj-markdown-container .collapsible-section:not(.collapsed) .collapsible-toggle {\n  transform: rotate(90deg);\n}\n\n/* Collapsed state - arrow points right (default SVG orientation) */\n.mj-markdown-container .collapsible-section.collapsed .collapsible-toggle {\n  transform: rotate(0deg);\n}\n\n/* Content area */\n.mj-markdown-container .collapsible-content {\n  padding-left: 26px;\n  overflow: hidden;\n  max-height: 5000px; /* Large enough for most content */\n  opacity: 1;\n  transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n  max-height: 0;\n  opacity: 0;\n  padding-top: 0;\n  padding-bottom: 0;\n  visibility: hidden;\n}\n\n/* Nested sections - indent further */\n.mj-markdown-container .collapsible-section .collapsible-section {\n  margin-left: 0;\n}\n\n/* Focus styles for accessibility */\n.mj-markdown-container .collapsible-heading-wrapper:focus-within {\n  outline: 2px solid #3b82f6;\n  outline-offset: 2px;\n}\n\n.mj-markdown-container .collapsible-toggle:focus {\n  outline: none;\n}\n\n/* Action buttons container - expand/collapse all */\n.mj-markdown-container .collapsible-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  margin-left: auto;\n  padding-left: 12px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-actions {\n  opacity: 1;\n}\n\n/* Individual action buttons */\n.mj-markdown-container .collapsible-action-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: #9ca3af;\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;\n}\n\n.mj-markdown-container .collapsible-action-btn:hover {\n  background-color: rgba(0, 0, 0, 0.08);\n  color: #374151;\n}\n\n.mj-markdown-container .collapsible-action-btn:active {\n  transform: scale(0.92);\n}\n\n.mj-markdown-container .collapsible-action-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* Expand all button - double down chevron */\n.mj-markdown-container .collapsible-action-btn.expand-all:hover {\n  color: #059669;\n  background-color: rgba(5, 150, 105, 0.1);\n}\n\n/* Collapse all button - double up chevron */\n.mj-markdown-container .collapsible-action-btn.collapse-all:hover {\n  color: #dc2626;\n  background-color: rgba(220, 38, 38, 0.1);\n}\n\n/* ============================================\n   Mermaid Diagrams\n   ============================================ */\n.mj-markdown-container .mermaid-diagram {\n  margin: 1em 0;\n  padding: 1em;\n  background: #fff;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  text-align: center;\n  overflow-x: auto;\n}\n\n.mj-markdown-container .mermaid-diagram svg {\n  max-width: 100%;\n  height: auto;\n}\n\n.mj-markdown-container .mermaid-error {\n  background: #fef2f2;\n  border-color: #fecaca;\n}\n\n.mj-markdown-container .mermaid-error::before {\n  content: 'Diagram rendering failed';\n  display: block;\n  color: #dc2626;\n  font-size: 12px;\n  margin-bottom: 8px;\n}\n\n/* ============================================\n   Heading Anchors\n   ============================================ */\n.mj-markdown-container h1[id],\n.mj-markdown-container h2[id],\n.mj-markdown-container h3[id],\n.mj-markdown-container h4[id],\n.mj-markdown-container h5[id],\n.mj-markdown-container h6[id] {\n  scroll-margin-top: 1em;\n}\n\n.mj-markdown-container h1[id]:hover,\n.mj-markdown-container h2[id]:hover,\n.mj-markdown-container h3[id]:hover,\n.mj-markdown-container h4[id]:hover,\n.mj-markdown-container h5[id]:hover,\n.mj-markdown-container h6[id]:hover {\n  cursor: pointer;\n}\n\n/* Anchor link indicator on hover */\n.mj-markdown-container h1[id]::before,\n.mj-markdown-container h2[id]::before,\n.mj-markdown-container h3[id]::before,\n.mj-markdown-container h4[id]::before,\n.mj-markdown-container h5[id]::before,\n.mj-markdown-container h6[id]::before {\n  content: '#';\n  position: absolute;\n  left: -1.5em;\n  color: #9ca3af;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.mj-markdown-container h1[id]:hover::before,\n.mj-markdown-container h2[id]:hover::before,\n.mj-markdown-container h3[id]:hover::before,\n.mj-markdown-container h4[id]:hover::before,\n.mj-markdown-container h5[id]:hover::before,\n.mj-markdown-container h6[id]:hover::before {\n  opacity: 1;\n}\n\n/* ============================================\n   Line Numbers (optional)\n   ============================================ */\n.mj-markdown-container pre.line-numbers {\n  padding-left: 3.5em;\n  counter-reset: line;\n}\n\n.mj-markdown-container pre.line-numbers code {\n  display: block;\n}\n\n.mj-markdown-container pre.line-numbers code .line::before {\n  counter-increment: line;\n  content: counter(line);\n  display: inline-block;\n  width: 2em;\n  margin-left: -3em;\n  margin-right: 1em;\n  text-align: right;\n  color: #6b7280;\n  user-select: none;\n}\n\n/* ============================================\n   Error State\n   ============================================ */\n.mj-markdown-container .markdown-error {\n  background: #fef2f2;\n  color: #dc2626;\n  padding: 1em;\n  border-radius: 8px;\n  border: 1px solid #fecaca;\n  white-space: pre-wrap;\n  font-family: monospace;\n}\n\n/* ============================================\n   Dark Mode Support\n   ============================================ */\n@media (prefers-color-scheme: dark) {\n  .mj-markdown-container.dark-mode {\n    color: #e5e7eb;\n  }\n\n  .mj-markdown-container.dark-mode h1,\n  .mj-markdown-container.dark-mode h2,\n  .mj-markdown-container.dark-mode h3,\n  .mj-markdown-container.dark-mode h4,\n  .mj-markdown-container.dark-mode h5,\n  .mj-markdown-container.dark-mode h6 {\n    color: #f9fafb;\n  }\n\n  .mj-markdown-container.dark-mode blockquote {\n    background: #1f2937;\n    border-color: #374151;\n    color: #9ca3af;\n  }\n\n  .mj-markdown-container.dark-mode :not(pre) > code {\n    background: #374151;\n    color: #f472b6;\n  }\n\n  .mj-markdown-container.dark-mode table th {\n    background: #1f2937;\n  }\n\n  .mj-markdown-container.dark-mode table tr:nth-child(even) {\n    background: #1f2937;\n  }\n\n  .mj-markdown-container.dark-mode th,\n  .mj-markdown-container.dark-mode td {\n    border-color: #374151;\n  }\n\n  .mj-markdown-container.dark-mode hr {\n    border-color: #374151;\n  }\n}\n\n/* ============================================\n   SVG Rendered Content\n   ============================================ */\n.mj-markdown-container .svg-rendered {\n  margin: 1em 0;\n  padding: 1em;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  text-align: center;\n  overflow: auto;\n}\n\n.mj-markdown-container .svg-rendered svg {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Dark mode for SVG rendered content */\n@media (prefers-color-scheme: dark) {\n  .mj-markdown-container.dark-mode .svg-rendered {\n    background: #1f2937;\n    border-color: #374151;\n  }\n}\n\n/* ============================================\n   Print Styles\n   ============================================ */\n@media print {\n  .mj-markdown-container .code-toolbar {\n    display: none;\n  }\n\n  .mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n    max-height: none;\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .mj-markdown-container pre {\n    background: #f3f4f6 !important;\n    color: #1f2937 !important;\n  }\n\n  .mj-markdown-container pre code {\n    color: #1f2937 !important;\n  }\n}\n"] }]
+    }], () => [{ type: i0.ElementRef }, { type: i1.DomSanitizer }, { type: i2.MarkdownService }, { type: i0.ChangeDetectorRef }], { data: [{
+            type: Input
+        }], enableHighlight: [{
+            type: Input
+        }], enableMermaid: [{
+            type: Input
+        }], enableCodeCopy: [{
+            type: Input
+        }], enableCollapsibleHeadings: [{
+            type: Input
+        }], collapsibleHeadingLevel: [{
+            type: Input
+        }], collapsibleDefaultExpanded: [{
+            type: Input
+        }], autoExpandLevels: [{
+            type: Input
+        }], enableAlerts: [{
+            type: Input
+        }], enableSmartypants: [{
+            type: Input
+        }], enableSvgRenderer: [{
+            type: Input
+        }], enableHtml: [{
+            type: Input
+        }], enableJavaScript: [{
+            type: Input
+        }], enableHeadingIds: [{
+            type: Input
+        }], headingIdPrefix: [{
+            type: Input
+        }], enableLineNumbers: [{
+            type: Input
+        }], containerClass: [{
+            type: Input
+        }], mermaidTheme: [{
+            type: Input
+        }], sanitize: [{
+            type: Input
+        }], rendered: [{
+            type: Output
+        }], headingClick: [{
+            type: Output
+        }], codeCopied: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MarkdownComponent, { className: "MarkdownComponent", filePath: "src/lib/components/markdown.component.ts", lineNumber: 61 }); })();
+//# sourceMappingURL=markdown.component.js.map