feat: make plugin scoped and fix data loss bug

components/add-data-object-dialog.spec.ts

@@ -44,9 +44,10 @@ describe('AddDataObjectDialog', () => {
   it('renders dialog', () => {
     expect(dialog.createDOdialog.open).to.be.false;
     dialog.show();
-    expect(dialog.shadowRoot?.querySelector('md-dialog')).to.exist;
-    expect(dialog.shadowRoot?.querySelector('md-filled-select')).to.exist;
-    expect(dialog.shadowRoot?.querySelector('md-outlined-text-field')).to.exist;
+    expect(dialog.shadowRoot?.querySelector('oscd-dialog')).to.exist;
+    expect(dialog.shadowRoot?.querySelector('oscd-filled-select')).to.exist;
+    expect(dialog.shadowRoot?.querySelector('oscd-outlined-text-field')).to
+      .exist;
     cdClasses.forEach(cdClass => {
       expect(dialog.shadowRoot?.textContent).to.include(cdClass);
     });

components/add-data-object-dialog.ts

@@ -3,12 +3,11 @@ import { LitElement, html, css } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { Tree, TreeNode } from '@openenergytools/tree-grid';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
-import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
-import { MdOutlinedTextField } from '@scopedelement/material-web/textfield/MdOutlinedTextField.js';
-import { MdFilledSelect } from '@scopedelement/material-web/select/MdOutlineSelect.js';
-import { MdSelectOption } from '@scopedelement/material-web/select/MdSelectOption.js';
-import { MdOutlinedButton } from '@scopedelement/material-web/button/outlined-button.js';
-import { MdTextButton } from '@scopedelement/material-web/button/text-button.js';
+import { OscdDialog } from '@omicronenergy/oscd-ui/dialog/OscdDialog.js';
+import { OscdOutlinedTextField } from '@omicronenergy/oscd-ui/textfield/OscdOutlinedTextField.js';
+import { OscdFilledSelect } from '@omicronenergy/oscd-ui/select/OscdFilledSelect.js';
+import { OscdSelectOption } from '@omicronenergy/oscd-ui/select/OscdSelectOption.js';
+import { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';
 import { debounce } from '../utils/debounce.js';
 
 // eslint-disable-next-line no-shadow
@@ -23,16 +22,15 @@ const firstTextBlockRegExp = /[A-Za-z]+/;
 
 export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
   static scopedElements = {
-    'md-outlined-button': MdOutlinedButton,
-    'md-dialog': MdDialog,
-    'md-outlined-text-field': MdOutlinedTextField,
-    'md-text-button': MdTextButton,
-    'md-select-option': MdSelectOption,
-    'md-filled-select': MdFilledSelect,
+    'oscd-dialog': OscdDialog,
+    'oscd-outlined-text-field': OscdOutlinedTextField,
+    'oscd-text-button': OscdTextButton,
+    'oscd-select-option': OscdSelectOption,
+    'oscd-filled-select': OscdFilledSelect,
   };
 
   static styles = css`
-    md-dialog {
+    oscd-dialog {
       min-width: 350px;
     }
     .dialog-content {
@@ -41,11 +39,11 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
       gap: 16px;
       margin-top: 8px;
     }
-    md-filled-select,
-    md-outlined-text-field {
+    oscd-filled-select,
+    oscd-outlined-text-field {
       width: 100%;
     }
-    md-text-button {
+    oscd-text-button {
       text-transform: uppercase;
     }
   `;
@@ -69,17 +67,17 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
   @state()
   errorText = '';
 
-  @query('md-dialog')
-  createDOdialog!: MdDialog;
+  @query('oscd-dialog')
+  createDOdialog!: OscdDialog;
 
   @query('#cdc-type')
-  cdcType!: MdFilledSelect;
+  cdcType!: OscdFilledSelect;
 
   @query('#do-name')
-  doName!: MdOutlinedTextField;
+  doName!: OscdOutlinedTextField;
 
   @query('#namespace')
-  namespace!: MdOutlinedTextField;
+  namespace!: OscdOutlinedTextField;
 
   private namespaceDefaultValue = 'User-Defined';
 
@@ -251,7 +249,7 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
 
   /* eslint-disable class-methods-use-this */
   private resetErrorText(e: Event): void {
-    const target = e.target as MdOutlinedTextField;
+    const target = e.target as OscdOutlinedTextField;
     if (target.errorText && target.checkValidity()) {
       target.errorText = '';
       target.error = false;
@@ -260,7 +258,7 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
 
   render() {
     return html`
-      <md-dialog @closed=${this.close}>
+      <oscd-dialog @closed=${this.close}>
         <div slot="headline">Add Data Object</div>
         <form
           slot="content"
@@ -270,7 +268,7 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
           @submit=${this.onAddDataObjectSubmit}
           @reset=${this.close}
         >
-          <md-filled-select
+          <oscd-filled-select
             class="cdc-type"
             label="Common Data Class"
             required
@@ -282,12 +280,12 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
           >
             ${this.cdClasses.map(
               cdClass =>
-                html`<md-select-option value=${cdClass}
-                  >${cdClass}</md-select-option
+                html`<oscd-select-option value=${cdClass}
+                  >${cdClass}</oscd-select-option
                 >`
             )}
-          </md-filled-select>
-          <md-outlined-text-field
+          </oscd-filled-select>
+          <oscd-outlined-text-field
             label="Data Object Name"
             id="do-name"
             required
@@ -297,25 +295,25 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
               this.resetErrorText(e);
               this.onValueChange();
             }}
-          ></md-outlined-text-field>
-          <md-outlined-text-field
+          ></oscd-outlined-text-field>
+          <oscd-outlined-text-field
             id="namespace"
             label="Namespace"
             placeholder=${this.namespaceDefaultValue}
             required
             .disabled=${this.isCustomNamespaceDisabled}
             @input=${this.resetErrorText}
-          ></md-outlined-text-field>
+          ></oscd-outlined-text-field>
         </form>
         <div slot="actions">
-          <md-text-button form="add-data-object" type="reset"
-            >Close</md-text-button
+          <oscd-text-button form="add-data-object" type="reset"
+            >Close</oscd-text-button
           >
-          <md-text-button form="add-data-object" type="submit"
-            >Add</md-text-button
+          <oscd-text-button form="add-data-object" type="submit"
+            >Add</oscd-text-button
           >
         </div>
-      </md-dialog>
+      </oscd-dialog>
     `;
   }
 }

components/delete-lnodetype-dialog.spec.ts

@@ -40,8 +40,9 @@ describe('DeleteDialog', () => {
     await deleteDialog.updateComplete;
     await deleteDialog.dialog.updateComplete;
 
-    const buttons =
-      deleteDialog.shadowRoot?.querySelectorAll('md-outlined-button');
+    const buttons = deleteDialog.shadowRoot?.querySelectorAll(
+      'oscd-outlined-button'
+    );
     const deleteButton = Array.from(buttons || []).find(
       btn => btn.textContent?.trim() === 'Delete'
     ) as HTMLElement;
@@ -75,8 +76,9 @@ describe('DeleteDialog', () => {
     deleteDialog.show();
     await deleteDialog.updateComplete;
 
-    const buttons =
-      deleteDialog.shadowRoot?.querySelectorAll('md-outlined-button');
+    const buttons = deleteDialog.shadowRoot?.querySelectorAll(
+      'oscd-outlined-button'
+    );
     const cancelButton = Array.from(buttons || []).find(
       btn => btn.textContent?.trim() === 'Cancel'
     ) as HTMLElement;

components/delete-lnodetype-dialog.ts

@@ -2,13 +2,13 @@
 import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LitElement, html, css } from 'lit';
 import { query, property } from 'lit/decorators.js';
-import { MdDialog } from '@scopedelement/material-web/dialog/dialog.js';
-import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
+import { OscdDialog } from '@omicronenergy/oscd-ui/dialog/OscdDialog.js';
+import { OscdOutlinedButton } from '@omicronenergy/oscd-ui/button/OscdOutlinedButton.js';
 
 export class DeleteDialog extends ScopedElementsMixin(LitElement) {
   static scopedElements = {
-    'md-dialog': MdDialog,
-    'md-outlined-button': MdOutlinedButton,
+    'oscd-dialog': OscdDialog,
+    'oscd-outlined-button': OscdOutlinedButton,
   };
 
   @property()
@@ -17,8 +17,8 @@ export class DeleteDialog extends ScopedElementsMixin(LitElement) {
   @property()
   lnodeTypeId: string = '';
 
-  @query('md-dialog')
-  dialog!: MdDialog;
+  @query('oscd-dialog')
+  dialog!: OscdDialog;
 
   get open() {
     return this.dialog?.open ?? false;
@@ -43,23 +43,25 @@ export class DeleteDialog extends ScopedElementsMixin(LitElement) {
 
   render() {
     return html`
-      <md-dialog>
+      <oscd-dialog>
         <div slot="headline">Confirm delete</div>
         <div slot="content" class="delete-content">
           Are you sure you want to delete Logical Node Type ${this.lnodeTypeId}?
           This action may have severe consequences.
         </div>
         <div slot="actions">
-          <md-outlined-button class="button close" @click="${this.handleCancel}"
-            >Cancel</md-outlined-button
+          <oscd-outlined-button
+            class="button close"
+            @click="${this.handleCancel}"
+            >Cancel</oscd-outlined-button
           >
-          <md-outlined-button
+          <oscd-outlined-button
             class="button delete"
             @click="${this.handleConfirm}"
-            >Delete</md-outlined-button
+            >Delete</oscd-outlined-button
           >
         </div>
-      </md-dialog>
+      </oscd-dialog>
     `;
   }
 

components/lnodetype-sidebar.ts

@@ -3,17 +3,17 @@ import { LitElement, html, css } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 
-import { MdOutlinedButton } from '@scopedelement/material-web/button/outlined-button.js';
-import { MdOutlinedTextField } from '@scopedelement/material-web/textfield/MdOutlinedTextField.js';
-import { MdList } from '@scopedelement/material-web/list/MdList.js';
-import { MdListItem } from '@scopedelement/material-web/list/MdListItem.js';
+import { OscdFilledButton } from '@omicronenergy/oscd-ui/button/OscdFilledButton.js';
+import { OscdOutlinedTextField } from '@omicronenergy/oscd-ui/textfield/OscdOutlinedTextField.js';
+import { OscdList } from '@omicronenergy/oscd-ui/list/OscdList.js';
+import { OscdListItem } from '@omicronenergy/oscd-ui/list/OscdListItem.js';
 
 export class LNodeTypeSidebar extends ScopedElementsMixin(LitElement) {
   static scopedElements = {
-    'md-outlined-button': MdOutlinedButton,
-    'md-outlined-textfield': MdOutlinedTextField,
-    'md-list': MdList,
-    'md-list-item': MdListItem,
+    'oscd-filled-button': OscdFilledButton,
+    'oscd-outlined-textfield': OscdOutlinedTextField,
+    'oscd-list': OscdList,
+    'oscd-list-item': OscdListItem,
   };
 
   @property({ type: Array })
@@ -88,49 +88,49 @@ export class LNodeTypeSidebar extends ScopedElementsMixin(LitElement) {
   render() {
     return html`<div class="sidebar">
       <div class="actions">
-        <md-filled-button class="clear-all" @click=${this.clearFilter}>
+        <oscd-filled-button class="clear-all" @click=${this.clearFilter}>
           Clear filter
-        </md-filled-button>
+        </oscd-filled-button>
       </div>
       <div class="search-filter">
         <div class="search-container">
-          <md-outlined-textfield
+          <oscd-outlined-textfield
             label="Filter Logical Node Types"
             type="text"
             placeholder="e.g.: TCTR, TVTR&amp;protection"
             .value=${this.filter}
             @input=${this.handleInput}
             aria-label="Filter Logical Node Types"
             supporting-text="Search by ID or description. Use commas/spaces for OR, use &amp; for AND."
-          ></md-outlined-textfield>
+          ></oscd-outlined-textfield>
         </div>
       </div>
-      <md-list>
+      <oscd-list>
         ${this.filteredLNodeTypes.map(ln => {
           const id = ln.getAttribute('id') || '';
           const desc = ln.getAttribute('desc') || '';
           const isSelected = this.selectedId === id;
           return html`
-            <md-list-item
+            <oscd-list-item
               type="button"
               ?selected=${isSelected}
               @click=${() => this.handleClick(id)}
             >
               <span slot="headline" title=${id}>${id}</span>
               <span slot="supporting-text">${desc}</span>
-            </md-list-item>
+            </oscd-list-item>
           `;
         })}
-      </md-list>
+      </oscd-list>
     </div>`;
   }
 
   updated(changedProperties: Map<string, unknown>) {
     super.updated?.(changedProperties);
-    // Scroll md-list to top when lNodeTypes changes
+    // Scroll oscd-list to top when lNodeTypes changes
     if (changedProperties.has('lNodeTypes')) {
-      const mdList = this.renderRoot.querySelector('md-list');
-      if (mdList) mdList.scrollTop = 0;
+      const oscdList = this.renderRoot.querySelector('oscd-list');
+      if (oscdList) oscdList.scrollTop = 0;
     }
   }
 
@@ -142,35 +142,35 @@ export class LNodeTypeSidebar extends ScopedElementsMixin(LitElement) {
       min-height: 0;
       padding: 1rem;
       overflow: hidden;
-      background-color: #fcf6e5;
+      background-color: var(--oscd-base3);
     }
-    md-list {
+    oscd-list {
       min-height: 0;
       max-height: calc(100vh - var(--header-height) - 1rem - 134px);
       overflow-y: auto;
       scrollbar-width: thin;
       padding: 0;
     }
-    md-list::-webkit-scrollbar {
+    oscd-list::-webkit-scrollbar {
       width: 8px;
     }
-    md-list::-webkit-scrollbar-thumb {
+    oscd-list::-webkit-scrollbar-thumb {
       border-radius: 4px;
     }
-    md-list::-webkit-scrollbar-track {
+    oscd-list::-webkit-scrollbar-track {
       background: transparent;
     }
-    md-list-item {
+    oscd-list-item {
       box-sizing: border-box;
     }
-    md-list-item[selected] {
+    oscd-list-item[selected] {
       background: var(--md-sys-color-primary);
     }
-    md-list-item[selected] span[slot='headline'],
-    md-list-item[selected] span[slot='supporting-text'] {
+    oscd-list-item[selected] span[slot='headline'],
+    oscd-list-item[selected] span[slot='supporting-text'] {
       color: var(--md-sys-color-on-primary, #ffffff);
     }
-    md-outlined-textfield {
+    oscd-outlined-textfield {
       width: 100%;
     }
     .actions {