@record-evolution/widget-form 1.0.9 → 1.0.11

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 (10) hide show
  1. package/README.md +64 -72
  2. package/dist/widget-form.d.ts +42 -0
  3. package/dist/widget-form.js +708 -9717
  4. package/dist/widget-form.js.map +1 -1
  5. package/package.json +20 -29
  6. package/src/definition-schema.d.ts +49 -34
  7. package/src/definition-schema.json +18 -13
  8. package/src/widget-form.ts +38 -62
  9. package/dist/src/widget-form.d.ts +0 -45
  10. package/dist/tsconfig.tsbuildinfo +0 -1
package/package.json CHANGED
@@ -3,11 +3,15 @@
3
3
  "description": "REWidget widget-form",
4
4
  "license": "MIT",
5
5
  "author": "widget-form",
6
- "version": "1.0.9",
6
+ "version": "1.0.11",
7
+ "engines": {
8
+ "node": ">=24.9.0",
9
+ "npm": ">=10.0.2"
10
+ },
7
11
  "type": "module",
8
12
  "main": "dist/widget-form.js",
9
13
  "module": "dist/widget-form.js",
10
- "types": "dist/src/widget-form.d.ts",
14
+ "types": "dist/widget-form.d.ts",
11
15
  "files": [
12
16
  "dist",
13
17
  "src",
@@ -15,42 +19,29 @@
15
19
  ],
16
20
  "scripts": {
17
21
  "analyze": "cem analyze --litelement",
18
- "start": "concurrently -k -r \"npm run watch\" \"wds\"",
19
- "build": "node rename-material-package.js && rollup -c rollup.config.js",
20
- "watch": "node rename-material-package.js && rollup -w -c rollup.config.js",
21
- "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-form",
22
+ "start": "vite",
23
+ "build": "vite build",
24
+ "watch": "vite build --watch",
25
+ "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-form",
22
26
  "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-form && npm i @record-evolution/widget-form",
23
- "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
27
+ "types": "cat src/definition-schema.json | json2ts --style.tabWidth=4 > src/definition-schema.d.ts",
24
28
  "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
25
29
  },
26
30
  "dependencies": {
27
- "@material/web": "^2.4.0",
28
- "lit": "^3.3.1",
29
- "lit-flatpickr": "^0.4.1"
31
+ "lit": "^3.3.2",
32
+ "tslib": "^2.8.1"
33
+ },
34
+ "peerDependencies": {
35
+ "@material/web": "^2.4.1"
30
36
  },
31
37
  "devDependencies": {
32
38
  "@custom-elements-manifest/analyzer": "^0.10.4",
33
- "@rollup/plugin-babel": "^6.0.4",
34
- "@rollup/plugin-commonjs": "^28.0.6",
35
- "@rollup/plugin-node-resolve": "^16.0.1",
39
+ "@material/web": "^2.4.1",
36
40
  "@rollup/plugin-replace": "^6.0.2",
37
- "@rollup/plugin-typescript": "^12.1.3",
38
- "@typescript-eslint/eslint-plugin": "^8.34.1",
39
- "@typescript-eslint/parser": "^8.34.1",
40
- "@web/dev-server": "^0.4.6",
41
- "concurrently": "^9.1.2",
42
- "deepmerge": "^4.3.1",
43
- "es-dev-server": "^2.1.0",
44
- "eslint": "^9.29.0",
45
- "eslint-config-prettier": "^10.1.5",
46
- "husky": "^9.1.7",
47
41
  "json-schema-to-typescript": "^15.0.4",
48
- "lint-staged": "^16.1.2",
49
- "prettier": "^3.5.3",
50
- "rimraf": "^6.0.1",
51
- "rollup": "^4.43.0",
52
- "tslib": "^2.8.1",
53
- "typescript": "5.8.3"
42
+ "typescript": "5.9.3",
43
+ "vite": "^7.3.1",
44
+ "vite-plugin-dts": "^4.3.0"
54
45
  },
