@quandis/qbo4.configuration 4.0.1-CI-20241007-232230 → 4.0.1-CI-20241009-155903

package/src/qbo-template.js

@@ -1,35 +1,35 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { indentWithTab } from "@codemirror/commands";
-import { html as htmlcode } from "@codemirror/lang-html";
-import { EditorView, keymap } from "@codemirror/view";
-import { basicSetup } from "codemirror";
-import { LitElement, css, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { configurationCss } from './styles.js';
-const scriptCache = {};
-export const templates = new Map();
-export function template(prefix) {
-    return (target, propertyKey) => {
-        const key = target.prefix ?? target.constructor?.name;
-        if (!key)
-            return console.error('Template prefix and constructor name not defined.', target, propertyKey);
-        const map = templates.get(key) || new Map();
-        map.set(prefix ?? propertyKey, target[propertyKey]);
-        templates.set(key, map);
-    };
-}
-export const QboTemplateMixin = (superClass) => {
-    class QboTemplateClass extends superClass {
-        static { this.styles = [
-            configurationCss,
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { indentWithTab } from "@codemirror/commands";
+import { html as htmlcode } from "@codemirror/lang-html";
+import { EditorView, keymap } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { configurationCss } from './styles.js';
+const scriptCache = {};
+export const templates = new Map();
+export function template(prefix) {
+    return (target, propertyKey) => {
+        const key = target.prefix ?? target.constructor?.name;
+        if (!key)
+            return console.error('Template prefix and constructor name not defined.', target, propertyKey);
+        const map = templates.get(key) || new Map();
+        map.set(prefix ?? propertyKey, target[propertyKey]);
+        templates.set(key, map);
+    };
+}
+export const QboTemplateMixin = (superClass) => {
+    class QboTemplateClass extends superClass {
+        static { this.styles = [
+            configurationCss,
             css `
 :host {
     display: block;
@@ -45,267 +45,267 @@ input.working {
     background-color: #f3f3f3;
     cursor: wait;
 }
-`
-        ]; }
-        constructor(...args) {
-            super(...args);
-            this.dragging = false;
-            this.resizing = false;
-            this.offsetX = 0;
-            this.offsetY = 0;
-            this.startWidth = 0;
-            this.startHeight = 0;
-            this.regex = /`(.*?)`/s;
-            // when true, the editor will show the error class
-            this.editorError = null;
-            this.type = null;
-            this.editing = false;
-            this.defaultTemplate = (component) => html `<span>Template matching ${component.type} not defined</span>`;
-            this.templateEndpoint = '/configuration/template';
-            this.prefix = null;
-            this.map = undefined;
-            this.editor = null;
-            this.editorType = this.type;
-            this.editorCoding = false;
-        }
-        async connectedCallback() {
-            super.connectedCallback();
-            this.prefix ??= this.constructor.name;
-            // Ensure we have a map for this class
-            if (!templates.has(this.prefix)) {
-                templates.set(this.prefix, new Map());
-            }
-            ;
-            this.map = templates.get(this.prefix);
-            if (this.map === undefined)
-                console.error(`The prefix ${this.prefix} is not defined in the templates map.`);
-            // Don't bother with the API call if we already have the template.
-            if (this.map && this.type && !this.map.has(this.type)) {
-                await this.loadScript(this.prefix);
-            }
-            this.addEventListener('dblclick', this.requestEdit.bind(this));
-            this.shadowRoot?.addEventListener('mousedown', this._onMouseDown.bind(this));
-            this.shadowRoot?.addEventListener('mousedown', this._onResizeMouseDown.bind(this), true);
-            window.addEventListener('mousemove', this._onMouseMove.bind(this));
-            window.addEventListener('mouseup', this._onMouseUp.bind(this));
-        }
-        async disconnectedCallback() {
-            this.removeEventListener('dblclick', this.requestEdit.bind(this));
-            this.shadowRoot?.removeEventListener('mousedown', this._onMouseDown.bind(this));
-            this.shadowRoot?.removeEventListener('mousedown', this._onResizeMouseDown.bind(this), true);
-            window.removeEventListener('mousemove', this._onMouseMove.bind(this));
-            window.removeEventListener('mouseup', this._onMouseUp.bind(this));
-        }
-        _onMouseDown(event) {
-            const editor = this.shadowRoot?.querySelector('.qbo-code');
-            if (!editor || !event.target.closest('.qbo-code header'))
-                return;
-            // Ensure that the editor has a defined position
-            const computedStyle = window.getComputedStyle(editor);
-            editor.style.left = computedStyle.left === 'auto' ? `${editor.getBoundingClientRect().left}px` : computedStyle.left;
-            editor.style.top = computedStyle.top === 'auto' ? `${editor.getBoundingClientRect().top}px` : computedStyle.top;
-            this.dragging = true;
-            this.offsetX = event.clientX - parseFloat(computedStyle.left || '0');
-            this.offsetY = event.clientY - parseFloat(computedStyle.top || '0');
-        }
-        _onResizeMouseDown(event) {
-            if (!event.target.closest('.qbo-code .resize-handle'))
-                return;
-            this.resizing = true;
-            const editor = this.shadowRoot?.querySelector('.qbo-code');
-            if (editor) {
-                this.startWidth = editor.offsetWidth;
-                this.startHeight = editor.offsetHeight;
-                this.offsetX = event.clientX;
-                this.offsetY = event.clientY;
-            }
-        }
-        _onMouseMove(event) {
-            if (this.dragging) {
-                const editor = this.shadowRoot?.querySelector('.qbo-code');
-                if (editor) {
-                    const x = event.clientX - this.offsetX;
-                    const y = event.clientY - this.offsetY;
-                    editor.style.left = `${x}px`;
-                    editor.style.top = `${y}px`;
-                }
-            }
-            else if (this.resizing) {
-                const editor = this.shadowRoot?.querySelector('.qbo-code');
-                if (editor) {
-                    editor.style.width = `${this.startWidth + (event.clientX - this.offsetX)}px`;
-                    editor.style.height = `${this.startHeight + (event.clientY - this.offsetY)}px`;
-                }
-            }
-        }
-        _onMouseUp() {
-            this.dragging = false;
-            this.resizing = false;
-        }
-        // Function to flatten JSON object keys for use in autocomplete
-        flattenObjectKeys(obj, prefix = '') {
-            return Object.keys(obj).reduce((res, k) => {
-                const pre = prefix.length ? `${prefix}.` : '';
-                if (typeof obj[k] === 'object' && obj[k] !== null) {
-                    res = res.concat(this.flattenObjectKeys(obj[k], `${pre}${k}`));
-                }
-                else {
-                    res.push(`${pre}${k}`);
-                }
-                return res;
-            }, []);
-        }
-        // Function to flatten properties of a LitElement-derived component for use in autocomplete
-        flattenComponentKeys(component) {
-            const keys = [];
-            const proto = Object.getPrototypeOf(component);
-            // Use Reflect API to get metadata if available
-            const propertyKeys = Object.getOwnPropertyNames(proto);
-            propertyKeys.forEach((key) => {
-                if (key === 'constructor' || key.startsWith('_'))
-                    return; // Skip constructor and private fields
-                const metadata = Reflect.getMetadata('design:type', proto, key);
-                if (metadata) {
-                    if (typeof component[key] === 'object' && component[key] !== null) {
-                        keys.push(...this.flattenObjectKeys(component[key], key));
-                    }
-                    else {
-                        keys.push(key);
-                    }
-                }
-            });
-            return keys.map(key => ({ label: key, type: 'variable' }));
-        }
-        _isSerializable(value) {
-            if (typeof value === 'function' || typeof value === 'undefined') {
-                return false;
-            }
-            try {
-                JSON.stringify(value);
-            }
-            catch (error) {
-                return false;
-            }
-            return true;
-        }
-        getComponent() {
-            let json = {};
-            const ownProperties = new Set(Object.keys(this));
-            // Filter properties to exclude those defined by the base class
-            ownProperties.forEach(prop => {
-                if (prop.startsWith('_'))
-                    return;
-                if (prop === 'constructor'
-                    || prop === 'shadowRoot'
-                    || prop === 'renderOptions'
-                    || prop === 'renderRoot'
-                    || prop === 'editor'
-                    || typeof this[prop] === 'function')
-                    return;
-                json[prop] = this[prop];
-            });
-            return json;
-        }
-        async loadScript(prefix) {
-            if (!scriptCache[prefix]) {
-                scriptCache[prefix] = this.fetchScript(prefix);
-            }
-            try {
-                const scriptText = await scriptCache[prefix];
-                this.appendScriptToHead(scriptText);
-                console.log(`Template script for ${this.prefix} loaded and executed.`);
-                this.requestUpdate();
-            }
-            catch (error) {
-                console.error(`Template script for ${this.prefix} failed to load:`, error);
-            }
-        }
-        async fetchScript(prefix) {
-            const response = await fetch(`${this.templateEndpoint}/search/${prefix}`);
-            if (!response.ok) {
-                throw new Error(`Failed to fetch templates from: ${this.templateEndpoint}/search/${prefix}`);
-            }
-            return response.text();
-        }
-        appendScriptToHead(scriptText) {
-            const scriptElement = document.createElement('script');
-            scriptElement.type = 'text/javascript';
-            scriptElement.text = scriptText;
-            document.head.appendChild(scriptElement);
-        }
-        requestEdit(event) {
-            if (event.ctrlKey && this.closest('.qbo-design')) {
-                this.toggleEdit(!this.editing);
-            }
-        }
-        toggleEdit(editing) {
-            this.editing = editing;
-            if (!this.editing) {
-                this.testTemplate = undefined;
-                this.editor?.destroy();
-                this.editor = null;
-            }
-        }
-        // Creates a function from the user's input.
-        setTemplate(content) {
-            const test = new Function('component', `return qbo4.configuration.html\`${content}\``);
-            try {
-                test(this);
-                this.editorError = undefined;
-                this.testTemplate = test;
-            }
-            catch (e) {
-                this.editorError = e;
-                console.error(`Error rendering ${content}`, e);
-            }
-        }
-        // resets the template, ignoring the user's input.
-        resetTemplate(event) {
-            this.editorType = event.target.value;
-            if (this.map?.has(event.target.value))
-                this.testTemplate = this.map.get(event.target.value) ?? this.defaultTemplate;
-            let expression = '<span>Template not defined</span>';
-            if (this.testTemplate !== undefined) {
-                const matches = this.testTemplate.toString().match(this.regex);
-                if (matches) {
-                    expression = matches[1];
-                }
-            }
-            this.editor?.dispatch(this.editor.state.update({
-                changes: { from: 0, to: this.editor.state.doc.length, insert: expression }
-            }));
-        }
-        updated(changedProperties) {
-            super.update(changedProperties);
-            let expression = '<span>Template not defined</span>';
-            if (this.testTemplate !== undefined) {
-                const matches = this.testTemplate.toString().match(this.regex);
-                if (matches) {
-                    expression = matches[1];
-                }
-            }
-            if (this.editing) {
-                // const componentKeys = this.flattenComponentKeys(this);
-                // todo: create a custom autocomplete source 
-                this.editor ??= new EditorView({
-                    doc: expression,
-                    extensions: [
-                        basicSetup,
-                        htmlcode(),
-                        keymap.of([indentWithTab]),
-                        EditorView.updateListener.of((e) => {
-                            this.setTemplate(e.state.doc.toString());
-                            // this.dispatchEvent(new CustomEvent('change', { detail: { code: this.value } }));
-                        })
-                    ],
-                    parent: this.shadowRoot?.querySelector('div.editor')
-                    // parent: <DocumentFragment>this.shadowRoot,
-                });
-            }
-        }
-        edit() {
-            this.testTemplate ??= this.map?.get(this.type) ?? this.defaultTemplate;
-            const id = Math.random().toString(36).substring(2, 15);
+`
+        ]; }
+        constructor(...args) {
+            super(...args);
+            this.dragging = false;
+            this.resizing = false;
+            this.offsetX = 0;
+            this.offsetY = 0;
+            this.startWidth = 0;
+            this.startHeight = 0;
+            this.regex = /`(.*?)`/s;
+            // when true, the editor will show the error class
+            this.editorError = null;
+            this.type = null;
+            this.editing = false;
+            this.defaultTemplate = (component) => html `<span>Template matching ${component.type} not defined</span>`;
+            this.templateEndpoint = '/configuration/template';
+            this.prefix = null;
+            this.map = undefined;
+            this.editor = null;
+            this.editorType = this.type;
+            this.editorCoding = false;
+        }
+        async connectedCallback() {
+            super.connectedCallback();
+            this.prefix ??= this.constructor.name;
+            // Ensure we have a map for this class
+            if (!templates.has(this.prefix)) {
+                templates.set(this.prefix, new Map());
+            }
+            ;
+            this.map = templates.get(this.prefix);
+            if (this.map === undefined)
+                console.error(`The prefix ${this.prefix} is not defined in the templates map.`);
+            // Don't bother with the API call if we already have the template.
+            if (this.map && this.type && !this.map.has(this.type)) {
+                await this.loadScript(this.prefix);
+            }
+            this.addEventListener('dblclick', this.requestEdit.bind(this));
+            this.shadowRoot?.addEventListener('mousedown', this._onMouseDown.bind(this));
+            this.shadowRoot?.addEventListener('mousedown', this._onResizeMouseDown.bind(this), true);
+            window.addEventListener('mousemove', this._onMouseMove.bind(this));
+            window.addEventListener('mouseup', this._onMouseUp.bind(this));
+        }
+        async disconnectedCallback() {
+            this.removeEventListener('dblclick', this.requestEdit.bind(this));
+            this.shadowRoot?.removeEventListener('mousedown', this._onMouseDown.bind(this));
+            this.shadowRoot?.removeEventListener('mousedown', this._onResizeMouseDown.bind(this), true);
+            window.removeEventListener('mousemove', this._onMouseMove.bind(this));
+            window.removeEventListener('mouseup', this._onMouseUp.bind(this));
+        }
+        _onMouseDown(event) {
+            const editor = this.shadowRoot?.querySelector('.qbo-code');
+            if (!editor || !event.target.closest('.qbo-code header'))
+                return;
+            // Ensure that the editor has a defined position
+            const computedStyle = window.getComputedStyle(editor);
+            editor.style.left = computedStyle.left === 'auto' ? `${editor.getBoundingClientRect().left}px` : computedStyle.left;
+            editor.style.top = computedStyle.top === 'auto' ? `${editor.getBoundingClientRect().top}px` : computedStyle.top;
+            this.dragging = true;
+            this.offsetX = event.clientX - parseFloat(computedStyle.left || '0');
+            this.offsetY = event.clientY - parseFloat(computedStyle.top || '0');
+        }
+        _onResizeMouseDown(event) {
+            if (!event.target.closest('.qbo-code .resize-handle'))
+                return;
+            this.resizing = true;
+            const editor = this.shadowRoot?.querySelector('.qbo-code');
+            if (editor) {
+                this.startWidth = editor.offsetWidth;
+                this.startHeight = editor.offsetHeight;
+                this.offsetX = event.clientX;
+                this.offsetY = event.clientY;
+            }
+        }
+        _onMouseMove(event) {
+            if (this.dragging) {
+                const editor = this.shadowRoot?.querySelector('.qbo-code');
+                if (editor) {
+                    const x = event.clientX - this.offsetX;
+                    const y = event.clientY - this.offsetY;
+                    editor.style.left = `${x}px`;
+                    editor.style.top = `${y}px`;
+                }
+            }
+            else if (this.resizing) {
+                const editor = this.shadowRoot?.querySelector('.qbo-code');
+                if (editor) {
+                    editor.style.width = `${this.startWidth + (event.clientX - this.offsetX)}px`;
+                    editor.style.height = `${this.startHeight + (event.clientY - this.offsetY)}px`;
+                }
+            }
+        }
+        _onMouseUp() {
+            this.dragging = false;
+            this.resizing = false;
+        }
+        // Function to flatten JSON object keys for use in autocomplete
+        flattenObjectKeys(obj, prefix = '') {
+            return Object.keys(obj).reduce((res, k) => {
+                const pre = prefix.length ? `${prefix}.` : '';
+                if (typeof obj[k] === 'object' && obj[k] !== null) {
+                    res = res.concat(this.flattenObjectKeys(obj[k], `${pre}${k}`));
+                }
+                else {
+                    res.push(`${pre}${k}`);
+                }
+                return res;
+            }, []);
+        }
+        // Function to flatten properties of a LitElement-derived component for use in autocomplete
+        flattenComponentKeys(component) {
+            const keys = [];
+            const proto = Object.getPrototypeOf(component);
+            // Use Reflect API to get metadata if available
+            const propertyKeys = Object.getOwnPropertyNames(proto);
+            propertyKeys.forEach((key) => {
+                if (key === 'constructor' || key.startsWith('_'))
+                    return; // Skip constructor and private fields
+                const metadata = Reflect.getMetadata('design:type', proto, key);
+                if (metadata) {
+                    if (typeof component[key] === 'object' && component[key] !== null) {
+                        keys.push(...this.flattenObjectKeys(component[key], key));
+                    }
+                    else {
+                        keys.push(key);
+                    }
+                }
+            });
+            return keys.map(key => ({ label: key, type: 'variable' }));
+        }
+        _isSerializable(value) {
+            if (typeof value === 'function' || typeof value === 'undefined') {
+                return false;
+            }
+            try {
+                JSON.stringify(value);
+            }
+            catch (error) {
+                return false;
+            }
+            return true;
+        }
+        getComponent() {
+            let json = {};
+            const ownProperties = new Set(Object.keys(this));
+            // Filter properties to exclude those defined by the base class
+            ownProperties.forEach(prop => {
+                if (prop.startsWith('_'))
+                    return;
+                if (prop === 'constructor'
+                    || prop === 'shadowRoot'
+                    || prop === 'renderOptions'
+                    || prop === 'renderRoot'
+                    || prop === 'editor'
+                    || typeof this[prop] === 'function')
+                    return;
+                json[prop] = this[prop];
+            });
+            return json;
+        }
+        async loadScript(prefix) {
+            if (!scriptCache[prefix]) {
+                scriptCache[prefix] = this.fetchScript(prefix);
+            }
+            try {
+                const scriptText = await scriptCache[prefix];
+                this.appendScriptToHead(scriptText);
+                console.log(`Template script for ${this.prefix} loaded and executed.`);
+                this.requestUpdate();
+            }
+            catch (error) {
+                console.error(`Template script for ${this.prefix} failed to load:`, error);
+            }
+        }
+        async fetchScript(prefix) {
+            const response = await fetch(`${this.templateEndpoint}/search/${prefix}`);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch templates from: ${this.templateEndpoint}/search/${prefix}`);
+            }
+            return response.text();
+        }
+        appendScriptToHead(scriptText) {
+            const scriptElement = document.createElement('script');
+            scriptElement.type = 'text/javascript';
+            scriptElement.text = scriptText;
+            document.head.appendChild(scriptElement);
+        }
+        requestEdit(event) {
+            if (event.ctrlKey && this.closest('.qbo-design')) {
+                this.toggleEdit(!this.editing);
+            }
+        }
+        toggleEdit(editing) {
+            this.editing = editing;
+            if (!this.editing) {
+                this.testTemplate = undefined;
+                this.editor?.destroy();
+                this.editor = null;
+            }
+        }
+        // Creates a function from the user's input.
+        setTemplate(content) {
+            const test = new Function('component', `return qbo4.configuration.html\`${content}\``);
+            try {
+                test(this);
+                this.editorError = undefined;
+                this.testTemplate = test;
+            }
+            catch (e) {
+                this.editorError = e;
+                console.error(`Error rendering ${content}`, e);
+            }
+        }
+        // resets the template, ignoring the user's input.
+        resetTemplate(event) {
+            this.editorType = event.target.value;
+            if (this.map?.has(event.target.value))
+                this.testTemplate = this.map.get(event.target.value) ?? this.defaultTemplate;
+            let expression = '<span>Template not defined</span>';
+            if (this.testTemplate !== undefined) {
+                const matches = this.testTemplate.toString().match(this.regex);
+                if (matches) {
+                    expression = matches[1];
+                }
+            }
+            this.editor?.dispatch(this.editor.state.update({
+                changes: { from: 0, to: this.editor.state.doc.length, insert: expression }
+            }));
+        }
+        updated(changedProperties) {
+            super.update(changedProperties);
+            let expression = '<span>Template not defined</span>';
+            if (this.testTemplate !== undefined) {
+                const matches = this.testTemplate.toString().match(this.regex);
+                if (matches) {
+                    expression = matches[1];
+                }
+            }
+            if (this.editing) {
+                // const componentKeys = this.flattenComponentKeys(this);
+                // todo: create a custom autocomplete source 
+                this.editor ??= new EditorView({
+                    doc: expression,
+                    extensions: [
+                        basicSetup,
+                        htmlcode(),
+                        keymap.of([indentWithTab]),
+                        EditorView.updateListener.of((e) => {
+                            this.setTemplate(e.state.doc.toString());
+                            // this.dispatchEvent(new CustomEvent('change', { detail: { code: this.value } }));
+                        })
+                    ],
+                    parent: this.shadowRoot?.querySelector('div.editor')
+                    // parent: <DocumentFragment>this.shadowRoot,
+                });
+            }
+        }
+        edit() {
+            this.testTemplate ??= this.map?.get(this.type) ?? this.defaultTemplate;
+            const id = Math.random().toString(36).substring(2, 15);
             return html `
 <dialog class="qbo-code" open>
     <header>
@@ -325,128 +325,128 @@ input.working {
         <button type="submit" @click=${this.save} ?disabled="${this.editorCoding}">Save</button> 
         <button type="reset" @click=${this.cancel} ?disabled="${this.editorCoding}">Cancel</button>
     </footer>
-</dialog>`;
-        }
-        cancel() {
-            this.toggleEdit(false);
-        }
-        async save() {
-            try {
-                if (this.editor == null)
-                    return;
-                const formData = new FormData();
-                formData.append('htmlTemplate', this.editor.state.doc.toString());
-                const response = await fetch(`${this.templateEndpoint}/save/${this.prefix}/${this.editorType}`, {
-                    method: 'POST',
-                    body: formData
-                });
-                if (response.ok) {
-                    this.map?.set(this.editorType, this.testTemplate);
-                    this.type = this.editorType;
-                    this.toggleEdit(false);
-                    return;
-                }
-                throw new Error(`Failed to save template: ${response.statusText}`);
-            }
-            catch (e) {
-                throw e;
-            }
-        }
-        async code(event) {
-            try {
-                if (this.editor == null)
-                    return;
-                this.editorCoding = true;
-                const prompt = event.target?.value;
-                const response = await fetch(`${this.templateEndpoint}/code`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        'HtmlTemplate': this.editor.state.doc.toString(),
-                        'Component': this.getComponent(),
-                        'Prompt': prompt
-                    })
-                });
-                this.editorCoding = false;
-                if (response.ok) {
-                    const html = await response.text();
-                    this.editor.dispatch({
-                        changes: { from: 0, to: this.editor.state.doc.length, insert: html }
-                    });
-                    return;
-                }
-                else
-                    throw new Error(`Failed to generate code: ${response.statusText}`);
-            }
-            catch (e) {
-                this.editorCoding = false;
-                throw e;
-            }
-        }
-        render() {
-            let template = this.defaultTemplate;
-            if (this.type && this.prefix && !this.map?.has(this.type))
-                this.map = templates.get(this.prefix);
-            if (this.type && this.map?.has(this.type))
-                template = this.map.get(this.type);
-            return (this.editing)
-                ? html `${this.edit()}${this.testTemplate(this)}`
-                : template(this);
-            // return html`${this.editing ? this.edit() : html``}${this.editing ? this.testTemplate(this) : template(this)}`
-        }
-    }
-    __decorate([
-        property({ attribute: false }),
-        __metadata("design:type", Object)
-    ], QboTemplateClass.prototype, "editorError", void 0);
-    __decorate([
-        property(),
-        __metadata("design:type", Object)
-    ], QboTemplateClass.prototype, "type", void 0);
-    __decorate([
-        property(),
-        __metadata("design:type", Object)
-    ], QboTemplateClass.prototype, "editing", void 0);
-    __decorate([
-        property({ attribute: false }),
-        __metadata("design:type", Function)
-    ], QboTemplateClass.prototype, "defaultTemplate", void 0);
-    __decorate([
-        property({ attribute: false }),
-        __metadata("design:type", Object)
-    ], QboTemplateClass.prototype, "testTemplate", void 0);
-    __decorate([
-        property(),
-        __metadata("design:type", Object)
-    ], QboTemplateClass.prototype, "templateEndpoint", void 0);
-    __decorate([
-        property(),
-        __metadata("design:type", Object)
-    ], QboTemplateClass.prototype, "prefix", void 0);
-    __decorate([
-        property({ attribute: false }),
-        __metadata("design:type", Object)
-    ], QboTemplateClass.prototype, "map", void 0);
-    __decorate([
-        property({ attribute: false }),
-        __metadata("design:type", Boolean)
-    ], QboTemplateClass.prototype, "editorCoding", void 0);
-    ;
-    return QboTemplateClass;
-};
-/**
-  * Renders a template defined in configuration.
-  *
-  * @remarks
-  * @param apiEndpoint - The API endpoint to fetch data from.
-  * @param method - The HTTP method to use when fetching data.
-  * @param error - Indicates whether an error occurred while fetching data.
-  */
-export const QboTemplate = QboTemplateMixin(LitElement);
-if (typeof window !== 'undefined') {
-    window.qbo4 = window.qbo4 || {};
-    window.qbo4.configuration = window.qbo4.configuration || {};
-    window.qbo4.configuration.templates = templates;
-    window.qbo4.configuration.html = html;
-}
+</dialog>`;
+        }
+        cancel() {
+            this.toggleEdit(false);
+        }
+        async save() {
+            try {
+                if (this.editor == null)
+                    return;
+                const formData = new FormData();
+                formData.append('htmlTemplate', this.editor.state.doc.toString());
+                const response = await fetch(`${this.templateEndpoint}/save/${this.prefix}/${this.editorType}`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (response.ok) {
+                    this.map?.set(this.editorType, this.testTemplate);
+                    this.type = this.editorType;
+                    this.toggleEdit(false);
+                    return;
+                }
+                throw new Error(`Failed to save template: ${response.statusText}`);
+            }
+            catch (e) {
+                throw e;
+            }
+        }
+        async code(event) {
+            try {
+                if (this.editor == null)
+                    return;
+                this.editorCoding = true;
+                const prompt = event.target?.value;
+                const response = await fetch(`${this.templateEndpoint}/code`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        'HtmlTemplate': this.editor.state.doc.toString(),
+                        'Component': this.getComponent(),
+                        'Prompt': prompt
+                    })
+                });
+                this.editorCoding = false;
+                if (response.ok) {
+                    const html = await response.text();
+                    this.editor.dispatch({
+                        changes: { from: 0, to: this.editor.state.doc.length, insert: html }
+                    });
+                    return;
+                }
+                else
+                    throw new Error(`Failed to generate code: ${response.statusText}`);
+            }
+            catch (e) {
+                this.editorCoding = false;
+                throw e;
+            }
+        }
+        render() {
+            let template = this.defaultTemplate;
+            if (this.type && this.prefix && !this.map?.has(this.type))
+                this.map = templates.get(this.prefix);
+            if (this.type && this.map?.has(this.type))
+                template = this.map.get(this.type);
+            return (this.editing)
+                ? html `${this.edit()}${this.testTemplate(this)}`
+                : template(this);
+            // return html`${this.editing ? this.edit() : html``}${this.editing ? this.testTemplate(this) : template(this)}`
+        }
+    }
+    __decorate([
+        property({ attribute: false }),
+        __metadata("design:type", Object)
+    ], QboTemplateClass.prototype, "editorError", void 0);
+    __decorate([
+        property(),
+        __metadata("design:type", Object)
+    ], QboTemplateClass.prototype, "type", void 0);
+    __decorate([
+        property(),
+        __metadata("design:type", Object)
+    ], QboTemplateClass.prototype, "editing", void 0);
+    __decorate([
+        property({ attribute: false }),
+        __metadata("design:type", Function)
+    ], QboTemplateClass.prototype, "defaultTemplate", void 0);
+    __decorate([
+        property({ attribute: false }),
+        __metadata("design:type", Object)
+    ], QboTemplateClass.prototype, "testTemplate", void 0);
+    __decorate([
+        property(),
+        __metadata("design:type", Object)
+    ], QboTemplateClass.prototype, "templateEndpoint", void 0);
+    __decorate([
+        property(),
+        __metadata("design:type", Object)
+    ], QboTemplateClass.prototype, "prefix", void 0);
+    __decorate([
+        property({ attribute: false }),
+        __metadata("design:type", Object)
+    ], QboTemplateClass.prototype, "map", void 0);
+    __decorate([
+        property({ attribute: false }),
+        __metadata("design:type", Boolean)
+    ], QboTemplateClass.prototype, "editorCoding", void 0);
+    ;
+    return QboTemplateClass;
+};
+/**
+  * Renders a template defined in configuration.
+  *
+  * @remarks
+  * @param apiEndpoint - The API endpoint to fetch data from.
+  * @param method - The HTTP method to use when fetching data.
+  * @param error - Indicates whether an error occurred while fetching data.
+  */
+export const QboTemplate = QboTemplateMixin(LitElement);
+if (typeof window !== 'undefined') {
+    window.qbo4 = window.qbo4 || {};
+    window.qbo4.configuration = window.qbo4.configuration || {};
+    window.qbo4.configuration.templates = templates;
+    window.qbo4.configuration.html = html;
+}
 //# sourceMappingURL=qbo-template.js.map