@operato/data-grist 10.15.0 → 10.16.2

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 (17) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/coverage/lcov-report/index.html +19 -19
  3. package/coverage/lcov-report/webpack/bootstrap.html +1 -1
  4. package/coverage/lcov-report/webpack/index.html +1 -1
  5. package/coverage/lcov-report/webpack/runtime/define property getters.html +1 -1
  6. package/coverage/lcov-report/webpack/runtime/global.html +1 -1
  7. package/coverage/lcov-report/webpack/runtime/hasOwnProperty shorthand.html +1 -1
  8. package/coverage/lcov-report/webpack/runtime/index.html +1 -1
  9. package/coverage/lcov-report/webpack/runtime/make namespace object.html +1 -1
  10. package/coverage/lcov.info +117 -28
  11. package/dist/src/filters/filter-styles.js +4 -3
  12. package/dist/src/filters/filter-styles.js.map +1 -1
  13. package/dist/test/control-heights.test.js +2 -2
  14. package/dist/test/control-heights.test.js.map +1 -1
  15. package/dist/tsconfig.tsbuildinfo +1 -1
  16. package/package.json +12 -12
  17. package/test/control-heights.test.ts +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,31 @@
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.16.2](https://github.com/hatiolab/operato/compare/v10.16.1...v10.16.2) (2026-09-18)
7
+
8
+ **Note:** Version bump only for package @operato/data-grist
9
+
10
+
11
+
12
+
13
+
14
+ ### [10.16.1](https://github.com/hatiolab/operato/compare/v10.16.0...v10.16.1) (2026-09-18)
15
+
16
+ **Note:** Version bump only for package @operato/data-grist
17
+
18
+
19
+
20
+
21
+
22
+ ## [10.16.0](https://github.com/hatiolab/operato/compare/v10.15.0...v10.16.0) (2026-09-17)
23
+
24
+
25
+ ### :bug: Bug Fix
26
+
27
+ * **styles,popup,input,data-grist:** keep pre-standardization heights outside the operato suite ([03c46ed](https://github.com/hatiolab/operato/commit/03c46ed812ef236198efd2d03aeecabe00a8d281))
28
+
29
+
30
+
6
31
  ## [10.15.0](https://github.com/hatiolab/operato/compare/v10.14.0...v10.15.0) (2026-09-17)
7
32
 
8
33
 
package/coverage/lcov-report/index.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">55.73% </span>
26
+ <span class="strong">55.8% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>26378/47328</span>
28
+ <span class='fraction'>26457/47407</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">66.34% </span>
33
+ <span class="strong">66.56% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>623/939</span>
35
+ <span class='fraction'>629/945</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">20.72% </span>
40
+ <span class="strong">20.83% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>298/1438</span>
42
+ <span class='fraction'>300/1440</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">55.73% </span>
47
+ <span class="strong">55.8% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>26378/47328</span>
49
+ <span class='fraction'>26457/47407</span>
50
50
  </div>
51
51
 
52
52
 
@@ -384,13 +384,13 @@
384
384
  <div class="chart"><div class="cover-fill" style="width: 99%"></div><div class="cover-empty" style="width: 1%"></div></div>
385
385
  </td>
386
386
  <td data-value="99.91" class="pct high">99.91%</td>
387
- <td data-value="2305" class="abs high">2303/2305</td>
388
- <td data-value="66.66" class="pct medium">66.66%</td>
389
- <td data-value="6" class="abs medium">4/6</td>
387
+ <td data-value="2383" class="abs high">2381/2383</td>
388
+ <td data-value="83.33" class="pct high">83.33%</td>
389
+ <td data-value="12" class="abs high">10/12</td>
390
390
  <td data-value="100" class="pct high">100%</td>
391
- <td data-value="4" class="abs high">4/4</td>
391
+ <td data-value="6" class="abs high">6/6</td>
392
392
  <td data-value="99.91" class="pct high">99.91%</td>
393
- <td data-value="2305" class="abs high">2303/2305</td>
393
+ <td data-value="2383" class="abs high">2381/2383</td>
394
394
  </tr>
395
395
 
396
396
  <tr>
@@ -635,17 +635,17 @@
635
635
 
636
636
  <tr>
637
637
  <td class="file low" data-value="Users/super/Documents/GitHub/operato/webcomponents/data-grist/src/filters"><a href="Users/super/Documents/GitHub/operato/webcomponents/data-grist/src/filters/index.html">Users/super/Documents/GitHub/operato/webcomponents/data-grist/src/filters</a></td>
638
- <td data-value="24.35" class="pic low">
638
+ <td data-value="24.41" class="pic low">
639
639
  <div class="chart"><div class="cover-fill" style="width: 24%"></div><div class="cover-empty" style="width: 76%"></div></div>
640
640
  </td>
641
- <td data-value="24.35" class="pct low">24.35%</td>
642
- <td data-value="1203" class="abs low">293/1203</td>
641
+ <td data-value="24.41" class="pct low">24.41%</td>
642
+ <td data-value="1204" class="abs low">294/1204</td>
643
643
  <td data-value="100" class="pct high">100%</td>
644
644
  <td data-value="0" class="abs high">0/0</td>
645
645
  <td data-value="0" class="pct low">0%</td>
646
646
  <td data-value="26" class="abs low">0/26</td>
647
- <td data-value="24.35" class="pct low">24.35%</td>
648
- <td data-value="1203" class="abs low">293/1203</td>
647
+ <td data-value="24.41" class="pct low">24.41%</td>
648
+ <td data-value="1204" class="abs low">294/1204</td>
649
649
  </tr>
650
650
 
651
651
  <tr>
@@ -866,7 +866,7 @@
866
866
  <div class='footer quiet pad2 space-top1 center small'>
867
867
  Code coverage generated by
868
868
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
869
- at 2026-09-17T12:25:32.656Z
869
+ at 2026-09-17T15:28:12.814Z
870
870
  </div>
871
871
  <script src="prettify.js"></script>
872
872
  <script>
package/coverage/lcov-report/webpack/bootstrap.html CHANGED
@@ -103,7 +103,7 @@ Error: Unable to lookup source: /webpack/bootstrap (ENOENT: no such file or dire
103
103
  <div class='footer quiet pad2 space-top1 center small'>
104
104
  Code coverage generated by
105
105
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
106
- at 2026-09-17T12:25:32.656Z
106
+ at 2026-09-17T15:28:12.814Z
107
107
  </div>
108
108
  <script src="../prettify.js"></script>
109
109
  <script>
package/coverage/lcov-report/webpack/index.html CHANGED
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at 2026-09-17T12:25:32.656Z
104
+ at 2026-09-17T15:28:12.814Z
105
105
  </div>
106
106
  <script src="../prettify.js"></script>
107
107
  <script>
package/coverage/lcov-report/webpack/runtime/define property getters.html CHANGED
@@ -103,7 +103,7 @@ Error: Unable to lookup source: /webpack/runtime/define property getters (ENOENT
103
103
  <div class='footer quiet pad2 space-top1 center small'>
104
104
  Code coverage generated by
105
105
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
106
- at 2026-09-17T12:25:32.656Z
106
+ at 2026-09-17T15:28:12.814Z
107
107
  </div>
108
108
  <script src="../../prettify.js"></script>
109
109
  <script>
package/coverage/lcov-report/webpack/runtime/global.html CHANGED
@@ -103,7 +103,7 @@ Error: Unable to lookup source: /webpack/runtime/global (ENOENT: no such file or
103
103
  <div class='footer quiet pad2 space-top1 center small'>
104
104
  Code coverage generated by
105
105
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
106
- at 2026-09-17T12:25:32.656Z
106
+ at 2026-09-17T15:28:12.814Z
107
107
  </div>
108
108
  <script src="../../prettify.js"></script>
109
109
  <script>
package/coverage/lcov-report/webpack/runtime/hasOwnProperty shorthand.html CHANGED
@@ -103,7 +103,7 @@ Error: Unable to lookup source: /webpack/runtime/hasOwnProperty shorthand (ENOEN
103
103
  <div class='footer quiet pad2 space-top1 center small'>
104
104
  Code coverage generated by
105
105
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
106
- at 2026-09-17T12:25:32.656Z
106
+ at 2026-09-17T15:28:12.814Z
107
107
  </div>
108
108
  <script src="../../prettify.js"></script>
109
109
  <script>
package/coverage/lcov-report/webpack/runtime/index.html CHANGED
@@ -146,7 +146,7 @@
146
146
  <div class='footer quiet pad2 space-top1 center small'>
147
147
  Code coverage generated by
148
148
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
149
- at 2026-09-17T12:25:32.656Z
149
+ at 2026-09-17T15:28:12.814Z
150
150
  </div>
151
151
  <script src="../../prettify.js"></script>
152
152
  <script>
package/coverage/lcov-report/webpack/runtime/make namespace object.html CHANGED
@@ -103,7 +103,7 @@ Error: Unable to lookup source: /webpack/runtime/make namespace object (ENOENT:
103
103
  <div class='footer quiet pad2 space-top1 center small'>
104
104
  Code coverage generated by
105
105
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
106
- at 2026-09-17T12:25:32.656Z
106
+ at 2026-09-17T15:28:12.814Z
107
107
  </div>
108
108
  <script src="../../prettify.js"></script>
109
109
  <script>
package/coverage/lcov.info CHANGED
@@ -17945,10 +17945,12 @@ BRH:1
17945
17945
  end_of_record
17946
17946
  TN:
17947
17947
  SF:__wds-outside-root__/1/styles/src/action-heights.ts
17948
- FN:34,actionHeight
17949
- FNF:1
17950
- FNH:1
17951
- FNDA:100,actionHeight
17948
+ FN:48,actionHeight
17949
+ FN:57,suiteActionHeight
17950
+ FNF:2
17951
+ FNH:2
17952
+ FNDA:85,actionHeight
17953
+ FNDA:70,suiteActionHeight
17952
17954
  DA:1,5
17953
17955
  DA:2,5
17954
17956
  DA:3,5
@@ -17983,13 +17985,40 @@ DA:31,5
17983
17985
  DA:32,5
17984
17986
  DA:33,5
17985
17987
  DA:34,5
17986
- DA:35,100
17987
- DA:36,100
17988
- LF:36
17989
- LH:36
17990
- BRDA:34,0,0,100
17991
- BRF:1
17992
- BRH:1
17988
+ DA:35,5
17989
+ DA:36,5
17990
+ DA:37,5
17991
+ DA:38,5
17992
+ DA:39,5
17993
+ DA:40,5
17994
+ DA:41,5
17995
+ DA:42,5
17996
+ DA:43,5
17997
+ DA:44,5
17998
+ DA:45,5
17999
+ DA:46,5
18000
+ DA:47,5
18001
+ DA:48,5
18002
+ DA:49,85
18003
+ DA:50,85
18004
+ DA:51,5
18005
+ DA:52,5
18006
+ DA:53,5
18007
+ DA:54,5
18008
+ DA:55,5
18009
+ DA:56,5
18010
+ DA:57,5
18011
+ DA:58,70
18012
+ DA:59,70
18013
+ DA:60,70
18014
+ LF:60
18015
+ LH:60
18016
+ BRDA:48,0,0,85
18017
+ BRDA:57,1,0,70
18018
+ BRDA:59,2,0,25
18019
+ BRDA:59,3,0,45
18020
+ BRF:4
18021
+ BRH:4
17993
18022
  end_of_record
17994
18023
  TN:
17995
18024
  SF:__wds-outside-root__/1/styles/src/box-padding-editor-styles.ts
@@ -18308,8 +18337,26 @@ DA:201,5
18308
18337
  DA:202,5
18309
18338
  DA:203,5
18310
18339
  DA:204,5
18311
- LF:204
18312
- LH:204
18340
+ DA:205,5
18341
+ DA:206,5
18342
+ DA:207,5
18343
+ DA:208,5
18344
+ DA:209,5
18345
+ DA:210,5
18346
+ DA:211,5
18347
+ DA:212,5
18348
+ DA:213,5
18349
+ DA:214,5
18350
+ DA:215,5
18351
+ DA:216,5
18352
+ DA:217,5
18353
+ DA:218,5
18354
+ DA:219,5
18355
+ DA:220,5
18356
+ DA:221,5
18357
+ DA:222,5
18358
+ LF:222
18359
+ LH:222
18313
18360
  BRF:0
18314
18361
  BRH:0
18315
18362
  end_of_record
@@ -19560,17 +19607,39 @@ DA:328,5
19560
19607
  DA:329,5
19561
19608
  DA:330,5
19562
19609
  DA:331,5
19563
- LF:331
19564
- LH:331
19610
+ DA:332,5
19611
+ DA:333,5
19612
+ DA:334,5
19613
+ DA:335,5
19614
+ DA:336,5
19615
+ DA:337,5
19616
+ DA:338,5
19617
+ DA:339,5
19618
+ DA:340,5
19619
+ DA:341,5
19620
+ DA:342,5
19621
+ DA:343,5
19622
+ DA:344,5
19623
+ DA:345,5
19624
+ DA:346,5
19625
+ DA:347,5
19626
+ DA:348,5
19627
+ DA:349,5
19628
+ DA:350,5
19629
+ DA:351,5
19630
+ LF:351
19631
+ LH:351
19565
19632
  BRF:0
19566
19633
  BRH:0
19567
19634
  end_of_record
19568
19635
  TN:
19569
19636
  SF:__wds-outside-root__/1/styles/src/form-element-heights.ts
19570
- FN:29,formElementHeight
19571
- FNF:1
19572
- FNH:1
19573
- FNDA:69,formElementHeight
19637
+ FN:36,formElementHeight
19638
+ FN:44,suiteFormElementHeight
19639
+ FNF:2
19640
+ FNH:2
19641
+ FNDA:55,formElementHeight
19642
+ FNDA:14,suiteFormElementHeight
19574
19643
  DA:1,5
19575
19644
  DA:2,5
19576
19645
  DA:3,5
@@ -19600,13 +19669,32 @@ DA:26,5
19600
19669
  DA:27,5
19601
19670
  DA:28,5
19602
19671
  DA:29,5
19603
- DA:30,69
19604
- DA:31,69
19605
- LF:31
19606
- LH:31
19607
- BRDA:29,0,0,69
19608
- BRF:1
19609
- BRH:1
19672
+ DA:30,5
19673
+ DA:31,5
19674
+ DA:32,5
19675
+ DA:33,5
19676
+ DA:34,5
19677
+ DA:35,5
19678
+ DA:36,5
19679
+ DA:37,55
19680
+ DA:38,55
19681
+ DA:39,5
19682
+ DA:40,5
19683
+ DA:41,5
19684
+ DA:42,5
19685
+ DA:43,5
19686
+ DA:44,5
19687
+ DA:45,14
19688
+ DA:46,14
19689
+ DA:47,14
19690
+ LF:47
19691
+ LH:47
19692
+ BRDA:36,0,0,55
19693
+ BRDA:44,1,0,14
19694
+ BRDA:46,2,0,10
19695
+ BRDA:46,3,0,4
19696
+ BRF:4
19697
+ BRH:4
19610
19698
  end_of_record
19611
19699
  TN:
19612
19700
  SF:__wds-outside-root__/1/styles/src/form-field-styles.ts
@@ -44011,8 +44099,9 @@ DA:129,4
44011
44099
  DA:130,4
44012
44100
  DA:131,4
44013
44101
  DA:132,4
44014
- LF:132
44015
- LH:132
44102
+ DA:133,4
44103
+ LF:133
44104
+ LH:133
44016
44105
  BRF:0
44017
44106
  BRH:0
44018
44107
  end_of_record
package/dist/src/filters/filter-styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { css } from 'lit';
2
- import { formElementHeight } from '@operato/styles/form-element-heights.js';
2
+ import { suiteFormElementHeight } from '@operato/styles/form-element-heights.js';
3
3
  export const FilterStyles = css `
4
4
  :host {
5
5
  --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface));
@@ -40,13 +40,14 @@ export const FilterStyles = css `
40
40
  padding: var(--ox-filters-input-padding);
41
41
  }
42
42
 
43
- /* A grid filter bar is a dense row: its inputs take the small input height. */
43
+ /* A grid filter bar is a dense row: the operato products give its inputs the small input height; the
44
+ * platform keeps their natural height. */
44
45
  ox-select,
45
46
  ox-input-search,
46
47
  input:not([type='checkbox']):not([type='radio']),
47
48
  [filter-input] {
48
49
  box-sizing: border-box;
49
- height: ${formElementHeight('--form-element-height-small')};
50
+ height: ${suiteFormElementHeight('--form-element-height-small', 'auto')};
50
51
  }
51
52
 
52
53
  ox-select,
package/dist/src/filters/filter-styles.js.map CHANGED
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8CjB,iBAAiB,CAAC,6BAA6B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF7D,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));\n\n --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-outline-variant));\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: var(--spacing-small, 4px);\n\n --ox-select-padding: var(--ox-filters-input-padding);\n --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n }\n\n label {\n color: var(--ox-filters-label-color, var(--md-sys-color-on-primary-container));\n }\n\n span {\n font-weight: var(--md-sys-typescale-label-medium-weight);\n text-transform: capitalize;\n }\n\n input::placeholder {\n color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-surface-dim));\n opacity: 0.6;\n }\n\n input,\n ox-input-search,\n [filter-input] {\n padding: var(--ox-filters-input-padding);\n }\n\n /* A grid filter bar is a dense row: its inputs take the small input height. */\n ox-select,\n ox-input-search,\n input:not([type='checkbox']):not([type='radio']),\n [filter-input] {\n box-sizing: border-box;\n height: ${formElementHeight('--form-element-height-small')};\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));\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, var(--md-sys-color-outline-variant));\n color: var(--ox-filters-input-focus-color, var(--md-sys-color-on-surface-variant));\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`\n"]}
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,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAEhF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+CjB,sBAAsB,CAAC,6BAA6B,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiF1E,CAAA","sourcesContent":["import { css } from 'lit'\n\nimport { suiteFormElementHeight } 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));\n\n --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-outline-variant));\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: var(--spacing-small, 4px);\n\n --ox-select-padding: var(--ox-filters-input-padding);\n --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n }\n\n label {\n color: var(--ox-filters-label-color, var(--md-sys-color-on-primary-container));\n }\n\n span {\n font-weight: var(--md-sys-typescale-label-medium-weight);\n text-transform: capitalize;\n }\n\n input::placeholder {\n color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-surface-dim));\n opacity: 0.6;\n }\n\n input,\n ox-input-search,\n [filter-input] {\n padding: var(--ox-filters-input-padding);\n }\n\n /* A grid filter bar is a dense row: the operato products give its inputs the small input height; the\n * platform keeps their natural height. */\n ox-select,\n ox-input-search,\n input:not([type='checkbox']):not([type='radio']),\n [filter-input] {\n box-sizing: border-box;\n height: ${suiteFormElementHeight('--form-element-height-small', 'auto')};\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));\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, var(--md-sys-color-outline-variant));\n color: var(--ox-filters-input-focus-color, var(--md-sys-color-on-surface-variant));\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`\n"]}
package/dist/test/control-heights.test.js CHANGED
@@ -17,9 +17,9 @@ describe('cell action height', () => {
17
17
  });
