jpf 4.2.18 → 5.0.6

package/dist/controls/codeMirror/Editor/Editor.d.ts

@@ -0,0 +1,19 @@
+import { Element } from "../../../framework/element";
+import { Properties, IProperties } from "../../../framework/properties";
+import { ISubscribable } from "../../../framework/observable";
+export type mode = "json" | "html" | "css" | "less" | "javascript" | "typescript";
+export interface IEditorProperties extends IProperties {
+    mode: mode;
+    value?: string | ISubscribable<string>;
+}
+export declare class EditorElement extends Element<IEditorProperties> {
+    constructor(properties: IEditorProperties);
+    private editor;
+    build(): void;
+}
+export declare function createEditor(properties: IEditorProperties): EditorElement;
+export declare class EditorProperties extends Properties implements IEditorProperties {
+    constructor(properties: IEditorProperties);
+    mode: mode;
+    value?: string | ISubscribable<string>;
+}

package/dist/controls/codeMirror/Editor/Editor.js

@@ -0,0 +1,151 @@
+import { Element, registerElement } from "../../../framework/element";
+import { Properties, extendProperties } from "../../../framework/properties";
+import { isSubscribable, isObservableValue, unwrap } from "../../../framework/observable";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { html } from "@codemirror/lang-html";
+import { json } from "@codemirror/lang-json";
+import { css } from "@codemirror/lang-css";
+import { indentWithTab } from "@codemirror/commands";
+import { foldAll } from "@codemirror/language";
+import { createButton } from "../../html/Button/Button";
+import { formatHtml, formatCss, formatJson, formatJavascript } from "../../../utilities/formatting/formatting";
+import { createDiv } from "../../html/Div/Div";
+export class EditorElement extends Element {
+    constructor(properties) {
+        super({
+            tagName: "div",
+            properties: extendProperties(properties, {
+                elementType: "CodeEditor",
+            }, {
+                attributes: {
+                    tabindex: 1
+                },
+                style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    border: "1px solid #a3d0e4"
+                }
+            })
+        });
+    }
+    editor;
+    build() {
+        super.build();
+        const properties = this.properties;
+        const foldAllButton = createButton({
+            content: "Collapse all",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        foldAll(this.editor);
+                    }
+                }
+            }
+        });
+        const formatButton = createButton({
+            content: "Format",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        const code = this.editor.state.doc.toString();
+                        let formattedCode;
+                        switch (properties.mode) {
+                            case "html":
+                                formattedCode = formatHtml(code);
+                                break;
+                            case "css":
+                                formattedCode = formatCss(code);
+                                break;
+                            case "json":
+                                formattedCode = formatJson(code);
+                                break;
+                            case "javascript":
+                                formattedCode = formatJavascript(code);
+                                break;
+                            default:
+                                throw "Language not supported";
+                        }
+                        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: formattedCode } });
+                    }
+                }
+            }
+        });
+        const saveButton = createButton({
+            content: "Save",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        if (isObservableValue(properties.value)) {
+                            properties.value.setValue(this.editor.state.doc.toString());
+                        }
+                    }
+                }
+            }
+        });
+        const buttons = createDiv({
+            style: {
+                display: "flex"
+            },
+            children: [
+                foldAllButton,
+                formatButton,
+                saveButton
+            ]
+        });
+        this.element.appendChild(buttons.render());
+        const extensions = [
+            basicSetup,
+            EditorView.lineWrapping,
+            keymap.of([indentWithTab])
+        ];
+        switch (properties.mode) {
+            case "html":
+                extensions.push(html());
+                break;
+            case "css":
+                extensions.push(css());
+                break;
+            case "json":
+                extensions.push(json());
+                break;
+            default:
+        }
+        this.editor = new EditorView({
+            state: EditorState.create({
+                extensions: extensions
+            }),
+            parent: this.element,
+        });
+        this.editor.dom.style.overflow = "auto";
+        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: unwrap(properties.value) } });
+        if (isSubscribable(properties.value)) {
+            this.subscriptions.push(properties.value.subscribe((html) => {
+                this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: html } });
+            }));
+        }
+    }
+}
+export function createEditor(properties) {
+    return new EditorElement(properties);
+}
+export class EditorProperties extends Properties {
+    constructor(properties) {
+        super();
+        this.setProperties(this, properties);
+    }
+    mode;
+    value;
+}
+registerElement(EditorProperties.prototype.constructor, EditorElement);
+//# sourceMappingURL=Editor.js.map

