@node-projects/web-component-designer 0.0.292 → 0.1.1

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.js

@@ -1,204 +0,0 @@
-import { calculate as calculateSpecifity } from "./SpecificityCalculator.js";
-import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
-export class CssTreeStylesheetService extends AbstractStylesheetService {
-    constructor(designerCanvas) {
-        super(designerCanvas);
-    }
-    async internalParse(style) {
-        return window.csstree.toPlainObject((window.csstree.parse(style, { positions: true, parseValue: false })));
-    }
-    /* Section covers the retrieval of rules and declarations */
-    getAppliedRulesInternal(designItem) {
-        let styles = [];
-        for (let item of this._allStylesheets) {
-            if (!item[1].ast || !this.astHasChildren(item[1].ast))
-                continue;
-            styles = styles.concat(Array.from(this.rulesFromAST(item[1].ast, item[1].stylesheet.content, item[0], designItem)));
-        }
-        ;
-        return styles;
-    }
-    getAppliedRules(designItem) {
-        let rules = this.getAppliedRulesInternal(designItem);
-        if (!rules || rules.length == 0)
-            return [];
-        let retCollection = [];
-        for (let rule of rules) {
-            retCollection.push({
-                ...rule,
-                declarations: rule.ast.block.children.map((declaration) => {
-                    return {
-                        name: declaration.property,
-                        value: declaration.value.value,
-                        important: declaration.important == true,
-                        specificity: rule.specificity,
-                        parent: rule,
-                        ast: declaration,
-                    };
-                })
-            });
-        }
-        return retCollection;
-    }
-    getDeclarationInternal(designItem, styleName) {
-        let rules = this.getAppliedRulesInternal(designItem);
-        if (!rules)
-            return null;
-        let declarations = [];
-        for (let rule of rules) {
-            let declaration = this.findDeclarationInRule(rule.ast, styleName);
-            if (!declaration)
-                continue;
-            declarations.push({
-                ast: declaration,
-                parent: rule,
-                name: styleName,
-                value: declaration.value.value,
-                important: declaration.important == true,
-                stylesheet: rule.stylesheet
-            });
-        }
-        ;
-        return declarations;
-    }
-    getDeclarations(designItem, stlyeName) {
-        let declarations = this.getDeclarationInternal(designItem, stlyeName);
-        if (!declarations)
-            return null;
-        return this.sortDeclarations(declarations);
-    }
-    /* Section covers the update of rules and declarations */
-    updateDeclarationValueWithoutUndo(declaration, value, important) {
-        let sourceNode = this._allStylesheets.get(declaration.parent.stylesheetName);
-        declaration.ast.value = window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + value + (important ? " !important" : ""), { context: 'declaration', parseValue: false })).value;
-        const old = sourceNode.stylesheet.content;
-        sourceNode.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(sourceNode.ast));
-        // After generating the stylesheet, parse again (so line numbers are correct)
-        sourceNode.ast = window.csstree.toPlainObject((window.csstree.parse(sourceNode.stylesheet.content, { positions: true, parseValue: false })));
-        if (sourceNode.stylesheet.designItem) {
-            sourceNode.stylesheet.designItem.content = sourceNode.stylesheet.content;
-        }
-        else
-            this.stylesheetChanged.emit({ name: sourceNode.stylesheet.name, newStyle: sourceNode.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
-    }
-    insertDeclarationIntoRule(rule, property, value, important) {
-        let sourceNode = this._allStylesheets.get(rule.stylesheetName);
-        rule.ast.block.children.push(window.csstree.toPlainObject(window.csstree.parse(property + ": " + value + (important ? " !important" : ""), { context: 'declaration', parseValue: false })));
-        const old = sourceNode.stylesheet.content;
-        sourceNode.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(sourceNode.ast));
-        // After generating the stylesheet, parse again (so line numbers are correct)
-        sourceNode.ast = window.csstree.toPlainObject((window.csstree.parse(sourceNode.stylesheet.content, { positions: true, parseValue: false })));
-        if (sourceNode.stylesheet.designItem) {
-            sourceNode.stylesheet.designItem.content = sourceNode.stylesheet.content;
-        }
-        else
-            this.stylesheetChanged.emit({ name: sourceNode.stylesheet.name, newStyle: sourceNode.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
-        return true;
-    }
-    removeDeclarationFromRule(rule, property) {
-        let index = rule.ast.block.children.findIndex(x => x.property == property);
-        if (index == -1)
-            return false;
-        rule.ast.block.children.splice(index, 1);
-        const ss = this._allStylesheets.get(rule.stylesheetName);
-        const old = ss.stylesheet.content;
-        ss.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(this._allStylesheets.get(rule.stylesheetName).ast));
-        // After generating the stylesheet, parse again (so line numbers are correct)
-        ss.ast = window.csstree.toPlainObject((window.csstree.parse(this._allStylesheets.get(rule.stylesheetName).stylesheet.content, { positions: true, parseValue: false })));
-        if (ss.stylesheet.designItem) {
-            ss.stylesheet.designItem.content = ss.stylesheet.content;
-        }
-        else
-            this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
-        return true;
-    }
-    updateCompleteStylesheet(name, newStyle) {
-        this.updateCompleteStylesheetInternal(name, newStyle, 'styleupdate');
-    }
-    updateCompleteStylesheetWithoutUndo(name, newStyle, noUndo = false) {
-        this.updateCompleteStylesheetInternal(name, newStyle, 'undo');
-    }
-    updateCompleteStylesheetInternal(name, newStyle, changeSource) {
-        const ss = this._allStylesheets.get(name);
-        if (ss.stylesheet.content != newStyle) {
-            const old = ss.stylesheet.content;
-            ss.stylesheet.content = newStyle;
-            if (ss.stylesheet.designItem) {
-                ss.stylesheet.designItem.content = ss.stylesheet.content;
-            }
-            else
-                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource });
-        }
-    }
-    /* Section covers the internal traversal creation of rules and declarations */
-    *rulesFromAST(ast, stylesheet, source, designItem, previousCheck = '') {
-        let parent = ast["children"] != null ? ast : ast.block;
-        for (const child of parent.children) {
-            if (child.type == "Atrule") {
-                const currentCheck = this.buildAtRuleString(child, stylesheet);
-                if (currentCheck.type === "@media" && !window.matchMedia(currentCheck.sel))
-                    continue;
-                if (currentCheck.type === "@supports" && !CSS.supports(currentCheck.sel))
-                    continue;
-                let ruleCollection = this.rulesFromAST(child, stylesheet, source, designItem, previousCheck + currentCheck.type + " " + currentCheck.sel + "\n");
-                if (ruleCollection) {
-                    for (const r of ruleCollection) {
-                        if (!this.elementMatchesASelector(designItem, this.buildSelectorString(r.ast.prelude, stylesheet)))
-                            continue;
-                        yield r;
-                    }
-                }
-            }
-            if (child.type == "Rule") {
-                let selectors = this.buildSelectorString(child.prelude, stylesheet);
-                if (!this.elementMatchesASelector(designItem, selectors))
-                    continue;
-                yield ({
-                    ast: child,
-                    selector: previousCheck + this.buildSelectorString(child.prelude, stylesheet).join(", "),
-                    specificity: this.getSpecificity(child.prelude),
-                    stylesheetName: source,
-                    declarations: null,
-                    stylesheet: this._allStylesheets.get(source).stylesheet
-                });
-            }
-        }
-        ;
-    }
-    /* Utility functions for building selectors, specificity and so on  */
-    astHasChildren(ast) {
-        return ast != null && ast["children"] != null && ast["children"].length > 0;
-    }
-    buildSelectorString(selectorsAST, stylesheet) {
-        if (selectorsAST.type == 'SelectorList') {
-            return [...selectorsAST.children.map(x => this.buildSelectorString(x, stylesheet)[0])];
-        }
-        else {
-            return [stylesheet.substring(selectorsAST.loc.start.offset, selectorsAST.loc.end.offset)];
-        }
-    }
-    getSpecificity(selector) {
-        const specificities = calculateSpecifity(selector);
-        let sum = 0;
-        specificities.forEach(specificity => sum += specificity.a * 10000 + specificity.b * 100 + specificity.c);
-        return sum;
-    }
-    findDeclarationInRule(rule, styleName) {
-        return rule.block.children.find(declaration => declaration.property == styleName);
-    }
-    buildAtRuleString(ast, stylesheet) {
-        return {
-            sel: stylesheet.slice(ast.prelude.loc.start.offset, ast.prelude.loc.end.offset),
-            type: "@" + ast.name
-        };
-    }
-    sortDeclarations(declarations) {
-        if (declarations == null || declarations.length == 0)
-            return null;
-        return declarations.sort((dec1, dec2) => {
-            if (dec1.parent.specificity > dec2.parent.specificity)
-                return -1;
-            return 1;
-        });
-    }
-}

