@operato/input 10.15.0 → 10.16.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/index.html +14 -14
- package/coverage/lcov-report/webpack/bootstrap.html +1 -1
- package/coverage/lcov-report/webpack/index.html +1 -1
- package/coverage/lcov-report/webpack/runtime/define property getters.html +1 -1
- package/coverage/lcov-report/webpack/runtime/global.html +1 -1
- package/coverage/lcov-report/webpack/runtime/hasOwnProperty shorthand.html +1 -1
- package/coverage/lcov-report/webpack/runtime/index.html +1 -1
- package/coverage/lcov-report/webpack/runtime/make namespace object.html +1 -1
- package/coverage/lcov.info +113 -26
- package/dist/src/ox-input-select-buttons.js +4 -4
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/test/form-element-height.test.js +4 -4
- package/dist/test/form-element-height.test.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/test/form-element-height.test.ts +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
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.0](https://github.com/hatiolab/operato/compare/v10.15.0...v10.16.0) (2026-09-17)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* **styles,popup,input,data-grist:** keep pre-standardization heights outside the operato suite ([03c46ed](https://github.com/hatiolab/operato/commit/03c46ed812ef236198efd2d03aeecabe00a8d281))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [10.15.0](https://github.com/hatiolab/operato/compare/v10.14.0...v10.15.0) (2026-09-17)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -23,30 +23,30 @@
|
|
|
23
23
|
<div class='clearfix'>
|
|
24
24
|
|
|
25
25
|
<div class='fl pad1y space-right2'>
|
|
26
|
-
<span class="strong">71.
|
|
26
|
+
<span class="strong">71.59% </span>
|
|
27
27
|
<span class="quiet">Statements</span>
|
|
28
|
-
<span class='fraction'>
|
|
28
|
+
<span class='fraction'>11962/16707</span>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
<div class='fl pad1y space-right2'>
|
|
33
|
-
<span class="strong">
|
|
33
|
+
<span class="strong">69.16% </span>
|
|
34
34
|
<span class="quiet">Branches</span>
|
|
35
|
-
<span class='fraction'>
|
|
35
|
+
<span class='fraction'>166/240</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
<div class='fl pad1y space-right2'>
|
|
40
|
-
<span class="strong">28.
|
|
40
|
+
<span class="strong">28.99% </span>
|
|
41
41
|
<span class="quiet">Functions</span>
|
|
42
|
-
<span class='fraction'>
|
|
42
|
+
<span class='fraction'>89/307</span>
|
|
43
43
|
</div>
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
<div class='fl pad1y space-right2'>
|
|
47
|
-
<span class="strong">71.
|
|
47
|
+
<span class="strong">71.59% </span>
|
|
48
48
|
<span class="quiet">Lines</span>
|
|
49
|
-
<span class='fraction'>
|
|
49
|
+
<span class='fraction'>11962/16707</span>
|
|
50
50
|
</div>
|
|
51
51
|
|
|
52
52
|
|
|
@@ -129,13 +129,13 @@
|
|
|
129
129
|
<div class="chart"><div class="cover-fill" style="width: 99%"></div><div class="cover-empty" style="width: 1%"></div></div>
|
|
130
130
|
</td>
|
|
131
131
|
<td data-value="99.91" class="pct high">99.91%</td>
|
|
132
|
-
<td data-value="
|
|
133
|
-
<td data-value="
|
|
134
|
-
<td data-value="
|
|
132
|
+
<td data-value="2383" class="abs high">2381/2383</td>
|
|
133
|
+
<td data-value="72.72" class="pct medium">72.72%</td>
|
|
134
|
+
<td data-value="11" class="abs medium">8/11</td>
|
|
135
135
|
<td data-value="100" class="pct high">100%</td>
|
|
136
|
-
<td data-value="
|
|
136
|
+
<td data-value="6" class="abs high">6/6</td>
|
|
137
137
|
<td data-value="99.91" class="pct high">99.91%</td>
|
|
138
|
-
<td data-value="
|
|
138
|
+
<td data-value="2383" class="abs high">2381/2383</td>
|
|
139
139
|
</tr>
|
|
140
140
|
|
|
141
141
|
<tr>
|
|
@@ -326,7 +326,7 @@
|
|
|
326
326
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
327
327
|
Code coverage generated by
|
|
328
328
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
329
|
-
at 2026-09-
|
|
329
|
+
at 2026-09-17T15:27:59.188Z
|
|
330
330
|
</div>
|
|
331
331
|
<script src="prettify.js"></script>
|
|
332
332
|
<script>
|
|
@@ -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-
|
|
106
|
+
at 2026-09-17T15:27:59.188Z
|
|
107
107
|
</div>
|
|
108
108
|
<script src="../prettify.js"></script>
|
|
109
109
|
<script>
|
|
@@ -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-
|
|
104
|
+
at 2026-09-17T15:27:59.188Z
|
|
105
105
|
</div>
|
|
106
106
|
<script src="../prettify.js"></script>
|
|
107
107
|
<script>
|
|
@@ -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-
|
|
106
|
+
at 2026-09-17T15:27:59.188Z
|
|
107
107
|
</div>
|
|
108
108
|
<script src="../../prettify.js"></script>
|
|
109
109
|
<script>
|
|
@@ -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-
|
|
106
|
+
at 2026-09-17T15:27:59.188Z
|
|
107
107
|
</div>
|
|
108
108
|
<script src="../../prettify.js"></script>
|
|
109
109
|
<script>
|
|
@@ -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-
|
|
106
|
+
at 2026-09-17T15:27:59.188Z
|
|
107
107
|
</div>
|
|
108
108
|
<script src="../../prettify.js"></script>
|
|
109
109
|
<script>
|
|
@@ -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-
|
|
149
|
+
at 2026-09-17T15:27:59.188Z
|
|
150
150
|
</div>
|
|
151
151
|
<script src="../../prettify.js"></script>
|
|
152
152
|
<script>
|
|
@@ -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-
|
|
106
|
+
at 2026-09-17T15:27:59.188Z
|
|
107
107
|
</div>
|
|
108
108
|
<script src="../../prettify.js"></script>
|
|
109
109
|
<script>
|
package/coverage/lcov.info
CHANGED
|
@@ -4412,10 +4412,12 @@ BRH:0
|
|
|
4412
4412
|
end_of_record
|
|
4413
4413
|
TN:
|
|
4414
4414
|
SF:__wds-outside-root__/1/styles/src/action-heights.ts
|
|
4415
|
-
FN:
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4415
|
+
FN:48,actionHeight
|
|
4416
|
+
FN:57,suiteActionHeight
|
|
4417
|
+
FNF:2
|
|
4418
|
+
FNH:2
|
|
4419
|
+
FNDA:13,actionHeight
|
|
4420
|
+
FNDA:14,suiteActionHeight
|
|
4419
4421
|
DA:1,1
|
|
4420
4422
|
DA:2,1
|
|
4421
4423
|
DA:3,1
|
|
@@ -4450,13 +4452,40 @@ DA:31,1
|
|
|
4450
4452
|
DA:32,1
|
|
4451
4453
|
DA:33,1
|
|
4452
4454
|
DA:34,1
|
|
4453
|
-
DA:35,
|
|
4454
|
-
DA:36,
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
|
|
4458
|
-
|
|
4459
|
-
|
|
4455
|
+
DA:35,1
|
|
4456
|
+
DA:36,1
|
|
4457
|
+
DA:37,1
|
|
4458
|
+
DA:38,1
|
|
4459
|
+
DA:39,1
|
|
4460
|
+
DA:40,1
|
|
4461
|
+
DA:41,1
|
|
4462
|
+
DA:42,1
|
|
4463
|
+
DA:43,1
|
|
4464
|
+
DA:44,1
|
|
4465
|
+
DA:45,1
|
|
4466
|
+
DA:46,1
|
|
4467
|
+
DA:47,1
|
|
4468
|
+
DA:48,1
|
|
4469
|
+
DA:49,13
|
|
4470
|
+
DA:50,13
|
|
4471
|
+
DA:51,1
|
|
4472
|
+
DA:52,1
|
|
4473
|
+
DA:53,1
|
|
4474
|
+
DA:54,1
|
|
4475
|
+
DA:55,1
|
|
4476
|
+
DA:56,1
|
|
4477
|
+
DA:57,1
|
|
4478
|
+
DA:58,14
|
|
4479
|
+
DA:59,14
|
|
4480
|
+
DA:60,14
|
|
4481
|
+
LF:60
|
|
4482
|
+
LH:60
|
|
4483
|
+
BRDA:48,0,0,13
|
|
4484
|
+
BRDA:57,1,0,14
|
|
4485
|
+
BRDA:59,2,0,5
|
|
4486
|
+
BRDA:59,3,0,9
|
|
4487
|
+
BRF:4
|
|
4488
|
+
BRH:4
|
|
4460
4489
|
end_of_record
|
|
4461
4490
|
TN:
|
|
4462
4491
|
SF:__wds-outside-root__/1/styles/src/box-padding-editor-styles.ts
|
|
@@ -4775,8 +4804,26 @@ DA:201,1
|
|
|
4775
4804
|
DA:202,1
|
|
4776
4805
|
DA:203,1
|
|
4777
4806
|
DA:204,1
|
|
4778
|
-
|
|
4779
|
-
|
|
4807
|
+
DA:205,1
|
|
4808
|
+
DA:206,1
|
|
4809
|
+
DA:207,1
|
|
4810
|
+
DA:208,1
|
|
4811
|
+
DA:209,1
|
|
4812
|
+
DA:210,1
|
|
4813
|
+
DA:211,1
|
|
4814
|
+
DA:212,1
|
|
4815
|
+
DA:213,1
|
|
4816
|
+
DA:214,1
|
|
4817
|
+
DA:215,1
|
|
4818
|
+
DA:216,1
|
|
4819
|
+
DA:217,1
|
|
4820
|
+
DA:218,1
|
|
4821
|
+
DA:219,1
|
|
4822
|
+
DA:220,1
|
|
4823
|
+
DA:221,1
|
|
4824
|
+
DA:222,1
|
|
4825
|
+
LF:222
|
|
4826
|
+
LH:222
|
|
4780
4827
|
BRF:0
|
|
4781
4828
|
BRH:0
|
|
4782
4829
|
end_of_record
|
|
@@ -6027,17 +6074,39 @@ DA:328,1
|
|
|
6027
6074
|
DA:329,1
|
|
6028
6075
|
DA:330,1
|
|
6029
6076
|
DA:331,1
|
|
6030
|
-
|
|
6031
|
-
|
|
6077
|
+
DA:332,1
|
|
6078
|
+
DA:333,1
|
|
6079
|
+
DA:334,1
|
|
6080
|
+
DA:335,1
|
|
6081
|
+
DA:336,1
|
|
6082
|
+
DA:337,1
|
|
6083
|
+
DA:338,1
|
|
6084
|
+
DA:339,1
|
|
6085
|
+
DA:340,1
|
|
6086
|
+
DA:341,1
|
|
6087
|
+
DA:342,1
|
|
6088
|
+
DA:343,1
|
|
6089
|
+
DA:344,1
|
|
6090
|
+
DA:345,1
|
|
6091
|
+
DA:346,1
|
|
6092
|
+
DA:347,1
|
|
6093
|
+
DA:348,1
|
|
6094
|
+
DA:349,1
|
|
6095
|
+
DA:350,1
|
|
6096
|
+
DA:351,1
|
|
6097
|
+
LF:351
|
|
6098
|
+
LH:351
|
|
6032
6099
|
BRF:0
|
|
6033
6100
|
BRH:0
|
|
6034
6101
|
end_of_record
|
|
6035
6102
|
TN:
|
|
6036
6103
|
SF:__wds-outside-root__/1/styles/src/form-element-heights.ts
|
|
6037
|
-
FN:
|
|
6038
|
-
|
|
6039
|
-
|
|
6040
|
-
|
|
6104
|
+
FN:36,formElementHeight
|
|
6105
|
+
FN:44,suiteFormElementHeight
|
|
6106
|
+
FNF:2
|
|
6107
|
+
FNH:2
|
|
6108
|
+
FNDA:9,formElementHeight
|
|
6109
|
+
FNDA:2,suiteFormElementHeight
|
|
6041
6110
|
DA:1,1
|
|
6042
6111
|
DA:2,1
|
|
6043
6112
|
DA:3,1
|
|
@@ -6067,13 +6136,31 @@ DA:26,1
|
|
|
6067
6136
|
DA:27,1
|
|
6068
6137
|
DA:28,1
|
|
6069
6138
|
DA:29,1
|
|
6070
|
-
DA:30,
|
|
6071
|
-
DA:31,
|
|
6072
|
-
|
|
6073
|
-
|
|
6074
|
-
|
|
6075
|
-
|
|
6076
|
-
|
|
6139
|
+
DA:30,1
|
|
6140
|
+
DA:31,1
|
|
6141
|
+
DA:32,1
|
|
6142
|
+
DA:33,1
|
|
6143
|
+
DA:34,1
|
|
6144
|
+
DA:35,1
|
|
6145
|
+
DA:36,1
|
|
6146
|
+
DA:37,9
|
|
6147
|
+
DA:38,9
|
|
6148
|
+
DA:39,1
|
|
6149
|
+
DA:40,1
|
|
6150
|
+
DA:41,1
|
|
6151
|
+
DA:42,1
|
|
6152
|
+
DA:43,1
|
|
6153
|
+
DA:44,1
|
|
6154
|
+
DA:45,2
|
|
6155
|
+
DA:46,2
|
|
6156
|
+
DA:47,2
|
|
6157
|
+
LF:47
|
|
6158
|
+
LH:47
|
|
6159
|
+
BRDA:36,0,0,9
|
|
6160
|
+
BRDA:44,1,0,2
|
|
6161
|
+
BRDA:46,2,0,0
|
|
6162
|
+
BRF:3
|
|
6163
|
+
BRH:2
|
|
6077
6164
|
end_of_record
|
|
6078
6165
|
TN:
|
|
6079
6166
|
SF:__wds-outside-root__/1/styles/src/form-field-styles.ts
|
|
@@ -7,7 +7,7 @@ import '@material/web/chips/chip-set.js';
|
|
|
7
7
|
import { css, html } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
9
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
|
-
import {
|
|
10
|
+
import { FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS, suiteFormElementHeight } from '@operato/styles/form-element-heights.js';
|
|
11
11
|
import { OxFormField } from './ox-form-field.js';
|
|
12
12
|
import { InputStyles } from './input-styles.js';
|
|
13
13
|
let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
@@ -39,11 +39,11 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
|
39
39
|
flex-wrap: wrap;
|
|
40
40
|
gap: 6px;
|
|
41
41
|
|
|
42
|
-
/* Size: the small input height
|
|
43
|
-
--md-filter-chip-container-height: ${
|
|
42
|
+
/* Size: 26px on the platform, the small input height in the operato products. */
|
|
43
|
+
--md-filter-chip-container-height: ${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)};
|
|
44
44
|
--md-filter-chip-label-text-size: 12.5px;
|
|
45
45
|
--md-filter-chip-label-text-weight: 560;
|
|
46
|
-
--md-filter-chip-container-shape: calc(${
|
|
46
|
+
--md-filter-chip-container-shape: calc(${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)} / 2);
|
|
47
47
|
--md-filter-chip-leading-space: 11px;
|
|
48
48
|
--md-filter-chip-trailing-space: 11px;
|
|
49
49
|
--md-filter-chip-with-leading-icon-leading-space: 8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oCAAoC,CAAA;AAC3C,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/chips/filter-chip.js'\nimport '@material/web/chips/chip-set.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS, suiteFormElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = {\n display: string\n value: string\n /**\n * 마우스를 올렸을 때 보이는 뜻.\n *\n * 칩의 이름은 짧아야 하는데, 이름만으로는 무엇이 걸러지는지 알 수 없는 것이 있다 — 「중요」가\n * 우선순위 몇 이상인지, 「만기」가 몇 시간 안인지. 그 값을 화면이 말하지 않으면 사용자는 눌러 보고\n * 결과를 되짚어야 한다.\n */\n hint?: string\n}\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n static styles = [\n InputStyles,\n css`\n /*\n * 필터는 **목록보다 조용해야 한다.**\n *\n * 확인해 보니 칩 글자가 16px 이었고 목록 본문은 14px 이었다. 걸러진 것이 하나도 없는 상태에서도 이\n * 줄이 화면에서 가장 크고 진했다. 테두리 색도 본문 글자와 같은 검정이라, 네 개가 나란히 서면\n * 그 선들이 제일 먼저 눈에 걸렸다.\n *\n * 그래서 꺼져 있을 때는 물러나고 켜져 있을 때만 나선다. 지금 무엇으로 걸렀는지가 이 줄에서\n * 바로 읽혀야 한다 — 목록이 짧아진 이유를 화면이 말해야 한다.\n *\n * md 칩을 갈아치우지 않고 그 토큰으로만 조정한다. 이 컴포넌트를 쓰는 화면이 많고, 자기 것으로\n * 다시 만들면 그 화면들이 두 모양으로 갈린다.\n */\n :host {\n display: flex;\n flex-flow: row;\n flex-wrap: wrap;\n gap: 6px;\n\n /* Size: 26px on the platform, the small input height in the operato products. */\n --md-filter-chip-container-height: ${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)};\n --md-filter-chip-label-text-size: 12.5px;\n --md-filter-chip-label-text-weight: 560;\n --md-filter-chip-container-shape: calc(${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)} / 2);\n --md-filter-chip-leading-space: 11px;\n --md-filter-chip-trailing-space: 11px;\n --md-filter-chip-with-leading-icon-leading-space: 8px;\n --md-filter-chip-icon-size: 15px;\n\n /* 꺼진 상태 — 선은 흐리게, 글자는 보조 글자 색으로. */\n --md-filter-chip-outline-color: var(--md-sys-color-outline-variant);\n --md-filter-chip-outline-width: 1px;\n --md-filter-chip-label-text-color: var(--md-sys-color-on-surface-variant);\n --md-filter-chip-hover-label-text-color: var(--md-sys-color-on-surface);\n --md-filter-chip-hover-state-layer-opacity: 0.06;\n\n /* 켜진 상태 — 채워서 확실히 다르게. 켜졌는지 아닌지가 헷갈리면 필터는 쓸모가 없다. */\n --md-filter-chip-selected-container-color: var(--md-sys-color-primary);\n --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-outline-width: 0px;\n --md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-primary);\n }\n `\n ]\n\n @property({ type: Array }) value: string[] | string | undefined = []\n @property({ type: Array }) options: Option[] = []\n @property({ type: Boolean }) multiple: boolean = false\n\n render() {\n const options = this.options.filter(option => !!option.value)\n const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n return html`\n <md-chip-set>\n ${(options || []).map(\n ({ display, value, hint }) => html`\n <md-filter-chip\n data-value=${value}\n label=${display}\n title=${ifDefined(hint)}\n ?selected=${values.includes(value)}\n @click=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onClick(e)}\n ></md-filter-chip>\n `\n )}\n </md-chip-set>\n `\n }\n\n onClick(e: MouseEvent | TouchEvent) {\n e.stopPropagation()\n\n const target = e.target as MdFilterChip\n const value = target.getAttribute('data-value') as string\n\n if (this.multiple) {\n const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n const idx = (this.value || []).indexOf(value)\n if (idx != -1) {\n values.splice(idx, 1)\n } else {\n values.push(value)\n }\n this.value = [...values]\n } else {\n this.value = this.value === value ? undefined : value\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
|
|
@@ -6,7 +6,7 @@ import { OxInputDuration } from '../src/ox-input-duration.js';
|
|
|
6
6
|
import { OxInputSelectButtons } from '../src/ox-input-select-buttons.js';
|
|
7
7
|
import { InputStyles } from '../src/input-styles.js';
|
|
8
8
|
/**
|
|
9
|
-
* Inputs read the medium input height, --form-element-height-medium (
|
|
9
|
+
* Inputs read the medium input height, --form-element-height-medium (30px on the platform). The number
|
|
10
10
|
* comes from @operato/styles (FORM_ELEMENT_HEIGHT_TOKENS) so a component used without the shell theme
|
|
11
11
|
* still has a height, and no component writes its own number or keeps a private height variable.
|
|
12
12
|
*/
|
|
@@ -22,13 +22,13 @@ describe('form element height', () => {
|
|
|
22
22
|
]) {
|
|
23
23
|
it(`${name} reads the medium token with the shared default`, () => {
|
|
24
24
|
const css = text(element.styles);
|
|
25
|
-
expect(css).to.contain('var(--form-element-height-medium,
|
|
25
|
+
expect(css).to.contain('var(--form-element-height-medium, 30px)');
|
|
26
26
|
expect(css).to.not.match(/var\(--form-element-height-medium\)/);
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
|
-
it('ox-input-select-buttons chips
|
|
29
|
+
it('ox-input-select-buttons chips: 26px on the platform, the suite small height in the operato products', () => {
|
|
30
30
|
const css = text(OxInputSelectButtons.styles);
|
|
31
|
-
expect(css).to.contain('--md-filter-chip-container-height: var(--form-element-height-small, 26px)');
|
|
31
|
+
expect(css).to.contain('--md-filter-chip-container-height: var(--suite-form-element-height-small, 26px)');
|
|
32
32
|
});
|
|
33
33
|
it('InputStyles keeps no private input height', () => {
|
|
34
34
|
expect(text(InputStyles)).to.not.contain('--ox-input-height');
|
|
@@ -1 +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,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD;;;;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,CAAC,MAAM,CAAE,CAA0B,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC1D,IAAI,CAAC,IAAI,CAAC,CAAA;AAEf,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,KAAK,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI;QAC5B,CAAC,kBAAkB,EAAE,cAAc,CAAC;QACpC,CAAC,kBAAkB,EAAE,cAAc,CAAC;QACpC,CAAC,kBAAkB,EAAE,cAAc,CAAC;QACpC,CAAC,mBAAmB,EAAE,eAAe,CAAC;KAC9B,EAAE,CAAC;QACX,EAAE,CAAC,GAAG,IAAI,iDAAiD,EAAE,GAAG,EAAE;YAChE,MAAM,GAAG,GAAG,IAAI,CAAE,OAA0C,CAAC,MAAM,CAAC,CAAA;YACpE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,yCAAyC,CAAC,CAAA;YACjE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAA;QACjE,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,EAAE,CAAC,
|
|
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,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD;;;;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,CAAC,MAAM,CAAE,CAA0B,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC1D,IAAI,CAAC,IAAI,CAAC,CAAA;AAEf,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,KAAK,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI;QAC5B,CAAC,kBAAkB,EAAE,cAAc,CAAC;QACpC,CAAC,kBAAkB,EAAE,cAAc,CAAC;QACpC,CAAC,kBAAkB,EAAE,cAAc,CAAC;QACpC,CAAC,mBAAmB,EAAE,eAAe,CAAC;KAC9B,EAAE,CAAC;QACX,EAAE,CAAC,GAAG,IAAI,iDAAiD,EAAE,GAAG,EAAE;YAChE,MAAM,GAAG,GAAG,IAAI,CAAE,OAA0C,CAAC,MAAM,CAAC,CAAA;YACpE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,yCAAyC,CAAC,CAAA;YACjE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAA;QACjE,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,EAAE,CAAC,qGAAqG,EAAE,GAAG,EAAE;QAC7G,MAAM,GAAG,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAA;QAC7C,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,iFAAiF,CAAC,CAAA;IAC3G,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAA;IAC/D,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect } from '@open-wc/testing'\n\nimport { OxButtonsRadio } from '../src/ox-buttons-radio.js'\nimport { OxInputBarcode } from '../src/ox-input-barcode.js'\nimport { OxInputCrontab } from '../src/ox-input-crontab.js'\nimport { OxInputDuration } from '../src/ox-input-duration.js'\nimport { OxInputSelectButtons } from '../src/ox-input-select-buttons.js'\nimport { InputStyles } from '../src/input-styles.js'\n\n/**\n * Inputs read the medium input height, --form-element-height-medium (30px on the platform). The number\n * comes from @operato/styles (FORM_ELEMENT_HEIGHT_TOKENS) so a component used without the shell theme\n * still has a height, and no component writes its own number or keeps a private height variable.\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 for (const [name, element] of [\n ['ox-buttons-radio', OxButtonsRadio],\n ['ox-input-barcode', OxInputBarcode],\n ['ox-input-crontab', OxInputCrontab],\n ['ox-input-duration', OxInputDuration]\n ] as const) {\n it(`${name} reads the medium token with the shared default`, () => {\n const css = text((element as unknown as { styles: unknown }).styles)\n expect(css).to.contain('var(--form-element-height-medium, 30px)')\n expect(css).to.not.match(/var\\(--form-element-height-medium\\)/)\n })\n }\n\n it('ox-input-select-buttons chips: 26px on the platform, the suite small height in the operato products', () => {\n const css = text(OxInputSelectButtons.styles)\n expect(css).to.contain('--md-filter-chip-container-height: var(--suite-form-element-height-small, 26px)')\n })\n\n it('InputStyles keeps no private input height', () => {\n expect(text(InputStyles)).to.not.contain('--ox-input-height')\n })\n})\n"]}
|