@fusion.dev/helix-headless 0.215.2 → 0.216.0

package/dist/code-editor/root/code-editor-root.js

@@ -0,0 +1,746 @@
+import { __decorate } from "tslib";
+import { AriaForwardController, customElement, drawIcon, formatWords, HelixFormElement, ListedController, MIRROR_RULE, MixinControllerValue, MixinField, numberConverter, onApple, restoreValue, stopPress, words, } from '@fusion.dev/helix-core';
+import { asterisk, caretDown, caretRight, caretUp, info, magnifyingGlass, textAa, textAUnderline, warning, x, xCircleFill, } from '@fusion.dev/helix-icons';
+import { nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { html } from 'lit/static-html.js';
+import '../../button/index.js';
+import '../../icon-button/index.js';
+import '../../toolbar/index.js';
+export const diagnosticLines = (value, diagnostics) => {
+    const starts = [0];
+    for (let at = value.indexOf('\n'); at !== -1; at = value.indexOf('\n', at + 1)) {
+        starts.push(at + 1);
+    }
+    return diagnostics.map((one) => {
+        const from = Math.max(0, one.from);
+        let low = 0;
+        let high = starts.length - 1;
+        while (low < high) {
+            const middle = (low + high + 1) >> 1;
+            if ((starts[middle] ?? 0) <= from) {
+                low = middle;
+            }
+            else {
+                high = middle - 1;
+            }
+        }
+        return low + 1;
+    });
+};
+const ENGINE_KEYS = [
+    'diagnostics',
+    'label',
+    'language',
+    'lineNumbers',
+    'placeholder',
+    'readOnly',
+    'value',
+    'wrap',
+];
+const typeText = (control, text) => {
+    const typed = typeof document.execCommand === 'function' && document.execCommand('insertText', false, text);
+    if (!typed) {
+        control.setRangeText(text, control.selectionStart, control.selectionEnd, 'end');
+        control.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    }
+};
+export const positionOf = (value, at) => {
+    const before = value.slice(0, Math.max(0, at));
+    return {
+        column: before.length - before.lastIndexOf('\n'),
+        line: before.split('\n').length,
+    };
+};
+const patternOf = (query) => {
+    const source = query.regex ? query.search : query.search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    try {
+        return new RegExp(query.wholeWord ? `\\b(?:${source})\\b` : source, query.caseSensitive ? 'gu' : 'giu');
+    }
+    catch {
+        return undefined;
+    }
+};
+export const findRanges = (text, query) => {
+    const pattern = query.search === '' ? undefined : patternOf(query);
+    if (!pattern) {
+        return [];
+    }
+    return [...text.matchAll(pattern)]
+        .filter((match) => match[0] !== '')
+        .map((match) => [match.index, match.index + match[0].length]);
+};
+const LANGUAGE_NAMES = {
+    bash: 'Shell',
+    css: 'CSS',
+    htm: 'HTML',
+    html: 'HTML',
+    javascript: 'JavaScript',
+    js: 'JavaScript',
+    json: 'JSON',
+    jsx: 'JSX',
+    markdown: 'Markdown',
+    md: 'Markdown',
+    py: 'Python',
+    python: 'Python',
+    rs: 'Rust',
+    rust: 'Rust',
+    sh: 'Shell',
+    shell: 'Shell',
+    ts: 'TypeScript',
+    tsx: 'TSX',
+    typescript: 'TypeScript',
+};
+let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControllerValue(MixinField(HelixFormElement)) {
+    constructor() {
+        super(...arguments);
+        this.listed = new ListedController(this, 'focus', () => this.internals?.ariaKeyShortcuts);
+        this.aria = new AriaForwardController(this, {
+            target: () => this.partNamed('control'),
+        });
+        this.announcesInput = true;
+        this.controlsLabel = 'Editor controls';
+        this.diagnosticLabel = 'Line {line}: {message}';
+        this.diagnostics = [];
+        this.diagnosticsLabel = 'Problems';
+        this.engine = undefined;
+        this.findCloseLabel = 'Close find';
+        this.findControlsLabel = 'Find controls';
+        this.findInvalidLabel = 'Not a valid regular expression';
+        this.findLabel = 'Find';
+        this.findMatchCaseLabel = 'Match case';
+        this.findNextLabel = 'Next match';
+        this.findPreviousLabel = 'Previous match';
+        this.findRegexLabel = 'Use regular expression';
+        this.findReplaceLabel = 'Find and replace';
+        this.findWholeWordLabel = 'Match whole word';
+        this.language = '';
+        this.lineNumbers = false;
+        this.matchesLabel = '{count, plural, =0 {No matches} one {{index} of # match} other {{index} of # matches}}';
+        this.placeholder = '';
+        this.positionLabel = 'Line {line}, column {column}';
+        this.problemsLabel = '{count, plural, =0 {No problems} one {# problem} other {# problems}}';
+        this.readOnly = false;
+        this.replaceAllLabel = 'Replace all';
+        this.replaceLabel = 'Replace';
+        this.replaceWithLabel = 'Replace with';
+        this.rows = 8;
+        this.wrap = false;
+        this.caret = 0;
+        this.findOpen = false;
+        this.found = undefined;
+        this.replaceOpen = false;
+        this.query = {
+            caseSensitive: false,
+            regex: false,
+            replace: '',
+            search: '',
+            wholeWord: false,
+        };
+        this.escaped = false;
+        this.engineEdited = false;
+        this.handleViewFocusOut = (event) => {
+            const view = event.currentTarget;
+            if (this.engineEdited && !view.contains(event.relatedTarget)) {
+                this.engineEdited = false;
+                this.announceChange();
+            }
+        };
+        this.handleKeys = (event) => {
+            const mod = onApple() ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+            if (mod && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'f') {
+                event.preventDefault();
+                event.stopPropagation();
+                void this.openFind();
+            }
+        };
+        this.handleFindInput = (event) => {
+            this.query = { ...this.query, search: event.target.value };
+            this.search('first');
+        };
+        this.handleReplaceInput = (event) => {
+            this.query = { ...this.query, replace: event.target.value };
+        };
+        this.handleFindKeys = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closeFind();
+            }
+            else if (event.key === 'Enter') {
+                event.preventDefault();
+                if (event.target.getAttribute('part') === 'replace-field') {
+                    this.replace(event.metaKey || event.ctrlKey);
+                }
+                else {
+                    this.search(event.shiftKey ? 'previous' : 'next');
+                }
+            }
+        };
+        this.handleInput = (event) => {
+            event.stopPropagation();
+            const control = event.target;
+            this.requestValue(control.value);
+            restoreValue(control, this.value);
+            this.caret = control.selectionStart;
+        };
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            this.announceChange();
+        };
+        this.handleCaret = (event) => {
+            this.caret = event.target.selectionStart;
+        };
+        this.handleKeydown = (event) => {
+            if (event.key === 'Escape') {
+                this.escaped = true;
+                return;
+            }
+            if (event.key === 'Tab' && !event.shiftKey && !this.escaped && !this.readOnly) {
+                event.preventDefault();
+                typeText(event.target, '  ');
+            }
+            this.escaped = false;
+        };
+    }
+    static { this.markRules = [MIRROR_RULE]; }
+    static { this.words = 'helix-code-editor'; }
+    get control() {
+        return this.partNamed('control');
+    }
+    get engineState() {
+        return {
+            diagnostics: this.diagnostics,
+            label: this.label,
+            language: this.language,
+            lineNumbers: this.lineNumbers,
+            placeholder: this.placeholder,
+            readOnly: this.readOnly,
+            value: this.value,
+            wrap: this.wrap,
+        };
+    }
+    get readable() {
+        return this.query.search === '' || patternOf(this.query) !== undefined;
+    }
+    focus(options) {
+        if (this.view?.focus) {
+            this.view.focus();
+            return;
+        }
+        this.control?.focus(options);
+    }
+    select(from, to = from) {
+        if (this.view?.select) {
+            this.view.select(from, to);
+        }
+        else {
+            const control = this.control;
+            control?.focus();
+            control?.setSelectionRange(from, to);
+        }
+        this.caret = from;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeys);
+        if (this.hasUpdated && this.engine && !this.view) {
+            this.requestUpdate();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleKeys);
+        this.view?.destroy();
+        this.view = undefined;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.internals.setFormValue(this.value);
+        const control = this.control;
+        if (control) {
+            this.copyValidity(control);
+            const anchor = this.view
+                ? this.partNamed('view')?.querySelector('[contenteditable]')
+                : undefined;
+            if (anchor && !control.validity.valid) {
+                this.internals.setValidity(control.validity, this.internals.validationMessage, anchor);
+            }
+            this.refreshFeedback();
+        }
+        this.toggleState('find-open', this.findOpen);
+        this.toggleState('replace-open', this.findOpen && this.replaceOpen && !this.readOnly);
+        const mount = this.partNamed('view');
+        if (changed.has('engine') || (this.engine && !this.view && mount)) {
+            this.view?.destroy();
+            this.view = undefined;
+            if (this.engine && mount && this.isConnected) {
+                this.view = this.engine.mount(mount, this.engineState, {
+                    caret: (from) => {
+                        this.caret = from;
+                    },
+                    change: (next) => this.engineChanged(next),
+                });
+            }
+            this.engineValue = this.view ? this.value : undefined;
+            this.toggleState('connected', this.view !== undefined);
+            return;
+        }
+        const drawn = ENGINE_KEYS.filter((key) => changed.has(key));
+        if (this.view &&
+            drawn.length > 0 &&
+            !(drawn.length === 1 && drawn[0] === 'value' && this.value === this.engineValue)) {
+            this.engineValue = this.value;
+            this.view.update(this.engineState);
+        }
+    }
+    engineChanged(next) {
+        if (!this.requestValue(next)) {
+            return false;
+        }
+        this.engineValue = next;
+        this.engineEdited = true;
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        return true;
+    }
+    async openFind() {
+        const control = this.control;
+        if (!this.view && control && control.selectionEnd > control.selectionStart) {
+            const selected = control.value.slice(control.selectionStart, control.selectionEnd);
+            if (!selected.includes('\n')) {
+                this.query = { ...this.query, search: selected };
+            }
+        }
+        this.findOpen = true;
+        await this.updateComplete;
+        const field = this.partNamed('find-field');
+        field?.focus();
+        field?.select();
+        if (this.query.search !== '') {
+            this.search('first');
+        }
+    }
+    closeFind() {
+        this.findOpen = false;
+        this.found = undefined;
+        this.view?.findEnd?.();
+        this.focus();
+    }
+    search(direction) {
+        if (this.query.search === '' || !this.readable) {
+            this.found = undefined;
+            this.view?.findEnd?.();
+            return;
+        }
+        if (this.view?.find) {
+            this.found = this.view.find(this.query, direction);
+            return;
+        }
+        const control = this.control;
+        const ranges = findRanges(this.value, this.query);
+        if (!control || ranges.length === 0) {
+            this.found = { count: ranges.length, index: -1 };
+            return;
+        }
+        const at = direction === 'first' ? control.selectionStart : control.selectionEnd;
+        let index = direction === 'previous'
+            ? ranges.findLastIndex(([from]) => from < control.selectionStart)
+            : ranges.findIndex(([from]) => from >= at);
+        if (index === -1) {
+            index = direction === 'previous' ? ranges.length - 1 : 0;
+        }
+        const [from, to] = ranges[index] ?? [0, 0];
+        control.setSelectionRange(from, to);
+        this.caret = from;
+        this.found = { count: ranges.length, index };
+    }
+    replace(all) {
+        if (this.readOnly || this.query.search === '' || !this.readable) {
+            return;
+        }
+        if (this.view?.replace) {
+            this.found = this.view.replace(this.query, all);
+            return;
+        }
+        const control = this.control;
+        const pattern = patternOf(this.query);
+        if (!control || !pattern) {
+            return;
+        }
+        if (all) {
+            this.requestValue(this.value.replace(pattern, this.query.replace));
+        }
+        else {
+            const selected = findRanges(this.value, this.query).find(([from, to]) => from === control.selectionStart && to === control.selectionEnd);
+            if (!selected) {
+                this.search('next');
+                return;
+            }
+            const [from, to] = selected;
+            const one = new RegExp(pattern.source, pattern.flags.replace('g', ''));
+            const replaced = this.value.slice(from, to).replace(one, this.query.replace);
+            this.requestValue(this.value.slice(0, from) + replaced + this.value.slice(to));
+            restoreValue(control, this.value);
+            control.setSelectionRange(from + replaced.length, from + replaced.length);
+        }
+        restoreValue(control, this.value);
+        this.search('next');
+    }
+    toggleOption(option) {
+        this.query = { ...this.query, [option]: !this.query[option] };
+        this.search('first');
+    }
+    get countText() {
+        if (!this.readable) {
+            return this.findInvalidLabel;
+        }
+        return this.found === undefined
+            ? ''
+            : formatWords(this, 'matchesLabel', {
+                count: this.found.count,
+                index: Math.max(this.found.index, 0) + 1,
+            });
+    }
+    renderHeader() {
+        const toolbar = this.tag('toolbar');
+        const button = this.tag('icon-button');
+        const language = LANGUAGE_NAMES[this.language.trim().toLowerCase()] ?? this.language;
+        return html `<div part="header">
+      ${this.renderLabel()}
+      ${language ? html `<span part="language">${language}</span>` : nothing}
+      <${toolbar} part="controls" exportparts="toolbar: controls-toolbar" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
+        <slot name="actions"></slot>
+        <${button}
+          part="find"
+          exportparts="button: find-button, live: find-live, spinner: find-spinner, text: find-text"
+          .expanded=${this.findOpen}
+          label=${this.findLabel}
+          @click=${() => (this.findOpen ? this.closeFind() : void this.openFind())}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(magnifyingGlass)}
+        </${button}>
+      </${toolbar}>
+    </div>`;
+    }
+    renderFind() {
+        const toolbar = this.tag('toolbar');
+        const button = this.tag('icon-button');
+        const textButton = this.tag('button');
+        const searchable = this.readable && (this.found?.count ?? 0) > 0;
+        const replacing = this.replaceOpen && !this.readOnly;
+        return html `<div part="find-bar" role="search" aria-label=${this.findLabel} ?hidden=${!this.findOpen}>
+      ${this.readOnly
+            ? nothing
+            : html `<${button}
+              part="find-replace"
+              exportparts="button: find-replace-button, live: find-replace-live, spinner: find-replace-spinner, text: find-replace-text"
+              .expanded=${replacing}
+              label=${this.findReplaceLabel}
+              @click=${() => {
+                this.replaceOpen = !this.replaceOpen;
+            }}
+              @helix-press=${stopPress}
+            >
+              ${replacing ? drawIcon(caretDown) : html `<span data-mirror>${drawIcon(caretRight)}</span>`}
+            </${button}>`}
+      <input
+        part="find-field"
+        aria-label=${this.findLabel}
+        aria-invalid=${this.readable ? nothing : 'true'}
+        autocomplete="off"
+        placeholder=${this.findLabel}
+        spellcheck="false"
+        type="search"
+        .value=${live(this.query.search)}
+        @input=${this.handleFindInput}
+        @keydown=${this.handleFindKeys}
+      />
+      <span part="find-count" role="status">${this.countText}</span>
+      <${toolbar} part="find-controls" exportparts="toolbar: find-controls-toolbar" exportparts="toolbar: find-controls-toolbar" label=${this.findControlsLabel}>
+        <${button}
+          part="find-match-case"
+          exportparts="button: find-match-case-button, live: find-match-case-live, spinner: find-match-case-spinner, text: find-match-case-text"
+          aria-pressed=${this.query.caseSensitive ? 'true' : 'false'}
+          label=${this.findMatchCaseLabel}
+          @click=${() => this.toggleOption('caseSensitive')}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(textAa)}
+        </${button}>
+        <${button}
+          part="find-whole-word"
+          exportparts="button: find-whole-word-button, live: find-whole-word-live, spinner: find-whole-word-spinner, text: find-whole-word-text"
+          aria-pressed=${this.query.wholeWord ? 'true' : 'false'}
+          label=${this.findWholeWordLabel}
+          @click=${() => this.toggleOption('wholeWord')}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(textAUnderline)}
+        </${button}>
+        <${button}
+          part="find-regex"
+          exportparts="button: find-regex-button, live: find-regex-live, spinner: find-regex-spinner, text: find-regex-text"
+          aria-pressed=${this.query.regex ? 'true' : 'false'}
+          label=${this.findRegexLabel}
+          @click=${() => this.toggleOption('regex')}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(asterisk)}
+        </${button}>
+        <${button}
+          part="find-previous"
+          exportparts="button: find-previous-button, live: find-previous-live, spinner: find-previous-spinner, text: find-previous-text"
+          ?disabled=${!searchable}
+          label=${this.findPreviousLabel}
+          @click=${() => this.search('previous')}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(caretUp)}
+        </${button}>
+        <${button}
+          part="find-next"
+          exportparts="button: find-next-button, live: find-next-live, spinner: find-next-spinner, text: find-next-text"
+          ?disabled=${!searchable}
+          label=${this.findNextLabel}
+          @click=${() => this.search('next')}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(caretDown)}
+        </${button}>
+        <${button}
+          part="find-close"
+          exportparts="button: find-close-button, live: find-close-live, spinner: find-close-spinner, text: find-close-text"
+          label=${this.findCloseLabel}
+          @click=${() => this.closeFind()}
+          @helix-press=${stopPress}
+        >
+          ${drawIcon(x)}
+        </${button}>
+      </${toolbar}>
+      ${!replacing
+            ? nothing
+            : html `<input
+              part="replace-field"
+              aria-label=${this.replaceWithLabel}
+              autocomplete="off"
+              placeholder=${this.replaceWithLabel}
+              spellcheck="false"
+              type="text"
+              .value=${live(this.query.replace)}
+              @input=${this.handleReplaceInput}
+              @keydown=${this.handleFindKeys}
+            />
+            <${textButton}
+              part="replace"
+              exportparts="button: replace-button, live: replace-live, spinner: replace-spinner, text: replace-text"
+              ?disabled=${!searchable}
+              @click=${() => this.replace(false)}
+              @helix-press=${stopPress}
+            >
+              ${this.replaceLabel}
+            </${textButton}>
+            <${textButton}
+              part="replace-all"
+              exportparts="button: replace-all-button, live: replace-all-live, spinner: replace-all-spinner, text: replace-all-text"
+              ?disabled=${!searchable}
+              @click=${() => this.replace(true)}
+              @helix-press=${stopPress}
+            >
+              ${this.replaceAllLabel}
+            </${textButton}>`}
+    </div>`;
+    }
+    renderDiagnostics() {
+        if (this.diagnostics.length === 0) {
+            return nothing;
+        }
+        const lines = diagnosticLines(this.value, this.diagnostics);
+        return html `<ul part="diagnostics" aria-label=${this.diagnosticsLabel}>
+      ${this.diagnostics.map((one, index) => {
+            const words = formatWords(this, 'diagnosticLabel', {
+                line: lines[index] ?? 1,
+                message: one.message,
+            });
+            const go = () => this.select(one.from, one.to);
+            if (one.tone === 'warning') {
+                return html `<li><button part="diagnostic diagnostic-warning" type="button" @click=${go}>
+            <span part="diagnostic-icon" aria-hidden="true">${drawIcon(warning)}</span>${words}
+          </button></li>`;
+            }
+            if (one.tone === 'info') {
+                return html `<li><button part="diagnostic diagnostic-info" type="button" @click=${go}>
+            <span part="diagnostic-icon" aria-hidden="true">${drawIcon(info)}</span>${words}
+          </button></li>`;
+            }
+            return html `<li><button part="diagnostic diagnostic-danger" type="button" @click=${go}>
+          <span part="diagnostic-icon" aria-hidden="true">${drawIcon(xCircleFill)}</span>${words}
+        </button></li>`;
+        })}
+    </ul>`;
+    }
+    renderStatus() {
+        const { column, line } = positionOf(this.value, this.caret);
+        return html `<div part="status">
+      <span part="position">${formatWords(this, 'positionLabel', { column, line })}</span>
+      <span part="problem-count">${formatWords(this, 'problemsLabel', { count: this.diagnostics.length })}</span>
+    </div>`;
+    }
+    render() {
+        return html `<div part="field">
+        ${this.renderHeader()}${this.renderFind()}
+        <div part="body">
+          <textarea
+            part="control"
+            id=${this.controlId}
+            .value=${this.value}
+            name=${this.name || nothing}
+            placeholder=${this.placeholder || nothing}
+            rows=${this.rows}
+            spellcheck="false"
+            autocapitalize="off"
+            translate="no"
+            wrap=${this.wrap ? 'soft' : 'off'}
+            aria-describedby=${this.describedBy ?? nothing}
+            aria-invalid=${this.invalidity ?? nothing}
+            ?disabled=${this.isDisabled}
+            ?hidden=${this.engine !== undefined}
+            ?readonly=${this.readOnly}
+            ?required=${this.required}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @keydown=${this.handleKeydown}
+            @keyup=${this.handleCaret}
+            @pointerup=${this.handleCaret}
+            @select=${this.handleCaret}
+          ></textarea>
+          <div part="view" ?hidden=${!this.engine} @focusout=${this.handleViewFocusOut}></div>
+        </div>
+        ${this.renderDiagnostics()}${this.renderStatus()}
+      </div>
+      ${this.renderHint()}${this.renderFeedback()}`;
+    }
+};
+__decorate([
+    words,
+    property({ attribute: 'controls-label' })
+], HelixHeadlessCodeEditor.prototype, "controlsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'diagnostic-label' })
+], HelixHeadlessCodeEditor.prototype, "diagnosticLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCodeEditor.prototype, "diagnostics", void 0);
+__decorate([
+    words,
+    property({ attribute: 'diagnostics-label' })
+], HelixHeadlessCodeEditor.prototype, "diagnosticsLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCodeEditor.prototype, "engine", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-close-label' })
+], HelixHeadlessCodeEditor.prototype, "findCloseLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-controls-label' })
+], HelixHeadlessCodeEditor.prototype, "findControlsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-invalid-label' })
+], HelixHeadlessCodeEditor.prototype, "findInvalidLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-label' })
+], HelixHeadlessCodeEditor.prototype, "findLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-match-case-label' })
+], HelixHeadlessCodeEditor.prototype, "findMatchCaseLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-next-label' })
+], HelixHeadlessCodeEditor.prototype, "findNextLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-previous-label' })
+], HelixHeadlessCodeEditor.prototype, "findPreviousLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-regex-label' })
+], HelixHeadlessCodeEditor.prototype, "findRegexLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-replace-label' })
+], HelixHeadlessCodeEditor.prototype, "findReplaceLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'find-whole-word-label' })
+], HelixHeadlessCodeEditor.prototype, "findWholeWordLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCodeEditor.prototype, "language", void 0);
+__decorate([
+    property({ attribute: 'line-numbers', type: Boolean })
+], HelixHeadlessCodeEditor.prototype, "lineNumbers", void 0);
+__decorate([
+    words,
+    property({ attribute: 'matches-label' })
+], HelixHeadlessCodeEditor.prototype, "matchesLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCodeEditor.prototype, "placeholder", void 0);
+__decorate([
+    words,
+    property({ attribute: 'position-label' })
+], HelixHeadlessCodeEditor.prototype, "positionLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'problems-label' })
+], HelixHeadlessCodeEditor.prototype, "problemsLabel", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessCodeEditor.prototype, "readOnly", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-all-label' })
+], HelixHeadlessCodeEditor.prototype, "replaceAllLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-label' })
+], HelixHeadlessCodeEditor.prototype, "replaceLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'replace-with-label' })
+], HelixHeadlessCodeEditor.prototype, "replaceWithLabel", void 0);
+__decorate([
+    property({ converter: numberConverter('rows', 8) })
+], HelixHeadlessCodeEditor.prototype, "rows", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessCodeEditor.prototype, "wrap", void 0);
+__decorate([
+    state()
+], HelixHeadlessCodeEditor.prototype, "caret", void 0);
+__decorate([
+    state()
+], HelixHeadlessCodeEditor.prototype, "findOpen", void 0);
+__decorate([
+    state()
+], HelixHeadlessCodeEditor.prototype, "found", void 0);
+__decorate([
+    state()
+], HelixHeadlessCodeEditor.prototype, "replaceOpen", void 0);
+__decorate([
+    state()
+], HelixHeadlessCodeEditor.prototype, "query", void 0);
+HelixHeadlessCodeEditor = __decorate([
+    customElement('helix-headless-code-editor')
+], HelixHeadlessCodeEditor);
+export { HelixHeadlessCodeEditor };