@operato/form 10.13.0 → 10.15.0
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.
- package/CHANGELOG.md +9 -0
- package/coverage/lcov-report/base.css +224 -0
- package/coverage/lcov-report/block-navigation.js +87 -0
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/index.html +146 -0
- package/coverage/lcov-report/prettify.css +1 -0
- package/coverage/lcov-report/prettify.js +2 -0
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +210 -0
- package/coverage/lcov.info +318 -0
- package/dist/src/components/ox-custom-input.js +2 -1
- package/dist/src/components/ox-custom-input.js.map +1 -1
- package/dist/src/filters/filter-styles.js +3 -2
- package/dist/src/filters/filter-styles.js.map +1 -1
- package/dist/test/form-element-height.test.d.ts +1 -0
- package/dist/test/form-element-height.test.js +25 -0
- package/dist/test/form-element-height.test.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -6
- package/test/form-element-height.test.ts +30 -0
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
var addSorting = (function() {
|
|
3
|
+
'use strict';
|
|
4
|
+
var cols,
|
|
5
|
+
currentSort = {
|
|
6
|
+
index: 0,
|
|
7
|
+
desc: false
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
// returns the summary table element
|
|
11
|
+
function getTable() {
|
|
12
|
+
return document.querySelector('.coverage-summary');
|
|
13
|
+
}
|
|
14
|
+
// returns the thead element of the summary table
|
|
15
|
+
function getTableHeader() {
|
|
16
|
+
return getTable().querySelector('thead tr');
|
|
17
|
+
}
|
|
18
|
+
// returns the tbody element of the summary table
|
|
19
|
+
function getTableBody() {
|
|
20
|
+
return getTable().querySelector('tbody');
|
|
21
|
+
}
|
|
22
|
+
// returns the th element for nth column
|
|
23
|
+
function getNthColumn(n) {
|
|
24
|
+
return getTableHeader().querySelectorAll('th')[n];
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function onFilterInput() {
|
|
28
|
+
const searchValue = document.getElementById('fileSearch').value;
|
|
29
|
+
const rows = document.getElementsByTagName('tbody')[0].children;
|
|
30
|
+
|
|
31
|
+
// Try to create a RegExp from the searchValue. If it fails (invalid regex),
|
|
32
|
+
// it will be treated as a plain text search
|
|
33
|
+
let searchRegex;
|
|
34
|
+
try {
|
|
35
|
+
searchRegex = new RegExp(searchValue, 'i'); // 'i' for case-insensitive
|
|
36
|
+
} catch (error) {
|
|
37
|
+
searchRegex = null;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
for (let i = 0; i < rows.length; i++) {
|
|
41
|
+
const row = rows[i];
|
|
42
|
+
let isMatch = false;
|
|
43
|
+
|
|
44
|
+
if (searchRegex) {
|
|
45
|
+
// If a valid regex was created, use it for matching
|
|
46
|
+
isMatch = searchRegex.test(row.textContent);
|
|
47
|
+
} else {
|
|
48
|
+
// Otherwise, fall back to the original plain text search
|
|
49
|
+
isMatch = row.textContent
|
|
50
|
+
.toLowerCase()
|
|
51
|
+
.includes(searchValue.toLowerCase());
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
row.style.display = isMatch ? '' : 'none';
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// loads the search box
|
|
59
|
+
function addSearchBox() {
|
|
60
|
+
var template = document.getElementById('filterTemplate');
|
|
61
|
+
var templateClone = template.content.cloneNode(true);
|
|
62
|
+
templateClone.getElementById('fileSearch').oninput = onFilterInput;
|
|
63
|
+
template.parentElement.appendChild(templateClone);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// loads all columns
|
|
67
|
+
function loadColumns() {
|
|
68
|
+
var colNodes = getTableHeader().querySelectorAll('th'),
|
|
69
|
+
colNode,
|
|
70
|
+
cols = [],
|
|
71
|
+
col,
|
|
72
|
+
i;
|
|
73
|
+
|
|
74
|
+
for (i = 0; i < colNodes.length; i += 1) {
|
|
75
|
+
colNode = colNodes[i];
|
|
76
|
+
col = {
|
|
77
|
+
key: colNode.getAttribute('data-col'),
|
|
78
|
+
sortable: !colNode.getAttribute('data-nosort'),
|
|
79
|
+
type: colNode.getAttribute('data-type') || 'string'
|
|
80
|
+
};
|
|
81
|
+
cols.push(col);
|
|
82
|
+
if (col.sortable) {
|
|
83
|
+
col.defaultDescSort = col.type === 'number';
|
|
84
|
+
colNode.innerHTML =
|
|
85
|
+
colNode.innerHTML + '<span class="sorter"></span>';
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
return cols;
|
|
89
|
+
}
|
|
90
|
+
// attaches a data attribute to every tr element with an object
|
|
91
|
+
// of data values keyed by column name
|
|
92
|
+
function loadRowData(tableRow) {
|
|
93
|
+
var tableCols = tableRow.querySelectorAll('td'),
|
|
94
|
+
colNode,
|
|
95
|
+
col,
|
|
96
|
+
data = {},
|
|
97
|
+
i,
|
|
98
|
+
val;
|
|
99
|
+
for (i = 0; i < tableCols.length; i += 1) {
|
|
100
|
+
colNode = tableCols[i];
|
|
101
|
+
col = cols[i];
|
|
102
|
+
val = colNode.getAttribute('data-value');
|
|
103
|
+
if (col.type === 'number') {
|
|
104
|
+
val = Number(val);
|
|
105
|
+
}
|
|
106
|
+
data[col.key] = val;
|
|
107
|
+
}
|
|
108
|
+
return data;
|
|
109
|
+
}
|
|
110
|
+
// loads all row data
|
|
111
|
+
function loadData() {
|
|
112
|
+
var rows = getTableBody().querySelectorAll('tr'),
|
|
113
|
+
i;
|
|
114
|
+
|
|
115
|
+
for (i = 0; i < rows.length; i += 1) {
|
|
116
|
+
rows[i].data = loadRowData(rows[i]);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
// sorts the table using the data for the ith column
|
|
120
|
+
function sortByIndex(index, desc) {
|
|
121
|
+
var key = cols[index].key,
|
|
122
|
+
sorter = function(a, b) {
|
|
123
|
+
a = a.data[key];
|
|
124
|
+
b = b.data[key];
|
|
125
|
+
return a < b ? -1 : a > b ? 1 : 0;
|
|
126
|
+
},
|
|
127
|
+
finalSorter = sorter,
|
|
128
|
+
tableBody = document.querySelector('.coverage-summary tbody'),
|
|
129
|
+
rowNodes = tableBody.querySelectorAll('tr'),
|
|
130
|
+
rows = [],
|
|
131
|
+
i;
|
|
132
|
+
|
|
133
|
+
if (desc) {
|
|
134
|
+
finalSorter = function(a, b) {
|
|
135
|
+
return -1 * sorter(a, b);
|
|
136
|
+
};
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
for (i = 0; i < rowNodes.length; i += 1) {
|
|
140
|
+
rows.push(rowNodes[i]);
|
|
141
|
+
tableBody.removeChild(rowNodes[i]);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
rows.sort(finalSorter);
|
|
145
|
+
|
|
146
|
+
for (i = 0; i < rows.length; i += 1) {
|
|
147
|
+
tableBody.appendChild(rows[i]);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
// removes sort indicators for current column being sorted
|
|
151
|
+
function removeSortIndicators() {
|
|
152
|
+
var col = getNthColumn(currentSort.index),
|
|
153
|
+
cls = col.className;
|
|
154
|
+
|
|
155
|
+
cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
|
|
156
|
+
col.className = cls;
|
|
157
|
+
}
|
|
158
|
+
// adds sort indicators for current column being sorted
|
|
159
|
+
function addSortIndicators() {
|
|
160
|
+
getNthColumn(currentSort.index).className += currentSort.desc
|
|
161
|
+
? ' sorted-desc'
|
|
162
|
+
: ' sorted';
|
|
163
|
+
}
|
|
164
|
+
// adds event listeners for all sorter widgets
|
|
165
|
+
function enableUI() {
|
|
166
|
+
var i,
|
|
167
|
+
el,
|
|
168
|
+
ithSorter = function ithSorter(i) {
|
|
169
|
+
var col = cols[i];
|
|
170
|
+
|
|
171
|
+
return function() {
|
|
172
|
+
var desc = col.defaultDescSort;
|
|
173
|
+
|
|
174
|
+
if (currentSort.index === i) {
|
|
175
|
+
desc = !currentSort.desc;
|
|
176
|
+
}
|
|
177
|
+
sortByIndex(i, desc);
|
|
178
|
+
removeSortIndicators();
|
|
179
|
+
currentSort.index = i;
|
|
180
|
+
currentSort.desc = desc;
|
|
181
|
+
addSortIndicators();
|
|
182
|
+
};
|
|
183
|
+
};
|
|
184
|
+
for (i = 0; i < cols.length; i += 1) {
|
|
185
|
+
if (cols[i].sortable) {
|
|
186
|
+
// add the click event handler on the th so users
|
|
187
|
+
// dont have to click on those tiny arrows
|
|
188
|
+
el = getNthColumn(i).querySelector('.sorter').parentElement;
|
|
189
|
+
if (el.addEventListener) {
|
|
190
|
+
el.addEventListener('click', ithSorter(i));
|
|
191
|
+
} else {
|
|
192
|
+
el.attachEvent('onclick', ithSorter(i));
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
// adds sorting functionality to the UI
|
|
198
|
+
return function() {
|
|
199
|
+
if (!getTable()) {
|
|
200
|
+
return;
|
|
201
|
+
}
|
|
202
|
+
cols = loadColumns();
|
|
203
|
+
loadData();
|
|
204
|
+
addSearchBox();
|
|
205
|
+
addSortIndicators();
|
|
206
|
+
enableUI();
|
|
207
|
+
};
|
|
208
|
+
})();
|
|
209
|
+
|
|
210
|
+
window.addEventListener('load', addSorting);
|
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
TN:
|
|
2
|
+
SF:__wds-outside-root__/1/styles/src/form-element-heights.ts
|
|
3
|
+
FN:29,formElementHeight
|
|
4
|
+
FNF:1
|
|
5
|
+
FNH:1
|
|
6
|
+
FNDA:3,formElementHeight
|
|
7
|
+
DA:1,1
|
|
8
|
+
DA:2,1
|
|
9
|
+
DA:3,1
|
|
10
|
+
DA:4,1
|
|
11
|
+
DA:5,1
|
|
12
|
+
DA:6,1
|
|
13
|
+
DA:7,1
|
|
14
|
+
DA:8,1
|
|
15
|
+
DA:9,1
|
|
16
|
+
DA:10,1
|
|
17
|
+
DA:11,1
|
|
18
|
+
DA:12,1
|
|
19
|
+
DA:13,1
|
|
20
|
+
DA:14,1
|
|
21
|
+
DA:15,1
|
|
22
|
+
DA:16,1
|
|
23
|
+
DA:17,1
|
|
24
|
+
DA:18,1
|
|
25
|
+
DA:19,1
|
|
26
|
+
DA:20,1
|
|
27
|
+
DA:21,1
|
|
28
|
+
DA:22,1
|
|
29
|
+
DA:23,1
|
|
30
|
+
DA:24,1
|
|
31
|
+
DA:25,1
|
|
32
|
+
DA:26,1
|
|
33
|
+
DA:27,1
|
|
34
|
+
DA:28,1
|
|
35
|
+
DA:29,1
|
|
36
|
+
DA:30,3
|
|
37
|
+
DA:31,3
|
|
38
|
+
LF:31
|
|
39
|
+
LH:31
|
|
40
|
+
BRDA:29,0,0,3
|
|
41
|
+
BRF:1
|
|
42
|
+
BRH:1
|
|
43
|
+
end_of_record
|
|
44
|
+
TN:
|
|
45
|
+
SF:src/components/ox-custom-input.ts
|
|
46
|
+
FN:7,CustomInput
|
|
47
|
+
FN:33,render
|
|
48
|
+
FN:46,get checked
|
|
49
|
+
FN:50,set checked
|
|
50
|
+
FN:54,firstUpdated
|
|
51
|
+
FN:58,updated
|
|
52
|
+
FN:85,_isObject
|
|
53
|
+
FN:89,focus
|
|
54
|
+
FN:93,select
|
|
55
|
+
FN:97,blur
|
|
56
|
+
FN:101,checkValidity
|
|
57
|
+
FNF:11
|
|
58
|
+
FNH:0
|
|
59
|
+
FNDA:0,CustomInput
|
|
60
|
+
FNDA:0,render
|
|
61
|
+
FNDA:0,get checked
|
|
62
|
+
FNDA:0,set checked
|
|
63
|
+
FNDA:0,firstUpdated
|
|
64
|
+
FNDA:0,updated
|
|
65
|
+
FNDA:0,_isObject
|
|
66
|
+
FNDA:0,focus
|
|
67
|
+
FNDA:0,select
|
|
68
|
+
FNDA:0,blur
|
|
69
|
+
FNDA:0,checkValidity
|
|
70
|
+
DA:1,1
|
|
71
|
+
DA:2,1
|
|
72
|
+
DA:3,1
|
|
73
|
+
DA:4,1
|
|
74
|
+
DA:5,1
|
|
75
|
+
DA:6,1
|
|
76
|
+
DA:7,1
|
|
77
|
+
DA:8,0
|
|
78
|
+
DA:9,0
|
|
79
|
+
DA:10,0
|
|
80
|
+
DA:11,0
|
|
81
|
+
DA:12,0
|
|
82
|
+
DA:13,0
|
|
83
|
+
DA:14,0
|
|
84
|
+
DA:15,0
|
|
85
|
+
DA:16,0
|
|
86
|
+
DA:17,0
|
|
87
|
+
DA:18,0
|
|
88
|
+
DA:19,0
|
|
89
|
+
DA:20,0
|
|
90
|
+
DA:21,0
|
|
91
|
+
DA:22,0
|
|
92
|
+
DA:23,0
|
|
93
|
+
DA:24,0
|
|
94
|
+
DA:25,0
|
|
95
|
+
DA:26,0
|
|
96
|
+
DA:27,0
|
|
97
|
+
DA:28,0
|
|
98
|
+
DA:29,0
|
|
99
|
+
DA:30,0
|
|
100
|
+
DA:31,0
|
|
101
|
+
DA:32,0
|
|
102
|
+
DA:33,0
|
|
103
|
+
DA:34,0
|
|
104
|
+
DA:35,0
|
|
105
|
+
DA:36,0
|
|
106
|
+
DA:37,0
|
|
107
|
+
DA:38,0
|
|
108
|
+
DA:39,0
|
|
109
|
+
DA:40,0
|
|
110
|
+
DA:41,0
|
|
111
|
+
DA:42,0
|
|
112
|
+
DA:43,0
|
|
113
|
+
DA:44,0
|
|
114
|
+
DA:45,0
|
|
115
|
+
DA:46,0
|
|
116
|
+
DA:47,0
|
|
117
|
+
DA:48,0
|
|
118
|
+
DA:49,0
|
|
119
|
+
DA:50,0
|
|
120
|
+
DA:51,0
|
|
121
|
+
DA:52,0
|
|
122
|
+
DA:53,0
|
|
123
|
+
DA:54,0
|
|
124
|
+
DA:55,0
|
|
125
|
+
DA:56,0
|
|
126
|
+
DA:57,0
|
|
127
|
+
DA:58,0
|
|
128
|
+
DA:59,0
|
|
129
|
+
DA:60,0
|
|
130
|
+
DA:61,0
|
|
131
|
+
DA:62,0
|
|
132
|
+
DA:63,0
|
|
133
|
+
DA:64,0
|
|
134
|
+
DA:65,0
|
|
135
|
+
DA:66,0
|
|
136
|
+
DA:67,0
|
|
137
|
+
DA:68,0
|
|
138
|
+
DA:69,0
|
|
139
|
+
DA:70,0
|
|
140
|
+
DA:71,0
|
|
141
|
+
DA:72,0
|
|
142
|
+
DA:73,0
|
|
143
|
+
DA:74,0
|
|
144
|
+
DA:75,0
|
|
145
|
+
DA:76,0
|
|
146
|
+
DA:77,0
|
|
147
|
+
DA:78,0
|
|
148
|
+
DA:79,0
|
|
149
|
+
DA:80,0
|
|
150
|
+
DA:81,0
|
|
151
|
+
DA:82,0
|
|
152
|
+
DA:83,0
|
|
153
|
+
DA:84,0
|
|
154
|
+
DA:85,0
|
|
155
|
+
DA:86,0
|
|
156
|
+
DA:87,0
|
|
157
|
+
DA:88,0
|
|
158
|
+
DA:89,0
|
|
159
|
+
DA:90,0
|
|
160
|
+
DA:91,0
|
|
161
|
+
DA:92,0
|
|
162
|
+
DA:93,0
|
|
163
|
+
DA:94,0
|
|
164
|
+
DA:95,0
|
|
165
|
+
DA:96,0
|
|
166
|
+
DA:97,0
|
|
167
|
+
DA:98,0
|
|
168
|
+
DA:99,0
|
|
169
|
+
DA:100,0
|
|
170
|
+
DA:101,0
|
|
171
|
+
DA:102,0
|
|
172
|
+
DA:103,0
|
|
173
|
+
DA:104,0
|
|
174
|
+
LF:104
|
|
175
|
+
LH:7
|
|
176
|
+
BRF:0
|
|
177
|
+
BRH:0
|
|
178
|
+
end_of_record
|
|
179
|
+
TN:
|
|
180
|
+
SF:src/filters/filter-styles.ts
|
|
181
|
+
FNF:0
|
|
182
|
+
FNH:0
|
|
183
|
+
DA:1,1
|
|
184
|
+
DA:2,1
|
|
185
|
+
DA:3,1
|
|
186
|
+
DA:4,1
|
|
187
|
+
DA:5,1
|
|
188
|
+
DA:6,1
|
|
189
|
+
DA:7,1
|
|
190
|
+
DA:8,1
|
|
191
|
+
DA:9,1
|
|
192
|
+
DA:10,1
|
|
193
|
+
DA:11,1
|
|
194
|
+
DA:12,1
|
|
195
|
+
DA:13,1
|
|
196
|
+
DA:14,1
|
|
197
|
+
DA:15,1
|
|
198
|
+
DA:16,1
|
|
199
|
+
DA:17,1
|
|
200
|
+
DA:18,1
|
|
201
|
+
DA:19,1
|
|
202
|
+
DA:20,1
|
|
203
|
+
DA:21,1
|
|
204
|
+
DA:22,1
|
|
205
|
+
DA:23,1
|
|
206
|
+
DA:24,1
|
|
207
|
+
DA:25,1
|
|
208
|
+
DA:26,1
|
|
209
|
+
DA:27,1
|
|
210
|
+
DA:28,1
|
|
211
|
+
DA:29,1
|
|
212
|
+
DA:30,1
|
|
213
|
+
DA:31,1
|
|
214
|
+
DA:32,1
|
|
215
|
+
DA:33,1
|
|
216
|
+
DA:34,1
|
|
217
|
+
DA:35,1
|
|
218
|
+
DA:36,1
|
|
219
|
+
DA:37,1
|
|
220
|
+
DA:38,1
|
|
221
|
+
DA:39,1
|
|
222
|
+
DA:40,1
|
|
223
|
+
DA:41,1
|
|
224
|
+
DA:42,1
|
|
225
|
+
DA:43,1
|
|
226
|
+
DA:44,1
|
|
227
|
+
DA:45,1
|
|
228
|
+
DA:46,1
|
|
229
|
+
DA:47,1
|
|
230
|
+
DA:48,1
|
|
231
|
+
DA:49,1
|
|
232
|
+
DA:50,1
|
|
233
|
+
DA:51,1
|
|
234
|
+
DA:52,1
|
|
235
|
+
DA:53,1
|
|
236
|
+
DA:54,1
|
|
237
|
+
DA:55,1
|
|
238
|
+
DA:56,1
|
|
239
|
+
DA:57,1
|
|
240
|
+
DA:58,1
|
|
241
|
+
DA:59,1
|
|
242
|
+
DA:60,1
|
|
243
|
+
DA:61,1
|
|
244
|
+
DA:62,1
|
|
245
|
+
DA:63,1
|
|
246
|
+
DA:64,1
|
|
247
|
+
DA:65,1
|
|
248
|
+
DA:66,1
|
|
249
|
+
DA:67,1
|
|
250
|
+
DA:68,1
|
|
251
|
+
DA:69,1
|
|
252
|
+
DA:70,1
|
|
253
|
+
DA:71,1
|
|
254
|
+
DA:72,1
|
|
255
|
+
DA:73,1
|
|
256
|
+
DA:74,1
|
|
257
|
+
DA:75,1
|
|
258
|
+
DA:76,1
|
|
259
|
+
DA:77,1
|
|
260
|
+
DA:78,1
|
|
261
|
+
DA:79,1
|
|
262
|
+
DA:80,1
|
|
263
|
+
DA:81,1
|
|
264
|
+
DA:82,1
|
|
265
|
+
DA:83,1
|
|
266
|
+
DA:84,1
|
|
267
|
+
DA:85,1
|
|
268
|
+
DA:86,1
|
|
269
|
+
DA:87,1
|
|
270
|
+
DA:88,1
|
|
271
|
+
DA:89,1
|
|
272
|
+
DA:90,1
|
|
273
|
+
DA:91,1
|
|
274
|
+
DA:92,1
|
|
275
|
+
DA:93,1
|
|
276
|
+
DA:94,1
|
|
277
|
+
DA:95,1
|
|
278
|
+
DA:96,1
|
|
279
|
+
DA:97,1
|
|
280
|
+
DA:98,1
|
|
281
|
+
DA:99,1
|
|
282
|
+
DA:100,1
|
|
283
|
+
DA:101,1
|
|
284
|
+
DA:102,1
|
|
285
|
+
DA:103,1
|
|
286
|
+
DA:104,1
|
|
287
|
+
DA:105,1
|
|
288
|
+
DA:106,1
|
|
289
|
+
DA:107,1
|
|
290
|
+
DA:108,1
|
|
291
|
+
DA:109,1
|
|
292
|
+
DA:110,1
|
|
293
|
+
DA:111,1
|
|
294
|
+
DA:112,1
|
|
295
|
+
DA:113,1
|
|
296
|
+
DA:114,1
|
|
297
|
+
DA:115,1
|
|
298
|
+
DA:116,1
|
|
299
|
+
DA:117,1
|
|
300
|
+
DA:118,1
|
|
301
|
+
DA:119,1
|
|
302
|
+
DA:120,1
|
|
303
|
+
DA:121,1
|
|
304
|
+
DA:122,1
|
|
305
|
+
DA:123,1
|
|
306
|
+
DA:124,1
|
|
307
|
+
DA:125,1
|
|
308
|
+
DA:126,1
|
|
309
|
+
DA:127,1
|
|
310
|
+
DA:128,1
|
|
311
|
+
DA:129,1
|
|
312
|
+
DA:130,1
|
|
313
|
+
DA:131,1
|
|
314
|
+
LF:131
|
|
315
|
+
LH:131
|
|
316
|
+
BRF:0
|
|
317
|
+
BRH:0
|
|
318
|
+
end_of_record
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { LitElement, css, html } from 'lit';
|
|
3
3
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
4
|
+
import { formElementHeight } from '@operato/styles/form-element-heights.js';
|
|
4
5
|
let CustomInput = class CustomInput extends LitElement {
|
|
5
6
|
constructor() {
|
|
6
7
|
super(...arguments);
|
|
@@ -74,7 +75,7 @@ CustomInput.styles = css `
|
|
|
74
75
|
padding: 0 var(--spacing-small);
|
|
75
76
|
min-width: var(--form-input-width, 300px);
|
|
76
77
|
max-width: var(--form-input-width, 300px);
|
|
77
|
-
height:
|
|
78
|
+
height: ${formElementHeight('--form-element-height-medium')};
|
|
78
79
|
outline: var(--form-input-outline, none);
|
|
79
80
|
color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));
|
|
80
81
|
background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-custom-input.js","sourceRoot":"","sources":["../../../src/components/ox-custom-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-custom-input.js","sourceRoot":"","sources":["../../../src/components/ox-custom-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\n@customElement('ox-custom-input')\nexport class CustomInput extends LitElement {\n static styles = css`\n input {\n margin: auto 0;\n border: 1px solid var(--md-sys-color-outline);\n padding: 0 var(--spacing-small);\n min-width: var(--form-input-width, 300px);\n max-width: var(--form-input-width, 300px);\n height: ${formElementHeight('--form-element-height-medium')};\n outline: var(--form-input-outline, none);\n color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));\n }\n `\n\n @property({ type: String }) name?: string\n @property({ type: String }) placeholder?: string\n @property({ type: String }) type?: string\n @property({ type: Object }) props: any\n @property({ type: Array }) attrs: any\n @property({ type: String }) valueField?: string\n @property({ type: Object }) value: any\n @property({ type: Boolean }) autofocus: boolean = false\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <input\n name=${this.name}\n placeholder=${this.placeholder}\n type=${this.type || 'text'}\n value=${this.value || ''}\n @input=${(e: InputEvent) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n ?autofocus=${this.autofocus}\n />\n `\n }\n\n get checked() {\n return this.input.checked\n }\n\n set checked(checked) {\n this.input.checked = checked\n }\n\n firstUpdated() {\n this.dispatchEvent(new CustomEvent('load'))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('props')) {\n if (this._isObject(this.props)) {\n for (let prop in this.props) {\n if (this.props[prop]) {\n this.input.setAttribute(prop, this.props[prop])\n this.setAttribute(prop, this.props[prop])\n }\n }\n }\n }\n\n if (changes.has('attrs')) {\n if (this.attrs && Array.isArray(this.attrs)) {\n this.attrs.forEach(attr => {\n this.input.setAttribute(attr, '')\n this.setAttribute(attr, '')\n })\n }\n }\n\n if (changes.has('value') && this._isObject(this.value)) {\n let value = this.value\n this.value = (this.valueField && value[this.valueField]) || value[Object.keys(value)[0]]\n }\n }\n\n _isObject(v: any) {\n return v instanceof Object && !Array.isArray(v)\n }\n\n focus() {\n this.input.focus()\n }\n\n select() {\n this.input.select()\n }\n\n blur() {\n this.input.blur()\n }\n\n checkValidity() {\n return this.input.checkValidity()\n }\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
+
import { formElementHeight } from '@operato/styles/form-element-heights.js';
|
|
2
3
|
export const FilterStyles = css `
|
|
3
4
|
:host {
|
|
4
5
|
--ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface-variant));
|
|
@@ -19,7 +20,7 @@ export const FilterStyles = css `
|
|
|
19
20
|
--ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
|
|
20
21
|
|
|
21
22
|
--md-sys-color-on-primary: transparent;
|
|
22
|
-
--form-element-height-medium:
|
|
23
|
+
--form-element-height-medium: ${formElementHeight('--form-element-height-small')};
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
label {
|
|
@@ -40,7 +41,7 @@ export const FilterStyles = css `
|
|
|
40
41
|
ox-input-search,
|
|
41
42
|
[filter-input] {
|
|
42
43
|
padding: var(--ox-filters-input-padding);
|
|
43
|
-
height:
|
|
44
|
+
height: ${formElementHeight('--form-element-height-medium')};
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
ox-select,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAA;AAE3E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;oCAoBK,iBAAiB,CAAC,6BAA6B,CAAC;;;;;;;;;;;;;;;;;;;;;cAqBtE,iBAAiB,CAAC,8BAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqF9D,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { formElementHeight } from '@operato/styles/form-element-heights.js'\n\nexport const FilterStyles = css`\n :host {\n --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface-variant));\n\n --ox-filters-input-border: var(--input-border, 1px solid var(--md-sys-color-outline));\n --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-primary));\n --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));\n --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));\n --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));\n --ox-filters-input-background-color: transparent;\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 0 var(--spacing-small);\n\n --ox-select-padding: var(--ox-filters-input-padding);\n --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n\n --md-sys-color-on-primary: transparent;\n --form-element-height-medium: ${formElementHeight('--form-element-height-small')};\n }\n\n label {\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-primary);\n }\n\n span {\n text-transform: capitalize;\n }\n\n input::placeholder {\n color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-on-surface-variant));\n opacity: 0.7;\n }\n\n input,\n ox-input-search,\n [filter-input] {\n padding: var(--ox-filters-input-padding);\n height: ${formElementHeight('--form-element-height-medium')};\n }\n\n ox-select,\n ox-input-search,\n input,\n [filter-input] {\n border: none;\n border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));\n font: var(--ox-filters-input-font);\n color: var(--ox-filters-input-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--ox-filters-input-background-color, transparent);\n vertical-align: middle;\n }\n\n ox-select:focus,\n input:focus,\n [filter-input]:focus {\n outline: none;\n border-bottom: var(--ox-filters-input-focus-border);\n color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));\n }\n\n ox-select {\n min-width: 90px;\n max-width: 170px;\n }\n\n ox-input-search {\n max-width: 150px;\n }\n\n input[type='number'] {\n max-width: 90px;\n }\n\n input[type*='date'],\n input[type*='time'],\n input[type='week'],\n input[type='month'] {\n max-width: 170px;\n }\n\n [filter-input] {\n min-width: 140px;\n max-width: 170px;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n --ox-filters-form-label-font: bold 13px var(--theme-font);\n --ox-filters-input-font: normal 16px var(--theme-font);\n }\n\n ox-input-barcode {\n max-width: unset;\n flex: 1;\n }\n\n ox-input-search {\n max-width: unset;\n }\n\n ox-select {\n max-width: unset;\n }\n\n ox-checkbox {\n max-width: unset;\n }\n\n input[type='number'] {\n max-width: unset;\n }\n\n input {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n flex: 1;\n }\n\n [readonly] {\n background-color: #f0f0f0;\n }\n }\n`\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { expect } from '@open-wc/testing';
|
|
2
|
+
import { CustomInput } from '../src/components/ox-custom-input.js';
|
|
3
|
+
import { FilterStyles } from '../src/filters/filter-styles.js';
|
|
4
|
+
/**
|
|
5
|
+
* Form inputs read the input height tokens with the @operato/styles default. Without a default, a
|
|
6
|
+
* page that does not load the shell theme would drop the whole declaration and the input would size
|
|
7
|
+
* itself.
|
|
8
|
+
*/
|
|
9
|
+
const text = (styles) => (Array.isArray(styles) ? styles.flat(Infinity) : [styles])
|
|
10
|
+
.map(s => { var _a; return String((_a = s.cssText) !== null && _a !== void 0 ? _a : s); })
|
|
11
|
+
.join('\n');
|
|
12
|
+
describe('form element height', () => {
|
|
13
|
+
it('the filter form is a dense row: medium is re-pointed at small, both with defaults', () => {
|
|
14
|
+
const css = text(FilterStyles);
|
|
15
|
+
expect(css).to.contain('--form-element-height-medium: var(--form-element-height-small, 26px)');
|
|
16
|
+
expect(css).to.contain('height: var(--form-element-height-medium, 32px)');
|
|
17
|
+
expect(css).to.not.match(/var\(--form-element-height-[a-z]+\)/);
|
|
18
|
+
});
|
|
19
|
+
it('ox-custom-input reads the medium token with its default', () => {
|
|
20
|
+
const css = text(CustomInput.styles);
|
|
21
|
+
expect(css).to.contain('height: var(--form-element-height-medium, 32px)');
|
|
22
|
+
expect(css).to.not.match(/var\(--form-element-height-[a-z]+\)/);
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
//# sourceMappingURL=form-element-height.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-element-height.test.js","sourceRoot":"","sources":["../../test/form-element-height.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAA;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAE9D;;;;GAIG;AAEH,MAAM,IAAI,GAAG,CAAC,MAAe,EAAU,EAAE,CACvC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;KACvD,GAAG,CAAC,CAAC,CAAC,EAAE,WAAC,OAAA,MAAM,CAAC,MAAC,CAA0B,CAAC,OAAO,mCAAI,CAAC,CAAC,CAAA,EAAA,CAAC;KAC1D,IAAI,CAAC,IAAI,CAAC,CAAA;AAEf,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,mFAAmF,EAAE,GAAG,EAAE;QAC3F,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,CAAA;QAC9B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,sEAAsE,CAAC,CAAA;QAC9F,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,iDAAiD,CAAC,CAAA;QACzE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;QACjE,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;QACpC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,iDAAiD,CAAC,CAAA;QACzE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect } from '@open-wc/testing'\n\nimport { CustomInput } from '../src/components/ox-custom-input.js'\nimport { FilterStyles } from '../src/filters/filter-styles.js'\n\n/**\n * Form inputs read the input height tokens with the @operato/styles default. Without a default, a\n * page that does not load the shell theme would drop the whole declaration and the input would size\n * itself.\n */\n\nconst text = (styles: unknown): string =>\n (Array.isArray(styles) ? styles.flat(Infinity) : [styles])\n .map(s => String((s as { cssText?: string }).cssText ?? s))\n .join('\\n')\n\ndescribe('form element height', () => {\n it('the filter form is a dense row: medium is re-pointed at small, both with defaults', () => {\n const css = text(FilterStyles)\n expect(css).to.contain('--form-element-height-medium: var(--form-element-height-small, 26px)')\n expect(css).to.contain('height: var(--form-element-height-medium, 32px)')\n expect(css).to.not.match(/var\\(--form-element-height-[a-z]+\\)/)\n })\n\n it('ox-custom-input reads the medium token with its default', () => {\n const css = text(CustomInput.styles)\n expect(css).to.contain('height: var(--form-element-height-medium, 32px)')\n expect(css).to.not.match(/var\\(--form-element-height-[a-z]+\\)/)\n })\n})\n"]}
|