package/dist/elements/services/stylesheetService/SpecificityCalculator.d.ts

@@ -1,7 +0,0 @@
-type Specificity = {
-    a: 0;
-    b: 0;
-    c: 0;
-};
-declare const calculate: (selectorAST: any) => Specificity[];
-export { calculate };

package/dist/elements/services/stylesheetService/SpecificityCalculator.js

@@ -1,178 +0,0 @@
-const calculateSpecificityOfSelectorObject = (selectorObj) => {
-    // https://www.w3.org/TR/selectors-4/#specificity-rules
-    const specificity = { a: 0, b: 0, c: 0 };
-    selectorObj.children.forEach((child) => {
-        switch (child.type) {
-            case 'IdSelector':
-                specificity.a += 1;
-                break;
-            case 'AttributeSelector':
-            case 'ClassSelector':
-                specificity.b += 1;
-                break;
-            case 'PseudoClassSelector':
-                switch (child.name.toLowerCase()) {
-                    // “The specificity of a :where() pseudo-class is replaced by zero.”
-                    case 'where':
-                        // Noop :)
-                        break;
-                    // “The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.“
-                    case 'is':
-                    case 'matches':
-                    case '-webkit-any':
-                    case '-moz-any':
-                    case 'any':
-                    case 'not':
-                    case 'has':
-                        if (child.children) {
-                            // Calculate Specificity from nested SelectorList
-                            const max1 = max(...calculate(child.children.first));
-                            // Adjust orig specificity
-                            specificity.a += max1.a;
-                            specificity.b += max1.b;
-                            specificity.c += max1.c;
-                        }
-                        break;
-                    // “The specificity of an :nth-child() or :nth-last-child() selector is the specificity of the pseudo class itself (counting as one pseudo-class selector) plus the specificity of the most specific complex selector in its selector list argument”
-                    case 'nth-child':
-                    case 'nth-last-child':
-                        specificity.b += 1;
-                        if (child.children.first.selector) {
-                            // Calculate Specificity from SelectorList
-                            const max2 = max(...calculate(child.children.first.selector));
-                            // Adjust orig specificity
-                            specificity.a += max2.a;
-                            specificity.b += max2.b;
-                            specificity.c += max2.c;
-                        }
-                        break;
-                    // “The specificity of :host is that of a pseudo-class. The specificity of :host() is that of a pseudo-class, plus the specificity of its argument.”
-                    // “The specificity of :host-context() is that of a pseudo-class, plus the specificity of its argument.”
-                    case 'host-context':
-                    case 'host':
-                        specificity.b += 1;
-                        if (child.children) {
-                            // Workaround to a css-tree bug in which it allows complex selectors instead of only compound selectors
-                            // We work around it by filtering out any Combinator and successive Selectors
-                            const childAST = { type: 'Selector', children: [] };
-                            let foundCombinator = false;
-                            // @ts-ignore
-                            child.children.first.children.forEach((entry) => {
-                                if (foundCombinator)
-                                    return false;
-                                if (entry.type === 'Combinator') {
-                                    foundCombinator = true;
-                                    return false;
-                                }
-                                childAST.children.push(entry);
-                            });
-                            // Calculate Specificity from Selector
-                            const childSpecificity = calculate(childAST)[0];
-                            // Adjust orig specificity
-                            specificity.a += childSpecificity.a;
-                            specificity.b += childSpecificity.b;
-                            specificity.c += childSpecificity.c;
-                        }
-                        break;
-                    // Improper use of Pseudo-Class Selectors instead of a Pseudo-Element
-                    // @ref https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#index
-                    case 'after':
-                    case 'before':
-                    case 'first-letter':
-                    case 'first-line':
-                        specificity.c += 1;
-                        break;
-                    default:
-                        specificity.b += 1;
-                        break;
-                }
-                break;
-            case 'PseudoElementSelector':
-                switch (child.name) {
-                    // “The specificity of ::slotted() is that of a pseudo-element, plus the specificity of its argument.”
-                    case 'slotted':
-                        specificity.c += 1;
-                        if (child.children) {
-                            // Workaround to a css-tree bug in which it allows complex selectors instead of only compound selectors
-                            // We work around it by filtering out any Combinator and successive Selectors
-                            const childAST = { type: 'Selector', children: [] };
-                            let foundCombinator = false;
-                            // @ts-ignore
-                            child.children.first.children.forEach((entry) => {
-                                if (foundCombinator)
-                                    return false;
-                                if (entry.type === 'Combinator') {
-                                    foundCombinator = true;
-                                    return false;
-                                }
-                                childAST.children.push(entry);
-                            });
-                            // Calculate Specificity from Selector
-                            const childSpecificity = calculate(childAST)[0];
-                            // Adjust orig specificity
-                            specificity.a += childSpecificity.a;
-                            specificity.b += childSpecificity.b;
-                            specificity.c += childSpecificity.c;
-                        }
-                        break;
-                    default:
-                        specificity.c += 1;
-                        break;
-                }
-                break;
-            case 'TypeSelector':
-                // Omit namespace
-                let typeSelector = child.name;
-                if (typeSelector.includes('|')) {
-                    typeSelector = typeSelector.split('|')[1];
-                }
-                // “Ignore the universal selector”
-                if (typeSelector !== '*') {
-                    specificity.c += 1;
-                }
-                break;
-            default:
-                // NOOP
-                break;
-        }
-    });
-    return specificity;
-};
-const calculate = (selectorAST) => {
-    // Quit while you're ahead
-    if (!selectorAST) {
-        return [];
-    }
-    // Selector?
-    if (selectorAST.type === 'Selector')
-        return [calculateSpecificityOfSelectorObject(selectorAST)];
-    // SelectorList?
-    // ~> Calculate Specificity for each contained Selector
-    if (selectorAST.type === 'SelectorList') {
-        const specificities = [];
-        selectorAST.children.forEach((selector) => {
-            const specificity = calculateSpecificityOfSelectorObject(selector);
-            specificities.push(specificity);
-        });
-        return specificities;
-    }
-    return null;
-};
-const max = (...specificities) => {
-    const sorted = sort(specificities);
-    return sorted[0];
-};
-const sort = (specificities) => {
-    const sorted = specificities.sort(compare);
-    return sorted.reverse();
-};
-const compare = (s1, s2) => {
-    if (s1.a === s2.a) {
-        if (s1.b === s2.b) {
-            return s1.c - s2.c;
-        }
-        return s1.b - s2.b;
-    }
-    return s1.a - s2.a;
-};
-export { calculate };

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction copy.d.ts

