@quandis/qbo4.configuration 4.0.1-CI-20240328-123132

package/src/qbo-config-editor.js

@@ -0,0 +1,107 @@
+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, css, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { JsonConfigurationSource } from './Configuration.js';
+export class QboConfigEditor extends LitElement {
+    static get formAssociated() {
+        return true;
+    }
+    // configSource = new JsonConfigurationSource({});
+    static { this.styles = css `
+    :host {
+      display: block;
+      padding: 16px;
+    }
+    .form-group {
+      margin-bottom: 10px;
+    }
+  `; }
+    constructor() {
+        super();
+        // @property({ type: Object })
+        this.configData = {};
+        // Use attachInternals() to get access to form internals
+        this._internals = this.attachInternals();
+    }
+    _handleInput(e) {
+        // Update the value on input events
+        this.value = e.target.value;
+        this._internals.setFormValue(this.value);
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        // check payload
+        if (this.value) {
+            this.configData = JSON.parse(this.value);
+        }
+    }
+    handleInputChange(key, event) {
+        event.preventDefault();
+        const target = event.target;
+        this.configData[key] = target.value;
+        this.requestUpdate();
+    }
+    updateConfigData(key, newValue, event, isKey = false) {
+        event.preventDefault();
+        if (isKey) {
+            const oldValue = this.configData[key];
+            delete this.configData[key];
+            this.configData[newValue] = oldValue;
+        }
+        else {
+            this.configData[key] = newValue;
+        }
+        this.requestUpdate();
+    }
+    addKeyValuePair(event) {
+        event.preventDefault();
+        const newKey = `newKey${Object.keys(this.configData).length}`;
+        this.configData[newKey] = 'newValue';
+        this.requestUpdate();
+    }
+    deleteKeyValuePair(key, event) {
+        event.preventDefault();
+        delete this.configData[key];
+        this.requestUpdate();
+    }
+    saveChanges(event) {
+        event.preventDefault();
+        console.log('Saving changes:', this.configData);
+    }
+    cancelChanges(event) {
+        event.preventDefault();
+        console.log('Cancelling changes');
+    }
+    render() {
+        const source = new JsonConfigurationSource(this.configData);
+        return html `<slot></slot>
+      <form>
+        ${Array.from(source.getValues()).map(({ key, value }) => html `
+ <div class="input-group mb-3">
+    <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
+    <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
+    <button class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
+</div>`)}
+        <div>
+            <button class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Entry</button>
+            <button class="btn btn-success" @click="${this.saveChanges}">Save</button>
+            <button class="btn btn-secondary" @click="${this.cancelChanges}">Cancel</button>
+          </div>
+      </form>
+    `;
+    }
+}
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboConfigEditor.prototype, "value", void 0);
+customElements.define('qbo-config-editor', QboConfigEditor);
+//# sourceMappingURL=qbo-config-editor.js.map

package/src/qbo-config-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qbo-config-editor.js","sourceRoot":"","sources":["qbo-config-editor.ts"],"names":[],"mappings":"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"}

package/src/qbo-config-editor.ts

@@ -0,0 +1,115 @@
+import { LitElement, html, css, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { JsonConfigurationSource } from './Configuration.js';
+
+
+export class QboConfigEditor extends LitElement {
+
+    // private _value: string;
+    private _internals: ElementInternals;
+
+    static get formAssociated(): boolean {
+        return true;
+    }
+
+    @property({ type: String })
+    value;
+
+    // @property({ type: Object })
+    configData: Object = {};
+
+    // configSource = new JsonConfigurationSource({});
+
+    static styles = css`
+    :host {
+      display: block;
+      padding: 16px;
+    }
+    .form-group {
+      margin-bottom: 10px;
+    }
+  `;
+
+    constructor() {
+        super();
+        // Use attachInternals() to get access to form internals
+        this._internals = this.attachInternals();
+    }
+
+    _handleInput(e) {
+        // Update the value on input events
+        this.value = e.target.value;
+        this._internals.setFormValue(this.value);
+    }
+
+    async connectedCallback() {
+        super.connectedCallback();
+        // check payload
+        if (this.value) {
+            this.configData = JSON.parse(this.value);
+        }
+    }
+
+    handleInputChange(key, event) {
+        event.preventDefault();
+        const target = event.target as HTMLInputElement;
+        this.configData[key] = target.value;
+        this.requestUpdate();
+    }
+
+    updateConfigData(key, newValue, event, isKey = false) {
+        event.preventDefault();
+        if (isKey) {
+            const oldValue = this.configData[key];
+            delete this.configData[key];
+            this.configData[newValue] = oldValue;
+        } else {
+            this.configData[key] = newValue;
+        }
+        this.requestUpdate();
+    }
+
+    addKeyValuePair(event) {
+        event.preventDefault();
+        const newKey = `newKey${Object.keys(this.configData).length}`;
+        this.configData[newKey] = 'newValue';
+        this.requestUpdate();
+    }
+
+    deleteKeyValuePair(key, event) {
+        event.preventDefault();
+        delete this.configData[key];
+        this.requestUpdate();
+    }
+
+    saveChanges(event) {
+        event.preventDefault();
+        console.log('Saving changes:', this.configData);
+    }
+
+    cancelChanges(event) {
+        event.preventDefault();
+        console.log('Cancelling changes');
+    }
+
+    render() {
+        const source = new JsonConfigurationSource(this.configData);
+        return html`<slot></slot>
+      <form>
+        ${Array.from(source.getValues()).map(({ key, value }) => html`
+ <div class="input-group mb-3">
+    <input type="text" class="form-control" .value="${key}" @input="${(e) => this.updateConfigData(key, e.target.value, e, true)}">
+    <input type="text" class="form-control" .value="${value}" @input="${(e) => this.updateConfigData(key, e.target.value, e)}">
+    <button class="btn btn-outline-danger" @click="${(e) => this.deleteKeyValuePair(key, e)}">Delete</button>
+</div>`)}
+        <div>
+            <button class="btn btn-outline-primary" @click="${this.addKeyValuePair}">Add Entry</button>
+            <button class="btn btn-success" @click="${this.saveChanges}">Save</button>
+            <button class="btn btn-secondary" @click="${this.cancelChanges}">Cancel</button>
+          </div>
+      </form>
+    `;
+    }
+}
+
+customElements.define('qbo-config-editor', QboConfigEditor);