@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/fesm2022/siemens-element-ng-markdown.mjs

@@ -0,0 +1,800 @@
+import { NgTemplateOutlet, NgComponentOutlet, JsonPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, computed, Component, linkedSignal, signal, SecurityContext, viewChild, TemplateRef, Directive, effect, untracked, booleanAttribute, output, viewChildren, contentChildren } from '@angular/core';
+import remarkDirective from 'remark-directive';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import { unified } from 'unified';
+import { elementLightOn, elementDocument, elementOk, elementCopy, elementDownload } from '@siemens/element-icons';
+import { STATUS_ICON_CONFIG, addIcons, SiIconComponent, SiStatusIconComponent } from '@siemens/element-ng/icon';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Token to pass the si-markdown component w/o circular dependencies.
+ */
+const SI_MARKDOWN_CONTROL = new InjectionToken('si.markdown.control');
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Renders a fragment of markdown based on the children of a single node in the AST.
+ */
+class SiMarkdownFragmentComponent {
+    control = inject(SI_MARKDOWN_CONTROL);
+    /** The node for which to render all children */
+    node = input.required({ ...(ngDevMode ? { debugName: "node" } : /* istanbul ignore next */ {}), alias: 'siMarkdownFragment' });
+    /** all the children of the node */
+    children = computed(() => this.node().children ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownFragmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiMarkdownFragmentComponent, isStandalone: true, selector: "si-markdown-fragment, [siMarkdownFragment]", inputs: { node: { classPropertyName: "node", publicName: "siMarkdownFragment", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "markdown-content" }, ngImport: i0, template: "<ng-content />\n\n@let templates = control.templates();\n@for (child of children(); track $index) {\n  <ng-container\n    [ngTemplateOutlet]=\"templates.get(child.type) ?? templates.get('__default-template')\"\n    [ngTemplateOutletContext]=\"{ $implicit: child, parent: node() }\"\n  />\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownFragmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-markdown-fragment, [siMarkdownFragment]', imports: [NgTemplateOutlet], host: {
+                        class: 'markdown-content'
+                    }, template: "<ng-content />\n\n@let templates = control.templates();\n@for (child of children(); track $index) {\n  <ng-container\n    [ngTemplateOutlet]=\"templates.get(child.type) ?? templates.get('__default-template')\"\n    [ngTemplateOutletContext]=\"{ $implicit: child, parent: node() }\"\n  />\n}\n" }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "siMarkdownFragment", required: true }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiMarkdownCalloutComponent {
+    statusIcons = inject(STATUS_ICON_CONFIG);
+    node = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    parent = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    icons = addIcons({ elementLightOn });
+    callouts = {
+        info: { label: this.statusIcons.info.ariaLabel, severity: 'info' },
+        success: { label: this.statusIcons.success.ariaLabel, severity: 'success' },
+        warning: { label: this.statusIcons.warning.ariaLabel, severity: 'warning' },
+        danger: { label: this.statusIcons.danger.ariaLabel, severity: 'danger' },
+        caution: { label: this.statusIcons.caution.ariaLabel, severity: 'caution' },
+        critical: { label: this.statusIcons.critical.ariaLabel, severity: 'critical' },
+        note: {
+            label: t(() => $localize `:@@SI_MARKDOWN_CALLOUT.NOTE:Note`),
+            severity: 'info'
+        },
+        tip: {
+            label: t(() => $localize `:@@SI_MARKDOWN_CALLOUT.TIP:Tip`),
+            severity: 'success',
+            icon: this.icons.elementLightOn,
+            color: this.statusIcons.success.color
+        }
+    };
+    config = computed(() => {
+        const directive = this.node();
+        const type = directive.attributes.type?.toLocaleLowerCase();
+        return {
+            callout: this.callouts[type] ?? this.callouts.note,
+            heading: directive.attributes.heading
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiMarkdownCalloutComponent, isStandalone: true, selector: "si-markdown-callout", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-block mb-4" }, ngImport: i0, template: "@let conf = config();\n<div class=\"card card-outline\" [class]=\"`accent-${conf.callout.severity}`\">\n  <div class=\"card-header d-flex aling-items-center\">\n    @if (conf.callout.icon) {\n      <si-icon\n        class=\"icon me-4 flex-shrink-0\"\n        [icon]=\"conf.callout.icon\"\n        [class]=\"conf.callout.color\"\n      />\n    } @else {\n      <si-status-icon\n        class=\"icon me-4 flex-shrink-0\"\n        aria-hidden=\"true\"\n        [status]=\"conf.callout.severity\"\n      />\n    }\n    <span [class]=\"`text-${conf.callout.severity}`\">\n      {{ conf.callout.label | translate }}\n      @if (conf.heading) {\n        - {{ conf.heading }}\n      }\n    </span>\n  </div>\n  <div class=\"card-body pb-4\">\n    <div [siMarkdownFragment]=\"node()\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "component", type: SiMarkdownFragmentComponent, selector: "si-markdown-fragment, [siMarkdownFragment]", inputs: ["siMarkdownFragment"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownCalloutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-markdown-callout', imports: [SiIconComponent, SiStatusIconComponent, SiMarkdownFragmentComponent, SiTranslatePipe], host: {
+                        class: 'd-block mb-4'
+                    }, template: "@let conf = config();\n<div class=\"card card-outline\" [class]=\"`accent-${conf.callout.severity}`\">\n  <div class=\"card-header d-flex aling-items-center\">\n    @if (conf.callout.icon) {\n      <si-icon\n        class=\"icon me-4 flex-shrink-0\"\n        [icon]=\"conf.callout.icon\"\n        [class]=\"conf.callout.color\"\n      />\n    } @else {\n      <si-status-icon\n        class=\"icon me-4 flex-shrink-0\"\n        aria-hidden=\"true\"\n        [status]=\"conf.callout.severity\"\n      />\n    }\n    <span [class]=\"`text-${conf.callout.severity}`\">\n      {{ conf.callout.label | translate }}\n      @if (conf.heading) {\n        - {{ conf.heading }}\n      }\n    </span>\n  </div>\n  <div class=\"card-body pb-4\">\n    <div [siMarkdownFragment]=\"node()\"></div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+
+const siMarkdownCalloutDirective = () => ({
+    type: 'callout',
+    component: SiMarkdownCalloutComponent
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiMarkdownCodeComponent {
+    node = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    parent = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    icons = addIcons({ elementCopy, elementOk, elementDocument });
+    labelCopy = t(() => $localize `:@@SI_MARKDOWN.COPY_CODE:Copy code`);
+    labelCopied = t(() => $localize `:@@SI_MARKDOWN.COPIED_CODE:Copied`);
+    code = computed(() => this.node().value, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    language = computed(() => this.node().lang, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    highlighter = computed(() => this.options()?.getHighlighter(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlighter" }] : /* istanbul ignore next */ []));
+    filename = computed(() => {
+        const meta = this.node().meta ?? '';
+        const match = meta.match('\\[([^\\]]+)\\]');
+        return match ? match[1] : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filename" }] : /* istanbul ignore next */ []));
+    languageToDisplay = linkedSignal(() => this.language(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "languageToDisplay" }] : /* istanbul ignore next */ []));
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    copyTimeout;
+    updateLanguage = (lang) => this.languageToDisplay.set(lang);
+    ngOnDestroy() {
+        clearTimeout(this.copyTimeout);
+    }
+    async copy() {
+        await navigator.clipboard.writeText(this.code());
+        this.copied.set(true);
+        this.copyTimeout = setTimeout(() => this.copied.set(false), 1500);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiMarkdownCodeComponent, isStandalone: true, selector: "si-markdown-code", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-line": "node().position?.start?.line" }, classAttribute: "d-flex flex-column px-6 py-5 mb-6 border rounded" }, ngImport: i0, template: "<div class=\"d-flex align-items-center mb-6\">\n  @let file = filename();\n  @if (file) {\n    <span class=\"filename border rounded-1 px-1 me-4\">\n      <si-icon class=\"icon-sm\" [icon]=\"icons.elementDocument\" />\n      {{ file }}\n    </span>\n  }\n  <span class=\"code-language\" [class.text-secondary]=\"file\">\n    {{ languageToDisplay() }}\n  </span>\n  <div class=\"ms-auto\">\n    @if (copied()) {\n      <div class=\"btn text-secondary btn-sm copied\">\n        <si-icon class=\"icon\" [icon]=\"icons.elementOk\" />\n        {{ labelCopied | translate }}\n      </div>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"btn btn-tertiary btn-icon btn-sm\"\n        [aria-label]=\"labelCopy | translate\"\n        (click)=\"copy()\"\n      >\n        <si-icon class=\"icon\" [icon]=\"icons.elementCopy\" />\n      </button>\n    }\n  </div>\n</div>\n\n@let hl = highlighter();\n@if (hl) {\n  <ng-container\n    [ngComponentOutlet]=\"hl.component\"\n    [ngComponentOutletInputs]=\"{\n      code: code(),\n      language: language(),\n      options: hl.options,\n      updateLanguage\n    }\"\n  />\n} @else {\n  <pre class=\"border-0 m-0 p-0\"><code>{{ code() }}</code></pre>\n}\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownCodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-markdown-code', imports: [NgComponentOutlet, SiIconComponent, SiTranslatePipe], host: {
+                        class: 'd-flex flex-column px-6 py-5 mb-6 border rounded',
+                        '[attr.data-line]': 'node().position?.start?.line'
+                    }, template: "<div class=\"d-flex align-items-center mb-6\">\n  @let file = filename();\n  @if (file) {\n    <span class=\"filename border rounded-1 px-1 me-4\">\n      <si-icon class=\"icon-sm\" [icon]=\"icons.elementDocument\" />\n      {{ file }}\n    </span>\n  }\n  <span class=\"code-language\" [class.text-secondary]=\"file\">\n    {{ languageToDisplay() }}\n  </span>\n  <div class=\"ms-auto\">\n    @if (copied()) {\n      <div class=\"btn text-secondary btn-sm copied\">\n        <si-icon class=\"icon\" [icon]=\"icons.elementOk\" />\n        {{ labelCopied | translate }}\n      </div>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"btn btn-tertiary btn-icon btn-sm\"\n        [aria-label]=\"labelCopy | translate\"\n        (click)=\"copy()\"\n      >\n        <si-icon class=\"icon\" [icon]=\"icons.elementCopy\" />\n      </button>\n    }\n  </div>\n</div>\n\n@let hl = highlighter();\n@if (hl) {\n  <ng-container\n    [ngComponentOutlet]=\"hl.component\"\n    [ngComponentOutletInputs]=\"{\n      code: code(),\n      language: language(),\n      options: hl.options,\n      updateLanguage\n    }\"\n  />\n} @else {\n  <pre class=\"border-0 m-0 p-0\"><code>{{ code() }}</code></pre>\n}\n" }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+
+/** Extension to render code blocks. This is always installed automatically. */
+const siMarkdownCode = (options) => {
+    return {
+        types: [{ type: 'code', component: SiMarkdownCodeComponent, options }]
+    };
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiMarkdownDirectiveComponent {
+    node = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    parent = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    directiveComponent = computed(() => {
+        const directive = this.node();
+        return this.options()?.get(directive.name)?.component;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directiveComponent" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownDirectiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiMarkdownDirectiveComponent, isStandalone: true, selector: "si-markdown-directive", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @let component = directiveComponent();
+    @if (component) {
+      <ng-container
+        [ngComponentOutlet]="component"
+        [ngComponentOutletInputs]="{ node: node(), parent: parent() }"
+      />
+    } @else {
+      <div [siMarkdownFragment]="node()"></div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: SiMarkdownFragmentComponent, selector: "si-markdown-fragment, [siMarkdownFragment]", inputs: ["siMarkdownFragment"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownDirectiveComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'si-markdown-directive',
+                    imports: [NgComponentOutlet, SiMarkdownFragmentComponent],
+                    template: `
+    @let component = directiveComponent();
+    @if (component) {
+      <ng-container
+        [ngComponentOutlet]="component"
+        [ngComponentOutletInputs]="{ node: node(), parent: parent() }"
+      />
+    } @else {
+      <div [siMarkdownFragment]="node()"></div>
+    }
+  `
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+
+const directiveNodeTypes = ['containerDirective', 'leafDirective', 'textDirective'];
+/** Installs component rendering for directives parsed by `remark-directive`. */
+const siMarkdownDirective = (directives) => ({
+    types: directiveNodeTypes.map(type => ({
+        type,
+        component: SiMarkdownDirectiveComponent,
+        options: directives
+    }))
+});
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiMarkdownInlineHtmlComponent {
+    sanitizer = inject(DomSanitizer);
+    node = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    parent = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    html = computed(() => this.node().value, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+    sanitized = computed(() => {
+        const html = this.html();
+        // because those are very common
+        if (html === '<br>' || html === '<hr>') {
+            return this.sanitizer.bypassSecurityTrustHtml(html);
+        }
+        return this.sanitizer.sanitize(SecurityContext.HTML, html);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sanitized" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownInlineHtmlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SiMarkdownInlineHtmlComponent, isStandalone: true, selector: "si-markdown-inline-html", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "sanitized()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownInlineHtmlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'si-markdown-inline-html',
+                    template: '',
+                    host: {
+                        '[innerHTML]': 'sanitized()'
+                    }
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+
+/** Extension to render sanitized inline HTML. This is always installed automatically. */
+const siMarkdownInlineHtml = () => {
+    return {
+        types: [{ type: 'html', component: SiMarkdownInlineHtmlComponent }]
+    };
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiMarkdownLinkComponent {
+    node = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    parent = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    icons = addIcons({ elementDocument });
+    link = computed(() => this.node(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
+    fileUrl = computed(() => {
+        try {
+            const url = new URL(this.link().url);
+            return url.protocol === 'file:' ? url : undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileUrl" }] : /* istanbul ignore next */ []));
+    isFileLink = computed(() => this.fileUrl() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFileLink" }] : /* istanbul ignore next */ []));
+    filename = computed(() => {
+        const path = this.fileUrl()?.pathname ?? '';
+        return decodeURIComponent(path).split('/').at(-1) ?? '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filename" }] : /* istanbul ignore next */ []));
+    hasLabel = computed(() => this.link().children.length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiMarkdownLinkComponent, isStandalone: true, selector: "si-markdown-link", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let directLink = link();\n@if (isFileLink()) {\n  <a\n    class=\"filename border rounded-1 px-1 d-inline-flex align-items-center\"\n    [href]=\"directLink.url\"\n    [title]=\"directLink.title ?? ''\"\n  >\n    <si-icon class=\"icon-sm me-1\" [icon]=\"icons.elementDocument\" />\n    @if (hasLabel()) {\n      <span [siMarkdownFragment]=\"directLink\"></span>\n    } @else {\n      {{ filename() }}\n    }\n  </a>\n} @else {\n  <a [href]=\"directLink.url\" [title]=\"directLink.title ?? ''\" [siMarkdownFragment]=\"directLink\"></a>\n}\n", styles: [":host{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMarkdownFragmentComponent, selector: "si-markdown-fragment, [siMarkdownFragment]", inputs: ["siMarkdownFragment"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-markdown-link', imports: [SiIconComponent, SiMarkdownFragmentComponent], template: "@let directLink = link();\n@if (isFileLink()) {\n  <a\n    class=\"filename border rounded-1 px-1 d-inline-flex align-items-center\"\n    [href]=\"directLink.url\"\n    [title]=\"directLink.title ?? ''\"\n  >\n    <si-icon class=\"icon-sm me-1\" [icon]=\"icons.elementDocument\" />\n    @if (hasLabel()) {\n      <span [siMarkdownFragment]=\"directLink\"></span>\n    } @else {\n      {{ filename() }}\n    }\n  </a>\n} @else {\n  <a [href]=\"directLink.url\" [title]=\"directLink.title ?? ''\" [siMarkdownFragment]=\"directLink\"></a>\n}\n", styles: [":host{vertical-align:middle}\n"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+
+/** Extension to render markdown links. This is always installed automatically. */
+const siMarkdownLink = () => {
+    return {
+        types: [{ type: 'link', component: SiMarkdownLinkComponent }]
+    };
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiMarkdownTableComponent {
+    node = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    parent = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    icons = addIcons({ elementCopy, elementDownload, elementOk });
+    labelCopy = t(() => $localize `:@@SI_MARKDOWN.COPY_TABLE_AS_CSV:Copy table as CSV`);
+    labelCopied = t(() => $localize `:@@SI_MARKDOWN.COPIED_CODE:Copied`);
+    labelDownload = t(() => $localize `:@@SI_MARKDOWN.DOWNLOAD_TABLE_AS_CSV:Download table as CSV`);
+    table = computed(() => this.node(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    tableElement = viewChild.required('renderedTable', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableElement" }] : /* istanbul ignore next */ []));
+    copyTimeout;
+    ngOnDestroy() {
+        clearTimeout(this.copyTimeout);
+    }
+    async copy() {
+        await navigator.clipboard.writeText(this.csv());
+        this.copied.set(true);
+        this.copyTimeout = setTimeout(() => this.copied.set(false), 1500);
+    }
+    download() {
+        const blob = new Blob([this.csv()], { type: 'text/csv;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'table.csv';
+        link.click();
+        URL.revokeObjectURL(url);
+    }
+    csv() {
+        return Array.from(this.tableElement().nativeElement.rows, row => Array.from(row.cells, cell => this.escapeCsvField(cell.innerText.trim())).join(',')).join('\r\n');
+    }
+    escapeCsvField(value) {
+        return /[",\r\n]/.test(value) ? `"${value.replaceAll('"', '""')}"` : value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiMarkdownTableComponent, isStandalone: true, selector: "si-markdown-table", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["renderedTable"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"markdown-table-container mb-6\">\n  <div class=\"markdown-table-wrapper\">\n    <table\n      #renderedTable\n      class=\"markdown-table table mb-0\"\n      [attr.data-line]=\"table().position?.start?.line\"\n    >\n      <thead>\n        <tr>\n          @for (cell of table().children[0].children; track $index) {\n            <th [siMarkdownFragment]=\"cell\" [style.text-align]=\"table().align?.[$index]\"></th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table().children.slice(1); track $index) {\n          <tr [attr.data-line]=\"row.position?.start?.line\">\n            @for (cell of row.children; track $index; let cellIndex = $index) {\n              <td [siMarkdownFragment]=\"cell\" [style.text-align]=\"table().align?.[cellIndex]\"></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n  <div class=\"markdown-table-actions d-flex justify-content-end gap-2 mt-2\">\n    @if (copied()) {\n      <div class=\"btn text-secondary btn-sm copied\">\n        <si-icon class=\"icon\" [icon]=\"icons.elementOk\" />\n        {{ labelCopied | translate }}\n      </div>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"btn btn-tertiary btn-icon btn-sm\"\n        [aria-label]=\"labelCopy | translate\"\n        (click)=\"copy()\"\n      >\n        <si-icon class=\"icon\" [icon]=\"icons.elementCopy\" />\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary btn-icon btn-sm\"\n      [aria-label]=\"labelDownload | translate\"\n      (click)=\"download()\"\n    >\n      <si-icon class=\"icon\" [icon]=\"icons.elementDownload\" />\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;max-inline-size:100%;min-inline-size:0}.markdown-table-container{inline-size:fit-content;max-inline-size:100%}.markdown-table-wrapper{max-inline-size:100%;overflow-x:auto}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiMarkdownFragmentComponent, selector: "si-markdown-fragment, [siMarkdownFragment]", inputs: ["siMarkdownFragment"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-markdown-table', imports: [SiIconComponent, SiMarkdownFragmentComponent, SiTranslatePipe], template: "<div class=\"markdown-table-container mb-6\">\n  <div class=\"markdown-table-wrapper\">\n    <table\n      #renderedTable\n      class=\"markdown-table table mb-0\"\n      [attr.data-line]=\"table().position?.start?.line\"\n    >\n      <thead>\n        <tr>\n          @for (cell of table().children[0].children; track $index) {\n            <th [siMarkdownFragment]=\"cell\" [style.text-align]=\"table().align?.[$index]\"></th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of table().children.slice(1); track $index) {\n          <tr [attr.data-line]=\"row.position?.start?.line\">\n            @for (cell of row.children; track $index; let cellIndex = $index) {\n              <td [siMarkdownFragment]=\"cell\" [style.text-align]=\"table().align?.[cellIndex]\"></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n  <div class=\"markdown-table-actions d-flex justify-content-end gap-2 mt-2\">\n    @if (copied()) {\n      <div class=\"btn text-secondary btn-sm copied\">\n        <si-icon class=\"icon\" [icon]=\"icons.elementOk\" />\n        {{ labelCopied | translate }}\n      </div>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"btn btn-tertiary btn-icon btn-sm\"\n        [aria-label]=\"labelCopy | translate\"\n        (click)=\"copy()\"\n      >\n        <si-icon class=\"icon\" [icon]=\"icons.elementCopy\" />\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"btn btn-tertiary btn-icon btn-sm\"\n      [aria-label]=\"labelDownload | translate\"\n      (click)=\"download()\"\n    >\n      <si-icon class=\"icon\" [icon]=\"icons.elementDownload\" />\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;max-inline-size:100%;min-inline-size:0}.markdown-table-container{inline-size:fit-content;max-inline-size:100%}.markdown-table-wrapper{max-inline-size:100%;overflow-x:auto}\n"] }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], tableElement: [{ type: i0.ViewChild, args: ['renderedTable', { isSignal: true }] }] } });
+
+/** Extension to render markdown tables. This is always installed automatically. */
+const siMarkdownTable = () => {
+    return {
+        types: [{ type: 'table', component: SiMarkdownTableComponent }]
+    };
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+const githubAdmonitionPattern = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\][ \t]*(?:\r?\n|$)/;
+/** Turns GitHub style admonitions into a callout directive */
+const toCalloutDirective = (node) => {
+    const firstChild = node.children[0];
+    if (firstChild?.type !== 'paragraph') {
+        return;
+    }
+    const firstText = firstChild.children[0];
+    if (firstText?.type !== 'text') {
+        return;
+    }
+    const match = githubAdmonitionPattern.exec(firstText.value);
+    if (!match) {
+        return;
+    }
+    firstText.value = firstText.value.slice(match[0].length);
+    if (!firstText.value) {
+        firstChild.children.shift();
+    }
+    if (!firstChild.children.length) {
+        node.children.shift();
+    }
+    Object.assign(node, {
+        type: 'containerDirective',
+        name: 'callout',
+        attributes: { type: match[1].toLowerCase() }
+    });
+};
+/** Moves footnote definitions into a single root-level container. */
+const siMarkdownPostprocess = () => tree => {
+    const footnoteReferences = [];
+    const footnoteDefinitions = [];
+    const footnoteDefinitionsMap = new Map();
+    const definitionsMap = new Map();
+    const collect = (parent) => {
+        for (let index = 0; index < parent.children.length; index++) {
+            const child = parent.children[index];
+            if (child.type === 'blockquote') {
+                toCalloutDirective(child);
+            }
+            if (child.type === 'footnoteReference') {
+                footnoteReferences.push(child);
+            }
+            else if (child.type === 'footnoteDefinition') {
+                footnoteDefinitions.push(child);
+                footnoteDefinitionsMap.set(child.identifier, child);
+                parent.children.splice(index, 1);
+                index--;
+                continue;
+            }
+            else if (child.type === 'definition') {
+                definitionsMap.set(child.identifier, child);
+                parent.children.splice(index, 1);
+                index--;
+            }
+            if ('children' in child) {
+                collect(child);
+            }
+        }
+    };
+    collect(tree);
+    // Footnotes are always numbered
+    for (let index = 0; index < footnoteDefinitions.length; index++) {
+        const footnoteDefinition = footnoteDefinitions[index];
+        footnoteDefinition.label = `${index + 1}`;
+    }
+    // updated all references
+    for (const reference of footnoteReferences) {
+        const footnoteDefinition = footnoteDefinitionsMap.get(reference.identifier);
+        if (footnoteDefinition) {
+            reference.label = footnoteDefinition.label;
+        }
+    }
+    const root = {
+        ...tree,
+        references: {
+            footnoteDefinitions: footnoteDefinitionsMap,
+            definitions: definitionsMap
+        }
+    };
+    if (footnoteDefinitions.length) {
+        root.children.push({ type: 'footnotes', children: footnoteDefinitions });
+    }
+    return root;
+};
+
+/**
+ * Options for the markdown renderer. This holds all configuration and allows installing
+ * extensions. A number of extensions are already ready to use and shipped with Element.
+ *
+ * @example
+ * ```ts
+ * import { siMarkdownMathKaTeX } from '@siemens/element-ng/markdown/extensions/math';
+ * import remarkGemoji from 'remark-gemoji';
+ *
+ * protected markdownOptions = new SiMarkdownOptions()
+ *   .installExtension(siMarkdownMathKaTeX())
+ *   .installUnifiedPlugin(remarkGemoji);
+ * ```
+ *
+ * ```html
+ * <si-markdown [markdown]="markdownText()" [options]="markdownOptions" />
+ * ```
+ */
+class SiMarkdownOptions {
+    plugins = [];
+    types = [];
+    codeTypes = new Map();
+    directives = new Map();
+    highlighter;
+    constructor() {
+        this.installExtension(siMarkdownInlineHtml())
+            .installExtension(siMarkdownLink())
+            .installExtension(siMarkdownTable())
+            .installExtension(siMarkdownCode({ getHighlighter: () => this.getHighlighter() }))
+            .installExtension(siMarkdownDirective(this.directives))
+            .registerDirective(siMarkdownCalloutDirective());
+    }
+    /**
+     * Installs a plugin into the `unified` chain
+     * @param plugin - The `unified` plugin
+     * @param options - Options for the plugin
+     * @returns self for chaining
+     */
+    installUnifiedPlugin(plugin, options) {
+        this.plugins.push({ plugin, options });
+        return this;
+    }
+    /**
+     * Registers a component used to render a named Markdown directive.
+     * @param directive - The directive with name and handling component
+     * @returns self for chaining
+     */
+    registerDirective(directives) {
+        if (!Array.isArray(directives)) {
+            directives = [directives];
+        }
+        for (const directive of directives) {
+            this.directives.set(directive.type, directive);
+        }
+        return this;
+    }
+    /**
+     * Installs a extension which can contain plugins, type handlers
+     * @param extension - The extension definition
+     * @returns self for chaining
+     */
+    installExtension(extension) {
+        if (extension.plugins) {
+            this.plugins.push(...extension.plugins);
+        }
+        if (extension.types) {
+            this.types.push(...extension.types);
+        }
+        if (extension.codeTypes) {
+            for (const ct of extension.codeTypes) {
+                this.codeTypes.set(ct.type, ct);
+            }
+        }
+        if (extension.directives) {
+            this.registerDirective(extension.directives);
+        }
+        return this;
+    }
+    /**
+     * Sets the code highlighter
+     * @param highlighter - The highlighter
+     */
+    setCodeHighlighter(highlighter) {
+        this.highlighter = highlighter;
+        return this;
+    }
+    /**
+     * Creates the `unified` processor with all plugins and options
+     * @returns `unified` processor
+     */
+    makeProcessor(meta) {
+        const processor = unified().use(remarkParse).use(remarkGfm).use(remarkDirective);
+        for (const p of this.plugins) {
+            const options = typeof p.options === 'function' ? p.options(meta) : p.options;
+            processor.use(p.plugin, options);
+        }
+        return processor.use(siMarkdownPostprocess);
+    }
+    /**
+     * @returns All type handlers
+     */
+    getTypeHandlers() {
+        return this.types;
+    }
+    /**
+     * @returns All code type handlers
+     */
+    getCodeTypeHandlers() {
+        return this.codeTypes;
+    }
+    /**
+     * @returns The highlighter
+     */
+    getHighlighter() {
+        return this.highlighter;
+    }
+}
+const makeSiMarkdownOptions = () => new SiMarkdownOptions();
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/** Directive used to mark a template as a node type for rendering. */
+class SiMarkdownTemplateDirective {
+    template = inject(TemplateRef);
+    // this should be required, but in some transitional state in the templates computed, this fails
+    /** @defaultValue '#dummy' */
+    nodeType = input('#dummy', { ...(ngDevMode ? { debugName: "nodeType" } : /* istanbul ignore next */ {}), alias: 'siMarkdownTemplate' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiMarkdownTemplateDirective, isStandalone: true, selector: "[siMarkdownTemplate]", inputs: { nodeType: { classPropertyName: "nodeType", publicName: "siMarkdownTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siMarkdownTemplate]'
+                }]
+        }], propDecorators: { nodeType: [{ type: i0.Input, args: [{ isSignal: true, alias: "siMarkdownTemplate", required: false }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Computed value, but async. This exists because the `resource()` API is not suitable. During
+ * loading, the value changes to `undefined`. The proposed solution of resource snapshots and
+ * a `withPreviousValue()` function that uses `resourceFromSnapshots()` isn't suitable either
+ * because it's experimental.
+ *
+ * @param options - the options
+ * @returns readonly signal
+ */
+const computedAsync = (options) => {
+    const resultSignal = signal(options.initial, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resultSignal" }] : /* istanbul ignore next */ []));
+    effect(async (onCleanup) => {
+        const params = options.params();
+        let destroyed = false;
+        untracked(async () => {
+            const result = await options.computation(params);
+            if (!destroyed) {
+                resultSignal.set(result);
+            }
+        });
+        onCleanup(() => (destroyed = true));
+    });
+    return resultSignal.asReadonly();
+};
+/**
+ * A readonly throttled version of a signal. Emits at most every `interval` milliseconds
+ * @param source - the source signal
+ * @param interval - the interval
+ * @param immediatelyEmitFirstChange - immediately emit the first change
+ * @returns A readonly signal
+ */
+const throttledSignal = (source, interval, immediatelyEmitFirstChange = true) => {
+    const resultSignal = signal(source(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resultSignal" }] : /* istanbul ignore next */ []));
+    let lastEmitted = 0;
+    let timer = null;
+    let firstChangeSeen = false;
+    effect(onCleanup => {
+        const value = source();
+        const now = Date.now();
+        if (!firstChangeSeen && immediatelyEmitFirstChange) {
+            firstChangeSeen = true;
+            resultSignal.set(value);
+            return;
+        }
+        if (now - lastEmitted >= interval) {
+            resultSignal.set(value);
+            lastEmitted = now;
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+        }
+        else {
+            timer ??= setTimeout(() => {
+                resultSignal.set(source());
+                lastEmitted = Date.now();
+                timer = null;
+            }, interval - (now - lastEmitted));
+        }
+        onCleanup(() => {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+        });
+    });
+    return resultSignal.asReadonly();
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Component to display markdown text
+ *
+ * This component is built using concepts from [ngx-remark](https://github.com/ericleib/ngx-remark),
+ * namely using Angular templates to render the AST produced by `remark`.
+ *
+ * Unlike `ngx-remark`, it features a configuration based approach of extensibility so that multiple
+ * instances of the component can be used with the same configuration, e.g. inside a chat component
+ * w/o repeating templates.
+ *
+ * @experimental
+ */
+class SiMarkdownComponent {
+    static idCounter = 1;
+    /**
+     * The markdown text to transform and display
+     * @defaultValue ''
+     */
+    markdown = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markdown" }] : /* istanbul ignore next */ []));
+    /**
+     * Options to control rendering. Can be shared across multiple instances.
+     */
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Citation metadata used to create citations. */
+    citations = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "citations" }] : /* istanbul ignore next */ []));
+    /**
+     * Debug mode. When true, unknown node types will be displayed along with the node
+     * as JSON.
+     * @defaultValue false
+     */
+    debug = input(false, { ...(ngDevMode ? { debugName: "debug" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted by extension components. */
+    extensionEvent = output();
+    baseId = `__si-markdown-${SiMarkdownComponent.idCounter++}`;
+    parsed = throttledSignal(computedAsync({
+        params: () => ({ markdown: this.markdown(), processor: this.config().processor }),
+        computation: params => this.parseMarkdown(params.markdown, params.processor),
+        initial: undefined
+    }), 50);
+    templateQuery = viewChildren(SiMarkdownTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateQuery" }] : /* istanbul ignore next */ []));
+    customTemplateQuery = contentChildren(SiMarkdownTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customTemplateQuery" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    templates = computed(() => {
+        const map = new Map();
+        for (const template of this.templateQuery()) {
+            map.set(template.nodeType(), template.template);
+        }
+        for (const template of this.customTemplateQuery()) {
+            map.set(template.nodeType(), template.template);
+        }
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    /** Gives access to metadata in extension components */
+    meta = computed(() => ({ citations: this.citations() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+    actualOptions = computed(() => this.options() ?? new SiMarkdownOptions(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actualOptions" }] : /* istanbul ignore next */ []));
+    config = computed(() => {
+        const options = this.actualOptions();
+        return {
+            processor: options.makeProcessor(this.meta()),
+            typeHandlers: options.getTypeHandlers(),
+            codeTypeHandlers: options.getCodeTypeHandlers()
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    async parseMarkdown(md, processor) {
+        if (!md) {
+            return undefined;
+        }
+        const parsed = processor.parse(md);
+        return await processor.run(parsed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiMarkdownComponent, isStandalone: true, selector: "si-markdown", inputs: { markdown: { classPropertyName: "markdown", publicName: "markdown", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, citations: { classPropertyName: "citations", publicName: "citations", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { extensionEvent: "extensionEvent" }, providers: [{ provide: SI_MARKDOWN_CONTROL, useExisting: SiMarkdownComponent }], queries: [{ propertyName: "customTemplateQuery", predicate: SiMarkdownTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "templateQuery", predicate: SiMarkdownTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/attributes-order -->\n\n@let ast = parsed();\n@if (ast) {\n  <si-markdown-fragment [siMarkdownFragment]=\"ast\" />\n}\n\n<ng-template siMarkdownTemplate=\"heading\" let-node>\n  <div\n    role=\"heading\"\n    [aria-level]=\"node.depth\"\n    [class]=\"`h${node.depth}`\"\n    [attr.data-line]=\"node?.position?.start.line\"\n    [siMarkdownFragment]=\"node\"\n  ></div>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"paragraph\" let-node>\n  <p [attr.data-line]=\"node?.position?.start.line\" [siMarkdownFragment]=\"node\"></p>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"blockquote\" let-node>\n  <blockquote\n    [attr.data-line]=\"node?.position?.start.line\"\n    [siMarkdownFragment]=\"node\"\n  ></blockquote>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"list\" let-node>\n  @if (node.ordered) {\n    <ol\n      [attr.data-line]=\"node?.position?.start.line\"\n      [siMarkdownFragment]=\"node\"\n      [start]=\"node.start\"\n    ></ol>\n  } @else {\n    <ul [attr.data-line]=\"node?.position?.start.line\" [siMarkdownFragment]=\"node\"></ul>\n  }\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"listItem\" let-node let-parent=\"parent\">\n  @if (node.checked !== null) {\n    <li class=\"task-list-item\" [attr.data-line]=\"node?.position?.start.line\">\n      <label\n        [siMarkdownFragment]=\"\n          !parent.loose && node.children.length === 1 && node.children[0].children\n            ? node.children[0]\n            : node\n        \"\n      >\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          tabindex=\"-1\"\n          aria-disabled=\"true\"\n          [checked]=\"node.checked\"\n        />\n      </label>\n    </li>\n  } @else {\n    <li\n      [attr.data-line]=\"node?.position?.start.line\"\n      [siMarkdownFragment]=\"\n        !parent.loose && node.children.length === 1 && node.children[0].children\n          ? node.children[0]\n          : node\n      \"\n    ></li>\n  }\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"linkReference\" let-node>\n  @let def = ast?.references?.definitions?.get(node.identifier);\n  @if (def) {\n    <a [href]=\"def.url\" [title]=\"def.title ?? ''\">{{ def.label }}</a>\n  }\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"emphasis\" let-node>\n  <em [siMarkdownFragment]=\"node\"></em>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"strong\" let-node>\n  <strong [siMarkdownFragment]=\"node\"></strong>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"delete\" let-node>\n  <del [siMarkdownFragment]=\"node\"></del>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"text\" let-node>\n  <span>{{ node.value }}</span>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"image\" let-node>\n  <img [src]=\"node.url\" [alt]=\"node.alt ?? ''\" [title]=\"node.title ?? ''\" />\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"imageReference\" let-node>\n  @let def = ast?.references?.definitions?.get(node.identifier);\n  @if (def) {\n    <img [src]=\"def.url\" [alt]=\"node.alt ?? ''\" [title]=\"def.title ?? ''\" />\n  }\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"thematicBreak\" let-node>\n  <hr [attr.data-line]=\"node?.position?.start.line\" />\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"break\">\n  <br />\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"footnotes\" let-node>\n  <hr />\n  <ol\n    class=\"footnotes\"\n    [attr.data-line]=\"node?.position?.start.line\"\n    [siMarkdownFragment]=\"node\"\n  ></ol>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"footnoteReference\" let-node>\n  <sup class=\"footnote-ref\">\n    <a [href]=\"`#${baseId}:fn:${node.identifier}`\">{{ node.label }}</a>\n  </sup>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"footnoteDefinition\" let-node>\n  <li\n    class=\"footnote-def\"\n    [attr.data-line]=\"node?.position?.start.line\"\n    [id]=\"`${baseId}:fn:${node.identifier}`\"\n    [siMarkdownFragment]=\"node\"\n  ></li>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"inlineCode\" let-node>\n  <code [class]=\"`language-${node.lang || 'plain'}`\">{{ node.value }}</code>\n</ng-template>\n\n@let conf = config();\n@let codeTypes = conf.codeTypeHandlers;\n@for (handler of conf.typeHandlers; track handler.type) {\n  <ng-template [siMarkdownTemplate]=\"handler.type\" let-node let-parent=\"parent\">\n    @if (handler.type === 'code' && codeTypes.has(node.lang)) {\n      @let specialHandler = codeTypes.get(node.lang)!;\n      <ng-container\n        [ngComponentOutlet]=\"specialHandler.component\"\n        [ngComponentOutletInputs]=\"{ node, parent, options: specialHandler.options }\"\n      />\n    } @else {\n      <ng-container\n        [ngComponentOutlet]=\"handler.component\"\n        [ngComponentOutletInputs]=\"{ node, parent, options: handler.options }\"\n      />\n    }\n  </ng-template>\n}\n\n<ng-template siMarkdownTemplate=\"__default-template\" let-node>\n  @if (debug()) {\n    <div class=\"markdown-unkown-node-type text-danger\">\n      Node type not implemented: <b>{{ node.type }}</b>\n      <pre class=\"mt-1\">{{ node | json }}</pre>\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:block;max-inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: SiMarkdownTemplateDirective, selector: "[siMarkdownTemplate]", inputs: ["siMarkdownTemplate"] }, { kind: "component", type: SiMarkdownFragmentComponent, selector: "si-markdown-fragment, [siMarkdownFragment]", inputs: ["siMarkdownFragment"] }, { kind: "pipe", type: JsonPipe, name: "json" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-markdown', imports: [NgComponentOutlet, SiMarkdownTemplateDirective, SiMarkdownFragmentComponent, JsonPipe], providers: [{ provide: SI_MARKDOWN_CONTROL, useExisting: SiMarkdownComponent }], template: "<!-- eslint-disable @angular-eslint/template/attributes-order -->\n\n@let ast = parsed();\n@if (ast) {\n  <si-markdown-fragment [siMarkdownFragment]=\"ast\" />\n}\n\n<ng-template siMarkdownTemplate=\"heading\" let-node>\n  <div\n    role=\"heading\"\n    [aria-level]=\"node.depth\"\n    [class]=\"`h${node.depth}`\"\n    [attr.data-line]=\"node?.position?.start.line\"\n    [siMarkdownFragment]=\"node\"\n  ></div>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"paragraph\" let-node>\n  <p [attr.data-line]=\"node?.position?.start.line\" [siMarkdownFragment]=\"node\"></p>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"blockquote\" let-node>\n  <blockquote\n    [attr.data-line]=\"node?.position?.start.line\"\n    [siMarkdownFragment]=\"node\"\n  ></blockquote>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"list\" let-node>\n  @if (node.ordered) {\n    <ol\n      [attr.data-line]=\"node?.position?.start.line\"\n      [siMarkdownFragment]=\"node\"\n      [start]=\"node.start\"\n    ></ol>\n  } @else {\n    <ul [attr.data-line]=\"node?.position?.start.line\" [siMarkdownFragment]=\"node\"></ul>\n  }\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"listItem\" let-node let-parent=\"parent\">\n  @if (node.checked !== null) {\n    <li class=\"task-list-item\" [attr.data-line]=\"node?.position?.start.line\">\n      <label\n        [siMarkdownFragment]=\"\n          !parent.loose && node.children.length === 1 && node.children[0].children\n            ? node.children[0]\n            : node\n        \"\n      >\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          tabindex=\"-1\"\n          aria-disabled=\"true\"\n          [checked]=\"node.checked\"\n        />\n      </label>\n    </li>\n  } @else {\n    <li\n      [attr.data-line]=\"node?.position?.start.line\"\n      [siMarkdownFragment]=\"\n        !parent.loose && node.children.length === 1 && node.children[0].children\n          ? node.children[0]\n          : node\n      \"\n    ></li>\n  }\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"linkReference\" let-node>\n  @let def = ast?.references?.definitions?.get(node.identifier);\n  @if (def) {\n    <a [href]=\"def.url\" [title]=\"def.title ?? ''\">{{ def.label }}</a>\n  }\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"emphasis\" let-node>\n  <em [siMarkdownFragment]=\"node\"></em>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"strong\" let-node>\n  <strong [siMarkdownFragment]=\"node\"></strong>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"delete\" let-node>\n  <del [siMarkdownFragment]=\"node\"></del>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"text\" let-node>\n  <span>{{ node.value }}</span>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"image\" let-node>\n  <img [src]=\"node.url\" [alt]=\"node.alt ?? ''\" [title]=\"node.title ?? ''\" />\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"imageReference\" let-node>\n  @let def = ast?.references?.definitions?.get(node.identifier);\n  @if (def) {\n    <img [src]=\"def.url\" [alt]=\"node.alt ?? ''\" [title]=\"def.title ?? ''\" />\n  }\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"thematicBreak\" let-node>\n  <hr [attr.data-line]=\"node?.position?.start.line\" />\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"break\">\n  <br />\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"footnotes\" let-node>\n  <hr />\n  <ol\n    class=\"footnotes\"\n    [attr.data-line]=\"node?.position?.start.line\"\n    [siMarkdownFragment]=\"node\"\n  ></ol>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"footnoteReference\" let-node>\n  <sup class=\"footnote-ref\">\n    <a [href]=\"`#${baseId}:fn:${node.identifier}`\">{{ node.label }}</a>\n  </sup>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"footnoteDefinition\" let-node>\n  <li\n    class=\"footnote-def\"\n    [attr.data-line]=\"node?.position?.start.line\"\n    [id]=\"`${baseId}:fn:${node.identifier}`\"\n    [siMarkdownFragment]=\"node\"\n  ></li>\n</ng-template>\n\n<ng-template siMarkdownTemplate=\"inlineCode\" let-node>\n  <code [class]=\"`language-${node.lang || 'plain'}`\">{{ node.value }}</code>\n</ng-template>\n\n@let conf = config();\n@let codeTypes = conf.codeTypeHandlers;\n@for (handler of conf.typeHandlers; track handler.type) {\n  <ng-template [siMarkdownTemplate]=\"handler.type\" let-node let-parent=\"parent\">\n    @if (handler.type === 'code' && codeTypes.has(node.lang)) {\n      @let specialHandler = codeTypes.get(node.lang)!;\n      <ng-container\n        [ngComponentOutlet]=\"specialHandler.component\"\n        [ngComponentOutletInputs]=\"{ node, parent, options: specialHandler.options }\"\n      />\n    } @else {\n      <ng-container\n        [ngComponentOutlet]=\"handler.component\"\n        [ngComponentOutletInputs]=\"{ node, parent, options: handler.options }\"\n      />\n    }\n  </ng-template>\n}\n\n<ng-template siMarkdownTemplate=\"__default-template\" let-node>\n  @if (debug()) {\n    <div class=\"markdown-unkown-node-type text-danger\">\n      Node type not implemented: <b>{{ node.type }}</b>\n      <pre class=\"mt-1\">{{ node | json }}</pre>\n    </div>\n  }\n</ng-template>\n", styles: [":host{display:block;max-inline-size:100%;min-inline-size:0}\n"] }]
+        }], propDecorators: { markdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "markdown", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], citations: [{ type: i0.Input, args: [{ isSignal: true, alias: "citations", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], extensionEvent: [{ type: i0.Output, args: ["extensionEvent"] }], templateQuery: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiMarkdownTemplateDirective), { isSignal: true }] }], customTemplateQuery: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiMarkdownTemplateDirective), { isSignal: true }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SI_MARKDOWN_CONTROL, SiMarkdownCalloutComponent, SiMarkdownComponent, SiMarkdownFragmentComponent, SiMarkdownInlineHtmlComponent, SiMarkdownOptions, SiMarkdownTemplateDirective, computedAsync, makeSiMarkdownOptions, siMarkdownDirective, throttledSignal };
+//# sourceMappingURL=siemens-element-ng-markdown.mjs.map