@@ -1,15 +0,0 @@
-import { ITransactionItem } from '../ITransactionItem.js';
-import { IDesignItem } from '../../../item/IDesignItem.js';
-import { IBinding } from '../../../item/IBinding.js';
-export declare class AttributeChangeAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, name: string, newValue: string | IBinding | null, oldValue: string | IBinding | null);
-    title?: string;
-    get affectedItems(): IDesignItem[];
-    undo(): void;
-    do(): void;
-    designItem: IDesignItem;
-    name: string;
-    newValue: any;
-    oldValue: any;
-    mergeWith(other: ITransactionItem): boolean;
-}

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction copy.js

@@ -1,70 +0,0 @@
-export class AttributeChangeAction {
-    constructor(designItem, name, newValue, oldValue) {
-        this.title = "Change Attribute " + name + " of <" + designItem.name + ">";
-        this.designItem = designItem;
-        this.name = name;
-        this.newValue = newValue;
-        this.oldValue = oldValue;
-    }
-    title;
-    get affectedItems() {
-        return [this.designItem];
-    }
-    undo() {
-        if (this.oldValue == null) {
-            this.designItem._withoutUndoRemoveAttribute(this.name);
-            try {
-                this.designItem.element.removeAttribute(this.name);
-            }
-            catch (e) {
-                console.warn(e);
-            }
-        }
-        else {
-            this.designItem._withoutUndoSetAttribute(this.name, this.oldValue);
-            if (this.name != "draggable") {
-                try {
-                    if (typeof this.oldValue === 'string')
-                        this.designItem.element.setAttribute(this.name, this.oldValue);
-                }
-                catch (e) {
-                    console.warn(e);
-                }
-            }
-        }
-    }
-    do() {
-        if (this.newValue == null) {
-            this.designItem._withoutUndoRemoveAttribute(this.name);
-            try {
-                this.designItem.element.removeAttribute(this.name);
-            }
-            catch (e) {
-                console.warn(e);
-            }
-        }
-        else {
-            this.designItem._withoutUndoSetAttribute(this.name, this.newValue);
-            if (this.name != "draggable") {
-                try {
-                    if (typeof this.newValue === 'string')
-                        this.designItem.element.setAttribute(this.name, this.newValue);
-                }
-                catch (e) {
-                    console.warn(e);
-                }
-            }
-        }
-    }
-    designItem;
-    name;
-    newValue;
-    oldValue;
-    mergeWith(other) {
-        if (other instanceof AttributeChangeAction && this.designItem === other.designItem && this.name === other.name) {
-            this.newValue = other.newValue;
-            return true;
-        }
-        return false;
-    }
-}

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.d.ts