18
18
  });
19
19
  describe('filter bar input height', () => {
20
- it('a grid filter bar is a dense row, so its inputs take the small input height', () => {
20
+ it('a grid filter bar: the suite small height in the operato products, natural height elsewhere', () => {
21
21
  const css = text(FilterStyles);
22
- expect(css).to.match(/box-sizing: border-box;\s*height: var\(--form-element-height-small, 26px\);/);
22
+ expect(css).to.match(/box-sizing: border-box;\s*height: var\(--suite-form-element-height-small, auto\);/);
23
23
  });
24
24
  });
25
25
  //# sourceMappingURL=control-heights.test.js.map
package/dist/test/control-heights.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"control-heights.test.js","sourceRoot":"","sources":["../../test/control-heights.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAE9D;;;;GAIG;AAEH,MAAM,IAAI,GAAG,CAAC,MAAe,EAAE,EAAE,CAC/B,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAC,OAAA,MAAM,CAAC,MAAC,CAA0B,CAAC,OAAO,mCAAI,CAAC,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAEnH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,qEAAqE,EAAE,GAAG,EAAE;QAC7E,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QACtC,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAA;QAE5D,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,wEAAwE,CAAC,CAAA;QAC/F,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,yEAAyE,CAAC,CAAA;QAChG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,gEAAgE,CAAC,CAAA;IAC3F,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,6EAA6E,EAAE,GAAG,EAAE;QACrF,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,CAAA;QAC9B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,6EAA6E,CAAC,CAAA;IACrG,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect } from '@open-wc/testing'\n\nimport { DataGridField } from '../src/data-grid/data-grid-field.js'\nimport { FilterStyles } from '../src/filters/filter-styles.js'\n\n/**\n * A button inside a grid cell is --cell-action-height (26px by default, ADR-0060 decision 6), for its\n * width as well: a second token for the width could say a different number. It still takes no more\n * than a line of text in the row, so one cell with a button does not make every row taller.\n */\n\nconst text = (styles: unknown) =>\n (Array.isArray(styles) ? styles : [styles]).map(s => String((s as { cssText?: string }).cssText ?? s)).join('\\n')\n\ndescribe('cell action height', () => {\n it('the icon button in a cell reads the cell token for height and width', () => {\n const css = text(DataGridField.styles)\n const rule = css.slice(css.indexOf(':host > button.icon {'))\n\n expect(rule).to.match(/^:host > button\\.icon \\{[^}]*width: var\\(--cell-action-height, 26px\\);/)\n expect(rule).to.match(/^:host > button\\.icon \\{[^}]*height: var\\(--cell-action-height, 26px\\);/)\n expect(rule).to.contain('margin-top: calc((20px - var(--cell-action-height, 26px)) / 2)')\n })\n})\n\ndescribe('filter bar input height', () => {\n it('a grid filter bar is a dense row, so its inputs take the small input height', () => {\n const css = text(FilterStyles)\n expect(css).to.match(/box-sizing: border-box;\\s*height: var\\(--form-element-height-small, 26px\\);/)\n })\n})\n"]}
1
+ {"version":3,"file":"control-heights.test.js","sourceRoot":"","sources":["../../test/control-heights.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAE9D;;;;GAIG;AAEH,MAAM,IAAI,GAAG,CAAC,MAAe,EAAE,EAAE,CAC/B,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAC,OAAA,MAAM,CAAC,MAAC,CAA0B,CAAC,OAAO,mCAAI,CAAC,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAEnH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,qEAAqE,EAAE,GAAG,EAAE;QAC7E,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QACtC,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAA;QAE5D,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,wEAAwE,CAAC,CAAA;QAC/F,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,yEAAyE,CAAC,CAAA;QAChG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,gEAAgE,CAAC,CAAA;IAC3F,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,6FAA6F,EAAE,GAAG,EAAE;QACrG,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,CAAA;QAC9B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,mFAAmF,CAAC,CAAA;IAC3G,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect } from '@open-wc/testing'\n\nimport { DataGridField } from '../src/data-grid/data-grid-field.js'\nimport { FilterStyles } from '../src/filters/filter-styles.js'\n\n/**\n * A button inside a grid cell is --cell-action-height (26px by default, ADR-0060 decision 6), for its\n * width as well: a second token for the width could say a different number. It still takes no more\n * than a line of text in the row, so one cell with a button does not make every row taller.\n */\n\nconst text = (styles: unknown) =>\n (Array.isArray(styles) ? styles : [styles]).map(s => String((s as { cssText?: string }).cssText ?? s)).join('\\n')\n\ndescribe('cell action height', () => {\n it('the icon button in a cell reads the cell token for height and width', () => {\n const css = text(DataGridField.styles)\n const rule = css.slice(css.indexOf(':host > button.icon {'))\n\n expect(rule).to.match(/^:host > button\\.icon \\{[^}]*width: var\\(--cell-action-height, 26px\\);/)\n expect(rule).to.match(/^:host > button\\.icon \\{[^}]*height: var\\(--cell-action-height, 26px\\);/)\n expect(rule).to.contain('margin-top: calc((20px - var(--cell-action-height, 26px)) / 2)')\n })\n})\n\ndescribe('filter bar input height', () => {\n it('a grid filter bar: the suite small height in the operato products, natural height elsewhere', () => {\n const css = text(FilterStyles)\n expect(css).to.match(/box-sizing: border-box;\\s*height: var\\(--suite-form-element-height-small, auto\\);/)\n })\n})\n"]}