refactor: get rid of mwc-checkbox and mwc-formfield

Author: JakobVogelsang

editors/gsecontrol/gse-control-element-editor.ts

@@ -9,10 +9,10 @@ import {
 } from 'lit/decorators.js';
 
 import '@material/mwc-button';
-import '@material/mwc-formfield';
-import '@material/mwc-checkbox';
 import type { Button } from '@material/mwc-button';
-import type { Checkbox } from '@material/mwc-checkbox';
+
+// import '@scopedelement/material-web/checkbox/checkbox.js'
+import type { MdCheckbox } from '@scopedelement/material-web/checkbox/MdCheckbox.js';
 
 import { newEditEvent } from '@openenergytools/open-scd-core';
 import {
@@ -93,7 +93,7 @@ export class GseControlElementEditor extends LitElement {
 
   @query('.content.gsecontrol > .save') gseControlSave!: Button;
 
-  @query('#instType') instType?: Checkbox;
+  @query('#instType') instType?: MdCheckbox;
 
   public resetInputs(type: 'GSEControl' | 'GSE' = 'GSEControl'): void {
     this.element = null; // removes inputs and forces a re-render
@@ -230,13 +230,15 @@ export class GseControlElementEditor extends LitElement {
 
     return html`<div class="content gse">
       <h3>Communication Settings (GSE)</h3>
-      <mwc-formfield label="Add XMLSchema-instance type"
-        ><mwc-checkbox
+      <form>
+        <md-checkbox
           id="instType"
           ?checked="${hasInstType}"
           @change=${this.onGSEInputChange}
-        ></mwc-checkbox></mwc-formfield
-      >${Object.entries(attributes).map(
+        ></md-checkbox>
+        <label class="insttype label">Add XMLSchema-instance type</label>
+      </form>
+      ${Object.entries(attributes).map(
         ([key, value]) =>
           html`<scl-text-field
             label="${key}"
@@ -427,6 +429,12 @@ export class GseControlElementEditor extends LitElement {
       text-overflow: ellipsis;
     }
 
+    .insttype.label {
+      margin-left: 10px;
+      font-weight: 300;
+      color: var(--oscd-theme-base00);
+    }
+
     *[iconTrailing='search'] {
       --mdc-shape-small: 28px;
     }

editors/sampledvalue/sampled-value-control-element-editor.ts

@@ -17,10 +17,10 @@ import {
 } from '@openenergytools/scl-lib';
 
 import '@material/mwc-button';
-import '@material/mwc-checkbox';
-import '@material/mwc-formfield';
 import type { Button } from '@material/mwc-button';
-import type { Checkbox } from '@material/mwc-checkbox';
+
+// import '@scopedelement/material-web/checkbox/checkbox.js'
+import type { MdCheckbox } from '@scopedelement/material-web/checkbox/MdCheckbox.js';
 
 import '@openenergytools/scl-checkbox';
 import '@openenergytools/scl-select';
@@ -113,7 +113,7 @@ export class SampledValueControlElementEditor extends LitElement {
 
   @query('.smvopts.save') smvOptsSave!: Button;
 
-  @query('.smv.insttype') instType?: Checkbox;
+  @query('.smv.insttype') instType?: MdCheckbox;
 
   public resetInputs(
     type: 'SampledValueControl' | 'SMV' = 'SampledValueControl'
@@ -274,13 +274,15 @@ export class SampledValueControlElementEditor extends LitElement {
 
     return html` <div class="content smv">
         <h3>Communication Settings (SMV)</h3>
-        <mwc-formfield label="Add XMLSchema-instance type"
-          ><mwc-checkbox
+        <form>
+          <md-checkbox
             class="smv insttype"
             ?checked="${hasInstType}"
             @change=${this.onSMVInputChange}
-          ></mwc-checkbox></mwc-formfield
-        >${Object.entries(attributes).map(
+          ></md-checkbox>
+          <label class="insttype label">Add XMLSchema-instance type</label>
+        </form>
+        ${Object.entries(attributes).map(
           ([key, value]) =>
             html`<scl-text-field
               class="smv attribute"
@@ -537,6 +539,12 @@ export class SampledValueControlElementEditor extends LitElement {
       text-overflow: ellipsis;
     }
 
+    .insttype.label {
+      margin-left: 10px;
+      font-weight: 300;
+      color: var(--oscd-theme-base00);
+    }
+
     *[iconTrailing='search'] {
       --mdc-shape-small: 28px;
     }

package-lock.json

@@ -27,9 +27,7 @@
   },
   "dependencies": {
     "@material/mwc-button": "^0.27.0",
-    "@material/mwc-checkbox": "^0.27.0",
     "@material/mwc-dialog": "^0.27.0",
-    "@material/mwc-formfield": "^0.27.0",
     "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
     "@material/mwc-list": "^0.27.0",