@quandis/qbo4.configuration 4.0.1-CI-20241007-232230 → 4.0.1-CI-20241008-165825

package/src/qbo-css.js

@@ -1,195 +1,195 @@
-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 { LitElement, html, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { css as csscode } from "@codemirror/lang-css";
-import { basicSetup } from "codemirror";
-import { EditorView, keymap } from "@codemirror/view";
-import { indentWithTab } from "@codemirror/commands";
-import { configurationCss } from './styles.js';
-let QboCss = class QboCss extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.dragging = false;
-        this.resizing = false;
-        this.offsetX = 0;
-        this.offsetY = 0;
-        this.startWidth = 0;
-        this.startHeight = 0;
-        this.editorError = null;
-        this.editing = false;
-        this.storageKey = 'qbo-css';
-        this.customcss = '';
-        this.editorCoding = false;
-        this.templateEndpoint = '/configuration/css';
-        this.editor = null;
-        // editorType: string | null = this.type;
-        this.styleElement = null;
-    }
-    static { this.styles = [
-        configurationCss
-    ]; }
-    async connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', 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));
-        this.customcss = localStorage.getItem(this.storageKey) ?? '';
-    }
-    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) {
-        if (!event.target.closest('.qbo-code header'))
-            return;
-        this.dragging = true;
-        const editor = this.shadowRoot?.querySelector('.qbo-code');
-        if (editor) {
-            this.offsetX = event.clientX - editor.getBoundingClientRect().left;
-            this.offsetY = event.clientY - editor.getBoundingClientRect().top;
-        }
-    }
-    _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');
-            const x = event.clientX - this.offsetX;
-            const y = event.clientY - this.offsetY;
-            if (editor) {
-                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;
-    }
-    requestEdit(event) {
-        if (event.composedPath().some((target) => {
-            return target instanceof Element && target.classList.contains('qbo-code');
-        }))
-            return;
-        if (!this.editing && event.target.closest('.qbo-design'))
-            this.toggleEdit(true);
-    }
-    toggleEdit(editing) {
-        this.editing = editing;
-        if (!this.editing) {
-            this.editor?.destroy();
-            this.editor = null;
-        }
-    }
-    cancel() {
-        this.setCss(this.customcss);
-        this.toggleEdit(false);
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        const style = document.createElement('style');
-        style.type = 'text/css';
-        style.appendChild(document.createTextNode(localStorage.getItem(this.storageKey) ?? ''));
-        document.head.appendChild(style);
-        this.styleElement = style;
-    }
-    updated(changedProperties) {
-        super.update(changedProperties);
-        if (this.editing) {
-            this.editor ??= new EditorView({
-                doc: this.styleElement?.textContent ?? '',
-                extensions: [
-                    basicSetup,
-                    csscode(),
-                    keymap.of([indentWithTab]),
-                    EditorView.updateListener.of((e) => {
-                        this.setCss(e.state.doc.toString());
-                    })
-                ],
-                parent: this.shadowRoot?.querySelector('div.editor')
-            });
-        }
-    }
-    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({
-                    'CssTemplate': 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;
-        }
-    }
-    save() {
-        this.toggleEdit(false);
-    }
-    // Creates a function from the user's input.
-    setCss(content) {
-        // const test = new Function('css', `return qbo4.configuration.html\`${content}\``) as TemplateFunction;
-        localStorage.setItem(this.storageKey, content);
-        if (this.styleElement == null)
-            return;
-        try {
-            this.styleElement.textContent = content;
-            this.editorError = undefined;
-        }
-        catch (e) {
-            this.editorError = e;
-            console.error(`Error rendering ${content}`, e);
-        }
-    }
-    edit() {
+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 { LitElement, html, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { css as csscode } from "@codemirror/lang-css";
+import { basicSetup } from "codemirror";
+import { EditorView, keymap } from "@codemirror/view";
+import { indentWithTab } from "@codemirror/commands";
+import { configurationCss } from './styles.js';
+let QboCss = class QboCss extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dragging = false;
+        this.resizing = false;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.startWidth = 0;
+        this.startHeight = 0;
+        this.editorError = null;
+        this.editing = false;
+        this.storageKey = 'qbo-css';
+        this.customcss = '';
+        this.editorCoding = false;
+        this.templateEndpoint = '/configuration/css';
+        this.editor = null;
+        // editorType: string | null = this.type;
+        this.styleElement = null;
+    }
+    static { this.styles = [
+        configurationCss
+    ]; }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', 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));
+        this.customcss = localStorage.getItem(this.storageKey) ?? '';
+    }
+    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) {
+        if (!event.target.closest('.qbo-code header'))
+            return;
+        this.dragging = true;
+        const editor = this.shadowRoot?.querySelector('.qbo-code');
+        if (editor) {
+            this.offsetX = event.clientX - editor.getBoundingClientRect().left;
+            this.offsetY = event.clientY - editor.getBoundingClientRect().top;
+        }
+    }
+    _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');
+            const x = event.clientX - this.offsetX;
+            const y = event.clientY - this.offsetY;
+            if (editor) {
+                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;
+    }
+    requestEdit(event) {
+        if (event.composedPath().some((target) => {
+            return target instanceof Element && target.classList.contains('qbo-code');
+        }))
+            return;
+        if (!this.editing && event.target.closest('.qbo-design'))
+            this.toggleEdit(true);
+    }
+    toggleEdit(editing) {
+        this.editing = editing;
+        if (!this.editing) {
+            this.editor?.destroy();
+            this.editor = null;
+        }
+    }
+    cancel() {
+        this.setCss(this.customcss);
+        this.toggleEdit(false);
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.appendChild(document.createTextNode(localStorage.getItem(this.storageKey) ?? ''));
+        document.head.appendChild(style);
+        this.styleElement = style;
+    }
+    updated(changedProperties) {
+        super.update(changedProperties);
+        if (this.editing) {
+            this.editor ??= new EditorView({
+                doc: this.styleElement?.textContent ?? '',
+                extensions: [
+                    basicSetup,
+                    csscode(),
+                    keymap.of([indentWithTab]),
+                    EditorView.updateListener.of((e) => {
+                        this.setCss(e.state.doc.toString());
+                    })
+                ],
+                parent: this.shadowRoot?.querySelector('div.editor')
+            });
+        }
+    }
+    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({
+                    'CssTemplate': 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;
+        }
+    }
+    save() {
+        this.toggleEdit(false);
+    }
+    // Creates a function from the user's input.
+    setCss(content) {
+        // const test = new Function('css', `return qbo4.configuration.html\`${content}\``) as TemplateFunction;
+        localStorage.setItem(this.storageKey, content);
+        if (this.styleElement == null)
+            return;
+        try {
+            this.styleElement.textContent = content;
+            this.editorError = undefined;
+        }
+        catch (e) {
+            this.editorError = e;
+            console.error(`Error rendering ${content}`, e);
+        }
+    }
+    edit() {
         return html `
 <dialog class="qbo-code" open>
     <header>
@@ -204,38 +204,38 @@ let QboCss = class QboCss extends LitElement {
         <button type="submit" @click=${this.save}>Save</button>
         <button type="reset" @click=${this.cancel}>Cancel</button>
     </footer>
-</dialog>`;
-    }
-    render() {
-        return html `${(this.editing) ? this.edit() : html ``}<slot>css edit</slot>`;
-    }
-};
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Object)
-], QboCss.prototype, "editorError", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Object)
-], QboCss.prototype, "editing", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", String)
-], QboCss.prototype, "storageKey", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", String)
-], QboCss.prototype, "customcss", void 0);
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Boolean)
-], QboCss.prototype, "editorCoding", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Object)
-], QboCss.prototype, "templateEndpoint", void 0);
-QboCss = __decorate([
-    customElement('qbo-css')
-], QboCss);
-export { QboCss };
+</dialog>`;
+    }
+    render() {
+        return html `${(this.editing) ? this.edit() : html ``}<slot>css edit</slot>`;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], QboCss.prototype, "editorError", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboCss.prototype, "editing", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboCss.prototype, "storageKey", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboCss.prototype, "customcss", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Boolean)
+], QboCss.prototype, "editorCoding", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboCss.prototype, "templateEndpoint", void 0);
+QboCss = __decorate([
+    customElement('qbo-css')
+], QboCss);
+export { QboCss };
 //# sourceMappingURL=qbo-css.js.map

package/src/qbo-template.d.ts

@@ -1,22 +1,22 @@
-import { LitElement, TemplateResult } from 'lit';
-export declare class ITemplate {
-    type: string;
-    map: Map<string, TemplateFunction> | undefined;
-    prefix: string;
-    templateEndpoint: string;
-}
-type Constructor<T = {}> = new (...args: any[]) => T;
-export type TemplateFunction = (component: any) => TemplateResult;
-export declare const templates: Map<string, Map<string, TemplateFunction>>;
-export declare function template(prefix: string | null): (target: any, propertyKey: string) => void;
-export declare const QboTemplateMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ITemplate> & T;
-/**
-  * 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 declare const QboTemplate: Constructor<ITemplate> & typeof LitElement;
-export {};
+import { LitElement, TemplateResult } from 'lit';
+export declare class ITemplate {
+    type: string;
+    map: Map<string, TemplateFunction> | undefined;
+    prefix: string;
+    templateEndpoint: string;
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export type TemplateFunction = (component: any) => TemplateResult;
+export declare const templates: Map<string, Map<string, TemplateFunction>>;
+export declare function template(prefix: string | null): (target: any, propertyKey: string) => void;
+export declare const QboTemplateMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ITemplate> & T;
+/**
+  * 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 declare const QboTemplate: Constructor<ITemplate> & typeof LitElement;
+export {};