@operato/form 10.23.0 → 10.27.1
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 +17 -0
- package/coverage/lcov-report/index.html +22 -7
- package/coverage/lcov.info +219 -48
- package/dist/src/filters/filter-styles.js +2 -1
- package/dist/src/filters/filter-styles.js.map +1 -1
- package/dist/src/styles/search-form-styles.js +2 -1
- package/dist/src/styles/search-form-styles.js.map +1 -1
- package/dist/test/readonly-theme.test.d.ts +1 -0
- package/dist/test/readonly-theme.test.js +19 -0
- package/dist/test/readonly-theme.test.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/test/readonly-theme.test.ts +20 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [10.27.1](https://github.com/hatiolab/operato/compare/v10.27.0...v10.27.1) (2026-09-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/form
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [10.24.0](https://github.com/hatiolab/operato/compare/v10.23.0...v10.24.0) (2026-09-24)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :bug: Bug Fix
|
|
18
|
+
|
|
19
|
+
* **form:** read-only fields sit on a theme surface ([65e0bc1](https://github.com/hatiolab/operato/commit/65e0bc175e2a02914fc467e382ec2a982570cbcd)), closes [#f0f0f0](https://github.com/hatiolab/operato/issues/f0f0f0)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
## [10.23.0](https://github.com/hatiolab/operato/compare/v10.22.0...v10.23.0) (2026-09-24)
|
|
7
24
|
|
|
8
25
|
**Note:** Version bump only for package @operato/form
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
<div class='clearfix'>
|
|
24
24
|
|
|
25
25
|
<div class='fl pad1y space-right2'>
|
|
26
|
-
<span class="strong">
|
|
26
|
+
<span class="strong">77.47% </span>
|
|
27
27
|
<span class="quiet">Statements</span>
|
|
28
|
-
<span class='fraction'>
|
|
28
|
+
<span class='fraction'>344/444</span>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
<div class='fl pad1y space-right2'>
|
|
47
|
-
<span class="strong">
|
|
47
|
+
<span class="strong">77.47% </span>
|
|
48
48
|
<span class="quiet">Lines</span>
|
|
49
|
-
<span class='fraction'>
|
|
49
|
+
<span class='fraction'>344/444</span>
|
|
50
50
|
</div>
|
|
51
51
|
|
|
52
52
|
|
|
@@ -114,13 +114,28 @@
|
|
|
114
114
|
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
115
115
|
</td>
|
|
116
116
|
<td data-value="100" class="pct high">100%</td>
|
|
117
|
-
<td data-value="
|
|
117
|
+
<td data-value="132" class="abs high">132/132</td>
|
|
118
118
|
<td data-value="100" class="pct high">100%</td>
|
|
119
119
|
<td data-value="0" class="abs high">0/0</td>
|
|
120
120
|
<td data-value="100" class="pct high">100%</td>
|
|
121
121
|
<td data-value="0" class="abs high">0/0</td>
|
|
122
122
|
<td data-value="100" class="pct high">100%</td>
|
|
123
|
-
<td data-value="
|
|
123
|
+
<td data-value="132" class="abs high">132/132</td>
|
|
124
|
+
</tr>
|
|
125
|
+
|
|
126
|
+
<tr>
|
|
127
|
+
<td class="file high" data-value="src/styles"><a href="src/styles/index.html">src/styles</a></td>
|
|
128
|
+
<td data-value="100" class="pic high">
|
|
129
|
+
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
130
|
+
</td>
|
|
131
|
+
<td data-value="100" class="pct high">100%</td>
|
|
132
|
+
<td data-value="161" class="abs high">161/161</td>
|
|
133
|
+
<td data-value="100" class="pct high">100%</td>
|
|
134
|
+
<td data-value="0" class="abs high">0/0</td>
|
|
135
|
+
<td data-value="100" class="pct high">100%</td>
|
|
136
|
+
<td data-value="0" class="abs high">0/0</td>
|
|
137
|
+
<td data-value="100" class="pct high">100%</td>
|
|
138
|
+
<td data-value="161" class="abs high">161/161</td>
|
|
124
139
|
</tr>
|
|
125
140
|
|
|
126
141
|
</tbody>
|
|
@@ -131,7 +146,7 @@
|
|
|
131
146
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
132
147
|
Code coverage generated by
|
|
133
148
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
134
|
-
at 2026-09-
|
|
149
|
+
at 2026-09-24T09:39:45.864Z
|
|
135
150
|
</div>
|
|
136
151
|
<script src="prettify.js"></script>
|
|
137
152
|
<script>
|
package/coverage/lcov.info
CHANGED
|
@@ -4,58 +4,58 @@ FN:36,formElementHeight
|
|
|
4
4
|
FN:44,suiteFormElementHeight
|
|
5
5
|
FNF:2
|
|
6
6
|
FNH:1
|
|
7
|
-
FNDA:
|
|
7
|
+
FNDA:5,formElementHeight
|
|
8
8
|
FNDA:0,suiteFormElementHeight
|
|
9
|
-
DA:1,
|
|
10
|
-
DA:2,
|
|
11
|
-
DA:3,
|
|
12
|
-
DA:4,
|
|
13
|
-
DA:5,
|
|
14
|
-
DA:6,
|
|
15
|
-
DA:7,
|
|
16
|
-
DA:8,
|
|
17
|
-
DA:9,
|
|
18
|
-
DA:10,
|
|
19
|
-
DA:11,
|
|
20
|
-
DA:12,
|
|
21
|
-
DA:13,
|
|
22
|
-
DA:14,
|
|
23
|
-
DA:15,
|
|
24
|
-
DA:16,
|
|
25
|
-
DA:17,
|
|
26
|
-
DA:18,
|
|
27
|
-
DA:19,
|
|
28
|
-
DA:20,
|
|
29
|
-
DA:21,
|
|
30
|
-
DA:22,
|
|
31
|
-
DA:23,
|
|
32
|
-
DA:24,
|
|
33
|
-
DA:25,
|
|
34
|
-
DA:26,
|
|
35
|
-
DA:27,
|
|
36
|
-
DA:28,
|
|
37
|
-
DA:29,
|
|
38
|
-
DA:30,
|
|
39
|
-
DA:31,
|
|
40
|
-
DA:32,
|
|
41
|
-
DA:33,
|
|
42
|
-
DA:34,
|
|
43
|
-
DA:35,
|
|
44
|
-
DA:36,
|
|
45
|
-
DA:37,
|
|
46
|
-
DA:38,
|
|
47
|
-
DA:39,
|
|
48
|
-
DA:40,
|
|
49
|
-
DA:41,
|
|
50
|
-
DA:42,
|
|
51
|
-
DA:43,
|
|
52
|
-
DA:44,
|
|
9
|
+
DA:1,2
|
|
10
|
+
DA:2,2
|
|
11
|
+
DA:3,2
|
|
12
|
+
DA:4,2
|
|
13
|
+
DA:5,2
|
|
14
|
+
DA:6,2
|
|
15
|
+
DA:7,2
|
|
16
|
+
DA:8,2
|
|
17
|
+
DA:9,2
|
|
18
|
+
DA:10,2
|
|
19
|
+
DA:11,2
|
|
20
|
+
DA:12,2
|
|
21
|
+
DA:13,2
|
|
22
|
+
DA:14,2
|
|
23
|
+
DA:15,2
|
|
24
|
+
DA:16,2
|
|
25
|
+
DA:17,2
|
|
26
|
+
DA:18,2
|
|
27
|
+
DA:19,2
|
|
28
|
+
DA:20,2
|
|
29
|
+
DA:21,2
|
|
30
|
+
DA:22,2
|
|
31
|
+
DA:23,2
|
|
32
|
+
DA:24,2
|
|
33
|
+
DA:25,2
|
|
34
|
+
DA:26,2
|
|
35
|
+
DA:27,2
|
|
36
|
+
DA:28,2
|
|
37
|
+
DA:29,2
|
|
38
|
+
DA:30,2
|
|
39
|
+
DA:31,2
|
|
40
|
+
DA:32,2
|
|
41
|
+
DA:33,2
|
|
42
|
+
DA:34,2
|
|
43
|
+
DA:35,2
|
|
44
|
+
DA:36,2
|
|
45
|
+
DA:37,5
|
|
46
|
+
DA:38,5
|
|
47
|
+
DA:39,2
|
|
48
|
+
DA:40,2
|
|
49
|
+
DA:41,2
|
|
50
|
+
DA:42,2
|
|
51
|
+
DA:43,2
|
|
52
|
+
DA:44,2
|
|
53
53
|
DA:45,0
|
|
54
54
|
DA:46,0
|
|
55
55
|
DA:47,0
|
|
56
56
|
LF:47
|
|
57
57
|
LH:44
|
|
58
|
-
BRDA:36,0,0,
|
|
58
|
+
BRDA:36,0,0,5
|
|
59
59
|
BRF:1
|
|
60
60
|
BRH:1
|
|
61
61
|
end_of_record
|
|
@@ -198,6 +198,147 @@ TN:
|
|
|
198
198
|
SF:src/filters/filter-styles.ts
|
|
199
199
|
FNF:0
|
|
200
200
|
FNH:0
|
|
201
|
+
DA:1,2
|
|
202
|
+
DA:2,2
|
|
203
|
+
DA:3,2
|
|
204
|
+
DA:4,2
|
|
205
|
+
DA:5,2
|
|
206
|
+
DA:6,2
|
|
207
|
+
DA:7,2
|
|
208
|
+
DA:8,2
|
|
209
|
+
DA:9,2
|
|
210
|
+
DA:10,2
|
|
211
|
+
DA:11,2
|
|
212
|
+
DA:12,2
|
|
213
|
+
DA:13,2
|
|
214
|
+
DA:14,2
|
|
215
|
+
DA:15,2
|
|
216
|
+
DA:16,2
|
|
217
|
+
DA:17,2
|
|
218
|
+
DA:18,2
|
|
219
|
+
DA:19,2
|
|
220
|
+
DA:20,2
|
|
221
|
+
DA:21,2
|
|
222
|
+
DA:22,2
|
|
223
|
+
DA:23,2
|
|
224
|
+
DA:24,2
|
|
225
|
+
DA:25,2
|
|
226
|
+
DA:26,2
|
|
227
|
+
DA:27,2
|
|
228
|
+
DA:28,2
|
|
229
|
+
DA:29,2
|
|
230
|
+
DA:30,2
|
|
231
|
+
DA:31,2
|
|
232
|
+
DA:32,2
|
|
233
|
+
DA:33,2
|
|
234
|
+
DA:34,2
|
|
235
|
+
DA:35,2
|
|
236
|
+
DA:36,2
|
|
237
|
+
DA:37,2
|
|
238
|
+
DA:38,2
|
|
239
|
+
DA:39,2
|
|
240
|
+
DA:40,2
|
|
241
|
+
DA:41,2
|
|
242
|
+
DA:42,2
|
|
243
|
+
DA:43,2
|
|
244
|
+
DA:44,2
|
|
245
|
+
DA:45,2
|
|
246
|
+
DA:46,2
|
|
247
|
+
DA:47,2
|
|
248
|
+
DA:48,2
|
|
249
|
+
DA:49,2
|
|
250
|
+
DA:50,2
|
|
251
|
+
DA:51,2
|
|
252
|
+
DA:52,2
|
|
253
|
+
DA:53,2
|
|
254
|
+
DA:54,2
|
|
255
|
+
DA:55,2
|
|
256
|
+
DA:56,2
|
|
257
|
+
DA:57,2
|
|
258
|
+
DA:58,2
|
|
259
|
+
DA:59,2
|
|
260
|
+
DA:60,2
|
|
261
|
+
DA:61,2
|
|
262
|
+
DA:62,2
|
|
263
|
+
DA:63,2
|
|
264
|
+
DA:64,2
|
|
265
|
+
DA:65,2
|
|
266
|
+
DA:66,2
|
|
267
|
+
DA:67,2
|
|
268
|
+
DA:68,2
|
|
269
|
+
DA:69,2
|
|
270
|
+
DA:70,2
|
|
271
|
+
DA:71,2
|
|
272
|
+
DA:72,2
|
|
273
|
+
DA:73,2
|
|
274
|
+
DA:74,2
|
|
275
|
+
DA:75,2
|
|
276
|
+
DA:76,2
|
|
277
|
+
DA:77,2
|
|
278
|
+
DA:78,2
|
|
279
|
+
DA:79,2
|
|
280
|
+
DA:80,2
|
|
281
|
+
DA:81,2
|
|
282
|
+
DA:82,2
|
|
283
|
+
DA:83,2
|
|
284
|
+
DA:84,2
|
|
285
|
+
DA:85,2
|
|
286
|
+
DA:86,2
|
|
287
|
+
DA:87,2
|
|
288
|
+
DA:88,2
|
|
289
|
+
DA:89,2
|
|
290
|
+
DA:90,2
|
|
291
|
+
DA:91,2
|
|
292
|
+
DA:92,2
|
|
293
|
+
DA:93,2
|
|
294
|
+
DA:94,2
|
|
295
|
+
DA:95,2
|
|
296
|
+
DA:96,2
|
|
297
|
+
DA:97,2
|
|
298
|
+
DA:98,2
|
|
299
|
+
DA:99,2
|
|
300
|
+
DA:100,2
|
|
301
|
+
DA:101,2
|
|
302
|
+
DA:102,2
|
|
303
|
+
DA:103,2
|
|
304
|
+
DA:104,2
|
|
305
|
+
DA:105,2
|
|
306
|
+
DA:106,2
|
|
307
|
+
DA:107,2
|
|
308
|
+
DA:108,2
|
|
309
|
+
DA:109,2
|
|
310
|
+
DA:110,2
|
|
311
|
+
DA:111,2
|
|
312
|
+
DA:112,2
|
|
313
|
+
DA:113,2
|
|
314
|
+
DA:114,2
|
|
315
|
+
DA:115,2
|
|
316
|
+
DA:116,2
|
|
317
|
+
DA:117,2
|
|
318
|
+
DA:118,2
|
|
319
|
+
DA:119,2
|
|
320
|
+
DA:120,2
|
|
321
|
+
DA:121,2
|
|
322
|
+
DA:122,2
|
|
323
|
+
DA:123,2
|
|
324
|
+
DA:124,2
|
|
325
|
+
DA:125,2
|
|
326
|
+
DA:126,2
|
|
327
|
+
DA:127,2
|
|
328
|
+
DA:128,2
|
|
329
|
+
DA:129,2
|
|
330
|
+
DA:130,2
|
|
331
|
+
DA:131,2
|
|
332
|
+
DA:132,2
|
|
333
|
+
LF:132
|
|
334
|
+
LH:132
|
|
335
|
+
BRF:0
|
|
336
|
+
BRH:0
|
|
337
|
+
end_of_record
|
|
338
|
+
TN:
|
|
339
|
+
SF:src/styles/search-form-styles.ts
|
|
340
|
+
FNF:0
|
|
341
|
+
FNH:0
|
|
201
342
|
DA:1,1
|
|
202
343
|
DA:2,1
|
|
203
344
|
DA:3,1
|
|
@@ -329,8 +470,38 @@ DA:128,1
|
|
|
329
470
|
DA:129,1
|
|
330
471
|
DA:130,1
|
|
331
472
|
DA:131,1
|
|
332
|
-
|
|
333
|
-
|
|
473
|
+
DA:132,1
|
|
474
|
+
DA:133,1
|
|
475
|
+
DA:134,1
|
|
476
|
+
DA:135,1
|
|
477
|
+
DA:136,1
|
|
478
|
+
DA:137,1
|
|
479
|
+
DA:138,1
|
|
480
|
+
DA:139,1
|
|
481
|
+
DA:140,1
|
|
482
|
+
DA:141,1
|
|
483
|
+
DA:142,1
|
|
484
|
+
DA:143,1
|
|
485
|
+
DA:144,1
|
|
486
|
+
DA:145,1
|
|
487
|
+
DA:146,1
|
|
488
|
+
DA:147,1
|
|
489
|
+
DA:148,1
|
|
490
|
+
DA:149,1
|
|
491
|
+
DA:150,1
|
|
492
|
+
DA:151,1
|
|
493
|
+
DA:152,1
|
|
494
|
+
DA:153,1
|
|
495
|
+
DA:154,1
|
|
496
|
+
DA:155,1
|
|
497
|
+
DA:156,1
|
|
498
|
+
DA:157,1
|
|
499
|
+
DA:158,1
|
|
500
|
+
DA:159,1
|
|
501
|
+
DA:160,1
|
|
502
|
+
DA:161,1
|
|
503
|
+
LF:161
|
|
504
|
+
LH:161
|
|
334
505
|
BRF:0
|
|
335
506
|
BRH:0
|
|
336
507
|
end_of_record
|
|
@@ -122,8 +122,9 @@ export const FilterStyles = css `
|
|
|
122
122
|
flex: 1;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
+
/* Read-only reads as a sunken surface of the theme - a fixed light grey was light-on-light in the dark theme. */
|
|
125
126
|
[readonly] {
|
|
126
|
-
background-color:
|
|
127
|
+
background-color: var(--md-sys-color-surface-container-highest);
|
|
127
128
|
}
|
|
128
129
|
}
|
|
129
130
|
`;
|
|
@@ -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,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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsF9D,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 /* Read-only reads as a sunken surface of the theme - a fixed light grey was light-on-light in the dark theme. */\n [readonly] {\n background-color: var(--md-sys-color-surface-container-highest);\n }\n }\n`\n"]}
|
|
@@ -77,9 +77,10 @@ export const SearchFormStyles = css `
|
|
|
77
77
|
color: var(--search-form-icon-color, var(--md-sys-color-primary));
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
/* Read-only reads as a sunken surface of the theme - a fixed light grey was light-on-light in the dark theme. */
|
|
80
81
|
input[readonly],
|
|
81
82
|
select[readonly] {
|
|
82
|
-
background-color:
|
|
83
|
+
background-color: var(--md-sys-color-surface-container-highest);
|
|
83
84
|
}
|
|
84
85
|
|
|
85
86
|
@media screen and (max-width: 460px) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-form-styles.js","sourceRoot":"","sources":["../../../src/styles/search-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"search-form-styles.js","sourceRoot":"","sources":["../../../src/styles/search-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const SearchFormStyles = css`\n :host {\n overflow: auto;\n background-color: var(--search-form-background-color, var(--md-sys-color-surface));\n padding: var(--spacing-medium);\n }\n\n .search-form {\n position: relative;\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: var(--form-grid-gap, var(--spacing-medium));\n grid-auto-rows: minmax(24px, auto);\n }\n .search-form label {\n grid-column: span 3;\n text-align: right;\n align-self: center;\n text-transform: capitalize;\n\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n .search-form input,\n .search-form select {\n grid-column: span 9;\n\n border: var(--input-field-border);\n border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding, var(--spacing-tiny));\n font: var(--input-field-font);\n max-width: 85%;\n color: var(--input-field-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--md-sys-color-surface-container-lowest);\n }\n\n .search-form select {\n min-height: 25px;\n max-width: calc(85% + 18px);\n }\n\n .search-form input[type='checkbox'],\n .search-form input[type='radio'] {\n justify-self: end;\n align-self: center;\n grid-column: span 3 / auto;\n position: relative;\n left: 17px;\n }\n\n .search-form input[type='checkbox'] + label,\n .search-form input[type='radio'] + label {\n padding-left: 17px;\n text-align: left;\n align-self: center;\n grid-column: span 9 / auto;\n\n font: var(--form-sublabel-font);\n color: var(--form-sublabel-color, var(--md-sys-color-secondary));\n }\n\n input:focus {\n outline: none;\n }\n\n input[type='checkbox'] {\n margin: 0;\n }\n\n [search] {\n position: absolute;\n right: var(--spacing-small);\n bottom: var(--spacing-none);\n color: var(--search-form-icon-color, var(--md-sys-color-primary));\n }\n\n /* Read-only reads as a sunken surface of the theme - a fixed light grey was light-on-light in the dark theme. */\n input[readonly],\n select[readonly] {\n background-color: var(--md-sys-color-surface-container-highest);\n }\n\n @media screen and (max-width: 460px) {\n .search-form {\n grid-template-columns: repeat(12, 1fr);\n grid-gap: var(--spacing-medium) var(--spacing-medium);\n\n max-height: 100%;\n overflow-y: auto;\n }\n .search-form label {\n grid-column: span 3;\n padding-right: 5px;\n align-self: center;\n color: var(--md-sys-color-on-surface);\n }\n .search-form input,\n .search-form select {\n grid-column: span 8;\n max-width: 100%;\n color: var(--md-sys-color-on-surface);\n }\n .search-form input[type='checkbox'],\n .search-form input[type='radio'] {\n justify-self: end;\n align-self: center;\n grid-column: span 3 / auto;\n }\n\n .search-form input[type='checkbox'] + label,\n .search-form input[type='radio'] + label {\n grid-column: span 8 / auto;\n align-self: center;\n position: relative;\n left: 5px;\n color: var(--md-sys-color-on-surface);\n }\n\n [search] {\n right: var(--spacing-tiny);\n color: var(--md-sys-color-on-surface);\n }\n }\n @media (min-width: 461px) and (max-width: 1024px) {\n .search-form select {\n max-width: calc(85% + 10px);\n }\n }\n @media screen and (min-width: 1201px) and (max-width: 2000px) {\n .search-form {\n grid-template-columns: repeat(36, 1fr);\n }\n .search-form input,\n .search-form select {\n max-width: 90%;\n }\n .search-form select {\n max-width: calc(90% + 18px);\n }\n }\n\n @media screen and (min-width: 2001px) {\n .search-form {\n grid-template-columns: repeat(48, 1fr);\n }\n .search-form input,\n .search-form select {\n max-width: 90%;\n }\n .search-form select {\n max-width: calc(90% + 18px);\n }\n [search] {\n right: 0.8%;\n }\n }\n`\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { expect } from '@open-wc/testing';
|
|
2
|
+
import { FilterStyles } from '../src/filters/filter-styles.js';
|
|
3
|
+
import { SearchFormStyles } from '../src/styles/search-form-styles.js';
|
|
4
|
+
/**
|
|
5
|
+
* Read-only fields sit on a surface of the theme. They were a fixed #f0f0f0 behind text that follows
|
|
6
|
+
* the theme - light text on a light field in the dark theme.
|
|
7
|
+
*/
|
|
8
|
+
describe('read-only fields in the filter and search forms', () => {
|
|
9
|
+
for (const [name, styles] of [
|
|
10
|
+
['FilterStyles', FilterStyles],
|
|
11
|
+
['SearchFormStyles', SearchFormStyles]
|
|
12
|
+
]) {
|
|
13
|
+
it(`${name} uses the theme's surface`, () => {
|
|
14
|
+
expect(styles.cssText).to.match(/readonly\][^{]*\{\s*background-color:\s*var\(--md-sys-color-surface-container-highest\)/);
|
|
15
|
+
expect(styles.cssText).to.not.match(/#f0f0f0/i);
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
//# sourceMappingURL=readonly-theme.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"readonly-theme.test.js","sourceRoot":"","sources":["../../test/readonly-theme.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AAEtE;;;GAGG;AACH,QAAQ,CAAC,iDAAiD,EAAE,GAAG,EAAE;IAC/D,KAAK,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI;QAC3B,CAAC,cAAc,EAAE,YAAY,CAAC;QAC9B,CAAC,kBAAkB,EAAE,gBAAgB,CAAC;KAC9B,EAAE,CAAC;QACX,EAAE,CAAC,GAAG,IAAI,2BAA2B,EAAE,GAAG,EAAE;YAC1C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,yFAAyF,CAAC,CAAA;YAC1H,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;QACjD,CAAC,CAAC,CAAA;IACJ,CAAC;AACH,CAAC,CAAC,CAAA","sourcesContent":["import { expect } from '@open-wc/testing'\n\nimport { FilterStyles } from '../src/filters/filter-styles.js'\nimport { SearchFormStyles } from '../src/styles/search-form-styles.js'\n\n/**\n * Read-only fields sit on a surface of the theme. They were a fixed #f0f0f0 behind text that follows\n * the theme - light text on a light field in the dark theme.\n */\ndescribe('read-only fields in the filter and search forms', () => {\n for (const [name, styles] of [\n ['FilterStyles', FilterStyles],\n ['SearchFormStyles', SearchFormStyles]\n ] as const) {\n it(`${name} uses the theme's surface`, () => {\n expect(styles.cssText).to.match(/readonly\\][^{]*\\{\\s*background-color:\\s*var\\(--md-sys-color-surface-container-highest\\)/)\n expect(styles.cssText).to.not.match(/#f0f0f0/i)\n })\n }\n})\n"]}
|