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

package/fesm2022/slotted-angular-code-block.mjs

@@ -0,0 +1,476 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Directive, TemplateRef, input, booleanAttribute, numberAttribute, model, computed, output, ElementRef, DestroyRef, HostAttributeToken, viewChild, contentChild, signal, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { writeToClipboard } from '@slotted/core/clipboard';
+import { plainLines, lineMarks, leadingColumns, lineText, gutterDigits, copyText } from '@slotted/core/code';
+import { codeBlockMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createControllable } from '@slotted/core/state';
+import { fileKind } from '@slotted/core/upload';
+import { SlScrollArea, SlScrollAreaContent } from '@slotted/angular/scroll-area';
+import { SlSkeleton } from '@slotted/angular/skeleton';
+
+const CODE_BLOCK_DEFAULTS_TOKEN = new InjectionToken('slotted code-block defaults', { providedIn: 'root', factory: () => ({}) });
+/**
+ * An application that has loaded an engine once hands it to every block here,
+ * along with whether blocks number their lines and carry a copy control. A
+ * block that states any of those itself still wins. Its words come from the
+ * language in force (`provideSlotted`).
+ */
+function provideCodeBlockDefaults(defaults) {
+    return { provide: CODE_BLOCK_DEFAULTS_TOKEN, useValue: defaults };
+}
+function injectCodeBlockDefaults() {
+    return inject(CODE_BLOCK_DEFAULTS_TOKEN);
+}
+
+/** How long the check stays in place of the sheets. */
+const COPIED_FOR = 2000;
+const KIND_ICON = {
+    archive: 'file-archive',
+    audio: 'file-audio',
+    document: 'file-type',
+    image: 'file-image',
+    pdf: 'file-text',
+    presentation: 'presentation',
+    spreadsheet: 'file-spreadsheet',
+    video: 'file-video',
+};
+let counter = 0;
+/** A control of the consumer's own, projected beside copy and wrap. */
+class SlCodeBlockAction {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCodeBlockAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlCodeBlockAction, isStandalone: true, selector: "[slCodeBlockAction]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCodeBlockAction, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slCodeBlockAction]', standalone: true }]
+        }] });
+/** Replaces the run of tokens a line draws. The gutter stays the family's. */
+class SlCodeBlockLine {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCodeBlockLine, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlCodeBlockLine, isStandalone: true, selector: "ng-template[slCodeBlockLine]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCodeBlockLine, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slCodeBlockLine]', standalone: true }]
+        }] });
+/**
+ * A block of source: a header that names the file and holds the two controls,
+ * a body that is a `scroll-area`, and inside it a `pre` whose every line is a
+ * grid row. Tokens come in from an engine outside the family and are drawn as
+ * text in spans; HTML never does.
+ */
+class SlCodeBlock {
+    /** The source, as text. Never HTML. */
+    code = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    language = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    /** The engine, outside the family. `null` refuses the one the provider set. */
+    highlight = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+    /** Already-tokenised lines, when the consumer ran the engine itself. */
+    tokens = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tokens" }] : /* istanbul ignore next */ []));
+    title = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** The file's name, for the glyph beside the title. Defaults to `title`. */
+    fileName = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
+    lineNumbers = input(undefined, { ...(ngDevMode ? { debugName: "lineNumbers" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    start = input(1, { ...(ngDevMode ? { debugName: "start" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    marks = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []));
+    /** Present is controlled, for the life of the block. */
+    wrap = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
+    /** Where an uncontrolled block starts, read once. */
+    defaultWrap = input(false, { ...(ngDevMode ? { debugName: "defaultWrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    collapseAfter = input(undefined, { ...(ngDevMode ? { debugName: "collapseAfter" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : numberAttribute(value)) });
+    revealed = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
+    defaultRevealed = input(false, { ...(ngDevMode ? { debugName: "defaultRevealed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    isWrapped = computed(() => this.wrap() ?? this.defaultWrap(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isWrapped" }] : /* istanbul ignore next */ []));
+    isRevealed = computed(() => this.revealed() ?? this.defaultRevealed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRevealed" }] : /* istanbul ignore next */ []));
+    maxLines = input(undefined, { ...(ngDevMode ? { debugName: "maxLines" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : numberAttribute(value)) });
+    copy = input(undefined, { ...(ngDevMode ? { debugName: "copy" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    copyRemoved = input(false, { ...(ngDevMode ? { debugName: "copyRemoved" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * scroll region's name when the block has no title (`region`), the controls,
+     * and the announcements.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    tabSize = input(2, { ...(ngDevMode ? { debugName: "tabSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** The request behind a wrap change, with the reason it carries. */
+    wrapChangeRequest = output();
+    revealedChangeRequest = output();
+    /** What the copy control wrote, and whether the platform took it. */
+    copyRequest = output();
+    highlightError = output();
+    defaults = injectCodeBlockDefaults();
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    ariaLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    body = viewChild.required('body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []));
+    lineTemplate = contentChild(SlCodeBlockLine, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineTemplate" }] : /* istanbul ignore next */ []));
+    action = contentChild(SlCodeBlockAction, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    id = `slotted-code-block-${(counter += 1)}`;
+    skeletonWidths = [62, 78, 44, 70];
+    /** The family's words in the language in force, with this block's `messages` laid over them. */
+    t = injectMessages(codeBlockMessages, this.messages);
+    lineNumbersValue = computed(() => this.lineNumbers() ?? this.defaults.lineNumbers ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineNumbersValue" }] : /* istanbul ignore next */ []));
+    copyControl = computed(() => this.copy() ?? this.defaults.copy ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copyControl" }] : /* istanbul ignore next */ []));
+    engine = computed(() => {
+        const own = this.highlight();
+        return own === null ? undefined : (own ?? this.defaults.highlight);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "engine" }] : /* istanbul ignore next */ []));
+    resolved = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    overflow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    timer;
+    keyed = false;
+    lines = computed(() => {
+        const tokens = this.tokens();
+        if (tokens)
+            return tokens;
+        const resolved = this.resolved();
+        return resolved && resolved.code === this.code() ? resolved.lines : plainLines(this.code());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    marksByLine = computed(() => lineMarks(this.marks(), this.lines().length), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marksByLine" }] : /* istanbul ignore next */ []));
+    hasMarks = computed(() => this.marksByLine().some((entry) => entry.mark !== undefined || entry.dim), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMarks" }] : /* istanbul ignore next */ []));
+    rows = computed(() => {
+        const marks = this.marksByLine();
+        const start = this.start();
+        const wrap = this.isWrapped();
+        const tabSize = this.tabSize();
+        return this.lines().map((tokens, index) => ({
+            dim: marks[index]?.dim ?? false,
+            indent: wrap ? leadingColumns(lineText(tokens), tabSize) : 0,
+            mark: marks[index]?.mark,
+            number: start + index,
+            tokens,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    digits = computed(() => gutterDigits(this.lines().length, this.start()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "digits" }] : /* istanbul ignore next */ []));
+    collapses = computed(() => {
+        const after = this.collapseAfter();
+        return after !== undefined && this.lines().length > after;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapses" }] : /* istanbul ignore next */ []));
+    hiddenCount = computed(() => this.collapses() ? this.lines().length - (this.collapseAfter() ?? 0) : 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
+    hasHeader = computed(() => this.title() !== undefined ||
+        this.language() !== 'text' ||
+        this.copyControl() ||
+        this.action() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
+    icon = computed(() => {
+        const name = this.fileName() ?? this.title();
+        if (!name || this.title() === undefined)
+            return undefined;
+        return KIND_ICON[fileKind({ name, type: '' })] ?? 'file';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    regionName = computed(() => this.title() ?? this.ariaLabel ?? this.t('region'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "regionName" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* The engine runs after the first paint and its lines are swapped in. */
+        effect((onCleanup) => {
+            const engine = this.engine();
+            const code = this.code();
+            const language = this.language();
+            if (!engine || this.tokens())
+                return;
+            let live = true;
+            onCleanup(() => {
+                live = false;
+            });
+            Promise.resolve()
+                .then(() => engine(code, language))
+                .then((lines) => {
+                if (live)
+                    this.resolved.set({ code, lines });
+            })
+                .catch((error) => {
+                if (live)
+                    this.highlightError.emit(error);
+            });
+        });
+        this.destroyRef.onDestroy(() => clearTimeout(this.timer));
+    }
+    onOverflow(state) {
+        this.overflow.set(state.inline.overflowing);
+    }
+    /** `Enter` and `Space` both end in a click; whether a key came first decides the reason. */
+    remember(event) {
+        this.keyed = event.key === 'Enter' || event.key === ' ';
+    }
+    takeReason() {
+        const reason = this.keyed ? 'keyboard' : 'pointer';
+        this.keyed = false;
+        return reason;
+    }
+    toggleWrap(event) {
+        this.requestWrap(!this.isWrapped(), this.takeReason(), event);
+    }
+    requestWrap(next, reason, source) {
+        const state = createControllable({
+            initial: this.isWrapped(),
+            onRequest: (request) => this.wrapChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.wrap.set(next);
+    }
+    toggleRevealed(event) {
+        this.requestRevealed(!this.isRevealed(), this.takeReason(), event);
+    }
+    requestRevealed(next, reason, source) {
+        const state = createControllable({
+            initial: this.isRevealed(),
+            onRequest: (request) => this.revealedChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.revealed.set(next);
+    }
+    onKeyDown(event) {
+        if (event.defaultPrevented || event.key !== 'Escape')
+            return;
+        if (!untracked(this.collapses) || !untracked(this.revealed))
+            return;
+        event.preventDefault();
+        this.requestRevealed(false, 'escape', event);
+        this.body().focus();
+    }
+    copyFromControl(event) {
+        void this.write(this.takeReason(), event);
+    }
+    /** Writes the code to the clipboard, as the control does. */
+    copyCode() {
+        return this.write('keyboard');
+    }
+    async write(reason, source) {
+        const value = copyText(this.code(), this.marks(), { includeRemoved: this.copyRemoved() });
+        const done = (await writeToClipboard(value)) !== 'refused';
+        if (done) {
+            this.copied.set(true);
+            clearTimeout(this.timer);
+            this.timer = setTimeout(() => this.copied.set(false), COPIED_FOR);
+        }
+        getLiveAnnouncer(this.host.nativeElement.ownerDocument).announce(this.t(done ? 'copied' : 'copyFailed'));
+        this.copyRequest.emit({ copied: done, reason, source, value });
+        return done;
+    }
+    /** Brings a one-based line into view. */
+    scrollToLine(line) {
+        const element = this.host.nativeElement.querySelector(`[data-line='${line}']`);
+        if (element)
+            this.body().reveal(element);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCodeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlCodeBlock, isStandalone: true, selector: "[slCodeBlock]", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, tokens: { classPropertyName: "tokens", publicName: "tokens", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, lineNumbers: { classPropertyName: "lineNumbers", publicName: "lineNumbers", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, marks: { classPropertyName: "marks", publicName: "marks", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, defaultWrap: { classPropertyName: "defaultWrap", publicName: "defaultWrap", isSignal: true, isRequired: false, transformFunction: null }, collapseAfter: { classPropertyName: "collapseAfter", publicName: "collapseAfter", isSignal: true, isRequired: false, transformFunction: null }, revealed: { classPropertyName: "revealed", publicName: "revealed", isSignal: true, isRequired: false, transformFunction: null }, defaultRevealed: { classPropertyName: "defaultRevealed", publicName: "defaultRevealed", isSignal: true, isRequired: false, transformFunction: null }, maxLines: { classPropertyName: "maxLines", publicName: "maxLines", isSignal: true, isRequired: false, transformFunction: null }, copy: { classPropertyName: "copy", publicName: "copy", isSignal: true, isRequired: false, transformFunction: null }, copyRemoved: { classPropertyName: "copyRemoved", publicName: "copyRemoved", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, tabSize: { classPropertyName: "tabSize", publicName: "tabSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wrap: "wrapChange", revealed: "revealedChange", wrapChangeRequest: "wrapChangeRequest", revealedChangeRequest: "revealedChangeRequest", copyRequest: "copyRequest", highlightError: "highlightError" }, host: { attributes: { "data-ui": "code-block", "data-part": "root" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-language": "language()", "attr.data-wrap": "isWrapped() ? \"\" : null", "attr.data-revealed": "isRevealed() ? \"\" : null", "attr.data-collapse": "collapses() ? \"\" : null", "attr.data-line-numbers": "lineNumbersValue() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null", "attr.aria-busy": "loading() ? \"true\" : null", "attr.data-empty": "code() === \"\" ? \"\" : null", "attr.data-marks": "hasMarks() ? \"\" : null", "attr.data-overflow": "overflow() ? \"\" : null", "style.--slotted-code-block-digits": "digits()", "style.--slotted-code-block-collapse": "collapses() ? collapseAfter() : null", "style.--slotted-code-block-max-lines": "maxLines() ?? null" } }, queries: [{ propertyName: "lineTemplate", first: true, predicate: SlCodeBlockLine, descendants: true, isSignal: true }, { propertyName: "action", first: true, predicate: SlCodeBlockAction, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true, isSignal: true }], exportAs: ["slCodeBlock"], ngImport: i0, template: `
+    @if (hasHeader()) {
+      <div data-part="header">
+        @if (icon(); as glyph) {
+          <span aria-hidden="true" data-part="icon"
+            ><span slIcon><svg slGlyph [name]="glyph"></svg></span
+          ></span>
+        }
+        @if (title(); as words) {
+          <span data-part="title" [id]="id + '-title'">{{ words }}</span>
+        }
+        @if (language() !== 'text') {
+          <span data-part="language">{{ language() }}</span>
+        }
+        @if (!loading()) {
+          <div data-part="actions">
+            <ng-content select="[slCodeBlockAction]"></ng-content>
+            @if (overflow() || isWrapped()) {
+              <button
+                data-part="wrap"
+                type="button"
+                [attr.aria-label]="t(isWrapped() ? 'unwrap' : 'wrap')"
+                [attr.aria-pressed]="isWrapped()"
+                [attr.data-pressed]="isWrapped() ? '' : null"
+                (click)="toggleWrap($event)"
+                (keydown)="remember($event)"
+              >
+                <span slIcon><svg slGlyph name="text-wrap"></svg></span>
+              </button>
+            }
+            @if (copyControl()) {
+              <button
+                data-part="copy"
+                type="button"
+                [attr.aria-label]="t('copy')"
+                [attr.data-complete]="copied() ? '' : null"
+                (click)="copyFromControl($event)"
+                (keydown)="remember($event)"
+              >
+                <!-- The check stands in for the sheets while the copy is confirmed. -->
+                <span slIcon><svg slGlyph [name]="copied() ? 'check' : 'copy'"></svg></span>
+              </button>
+            }
+          </div>
+        }
+      </div>
+    }
+    <div
+      #body
+      slScrollArea
+      data-part="body"
+      [axis]="maxLines() === undefined ? 'inline' : 'both'"
+      fade="both"
+      gutter="auto"
+      [id]="id + '-body'"
+      [messages]="{ label: regionName() }"
+      [attr.data-max-lines]="maxLines() === undefined ? null : ''"
+      (overflowChange)="onOverflow($event)"
+    >
+      <div slScrollAreaContent>
+        <pre
+          data-part="pre"
+        ><code data-part="code" [class]="'language-' + language()">@if (loading()) {@for (width of skeletonWidths; track $index) {<span slSkeleton shape="text" aria-hidden="true" [style.inline-size]="width + '%'"></span>}} @else {@for (line of rows(); track $index) {<span data-part="line" [attr.data-line]="line.number" [attr.data-mark]="line.mark ?? null" [attr.data-dim]="line.dim ? '' : null" [style.--slotted-code-block-indent]="line.indent > 0 ? line.indent : null"><span aria-hidden="true" data-part="number">@if (lineNumbersValue()) {{{ line.number }}}</span><span aria-hidden="true" data-part="marker"></span><span data-part="text">@if (lineTemplate(); as custom) {<ng-container [ngTemplateOutlet]="custom.template" [ngTemplateOutletContext]="{ $implicit: line.tokens, number: line.number, mark: line.mark, dim: line.dim }" />} @else {@for (token of line.tokens; track $index) {@if (token.scope) {<span data-part="token" [attr.data-token]="token.scope">{{ token.text }}</span>} @else {{{ token.text }}}}}</span></span>}}</code></pre>
+      </div>
+    </div>
+    @if (collapses()) {
+      <button
+        data-part="reveal"
+        type="button"
+        [attr.aria-controls]="id + '-body'"
+        [attr.aria-expanded]="isRevealed()"
+        (click)="toggleRevealed($event)"
+        (keydown)="remember($event)"
+      >
+        {{ isRevealed() ? t('collapse') : t('reveal', { count: hiddenCount() }) }}
+      </button>
+    }
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=code-block]{--_ground: var(--slotted-code-block-surface, var(--slotted-surface-sunken, Canvas));--_edge: var(--slotted-code-block-border-color, var(--slotted-border-subtle, GrayText));--_ink: var(--slotted-code-block-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-code-block-color-muted, var(--slotted-text-muted, GrayText));--_radius: var(--slotted-code-block-radius, var(--slotted-radius-md, 6px));--_inset-block: var(--slotted-code-block-inset-block, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-code-block-inset-inline, var(--slotted-space-6, 1rem));--_font-size: var(--slotted-code-block-font-size, var(--slotted-font-size-sm, .8125rem));--_line-height: var(--slotted-code-block-line-height, var(--slotted-line-height-md, 1.5));--_line: calc(var(--_font-size) * var(--_line-height));--_icon: var(--slotted-control-icon-size-md, 16px);--_hit: calc((var(--slotted-target-min, 24px) - var(--_icon)) / 2);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));--_digits: var(--slotted-code-block-digits, 1);--_gutter: calc(var(--_digits) * 1ch + var(--slotted-space-4, .5rem) * 2);--_tint: var(--slotted-highlight-tint-opacity, .075);background-color:var(--_ground);border:var(--slotted-border-width-thin, 1px) solid var(--_edge);border-radius:var(--_radius);box-sizing:border-box;color:var(--_ink);display:grid;font-family:var(--slotted-code-block-font-family, var(--slotted-font-family-mono, monospace));font-size:var(--_font-size);grid-template-rows:auto minmax(0,1fr) auto;line-height:var(--_line-height);min-inline-size:0;position:relative}[data-ui=code-block]>[data-part=header]{align-items:center;border-block-end:var(--slotted-border-width-thin, 1px) solid var(--_edge);display:flex;font-family:var(--slotted-font-family-sans, inherit);font-size:var(--slotted-font-size-sm, .8125rem);gap:var(--slotted-control-gap-sm, 6px);min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--_inset-inline) var(--slotted-space-4, .5rem)}[data-ui=code-block]>[data-part=header]>[data-part=icon]{--slotted-icon-size: var(--_icon);block-size:var(--_icon);color:var(--_muted);display:flex;flex:none;inline-size:var(--_icon)}[data-ui=code-block]>[data-part=header]>[data-part=title]{font-family:var(--slotted-code-block-font-family, var(--slotted-font-family-mono, monospace));min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=code-block]>[data-part=header]>[data-part=language]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);letter-spacing:.02em;margin-inline-start:auto;text-transform:uppercase}[data-ui=code-block]>[data-part=header]>[data-part=title]+[data-part=language],[data-ui=code-block]>[data-part=header]>[data-part=icon]+[data-part=language]{margin-inline-start:auto}[data-ui=code-block]>[data-part=header]>[data-part=actions]{align-items:center;display:flex;gap:var(--slotted-space-1, .125rem);margin-inline-start:auto}[data-ui=code-block]>[data-part=header]>[data-part=language]+[data-part=actions]{margin-inline-start:var(--slotted-space-3, .375rem)}[data-ui=code-block]>[data-part=actions]{align-items:center;background-color:var(--_ground);border-radius:var(--slotted-control-radius, 4px);display:flex;gap:var(--slotted-space-1, .125rem);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute;z-index:1}[data-ui=code-block] :is([data-part=copy],[data-part=wrap]){--slotted-icon-size: var(--_icon);align-items:center;appearance:none;background:none;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--slotted-target-min, 24px);justify-content:center;padding:var(--_hit);transition:color var(--_duration) var(--_easing),background-color var(--_duration) var(--_easing)}@media(pointer:coarse){[data-ui=code-block] :is([data-part=copy],[data-part=wrap]){position:relative}[data-ui=code-block] :is([data-part=copy],[data-part=wrap]):before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=code-block] [data-part=wrap]:has(+[data-part=copy]):before{inset-inline-end:0}[data-ui=code-block] [data-part=wrap]+[data-part=copy]:before{inset-inline-start:0}}[data-ui=code-block] :is([data-part=copy],[data-part=wrap]):enabled:not([data-complete]):hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:var(--_ink)}[data-ui=code-block] :is([data-part=copy],[data-part=wrap]):enabled:not([data-complete]):active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui=code-block] [data-part=wrap][data-pressed]{background-color:var(--slotted-tone-accent-surface, Canvas);color:var(--slotted-tone-accent-text, CanvasText)}[data-ui=code-block] [data-part=copy][data-complete]{color:var(--slotted-tone-success-text, CanvasText)}[data-ui=code-block] :is([data-part=copy],[data-part=wrap],[data-part=reveal]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=code-block]>[data-part=body]{border-radius:0 0 var(--_radius) var(--_radius);min-inline-size:0}[data-ui=code-block]>[data-part=body]:first-child{border-radius:var(--_radius)}[data-ui=code-block]>[data-part=body][data-max-lines]>[data-part=viewport]{max-block-size:calc(var(--slotted-code-block-max-lines) * var(--_line) + var(--_inset-block) * 2)}[data-ui=code-block]>[data-part=body]>[data-part=viewport]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=code-block] [data-part=pre]{direction:ltr;font:inherit;margin:0;min-inline-size:max-content;padding-block:var(--_inset-block);tab-size:var(--slotted-code-block-tab-size, 2);white-space:pre}[data-ui=code-block][data-wrap] [data-part=pre]{min-inline-size:0;overflow-wrap:anywhere;white-space:pre-wrap}[data-ui=code-block] [data-part=code]{display:grid;font:inherit;grid-template-columns:minmax(0,1fr)}[data-ui=code-block] [data-part=line]{--_indent: calc(var(--slotted-code-block-indent, 0) * 1ch);box-sizing:border-box;display:grid;grid-template-columns:var(--_number, 0px) var(--_marker, 0px) minmax(0,1fr);min-block-size:var(--_line);padding-inline:var(--_inset-inline);position:relative}[data-ui=code-block][data-line-numbers] [data-part=line]{--_number: var(--_gutter);padding-inline-start:0}[data-ui=code-block]:not([data-line-numbers]) [data-part=number]{display:none}[data-ui=code-block][data-marks] [data-part=line]{--_marker: var(--slotted-space-6, 1rem)}[data-ui=code-block] [data-part=number]{color:var(--_muted);font-variant-numeric:tabular-nums;grid-column:1;padding-inline-end:var(--slotted-space-4, .5rem);text-align:end;-webkit-user-select:none;user-select:none}[data-ui=code-block] [data-part=marker]{grid-column:2;text-align:center;-webkit-user-select:none;user-select:none}[data-ui=code-block] [data-part=line]>[data-part=token],[data-ui=code-block] [data-part=line]>[data-part=text]{grid-column:3}[data-ui=code-block] [data-part=line]>[data-part=text]{display:block;min-inline-size:0}[data-ui=code-block][data-wrap] [data-part=line]>[data-part=text]{padding-inline-start:var(--_indent);text-indent:calc(var(--_indent) * -1)}[data-ui=code-block] [data-token=comment]{color:var(--slotted-code-comment, var(--slotted-text-muted, GrayText));font-style:italic}[data-ui=code-block] [data-token=keyword]{color:var(--slotted-code-keyword, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=string]{color:var(--slotted-code-string, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=number]{color:var(--slotted-code-number, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=function]{color:var(--slotted-code-function, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=type]{color:var(--slotted-code-type, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=variable]{color:var(--slotted-code-variable, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=property]{color:var(--slotted-code-property, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=punctuation]{color:var(--slotted-code-punctuation, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=tag]{color:var(--slotted-code-tag, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=attribute]{color:var(--slotted-code-attribute, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=constant]{color:var(--slotted-code-constant, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-part=line][data-mark]{--_tone: var(--slotted-tone-accent-text, CanvasText);background-color:color-mix(in srgb,var(--_tone) calc(var(--_tint) * 100%),transparent)}[data-ui=code-block] [data-part=line]:is([data-mark=highlight],[data-mark=error],[data-mark=warning]):before{background-color:var(--_tone);content:\"\";inline-size:var(--slotted-border-width-thick, 2px);inset-block:0;inset-inline-start:0;position:absolute}[data-ui=code-block] [data-part=line][data-mark=add]{--_tone: var(--slotted-tone-success-text, CanvasText)}[data-ui=code-block] [data-part=line][data-mark=remove],[data-ui=code-block] [data-part=line][data-mark=error]{--_tone: var(--slotted-tone-danger-text, CanvasText)}[data-ui=code-block] [data-part=line][data-mark=warning]{--_tone: var(--slotted-tone-warning-text, CanvasText)}[data-ui=code-block] [data-part=line][data-mark=add]>[data-part=marker]:before{color:var(--_tone);content:\"+\"}[data-ui=code-block] [data-part=line][data-mark=remove]>[data-part=marker]:before{color:var(--_tone);content:\"\\2212\"}[data-ui=code-block] [data-part=line][data-mark=remove]>[data-part=text]{opacity:.72}[data-ui=code-block] [data-part=line][data-dim]{color:var(--_muted);filter:blur(1px);transition:filter var(--slotted-duration-medium) var(--slotted-easing-standard),color var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=code-block] [data-part=line][data-dim] [data-part=token]{color:inherit}[data-ui=code-block]:not([data-loading]):is(:hover,:focus-within) [data-part=line][data-dim]{color:var(--_ink);filter:none}[data-ui=code-block]:not([data-loading]):is(:hover,:focus-within) [data-part=line][data-dim] [data-part=token]{color:revert-layer}[data-ui=code-block][data-collapse]:not([data-revealed])>[data-part=body]>[data-part=viewport]{--_visible: calc(var(--slotted-code-block-collapse) * var(--_line) + var(--_inset-block));-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--_visible) - var(--_line)),transparent var(--_visible));mask-image:linear-gradient(to bottom,#000 calc(var(--_visible) - var(--_line)),transparent var(--_visible));max-block-size:var(--_visible);overflow-y:hidden}[data-ui=code-block]>[data-part=reveal]{appearance:none;background:none;border:0;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_edge);color:var(--slotted-tone-accent-text, LinkText);cursor:pointer;font-family:var(--slotted-font-family-sans, inherit);font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-medium, 500);min-block-size:var(--slotted-control-height-sm, 30px);padding-block:0;padding-inline:var(--_inset-inline);text-align:start;transition:background-color var(--_duration) var(--_easing)}[data-ui=code-block]>[data-part=reveal]:focus-visible{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_radius);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=code-block]>[data-part=reveal]:enabled:hover{background-color:var(--slotted-tone-accent-subtle-hover, ButtonFace)}[data-ui=code-block]>[data-part=reveal]:enabled:active{background-color:var(--slotted-tone-accent-subtle-active, ButtonFace)}[data-ui=code-block][data-loading] [data-part=code]{gap:var(--slotted-space-3, .375rem);padding-inline:var(--_inset-inline)}[data-ui=code-block][data-loading] [data-part=code]>[data-ui=skeleton]{block-size:var(--_font-size)}@media(prefers-reduced-motion:reduce){[data-ui=code-block] [data-part=line][data-dim]{filter:none}}@media(forced-colors:active){[data-ui=code-block] [data-part=line][data-mark]{background-color:transparent}[data-ui=code-block] [data-part=line][data-dim]{color:inherit;filter:none}}@media print{[data-ui=code-block] [data-part=pre]{min-inline-size:0;overflow-wrap:anywhere;white-space:pre-wrap}[data-ui=code-block][data-collapse]>[data-part=body]>[data-part=viewport]{-webkit-mask-image:none;mask-image:none;max-block-size:none}[data-ui=code-block]>[data-part=reveal],[data-ui=code-block] [data-part=wrap]{display:none}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: SlScrollArea, selector: "[slScrollArea]", inputs: ["axis", "scrollbars", "gutter", "fade", "overscroll", "maxBlockSize", "maxInlineSize", "tabbable", "labelledBy", "messages"], outputs: ["scrollChange", "overflowChange"], exportAs: ["slScrollArea"] }, { kind: "directive", type: SlScrollAreaContent, selector: "[slScrollAreaContent]", exportAs: ["slScrollAreaContent"] }, { kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlCodeBlock, decorators: [{
+            type: Component,
+            args: [{ selector: '[slCodeBlock]', standalone: true, imports: [NgTemplateOutlet, SlGlyph, SlIcon, SlScrollArea, SlScrollAreaContent, SlSkeleton], template: `
+    @if (hasHeader()) {
+      <div data-part="header">
+        @if (icon(); as glyph) {
+          <span aria-hidden="true" data-part="icon"
+            ><span slIcon><svg slGlyph [name]="glyph"></svg></span
+          ></span>
+        }
+        @if (title(); as words) {
+          <span data-part="title" [id]="id + '-title'">{{ words }}</span>
+        }
+        @if (language() !== 'text') {
+          <span data-part="language">{{ language() }}</span>
+        }
+        @if (!loading()) {
+          <div data-part="actions">
+            <ng-content select="[slCodeBlockAction]"></ng-content>
+            @if (overflow() || isWrapped()) {
+              <button
+                data-part="wrap"
+                type="button"
+                [attr.aria-label]="t(isWrapped() ? 'unwrap' : 'wrap')"
+                [attr.aria-pressed]="isWrapped()"
+                [attr.data-pressed]="isWrapped() ? '' : null"
+                (click)="toggleWrap($event)"
+                (keydown)="remember($event)"
+              >
+                <span slIcon><svg slGlyph name="text-wrap"></svg></span>
+              </button>
+            }
+            @if (copyControl()) {
+              <button
+                data-part="copy"
+                type="button"
+                [attr.aria-label]="t('copy')"
+                [attr.data-complete]="copied() ? '' : null"
+                (click)="copyFromControl($event)"
+                (keydown)="remember($event)"
+              >
+                <!-- The check stands in for the sheets while the copy is confirmed. -->
+                <span slIcon><svg slGlyph [name]="copied() ? 'check' : 'copy'"></svg></span>
+              </button>
+            }
+          </div>
+        }
+      </div>
+    }
+    <div
+      #body
+      slScrollArea
+      data-part="body"
+      [axis]="maxLines() === undefined ? 'inline' : 'both'"
+      fade="both"
+      gutter="auto"
+      [id]="id + '-body'"
+      [messages]="{ label: regionName() }"
+      [attr.data-max-lines]="maxLines() === undefined ? null : ''"
+      (overflowChange)="onOverflow($event)"
+    >
+      <div slScrollAreaContent>
+        <pre
+          data-part="pre"
+        ><code data-part="code" [class]="'language-' + language()">@if (loading()) {@for (width of skeletonWidths; track $index) {<span slSkeleton shape="text" aria-hidden="true" [style.inline-size]="width + '%'"></span>}} @else {@for (line of rows(); track $index) {<span data-part="line" [attr.data-line]="line.number" [attr.data-mark]="line.mark ?? null" [attr.data-dim]="line.dim ? '' : null" [style.--slotted-code-block-indent]="line.indent > 0 ? line.indent : null"><span aria-hidden="true" data-part="number">@if (lineNumbersValue()) {{{ line.number }}}</span><span aria-hidden="true" data-part="marker"></span><span data-part="text">@if (lineTemplate(); as custom) {<ng-container [ngTemplateOutlet]="custom.template" [ngTemplateOutletContext]="{ $implicit: line.tokens, number: line.number, mark: line.mark, dim: line.dim }" />} @else {@for (token of line.tokens; track $index) {@if (token.scope) {<span data-part="token" [attr.data-token]="token.scope">{{ token.text }}</span>} @else {{{ token.text }}}}}</span></span>}}</code></pre>
+      </div>
+    </div>
+    @if (collapses()) {
+      <button
+        data-part="reveal"
+        type="button"
+        [attr.aria-controls]="id + '-body'"
+        [attr.aria-expanded]="isRevealed()"
+        (click)="toggleRevealed($event)"
+        (keydown)="remember($event)"
+      >
+        {{ isRevealed() ? t('collapse') : t('reveal', { count: hiddenCount() }) }}
+      </button>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slCodeBlock', host: {
+                        'data-ui': 'code-block',
+                        'data-part': 'root',
+                        '[attr.data-language]': 'language()',
+                        '[attr.data-wrap]': 'isWrapped() ? "" : null',
+                        '[attr.data-revealed]': 'isRevealed() ? "" : null',
+                        '[attr.data-collapse]': 'collapses() ? "" : null',
+                        '[attr.data-line-numbers]': 'lineNumbersValue() ? "" : null',
+                        '[attr.data-loading]': 'loading() ? "" : null',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                        '[attr.data-empty]': 'code() === "" ? "" : null',
+                        '[attr.data-marks]': 'hasMarks() ? "" : null',
+                        '[attr.data-overflow]': 'overflow() ? "" : null',
+                        '[style.--slotted-code-block-digits]': 'digits()',
+                        '[style.--slotted-code-block-collapse]': 'collapses() ? collapseAfter() : null',
+                        '[style.--slotted-code-block-max-lines]': 'maxLines() ?? null',
+                        '(keydown)': 'onKeyDown($event)',
+                    }, styles: ["@layer slotted.components{[data-ui=code-block]{--_ground: var(--slotted-code-block-surface, var(--slotted-surface-sunken, Canvas));--_edge: var(--slotted-code-block-border-color, var(--slotted-border-subtle, GrayText));--_ink: var(--slotted-code-block-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-code-block-color-muted, var(--slotted-text-muted, GrayText));--_radius: var(--slotted-code-block-radius, var(--slotted-radius-md, 6px));--_inset-block: var(--slotted-code-block-inset-block, var(--slotted-space-5, .75rem));--_inset-inline: var(--slotted-code-block-inset-inline, var(--slotted-space-6, 1rem));--_font-size: var(--slotted-code-block-font-size, var(--slotted-font-size-sm, .8125rem));--_line-height: var(--slotted-code-block-line-height, var(--slotted-line-height-md, 1.5));--_line: calc(var(--_font-size) * var(--_line-height));--_icon: var(--slotted-control-icon-size-md, 16px);--_hit: calc((var(--slotted-target-min, 24px) - var(--_icon)) / 2);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));--_digits: var(--slotted-code-block-digits, 1);--_gutter: calc(var(--_digits) * 1ch + var(--slotted-space-4, .5rem) * 2);--_tint: var(--slotted-highlight-tint-opacity, .075);background-color:var(--_ground);border:var(--slotted-border-width-thin, 1px) solid var(--_edge);border-radius:var(--_radius);box-sizing:border-box;color:var(--_ink);display:grid;font-family:var(--slotted-code-block-font-family, var(--slotted-font-family-mono, monospace));font-size:var(--_font-size);grid-template-rows:auto minmax(0,1fr) auto;line-height:var(--_line-height);min-inline-size:0;position:relative}[data-ui=code-block]>[data-part=header]{align-items:center;border-block-end:var(--slotted-border-width-thin, 1px) solid var(--_edge);display:flex;font-family:var(--slotted-font-family-sans, inherit);font-size:var(--slotted-font-size-sm, .8125rem);gap:var(--slotted-control-gap-sm, 6px);min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--_inset-inline) var(--slotted-space-4, .5rem)}[data-ui=code-block]>[data-part=header]>[data-part=icon]{--slotted-icon-size: var(--_icon);block-size:var(--_icon);color:var(--_muted);display:flex;flex:none;inline-size:var(--_icon)}[data-ui=code-block]>[data-part=header]>[data-part=title]{font-family:var(--slotted-code-block-font-family, var(--slotted-font-family-mono, monospace));min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=code-block]>[data-part=header]>[data-part=language]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);letter-spacing:.02em;margin-inline-start:auto;text-transform:uppercase}[data-ui=code-block]>[data-part=header]>[data-part=title]+[data-part=language],[data-ui=code-block]>[data-part=header]>[data-part=icon]+[data-part=language]{margin-inline-start:auto}[data-ui=code-block]>[data-part=header]>[data-part=actions]{align-items:center;display:flex;gap:var(--slotted-space-1, .125rem);margin-inline-start:auto}[data-ui=code-block]>[data-part=header]>[data-part=language]+[data-part=actions]{margin-inline-start:var(--slotted-space-3, .375rem)}[data-ui=code-block]>[data-part=actions]{align-items:center;background-color:var(--_ground);border-radius:var(--slotted-control-radius, 4px);display:flex;gap:var(--slotted-space-1, .125rem);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute;z-index:1}[data-ui=code-block] :is([data-part=copy],[data-part=wrap]){--slotted-icon-size: var(--_icon);align-items:center;appearance:none;background:none;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--slotted-control-radius, var(--slotted-radius-sm, 4px));color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--slotted-target-min, 24px);justify-content:center;padding:var(--_hit);transition:color var(--_duration) var(--_easing),background-color var(--_duration) var(--_easing)}@media(pointer:coarse){[data-ui=code-block] :is([data-part=copy],[data-part=wrap]){position:relative}[data-ui=code-block] :is([data-part=copy],[data-part=wrap]):before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}[data-ui=code-block] [data-part=wrap]:has(+[data-part=copy]):before{inset-inline-end:0}[data-ui=code-block] [data-part=wrap]+[data-part=copy]:before{inset-inline-start:0}}[data-ui=code-block] :is([data-part=copy],[data-part=wrap]):enabled:not([data-complete]):hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:var(--_ink)}[data-ui=code-block] :is([data-part=copy],[data-part=wrap]):enabled:not([data-complete]):active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui=code-block] [data-part=wrap][data-pressed]{background-color:var(--slotted-tone-accent-surface, Canvas);color:var(--slotted-tone-accent-text, CanvasText)}[data-ui=code-block] [data-part=copy][data-complete]{color:var(--slotted-tone-success-text, CanvasText)}[data-ui=code-block] :is([data-part=copy],[data-part=wrap],[data-part=reveal]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=code-block]>[data-part=body]{border-radius:0 0 var(--_radius) var(--_radius);min-inline-size:0}[data-ui=code-block]>[data-part=body]:first-child{border-radius:var(--_radius)}[data-ui=code-block]>[data-part=body][data-max-lines]>[data-part=viewport]{max-block-size:calc(var(--slotted-code-block-max-lines) * var(--_line) + var(--_inset-block) * 2)}[data-ui=code-block]>[data-part=body]>[data-part=viewport]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=code-block] [data-part=pre]{direction:ltr;font:inherit;margin:0;min-inline-size:max-content;padding-block:var(--_inset-block);tab-size:var(--slotted-code-block-tab-size, 2);white-space:pre}[data-ui=code-block][data-wrap] [data-part=pre]{min-inline-size:0;overflow-wrap:anywhere;white-space:pre-wrap}[data-ui=code-block] [data-part=code]{display:grid;font:inherit;grid-template-columns:minmax(0,1fr)}[data-ui=code-block] [data-part=line]{--_indent: calc(var(--slotted-code-block-indent, 0) * 1ch);box-sizing:border-box;display:grid;grid-template-columns:var(--_number, 0px) var(--_marker, 0px) minmax(0,1fr);min-block-size:var(--_line);padding-inline:var(--_inset-inline);position:relative}[data-ui=code-block][data-line-numbers] [data-part=line]{--_number: var(--_gutter);padding-inline-start:0}[data-ui=code-block]:not([data-line-numbers]) [data-part=number]{display:none}[data-ui=code-block][data-marks] [data-part=line]{--_marker: var(--slotted-space-6, 1rem)}[data-ui=code-block] [data-part=number]{color:var(--_muted);font-variant-numeric:tabular-nums;grid-column:1;padding-inline-end:var(--slotted-space-4, .5rem);text-align:end;-webkit-user-select:none;user-select:none}[data-ui=code-block] [data-part=marker]{grid-column:2;text-align:center;-webkit-user-select:none;user-select:none}[data-ui=code-block] [data-part=line]>[data-part=token],[data-ui=code-block] [data-part=line]>[data-part=text]{grid-column:3}[data-ui=code-block] [data-part=line]>[data-part=text]{display:block;min-inline-size:0}[data-ui=code-block][data-wrap] [data-part=line]>[data-part=text]{padding-inline-start:var(--_indent);text-indent:calc(var(--_indent) * -1)}[data-ui=code-block] [data-token=comment]{color:var(--slotted-code-comment, var(--slotted-text-muted, GrayText));font-style:italic}[data-ui=code-block] [data-token=keyword]{color:var(--slotted-code-keyword, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=string]{color:var(--slotted-code-string, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=number]{color:var(--slotted-code-number, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=function]{color:var(--slotted-code-function, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=type]{color:var(--slotted-code-type, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=variable]{color:var(--slotted-code-variable, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=property]{color:var(--slotted-code-property, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=punctuation]{color:var(--slotted-code-punctuation, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=tag]{color:var(--slotted-code-tag, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=attribute]{color:var(--slotted-code-attribute, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-token=constant]{color:var(--slotted-code-constant, var(--slotted-text, CanvasText))}[data-ui=code-block] [data-part=line][data-mark]{--_tone: var(--slotted-tone-accent-text, CanvasText);background-color:color-mix(in srgb,var(--_tone) calc(var(--_tint) * 100%),transparent)}[data-ui=code-block] [data-part=line]:is([data-mark=highlight],[data-mark=error],[data-mark=warning]):before{background-color:var(--_tone);content:\"\";inline-size:var(--slotted-border-width-thick, 2px);inset-block:0;inset-inline-start:0;position:absolute}[data-ui=code-block] [data-part=line][data-mark=add]{--_tone: var(--slotted-tone-success-text, CanvasText)}[data-ui=code-block] [data-part=line][data-mark=remove],[data-ui=code-block] [data-part=line][data-mark=error]{--_tone: var(--slotted-tone-danger-text, CanvasText)}[data-ui=code-block] [data-part=line][data-mark=warning]{--_tone: var(--slotted-tone-warning-text, CanvasText)}[data-ui=code-block] [data-part=line][data-mark=add]>[data-part=marker]:before{color:var(--_tone);content:\"+\"}[data-ui=code-block] [data-part=line][data-mark=remove]>[data-part=marker]:before{color:var(--_tone);content:\"\\2212\"}[data-ui=code-block] [data-part=line][data-mark=remove]>[data-part=text]{opacity:.72}[data-ui=code-block] [data-part=line][data-dim]{color:var(--_muted);filter:blur(1px);transition:filter var(--slotted-duration-medium) var(--slotted-easing-standard),color var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=code-block] [data-part=line][data-dim] [data-part=token]{color:inherit}[data-ui=code-block]:not([data-loading]):is(:hover,:focus-within) [data-part=line][data-dim]{color:var(--_ink);filter:none}[data-ui=code-block]:not([data-loading]):is(:hover,:focus-within) [data-part=line][data-dim] [data-part=token]{color:revert-layer}[data-ui=code-block][data-collapse]:not([data-revealed])>[data-part=body]>[data-part=viewport]{--_visible: calc(var(--slotted-code-block-collapse) * var(--_line) + var(--_inset-block));-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--_visible) - var(--_line)),transparent var(--_visible));mask-image:linear-gradient(to bottom,#000 calc(var(--_visible) - var(--_line)),transparent var(--_visible));max-block-size:var(--_visible);overflow-y:hidden}[data-ui=code-block]>[data-part=reveal]{appearance:none;background:none;border:0;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_edge);color:var(--slotted-tone-accent-text, LinkText);cursor:pointer;font-family:var(--slotted-font-family-sans, inherit);font-size:var(--slotted-font-size-sm, .8125rem);font-weight:var(--slotted-font-weight-medium, 500);min-block-size:var(--slotted-control-height-sm, 30px);padding-block:0;padding-inline:var(--_inset-inline);text-align:start;transition:background-color var(--_duration) var(--_easing)}[data-ui=code-block]>[data-part=reveal]:focus-visible{border-end-end-radius:var(--_radius);border-end-start-radius:var(--_radius);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=code-block]>[data-part=reveal]:enabled:hover{background-color:var(--slotted-tone-accent-subtle-hover, ButtonFace)}[data-ui=code-block]>[data-part=reveal]:enabled:active{background-color:var(--slotted-tone-accent-subtle-active, ButtonFace)}[data-ui=code-block][data-loading] [data-part=code]{gap:var(--slotted-space-3, .375rem);padding-inline:var(--_inset-inline)}[data-ui=code-block][data-loading] [data-part=code]>[data-ui=skeleton]{block-size:var(--_font-size)}@media(prefers-reduced-motion:reduce){[data-ui=code-block] [data-part=line][data-dim]{filter:none}}@media(forced-colors:active){[data-ui=code-block] [data-part=line][data-mark]{background-color:transparent}[data-ui=code-block] [data-part=line][data-dim]{color:inherit;filter:none}}@media print{[data-ui=code-block] [data-part=pre]{min-inline-size:0;overflow-wrap:anywhere;white-space:pre-wrap}[data-ui=code-block][data-collapse]>[data-part=body]>[data-part=viewport]{-webkit-mask-image:none;mask-image:none;max-block-size:none}[data-ui=code-block]>[data-part=reveal],[data-ui=code-block] [data-part=wrap]{display:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], tokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "tokens", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], lineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineNumbers", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }], marks: [{ type: i0.Input, args: [{ isSignal: true, alias: "marks", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }, { type: i0.Output, args: ["wrapChange"] }], defaultWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultWrap", required: false }] }], collapseAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAfter", required: false }] }], revealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealed", required: false }] }, { type: i0.Output, args: ["revealedChange"] }], defaultRevealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultRevealed", required: false }] }], maxLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLines", required: false }] }], copy: [{ type: i0.Input, args: [{ isSignal: true, alias: "copy", required: false }] }], copyRemoved: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyRemoved", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], tabSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabSize", required: false }] }], wrapChangeRequest: [{ type: i0.Output, args: ["wrapChangeRequest"] }], revealedChangeRequest: [{ type: i0.Output, args: ["revealedChangeRequest"] }], copyRequest: [{ type: i0.Output, args: ["copyRequest"] }], highlightError: [{ type: i0.Output, args: ["highlightError"] }], body: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], lineTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlCodeBlockLine), { isSignal: true }] }], action: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlCodeBlockAction), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CODE_BLOCK_DEFAULTS_TOKEN, SlCodeBlock, SlCodeBlockAction, SlCodeBlockLine, injectCodeBlockDefaults, provideCodeBlockDefaults };
+//# sourceMappingURL=slotted-angular-code-block.mjs.map