package/dist/controls/codeMirror/Editor/Editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../../src/controls/codeMirror/Editor/Editor.ts"],"names":[],"mappings":"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"}

package/dist/controls/codeMirror/index.d.ts

@@ -1,2 +1 @@
-export * from "./HtmlEditor/HtmlEditor";
-export * from "./JsonEditor/JsonEditor";
+export * from "./Editor/Editor";

package/dist/controls/codeMirror/index.js

@@ -1,3 +1,2 @@
-export * from "./HtmlEditor/HtmlEditor";
-export * from "./JsonEditor/JsonEditor";
+export * from "./Editor/Editor";
 //# sourceMappingURL=index.js.map

package/dist/controls/codeMirror/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/codeMirror/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/codeMirror/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/controls/custom/FileSelector/FileSelector.d.ts

@@ -1,18 +1,18 @@
-import { ViewModel, Properties } from "../../../framework/ViewModel";
-import { View } from "../../../framework/View";
-import { ButtonProperties } from "../../html/Button/Button";
-import { InputProperties } from "../../html/Input/Input";
-export interface FileSelectorProperties extends Properties {
-    button?: ButtonProperties;
-    inputFile: InputProperties<FileList>;
-}
-export declare class FileSelectorView extends View<FileSelectorProperties> {
-    constructor(properties: FileSelectorProperties);
-    protected build(): void;
-}
-export declare function fileSelectorView(properties: FileSelectorProperties): FileSelectorView;
-export declare class FileSelectorViewModel extends ViewModel implements FileSelectorProperties {
-    constructor(properties: FileSelectorProperties);
-    button?: ButtonProperties;
-    inputFile: InputProperties<FileList>;
-}
+import { Properties, IProperties } from "../../../framework/properties";
+import { Element } from "../../../framework/element";
+import { IButtonProperties } from "../../html/Button/Button";
+import { IInputProperties } from "../../html/Input/Input";
+export interface IFileSelectorProperties extends IProperties {
+    button?: IButtonProperties;
+    inputFile: IInputProperties<FileList>;
+}
+export declare class FileSelectorElement extends Element<IFileSelectorProperties> {
+    constructor(properties: IFileSelectorProperties);
+    protected build(): void;
+}
+export declare function createFileSelector(properties: IFileSelectorProperties): FileSelectorElement;
+export declare class FileSelectorProperties extends Properties implements IFileSelectorProperties {
+    constructor(properties: IFileSelectorProperties);
+    button?: IButtonProperties;
+    inputFile: IInputProperties<FileList>;
+}

package/dist/controls/custom/FileSelector/FileSelector.js

