Skip to content

Commit d032a03

Browse files
noraebnoraeb
committed
feat: replace material-web with oscd-ui
1 parent eaf131b commit d032a03

13 files changed

Lines changed: 367 additions & 1401 deletions

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,10 @@ describe('AddDataObjectDialog', () => {
4444
it('renders dialog', () => {
4545
expect(dialog.createDOdialog.open).to.be.false;
4646
dialog.show();
47-
expect(dialog.shadowRoot?.querySelector('md-dialog')).to.exist;
48-
expect(dialog.shadowRoot?.querySelector('md-filled-select')).to.exist;
49-
expect(dialog.shadowRoot?.querySelector('md-outlined-text-field')).to.exist;
47+
expect(dialog.shadowRoot?.querySelector('oscd-dialog')).to.exist;
48+
expect(dialog.shadowRoot?.querySelector('oscd-filled-select')).to.exist;
49+
expect(dialog.shadowRoot?.querySelector('oscd-outlined-text-field')).to
50+
.exist;
5051
cdClasses.forEach(cdClass => {
5152
expect(dialog.shadowRoot?.textContent).to.include(cdClass);
5253
});

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

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import { LitElement, html, css } from 'lit';
33
import { property, state, query } from 'lit/decorators.js';
44
import { Tree, TreeNode } from '@openenergytools/tree-grid';
55
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
6-
import { MdDialog } from '@scopedelement/material-web/dialog/MdDialog.js';
7-
import { MdOutlinedTextField } from '@scopedelement/material-web/textfield/MdOutlinedTextField.js';
8-
import { MdFilledSelect } from '@scopedelement/material-web/select/MdOutlineSelect.js';
9-
import { MdSelectOption } from '@scopedelement/material-web/select/MdSelectOption.js';
10-
import { MdOutlinedButton } from '@scopedelement/material-web/button/outlined-button.js';
11-
import { MdTextButton } from '@scopedelement/material-web/button/text-button.js';
6+
import { OscdDialog } from '@omicronenergy/oscd-ui/dialog/OscdDialog.js';
7+
import { OscdOutlinedTextField } from '@omicronenergy/oscd-ui/textfield/OscdOutlinedTextField.js';
8+
import { OscdFilledSelect } from '@omicronenergy/oscd-ui/select/OscdFilledSelect.js';
9+
import { OscdSelectOption } from '@omicronenergy/oscd-ui/select/OscdSelectOption.js';
10+
import { OscdTextButton } from '@omicronenergy/oscd-ui/button/OscdTextButton.js';
1211
import { debounce } from '../utils/debounce.js';
1312

1413
// eslint-disable-next-line no-shadow
@@ -23,16 +22,15 @@ const firstTextBlockRegExp = /[A-Za-z]+/;
2322

2423
export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
2524
static scopedElements = {
26-
'md-outlined-button': MdOutlinedButton,
27-
'md-dialog': MdDialog,
28-
'md-outlined-text-field': MdOutlinedTextField,
29-
'md-text-button': MdTextButton,
30-
'md-select-option': MdSelectOption,
31-
'md-filled-select': MdFilledSelect,
25+
'oscd-dialog': OscdDialog,
26+
'oscd-outlined-text-field': OscdOutlinedTextField,
27+
'oscd-text-button': OscdTextButton,
28+
'oscd-select-option': OscdSelectOption,
29+
'oscd-filled-select': OscdFilledSelect,
3230
};
3331

3432
static styles = css`
35-
md-dialog {
33+
oscd-dialog {
3634
min-width: 350px;
3735
}
3836
.dialog-content {
@@ -41,11 +39,11 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
4139
gap: 16px;
4240
margin-top: 8px;
4341
}
44-
md-filled-select,
45-
md-outlined-text-field {
42+
oscd-filled-select,
43+
oscd-outlined-text-field {
4644
width: 100%;
4745
}
48-
md-text-button {
46+
oscd-text-button {
4947
text-transform: uppercase;
5048
}
5149
`;
@@ -69,17 +67,17 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
6967
@state()
7068
errorText = '';
7169

72-
@query('md-dialog')
73-
createDOdialog!: MdDialog;
70+
@query('oscd-dialog')
71+
createDOdialog!: OscdDialog;
7472

7573
@query('#cdc-type')
76-
cdcType!: MdFilledSelect;
74+
cdcType!: OscdFilledSelect;
7775

7876
@query('#do-name')
79-
doName!: MdOutlinedTextField;
77+
doName!: OscdOutlinedTextField;
8078

8179
@query('#namespace')
82-
namespace!: MdOutlinedTextField;
80+
namespace!: OscdOutlinedTextField;
8381

8482
private namespaceDefaultValue = 'User-Defined';
8583

@@ -251,7 +249,7 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
251249

252250
/* eslint-disable class-methods-use-this */
253251
private resetErrorText(e: Event): void {
254-
const target = e.target as MdOutlinedTextField;
252+
const target = e.target as OscdOutlinedTextField;
255253
if (target.errorText && target.checkValidity()) {
256254
target.errorText = '';
257255
target.error = false;
@@ -260,7 +258,7 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
260258

261259
render() {
262260
return html`
263-
<md-dialog @closed=${this.close}>
261+
<oscd-dialog @closed=${this.close}>
264262
<div slot="headline">Add Data Object</div>
265263
<form
266264
slot="content"
@@ -270,7 +268,7 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
270268
@submit=${this.onAddDataObjectSubmit}
271269
@reset=${this.close}
272270
>
273-
<md-filled-select
271+
<oscd-filled-select
274272
class="cdc-type"
275273
label="Common Data Class"
276274
required
@@ -282,12 +280,12 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
282280
>
283281
${this.cdClasses.map(
284282
cdClass =>
285-
html`<md-select-option value=${cdClass}
286-
>${cdClass}</md-select-option
283+
html`<oscd-select-option value=${cdClass}
284+
>${cdClass}</oscd-select-option
287285
>`
288286
)}
289-
</md-filled-select>
290-
<md-outlined-text-field
287+
</oscd-filled-select>
288+
<oscd-outlined-text-field
291289
label="Data Object Name"
292290
id="do-name"
293291
required
@@ -297,25 +295,25 @@ export class AddDataObjectDialog extends ScopedElementsMixin(LitElement) {
297295
this.resetErrorText(e);
298296
this.onValueChange();
299297
}}
300-
></md-outlined-text-field>
301-
<md-outlined-text-field
298+
></oscd-outlined-text-field>
299+
<oscd-outlined-text-field
302300
id="namespace"
303301
label="Namespace"
304302
placeholder=${this.namespaceDefaultValue}
305303
required
306304
.disabled=${this.isCustomNamespaceDisabled}
307305
@input=${this.resetErrorText}
308-
></md-outlined-text-field>
306+
></oscd-outlined-text-field>
309307
</form>
310308
<div slot="actions">
311-
<md-text-button form="add-data-object" type="reset"
312-
>Close</md-text-button
309+
<oscd-text-button form="add-data-object" type="reset"
310+
>Close</oscd-text-button
313311
>
314-
<md-text-button form="add-data-object" type="submit"
315-
>Add</md-text-button
312+
<oscd-text-button form="add-data-object" type="submit"
313+
>Add</oscd-text-button
316314
>
317315
</div>
318-
</md-dialog>
316+
</oscd-dialog>
319317
`;
320318
}
321319
}

‎components/delete-lnodetype-dialog.spec.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,9 @@ describe('DeleteDialog', () => {
4040
await deleteDialog.updateComplete;
4141
await deleteDialog.dialog.updateComplete;
4242

43-
const buttons =
44-
deleteDialog.shadowRoot?.querySelectorAll('md-outlined-button');
43+
const buttons = deleteDialog.shadowRoot?.querySelectorAll(
44+
'oscd-outlined-button'
45+
);
4546
const deleteButton = Array.from(buttons || []).find(
4647
btn => btn.textContent?.trim() === 'Delete'
4748
) as HTMLElement;
@@ -75,8 +76,9 @@ describe('DeleteDialog', () => {
7576
deleteDialog.show();
7677
await deleteDialog.updateComplete;
7778

78-
const buttons =
79-
deleteDialog.shadowRoot?.querySelectorAll('md-outlined-button');
79+
const buttons = deleteDialog.shadowRoot?.querySelectorAll(
80+
'oscd-outlined-button'
81+
);
8082
const cancelButton = Array.from(buttons || []).find(
8183
btn => btn.textContent?.trim() === 'Cancel'
8284
) as HTMLElement;

‎components/delete-lnodetype-dialog.ts‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
33
import { LitElement, html, css } from 'lit';
44
import { query, property } from 'lit/decorators.js';
5-
import { MdDialog } from '@scopedelement/material-web/dialog/dialog.js';
6-
import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
5+
import { OscdDialog } from '@omicronenergy/oscd-ui/dialog/OscdDialog.js';
6+
import { OscdOutlinedButton } from '@omicronenergy/oscd-ui/button/OscdOutlinedButton.js';
77

88
export class DeleteDialog extends ScopedElementsMixin(LitElement) {
99
static scopedElements = {
10-
'md-dialog': MdDialog,
11-
'md-outlined-button': MdOutlinedButton,
10+
'oscd-dialog': OscdDialog,
11+
'oscd-outlined-button': OscdOutlinedButton,
1212
};
1313

1414
@property()
@@ -17,8 +17,8 @@ export class DeleteDialog extends ScopedElementsMixin(LitElement) {
1717
@property()
1818
lnodeTypeId: string = '';
1919

20-
@query('md-dialog')
21-
dialog!: MdDialog;
20+
@query('oscd-dialog')
21+
dialog!: OscdDialog;
2222

2323
get open() {
2424
return this.dialog?.open ?? false;
@@ -43,23 +43,25 @@ export class DeleteDialog extends ScopedElementsMixin(LitElement) {
4343

4444
render() {
4545
return html`
46-
<md-dialog>
46+
<oscd-dialog>
4747
<div slot="headline">Confirm delete</div>
4848
<div slot="content" class="delete-content">
4949
Are you sure you want to delete Logical Node Type ${this.lnodeTypeId}?
5050
This action may have severe consequences.
5151
</div>
5252
<div slot="actions">
53-
<md-outlined-button class="button close" @click="${this.handleCancel}"
54-
>Cancel</md-outlined-button
53+
<oscd-outlined-button
54+
class="button close"
55+
@click="${this.handleCancel}"
56+
>Cancel</oscd-outlined-button
5557
>
56-
<md-outlined-button
58+
<oscd-outlined-button
5759
class="button delete"
5860
@click="${this.handleConfirm}"
59-
>Delete</md-outlined-button
61+
>Delete</oscd-outlined-button
6062
>
6163
</div>
62-
</md-dialog>
64+
</oscd-dialog>
6365
`;
6466
}
6567

‎components/lnodetype-sidebar.ts‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import { LitElement, html, css } from 'lit';
33
import { property, state } from 'lit/decorators.js';
44
import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
55

6-
import { MdOutlinedButton } from '@scopedelement/material-web/button/outlined-button.js';
7-
import { MdOutlinedTextField } from '@scopedelement/material-web/textfield/MdOutlinedTextField.js';
8-
import { MdList } from '@scopedelement/material-web/list/MdList.js';
9-
import { MdListItem } from '@scopedelement/material-web/list/MdListItem.js';
6+
import { OscdFilledButton } from '@omicronenergy/oscd-ui/button/OscdFilledButton.js';
7+
import { OscdOutlinedTextField } from '@omicronenergy/oscd-ui/textfield/OscdOutlinedTextField.js';
8+
import { OscdList } from '@omicronenergy/oscd-ui/list/OscdList.js';
9+
import { OscdListItem } from '@omicronenergy/oscd-ui/list/OscdListItem.js';
1010

1111
export class LNodeTypeSidebar extends ScopedElementsMixin(LitElement) {
1212
static scopedElements = {
13-
'md-outlined-button': MdOutlinedButton,
14-
'md-outlined-textfield': MdOutlinedTextField,
15-
'md-list': MdList,
16-
'md-list-item': MdListItem,
13+
'oscd-filled-button': OscdFilledButton,
14+
'oscd-outlined-textfield': OscdOutlinedTextField,
15+
'oscd-list': OscdList,
16+
'oscd-list-item': OscdListItem,
1717
};
1818

1919
@property({ type: Array })
@@ -88,49 +88,49 @@ export class LNodeTypeSidebar extends ScopedElementsMixin(LitElement) {
8888
render() {
8989
return html`<div class="sidebar">
9090
<div class="actions">
91-
<md-filled-button class="clear-all" @click=${this.clearFilter}>
91+
<oscd-filled-button class="clear-all" @click=${this.clearFilter}>
9292
Clear filter
93-
</md-filled-button>
93+
</oscd-filled-button>
9494
</div>
9595
<div class="search-filter">
9696
<div class="search-container">
97-
<md-outlined-textfield
97+
<oscd-outlined-textfield
9898
label="Filter Logical Node Types"
9999
type="text"
100100
placeholder="e.g.: TCTR, TVTR&amp;protection"
101101
.value=${this.filter}
102102
@input=${this.handleInput}
103103
aria-label="Filter Logical Node Types"
104104
supporting-text="Search by ID or description. Use commas/spaces for OR, use &amp; for AND."
105-
></md-outlined-textfield>
105+
></oscd-outlined-textfield>
106106
</div>
107107
</div>
108-
<md-list>
108+
<oscd-list>
109109
${this.filteredLNodeTypes.map(ln => {
110110
const id = ln.getAttribute('id') || '';
111111
const desc = ln.getAttribute('desc') || '';
112112
const isSelected = this.selectedId === id;
113113
return html`
114-
<md-list-item
114+
<oscd-list-item
115115
type="button"
116116
?selected=${isSelected}
117117
@click=${() => this.handleClick(id)}
118118
>
119119
<span slot="headline" title=${id}>${id}</span>
120120
<span slot="supporting-text">${desc}</span>
121-
</md-list-item>
121+
</oscd-list-item>
122122
`;
123123
})}
124-
</md-list>
124+
</oscd-list>
125125
</div>`;
126126
}
127127

128128
updated(changedProperties: Map<string, unknown>) {
129129
super.updated?.(changedProperties);
130-
// Scroll md-list to top when lNodeTypes changes
130+
// Scroll oscd-list to top when lNodeTypes changes
131131
if (changedProperties.has('lNodeTypes')) {
132-
const mdList = this.renderRoot.querySelector('md-list');
133-
if (mdList) mdList.scrollTop = 0;
132+
const oscdList = this.renderRoot.querySelector('oscd-list');
133+
if (oscdList) oscdList.scrollTop = 0;
134134
}
135135
}
136136

@@ -144,33 +144,33 @@ export class LNodeTypeSidebar extends ScopedElementsMixin(LitElement) {
144144
overflow: hidden;
145145
background-color: #fcf6e5;
146146
}
147-
md-list {
147+
oscd-list {
148148
min-height: 0;
149149
max-height: calc(100vh - var(--header-height) - 1rem - 134px);
150150
overflow-y: auto;
151151
scrollbar-width: thin;
152152
padding: 0;
153153
}
154-
md-list::-webkit-scrollbar {
154+
oscd-list::-webkit-scrollbar {
155155
width: 8px;
156156
}
157-
md-list::-webkit-scrollbar-thumb {
157+
oscd-list::-webkit-scrollbar-thumb {
158158
border-radius: 4px;
159159
}
160-
md-list::-webkit-scrollbar-track {
160+
oscd-list::-webkit-scrollbar-track {
161161
background: transparent;
162162
}
163-
md-list-item {
163+
oscd-list-item {
164164
box-sizing: border-box;
165165
}
166-
md-list-item[selected] {
166+
oscd-list-item[selected] {
167167
background: var(--md-sys-color-primary);
168168
}
169-
md-list-item[selected] span[slot='headline'],
170-
md-list-item[selected] span[slot='supporting-text'] {
169+
oscd-list-item[selected] span[slot='headline'],
170+
oscd-list-item[selected] span[slot='supporting-text'] {
171171
color: var(--md-sys-color-on-primary, #ffffff);
172172
}
173-
md-outlined-textfield {
173+
oscd-outlined-textfield {
174174
width: 100%;
175175
}
176176
.actions {

0 commit comments

Comments
 (0)