@omicronenergy/oscd-scl-dialogs 0.0.7 → 0.0.9

package/dist/OscdSclDialogs.d.ts

@@ -16,6 +16,7 @@ import { MdListItem } from '@scopedelement/material-web/list/MdListItem.js';
 import { MdSelectOption } from '@scopedelement/material-web/select/MdSelectOption.js';
 import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
 import { WizardInputElement } from './foundation.js';
+import OscdTextEditor from './OscdTextEditor.js';
 export type EditWizard = {
     element: Element;
 };
@@ -24,8 +25,10 @@ export type CreateWizard = {
     tagName: string;
 };
 export type WizardType = EditWizard | CreateWizard;
-declare const OscdSclDialogs_base: typeof LitElement & import("@open-wc/scoped-elements/lit-element.js").ScopedElementsHostConstructor;
-export default class OscdSclDialogs extends OscdSclDialogs_base {
+declare const BaseElement_base: typeof LitElement & import("@open-wc/scoped-elements/lit-element.js").ScopedElementsHostConstructor;
+declare class BaseElement extends BaseElement_base {
+}
+export default class OscdSclDialogs extends BaseElement {
     wizardType: EditWizard | CreateWizard | null;
     private dialogClosePromise;
     static scopedElements: {
@@ -44,16 +47,31 @@ export default class OscdSclDialogs extends OscdSclDialogs_base {
         'action-list': typeof ActionList;
         'md-list': typeof MdList;
         'md-list-item': typeof MdListItem;
+        'oscd-text-editor': typeof OscdTextEditor;
     };
+    private editorMode;
     dialog: MdDialog;
+    textEditor: OscdTextEditor;
     inputs: WizardInputElement[];
+    private initialEditorText;
+    private currentEditorText;
     private checkValidity;
     private reportValidity;
     create(wizardType: CreateWizard): Promise<EditV2[]>;
     edit(wizardType: EditWizard): Promise<EditV2[]>;
+    /**
+     * Close triggers the dialog to close, which in turn triggers the `closed` event that resets the state of the dialog.
+     * Why? Because click-away will also close the dialog - no matter how it closes, we want to reset.
+     */
     close(): void;
+    /**
+     * No need to call this directly as the `closed` event will trigger a reset of the dialog's state, but this can be
+     * used to manually reset the dialog if needed.
+     */
     reset(): void;
-    private act;
+    private applyTextEdits;
+    private applyFormValues;
+    private handleToggleEditorMode;
     render(): TemplateResult;
     static styles: import("lit").CSSResult;
 }

package/dist/OscdSclDialogs.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
-import { property, query, queryAll } from 'lit/decorators.js';
+import { property, query, queryAll, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { SclCheckbox } from '@openenergytools/scl-checkbox';
 import { SclSelect } from '@openenergytools/scl-select';
@@ -18,12 +18,15 @@ import { MdListItem } from '@scopedelement/material-web/list/MdListItem.js';
 import { MdSelectOption } from '@scopedelement/material-web/select/MdSelectOption.js';
 import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
 import { wizards } from './wizards/wizards.js';
+import OscdTextEditor, { formatXml, newOscdTextEditV2, serializeXml, } from './OscdTextEditor.js';
+import { classMap } from 'lit/directives/class-map.js';
 function isCreateWizard(wizardType) {
     return ('parent' in wizardType &&
         'tagName' in wizardType);
 }
 function isEditWizard(wizardType) {
-    return ('element' in wizardType &&
+    return (!!wizardType &&
+        'element' in wizardType &&
         wizardType.element instanceof Element);
 }
 function getWizard(wizardType) {
@@ -54,11 +57,14 @@ function wizardAction(wizardType) {
     }
     return getWizard(wizardType)?.primary?.action;
 }
-class OscdSclDialogs extends ScopedElementsMixin(LitElement) {
+class BaseElement extends ScopedElementsMixin(LitElement) {
+}
+class OscdSclDialogs extends BaseElement {
     constructor() {
         super(...arguments);
         this.wizardType = null;
         this.dialogClosePromise = null;
+        this.editorMode = false;
     }
     checkValidity() {
         return Array.from(this.inputs).every(input => input.checkValidity());
@@ -86,6 +92,7 @@ class OscdSclDialogs extends ScopedElementsMixin(LitElement) {
     async edit(wizardType) {
         this.wizardType = wizardType;
         let edits = [];
+        this.initialEditorText = formatXml(serializeXml(this.wizardType.element));
         try {
             edits = await new Promise((resolve, reject) => {
                 this.dialogClosePromise = { resolve, reject };
@@ -98,10 +105,21 @@ class OscdSclDialogs extends ScopedElementsMixin(LitElement) {
         }
         return edits;
     }
+    /**
+     * Close triggers the dialog to close, which in turn triggers the `closed` event that resets the state of the dialog.
+     * Why? Because click-away will also close the dialog - no matter how it closes, we want to reset.
+     */
     close() {
         this.dialog.close();
     }
+    /**
+     * No need to call this directly as the `closed` event will trigger a reset of the dialog's state, but this can be
+     * used to manually reset the dialog if needed.
+     */
     reset() {
+        this.editorMode = false;
+        this.initialEditorText = undefined;
+        this.currentEditorText = undefined;
         this.wizardType = null;
         this.inputs.forEach(input => {
             input.value = '';
@@ -111,7 +129,24 @@ class OscdSclDialogs extends ScopedElementsMixin(LitElement) {
             input.reportValidity();
         });
     }
-    async act(action) {
+    async applyTextEdits() {
+        if (!this.wizardType ||
+            !isEditWizard(this.wizardType) ||
+            !this.currentEditorText ||
+            this.currentEditorText === this.initialEditorText) {
+            return;
+        }
+        const element = this.wizardType.element;
+        const edits = newOscdTextEditV2({
+            element,
+            newText: this.currentEditorText,
+        });
+        if (edits) {
+            this.dialogClosePromise?.resolve(edits);
+        }
+        this.close();
+    }
+    async applyFormValues(action) {
         if (action === undefined) {
             return false;
         }
@@ -123,9 +158,27 @@ class OscdSclDialogs extends ScopedElementsMixin(LitElement) {
         this.dialogClosePromise?.resolve(edits);
         return true;
     }
+    handleToggleEditorMode() {
+        if (this.editorMode && this.currentEditorText !== this.initialEditorText) {
+            const confirmLeave = window.confirm('You have unsaved changes. Are you sure you want to switch to form view? Your changes will be lost.');
+            if (!confirmLeave) {
+                return;
+            }
+        }
+        this.editorMode = !this.editorMode;
+        // Until we can safely sync edits between the Form and the Editor, we will need to
+        // reset the editor text. If the user navigated away from the Editor mode with changes
+        // they were already warned those changes would be lost.
+        if (this.editorMode && isEditWizard(this.wizardType)) {
+            this.currentEditorText = this.initialEditorText;
+        }
+    }
     render() {
         return html `<div>
       <md-dialog
+        class="${classMap({
+            'editor-mode': this.editorMode,
+        })}"
         @closed="${() => {
             this.reset();
         }}"
@@ -133,9 +186,32 @@ class OscdSclDialogs extends ScopedElementsMixin(LitElement) {
             this.dialogClosePromise?.reject();
         }}"
       >
-        <div slot="headline">${wizardTitle(this.wizardType)}</div>
+        <div slot="headline" class="dialog-header">
+          <span class="title">${wizardTitle(this.wizardType)}</span>
+
+          <span class="header-actions">
+            <md-icon-button
+              ?disabled="${!isEditWizard(this.wizardType)}"
+              aria-label="Code"
+              @click="${() => this.handleToggleEditorMode()}"
+            >
+              <md-icon>code</md-icon>
+            </md-icon-button>
+          </span>
+        </div>
         <form slot="content" method="dialog">
-          <div id="wizard-content">${wizardContent(this.wizardType)}</div>
+          ${this.editorMode
+            ? html `<div class="editor-content">
+                <oscd-text-editor
+                  .value=${this.initialEditorText}
+                  @change=${(e) => {
+                this.currentEditorText = e.detail;
+            }}
+                ></oscd-text-editor>
+              </div>`
+            : html `<div class="wizard-content">
+                ${wizardContent(this.wizardType)}
+              </div>`}
         </form>
         <div slot="actions">
           <md-text-button
@@ -149,7 +225,9 @@ class OscdSclDialogs extends ScopedElementsMixin(LitElement) {
           >
           <md-filled-button
             form="add-data-object"
-            @click=${() => this.act(wizardAction(this.wizardType))}
+            @click=${() => this.editorMode
+            ? this.applyTextEdits()
+            : this.applyFormValues(wizardAction(this.wizardType))}
             >Save</md-filled-button
           >
         </div>
@@ -173,6 +251,7 @@ OscdSclDialogs.scopedElements = {
     'action-list': ActionList,
     'md-list': MdList,
     'md-list-item': MdListItem,
+    'oscd-text-editor': OscdTextEditor,
 };
 OscdSclDialogs.styles = css `
     *,
@@ -246,12 +325,41 @@ OscdSclDialogs.styles = css `
       --md-dialog-container-max-width: 100%;
     }
 
-    #wizard-content {
+    md-dialog.editor-mode {
+      width: 80%;
+      height: 80%;
+    }
+
+    .dialog-header {
+      display: flex;
+      align-items: center;
+    }
+
+    .dialog-header .title {
+      flex: 1;
+    }
+
+    .editor-mode form,
+    .editor-content,
+    .editor-content oscd-text-editor {
+      height: 100%;
+    }
+
+    .editor-mode form {
+      padding-inline: 0px;
+    }
+
+    .editor-mode form .editor-content {
+      border-top: 1px solid var(--oscd-base0);
+      border-bottom: 1px solid var(--oscd-base0);
+    }
+
+    .wizard-content {
       display: flex;
       flex-direction: column;
     }
 
-    #wizard-content > * {
+    .wizard-content > * {
       display: block;
       margin-top: 16px;
     }
@@ -260,10 +368,22 @@ export default OscdSclDialogs;
 __decorate([
     property({ type: Object })
 ], OscdSclDialogs.prototype, "wizardType", void 0);
+__decorate([
+    state()
+], OscdSclDialogs.prototype, "editorMode", void 0);
 __decorate([
     query('md-dialog')
 ], OscdSclDialogs.prototype, "dialog", void 0);
+__decorate([
+    query('oscd-text-editor')
+], OscdSclDialogs.prototype, "textEditor", void 0);
 __decorate([
     queryAll('scl-text-field, scl-select, scl-checkbox, md-filled-textfield, md-filled-select')
 ], OscdSclDialogs.prototype, "inputs", void 0);
+__decorate([
+    state()
+], OscdSclDialogs.prototype, "initialEditorText", void 0);
+__decorate([
+    state()
+], OscdSclDialogs.prototype, "currentEditorText", void 0);
 //# sourceMappingURL=OscdSclDialogs.js.map

package/dist/OscdSclDialogs.js.map

@@ -1 +1 @@
-{"version":3,"file":"OscdSclDialogs.js","sourceRoot":"","sources":["../OscdSclDialogs.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit';\nimport { property, query, queryAll } from 'lit/decorators.js';\n\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\n\nimport { EditV2 } from '@openscd/oscd-api';\nimport { SclCheckbox } from '@openenergytools/scl-checkbox';\nimport { SclSelect } from '@openenergytools/scl-select';\nimport { SclTextField } from '@openenergytools/scl-text-field';\n\nimport { ActionList } from '@openenergytools/filterable-lists/dist/ActionList.js';\nimport { SelectionList } from '@openenergytools/filterable-lists/dist/SelectionList.js';\n\nimport { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';\nimport { MdFilledSelect } from '@scopedelement/material-web/select/MdFilledSelect.js';\nimport { MdFilledTextField } from '@scopedelement/material-web/textfield/MdFilledTextField.js';\nimport { MdIcon } from '@scopedelement/material-web/icon/MdIcon.js';\nimport { MdIconButton } from '@scopedelement/material-web/iconbutton/MdIconButton.js';\nimport { MdFilledButton } from '@scopedelement/material-web/button/MdFilledButton.js';\nimport { MdList } from '@scopedelement/material-web/list/MdList.js';\nimport { MdListItem } from '@scopedelement/material-web/list/MdListItem.js';\nimport { MdSelectOption } from '@scopedelement/material-web/select/MdSelectOption.js';\nimport { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';\n\nimport { wizards } from './wizards/wizards.js';\n\nimport { Wizard, WizardActor, WizardInputElement } from './foundation.js';\n\nexport type EditWizard = {\n  element: Element;\n};\n\nexport type CreateWizard = {\n  parent: Element;\n  tagName: string;\n};\n\nexport type WizardType = EditWizard | CreateWizard;\n\nfunction isCreateWizard(wizardType: unknown): wizardType is CreateWizard {\n  return (\n    'parent' in (wizardType as CreateWizard) &&\n    'tagName' in (wizardType as CreateWizard)\n  );\n}\n\nfunction isEditWizard(wizardType: unknown): wizardType is EditWizard {\n  return (\n    'element' in (wizardType as EditWizard) &&\n    (wizardType as EditWizard).element instanceof Element\n  );\n}\n\nfunction getWizard(wizardType: WizardType): Wizard | undefined {\n  if (isCreateWizard(wizardType)) {\n    const { parent, tagName } = wizardType;\n    const wizard = wizards[tagName].create(parent);\n    return wizard;\n  }\n\n  if (isEditWizard(wizardType)) {\n    const { element } = wizardType;\n    const wizard = wizards[element.tagName].edit(element);\n\n    return wizard;\n  }\n\n  return undefined;\n}\n\nfunction wizardContent(wizardType: WizardType | null): TemplateResult[] {\n  return (\n    (wizardType && getWizard(wizardType)?.content) || [\n      html`<div>Invalid wizard type definition</div>`,\n    ]\n  );\n}\n\nfunction wizardTitle(wizardType: WizardType | null): string {\n  return (\n    (wizardType && getWizard(wizardType)?.title) ||\n    'Invalid wizard type definition'\n  );\n}\n\nfunction wizardAction(wizardType: WizardType): WizardActor | undefined {\n  if (!wizardType) {\n    return undefined;\n  }\n  return getWizard(wizardType)?.primary?.action;\n}\n\nexport default class OscdSclDialogs extends ScopedElementsMixin(LitElement) {\n  @property({ type: Object })\n  wizardType: EditWizard | CreateWizard | null = null;\n\n  private dialogClosePromise: {\n    resolve: (value: EditV2[]) => void;\n    reject: () => void;\n  } | null = null;\n\n  static scopedElements = {\n    'md-dialog': MdDialog,\n    'md-text-button': MdTextButton,\n    'md-filled-button': MdFilledButton,\n    'scl-checkbox': SclCheckbox,\n    'scl-text-field': SclTextField,\n    'scl-select': SclSelect,\n    'md-filled-textfield': MdFilledTextField,\n    'md-filled-select': MdFilledSelect,\n    'md-select-option': MdSelectOption,\n    'md-icon-button': MdIconButton,\n    'md-icon': MdIcon,\n    'selection-list': SelectionList,\n    'action-list': ActionList,\n    'md-list': MdList,\n    'md-list-item': MdListItem,\n  };\n\n  @query('md-dialog') dialog!: MdDialog;\n\n  @queryAll(\n    'scl-text-field, scl-select, scl-checkbox, md-filled-textfield, md-filled-select',\n  )\n  inputs!: WizardInputElement[];\n\n  private checkValidity(): boolean {\n    return Array.from(this.inputs).every(input => input.checkValidity());\n  }\n\n  private reportValidity(): void {\n    this.inputs.forEach(input => {\n      input.reportValidity();\n    });\n  }\n\n  async create(wizardType: CreateWizard): Promise<EditV2[]> {\n    this.wizardType = wizardType;\n    let edits: EditV2[] = [];\n    try {\n      edits = await new Promise<EditV2[]>((resolve, reject) => {\n        this.dialogClosePromise = { resolve, reject };\n\n        this.dialog.show();\n      });\n    } catch {\n      // ignore\n    }\n    this.close();\n    return edits;\n  }\n\n  async edit(wizardType: EditWizard): Promise<EditV2[]> {\n    this.wizardType = wizardType;\n    let edits: EditV2[] = [];\n    try {\n      edits = await new Promise<EditV2[]>((resolve, reject) => {\n        this.dialogClosePromise = { resolve, reject };\n\n        this.dialog.show();\n      });\n      this.close();\n    } catch {\n      // ignore\n    }\n    return edits;\n  }\n\n  close(): void {\n    this.dialog.close();\n  }\n\n  reset(): void {\n    this.wizardType = null;\n    this.inputs.forEach(input => {\n      input.value = '';\n      if ('setCustomValidity' in input) {\n        input.setCustomValidity('');\n      }\n      input.reportValidity();\n    });\n  }\n\n  private async act(action?: WizardActor): Promise<boolean> {\n    if (action === undefined) {\n      return false;\n    }\n\n    if (!this.checkValidity()) {\n      this.reportValidity();\n      return false;\n    }\n\n    const edits = action(Array.from(this.inputs), this.dialog);\n    this.dialogClosePromise?.resolve(edits);\n    return true;\n  }\n\n  render(): TemplateResult {\n    return html`<div>\n      <md-dialog\n        @closed=\"${() => {\n          this.reset();\n        }}\"\n        @cancel=\"${() => {\n          this.dialogClosePromise?.reject();\n        }}\"\n      >\n        <div slot=\"headline\">${wizardTitle(this.wizardType)}</div>\n        <form slot=\"content\" method=\"dialog\">\n          <div id=\"wizard-content\">${wizardContent(this.wizardType)}</div>\n        </form>\n        <div slot=\"actions\">\n          <md-text-button\n            id=\"close-button\"\n            form=\"add-data-object\"\n            @click=\"${(event: Event) => {\n              event.stopImmediatePropagation();\n              this.close();\n            }}\"\n            >Cancel</md-text-button\n          >\n          <md-filled-button\n            form=\"add-data-object\"\n            @click=${() => this.act(wizardAction(this.wizardType!))}\n            >Save</md-filled-button\n          >\n        </div>\n      </md-dialog>\n    </div>`;\n  }\n\n  static styles = css`\n    *,\n    md-filled-button * {\n      --md-dialog-container-color: var(\n        --wizard-dialog-background-color,\n        var(--oscd-base3)\n      );\n      --md-dialog-headline-color: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n      --md-dialog-headline-font: var(\n        --wizard-dialog-text-font,\n        var(--oscd-text-font)\n      );\n      --md-dialog-supporting-text-color: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n      --md-dialog-supporting-text-font: var(\n        --wizard-dialog-text-font,\n        var(--oscd-text-font)\n      );\n\n      --md-sys-color-primary: var(--wizard-dialog-primary, var(--oscd-primary));\n      --md-sys-color-secondary: var(\n        --wizard-dialog-secondary,\n        var(--oscd-secondary)\n      );\n      --md-sys-typescale-body-large-font: var(\n        --wizard-dialog-text-font,\n        var(--oscd-text-font)\n      );\n\n      --md-sys-color-surface-container-highest: var(\n        --wizard-dailog-input-background-color,\n        var(--oscd-base3)\n      );\n      --md-outlined-text-field-input-text-color: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n      --md-sys-color-on-surface: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n      --md-sys-color-on-primary: var(\n        --wizard-dialog-background-color,\n        var(--oscd-base3)\n      );\n\n      --md-sys-color-surface: var(--wizard-dialog-surface, var(--oscd-base3));\n      --md-sys-color-on-surface-variant: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n\n      --md-menu-container-color: var(\n        --wizard-dialog-background-color,\n        var(--oscd-base3)\n      );\n\n      --md-menu-item-selected-container-color: rgb(\n        from var(--wizard-dialog-primary, var(--oscd-primary)) r g b / 0.38\n      );\n    }\n\n    md-dialog {\n      --md-dialog-container-max-height: 100%;\n      --md-dialog-container-max-width: 100%;\n    }\n\n    #wizard-content {\n      display: flex;\n      flex-direction: column;\n    }\n\n    #wizard-content > * {\n      display: block;\n      margin-top: 16px;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"OscdSclDialogs.js","sourceRoot":"","sources":["../OscdSclDialogs.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit';\nimport { property, query, queryAll, state } from 'lit/decorators.js';\n\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';\n\nimport { EditV2 } from '@openscd/oscd-api';\nimport { SclCheckbox } from '@openenergytools/scl-checkbox';\nimport { SclSelect } from '@openenergytools/scl-select';\nimport { SclTextField } from '@openenergytools/scl-text-field';\n\nimport { ActionList } from '@openenergytools/filterable-lists/dist/ActionList.js';\nimport { SelectionList } from '@openenergytools/filterable-lists/dist/SelectionList.js';\n\nimport { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';\nimport { MdFilledSelect } from '@scopedelement/material-web/select/MdFilledSelect.js';\nimport { MdFilledTextField } from '@scopedelement/material-web/textfield/MdFilledTextField.js';\nimport { MdIcon } from '@scopedelement/material-web/icon/MdIcon.js';\nimport { MdIconButton } from '@scopedelement/material-web/iconbutton/MdIconButton.js';\nimport { MdFilledButton } from '@scopedelement/material-web/button/MdFilledButton.js';\nimport { MdList } from '@scopedelement/material-web/list/MdList.js';\nimport { MdListItem } from '@scopedelement/material-web/list/MdListItem.js';\nimport { MdSelectOption } from '@scopedelement/material-web/select/MdSelectOption.js';\nimport { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';\n\nimport { wizards } from './wizards/wizards.js';\n\nimport { Wizard, WizardActor, WizardInputElement } from './foundation.js';\nimport OscdTextEditor, {\n  formatXml,\n  newOscdTextEditV2,\n  serializeXml,\n} from './OscdTextEditor.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport type EditWizard = {\n  element: Element;\n};\n\nexport type CreateWizard = {\n  parent: Element;\n  tagName: string;\n};\n\nexport type WizardType = EditWizard | CreateWizard;\n\nfunction isCreateWizard(wizardType: unknown): wizardType is CreateWizard {\n  return (\n    'parent' in (wizardType as CreateWizard) &&\n    'tagName' in (wizardType as CreateWizard)\n  );\n}\n\nfunction isEditWizard(wizardType: unknown): wizardType is EditWizard {\n  return (\n    !!wizardType &&\n    'element' in (wizardType as EditWizard) &&\n    (wizardType as EditWizard).element instanceof Element\n  );\n}\n\nfunction getWizard(wizardType: WizardType): Wizard | undefined {\n  if (isCreateWizard(wizardType)) {\n    const { parent, tagName } = wizardType;\n    const wizard = wizards[tagName].create(parent);\n    return wizard;\n  }\n\n  if (isEditWizard(wizardType)) {\n    const { element } = wizardType;\n    const wizard = wizards[element.tagName].edit(element);\n\n    return wizard;\n  }\n\n  return undefined;\n}\n\nfunction wizardContent(wizardType: WizardType | null): TemplateResult[] {\n  return (\n    (wizardType && getWizard(wizardType)?.content) || [\n      html`<div>Invalid wizard type definition</div>`,\n    ]\n  );\n}\n\nfunction wizardTitle(wizardType: WizardType | null): string {\n  return (\n    (wizardType && getWizard(wizardType)?.title) ||\n    'Invalid wizard type definition'\n  );\n}\n\nfunction wizardAction(wizardType: WizardType): WizardActor | undefined {\n  if (!wizardType) {\n    return undefined;\n  }\n  return getWizard(wizardType)?.primary?.action;\n}\n\nclass BaseElement extends ScopedElementsMixin(LitElement) {}\n\nexport default class OscdSclDialogs extends BaseElement {\n  @property({ type: Object })\n  wizardType: EditWizard | CreateWizard | null = null;\n\n  private dialogClosePromise: {\n    resolve: (value: EditV2[]) => void;\n    reject: () => void;\n  } | null = null;\n\n  static scopedElements = {\n    'md-dialog': MdDialog,\n    'md-text-button': MdTextButton,\n    'md-filled-button': MdFilledButton,\n    'scl-checkbox': SclCheckbox,\n    'scl-text-field': SclTextField,\n    'scl-select': SclSelect,\n    'md-filled-textfield': MdFilledTextField,\n    'md-filled-select': MdFilledSelect,\n    'md-select-option': MdSelectOption,\n    'md-icon-button': MdIconButton,\n    'md-icon': MdIcon,\n    'selection-list': SelectionList,\n    'action-list': ActionList,\n    'md-list': MdList,\n    'md-list-item': MdListItem,\n    'oscd-text-editor': OscdTextEditor,\n  };\n\n  @state()\n  private editorMode: boolean = false;\n\n  @query('md-dialog')\n  dialog!: MdDialog;\n\n  @query('oscd-text-editor')\n  textEditor!: OscdTextEditor;\n\n  @queryAll(\n    'scl-text-field, scl-select, scl-checkbox, md-filled-textfield, md-filled-select',\n  )\n  inputs!: WizardInputElement[];\n\n  @state()\n  private initialEditorText: string | undefined;\n\n  @state()\n  private currentEditorText: string | undefined;\n\n  private checkValidity(): boolean {\n    return Array.from(this.inputs).every(input => input.checkValidity());\n  }\n\n  private reportValidity(): void {\n    this.inputs.forEach(input => {\n      input.reportValidity();\n    });\n  }\n\n  async create(wizardType: CreateWizard): Promise<EditV2[]> {\n    this.wizardType = wizardType;\n    let edits: EditV2[] = [];\n    try {\n      edits = await new Promise<EditV2[]>((resolve, reject) => {\n        this.dialogClosePromise = { resolve, reject };\n\n        this.dialog.show();\n      });\n    } catch {\n      // ignore\n    }\n    this.close();\n    return edits;\n  }\n\n  async edit(wizardType: EditWizard): Promise<EditV2[]> {\n    this.wizardType = wizardType;\n    let edits: EditV2[] = [];\n    this.initialEditorText = formatXml(serializeXml(this.wizardType.element));\n    try {\n      edits = await new Promise<EditV2[]>((resolve, reject) => {\n        this.dialogClosePromise = { resolve, reject };\n\n        this.dialog.show();\n      });\n      this.close();\n    } catch {\n      // ignore\n    }\n    return edits;\n  }\n\n  /**\n   * Close triggers the dialog to close, which in turn triggers the `closed` event that resets the state of the dialog.\n   * Why? Because click-away will also close the dialog - no matter how it closes, we want to reset.\n   */\n  close(): void {\n    this.dialog.close();\n  }\n\n  /**\n   * No need to call this directly as the `closed` event will trigger a reset of the dialog's state, but this can be\n   * used to manually reset the dialog if needed.\n   */\n  reset(): void {\n    this.editorMode = false;\n    this.initialEditorText = undefined;\n    this.currentEditorText = undefined;\n    this.wizardType = null;\n    this.inputs.forEach(input => {\n      input.value = '';\n      if ('setCustomValidity' in input) {\n        input.setCustomValidity('');\n      }\n      input.reportValidity();\n    });\n  }\n\n  private async applyTextEdits(): Promise<void> {\n    if (\n      !this.wizardType ||\n      !isEditWizard(this.wizardType) ||\n      !this.currentEditorText ||\n      this.currentEditorText === this.initialEditorText\n    ) {\n      return;\n    }\n\n    const element = this.wizardType.element;\n    const edits = newOscdTextEditV2({\n      element,\n      newText: this.currentEditorText,\n    });\n    if (edits) {\n      this.dialogClosePromise?.resolve(edits);\n    }\n\n    this.close();\n  }\n\n  private async applyFormValues(action?: WizardActor): Promise<boolean> {\n    if (action === undefined) {\n      return false;\n    }\n\n    if (!this.checkValidity()) {\n      this.reportValidity();\n      return false;\n    }\n\n    const edits = action(Array.from(this.inputs), this.dialog);\n    this.dialogClosePromise?.resolve(edits);\n    return true;\n  }\n\n  private handleToggleEditorMode(): void {\n    if (this.editorMode && this.currentEditorText !== this.initialEditorText) {\n      const confirmLeave = window.confirm(\n        'You have unsaved changes. Are you sure you want to switch to form view? Your changes will be lost.',\n      );\n      if (!confirmLeave) {\n        return;\n      }\n    }\n    this.editorMode = !this.editorMode;\n    // Until we can safely sync edits between the Form and the Editor, we will need to\n    // reset the editor text. If the user navigated away from the Editor mode with changes\n    // they were already warned those changes would be lost.\n    if (this.editorMode && isEditWizard(this.wizardType)) {\n      this.currentEditorText = this.initialEditorText;\n    }\n  }\n\n  render(): TemplateResult {\n    return html`<div>\n      <md-dialog\n        class=\"${classMap({\n          'editor-mode': this.editorMode,\n        })}\"\n        @closed=\"${() => {\n          this.reset();\n        }}\"\n        @cancel=\"${() => {\n          this.dialogClosePromise?.reject();\n        }}\"\n      >\n        <div slot=\"headline\" class=\"dialog-header\">\n          <span class=\"title\">${wizardTitle(this.wizardType)}</span>\n\n          <span class=\"header-actions\">\n            <md-icon-button\n              ?disabled=\"${!isEditWizard(this.wizardType)}\"\n              aria-label=\"Code\"\n              @click=\"${() => this.handleToggleEditorMode()}\"\n            >\n              <md-icon>code</md-icon>\n            </md-icon-button>\n          </span>\n        </div>\n        <form slot=\"content\" method=\"dialog\">\n          ${this.editorMode\n            ? html`<div class=\"editor-content\">\n                <oscd-text-editor\n                  .value=${this.initialEditorText}\n                  @change=${(e: CustomEvent<string>) => {\n                    this.currentEditorText = e.detail;\n                  }}\n                ></oscd-text-editor>\n              </div>`\n            : html`<div class=\"wizard-content\">\n                ${wizardContent(this.wizardType)}\n              </div>`}\n        </form>\n        <div slot=\"actions\">\n          <md-text-button\n            id=\"close-button\"\n            form=\"add-data-object\"\n            @click=\"${(event: Event) => {\n              event.stopImmediatePropagation();\n              this.close();\n            }}\"\n            >Cancel</md-text-button\n          >\n          <md-filled-button\n            form=\"add-data-object\"\n            @click=${() =>\n              this.editorMode\n                ? this.applyTextEdits()\n                : this.applyFormValues(wizardAction(this.wizardType!))}\n            >Save</md-filled-button\n          >\n        </div>\n      </md-dialog>\n    </div>`;\n  }\n\n  static styles = css`\n    *,\n    md-filled-button * {\n      --md-dialog-container-color: var(\n        --wizard-dialog-background-color,\n        var(--oscd-base3)\n      );\n      --md-dialog-headline-color: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n      --md-dialog-headline-font: var(\n        --wizard-dialog-text-font,\n        var(--oscd-text-font)\n      );\n      --md-dialog-supporting-text-color: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n      --md-dialog-supporting-text-font: var(\n        --wizard-dialog-text-font,\n        var(--oscd-text-font)\n      );\n\n      --md-sys-color-primary: var(--wizard-dialog-primary, var(--oscd-primary));\n      --md-sys-color-secondary: var(\n        --wizard-dialog-secondary,\n        var(--oscd-secondary)\n      );\n      --md-sys-typescale-body-large-font: var(\n        --wizard-dialog-text-font,\n        var(--oscd-text-font)\n      );\n\n      --md-sys-color-surface-container-highest: var(\n        --wizard-dailog-input-background-color,\n        var(--oscd-base3)\n      );\n      --md-outlined-text-field-input-text-color: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n      --md-sys-color-on-surface: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n      --md-sys-color-on-primary: var(\n        --wizard-dialog-background-color,\n        var(--oscd-base3)\n      );\n\n      --md-sys-color-surface: var(--wizard-dialog-surface, var(--oscd-base3));\n      --md-sys-color-on-surface-variant: var(\n        --wizard-dialog-text-color,\n        var(--oscd-base00)\n      );\n\n      --md-menu-container-color: var(\n        --wizard-dialog-background-color,\n        var(--oscd-base3)\n      );\n\n      --md-menu-item-selected-container-color: rgb(\n        from var(--wizard-dialog-primary, var(--oscd-primary)) r g b / 0.38\n      );\n    }\n\n    md-dialog {\n      --md-dialog-container-max-height: 100%;\n      --md-dialog-container-max-width: 100%;\n    }\n\n    md-dialog.editor-mode {\n      width: 80%;\n      height: 80%;\n    }\n\n    .dialog-header {\n      display: flex;\n      align-items: center;\n    }\n\n    .dialog-header .title {\n      flex: 1;\n    }\n\n    .editor-mode form,\n    .editor-content,\n    .editor-content oscd-text-editor {\n      height: 100%;\n    }\n\n    .editor-mode form {\n      padding-inline: 0px;\n    }\n\n    .editor-mode form .editor-content {\n      border-top: 1px solid var(--oscd-base0);\n      border-bottom: 1px solid var(--oscd-base0);\n    }\n\n    .wizard-content {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .wizard-content > * {\n      display: block;\n      margin-top: 16px;\n    }\n  `;\n}\n"]}

package/dist/OscdTextEditor.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, type PropertyValueMap } from 'lit';
+import type * as AceGlobal from 'ace-builds';
+import 'ace-builds/src-noconflict/ace.js';
+import 'ace-builds/src-noconflict/theme-sqlserver.js';
+import 'ace-builds/src-noconflict/mode-xml.js';
+import 'ace-builds/src-noconflict/ext-searchbox.js';
+import type AceEditor from 'ace-custom-element';
+import { EditV2 } from '@openscd/oscd-api';
+declare global {
+    interface Window {
+        ace: typeof AceGlobal;
+    }
+}
+export declare function parseXml(xml: string): XMLDocument;
+export declare function serializeXml(xml: XMLDocument | Element): string;
+export declare function formatXml(rawXml: string | undefined, initialIndent?: string): string;
+export declare function newOscdTextEditV2({ element, newText, }: {
+    element: Element;
+    newText: string;
+}): EditV2[] | null;
+declare const BaseElement_base: typeof LitElement & import("@open-wc/scoped-elements/lit-element.js").ScopedElementsHostConstructor;
+declare class BaseElement extends BaseElement_base {
+}
+/**
+ * Intent is to keep this generic so it can be migrated to oscd-ui.
+ */
+export default class OscdTextEditor extends BaseElement {
+    static scopedElements: {};
+    constructor();
+    value: string | undefined;
+    aceEditor: AceEditor;
+    format(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleAceChange;
+    protected updated(changedProps: PropertyValueMap<OscdTextEditor>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export {};

package/dist/OscdTextEditor.js

@@ -0,0 +1,239 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import 'ace-builds/src-noconflict/ace.js';
+import 'ace-builds/src-noconflict/theme-sqlserver.js';
+import 'ace-builds/src-noconflict/mode-xml.js';
+import 'ace-builds/src-noconflict/ext-searchbox.js';
+const serializer = new XMLSerializer();
+const parser = new DOMParser();
+const ACE_DEFAULT_OPTIONS = {
+    fontSize: '14',
+    theme: 'ace/theme/sqlserver',
+    mode: 'ace/mode/xml',
+};
+const storageKey = 'oscd:ace-options';
+const getStoredAceOptions = () => {
+    try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored) {
+            return {
+                ...ACE_DEFAULT_OPTIONS,
+                ...JSON.parse(stored),
+            };
+        }
+    }
+    catch (error) {
+        console.warn('Failed to retrieve Ace options from storage:', error);
+    }
+    return ACE_DEFAULT_OPTIONS;
+};
+let aceOptions = getStoredAceOptions();
+function manageAceOptionChange(editor) {
+    editor.setOptions(aceOptions);
+    const originalSetOption = editor.setOption.bind(editor);
+    const originalSetOptions = editor.setOptions.bind(editor);
+    const persistOptions = () => {
+        try {
+            aceOptions = {
+                ...ACE_DEFAULT_OPTIONS,
+                ...editor.getOptions(),
+            };
+            localStorage.setItem(storageKey, JSON.stringify(aceOptions));
+        }
+        catch (error) {
+            console.warn('Failed to store Ace options:', error);
+        }
+    };
+    editor.setOption = (name, value) => {
+        originalSetOption(name, value);
+        persistOptions();
+    };
+    editor.setOptions = (options) => {
+        originalSetOptions(options);
+        persistOptions();
+    };
+}
+export function parseXml(xml) {
+    const parsed = parser.parseFromString(xml, 'application/xml');
+    const parseError = parsed.querySelector('parsererror');
+    if (parseError) {
+        const error = new Error(parseError.textContent ?? 'Invalid XML');
+        console.error('XML Parsing Error:', error);
+    }
+    return parsed;
+}
+export function serializeXml(xml) {
+    return serializer.serializeToString(xml);
+}
+export function formatXml(rawXml, initialIndent = '') {
+    if (!rawXml) {
+        return '';
+    }
+    // Trim leading and trailing whitespace to avoid injecting extra < or >
+    const xml = rawXml.trim();
+    let formatted = '';
+    let indent = '';
+    const tab = '\t';
+    const nodes = xml.split(/>\s*</);
+    nodes.forEach(function (node, index) {
+        // Remove leading < from first node and trailing > from last node. Allow for selection leading or trailing whitespace.
+        if (index === 0) {
+            node = node.replace(/^\s*</, '');
+        }
+        if (index === nodes.length - 1) {
+            node = node.replace(/>\s*$/, '');
+        }
+        if (node.match(/^\/\w/)) {
+            indent = indent.substring(tab.length);
+        }
+        formatted += initialIndent + indent + '<' + node + '>\r\n';
+        if (node.match(/^<?\w[^>]*[^/]$/)) {
+            indent += tab;
+        }
+    });
+    return formatted.trim();
+}
+export function newOscdTextEditV2({ element, newText, }) {
+    let newDoc = null;
+    try {
+        newDoc = newText ? parseXml(newText) : null;
+    }
+    catch (error) {
+        console.error('Failed to parse XML:', error);
+        return null;
+    }
+    if (element) {
+        // get the parent and if we don't have a parent, use the documentElement
+        const parent = element.parentElement ?? element.ownerDocument;
+        const nextSibling = element.nextSibling ?? null;
+        const newElement = newDoc
+            ? element.ownerDocument.importNode(newDoc?.documentElement, true)
+            : null;
+        return [
+            { node: element },
+            ...(newElement
+                ? [
+                    {
+                        node: newElement,
+                        parent,
+                        reference: nextSibling,
+                    },
+                ]
+                : []),
+        ];
+    }
+    return null;
+}
+class BaseElement extends ScopedElementsMixin(LitElement) {
+}
+/**
+ * Intent is to keep this generic so it can be migrated to oscd-ui.
+ */
+class OscdTextEditor extends BaseElement {
+    constructor() {
+        super();
+        // Special handling to prevent ace-editor from being registered globally, which would cause issues with multiple instances in the same document.
+        // This will all go away once the oscd-ui version is implemented and this project is migrated to oscd-ui
+        const customElementsDefineFn = window.customElements.define;
+        window.customElements.define = (name, constructor) => {
+            if (name !== 'ace-editor') {
+                return customElementsDefineFn(name, constructor);
+            }
+        };
+        import('ace-custom-element').then(AceEditor => {
+            if (!this.registry?.get('ace-editor')) {
+                this.registry?.define('ace-editor', AceEditor.default);
+            }
+        });
+    }
+    format() {
+        const rawXml = this.aceEditor?.editor?.getSelectedText() || this.aceEditor.value;
+        let initialIndent = '';
+        if (this.aceEditor?.editor?.getSelectedText()) {
+            const range = this.aceEditor.editor.getSelectionRange();
+            // Get the starting line of the selection and detect its leading whitespace
+            const startLine = range.start.row;
+            const lineContent = this.aceEditor.editor.session.getLine(startLine);
+            initialIndent = lineContent.match(/^(\s*)/)?.[1] || '';
+        }
+        const formatted = formatXml(rawXml, initialIndent);
+        if (this.aceEditor?.editor?.getSelectedText()) {
+            const range = this.aceEditor.editor.getSelectionRange();
+            // Remove the trailing \r\n
+            this.aceEditor.editor.session.replace(range, formatted.substring(0, formatted.length - 2));
+        }
+        else {
+            this.value = formatted;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.ace?.config?.addEventListener?.('editor', manageAceOptionChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.ace?.config?.removeEventListener?.('editor', manageAceOptionChange);
+    }
+    handleAceChange(e) {
+        if (typeof e.detail !== 'string') {
+            return;
+        }
+        if (this.value !== e.detail) {
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: e.detail,
+            }));
+        }
+    }
+    updated(changedProps) {
+        if (changedProps.has('value')) {
+            // Clear selection when content updates
+            setTimeout(() => {
+                if (this.aceEditor?.editor) {
+                    /* For reasons unknown the ace editor initially selects all code, so we need to clear that*/
+                    this.aceEditor.editor.selection.clearSelection();
+                    this.aceEditor.editor.moveCursorTo(0, 0);
+                }
+            }, 10);
+        }
+    }
+    render() {
+        return html `
+      <ace-editor
+        .value=${this.value}
+        mode=${aceOptions.mode}
+        theme=${aceOptions.theme}
+        @change=${(e) => {
+            this.handleAceChange(e);
+        }}
+      >
+      </ace-editor>
+    `;
+    }
+}
+OscdTextEditor.scopedElements = {
+// Left here for clarity sake. We need to dyn-import this so we have a chance of overriding the customElements.define to prevent
+// ace-editor from being registered globally and causing issues with other instances of ace-editor in the same document.
+//'ace-editor': AceEditor,
+};
+OscdTextEditor.styles = css `
+    :host {
+      height: 100%;
+      width: 100%;
+      overflow: auto;
+    }
+
+    ace-editor {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+export default OscdTextEditor;
+__decorate([
+    property()
+], OscdTextEditor.prototype, "value", void 0);
+__decorate([
+    query('ace-editor')
+], OscdTextEditor.prototype, "aceEditor", void 0);
+//# sourceMappingURL=OscdTextEditor.js.map