@@ -1,14 +0,0 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { IBindableObject } from '../../services/bindableObjectsService/IBindableObject.js';
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-export declare class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
-    private _treeDiv;
-    private _tree;
-    selectedObject: IBindableObject<any>;
-    objectDoubleclicked: TypedEvent<void>;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    initialize(serviceContainer: ServiceContainer): Promise<void>;
-    private deselectNodes;
-    private lazyLoad;
-}

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -1,137 +0,0 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent, css } from '@node-projects/base-custom-webcomponent';
-import { dragDropFormatNameBindingObject } from '../../../Constants.js';
-export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
-    _treeDiv;
-    _tree;
-    selectedObject;
-    objectDoubleclicked = new TypedEvent;
-    static style = css `
-      span.drag-source {
-        border: 1px solid grey;
-        border-radius: 3px;
-        padding: 2px;
-        background-color: silver;
-      }
-
-      span.fancytree-node.fancytree-drag-source {
-        outline: 1px dotted grey;
-      }
-      span.fancytree-node.fancytree-drop-accept {
-        outline: 1px dotted green;
-      }
-      span.fancytree-node.fancytree-drop-reject {
-        outline: 1px dotted red;
-      }
-      #tree ul {
-        border: none;
-      }
-      #tree ul:focus {
-        outline: none;
-      }
-    `;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        //@ts-ignore
-        if (window.importShim)
-            //@ts-ignore
-            importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        else
-            //@ts-ignore
-            import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        this._treeDiv = document.createElement('div');
-        this._treeDiv.style.height = '100%';
-        this._treeDiv.style.overflow = 'auto';
-        this._treeDiv.setAttribute('id', 'tree');
-        this.shadowRoot.appendChild(this._treeDiv);
-        $(this._treeDiv).fancytree({
-            debugLevel: 0,
-            icon: false,
-            extensions: ['dnd5', 'filter'],
-            quicksearch: true,
-            source: [],
-            lazyLoad: this.lazyLoad,
-            dblclick: (e) => {
-                this.objectDoubleclicked.emit();
-                return true;
-            },
-            activate: (event, data) => {
-                this.deselectNodes();
-                let node = data.node;
-                this.selectedObject = node.data.bindable;
-            },
-            filter: {
-                autoApply: true,
-                autoExpand: false,
-                counter: true,
-                fuzzy: false,
-                hideExpandedCounter: true,
-                hideExpanders: false,
-                highlight: true,
-                leavesOnly: false,
-                nodata: true,
-                mode: "dimm" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
-            },
-            dnd5: {
-                dropMarkerParent: this.shadowRoot,
-                preventRecursion: true,
-                preventVoidMoves: false,
-                dropMarkerOffsetX: -24,
-                dropMarkerInsertOffsetX: -16,
-                dragStart: (node, data) => {
-                    data.effectAllowed = "all";
-                    data.dataTransfer.setData(dragDropFormatNameBindingObject, JSON.stringify(node.data.bindable));
-                    data.dropEffect = "copy";
-                    return true;
-                },
-                dragEnter: (node, data) => {
-                    return false;
-                }
-            }
-        });
-        this._tree = $.ui.fancytree.getTree(this._treeDiv);
-        this._treeDiv.children[0].classList.add('fancytree-connectors');
-    }
-    async initialize(serviceContainer) {
-        let rootNode = this._tree.getRootNode();
-        rootNode.removeChildren();
-        const services = serviceContainer.bindableObjectsServices;
-        for (const s of services) {
-            const newNode = rootNode.addChildren({
-                title: s.name,
-                folder: true,
-                lazy: true,
-                data: {
-                    service: s
-                }
-            });
-            rootNode.addNode(newNode);
-        }
-    }
-    deselectNodes() {
-        let nodes = this._tree.getSelectedNodes();
-        nodes.forEach(node => {
-            node.setSelected(false);
-            node.setActive(false);
-        });
-    }
-    lazyLoad(event, data) {
-        data.result = new Promise(async (resolve) => {
-            const service = data.node.data.service;
-            const bindable = data.node.data.bindable;
-            let children;
-            if (bindable?.children)
-                children = bindable.children;
-            else
-                children = await service.getBindableObjects(bindable);
-            resolve(children.map(x => ({
-                service,
-                title: x.name,
-                bindable: x,
-                folder: x.children !== false,
-                lazy: x.children !== false
-            })));
-        });
-    }
-}
-customElements.define('node-projects-bindable-objects-browser', BindableObjectsBrowser);

package/dist/elements/widgets/codeView/code-view-ace.d.ts

@@ -1,24 +0,0 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from './ICodeView.js';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
-import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
-import { IDisposable } from '../../../interfaces/IDisposable.js';
-export declare class CodeViewAce extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
-    canvasElement: HTMLElement;
-    elementsToPackages: Map<string, string>;
-    code: string;
-    onTextChanged: TypedEvent<string>;
-    private _aceEditor;
-    private _editor;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    dispose(): void;
-    executeCommand(command: IUiCommand): void;
-    canExecuteCommand(command: IUiCommand): boolean;
-    focusEditor(): void;
-    oneTimeSetup(): void;
-    ready(): void;
-    update(code: any): void;
-    getText(): string;
-    setSelection(position: IStringPosition): void;
-}