Skip to content

Commit 11a51c9

Browse files
JakobVogelsangJakobVogelsang
committed
refactor: remove mwc-dialog dependancy
1 parent 3433ab6 commit 11a51c9

14 files changed

+91
-67
lines changed

‎editors/base-element-editor.ts

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { LitElement, TemplateResult, html } from 'lit';
22
import { property, query, state } from 'lit/decorators.js';
33

4-
import '@material/mwc-dialog';
5-
import type { Dialog } from '@material/mwc-dialog';
6-
74
// import '@scopedelement/material-web/iconbutton/icon-button.js';
5+
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
86
import type { MdIconButton } from '@scopedelement/material-web/iconbutton/MdIconButton.js';
97

108
import { newEditEvent } from '@openenergytools/open-scd-core';
@@ -32,7 +30,7 @@ export default class BaseElementEditor extends LitElement {
3230
@state()
3331
selectedDataSet?: Element | null;
3432

35-
@query('mwc-dialog') selectDataSetDialog!: Dialog;
33+
@query('.dialog.select') selectDataSetDialog!: MdDialog;
3634

3735
@query('.new.dataset') newDataSet!: MdIconButton;
3836

@@ -77,6 +75,10 @@ export default class BaseElementEditor extends LitElement {
7775
);
7876
}
7977

78+
private showSelectDataSetDialog(): void {
79+
this.selectDataSetDialog.show();
80+
}
81+
8082
protected renderSelectDataSetDialog(): TemplateResult {
8183
const items = Array.from(
8284
this.selectCtrlBlock?.parentElement?.querySelectorAll(
@@ -90,9 +92,9 @@ export default class BaseElementEditor extends LitElement {
9092
},
9193
}));
9294

93-
return html`<mwc-dialog>
94-
<action-list .items=${items} filterable></action-list>
95-
</mwc-dialog>`;
95+
return html`<md-dialog class="dialog select">
96+
<action-list slot="content" .items=${items} filterable></action-list>
97+
</md-dialog>`;
9698
}
9799