@@ -1,47 +1,48 @@
-import { ViewModel, extendProperties } from "../../../framework/ViewModel";
-import { View, registerView } from "../../../framework/View";
-import { ButtonView } from "../../html/Button/Button";
-import { InputView } from "../../html/Input/Input";
-export class FileSelectorView extends View {
-    constructor(properties) {
-        super({
-            tagName: "div",
-            properties: extendProperties({
-                viewType: "FileSelector"
-            }, properties)
-        });
-    }
-    build() {
-        super.build();
-        const viewModel = this.properties;
-        var fileInput = new InputView(viewModel.inputFile).render();
-        this.element.appendChild(fileInput);
-        if (viewModel.button) {
-            const button = new ButtonView(extendProperties(viewModel.button, {
-                eventListeners: {
-                    click: {
-                        listener: () => {
-                            var mouseEvent = document.createEvent("MouseEvent");
-                            mouseEvent.initEvent("click", false, false);
-                            fileInput.dispatchEvent(mouseEvent);
-                        }
-                    }
-                }
-            })).render();
-            this.element.appendChild(button);
-        }
-    }
-}
-export function fileSelectorView(properties) {
-    return new FileSelectorView(properties);
-}
-export class FileSelectorViewModel extends ViewModel {
-    constructor(properties) {
-        super();
-        this.setProperties(this, properties);
-    }
-    button;
-    inputFile;
-}
-registerView(FileSelectorViewModel, FileSelectorView);
+import { Properties, extendProperties } from "../../../framework/properties";
+import { Element, registerElement } from "../../../framework/element";
+import { createButton as buttonElement } from "../../html/Button/Button";
+import { createInput } from "../../html/Input/Input";
+export class FileSelectorElement extends Element {
+    constructor(properties) {
+        super({
+            tagName: "div",
+            properties: extendProperties(properties, {}, {
+                elementType: "FileSelector"
+            })
+        });
+    }
+    build() {
+        super.build();
+        const properties = this.properties;
+        const inputProperties = properties.inputFile || {};
+        inputProperties.type = "file";
+        var fileInput = createInput(inputProperties).render();
+        this.element.appendChild(fileInput);
+        if (properties.button) {
+            const button = buttonElement(extendProperties(properties.button, {
+                eventListeners: {
+                    click: {
+                        listener: () => {
+                            var mouseEvent = new MouseEvent("click");
+                            fileInput.dispatchEvent(mouseEvent);
+                        }
+                    }
+                }
+            })).render();
+            this.element.appendChild(button);
+        }
+    }
+}
+export function createFileSelector(properties) {
+    return new FileSelectorElement(properties);
+}
+export class FileSelectorProperties extends Properties {
+    constructor(properties) {
+        super();
+        this.setProperties(this, properties);
+    }
+    button;
+    inputFile;
+}
+registerElement(FileSelectorProperties.prototype.constructor, FileSelectorElement);
 //# sourceMappingURL=FileSelector.js.map

