@fails-components/jupyter-applet-view 0.0.1-alpha.10

package/lib/avoutputarea.js

@@ -0,0 +1,751 @@
+import { WidgetRenderer } from '@jupyter-widgets/jupyterlab-manager';
+import { nullTranslator } from '@jupyterlab/translation';
+import { notebookIcon } from '@jupyterlab/ui-components';
+import { ArrayExt } from '@lumino/algorithm';
+import { UUID } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
+import { AccordionPanel, Panel, BoxLayout } from '@lumino/widgets';
+import { domToBlob } from 'modern-screenshot';
+// portions used from Jupyterlab:
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+// This code contains portions from or is inspired by Jupyter lab's notebook extension, especially the createOutputView part
+// Also a lot is taken from the cell toolbar related parts.
+/**
+ * A widget hosting applet views
+ */
+export class AppletViewOutputArea extends AccordionPanel {
+    constructor(options) {
+        super({ renderer: new AppletViewRenderer() });
+        this._viewChanged = new Signal(this);
+        const trans = (options.translator || nullTranslator).load('jupyterlab');
+        this._notebook = options.notebook;
+        this._inLecture = false;
+        this._interceptor = options.interceptor;
+        if (options.applets !== undefined) {
+            this._applets = options.applets.map(({ parts, appid: oldAppid, appname }, index) => {
+                const appid = oldAppid !== null && oldAppid !== void 0 ? oldAppid : UUID.uuid4();
+                return {
+                    appid,
+                    appname: appname || 'Applet ' + (index + 1),
+                    observer: new ResizeObserver((entries, observer) => this.resizeEvent(appid, entries, observer)),
+                    parts: parts.map(el => {
+                        var _a;
+                        return new AppletViewOutputAreaPart({
+                            index: (_a = el.index) !== null && _a !== void 0 ? _a : -1,
+                            cell: el.cell || undefined,
+                            notebook: this._notebook
+                        });
+                    })
+                };
+            });
+        }
+        else {
+            const appid = UUID.uuid4();
+            this._applets = [];
+            this.addApplet({ appid, appname: 'Applet 1' });
+        }
+        this.id = `AppletView-${UUID.uuid4()}`;
+        this.title.label = 'Applets Preview';
+        this.title.icon = notebookIcon;
+        this.title.caption = this._notebook.title.label
+            ? trans.__('For Notebook: %1', this._notebook.title.label)
+            : trans.__('For Notebook:');
+        this.addClass('fl-jp-AppletView');
+        // Wait for the notebook to be loaded before
+        // cloning the output area.
+        void this._notebook.context.ready.then(() => {
+            this._applets.forEach(({ parts, appid }) => {
+                // TODO: Count applets
+                parts.forEach((part, index) => {
+                    if (!part.cell &&
+                        typeof part.index !== 'undefined' &&
+                        part.index >= 0) {
+                        const currentcell = this._notebook.content.widgets[part.index];
+                        part.cell = currentcell;
+                        const codeCell = part.cell;
+                        const outputAreaModel = codeCell.outputArea.model;
+                        for (let i = 0; i < outputAreaModel.length; i++) {
+                            const cur = outputAreaModel.get(i);
+                            cur.changed.connect(() => {
+                                // console.log('Model changed', i, cur, outputAreaModel.get(i));
+                            });
+                        }
+                    }
+                    if (!part.cell /* || part.cell.model.type !== 'code' */) {
+                        // this.dispose(); // no dispose, just do not add
+                        return;
+                    }
+                    if (part.added) {
+                        return; // already added
+                    }
+                    part.clone = this.addCell(appid, part.cell, part.id || 'undefinedid');
+                    if (part.cell.model.type === 'code') {
+                        let managerProm;
+                        for (const codecell of part.cell.outputArea.widgets) {
+                            // We use Array.from instead of using Lumino 2 (JLab 4) iterator
+                            // This is to support Lumino 1 (JLab 3) as well
+                            for (const output of Array.from(codecell.children())) {
+                                if (output instanceof WidgetRenderer) {
+                                    if (output['_manager']) {
+                                        managerProm = output['_manager'].promise;
+                                    }
+                                }
+                            }
+                        }
+                        managerProm === null || managerProm === void 0 ? void 0 : managerProm.then(manager => {
+                            for (const codecell of part.clone.widgets) {
+                                for (const output of Array.from(codecell.children())) {
+                                    if (output instanceof WidgetRenderer) {
+                                        output.manager = manager;
+                                    }
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+            this._viewChanged.emit();
+        });
+    }
+    cloneCell(cell, cellid) {
+        if (cell.model.type === 'code') {
+            const codeCell = cell;
+            const clone = codeCell.cloneOutputArea();
+            if (this._interceptor) {
+                let unsupported = false;
+                const outputs = codeCell.model.outputs;
+                for (let i = 0; i < outputs.length; i++) {
+                    const outputModel = outputs.get(i);
+                    const keys = Object.keys(outputModel.data);
+                    if (keys.some(key => { var _a; return !((_a = this._interceptor) === null || _a === void 0 ? void 0 : _a.isMimeTypeSupported(key)); })) {
+                        unsupported = true;
+                        break;
+                    }
+                }
+                if (unsupported) {
+                    clone.addClass('fl-jl-cell-interceptor-unsupported');
+                }
+                else {
+                    clone.removeClass('fl-jl-cell-interceptor-unsupported');
+                }
+            }
+            // @ts-expect-error cellid does not exist on type
+            clone.cellid = cellid;
+            // @ts-expect-error cellid does not exist on type
+            clone.widgetid = UUID.uuid4();
+            return clone;
+        }
+        else {
+            const clone = cell.clone();
+            // @ts-expect-error cellid does not exist on type
+            clone.cellid = cellid;
+            // @ts-expect-error cellid does not exist on type
+            clone.widgetid = UUID.uuid4();
+            return clone;
+        }
+    }
+    getWidgetAppId(widgetid) {
+        const index = this.widgets.findIndex(el => 
+        // @ts-expect-error widgetid does not exist on type
+        Array.from(el.children()).some(el => el.widgetid === widgetid));
+        if (index === -1) {
+            return;
+        }
+        return this._applets[index].appid;
+    }
+    addToObserver(appIndex, widget) {
+        const observer = this._applets[appIndex].observer;
+        observer.observe(widget.node, { box: 'border-box' });
+    }
+    removeFromObserver(appIndex, widget) {
+        const observer = this._applets[appIndex].observer;
+        observer.unobserve(widget.node);
+    }
+    addCell(appid, cell, cellid) {
+        const appIndex = this._applets.findIndex(applet => applet.appid === appid);
+        if (appIndex === -1) {
+            throw new Error('Applet not found in addcell');
+        }
+        const app = this.widgets[appIndex];
+        const clone = this.cloneCell(cell, cellid);
+        this.addToObserver(appIndex, clone);
+        app.addWidget(clone);
+        // this.informResize(this._applets[appIndex]) // not neccessary
+        // trigger an update ?
+        this._viewChanged.emit();
+        return clone;
+    }
+    insertCell(appid, index, cell, cellid) {
+        const appIndex = this._applets.findIndex(applet => applet.appid === appid);
+        if (appIndex === -1) {
+            return;
+        }
+        const clone = this.cloneCell(cell, cellid);
+        const app = this.widgets[appIndex];
+        this.addToObserver(appIndex, clone);
+        const layout = app.layout;
+        layout.insertWidget(index, clone);
+        // this.informResize(this._applets[appIndex]) // not neccessary
+        // trigger an update ?
+        this._viewChanged.emit();
+        return clone;
+    }
+    deletePart(appid, cellid) {
+        const appIndex = this._applets.findIndex(applet => applet.appid === appid);
+        if (appIndex === -1) {
+            return;
+        }
+        const applet = this._applets[appIndex];
+        const todeleteIndex = applet.parts.findIndex(part => part.id === cellid);
+        if (todeleteIndex === -1) {
+            return;
+        }
+        const removedPart = applet.parts.splice(todeleteIndex, 1);
+        if (removedPart.length > 0) {
+            const cell = removedPart[0].cell;
+            if (typeof cell !== 'undefined') {
+                this.removeFromObserver(appIndex, cell);
+            }
+        }
+        const app = this.widgets[appIndex];
+        const layout = app.layout;
+        layout.removeWidgetAt(todeleteIndex);
+        this.informResize(this._applets[appIndex]);
+        // trigger an update ?
+        this._viewChanged.emit();
+    }
+    movePart(appid, cellid, delta) {
+        const appIndex = this._applets.findIndex(applet => applet.appid === appid);
+        if (appIndex === -1) {
+            return;
+        }
+        const applet = this._applets[appIndex];
+        const tomoveIndex = applet.parts.findIndex(part => part.id === cellid);
+        if (tomoveIndex === -1) {
+            return;
+        }
+        if (tomoveIndex + delta < 0) {
+            return;
+        }
+        if (tomoveIndex + delta >= applet.parts.length) {
+            return;
+        }
+        const [moveme] = applet.parts.splice(tomoveIndex, 1);
+        applet.parts.splice(tomoveIndex + delta + (delta > 1 ? -1 : 0), 0, moveme);
+        const app = this.widgets[appIndex];
+        const layout = app.layout;
+        layout.insertWidget(tomoveIndex + delta, layout.widgets[tomoveIndex]);
+        this.informResize(this._applets[appIndex]);
+        // trigger an update ?
+        this._viewChanged.emit();
+    }
+    /*
+      canMoveApp(appid: string, cellid: string, delta: number): boolean {
+        console.log('canmoveapp debug');
+        const appIndex = this._applets.findIndex(
+          applet => applet.appid === appid
+        );
+        if (appIndex + delta < 0) {
+          return false;
+        }
+        if (appIndex + delta >= this._applets.length) {
+          // only add new apps, if current app will not be empty
+          if (this._applets[appIndex].parts.length <= 1) {
+            return false;
+          }
+        }
+        return true;
+      }
+  */
+    moveApp(appid, cellid, delta) {
+        const appIndex = this._applets.findIndex(applet => applet.appid === appid);
+        if (appIndex === -1) {
+            return;
+        }
+        const applet = this._applets[appIndex];
+        const partIndex = applet.parts.findIndex(part => part.id === cellid);
+        if (partIndex === -1) {
+            return;
+        }
+        if (delta === 0) {
+            return;
+        }
+        if (appIndex + delta < 0) {
+            return;
+        }
+        if (appIndex + delta >= this._applets.length) {
+            // only add new apps, if current app will not be empty
+            if (this._applets[appIndex].parts.length <= 1) {
+                return false;
+            }
+            // in this case we create a new app
+            this.addApplet({ appid: UUID.uuid4() });
+        }
+        const destApplet = this._applets[appIndex + delta];
+        if (destApplet.parts.some(el => el.id === cellid)) {
+            // per convention an elment can not be added twice to an app
+            return;
+        }
+        let destPartIndex = 0;
+        if (delta < 0) {
+            destPartIndex = destApplet.parts.length;
+        }
+        /*console.log(
+            'app move me debug 0',
+            applet.parts.map(el => el.id).join(',')
+          );
+          console.log(
+            'app move me debug 0 dst',
+            destApplet.parts.map(el => el.id).join(',')
+          );*/
+        const [moveme] = applet.parts.splice(partIndex, 1); // remove
+        destApplet.parts.splice(destPartIndex, 0, moveme);
+        /* console.log(
+            'app move me debug 1',
+            applet.parts.map(el => el.id).join(',')
+          );
+          console.log(
+            'app move me debug 1 dst',
+            destApplet.parts.map(el => el.id).join(',')
+          );*/
+        const srcApp = this.widgets[appIndex];
+        const destApp = this.widgets[appIndex + delta];
+        const srcLayout = srcApp.layout;
+        const destLayout = destApp.layout;
+        const widget = srcLayout.widgets[partIndex];
+        this.removeFromObserver(appIndex, widget);
+        this.addToObserver(appIndex + delta, widget);
+        destLayout.insertWidget(destPartIndex, widget);
+        // srcLayout.removeWidgetAt(partIndex); // not necessary
+        if (appIndex === this._applets.length - 1 && applet.parts.length === 0) {
+            // if the last applet is empty, we remove it
+            this._applets.splice(appIndex, 1);
+            const appSrcLayout = this.layout;
+            appSrcLayout.removeWidgetAt(appIndex);
+        }
+        this.informResize(this._applets[appIndex]);
+        this.informResize(this._applets[appIndex + delta]);
+        // trigger an update ?
+        this._viewChanged.emit();
+    }
+    saveData() {
+        const applets = this._applets.map(applet => ({
+            parts: applet.parts.map(part => ({
+                index: part.index,
+                id: part.id
+            })),
+            appid: applet.appid,
+            appname: applet.appname
+        }));
+        return { applets };
+    }
+    loadData(data) {
+        var _a;
+        if (!data) {
+            return;
+        }
+        let applets = data.applets;
+        if (data.parts && typeof applets === 'undefined') {
+            applets = [{ appid: UUID.uuid4(), parts: data.parts }];
+        }
+        if (!Array.isArray(applets) ||
+            applets.some(({ parts }) => !Array.isArray(parts))) {
+            return;
+        }
+        // clear applets
+        this._applets = [];
+        if (this.layout) {
+            this.layout.widgets.forEach((widget) => { var _a; return (_a = this.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(widget); });
+        }
+        if (applets.length === 0) {
+            // we need a minimum of 1 applet!
+            const appid = UUID.uuid4();
+            this.addApplet({ appid, appname: 'Applet 1' });
+            return;
+        }
+        for (const applet of applets) {
+            const appid = (_a = applet.appid) !== null && _a !== void 0 ? _a : UUID.uuid4();
+            const appname = applet.appname;
+            this.addApplet({ appid, appname });
+            if (typeof this._selectedAppid !== 'undefined' &&
+                appid !== this._selectedAppid) {
+                this.collapse(this._applets.length - 1);
+            }
+            for (const part of applet.parts) {
+                if (typeof part.index !== 'undefined' || part.id) {
+                    this.addPart(appid, {
+                        index: part.index,
+                        id: part.id
+                    });
+                }
+            }
+        }
+    }
+    addApplet({ appid, appname }) {
+        // figure out, if it is already added
+        let appletIndex = this._applets.findIndex(applet => applet.appid === appid);
+        if (appletIndex !== -1) {
+            return this.widgets[appletIndex];
+        }
+        // TODO add element to widgets
+        appletIndex = this._applets.length;
+        appname = appname || 'Applet ' + Math.random().toString(36).slice(2, 6);
+        this._applets.push({
+            appid,
+            appname: appname,
+            observer: new ResizeObserver((entries, observer) => this.resizeEvent(appid, entries, observer)),
+            parts: []
+        });
+        const layout = this.layout;
+        const panel = new Panel({});
+        BoxLayout.setStretch(panel, 1);
+        panel.addClass('fl-jp-Applet');
+        panel.title.label = appname;
+        panel.title.caption = panel.title.label;
+        panel.title.changed.connect((title) => {
+            this._applets[appletIndex].appname = title.label;
+            this._viewChanged.emit();
+        });
+        layout.insertWidget(appletIndex, panel);
+        return panel;
+    }
+    addPart(appidOrUndefined, part) {
+        var _a;
+        const topush = new AppletViewOutputAreaPart({
+            index: part.index !== undefined ? part.index : -1,
+            cell: part.cell || undefined,
+            id: part.id || undefined,
+            notebook: this._notebook
+        });
+        let appletIndex = typeof appidOrUndefined === 'undefined'
+            ? 0
+            : this._applets.findIndex(applet => applet.appid === appidOrUndefined);
+        if (appletIndex === -1) {
+            appletIndex = 0;
+        }
+        const appid = this._applets[appletIndex].appid;
+        const applet = this._applets[appletIndex];
+        // we need to figure out, if it is already added
+        if (applet.parts.some(el => el.id === topush.id ||
+            (typeof el.cell !== 'undefined' && el.cell === topush.cell))) {
+            return;
+        }
+        (_a = this._notebook.content.model) === null || _a === void 0 ? void 0 : _a.cells.changed.connect((sender) => {
+            var _a;
+            for (const cell of sender) {
+                if (cell.id === topush.id) {
+                    // we found it and are happy that it is still there
+                    // but is it still the same
+                    const index = ArrayExt.findFirstIndex(this._notebook.content.widgets, wcell => wcell === topush.cell);
+                    if (index !== -1) {
+                        return;
+                    } // still the same cell
+                    const oldclone = topush.clone;
+                    const partind = applet.parts.indexOf(topush); // our position in the list
+                    const newindex = ArrayExt.findFirstIndex(this._notebook.content.widgets, wcell => { var _a; return wcell.id === ((_a = topush.cell) === null || _a === void 0 ? void 0 : _a.id); });
+                    if (newindex === -1) {
+                        throw new Error('Cell does not exist');
+                    }
+                    topush.cell = this._notebook.content.widgets[newindex];
+                    oldclone === null || oldclone === void 0 ? void 0 : oldclone.dispose();
+                    topush.clone = this.insertCell(applet.appid, partind, topush.cell, topush.id);
+                    return;
+                }
+            }
+            // not found case, it is gone forever so remove from parts and dispose
+            const appIndex = this._applets.findIndex(applet => applet.appid === appid);
+            if (appIndex === -1) {
+                return;
+            }
+            const apps = this._applets[appIndex];
+            const ind = apps.parts.indexOf(topush);
+            if (ind !== -1) {
+                apps.parts.splice(ind, 1);
+            }
+            (_a = topush.clone) === null || _a === void 0 ? void 0 : _a.dispose();
+        });
+        applet.parts.push(topush);
+        if (this._notebook.context.isReady) {
+            // it is already ready, so we can not rely on the global code for adding to the view
+            if (!topush.cell &&
+                typeof part.index !== 'undefined' &&
+                part.index >= 0) {
+                topush.cell = this._notebook.content.widgets[part.index];
+            }
+            if (topush.cell) {
+                topush.clone = this.addCell(appid, topush.cell, topush.id || 'undefinedid');
+            }
+        }
+        // trigger an update ?
+        this._viewChanged.emit();
+    }
+    firstHasIndex(index) {
+        if (this._applets.length === 0) {
+            return false;
+        }
+        return this._applets[0].parts.some(el => el.index === index);
+    }
+    selectApplet(selectedAppid) {
+        this._selectedAppid = selectedAppid;
+        for (let i = 0; i < this._applets.length; i++) {
+            const applet = this._applets[i];
+            if (applet.appid === selectedAppid) {
+                this.expand(i);
+            }
+            else {
+                this.collapse(i);
+            }
+        }
+    }
+    unselectApplet() {
+        for (let i = 0; i < this._applets.length; i++) {
+            this.expand(i);
+        }
+    }
+    async takeAppScreenshot(opts) {
+        if (typeof this._selectedAppid === 'undefined') {
+            throw new Error('No app selected');
+        }
+        const { dpi = undefined } = opts;
+        const appletIndex = this._applets.findIndex(applet => applet.appid === this._selectedAppid);
+        if (appletIndex === -1) {
+            throw new Error('No invalid app selected');
+        }
+        try {
+            const blob = await domToBlob(this.widgets[appletIndex].node, {
+                maximumCanvasSize: 4096,
+                scale: (dpi && dpi / 96) || undefined
+            });
+            if (blob === null) {
+                return undefined;
+            }
+            return blob;
+        }
+        catch (error) {
+            //only throw if not returned
+            console.log('takeAppScreenshot error', error);
+        }
+    }
+    informResize(applet) {
+        // inform about the new sizes
+        let width = 0;
+        let height = 0;
+        for (const part of applet.parts) {
+            if (typeof part.sizes === 'undefined') {
+                continue;
+            }
+            const { width: ewidth, height: eheight } = part.sizes;
+            height += eheight;
+            width = Math.max(ewidth, width);
+        }
+        this._notebook.appletResizeinfo({
+            appid: applet.appid,
+            width,
+            height
+        });
+    }
+    resizeEvent(appid, entries, observer) {
+        const applet = this._applets.find(applet => applet.appid === appid);
+        if (typeof applet === 'undefined') {
+            return;
+        }
+        let updated = false;
+        for (const entry of entries) {
+            const part = applet.parts.find(part => { var _a; return ((_a = part === null || part === void 0 ? void 0 : part.clone) === null || _a === void 0 ? void 0 : _a.node) === entry.target; });
+            if (!part) {
+                continue;
+            }
+            if (!entry.borderBoxSize[0]) {
+                continue;
+            }
+            const size = entry.borderBoxSize[0];
+            if (size.inlineSize === 0 || size.blockSize === 0) {
+                continue;
+            } // do not store collapsed values
+            part.sizes = {
+                width: size.inlineSize,
+                height: size.blockSize
+            };
+            updated = true;
+        }
+        if (!updated) {
+            return;
+        }
+        this.informResize(applet);
+    }
+    /* hasId(id: string): boolean {
+        return this._parts.some(el => el.id === id);
+      } */
+    get applets() {
+        return this._applets;
+    }
+    /**
+     * The index of the cell in the notebook.
+     */
+    /*
+      get index(): number {
+        return this._cell
+          ? ArrayExt.findFirstIndex(
+              this._notebook.content.widgets,
+              c => c === this._cell
+            )
+          : this._index;
+      }
+      */
+    /**
+     * The path of the notebook for the cloned output area.
+     */
+    get path() {
+        return this._notebook.context.path;
+    }
+    get viewChanged() {
+        return this._viewChanged;
+    }
+    set inLecture(value) {
+        if (value === this._inLecture) {
+            return;
+        }
+        this._inLecture = value;
+        const splitLayout = this.layout;
+        if (value) {
+            splitLayout.titleSpace = 0;
+        }
+        else {
+            splitLayout.titleSpace = 22;
+        }
+    }
+    // override base class
+    handleEvent(event) {
+        if (event.type === 'click') {
+            const target = event.target;
+            if (target.tagName === 'SPAN' || target.tagName === 'INPUT') {
+                return;
+            }
+        }
+        if (['keydown', 'keypress', 'keyup'].includes(event.type)) {
+            const target = event.target;
+            if (target.tagName === 'INPUT') {
+                return; // do not call preventDefault
+            }
+        }
+        super.handleEvent(event);
+    }
+}
+export class AppletViewOutputAreaPart {
+    constructor(args) {
+        var _a, _b;
+        this._cloned = new Signal(this);
+        this._cell = args.cell;
+        this._index = (_a = args.index) !== null && _a !== void 0 ? _a : -1;
+        this._id = args.id || ((_b = this._cell) === null || _b === void 0 ? void 0 : _b.model.id);
+        this._notebook = args.notebook;
+    }
+    /**
+     * The index of the cell in the notebook.
+     */
+    get index() {
+        if (this._id) {
+            const ind = ArrayExt.findFirstIndex(this._notebook.content.widgets, c => c.model.id === this._id);
+            if (ind !== -1) {
+                return ind;
+            }
+        }
+        return this._cell
+            ? ArrayExt.findFirstIndex(this._notebook.content.widgets, c => c === this._cell)
+            : this._index;
+    }
+    get cell() {
+        return this._cell;
+    }
+    set cell(value) {
+        if ((value === null || value === void 0 ? void 0 : value.model.id) !== this._id) {
+            // throw new Error('Can not assign a cell with different id');
+            /*  console.log(
+              'ASSIGNING CELL with different id',
+              value?.model.id,
+              this._id
+            ); */
+        }
+        /* if (this._cell?.model.id !== value?.model.id) {
+          console.log('ASSIGNING CELL id change', value?.model.id, this._id);
+        } */
+        this._cell = value;
+    }
+    get added() {
+        return !!this._clone;
+    }
+    get id() {
+        return this._id;
+    }
+    set clone(value) {
+        this._clone = value;
+        this._cloned.emit(); // inform that we have been cloned
+    }
+    get clone() {
+        return this._clone;
+    }
+    get path() {
+        return this._notebook.context.path;
+    }
+    get cloned() {
+        return this._cloned;
+    }
+}
+export class AppletViewRenderer extends AccordionPanel.Renderer {
+    createSectionTitle(data) {
+        const handle = document.createElement('h3');
+        handle.setAttribute('tabindex', '0');
+        handle.id = this.createTitleKey(data);
+        handle.className = this.titleClassName;
+        for (const aData in data.dataset) {
+            handle.dataset[aData] = data.dataset[aData];
+        }
+        const collapser = handle.appendChild(this.createCollapseIcon(data));
+        collapser.className = 'lm-AccordionPanel-titleCollapser';
+        let title = data.caption || data.label;
+        const staticLabel = document.createElement('span');
+        staticLabel.className = 'lm-AccordionPanel-titleLabel';
+        staticLabel.textContent = data.label;
+        staticLabel.title = title;
+        handle.appendChild(staticLabel);
+        const editLabel = document.createElement('input');
+        editLabel.className = 'lm-AccordionPanel-titleLabelEdit';
+        editLabel.type = 'text';
+        editLabel.value = data.label;
+        editLabel.title = title;
+        staticLabel.addEventListener('click', (ev) => {
+            handle.removeChild(staticLabel);
+            handle.appendChild(editLabel);
+        });
+        editLabel.addEventListener('blur', (ev) => {
+            handle.removeChild(editLabel);
+            handle.appendChild(staticLabel);
+        });
+        editLabel.addEventListener('keydown', (ev) => {
+            if (ev.key === 'Enter') {
+                handle.removeChild(editLabel);
+                handle.appendChild(staticLabel);
+            }
+            return true;
+        });
+        editLabel.addEventListener('change', event => {
+            const target = event.target;
+            if (target === editLabel) {
+                const newValue = target === null || target === void 0 ? void 0 : target.value;
+                if (newValue && newValue !== title) {
+                    title = newValue;
+                    data.caption = title;
+                    data.label = title;
+                    staticLabel.title = title;
+                    staticLabel.textContent = title;
+                }
+            }
+            handle.removeChild(editLabel);
+            handle.appendChild(staticLabel);
+        });
+        return handle;
+    }
+}