55
46
  "repository": {
56
47
  "type": "git",
package/src/definition-schema.d.ts CHANGED
@@ -5,86 +5,101 @@
5
5
  * and run json-schema-to-typescript to regenerate this file.
6
6
  */
7
7
 
8
+ /**
9
+ * The main heading displayed at the top of the form. Use to describe the form's purpose (e.g., 'Add New Device', 'Submit Feedback', 'Configuration Settings').
10
+ */
8
11
  export type Title = string;
12
+ /**
13
+ * Secondary text displayed below the title. Use for instructions, context, or additional information about the form.
14
+ */
9
15
  export type Subtitle = string;
10
16
  /**
11
- * If checked, a button will be shown to open the form. If unchecked, the form will be shown directly.
17
+ * When enabled, shows a button that opens the form in a modal dialog when clicked. When disabled, the form fields are displayed directly in the widget area. Use button mode for space-constrained layouts or optional data entry.
12
18
  */
13
19
  export type FormOpenButton = boolean;
20
+ /**
21
+ * The text label displayed next to this form field. Should clearly describe what data the user should enter.
22
+ */
14
23
  export type Label = string;
24
+ /**
25
+ * The input control type: 'dropdown' for selection from predefined options, 'textfield' for single-line text, 'numberfield' for numeric values, 'checkbox' for boolean yes/no, 'textarea' for multi-line text, 'datetime' for date and time selection.
26
+ */
15
27
  export type FieldType = "dropdown" | "textfield" | "numberfield" | "checkbox" | "textarea" | "datetime";
16
28
  /**
17
- * If false, this field will be hidden in the form but still saved on submit.
29
+ * When enabled, this field is hidden from users but its value (typically a default or data-bound value) is still submitted with the form. Useful for including metadata, timestamps, or user IDs automatically.
18
30
  */
19
31
  export type HiddenField = boolean;
20
32
  /**
21
- * This field must be filled out before the form can be submitted. Ignored when a default value is provided.
33
+ * When enabled, users must fill out this field before the form can be submitted. The form will show a validation error if left empty. Ignored when a default value is provided.
22
34
  */
23
35
  export type Required = boolean;
24
36
  /**
25
- * This text will be shown as a description at the field.
37
+ * Helper text displayed below the field to guide users on what to enter. Use for format hints, examples, or clarifying instructions.
26
38
  */
27
39
  export type HintText = string;
28
40
  /**
29
- * This value will be used if the user does not provide a value.
41
+ * Pre-filled value for this field when the form loads. Used if the user doesn't modify the field. Can be a static value or bound to a data source.
30
42
  */
31
43
  export type DefaultValue = string;
32
44
  /**
33
- * Minimum value for number fields.
45
+ * The minimum allowed numeric value for numberfield types. Values below this will fail validation.
34
46
  */
35
47
  export type MinimumValue = number;
36
48
  /**
37
- * Maximum value for number fields.
49
+ * The maximum allowed numeric value for numberfield types. Values above this will fail validation.
38
50
  */
39
51
  export type MaximumValue = number;
40
52
  /**
41
- * Regular expression for validating text fields.
53
+ * A regular expression pattern to validate text input (e.g., '^[A-Z]{2}[0-9]{4}$' for format like 'AB1234'). Leave empty to accept any text.
42
54
  */
43
55
  export type ValidationRegex = string;
44
56
  /**
45
- * Label shown in the dropdown.
57
+ * The text shown to users in the dropdown list.
46
58
  */
47
59
  export type DisplayLabel = string;
48
60
  /**
49
- * Value stored in the database.
61
+ * The actual value stored in the database when this option is selected. May differ from the display label.
50
62
  */
51
63
  export type Value = string;
52
64
  /**
53
- * List of values for the dropdown field.
65
+ * The list of selectable options for dropdown field types. Each option has a display label and a stored value.
54
66
  */
55
67
  export type DropdownValues = {
56
- displayLabel?: DisplayLabel;
57
- value?: Value;
58
- [k: string]: unknown;
68
+ displayLabel?: DisplayLabel;
69
+ value?: Value;
70
+ [k: string]: unknown;
59
71
  }[];
60
72
  /**
61
- * Add fields and define how they should be stored.
73
+ * Array of input fields that make up the form. Each field defines its type, validation rules, and target database column for storage. Fields are rendered in the order specified.
62
74
  */
63
75
  export type FormFields = {
64
- label?: Label;
65
- type?: FieldType;
66
- hiddenField?: HiddenField;
67
- required?: Required;
68
- description?: HintText;
69
- targetColumn?: TargetColumn;
70
- defaultValue?: DefaultValue;
71
- min?: MinimumValue;
72
- max?: MaximumValue;
73
- validation?: ValidationRegex;
74
- values?: DropdownValues;
75
- [k: string]: unknown;
76
+ label?: Label;
77
+ type?: FieldType;
78
+ hiddenField?: HiddenField;
79
+ required?: Required;
80
+ description?: HintText;
81
+ targetColumn?: TargetColumn;
82
+ defaultValue?: DefaultValue;
83
+ min?: MinimumValue;
84
+ max?: MaximumValue;
85
+ validation?: ValidationRegex;
86
+ values?: DropdownValues;
87
+ [k: string]: unknown;
76
88
  }[];
77
89
 
90
+ /**
91
+ * A form widget for collecting user input and storing it in database tables. Use this widget to create data entry interfaces for manual input, configuration settings, user feedback, or any scenario requiring structured data collection. Supports various field types including text, numbers, dropdowns, checkboxes, textareas, and datetime pickers. Each field maps to a database column, enabling direct data persistence. Can display as a button-triggered modal or inline form.
92
+ */
78
93
  export interface InputData {
79
- title?: Title;
80
- subTitle?: Subtitle;
81
- formButton?: FormOpenButton;
82
- formFields?: FormFields;
83
- [k: string]: unknown;
94
+ title?: Title;
95
+ subTitle?: Subtitle;
96
+ formButton?: FormOpenButton;
97
+ formFields?: FormFields;
98
+ [k: string]: unknown;
84
99
  }
85
100
  /**
86
- * The column in the target table where this field's data will be stored. This will be combined with all other fields in this form connected with the same target table.
101
+ * The database table and column where this field's value will be stored on form submission. Select from available tables and columns. All fields targeting the same table will be combined into a single row insert.
87
102
  */
88
103
  export interface TargetColumn {
89
- [k: string]: unknown;
104
+ [k: string]: unknown;
90
105
  }
package/src/definition-schema.json CHANGED
@@ -1,29 +1,32 @@
1
1
  {
2
2
  "title": "InputData",
3
+ "description": "A form widget for collecting user input and storing it in database tables. Use this widget to create data entry interfaces for manual input, configuration settings, user feedback, or any scenario requiring structured data collection. Supports various field types including text, numbers, dropdowns, checkboxes, textareas, and datetime pickers. Each field maps to a database column, enabling direct data persistence. Can display as a button-triggered modal or inline form.",
3
4
  "type": "object",
4
5
  "properties": {
5
6
  "title": {
6
7
  "title": "Title",
8
+ "description": "The main heading displayed at the top of the form. Use to describe the form's purpose (e.g., 'Add New Device', 'Submit Feedback', 'Configuration Settings').",
7
9
  "order": 1,
8
10
  "dataDrivenDisabled": true,
9
11
  "type": "string"
10
12
  },
11
13
  "subTitle": {
12
14
  "title": "Subtitle",
15
+ "description": "Secondary text displayed below the title. Use for instructions, context, or additional information about the form.",
13
16
  "order": 2,
14
17
  "dataDrivenDisabled": true,
15
18
  "type": "string"
16
19
  },
17
20
  "formButton": {
18
21
  "title": "Form Open Button",
19
- "description": "If checked, a button will be shown to open the form. If unchecked, the form will be shown directly.",
22
+ "description": "When enabled, shows a button that opens the form in a modal dialog when clicked. When disabled, the form fields are displayed directly in the widget area. Use button mode for space-constrained layouts or optional data entry.",
20
23
  "dataDrivenDisabled": true,
21
24
  "type": "boolean",
22
25
  "order": 3
23
26
  },
24
27
  "formFields": {
25
28
  "title": "Form Fields",
26
- "description": "Add fields and define how they should be stored.",
29
+ "description": "Array of input fields that make up the form. Each field defines its type, validation rules, and target database column for storage. Fields are rendered in the order specified.",
27
30
  "type": "array",
28
31
  "order": 4,
29
32
  "dataDrivenDisabled": true,
@@ -32,6 +35,7 @@
32
35
  "properties": {
33
36
  "label": {
34
37
  "title": "Label",
38
+ "description": "The text label displayed next to this form field. Should clearly describe what data the user should enter.",
35
39
  "type": "string",
36
40
  "dataDrivenDisabled": true,
37
41
  "required": true,
@@ -39,6 +43,7 @@
39
43
  },
40
44
  "type": {
41
45
  "title": "Field Type",
46
+ "description": "The input control type: 'dropdown' for selection from predefined options, 'textfield' for single-line text, 'numberfield' for numeric values, 'checkbox' for boolean yes/no, 'textarea' for multi-line text, 'datetime' for date and time selection.",
42
47
  "enum": ["dropdown", "textfield", "numberfield", "checkbox", "textarea", "datetime"],
43
48
  "type": "string",
44
49
  "dataDrivenDisabled": true,
@@ -48,35 +53,35 @@
48
53
  "hiddenField": {
49
54
  "title": "Hidden Field",
50
55
  "type": "boolean",
51
- "description": "If false, this field will be hidden in the form but still saved on submit.",
56
+ "description": "When enabled, this field is hidden from users but its value (typically a default or data-bound value) is still submitted with the form. Useful for including metadata, timestamps, or user IDs automatically.",
52
57
  "dataDrivenDisabled": true,
53
58
  "order": 3
54
59
  },
55
60
  "required": {
56
61
  "title": "Required",
57
62
  "type": "boolean",
58
- "description": "This field must be filled out before the form can be submitted. Ignored when a default value is provided.",
63
+ "description": "When enabled, users must fill out this field before the form can be submitted. The form will show a validation error if left empty. Ignored when a default value is provided.",
59
64
  "dataDrivenDisabled": true,
60
65
  "order": 4
61
66
  },
62
67
  "description": {
63
68
  "title": "Hint Text",
64
69
  "type": "string",
65
- "description": "This text will be shown as a description at the field.",
70
+ "description": "Helper text displayed below the field to guide users on what to enter. Use for format hints, examples, or clarifying instructions.",
66
71
  "dataDrivenDisabled": true,
67
72
  "order": 5
68
73
  },
69
74
  "targetColumn": {
70
75
  "title": "Target Column",
71
76
  "type": "targetColumn",
72
- "description": "The column in the target table where this field's data will be stored. This will be combined with all other fields in this form connected with the same target table.",
77
+ "description": "The database table and column where this field's value will be stored on form submission. Select from available tables and columns. All fields targeting the same table will be combined into a single row insert.",
73
78
  "dataDrivenDisabled": true,
74
79
  "required": true,
75
80
  "order": 6
76
81
  },
77
82
  "defaultValue": {
78
83
  "title": "Default Value",
79
- "description": "This value will be used if the user does not provide a value.",
84
+ "description": "Pre-filled value for this field when the form loads. Used if the user doesn't modify the field. Can be a static value or bound to a data source.",
80
85
  "type": "string",
81
86
  "order": 7,
82
87
  "dataDrivenDisabled": true
@@ -84,7 +89,7 @@
84
89
  "min": {
85
90
  "title": "Minimum Value",
86
91
  "type": "number",
87
- "description": "Minimum value for number fields.",
92
+ "description": "The minimum allowed numeric value for numberfield types. Values below this will fail validation.",
88
93
  "dataDrivenDisabled": true,
89
94
  "condition": {
90
95
  "relativePath": "../type",
@@ -95,7 +100,7 @@
95
100
  "max": {
96
101
  "title": "Maximum Value",
97
102
  "type": "number",
98
- "description": "Maximum value for number fields.",
103
+ "description": "The maximum allowed numeric value for numberfield types. Values above this will fail validation.",
99
104
  "dataDrivenDisabled": true,
100
105
  "condition": {
101
106
  "relativePath": "../type",
@@ -106,7 +111,7 @@
106
111
  "validation": {
107
112
  "title": "Validation Regex",
108
113
  "type": "string",
109
- "description": "Regular expression for validating text fields.",
114
+ "description": "A regular expression pattern to validate text input (e.g., '^[A-Z]{2}[0-9]{4}$' for format like 'AB1234'). Leave empty to accept any text.",
110
115
  "dataDrivenDisabled": true,
111
116
  "condition": {
112
117
  "relativePath": "../type",
@@ -117,7 +122,7 @@
117
122
  "values": {
118
123
  "title": "Dropdown Values",
119
124
  "type": "array",
120
- "description": "List of values for the dropdown field.",
125
+ "description": "The list of selectable options for dropdown field types. Each option has a display label and a stored value.",
121
126
  "condition": {
122
127
  "relativePath": "../type",
123
128
  "showIfValueIn": ["dropdown"]
@@ -128,14 +133,14 @@
128
133
  "displayLabel": {
129
134
  "title": "Display Label",
130
135
  "type": "string",
131
- "description": "Label shown in the dropdown.",
136
+ "description": "The text shown to users in the dropdown list.",
132
137
  "required": true,
133
138
  "order": 1
134
139
  },
135
140
  "value": {
136
141
  "title": "Value",
137
142
  "type": "string",
138
- "description": "Value stored in the database.",
143
+ "description": "The actual value stored in the database when this option is selected. May differ from the display label.",
139
144
  "required": true,
140
145
  "order": 2
141
146
  }
package/src/widget-form.ts CHANGED
@@ -14,7 +14,6 @@ import '@material/web/textfield/outlined-text-field.js'
14
14
  import '@material/web/checkbox/checkbox.js'
15
15
  import '@material/web/select/outlined-select.js'
16
16
  import '@material/web/select/select-option.js'
17
- // import 'lit-flatpickr'
18
17
 
19
18
  import type { MdDialog } from '@material/web/dialog/dialog.js'
20
19
 
@@ -37,7 +36,7 @@ export class WidgetForm extends LitElement {
37
36
 
38
37
  @state() dialogOpen: boolean = false
39
38
 
40
- @query('mdif1-dialog') dialog!: MdDialog
39
+ @query('md-dialog') dialog!: MdDialog
41
40
 
42
41
  version: string = 'versionplaceholder'
43
42
 
@@ -107,7 +106,7 @@ export class WidgetForm extends LitElement {
107
106
 
108
107
  renderTextField(field: Column, i: number) {
109
108
  return html`
110
- <mdif1-outlined-text-field
109
+ <md-outlined-text-field
111
110
  .name="column-${i}"
112
111
  .label="${field.label ?? ''}"
113
112
  .type="${field.type === 'numberfield' ? 'number' : 'text'}"
@@ -116,13 +115,13 @@ export class WidgetForm extends LitElement {
116
115
  supporting-text=${field.description ?? ''}
117
116
  validation-message="${field.validationMessage ?? 'Invalid input'}"
118
117
  ?required=${field.required && !field.defaultValue}
119
- ></mdif1-outlined-text-field>
118
+ ></md-outlined-text-field>
120
119
  `
121
120
  }
122
121
 
123
122
  renderNumberField(field: Column, i: number) {
124
123
  return html`
125
- <mdif1-outlined-text-field
124
+ <md-outlined-text-field
126
125
  .name="column-${i}"
127
126
  .label="${field.label ?? ''}"
128
127
  style="width: 200px;"
@@ -133,20 +132,20 @@ export class WidgetForm extends LitElement {
133
132
  max=${field.max ?? ''}
134
133
  supporting-text=${field.description ?? ''}
135
134
  ?required=${field.required && !field.defaultValue}
136
- ></mdif1-outlined-text-field>
135
+ ></md-outlined-text-field>
137
136
  `
138
137
  }
139
138
 
140
139
  renderCheckbox(field: Column, i: number) {
141
140
  return html`
142
141
  <div class="checkbox-container">
143
- <mdif1-checkbox
142
+ <md-checkbox
144
143
  name="column-${i}"
145
144
  aria-label=${field.label ?? ''}
146
145
  ?checked=${field.defaultValue === 'true'}
147
146
  supporting-text=${field.description ?? ''}
148
147
  ?required=${field.required && !field.defaultValue}
149
- ></mdif1-checkbox>
148
+ ></md-checkbox>
150
149
  <label class="label"> ${field.label} </label>
151
150
  </div>
152
151
  `
@@ -154,7 +153,7 @@ export class WidgetForm extends LitElement {
154
153
 
155
154
  renderTextArea(field: Column, i: number) {
156
155
  return html`
157
- <mdif1-outlined-text-field
156
+ <md-outlined-text-field
158
157
  .name="column-${i}"
159
158
  .label="${field.label ?? ''}"
160
159
  type="textarea"
@@ -162,7 +161,7 @@ export class WidgetForm extends LitElement {
162
161
  rows="3"
163
162
  ?required=${field.required && !field.defaultValue}
164
163
  supporting-text=${field.description ?? ''}
165
- ></mdif1-outlined-text-field>
164
+ ></md-outlined-text-field>
166
165
  `
167
166
  }
168
167
 
@@ -170,7 +169,7 @@ export class WidgetForm extends LitElement {
170
169
  return html`
171
170
  <label class="label">
172
171
  ${field.label}
173
- <mdif1-outlined-select
172
+ <md-outlined-select
174
173
  name="column-${i}"
175
174
  supporting-text=${field.description ?? ''}
176
175
  ?required=${field.required && !field.defaultValue}
@@ -180,42 +179,23 @@ export class WidgetForm extends LitElement {
180
179
  (val) => val.value,
181
180
  (val) => {
182
181
  return html`
183
- <mdif1-select-option
182
+ <md-select-option
184
183
  .value="${val.value ?? ''}"
185
184
  ?selected="${val.value === field.defaultValue}"
186
185
  >
187
186
  ${val.displayLabel}
188
- </mdif1-select-option>
187
+ </md-select-option>
189
188
  `
190
189
  }
191
190
  )}
192
- </mdif1-outlined-select>
191
+ </md-outlined-select>
193
192
  </label>
194
193
  `
195
194
  }
196
195
 
197
196
  renderDateTimeField(field: Column, i: number) {
198
- // return html`
199
- // <label id="x" class="label"> ${field.label} </label>
200
- // <lit-flatpickr
201
- // .name="column-${i}"
202
- // .label="${field.label ?? ''}"
203
- // allowInput
204
- // enableTime
205
- // mode="single"
206
- // dateFormat="Y-m-d H:i:S"
207
- // altFormat="Y-m-d H:i:S"
208
- // time_24hr
209
- // .defaultDate="${field.defaultValue}"
210
- // showMonths="1"
211
- // weekNumbers
212
- // >
213
- // <input />
214
- // </lit-flatpickr>
215
- // `
216
-
217
197
  return html`
218
- <mdif1-outlined-text-field
198
+ <md-outlined-text-field
219
199
  .name="column-${i}"
220
200
  style="width: 200px;"
221
201
  .label="${field.label ?? ''}"
@@ -223,7 +203,7 @@ export class WidgetForm extends LitElement {
223
203
  .value="${field.defaultValue ?? ''}"
224
204
  supporting-text=${field.description ?? ''}
225
205
  ?required=${field.required && !field.defaultValue}
226
- ></mdif1-outlined-text-field>
206
+ ></md-outlined-text-field>
227
207
  `
228
208
  }
229
209
 
@@ -242,9 +222,9 @@ export class WidgetForm extends LitElement {
242
222
  }
243
223
 
244
224
  .edit-fab {
245
- --mdif1-fab-icon-color: white;
246
- --mdif1-fab-container-color: #007bff;
247
- --mdif1-fab-label-text-color: white;
225
+ --md-fab-icon-color: white;
226
+ --md-fab-container-color: #007bff;
227
+ --md-fab-label-text-color: white;
248
228
  position: absolute;
249
229
  bottom: 24px;
250
230
  right: 24px;
@@ -330,24 +310,20 @@ export class WidgetForm extends LitElement {
330
310
  flex-direction: column;
331
311
  }
332
312
 
333
- mdif1-outlined-select {
313
+ md-outlined-select {
334
314
  flex: 1;
335
315
  }
336
316
 
337
- mdif1-dialog {
317
+ md-dialog {
338
318
  overflow: visible;
339
319
  }
340
320
 
341
- lit-flatpickr {
342
- z-index: 1000;
343
- }
344
-
345
321
  .header {
346
322
  display: flex;
347
323
  align-items: center;
348
- --mdif1-fab-icon-color: white;
349
- --mdif1-fab-container-color: #007bff;
350
- --mdif1-fab-label-text-color: white;
324
+ --md-fab-icon-color: white;
325
+ --md-fab-container-color: #007bff;
326
+ --md-fab-label-text-color: white;
351
327
  }
352
328
  `
353
329
 
@@ -356,14 +332,14 @@ export class WidgetForm extends LitElement {
356
332
  <div class="header">
357
333
  ${this.inputData?.formButton
358
334
  ? html`
359
- <mdif1-fab
335
+ <md-fab
360
336
  aria-label="Add"
361
- style="margin-left: 16px; --mdif1-fab-container-color: ${this.theme
362
- ?.theme_object?.color[0] ?? '#9064f7'}"
337
+ style="margin-left: 16px; --md-fab-container-color: ${this.theme?.theme_object
338
+ ?.color[0] ?? '#9064f7'}"
363
339
  @click=${this.openFormDialog}
364
340
  >
365
- <mdif1-icon slot="icon">add</mdif1-icon>
366
- </mdif1-fab>
341
+ <md-icon slot="icon">add</md-icon>
342
+ </md-fab>
367
343
  `
368
344
  : nothing}
369
345
  <header>
@@ -376,17 +352,17 @@ export class WidgetForm extends LitElement {
376
352
  <div class="wrapper">
377
353
  ${this.renderForm()}
378
354
  <div class="form-actions">
379
- <mdif1-outlined-button form="form" value="cancel" type="reset"
380
- >Reset</mdif1-outlined-button
355
+ <md-outlined-button form="form" value="cancel" type="reset"
356
+ >Reset</md-outlined-button
381
357
  >
382
- <mdif1-filled-button form="form" value="submit" type="submit" autofocus
383
- >Submit</mdif1-filled-button
358
+ <md-filled-button form="form" value="submit" type="submit" autofocus
359
+ >Submit</md-filled-button
384
360
  >
385
361
  </div>
386
362
  </div>
387
363
  `
388
364
  : html`
389
- <mdif1-dialog
365
+ <md-dialog
390
366
  aria-label="${this.inputData?.title ?? 'Data Entry'}"
391
367
  class="form"
392
368
  quick
@@ -402,14 +378,14 @@ export class WidgetForm extends LitElement {
402
378
  <div slot="headline">${this.inputData?.title ?? 'Data Entry'}</div>
403
379
  ${this.renderForm()}
404
380
  <div slot="actions">
405
- <mdif1-outlined-button form="form" value="cancel" type="reset"
406
- >Cancel</mdif1-outlined-button
381
+ <md-outlined-button form="form" value="cancel" type="reset"
382
+ >Cancel</md-outlined-button
407
383
  >
408
- <mdif1-filled-button form="form" value="submit" type="submit" autofocus
409
- >Submit</mdif1-filled-button
384
+ <md-filled-button form="form" value="submit" type="submit" autofocus
385
+ >Submit</md-filled-button
410
386
  >
411
387
  </div>
412
- </mdif1-dialog>
388
+ </md-dialog>
413
389
  `}
414
390
  `
415
391
  }