package/dist/controls/custom/FileSelector/FileSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileSelector.js","sourceRoot":"","sources":["../../../../src/controls/custom/FileSelector/FileSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAqB,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,SAAS,EAAoB,MAAM,wBAAwB,CAAC;AAOrE,MAAM,OAAO,gBAAiB,SAAQ,IAA4B;IAC9D,YAAY,UAAkC;QAC1C,KAAK,CACD;YACI,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,gBAAgB,CACxB;gBACI,QAAQ,EAAE,cAAc;aAC3B,EACD,UAAU,CACb;SACJ,CACJ,CAAC;IACN,CAAC;IAES,KAAK;QACX,KAAK,CAAC,KAAK,EAAE,CAAC;QAEd,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;QAElC,IAAI,SAAS,GAAG,IAAI,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,CAAC;QAE5D,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAEpC,IAAI,SAAS,CAAC,MAAM,EAAE;YAClB,MAAM,MAAM,GAAG,IAAI,UAAU,CACzB,gBAAgB,CACZ,SAAS,CAAC,MAAM,EAChB;gBACI,cAAc,EAAE;oBACZ,KAAK,EAAE;wBACH,QAAQ,EAAE,GAAG,EAAE;4BACX,IAAI,UAAU,GAAG,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;4BACpD,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;4BAC5C,SAAS,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;wBACxC,CAAC;qBACJ;iBACJ;aACJ,CACJ,CACJ,CAAC,MAAM,EAAE,CAAC;YAEX,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;SACpC;IACL,CAAC;CACJ;AAED,MAAM,UAAU,gBAAgB,CAAC,UAAkC;IAC/D,OAAO,IAAI,gBAAgB,CAAC,UAAU,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,OAAO,qBAAsB,SAAQ,SAAS;IAChD,YAAY,UAAkC;QAC1C,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACzC,CAAC;IACD,MAAM,CAAoB;IAC1B,SAAS,CAA4B;CACxC;AAED,YAAY,CACR,qBAAqB,EACrB,gBAAgB,CACnB,CAAC"}
+{"version":3,"file":"FileSelector.js","sourceRoot":"","sources":["../../../../src/controls/custom/FileSelector/FileSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAe,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC1F,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAqB,YAAY,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAoB,MAAM,wBAAwB,CAAC;AAOvE,MAAM,OAAO,mBAAoB,SAAQ,OAAgC;IACrE,YAAY,UAAmC;QAC3C,KAAK,CACD;YACI,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,gBAAgB,CACxB,UAAU,EACV,EAAE,EACF;gBACI,WAAW,EAAE,cAAc;aAC9B,CACJ;SACJ,CACJ,CAAC;IACN,CAAC;IAES,KAAK;QACX,KAAK,CAAC,KAAK,EAAE,CAAC;QAEd,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QACnC,MAAM,eAAe,GAAG,UAAU,CAAC,SAAS,IAAI,EAAgC,CAAC;QACjF,eAAe,CAAC,IAAI,GAAG,MAAM,CAAC;QAE9B,IAAI,SAAS,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC,MAAM,EAAE,CAAC;QAEtD,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAEpC,IAAI,UAAU,CAAC,MAAM,EAAE,CAAC;YACpB,MAAM,MAAM,GAAG,aAAa,CACxB,gBAAgB,CACZ,UAAU,CAAC,MAAM,EACjB;gBACI,cAAc,EAAE;oBACZ,KAAK,EAAE;wBACH,QAAQ,EAAE,GAAG,EAAE;4BACX,IAAI,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;4BACzC,SAAS,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;wBACxC,CAAC;qBACJ;iBACJ;aACJ,CACJ,CACJ,CAAC,MAAM,EAAE,CAAC;YAEX,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;IACL,CAAC;CACJ;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAmC;IAClE,OAAO,IAAI,mBAAmB,CAAC,UAAU,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,OAAO,sBAAuB,SAAQ,UAAU;IAClD,YAAY,UAAmC;QAC3C,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACzC,CAAC;IACD,MAAM,CAAqB;IAC3B,SAAS,CAA6B;CACzC;AAED,eAAe,CACX,sBAAsB,CAAC,SAAS,CAAC,WAAW,EAC5C,mBAAmB,CACtB,CAAC"}

package/dist/controls/custom/LabeledControl/LabeledControl.d.ts

@@ -1,15 +1,15 @@
-import { ViewModel, Properties } from "../../../framework/ViewModel";
-import { View, IView } from "../../../framework/View";
-export interface LabeledViewProperties extends Properties {
-    labelProperties: Properties;
-    view: IView;
-}
-export declare class LabeledControlView extends View<LabeledViewProperties> {
-    constructor(properties: LabeledViewProperties);
-}
-export declare function labeledControlView(properties: LabeledViewProperties): LabeledControlView;
-export declare class LabeledControlViewModel extends ViewModel implements LabeledViewProperties {
-    constructor(properties: LabeledViewProperties);
-    labelProperties: Properties;
-    view: IView;
-}
+import { Properties, IProperties } from "../../../framework/properties";
+import { Element, IElement } from "../../../framework/element";
+export interface ILabeledViewProperties extends IProperties {
+    labelProperties: IProperties;
+    element: IElement;
+}
+export declare class LabeledControlElement extends Element<ILabeledViewProperties> {
+    constructor(properties: ILabeledViewProperties);
+}
+export declare function createLabeledControl(properties: ILabeledViewProperties): LabeledControlElement;
+export declare class LabeledControlProperties extends Properties implements ILabeledViewProperties {
+    constructor(properties: ILabeledViewProperties);
+    labelProperties: Properties;
+    element: IElement;
+}

package/dist/controls/custom/LabeledControl/LabeledControl.js

@@ -1,37 +1,32 @@
-import { ViewModel, extendProperties } from "../../../framework/ViewModel";
-import { View, registerView } from "../../../framework/View";
-import { DivView } from "../../html/Div/Div";
-export class LabeledControlView extends View {
-    constructor(properties) {
-        super({
-            tagName: "div",
-            properties: extendProperties({
-                viewType: "LabeledControl",
-                style: {
-                    display: "flex",
-                    alignItems: "center"
-                },
-                classNames: ["o-labled-control"]
-            }, properties),
-            children: [
-                new DivView(extendProperties(properties.labelProperties, {
-                    viewType: "Label"
-                })),
-                properties.view
-            ]
-        });
-    }
-}
-export function labeledControlView(properties) {
-    return new LabeledControlView(properties);
-}
-export class LabeledControlViewModel extends ViewModel {
-    constructor(properties) {
-        super();
-        this.setProperties(this, properties);
-    }
-    labelProperties;
-    view;
-}
-registerView(LabeledControlViewModel, LabeledControlView);
+import { Properties, extendProperties } from "../../../framework/properties";
+import { Element, registerElement } from "../../../framework/element";
+import { createDiv as divElement } from "../../html/Div/Div";
+export class LabeledControlElement extends Element {
+    constructor(properties) {
+        super({
+            tagName: "div",
+            properties: extendProperties(properties, {
+                elementType: "LabeledControl",
+                classNames: ["jpf-labled-control"]
+            })
+        }, [
+            divElement(extendProperties(properties.labelProperties, {
+                elementType: "Label"
+            })),
+            properties.element
+        ]);
+    }
+}
+export function createLabeledControl(properties) {
+    return new LabeledControlElement(properties);
+}
+export class LabeledControlProperties extends Properties {
+    constructor(properties) {
+        super();
+        this.setProperties(this, properties);
+    }
+    labelProperties;
+    element;
+}
+registerElement(LabeledControlProperties, LabeledControlElement);
 //# sourceMappingURL=LabeledControl.js.map

package/dist/controls/custom/LabeledControl/LabeledControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledControl.js","sourceRoot":"","sources":["../../../../src/controls/custom/LabeledControl/LabeledControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AACtF,OAAO,EAAE,IAAI,EAAS,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAO7C,MAAM,OAAO,kBAAmB,SAAQ,IAA2B;IAC/D,YAAY,UAAiC;QACzC,KAAK,CACD;YACI,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,gBAAgB,CACxB;gBACI,QAAQ,EAAE,gBAAgB;gBAC1B,KAAK,EAAE;oBACH,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;iBACvB;gBACD,UAAU,EAAE,CAAC,kBAAkB,CAAC;aACnC,EACD,UAAU,CACb;YACD,QAAQ,EAAE;gBACN,IAAI,OAAO,CACP,gBAAgB,CACZ,UAAU,CAAC,eAAe,EAC1B;oBACI,QAAQ,EAAE,OAAO;iBACpB,CACJ,CACJ;gBACD,UAAU,CAAC,IAAI;aAClB;SACJ,CACJ,CAAC;IACN,CAAC;CACJ;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAiC;IAChE,OAAO,IAAI,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAC9C,CAAC;AAED,MAAM,OAAO,uBAAwB,SAAQ,SAAS;IAClD,YAAY,UAAiC;QACzC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACzC,CAAC;IACD,eAAe,CAAa;IAC5B,IAAI,CAAQ;CACf;AAED,YAAY,CACR,uBAAuB,EACvB,kBAAkB,CACrB,CAAA"}
+{"version":3,"file":"LabeledControl.js","sourceRoot":"","sources":["../../../../src/controls/custom/LabeledControl/LabeledControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAe,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,OAAO,EAAY,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,SAAS,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAO7D,MAAM,OAAO,qBAAsB,SAAQ,OAA+B;IACtE,YAAY,UAAkC;QAC1C,KAAK,CACD;YACI,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,gBAAgB,CACxB,UAAU,EACV;gBACI,WAAW,EAAE,gBAAgB;gBAC7B,UAAU,EAAE,CAAC,oBAAoB,CAAC;aACrC,CACJ;SACJ,EACD;YACI,UAAU,CACN,gBAAgB,CACZ,UAAU,CAAC,eAAe,EAC1B;gBACI,WAAW,EAAE,OAAO;aACvB,CACJ,CACJ;YACD,UAAU,CAAC,OAAO;SACrB,CACJ,CAAC;IACN,CAAC;CACJ;AAED,MAAM,UAAU,oBAAoB,CAAC,UAAkC;IACnE,OAAO,IAAI,qBAAqB,CAAC,UAAU,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,OAAO,wBAAyB,SAAQ,UAAU;IACpD,YAAY,UAAkC;QAC1C,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACzC,CAAC;IACD,eAAe,CAAa;IAC5B,OAAO,CAAW;CACrB;AAED,eAAe,CACX,wBAAwB,EACxB,qBAAqB,CACxB,CAAA"}

package/dist/controls/custom/ListItem/ListItem.d.ts

@@ -1,36 +1,37 @@
-import { View } from "../../../framework/View";
-import { ViewModel, Properties } from "../../../framework/ViewModel";
-export interface ListItemProperties extends Properties {
-    id: number | string;
-    text?: string | ViewModel;
-    select?: () => void;
-    order?: number | string;
-}
-export interface HierarchicalListItemProperties extends ListItemProperties {
-    parentId?: number | string;
-    expanded?: boolean;
-    items?: Array<HierarchicalListItemProperties>;
-}
-export declare class ListItemView extends View<ListItemProperties> {
-    constructor(properties: ListItemProperties);
-    build(): void;
-    private setContent;
-}
-export declare function listItemView(properties: ListItemProperties): ListItemView;
-export declare class ListItemViewModel extends ViewModel implements ListItemProperties {
-    constructor(properties: ListItemProperties);
-    id: number | string;
-    text?: string | ViewModel;
-    select?: () => void;
-    order?: number | string;
-}
-export declare class HierarchicalListItemViewModel extends ViewModel implements HierarchicalListItemProperties {
-    constructor(properties: HierarchicalListItemProperties);
-    id: number | string;
-    text?: string | ViewModel;
-    select?: () => void;
-    order?: number | string;
-    parentId?: number | string;
-    expanded?: boolean;
-    items?: Array<HierarchicalListItemProperties>;
-}
+import { Element } from "../../../framework/element";
+import { Properties, IProperties } from "../../../framework/properties";
+import { ISubscribable } from "../../../framework/observable";
+export interface IListItemProperties extends IProperties {
+    id: number | string;
+    text?: string | ISubscribable<string> | Properties;
+    select?: () => void;
+    order?: number | string;
+}
+export interface IHierarchicalListItemProperties extends IListItemProperties {
+    parentId?: number | string;
+    expanded?: boolean;
+    items?: Array<IHierarchicalListItemProperties>;
+}
+export declare class ListItemElement extends Element<IListItemProperties> {
+    constructor(properties: IListItemProperties);
+    build(): void;
+    private setContent;
+}
+export declare function createListItem(properties: IListItemProperties): ListItemElement;
+export declare class ListItemProperties extends Properties implements IListItemProperties {
+    constructor(properties: IListItemProperties);
+    id: number | string;
+    text?: string | Properties;
+    select?: () => void;
+    order?: number | string;
+}
+export declare class HierarchicalListItemProperties extends Properties implements IHierarchicalListItemProperties {
+    constructor(properties: IHierarchicalListItemProperties);
+    id: number | string;
+    text?: string | Properties;
+    select?: () => void;
+    order?: number | string;
+    parentId?: number | string;
+    expanded?: boolean;
+    items?: Array<IHierarchicalListItemProperties>;
+}