@record-evolution/widget-form 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/src/widget-form.d.ts +2 -2
  2. package/dist/tsconfig.tsbuildinfo +1 -1
  3. package/dist/widget-form.js +8825 -149
  4. package/dist/widget-form.js.map +1 -1
  5. package/package.json +5 -5
  6. package/src/widget-form.ts +40 -40
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "REWidget widget-form",
4
4
  "license": "MIT",
5
5
  "author": "widget-form",
6
- "version": "1.0.5",
6
+ "version": "1.0.7",
7
7
  "type": "module",
8
8
  "main": "dist/widget-form.js",
9
9
  "module": "dist/widget-form.js",
@@ -15,16 +15,16 @@
15
15
  "scripts": {
16
16
  "analyze": "cem analyze --litelement",
17
17
  "start": "concurrently -k -r \"npm run watch\" \"wds\"",
18
- "build": "rollup -c rollup.config.js",
19
- "watch": "rollup -w -c rollup.config.js",
18
+ "build": "node rename-material-package.js && rollup -c rollup.config.js",
19
+ "watch": "node rename-material-package.js && rollup -w -c rollup.config.js",
20
20
  "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-form",
21
21
  "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-form && npm i @record-evolution/widget-form",
22
22
  "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
23
23
  "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag"
24
24
  },
25
25
  "dependencies": {
26
- "@material/web": "^2.3.0",
27
- "lit": "^3.3.0",
26
+ "@material/web": "^2.4.0",
27
+ "lit": "^3.3.1",
28
28
  "lit-flatpickr": "^0.4.1"
29
29
  },
