Add input-list custom element.

1 files changed, 59 insertions, 0 deletions

diff --git a/static/components/input-list.ts b/static/components/input-list.ts
new file mode 100644
index 00000000..326cb2b5
--- /dev/null
+++ b/static/components/input-list.ts
@@ -0,0 +1,59 @@
+export { InputList }
+
+/* This file replaces input_list.js */
+
+class InputList extends HTMLElement {
+
+    el: HTMLInputElement;
+
+    values: [HTMLInputElement, any][] = [];
+
+    constructor() {
+        super();
+        this.el = this.children[0].cloneNode(true) as HTMLInputElement;
+    }
+
+    connectedCallback() {
+        this.addInstance();
+    }
+
+    addInstance() {
+        let new_el = this.el.cloneNode(true) as HTMLInputElement
+        let that = this;
+        new_el.addEventListener('input', function() {
+            if (new_el.value === '') {
+                let sibling = this.previousElementSibling || this.nextElementSibling;
+                // this.remove();
+                // that.values = that.values.filter((p) => p[0] == this)
+                that.values = that.values.filter((p) => p[0] != this);
+                this.remove();
+                (sibling as HTMLInputElement).focus();
+            } else {
+                if (!this.nextElementSibling) {
+                    that.addInstance();
+                    // window.setTimeout(() => this.focus())
+                    this.focus();
+                }
+            }
+        });
+        this.values.push([new_el, ''])
+        // this.appendChild(new_el);
+        this.replaceChildren(... this.values.map((p) => p[0]))
+    }
+
+    get value(): any[] {
+        return []
+    }
+
+    set value(new_value: any[]) {
+        let els = [];
+        for (let value of new_value) {
+            let new_el = this.el.cloneNode() as HTMLInputElement;
+            new_el.value = value;
+            els.push(new_el);
+        }
+        /* Final element (empty) */
+        els.push(this.el.cloneNode() as HTMLInputElement);
+        this.replaceChildren(...els);
+    }
+}