@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-markdown.mjs

@@ -0,0 +1,914 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, TemplateRef, Directive, booleanAttribute, numberAttribute, output, contentChildren, viewChild, computed, signal, effect, untracked, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, ViewContainerRef } from '@angular/core';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { initialLoadingVisibility, nextLoadingVisibility } from '@slotted/core/loading';
+import { prepareMarkdown } from '@slotted/core/markdown';
+import { injectMessages } from '@slotted/angular/i18n';
+import { markdownMessages } from '@slotted/core/i18n';
+import { SlAlert, SlAlertContent, SlAlertDescription, SlAlertTitle } from '@slotted/angular/alert';
+import { SlButton } from '@slotted/angular/button';
+import { SlCheckbox } from '@slotted/angular/checkbox';
+import { SlCodeBlock } from '@slotted/angular/code-block';
+import { SlInlineMessage } from '@slotted/angular/inline-message';
+import { SlLink } from '@slotted/angular/link';
+import { injectProseDefaults, SlProse, SlProseAnchor, SlProseFootnotes, SlProseScroll } from '@slotted/angular/prose';
+import { injectSkeletonDefaults, SlSkeletonRegion, SlSkeletonText } from '@slotted/angular/skeleton';
+import { SlVisuallyHidden } from '@slotted/angular/visually-hidden';
+
+const MARKDOWN_DEFAULTS = new InjectionToken('slotted markdown defaults', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+/**
+ * An application decides once how its documents treat links, alerts, anchors
+ * and URLs. A document that states any of them itself still wins. Its words
+ * come from the language in force (`provideSlotted`).
+ */
+function provideMarkdownDefaults(defaults) {
+    return { provide: MARKDOWN_DEFAULTS, useValue: defaults };
+}
+function injectMarkdownDefaults() {
+    return inject(MARKDOWN_DEFAULTS);
+}
+
+/**
+ * Replaces the family's element for one kind — `link`, `code`, `image` — or
+ * renders a node type the family does not know — `math`, `html`, a directive
+ * — by the node's own `type`. The template receives the prepared element; its
+ * children are rendered with `slMarkdownChildren`.
+ */
+class SlMarkdownNode {
+    kind = input.required({ ...(ngDevMode ? { debugName: "kind" } : /* istanbul ignore next */ {}), alias: 'slMarkdownNode' });
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_directive, context) {
+        return context !== null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMarkdownNode, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlMarkdownNode, isStandalone: true, selector: "ng-template[slMarkdownNode]", inputs: { kind: { classPropertyName: "kind", publicName: "slMarkdownNode", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMarkdownNode, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slMarkdownNode]', standalone: true }]
+        }], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "slMarkdownNode", required: true }] }] } });
+/** The empty part's content, projected in place of `messages.empty`. */
+class SlMarkdownEmpty {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMarkdownEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlMarkdownEmpty, isStandalone: true, selector: "[slMarkdownEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMarkdownEmpty, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slMarkdownEmpty]', standalone: true }]
+        }] });
+const KINDS = new Set([
+    'heading',
+    'paragraph',
+    'blockquote',
+    'alert',
+    'list',
+    'item',
+    'code',
+    'thematicBreak',
+    'table',
+    'text',
+    'emphasis',
+    'strong',
+    'delete',
+    'inlineCode',
+    'break',
+    'link',
+    'image',
+    'footnoteReference',
+]);
+/**
+ * A document rendered from a tree, in `prose`'s typography.
+ *
+ * The family never receives HTML. It takes mdast — remark's output as it is,
+ * or marked's through `fromMarkedTokens` — and `prepareMarkdown` from
+ * `@slotted/core/markdown` decides everything that is not an element. This
+ * component maps each prepared kind to an element, or to the family that
+ * already owns it: `slLink`, `slCodeBlock`, `slAlert`, `slCheckbox`.
+ *
+ * The document is one recursive `ng-template` rendered through
+ * `NgTemplateOutlet`, never a recursive component: a component host between
+ * a `ul` and its `li`, or between the region and its first block, would break
+ * `prose`'s child combinators.
+ */
+class SlMarkdown {
+    /** The document, as mdast — remark's `fromMarkdown`, or `fromMarkedTokens(marked.lexer(source))`. */
+    tree = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    flow = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flow" }] : /* istanbul ignore next */ []));
+    status = input('ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    streaming = input(false, { ...(ngDevMode ? { debugName: "streaming" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    external = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "external" }] : /* istanbul ignore next */ []));
+    headingAnchors = input(undefined, { ...(ngDevMode ? { debugName: "headingAnchors" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    headingOffset = input(0, { ...(ngDevMode ? { debugName: "headingOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    idPrefix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "idPrefix" }] : /* istanbul ignore next */ []));
+    alerts = input(undefined, { ...(ngDevMode ? { debugName: "alerts" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    allow = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allow" }] : /* istanbul ignore next */ []));
+    unwrapDisallowed = input(false, { ...(ngDevMode ? { debugName: "unwrapDisallowed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    transformUrl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transformUrl" }] : /* istanbul ignore next */ []));
+    isExternal = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExternal" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * empty, error, retry and loading texts, the footnotes heading, the back
+     * link, the heading permalink, and each alert's title (`alerts.note`).
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables the task checkboxes. React reads the presence of its handler; an
+     * Angular output cannot tell whether anyone listens, so the template says so.
+     */
+    editableTasks = input(false, { ...(ngDevMode ? { debugName: "editableTasks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Draws the retry button in the error part, for the same reason. */
+    retryable = input(false, { ...(ngDevMode ? { debugName: "retryable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A task the reader ticked, with its index; the box moves when the tree does. */
+    taskChange = output();
+    retry = output();
+    templates = contentChildren(SlMarkdownNode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    nodesTemplate = viewChild.required('nodes', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodesTemplate" }] : /* istanbul ignore next */ []));
+    defaults = injectMarkdownDefaults();
+    proseDefaults = injectProseDefaults();
+    skeletonDefaults = injectSkeletonDefaults();
+    resolvedFlow = computed(() => this.flow() ?? this.proseDefaults.flow, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFlow" }] : /* istanbul ignore next */ []));
+    resolvedExternal = computed(() => this.external() ?? this.defaults.external ?? 'new-tab', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedExternal" }] : /* istanbul ignore next */ []));
+    resolvedHeadingAnchors = computed(() => this.headingAnchors() ?? this.defaults.headingAnchors ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHeadingAnchors" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this document's `messages` laid over them. */
+    t = injectMessages(markdownMessages, this.messages);
+    templateMap = computed(() => {
+        const map = new Map();
+        for (const node of this.templates())
+            map.set(node.kind(), node.template);
+        return map;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateMap" }] : /* istanbul ignore next */ []));
+    /** The prepared document: headings, footnotes and the outline a table of contents reads. */
+    document = computed(() => prepareMarkdown(this.tree(), {
+        alerts: this.alerts() ?? this.defaults.alerts ?? true,
+        allow: this.allow() ?? this.defaults.allow,
+        custom: [...this.templateMap().keys()].filter((kind) => !KINDS.has(kind)),
+        headingOffset: this.headingOffset(),
+        idPrefix: this.idPrefix(),
+        isExternal: this.isExternal() ?? this.defaults.isExternal,
+        transformUrl: this.transformUrl() ?? this.defaults.transformUrl,
+        unwrapDisallowed: this.unwrapDisallowed(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "document" }] : /* istanbul ignore next */ []));
+    /*
+     * The placeholder and the document are two different trees, so the family
+     * decides which one is on screen with the machine `skeleton` uses, reading
+     * `skeleton`'s own defaults for how long to wait and how long to hold.
+     */
+    painted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "painted" }] : /* istanbul ignore next */ []));
+    visibility = initialLoadingVisibility;
+    timer;
+    constructor() {
+        effect(() => {
+            const loading = this.loading();
+            untracked(() => this.tick(loading));
+        });
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+    }
+    /** @internal The template a node's children render through, for `slMarkdownChildren`. */
+    childrenTemplate() {
+        return this.nodesTemplate();
+    }
+    alertTitle(element) {
+        return this.t(`alerts.${element.type}`);
+    }
+    templateFor(element) {
+        return this.templateMap().get(element.kind === 'custom' ? element.type : element.kind);
+    }
+    footnoteLead(footnote) {
+        return footnote.children.at(-1)?.kind === 'paragraph'
+            ? footnote.children.slice(0, -1)
+            : footnote.children;
+    }
+    footnoteTail(footnote) {
+        const last = footnote.children.at(-1);
+        return last?.kind === 'paragraph' ? last : null;
+    }
+    onTask(element, request) {
+        this.taskChange.emit({
+            checked: request.value,
+            index: element.task ?? 0,
+            offset: element.offset,
+            request,
+        });
+    }
+    tick(loading) {
+        const answer = nextLoadingVisibility({
+            delay: this.skeletonDefaults.delay ?? 0,
+            loading,
+            minDuration: this.skeletonDefaults.minDuration ?? 0,
+            now: Date.now(),
+            state: this.visibility,
+        });
+        this.visibility = answer.state;
+        this.painted.set(answer.state.visible);
+        clearTimeout(this.timer);
+        if (answer.wait !== null) {
+            this.timer = setTimeout(() => this.tick(this.loading()), answer.wait);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMarkdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlMarkdown, isStandalone: true, selector: "[slMarkdown]", inputs: { tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, flow: { classPropertyName: "flow", publicName: "flow", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, streaming: { classPropertyName: "streaming", publicName: "streaming", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, headingAnchors: { classPropertyName: "headingAnchors", publicName: "headingAnchors", isSignal: true, isRequired: false, transformFunction: null }, headingOffset: { classPropertyName: "headingOffset", publicName: "headingOffset", isSignal: true, isRequired: false, transformFunction: null }, idPrefix: { classPropertyName: "idPrefix", publicName: "idPrefix", isSignal: true, isRequired: false, transformFunction: null }, alerts: { classPropertyName: "alerts", publicName: "alerts", isSignal: true, isRequired: false, transformFunction: null }, allow: { classPropertyName: "allow", publicName: "allow", isSignal: true, isRequired: false, transformFunction: null }, unwrapDisallowed: { classPropertyName: "unwrapDisallowed", publicName: "unwrapDisallowed", isSignal: true, isRequired: false, transformFunction: null }, transformUrl: { classPropertyName: "transformUrl", publicName: "transformUrl", isSignal: true, isRequired: false, transformFunction: null }, isExternal: { classPropertyName: "isExternal", publicName: "isExternal", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, editableTasks: { classPropertyName: "editableTasks", publicName: "editableTasks", isSignal: true, isRequired: false, transformFunction: null }, retryable: { classPropertyName: "retryable", publicName: "retryable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { taskChange: "taskChange", retry: "retry" }, host: { attributes: { "data-ui": "markdown", "data-part": "root" }, properties: { "attr.data-status": "status()", "attr.data-flow": "resolvedFlow()", "attr.data-loading": "painted() ? '' : null", "attr.data-empty": "status() === 'ready' && !painted() && document().empty ? '' : null", "attr.data-streaming": "streaming() ? '' : null", "attr.aria-busy": "streaming() || painted() ? 'true' : null" } }, queries: [{ propertyName: "templates", predicate: SlMarkdownNode, isSignal: true }], viewQueries: [{ propertyName: "nodesTemplate", first: true, predicate: ["nodes"], descendants: true, isSignal: true }], exportAs: ["slMarkdown"], ngImport: i0, template: `
+    @if (status() === 'error') {
+      <div data-part="error">
+        <p slInlineMessage tone="danger">{{ t('error') }}</p>
+        @if (retryable()) {
+          <button
+            slButton
+            type="button"
+            size="sm"
+            tone="secondary"
+            variant="outline"
+            (click)="retry.emit($event.detail === 0 ? 'keyboard' : 'pointer')"
+          >
+            {{ t('retry') }}
+          </button>
+        }
+      </div>
+    } @else if (painted()) {
+      <div slSkeletonRegion [delay]="0" [minDuration]="0" [messages]="{ label: t('loading') }">
+        <div slProse [flow]="resolvedFlow()" [size]="size()">
+          <div slSkeletonText lastLineSize="62%" [lines]="3"></div>
+        </div>
+      </div>
+    } @else if (document().empty) {
+      @if (!loading()) {
+        <p data-part="empty">
+          <ng-content select="[slMarkdownEmpty]">{{ t('empty') }}</ng-content>
+        </p>
+      }
+    } @else {
+      <div slProse [flow]="resolvedFlow()" [size]="size()">
+        <ng-container *ngTemplateOutlet="nodes; context: { $implicit: document().children }" />
+        @if (document().footnotes.length > 0) {
+          <section slProseFootnotes>
+            <h2 slVisuallyHidden [id]="document().footnoteLabelId">
+              {{ t('footnotes') }}
+            </h2>
+            <ol>
+              @for (footnote of document().footnotes; track footnote.key) {
+                <li [id]="footnote.id">
+                  <ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: footnoteLead(footnote) }"
+                  />
+                  @if (footnoteTail(footnote); as last) {
+                    <p>
+                      <ng-container
+                        *ngTemplateOutlet="nodes; context: { $implicit: last.children }"
+                      /><ng-container
+                        *ngTemplateOutlet="backrefs; context: { $implicit: footnote }"
+                      />
+                    </p>
+                  } @else {
+                    <ng-container *ngTemplateOutlet="backrefs; context: { $implicit: footnote }" />
+                  }
+                </li>
+              }
+            </ol>
+          </section>
+        }
+      </div>
+    }
+
+    <ng-template #backrefs let-footnote>
+      @for (reference of footnote.references; track reference; let index = $index) {
+        <a
+          data-part="backref"
+          [href]="'#' + reference"
+          [attr.aria-label]="t('backReference', { number: footnote.number, occurrence: index + 1 })"
+          ><span slIcon><svg slGlyph name="arrow-left"></svg></span
+        ></a>
+      }
+    </ng-template>
+
+    <ng-template #nodes let-elements>
+      @for (element of elements; track element.key) {
+        @if (templateFor(element); as custom) {
+          <ng-container *ngTemplateOutlet="custom; context: { $implicit: element }" />
+        } @else {
+          @switch (element.kind) {
+            @case ('text') {
+              <ng-container>{{ element.value }}</ng-container>
+            }
+            @case ('inlineCode') {
+              <code>{{ element.value }}</code>
+            }
+            @case ('break') {
+              <br />
+            }
+            @case ('thematicBreak') {
+              <hr />
+            }
+            @case ('paragraph') {
+              <p>
+                <ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }" />
+              </p>
+            }
+            @case ('emphasis') {
+              <em
+                ><ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+              /></em>
+            }
+            @case ('strong') {
+              <strong
+                ><ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+              /></strong>
+            }
+            @case ('delete') {
+              <del
+                ><ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+              /></del>
+            }
+            @case ('blockquote') {
+              <blockquote>
+                <ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }" />
+              </blockquote>
+            }
+            @case ('heading') {
+              @switch (element.level) {
+                @case (1) {
+                  <h1 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h1>
+                }
+                @case (2) {
+                  <h2 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h2>
+                }
+                @case (3) {
+                  <h3 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h3>
+                }
+                @case (4) {
+                  <h4 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h4>
+                }
+                @case (5) {
+                  <h5 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h5>
+                }
+                @default {
+                  <h6 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h6>
+                }
+              }
+            }
+            @case ('alert') {
+              <div data-part="embed">
+                <section slAlert reach="section" live="off" [tone]="element.tone">
+                  <div slAlertContent>
+                    <div slAlertTitle>{{ alertTitle(element) }}</div>
+                    <div slAlertDescription>
+                      <div data-part="alert-body">
+                        <ng-container
+                          *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </div>
+            }
+            @case ('list') {
+              @if (element.ordered) {
+                <ol
+                  [attr.data-part]="element.task ? 'task-list' : null"
+                  [attr.start]="element.start"
+                >
+                  <ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                  />
+                </ol>
+              } @else {
+                <ul [attr.data-part]="element.task ? 'task-list' : null">
+                  <ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                  />
+                </ul>
+              }
+            }
+            @case ('item') {
+              @if (element.checked === null) {
+                <li>
+                  <ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                  />
+                </li>
+              } @else {
+                <li data-part="task">
+                  <div
+                    slCheckbox
+                    [checked]="element.checked"
+                    [readOnly]="!editableTasks() || undefined"
+                    (checkedChange)="onTask(element, $event)"
+                  >
+                    <span slVisuallyHidden>{{ element.label }}</span>
+                  </div>
+                  <div data-part="task-body">
+                    <ng-container
+                      *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                    />
+                  </div>
+                </li>
+              }
+            }
+            @case ('code') {
+              <div data-part="embed">
+                <div
+                  slCodeBlock
+                  [code]="element.code"
+                  [language]="element.language ?? 'text'"
+                  [title]="element.title ?? undefined"
+                  [lineNumbers]="element.lineNumbers || undefined"
+                  [marks]="
+                    element.highlight === null ? undefined : { highlight: element.highlight }
+                  "
+                ></div>
+              </div>
+            }
+            @case ('table') {
+              <div slProseScroll>
+                <table>
+                  <thead>
+                    <tr>
+                      @for (cell of element.head; track cell.key) {
+                        <th scope="col" [attr.data-align]="cell.align">
+                          <ng-container
+                            *ngTemplateOutlet="nodes; context: { $implicit: cell.children }"
+                          />
+                        </th>
+                      }
+                    </tr>
+                  </thead>
+                  @if (element.rows.length > 0) {
+                    <tbody>
+                      @for (row of element.rows; track $index) {
+                        <tr>
+                          @for (cell of row; track cell.key) {
+                            <td [attr.data-align]="cell.align">
+                              <ng-container
+                                *ngTemplateOutlet="nodes; context: { $implicit: cell.children }"
+                              />
+                            </td>
+                          }
+                        </tr>
+                      }
+                    </tbody>
+                  }
+                </table>
+              </div>
+            }
+            @case ('link') {
+              @if (element.external && resolvedExternal() === 'new-tab') {
+                <a slLink external [href]="element.href" [attr.title]="element.title"
+                  ><ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                /></a>
+              } @else {
+                <a [href]="element.href" [attr.title]="element.title"
+                  ><ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                /></a>
+              }
+            }
+            @case ('image') {
+              <img
+                [src]="element.src"
+                [alt]="element.alt"
+                [attr.title]="element.title"
+                loading="lazy"
+                decoding="async"
+              />
+            }
+            @case ('footnoteReference') {
+              <sup
+                ><a
+                  data-footnote-ref=""
+                  [id]="element.id"
+                  [href]="'#' + element.target"
+                  [attr.aria-describedby]="document().footnoteLabelId"
+                  >{{ element.number }}</a
+                ></sup
+              >
+            }
+            @case ('custom') {
+              <ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }" />
+            }
+          }
+        }
+      }
+    </ng-template>
+
+    <ng-template #heading let-element>
+      <ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }" />
+      @if (resolvedHeadingAnchors()) {
+        <a
+          slProseAnchor
+          [href]="'#' + element.id"
+          [attr.aria-label]="t('anchor', { heading: element.text })"
+          >#</a
+        >
+      }
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=markdown][data-part=root]{display:block;min-inline-size:0}[data-ui=markdown] [data-part=task]{display:grid;grid-template-columns:calc(var(--slotted-prose-list-inset, 1.5em) + var(--slotted-prose-marker-gap, .25em)) minmax(0,1fr);list-style:none;margin-inline-start:calc(-1 * var(--slotted-prose-list-inset, 1.5em));padding-inline-start:0}[data-ui=markdown] [data-part=task]>:first-child{justify-self:end;margin-block-start:calc((1lh - var(--slotted-control-font-size-md, 13px) * var(--slotted-line-height-md, 1.5)) / 2);margin-inline-end:var(--slotted-markdown-task-gap, var(--slotted-space-3))}[data-ui=markdown] [data-part=task-body]{min-inline-size:0}[data-ui=markdown] [data-part=embed]{margin-block:var(--slotted-prose-flow-normal, 1.15em) 0}[data-ui=markdown][data-flow=tight] [data-part=embed]{margin-block-start:var(--slotted-prose-flow-tight, .75em)}[data-ui=markdown][data-flow=loose] [data-part=embed]{margin-block-start:var(--slotted-prose-flow-loose, 1.6em)}[data-ui=markdown] [data-part=embed]:first-child,[data-ui=markdown] [data-part=alert-body]>:first-child{margin-block-start:0}[data-ui=markdown] :where(th,td)[data-align=start]{text-align:start}[data-ui=markdown] :where(th,td)[data-align=center]{text-align:center}[data-ui=markdown] :where(th,td)[data-align=end]{text-align:end}[data-ui=markdown] [data-part=backref]{--_glyph: var(--slotted-markdown-backref-size, .9em);--_box: var(--slotted-target-min, 24px);--slotted-icon-size: var(--_glyph);block-size:var(--_box);display:inline-block;inline-size:var(--_box);margin-inline-start:var(--slotted-space-1);position:relative;vertical-align:calc(.5cap - .5 * var(--_box))}[data-ui=markdown] [data-part=backref]>[data-ui=icon]{inset:0;margin:auto;position:absolute;rotate:90deg}[data-ui=markdown] [data-part=empty]{color:var(--slotted-text-muted);font-family:var(--slotted-font-family-sans);font-size:var(--slotted-font-size-md);line-height:var(--slotted-line-height-md);margin:0}[data-ui=markdown] [data-part=error]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-space-3) var(--slotted-space-4)}@media print{[data-ui=markdown] a[href^=http]:after{content:\" (\" attr(href) \")\";font-size:.875em;overflow-wrap:anywhere}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlAlert, selector: "[slAlert]", inputs: ["tone", "variant", "reach", "live", "hideIcon", "dismissible", "messages", "open", "defaultOpen", "restoreFocus"], outputs: ["openChange"], exportAs: ["slAlert"] }, { kind: "directive", type: SlAlertContent, selector: "[slAlertContent]", exportAs: ["slAlertContent"] }, { kind: "directive", type: SlAlertDescription, selector: "[slAlertDescription]", exportAs: ["slAlertDescription"] }, { kind: "component", type: SlAlertTitle, selector: "[slAlertTitle]", exportAs: ["slAlertTitle"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlCheckbox, selector: "[slCheckbox]", inputs: ["checked", "defaultChecked", "indeterminate", "parent", "value", "name", "size", "labelPlacement", "variant", "disabled", "readOnly", "invalid"], outputs: ["checkedChange"], exportAs: ["slCheckbox"] }, { kind: "component", type: SlCodeBlock, selector: "[slCodeBlock]", inputs: ["code", "language", "highlight", "tokens", "title", "fileName", "lineNumbers", "start", "marks", "wrap", "defaultWrap", "collapseAfter", "revealed", "defaultRevealed", "maxLines", "copy", "copyRemoved", "loading", "messages", "tabSize"], outputs: ["wrapChange", "revealedChange", "wrapChangeRequest", "revealedChangeRequest", "copyRequest", "highlightError"], exportAs: ["slCodeBlock"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlInlineMessage, selector: "[slInlineMessage]", inputs: ["tone", "size", "live", "mark", "prefix", "hideIcon", "loading", "disabled", "reserve", "id"], exportAs: ["slInlineMessage"] }, { kind: "component", type: SlLink, selector: "a[slLink]", inputs: ["disabled", "external", "messages", "underline", "variant", "visited"], exportAs: ["slLink"] }, { kind: "component", type: SlProse, selector: "[slProse]", inputs: ["size", "flow"], exportAs: ["slProse"] }, { kind: "directive", type: SlProseAnchor, selector: "[slProseAnchor]", exportAs: ["slProseAnchor"] }, { kind: "directive", type: SlProseFootnotes, selector: "[slProseFootnotes]", exportAs: ["slProseFootnotes"] }, { kind: "directive", type: SlProseScroll, selector: "[slProseScroll]", inputs: ["messages", "labelledBy"], exportAs: ["slProseScroll"] }, { kind: "component", type: SlSkeletonRegion, selector: "[slSkeletonRegion]", inputs: ["loading", "animation", "live", "messages", "loadedLabel", "delay", "minDuration"], outputs: ["reveal"], exportAs: ["slSkeletonRegion"] }, { kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }, { kind: "component", type: SlVisuallyHidden, selector: "[slVisuallyHidden]", inputs: ["focusable"], exportAs: ["slVisuallyHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMarkdown, decorators: [{
+            type: Component,
+            args: [{ selector: '[slMarkdown]', standalone: true, exportAs: 'slMarkdown', imports: [
+                        NgTemplateOutlet,
+                        SlAlert,
+                        SlAlertContent,
+                        SlAlertDescription,
+                        SlAlertTitle,
+                        SlButton,
+                        SlCheckbox,
+                        SlCodeBlock,
+                        SlGlyph,
+                        SlIcon,
+                        SlInlineMessage,
+                        SlLink,
+                        SlProse,
+                        SlProseAnchor,
+                        SlProseFootnotes,
+                        SlProseScroll,
+                        SlSkeletonRegion,
+                        SlSkeletonText,
+                        SlVisuallyHidden,
+                    ], template: `
+    @if (status() === 'error') {
+      <div data-part="error">
+        <p slInlineMessage tone="danger">{{ t('error') }}</p>
+        @if (retryable()) {
+          <button
+            slButton
+            type="button"
+            size="sm"
+            tone="secondary"
+            variant="outline"
+            (click)="retry.emit($event.detail === 0 ? 'keyboard' : 'pointer')"
+          >
+            {{ t('retry') }}
+          </button>
+        }
+      </div>
+    } @else if (painted()) {
+      <div slSkeletonRegion [delay]="0" [minDuration]="0" [messages]="{ label: t('loading') }">
+        <div slProse [flow]="resolvedFlow()" [size]="size()">
+          <div slSkeletonText lastLineSize="62%" [lines]="3"></div>
+        </div>
+      </div>
+    } @else if (document().empty) {
+      @if (!loading()) {
+        <p data-part="empty">
+          <ng-content select="[slMarkdownEmpty]">{{ t('empty') }}</ng-content>
+        </p>
+      }
+    } @else {
+      <div slProse [flow]="resolvedFlow()" [size]="size()">
+        <ng-container *ngTemplateOutlet="nodes; context: { $implicit: document().children }" />
+        @if (document().footnotes.length > 0) {
+          <section slProseFootnotes>
+            <h2 slVisuallyHidden [id]="document().footnoteLabelId">
+              {{ t('footnotes') }}
+            </h2>
+            <ol>
+              @for (footnote of document().footnotes; track footnote.key) {
+                <li [id]="footnote.id">
+                  <ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: footnoteLead(footnote) }"
+                  />
+                  @if (footnoteTail(footnote); as last) {
+                    <p>
+                      <ng-container
+                        *ngTemplateOutlet="nodes; context: { $implicit: last.children }"
+                      /><ng-container
+                        *ngTemplateOutlet="backrefs; context: { $implicit: footnote }"
+                      />
+                    </p>
+                  } @else {
+                    <ng-container *ngTemplateOutlet="backrefs; context: { $implicit: footnote }" />
+                  }
+                </li>
+              }
+            </ol>
+          </section>
+        }
+      </div>
+    }
+
+    <ng-template #backrefs let-footnote>
+      @for (reference of footnote.references; track reference; let index = $index) {
+        <a
+          data-part="backref"
+          [href]="'#' + reference"
+          [attr.aria-label]="t('backReference', { number: footnote.number, occurrence: index + 1 })"
+          ><span slIcon><svg slGlyph name="arrow-left"></svg></span
+        ></a>
+      }
+    </ng-template>
+
+    <ng-template #nodes let-elements>
+      @for (element of elements; track element.key) {
+        @if (templateFor(element); as custom) {
+          <ng-container *ngTemplateOutlet="custom; context: { $implicit: element }" />
+        } @else {
+          @switch (element.kind) {
+            @case ('text') {
+              <ng-container>{{ element.value }}</ng-container>
+            }
+            @case ('inlineCode') {
+              <code>{{ element.value }}</code>
+            }
+            @case ('break') {
+              <br />
+            }
+            @case ('thematicBreak') {
+              <hr />
+            }
+            @case ('paragraph') {
+              <p>
+                <ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }" />
+              </p>
+            }
+            @case ('emphasis') {
+              <em
+                ><ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+              /></em>
+            }
+            @case ('strong') {
+              <strong
+                ><ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+              /></strong>
+            }
+            @case ('delete') {
+              <del
+                ><ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+              /></del>
+            }
+            @case ('blockquote') {
+              <blockquote>
+                <ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }" />
+              </blockquote>
+            }
+            @case ('heading') {
+              @switch (element.level) {
+                @case (1) {
+                  <h1 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h1>
+                }
+                @case (2) {
+                  <h2 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h2>
+                }
+                @case (3) {
+                  <h3 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h3>
+                }
+                @case (4) {
+                  <h4 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h4>
+                }
+                @case (5) {
+                  <h5 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h5>
+                }
+                @default {
+                  <h6 [id]="element.id">
+                    <ng-container *ngTemplateOutlet="heading; context: { $implicit: element }" />
+                  </h6>
+                }
+              }
+            }
+            @case ('alert') {
+              <div data-part="embed">
+                <section slAlert reach="section" live="off" [tone]="element.tone">
+                  <div slAlertContent>
+                    <div slAlertTitle>{{ alertTitle(element) }}</div>
+                    <div slAlertDescription>
+                      <div data-part="alert-body">
+                        <ng-container
+                          *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              </div>
+            }
+            @case ('list') {
+              @if (element.ordered) {
+                <ol
+                  [attr.data-part]="element.task ? 'task-list' : null"
+                  [attr.start]="element.start"
+                >
+                  <ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                  />
+                </ol>
+              } @else {
+                <ul [attr.data-part]="element.task ? 'task-list' : null">
+                  <ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                  />
+                </ul>
+              }
+            }
+            @case ('item') {
+              @if (element.checked === null) {
+                <li>
+                  <ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                  />
+                </li>
+              } @else {
+                <li data-part="task">
+                  <div
+                    slCheckbox
+                    [checked]="element.checked"
+                    [readOnly]="!editableTasks() || undefined"
+                    (checkedChange)="onTask(element, $event)"
+                  >
+                    <span slVisuallyHidden>{{ element.label }}</span>
+                  </div>
+                  <div data-part="task-body">
+                    <ng-container
+                      *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                    />
+                  </div>
+                </li>
+              }
+            }
+            @case ('code') {
+              <div data-part="embed">
+                <div
+                  slCodeBlock
+                  [code]="element.code"
+                  [language]="element.language ?? 'text'"
+                  [title]="element.title ?? undefined"
+                  [lineNumbers]="element.lineNumbers || undefined"
+                  [marks]="
+                    element.highlight === null ? undefined : { highlight: element.highlight }
+                  "
+                ></div>
+              </div>
+            }
+            @case ('table') {
+              <div slProseScroll>
+                <table>
+                  <thead>
+                    <tr>
+                      @for (cell of element.head; track cell.key) {
+                        <th scope="col" [attr.data-align]="cell.align">
+                          <ng-container
+                            *ngTemplateOutlet="nodes; context: { $implicit: cell.children }"
+                          />
+                        </th>
+                      }
+                    </tr>
+                  </thead>
+                  @if (element.rows.length > 0) {
+                    <tbody>
+                      @for (row of element.rows; track $index) {
+                        <tr>
+                          @for (cell of row; track cell.key) {
+                            <td [attr.data-align]="cell.align">
+                              <ng-container
+                                *ngTemplateOutlet="nodes; context: { $implicit: cell.children }"
+                              />
+                            </td>
+                          }
+                        </tr>
+                      }
+                    </tbody>
+                  }
+                </table>
+              </div>
+            }
+            @case ('link') {
+              @if (element.external && resolvedExternal() === 'new-tab') {
+                <a slLink external [href]="element.href" [attr.title]="element.title"
+                  ><ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                /></a>
+              } @else {
+                <a [href]="element.href" [attr.title]="element.title"
+                  ><ng-container
+                    *ngTemplateOutlet="nodes; context: { $implicit: element.children }"
+                /></a>
+              }
+            }
+            @case ('image') {
+              <img
+                [src]="element.src"
+                [alt]="element.alt"
+                [attr.title]="element.title"
+                loading="lazy"
+                decoding="async"
+              />
+            }
+            @case ('footnoteReference') {
+              <sup
+                ><a
+                  data-footnote-ref=""
+                  [id]="element.id"
+                  [href]="'#' + element.target"
+                  [attr.aria-describedby]="document().footnoteLabelId"
+                  >{{ element.number }}</a
+                ></sup
+              >
+            }
+            @case ('custom') {
+              <ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }" />
+            }
+          }
+        }
+      }
+    </ng-template>
+
+    <ng-template #heading let-element>
+      <ng-container *ngTemplateOutlet="nodes; context: { $implicit: element.children }" />
+      @if (resolvedHeadingAnchors()) {
+        <a
+          slProseAnchor
+          [href]="'#' + element.id"
+          [attr.aria-label]="t('anchor', { heading: element.text })"
+          >#</a
+        >
+      }
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'markdown',
+                        'data-part': 'root',
+                        '[attr.data-status]': 'status()',
+                        '[attr.data-flow]': 'resolvedFlow()',
+                        '[attr.data-loading]': "painted() ? '' : null",
+                        '[attr.data-empty]': "status() === 'ready' && !painted() && document().empty ? '' : null",
+                        '[attr.data-streaming]': "streaming() ? '' : null",
+                        '[attr.aria-busy]': "streaming() || painted() ? 'true' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=markdown][data-part=root]{display:block;min-inline-size:0}[data-ui=markdown] [data-part=task]{display:grid;grid-template-columns:calc(var(--slotted-prose-list-inset, 1.5em) + var(--slotted-prose-marker-gap, .25em)) minmax(0,1fr);list-style:none;margin-inline-start:calc(-1 * var(--slotted-prose-list-inset, 1.5em));padding-inline-start:0}[data-ui=markdown] [data-part=task]>:first-child{justify-self:end;margin-block-start:calc((1lh - var(--slotted-control-font-size-md, 13px) * var(--slotted-line-height-md, 1.5)) / 2);margin-inline-end:var(--slotted-markdown-task-gap, var(--slotted-space-3))}[data-ui=markdown] [data-part=task-body]{min-inline-size:0}[data-ui=markdown] [data-part=embed]{margin-block:var(--slotted-prose-flow-normal, 1.15em) 0}[data-ui=markdown][data-flow=tight] [data-part=embed]{margin-block-start:var(--slotted-prose-flow-tight, .75em)}[data-ui=markdown][data-flow=loose] [data-part=embed]{margin-block-start:var(--slotted-prose-flow-loose, 1.6em)}[data-ui=markdown] [data-part=embed]:first-child,[data-ui=markdown] [data-part=alert-body]>:first-child{margin-block-start:0}[data-ui=markdown] :where(th,td)[data-align=start]{text-align:start}[data-ui=markdown] :where(th,td)[data-align=center]{text-align:center}[data-ui=markdown] :where(th,td)[data-align=end]{text-align:end}[data-ui=markdown] [data-part=backref]{--_glyph: var(--slotted-markdown-backref-size, .9em);--_box: var(--slotted-target-min, 24px);--slotted-icon-size: var(--_glyph);block-size:var(--_box);display:inline-block;inline-size:var(--_box);margin-inline-start:var(--slotted-space-1);position:relative;vertical-align:calc(.5cap - .5 * var(--_box))}[data-ui=markdown] [data-part=backref]>[data-ui=icon]{inset:0;margin:auto;position:absolute;rotate:90deg}[data-ui=markdown] [data-part=empty]{color:var(--slotted-text-muted);font-family:var(--slotted-font-family-sans);font-size:var(--slotted-font-size-md);line-height:var(--slotted-line-height-md);margin:0}[data-ui=markdown] [data-part=error]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-space-3) var(--slotted-space-4)}@media print{[data-ui=markdown] a[href^=http]:after{content:\" (\" attr(href) \")\";font-size:.875em;overflow-wrap:anywhere}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], flow: [{ type: i0.Input, args: [{ isSignal: true, alias: "flow", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], streaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "streaming", required: false }] }], external: [{ type: i0.Input, args: [{ isSignal: true, alias: "external", required: false }] }], headingAnchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingAnchors", required: false }] }], headingOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingOffset", required: false }] }], idPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "idPrefix", required: false }] }], alerts: [{ type: i0.Input, args: [{ isSignal: true, alias: "alerts", required: false }] }], allow: [{ type: i0.Input, args: [{ isSignal: true, alias: "allow", required: false }] }], unwrapDisallowed: [{ type: i0.Input, args: [{ isSignal: true, alias: "unwrapDisallowed", required: false }] }], transformUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformUrl", required: false }] }], isExternal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExternal", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], editableTasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "editableTasks", required: false }] }], retryable: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryable", required: false }] }], taskChange: [{ type: i0.Output, args: ["taskChange"] }], retry: [{ type: i0.Output, args: ["retry"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlMarkdownNode), { isSignal: true }] }], nodesTemplate: [{ type: i0.ViewChild, args: ['nodes', { isSignal: true }] }] } });
+/**
+ * Renders an element's children inside a node template, adding no element of
+ * its own: `<ng-container [slMarkdownChildren]="element" />`.
+ */
+class SlMarkdownChildren {
+    element = input.required({ ...(ngDevMode ? { debugName: "element" } : /* istanbul ignore next */ {}), alias: 'slMarkdownChildren' });
+    markdown = inject(SlMarkdown);
+    container = inject(ViewContainerRef);
+    constructor() {
+        effect(() => {
+            const children = this.element().children ?? [];
+            untracked(() => {
+                this.container.clear();
+                this.container.createEmbeddedView(this.markdown.childrenTemplate(), {
+                    $implicit: children,
+                });
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMarkdownChildren, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlMarkdownChildren, isStandalone: true, selector: "[slMarkdownChildren]", inputs: { element: { classPropertyName: "element", publicName: "slMarkdownChildren", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlMarkdownChildren, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slMarkdownChildren]', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "slMarkdownChildren", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MARKDOWN_DEFAULTS, SlMarkdown, SlMarkdownChildren, SlMarkdownEmpty, SlMarkdownNode, injectMarkdownDefaults, provideMarkdownDefaults };
+//# sourceMappingURL=slotted-angular-markdown.mjs.map