30
30
  "devDependencies": {
package/src/widget-form.ts CHANGED
@@ -10,9 +10,9 @@ import '@material/web/dialog/dialog.js'
10
10
  import '@material/web/button/text-button.js'
11
11
  import '@material/web/button/outlined-button.js'
12
12
  import '@material/web/button/filled-button.js'
13
- import '@material/web/textfield/filled-text-field.js'
13
+ import '@material/web/textfield/outlined-text-field.js'
14
14
  import '@material/web/checkbox/checkbox.js'
15
- import '@material/web/select/filled-select.js'
15
+ import '@material/web/select/outlined-select.js'
16
16
  import '@material/web/select/select-option.js'
17
17
  // import 'lit-flatpickr'
18
18
 
@@ -37,7 +37,7 @@ export class WidgetForm extends LitElement {
37
37
 
38
38
  @state() dialogOpen: boolean = false
39
39
 
40
- @query('md-dialog') dialog!: MdDialog
40
+ @query('mdif1-dialog') dialog!: MdDialog
41
41
 
42
42
  version: string = 'versionplaceholder'
43
43
 
@@ -107,7 +107,7 @@ export class WidgetForm extends LitElement {
107
107
 
108
108
  renderTextField(field: Column, i: number) {
109
109
  return html`
110
- <md-filled-text-field
110
+ <mdif1-outlined-text-field
111
111
  .name="column-${i}"
112
112
  .label="${field.label ?? ''}"
113
113
  .type="${field.type === 'numberfield' ? 'number' : 'text'}"
@@ -116,13 +116,13 @@ export class WidgetForm extends LitElement {
116
116
  supporting-text=${field.description ?? ''}
117
117
  validation-message="${field.validationMessage ?? 'Invalid input'}"
118
118
  ?required=${field.required && !field.defaultValue}
119
- ></md-filled-text-field>
119
+ ></mdif1-outlined-text-field>
120
120
  `
121
121
  }
122
122
 
123
123
  renderNumberField(field: Column, i: number) {
124
124
  return html`
125
- <md-filled-text-field
125
+ <mdif1-outlined-text-field
126
126
  .name="column-${i}"
127
127
  .label="${field.label ?? ''}"
128
128
  style="width: 200px;"
@@ -133,20 +133,20 @@ export class WidgetForm extends LitElement {
133
133
  max=${field.max ?? ''}
134
134
  supporting-text=${field.description ?? ''}
135
135
  ?required=${field.required && !field.defaultValue}
136
- ></md-filled-text-field>
136
+ ></mdif1-outlined-text-field>
137
137
  `
138
138
  }
139
139
 
140
140
  renderCheckbox(field: Column, i: number) {
141
141
  return html`
142
142
  <div class="checkbox-container">
143
- <md-checkbox
143
+ <mdif1-checkbox
144
144
  name="column-${i}"
145
145
  aria-label=${field.label ?? ''}
146
146
  ?checked=${field.defaultValue === 'true'}
147
147
  supporting-text=${field.description ?? ''}
148
148
  ?required=${field.required && !field.defaultValue}
149
- ></md-checkbox>
149
+ ></mdif1-checkbox>
150
150
  <label class="label"> ${field.label} </label>
151
151
  </div>
152
152
  `
@@ -154,7 +154,7 @@ export class WidgetForm extends LitElement {
154
154
 
155
155
  renderTextArea(field: Column, i: number) {
156
156
  return html`
157
- <md-filled-text-field
157
+ <mdif1-outlined-text-field
158
158
  .name="column-${i}"
159
159
  .label="${field.label ?? ''}"
160
160
  type="textarea"
@@ -162,7 +162,7 @@ export class WidgetForm extends LitElement {
162
162
  rows="3"
163
163
  ?required=${field.required && !field.defaultValue}
164
164
  supporting-text=${field.description ?? ''}
165
- ></md-filled-text-field>
165
+ ></mdif1-outlined-text-field>
166
166
  `
167
167
  }
168
168
 
@@ -170,7 +170,7 @@ export class WidgetForm extends LitElement {
170
170
  return html`
171
171
  <label class="label">
172
172
  ${field.label}
173
- <md-filled-select
173
+ <mdif1-outlined-select
174
174
  name="column-${i}"
175
175
  supporting-text=${field.description ?? ''}
176
176
  ?required=${field.required && !field.defaultValue}
@@ -180,16 +180,16 @@ export class WidgetForm extends LitElement {
180
180
  (val) => val.value,
181
181
  (val) => {
182
182
  return html`
183
- <md-select-option
183
+ <mdif1-select-option
184
184
  .value="${val.value ?? ''}"
185
185
  ?selected="${val.value === field.defaultValue}"
186
186
  >
187
187
  ${val.displayLabel}
188
- </md-select-option>
188
+ </mdif1-select-option>
189
189
  `
190
190
  }
191
191
  )}
192
- </md-filled-select>
192
+ </mdif1-outlined-select>
193
193
  </label>
194
194
  `
195
195
  }
@@ -215,7 +215,7 @@ export class WidgetForm extends LitElement {
215
215
  // `
216
216
 
217
217
  return html`
218
- <md-filled-text-field
218
+ <mdif1-outlined-text-field
219
219
  .name="column-${i}"
220
220
  style="width: 200px;"
221
221
  .label="${field.label ?? ''}"
@@ -223,7 +223,7 @@ export class WidgetForm extends LitElement {
223
223
  .value="${field.defaultValue ?? ''}"
224
224
  supporting-text=${field.description ?? ''}
225
225
  ?required=${field.required && !field.defaultValue}
226
- ></md-filled-text-field>
226
+ ></mdif1-outlined-text-field>
227
227
  `
228
228
  }
229
229
 
@@ -242,9 +242,9 @@ export class WidgetForm extends LitElement {
242
242
  }
243
243
 
244
244
  .edit-fab {
245
- --md-fab-icon-color: white;
246
- --md-fab-container-color: #007bff;
247
- --md-fab-label-text-color: white;
245
+ --mdif1-fab-icon-color: white;
246
+ --mdif1-fab-container-color: #007bff;
247
+ --mdif1-fab-label-text-color: white;
248
248
  position: absolute;
249
249
  bottom: 24px;
250
250
  right: 24px;
@@ -330,11 +330,11 @@ export class WidgetForm extends LitElement {
330
330
  flex-direction: column;
331
331
  }
332
332
 
333
- md-filled-select {
333
+ mdif1-outlined-select {
334
334
  flex: 1;
335
335
  }
336
336
 
337
- md-dialog {
337
+ mdif1-dialog {
338
338
  overflow: visible;
339
339
  }
340
340
 
@@ -345,9 +345,9 @@ export class WidgetForm extends LitElement {
345
345
  .header {
346
346
  display: flex;
347
347
  align-items: center;
348
- --md-fab-icon-color: white;
349
- --md-fab-container-color: #007bff;
350
- --md-fab-label-text-color: white;
348
+ --mdif1-fab-icon-color: white;
349
+ --mdif1-fab-container-color: #007bff;
350
+ --mdif1-fab-label-text-color: white;
351
351
  }
352
352
  `
353
353
 
@@ -356,14 +356,14 @@ export class WidgetForm extends LitElement {
356
356
  <div class="header">
357
357
  ${this.inputData?.formButton
358
358
  ? html`
359
- <md-fab
359
+ <mdif1-fab
360
360
  aria-label="Add"
361
- style="margin-left: 16px; --md-fab-container-color: ${this.theme?.theme_object
362
- ?.color[0] ?? '#9064f7'}"
361
+ style="margin-left: 16px; --mdif1-fab-container-color: ${this.theme
362
+ ?.theme_object?.color[0] ?? '#9064f7'}"
363
363
  @click=${this.openFormDialog}
364
364
  >
365
- <md-icon slot="icon">add</md-icon>
366
- </md-fab>
365
+ <mdif1-icon slot="icon">add</mdif1-icon>
366
+ </mdif1-fab>
367
367
  `
368
368
  : nothing}
369
369
  <header>
@@ -376,17 +376,17 @@ export class WidgetForm extends LitElement {
376
376
  <div class="wrapper">
377
377
  ${this.renderForm()}
378
378
  <div class="form-actions">
379
- <md-outlined-button form="form" value="cancel" type="reset"
380
- >Reset</md-outlined-button
379
+ <mdif1-outlined-button form="form" value="cancel" type="reset"
380
+ >Reset</mdif1-outlined-button
381
381
  >
382
- <md-filled-button form="form" value="submit" type="submit" autofocus
383
- >Submit</md-filled-button
382
+ <mdif1-filled-button form="form" value="submit" type="submit" autofocus
383
+ >Submit</mdif1-filled-button
384
384
  >
385
385
  </div>
386
386
  </div>
387
387
  `
388
388
  : html`
389
- <md-dialog
389
+ <mdif1-dialog
390
390
  aria-label="${this.inputData?.title ?? 'Data Entry'}"
391
391
  class="form"
392
392
  quick
@@ -402,14 +402,14 @@ export class WidgetForm extends LitElement {
402
402
  <div slot="headline">${this.inputData?.title ?? 'Data Entry'}</div>
403
403
  ${this.renderForm()}
404
404
  <div slot="actions">
405
- <md-outlined-button form="form" value="cancel" type="reset"
406
- >Cancel</md-outlined-button
405
+ <mdif1-outlined-button form="form" value="cancel" type="reset"
406
+ >Cancel</mdif1-outlined-button
407
407
  >
408
- <md-filled-button form="form" value="submit" type="submit" autofocus
409
- >Submit</md-filled-button
408
+ <mdif1-filled-button form="form" value="submit" type="submit" autofocus
409
+ >Submit</mdif1-filled-button
410
410
  >
411
411
  </div>
412
- </md-dialog>
412
+ </mdif1-dialog>
413
413
  `}
414
414
  `
415
415
  }