98100
protected renderDataSetElementContainer(): TemplateResult {
@@ -109,7 +111,7 @@ export default class BaseElementEditor extends LitElement {
109111
slot="change"
110112
?disabled=${!!findControlBlockSubscription(this.selectCtrlBlock!)
111113
.length}
112-
@click=${() => this.selectDataSetDialog.show()}
114+
@click=${this.showSelectDataSetDialog}
113115
><md-icon>swap_vert</md-icon></md-icon-button
114116
>
115117
<md-icon-button

‎editors/dataset/data-set-editor.test.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { sendKeys, sendMouse, setViewport } from '@web/test-runner-commands';
55

66
import { visualDiff } from '@web/test-runner-visual-regression';
77

8+
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
89
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
910
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
1011

@@ -13,6 +14,7 @@ import { dataSetDoc, otherDataSetDoc } from './data-set-editor.testfiles.js';
1314
import './data-set-editor.js';
1415
import type { DataSetEditor } from './data-set-editor.js';
1516

17+
window.customElements.define('md-dialog', MdDialog);
1618
window.customElements.define('md-outlined-button', MdOutlinedButton);
1719
window.customElements.define('md-text-button', MdTextButton);
1820

‎editors/dataset/data-set-editor.ts

-4
Original file line numberDiff line numberDiff line change
@@ -164,10 +164,6 @@ export class DataSetEditor extends LitElement {
164164
static styles = css`
165165
${styles}
166166
167-
.selectionlist {
168-
z-index: 2;
169-
}
170-
171167
data-set-element-editor {
172168
flex: auto;
173169
}

‎editors/dataset/data-set-element-editor.spec.ts

+6-10
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,15 @@ import {
1010
isRemove,
1111
} from '@openenergytools/scl-lib/dist/foundation/utils.js';
1212

13+
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
14+
1315
import { dataSetDoc } from './data-set-editor.testfiles.js';
1416

1517
import './data-set-element-editor.js';
1618
import type { DataSetElementEditor } from './data-set-element-editor.js';
1719

20+
window.customElements.define('md-dialog', MdDialog);
21+
1822
const doc = new DOMParser().parseFromString(dataSetDoc, 'application/xml');
1923
const dataSet = doc.querySelector('LDevice[inst="ldInst1"] DataSet')!;
2024

@@ -133,11 +137,7 @@ describe('DataSet element editor', () => {
133137
],
134138
];
135139

136-
(
137-
editor.daPickerDialog.querySelector(
138-
'*[slot="primaryAction"]'
139-
) as HTMLElement
140-
).click();
140+
editor.daPickerSaveButton.click();
141141

142142
expect(editEvent).to.have.be.calledOnce;
143143
expect(editEvent.args[0][0].detail.edit.length).to.equal(2);
@@ -182,11 +182,7 @@ describe('DataSet element editor', () => {
182182
],
183183
];
184184

185-
(
186-
editor.doPickerDialog.querySelector(
187-
'*[slot="primaryAction"]'
188-
) as HTMLElement
189-
).click();
185+
editor.doPickerSaveButton.click();
190186

191187
expect(editEvent).to.have.be.calledOnce;
192188
expect(editEvent.args[0][0].detail.edit.length).to.equal(2);

‎editors/dataset/data-set-element-editor.ts

+41-29
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import {
88
state,
99
} from 'lit/decorators.js';
1010

11-
import '@material/mwc-dialog';
12-
import type { Dialog } from '@material/mwc-dialog';
13-
11+
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
1412
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
1513
// import '@scopedelement/material-web/icon/icon.js'
1614

@@ -126,16 +124,20 @@ export class DataSetElementEditor extends LitElement {
126124

127125
@query('#dapickerbutton') daPickerButton!: MdTextButton;
128126

129-
@query('#dapicker') daPickerDialog!: Dialog;
127+
@query('#dapicker') daPickerDialog!: MdDialog;
130128

131129
@query('#dapicker > oscd-tree-grid') daPicker!: TreeGrid;
132130

131+
@query('.da.picker.save') daPickerSaveButton!: MdTextButton;
132+
133133
@query('#dopickerbutton') doPickerButton!: MdTextButton;
134134

135-
@query('#dopicker') doPickerDialog!: Dialog;
135+
@query('#dopicker') doPickerDialog!: MdDialog;
136136

137137
@query('#dopicker > oscd-tree-grid') doPicker!: TreeGrid;
138138

139+
@query('.do.picker.save') doPickerSaveButton!: MdTextButton;
140+
139141
public resetInputs(): void {
140142
this.element = null; // removes inputs and forces a re-render
141143

@@ -298,17 +300,21 @@ export class DataSetElementEditor extends LitElement {
298300
?disabled=${!canAddFCDA(this.element!)}
299301
@click=${() => this.doPickerDialog?.show()}
300302
>Add data object<md-icon slot="icon">playlist_add</me-icon></md-text-button
301-
><mwc-dialog id="dopicker" heading="Add Data Objects">
302-
<oscd-tree-grid .tree=${dataObjectTree(server)}></oscd-tree-grid>
303-
<md-text-button
304-
slot="secondaryAction"
305-
@click=${() => this.doPickerDialog?.close()}
306-
>Close</md-text-button>
307-
<md-text-button
308-
slot="primaryAction"
309-
@click=${this.saveDataObjects}
310-
>Save<md-icon slot="icon">save</md-icon></md-text-button>
311-
</mwc-dialog>`;
303+
><md-dialog id="dopicker">
304+
<div slot="headline">Add Data Objects</div>
305+
<oscd-tree-grid slot="content" .tree=${dataObjectTree(
306+
server
307+
)}></oscd-tree-grid>
308+
<div slot="actions">
309+
<md-text-button
310+
@click=${() => this.doPickerDialog?.close()}
311+
>Close</md-text-button>
312+
<md-text-button
313+
class="do picker save"
314+
@click=${this.saveDataObjects}
315+
>Save<md-icon slot="icon">save</md-icon></md-text-button>
316+
</div>
317+
</md-dialog>`;
312318
}
313319

314320
private renderDataAttributePicker(): TemplateResult {
@@ -320,17 +326,22 @@ export class DataSetElementEditor extends LitElement {
320326
?disabled=${!canAddFCDA(this.element!)}
321327
@click=${() => this.daPickerDialog.show()}
322328
>Add data attribute<md-icon slot="icon">playlist_add</me-icon></md-text-button
323-
><mwc-dialog id="dapicker" heading="Add Data Attributes"
324-
><oscd-tree-grid .tree="${dataAttributeTree(server)}"></oscd-tree-grid>
325-
<md-text-button
326-
slot="secondaryAction"
327-
@click=${() => this.daPickerDialog?.close()}
328-
>Close</md-text-button>
329-
<md-text-button
330-
slot="primaryAction"
331-
@click=${this.saveDataAttributes}
332-
>Save<md-icon slot="icon">Save</md-icon></md-text-button>
333-
</mwc-dialog>`;
329+
><md-dialog id="dapicker">
330+
<div slot="headline">Add Data Attributes</div>
331+
<oscd-tree-grid slot="content" .tree="${dataAttributeTree(
332+
server
333+
)}"></oscd-tree-grid>
334+
<div slot="actions">
335+
<md-text-button @click=${() =>
336+
this.daPickerDialog?.close()}>Close</md-text-button>
337+
<md-text-button class="da picker save" @click=${
338+
this.saveDataAttributes
339+
} >
340+
Save
341+
<md-icon slot="icon">Save</md-icon>
342+
</md-text-button>
343+
</div>
344+
</md-dialog>`;
334345
}
335346

336347
private renderDataPickers(): TemplateResult {
@@ -446,8 +457,9 @@ export class DataSetElementEditor extends LitElement {
446457
text-overflow: ellipsis;
447458
}
448459
449-
mwc-dialog {
450-
--mdc-dialog-max-width: 92vw;
460+
md-dialog {
461+
min-width: 80%;
462+
min-height: 80%;
451463
}
452464
453465
action-list {

‎editors/gsecontrol/gse-control-editor.spec.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,19 @@ import {
1111
isUpdate,
1212
} from '@openenergytools/scl-lib/dist/foundation/utils.js';
1313

14+
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
15+
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
16+
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
17+
1418
import { gseControlDoc } from './gseControl.testfiles.js';
1519

1620
import './gse-control-editor.js';
1721
import type { GseControlEditor } from './gse-control-editor.js';
1822

23+
window.customElements.define('md-outlined-button', MdOutlinedButton);
24+
window.customElements.define('md-text-button', MdTextButton);
25+
window.customElements.define('md-dialog', MdDialog);
26+
1927
function timeout(ms: number) {
2028
return new Promise(res => {
2129
setTimeout(res, ms);
@@ -79,7 +87,7 @@ describe('GSEControl editor component', () => {
7987

8088
editor.changeDataSet.click();
8189
await timeout(200);
82-
await sendMouse({ type: 'click', position: [400, 420] });
90+
await sendMouse({ type: 'click', position: [400, 450] });
8391

8492
expect(editEvent).to.have.been.calledOnce;
8593
expect(editEvent.args[0][0].detail.edit).to.satisfy(isUpdate);

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -185,16 +185,13 @@ export class GseControlEditor extends BaseElementEditor {
185185
grid-gap: 12px;
186186
padding: 8px 12px 16px;
187187
grid-template-columns: repeat(3, 1fr);
188+
z-index: 0;
188189
}
189190
.content.dataSet {
190191
display: flex;
191192
flex-direction: column;
192193
}
193194
194-
.selectionlist {
195-
z-index: 2;
196-
}
197-
198195
data-set-element-editor {
199196
grid-column: 1 / 2;
200197
}

‎editors/report/report-control-editor.spec.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,19 @@ import {
1212
isUpdate,
1313
} from '@openenergytools/scl-lib/dist/foundation/utils.js';
1414

15+
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
16+
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
17+
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
18+
1519
import { reportControlDoc } from './reportControl.testfiles.js';
1620

1721
import './report-control-editor.js';
1822
import type { ReportControlEditor } from './report-control-editor.js';
1923

24+
window.customElements.define('md-outlined-button', MdOutlinedButton);
25+
window.customElements.define('md-text-button', MdTextButton);
26+
window.customElements.define('md-dialog', MdDialog);
27+
2028
function timeout(ms: number) {
2129
return new Promise(res => {
2230
setTimeout(res, ms);
@@ -81,7 +89,7 @@ describe('ReportControl editor component', () => {
8189

8290
editor.changeDataSet.click();
8391
await timeout(200);
84-
await sendMouse({ type: 'click', position: [400, 410] });
92+
await sendMouse({ type: 'click', position: [400, 450] });
8593

8694
expect(editEvent).to.have.been.calledOnce;
8795
expect(editEvent.args[0][0].detail.edit).to.satisfy(isUpdate);

‎editors/report/report-control-editor.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -190,17 +190,14 @@ export class ReportControlEditor extends BaseElementEditor {
190190
grid-gap: 12px;
191191
padding: 8px 12px 16px;
192192
grid-template-columns: repeat(3, 1fr);
193+
z-index: 0;
193194
}
194195
195196
.content.dataSet {
196197
display: flex;
197198
flex-direction: column;
198199
}
199200
200-
.selectionlist {
201-
z-index: 2;
202-
}
203-
204201
mwc-list-item {
205202
--mdc-list-item-meta-size: 48px;
206203
}

‎editors/sampledvalue/sampled-value-control-editor.spec.ts

+8
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,19 @@ import {
1111
isUpdate,
1212
} from '@openenergytools/scl-lib/dist/foundation/utils.js';
1313

14+
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
15+
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
16+
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
17+
1418
import { smvControlDoc } from './smvControl.testfiles.js';
1519

1620
import './sampled-value-control-editor.js';
1721
import type { SampledValueControlEditor } from './sampled-value-control-editor.js';
1822

23+
window.customElements.define('md-outlined-button', MdOutlinedButton);
24+
window.customElements.define('md-text-button', MdTextButton);
25+
window.customElements.define('md-dialog', MdDialog);
26+
1927
function timeout(ms: number) {
2028
return new Promise(res => {
2129
setTimeout(res, ms);

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -178,17 +178,14 @@ export class SampledValueControlEditor extends BaseElementEditor {
178178
grid-gap: 12px;
179179
padding: 8px 12px 16px;
180180
grid-template-columns: repeat(3, 1fr);
181+
z-index: 0;
181182
}
182183
183184
.content.dataSet {
184185
display: flex;
185186
flex-direction: column;
186187
}
187188
188-
.selectionlist {
189-
z-index: 2;
190-
}
191-
192189
mwc-list-item {
193190
--mdc-list-item-meta-size: 48px;
194191
}

‎oscd-publisher.ts

+3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { classMap } from 'lit/directives/class-map.js';
66
import '@material/mwc-radio';
77
import '@scopedelement/material-web/radio/radio.js';
88

9+
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
910
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
1011
import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
1112

@@ -14,6 +15,7 @@ import './editors/gsecontrol/gse-control-editor.js';
1415
import './editors/dataset/data-set-editor.js';
1516
import './editors/sampledvalue/sampled-value-control-editor.js';
1617

18+
window.customElements.define('md-dialog', MdDialog);
1719
window.customElements.define('md-outlined-button', MdOutlinedButton);
1820
window.customElements.define('md-text-button', MdTextButton);
1921

@@ -122,6 +124,7 @@ export default class PublisherPlugin extends LitElement {
122124
--md-menu-container-color: var(--oscd-base3);
123125
font-family: var(--oscd-theme-text-font);
124126
--md-sys-color-surface-container-highest: var(--oscd-base2);
127+
--md-dialog-container-color: var(--oscd-base3);
125128
}
126129
127130
.hidden {

0 commit comments

Comments
 (0)