@operato/input 2.0.0-beta.3 → 2.0.0-beta.31
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 +187 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-checkbox.js +4 -8
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-multiple-colors.d.ts +1 -1
- package/dist/src/ox-input-multiple-colors.js +22 -13
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-select-buttons.d.ts +1 -1
- package/dist/src/ox-input-select-buttons.js +2 -2
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/src/ox-input-table-column-config.d.ts +21 -0
- package/dist/src/ox-input-table-column-config.js +202 -0
- package/dist/src/ox-input-table-column-config.js.map +1 -0
- package/dist/src/ox-input-unit-number.d.ts +0 -2
- package/dist/src/ox-input-unit-number.js +3 -5
- package/dist/src/ox-input-unit-number.js.map +1 -1
- package/dist/src/ox-select.js +1 -12
- package/dist/src/ox-select.js.map +1 -1
- package/dist/stories/ox-input-table-column-config.stories.d.ts +34 -0
- package/dist/stories/ox-input-table-column-config.stories.js +99 -0
- package/dist/stories/ox-input-table-column-config.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +16 -9
- package/src/index.ts +1 -0
- package/src/ox-checkbox.ts +4 -8
- package/src/ox-input-multiple-colors.ts +23 -13
- package/src/ox-input-select-buttons.ts +2 -2
- package/src/ox-input-table-column-config.ts +211 -0
- package/src/ox-input-unit-number.ts +5 -6
- package/src/ox-select.ts +1 -14
- package/stories/ox-input-table-column-config.stories.ts +120 -0
- package/themes/grist-theme.css +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,193 @@
|
|
|
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
|
+
## [2.0.0-beta.31](https://github.com/hatiolab/operato/compare/v2.0.0-beta.30...v2.0.0-beta.31) (2024-06-19)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [2.0.0-beta.30](https://github.com/hatiolab/operato/compare/v2.0.0-beta.29...v2.0.0-beta.30) (2024-06-18)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @operato/input
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [2.0.0-beta.26](https://github.com/hatiolab/operato/compare/v2.0.0-beta.25...v2.0.0-beta.26) (2024-06-18)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### :bug: Bug Fix
|
|
26
|
+
|
|
27
|
+
* grist filter personalizer ([a41eb91](https://github.com/hatiolab/operato/commit/a41eb912700149a5c6ed910d40c6c1cb74b09976))
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
### :rocket: New Features
|
|
31
|
+
|
|
32
|
+
* chart config editor ([71d49fe](https://github.com/hatiolab/operato/commit/71d49fee7d9c329ec957df36845be1a6aa8a8260))
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## [2.0.0-beta.25](https://github.com/hatiolab/operato/compare/v2.0.0-beta.24...v2.0.0-beta.25) (2024-06-17)
|
|
37
|
+
|
|
38
|
+
**Note:** Version bump only for package @operato/input
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
## [2.0.0-beta.24](https://github.com/hatiolab/operato/compare/v2.0.0-beta.23...v2.0.0-beta.24) (2024-06-15)
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
### :bug: Bug Fix
|
|
48
|
+
|
|
49
|
+
* remove default value for data property editor ([bf680c5](https://github.com/hatiolab/operato/commit/bf680c5da4856316e2a96f0231f2354cd305008f))
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
## [2.0.0-beta.23](https://github.com/hatiolab/operato/compare/v2.0.0-beta.22...v2.0.0-beta.23) (2024-06-13)
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
### :bug: Bug Fix
|
|
57
|
+
|
|
58
|
+
* export package.json ([538e6e0](https://github.com/hatiolab/operato/commit/538e6e050f5a3d77b8ed805968d66a9093a7d5e9))
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
## [2.0.0-beta.22](https://github.com/hatiolab/operato/compare/v2.0.0-beta.21...v2.0.0-beta.22) (2024-06-13)
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
### :bug: Bug Fix
|
|
66
|
+
|
|
67
|
+
* operato tag for all package.json ([2334960](https://github.com/hatiolab/operato/commit/2334960db2186ade87ee590796a269fe5f5e9419))
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
## [2.0.0-beta.20](https://github.com/hatiolab/operato/compare/v2.0.0-beta.19...v2.0.0-beta.20) (2024-06-11)
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
### :bug: Bug Fix
|
|
75
|
+
|
|
76
|
+
* support function for defaultValue in ox-property-editor ([efe7590](https://github.com/hatiolab/operato/commit/efe7590a41d223d92ef7b96c3e1b49c3691599d0))
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
## [2.0.0-beta.19](https://github.com/hatiolab/operato/compare/v2.0.0-beta.18...v2.0.0-beta.19) (2024-06-11)
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
### :rocket: New Features
|
|
84
|
+
|
|
85
|
+
* gantt chart ([3daba7f](https://github.com/hatiolab/operato/commit/3daba7fbd8c270dc01c72b8d6602de75b370d59e))
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
## [2.0.0-beta.18](https://github.com/hatiolab/operato/compare/v2.0.0-beta.17...v2.0.0-beta.18) (2024-06-11)
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
### :rocket: New Features
|
|
93
|
+
|
|
94
|
+
* ox-input-table-column-config ([39be540](https://github.com/hatiolab/operato/commit/39be54054e210f6ce5d55499dffe78f4426d0d76))
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
## [2.0.0-beta.17](https://github.com/hatiolab/operato/compare/v2.0.0-beta.16...v2.0.0-beta.17) (2024-06-11)
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
### :rocket: New Features
|
|
102
|
+
|
|
103
|
+
* ox-input-table-column-config ([0b84541](https://github.com/hatiolab/operato/commit/0b84541ec63fc71538292abd9e81d8c38baee44c))
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
## [2.0.0-beta.16](https://github.com/hatiolab/operato/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2024-06-10)
|
|
108
|
+
|
|
109
|
+
**Note:** Version bump only for package @operato/input
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
## [2.0.0-beta.15](https://github.com/hatiolab/operato/compare/v2.0.0-beta.14...v2.0.0-beta.15) (2024-06-10)
|
|
116
|
+
|
|
117
|
+
**Note:** Version bump only for package @operato/input
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
## [2.0.0-beta.14](https://github.com/hatiolab/operato/compare/v2.0.0-beta.13...v2.0.0-beta.14) (2024-06-10)
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
### :bug: Bug Fix
|
|
127
|
+
|
|
128
|
+
* gantt ([2ba0fc3](https://github.com/hatiolab/operato/commit/2ba0fc3b6928502c5667e59178391affa7b73294))
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
## [2.0.0-beta.13](https://github.com/hatiolab/operato/compare/v2.0.0-beta.12...v2.0.0-beta.13) (2024-06-09)
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
### :rocket: New Features
|
|
136
|
+
|
|
137
|
+
* tooltip-reactive-controller for mouse over/out ([73f069b](https://github.com/hatiolab/operato/commit/73f069b4e8c1472cc991010bbe7b3866035a05f0))
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
## [2.0.0-beta.12](https://github.com/hatiolab/operato/compare/v2.0.0-beta.11...v2.0.0-beta.12) (2024-06-09)
|
|
142
|
+
|
|
143
|
+
**Note:** Version bump only for package @operato/input
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
## [2.0.0-beta.9](https://github.com/hatiolab/operato/compare/v2.0.0-beta.8...v2.0.0-beta.9) (2024-06-08)
|
|
150
|
+
|
|
151
|
+
**Note:** Version bump only for package @operato/input
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
## [2.0.0-beta.8](https://github.com/hatiolab/operato/compare/v2.0.0-beta.7...v2.0.0-beta.8) (2024-06-07)
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
### :bug: Bug Fix
|
|
161
|
+
|
|
162
|
+
* ox-input-select-buttons 모바일에서 click 이벤트가 발생하지 않으므로, tap 이벤트 처리로 변경함 ([4bef771](https://github.com/hatiolab/operato/commit/4bef771d93875138a44a2edd60bf38734dedc50b))
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
## [2.0.0-beta.7](https://github.com/hatiolab/operato/compare/v2.0.0-beta.6...v2.0.0-beta.7) (2024-06-07)
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
### :rocket: New Features
|
|
170
|
+
|
|
171
|
+
* add user-preference-context into p13n module ([ba9901d](https://github.com/hatiolab/operato/commit/ba9901d5cc5df85ed1db8aeae471819be03244ca))
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
## [2.0.0-beta.5](https://github.com/hatiolab/operato/compare/v2.0.0-beta.4...v2.0.0-beta.5) (2024-06-04)
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
### :bug: Bug Fix
|
|
179
|
+
|
|
180
|
+
* theming design token : --border-dark-color => --border-dim-color ([eaf0866](https://github.com/hatiolab/operato/commit/eaf08667f6133cc4bcabf161bbe04305e0ff57e7))
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
## [2.0.0-beta.4](https://github.com/hatiolab/operato/compare/v2.0.0-beta.3...v2.0.0-beta.4) (2024-06-04)
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
### :bug: Bug Fix
|
|
188
|
+
|
|
189
|
+
* theming styles ([15fa201](https://github.com/hatiolab/operato/commit/15fa20198d7adc6b57f16e408f8dee94c40113f5))
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
6
193
|
## [2.0.0-beta.3](https://github.com/hatiolab/operato/compare/v2.0.0-beta.2...v2.0.0-beta.3) (2024-06-04)
|
|
7
194
|
|
|
8
195
|
**Note:** Version bump only for package @operato/input
|
package/dist/src/index.d.ts
CHANGED
package/dist/src/index.js
CHANGED
|
@@ -28,4 +28,5 @@ export * from './ox-input-quantifier.js';
|
|
|
28
28
|
export * from './ox-input-select-buttons.js';
|
|
29
29
|
export * from './ox-input-textarea.js';
|
|
30
30
|
export * from './ox-input-direction.js';
|
|
31
|
+
export * from './ox-input-table-column-config.js';
|
|
31
32
|
//# sourceMappingURL=index.js.map
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\n"]}
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -43,12 +43,8 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
43
43
|
justify-content: center;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
:host([indeterminate]) .checkbox {
|
|
47
|
-
background-color: var(--ox-checkbox-unchecked-background-color, var(--md-ref-palette-primary80));
|
|
48
|
-
}
|
|
49
|
-
|
|
50
46
|
:host([checked]) .checkbox {
|
|
51
|
-
background-color: var(--ox-checkbox-checked-background-color, var(--md-
|
|
47
|
+
background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-surface-tint));
|
|
52
48
|
}
|
|
53
49
|
|
|
54
50
|
path {
|
|
@@ -56,7 +52,6 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
56
52
|
}
|
|
57
53
|
|
|
58
54
|
:host([indeterminate]) line {
|
|
59
|
-
fill: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-on-surface-variant));
|
|
60
55
|
stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));
|
|
61
56
|
}
|
|
62
57
|
|
|
@@ -70,11 +65,12 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
70
65
|
}
|
|
71
66
|
|
|
72
67
|
.label {
|
|
73
|
-
color: var(--ox-checkbox-label-color, var(--md-sys-color-on-
|
|
74
|
-
font-size: var(--md-sys-typescale-label-
|
|
68
|
+
color: var(--ox-checkbox-label-color, var(--md-sys-color-on-primary-container));
|
|
69
|
+
font-size: var(--md-sys-typescale-label-medium-size, 1rem);
|
|
75
70
|
line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
|
|
76
71
|
}
|
|
77
72
|
:host([checked]) .label {
|
|
73
|
+
color:var(ox-checkbox-label-checked-color, var(--md-sys-color-primary));
|
|
78
74
|
font-weight: 700;
|
|
79
75
|
}
|
|
80
76
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH;;EAEE;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;
|
|
1
|
+
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n div {\n display: flex;\n gap: var(--input-intra-gap, 7px);\n\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n .checkbox {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n :host([checked]) .checkbox {\n background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-surface-tint));\n }\n\n path {\n fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n }\n\n :host([indeterminate]) line {\n stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n .label {\n color: var(--ox-checkbox-label-color, var(--md-sys-color-on-primary-container));\n font-size: var(--md-sys-typescale-label-medium-size, 1rem);\n line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n }\n :host([checked]) .label {\n color:var(ox-checkbox-label-checked-color, var(--md-sys-color-primary));\n font-weight: 700;\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div @click=${this.onClick} ?disabled=${this.disabled}>\n ${this._hasInner && this.left\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner && !this.left\n ? html` <span class=\"label\">\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown.bind(this))\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n if (!this.indeterminatable) {\n this.indeterminate = false\n this.checked = !this.checked\n } else {\n if (this.indeterminate) {\n this.indeterminate = false\n this.checked = true\n } else if (this.checked) {\n this.indeterminate = false\n this.checked = false\n } else {\n this.indeterminate = true\n this.checked = undefined\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.checked\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get indeterminateIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
|
|
@@ -24,6 +24,6 @@ export declare class OxInputMultipleColors extends OxFormField {
|
|
|
24
24
|
firstUpdated(): void;
|
|
25
25
|
render(): import("lit-html").TemplateResult<1>;
|
|
26
26
|
_onValueChanged(): void;
|
|
27
|
-
_appendEditorColor(): void;
|
|
27
|
+
_appendEditorColor(e: Event): void;
|
|
28
28
|
_removeEditorColor(e: Event): void;
|
|
29
29
|
}
|
|
@@ -6,6 +6,7 @@ import './ox-input-color.js';
|
|
|
6
6
|
import '@material/web/icon/icon.js';
|
|
7
7
|
import { css, html } from 'lit';
|
|
8
8
|
import { customElement, property, query, queryAll } from 'lit/decorators.js';
|
|
9
|
+
import { random as randomColor } from '@ctrl/tinycolor';
|
|
9
10
|
import { OxFormField } from './ox-form-field.js';
|
|
10
11
|
/**
|
|
11
12
|
색상 배열을 편집하는 컴포넌트이다.
|
|
@@ -36,29 +37,32 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
|
|
|
36
37
|
grid-gap: var(--spacing-medium);
|
|
37
38
|
align-items: center;
|
|
38
39
|
justify-content: left;
|
|
39
|
-
margin-bottom: var(--
|
|
40
|
+
margin-bottom: var(--spacing-tiny, 2px);
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
ox-input-color {
|
|
43
44
|
width: 100%;
|
|
44
45
|
}
|
|
45
46
|
|
|
47
|
+
md-icon {
|
|
48
|
+
pointer-events: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
46
51
|
button {
|
|
47
52
|
height: 100%;
|
|
48
53
|
border: var(--button-border);
|
|
49
|
-
border-radius:
|
|
50
|
-
background-color:
|
|
54
|
+
border-radius: 0;
|
|
55
|
+
background-color: transparent;
|
|
51
56
|
line-height: 0.8;
|
|
52
|
-
color: var(--
|
|
57
|
+
color: var(--md-sys-color-on-surface);
|
|
53
58
|
cursor: pointer;
|
|
54
59
|
}
|
|
55
60
|
|
|
56
|
-
button:focus,
|
|
57
61
|
button:hover,
|
|
58
62
|
button:active {
|
|
59
63
|
border: var(--button-activ-border);
|
|
60
|
-
background-color: var(--
|
|
61
|
-
color: var(--md-sys-color-primary
|
|
64
|
+
background-color: var(--md-sys-color-on-primary);
|
|
65
|
+
color: var(--md-sys-color-primary);
|
|
62
66
|
}
|
|
63
67
|
`; }
|
|
64
68
|
firstUpdated() {
|
|
@@ -69,7 +73,7 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
|
|
|
69
73
|
<div id="colors-container">
|
|
70
74
|
${(this.value || []).map((item, index) => html `
|
|
71
75
|
<div>
|
|
72
|
-
<button @
|
|
76
|
+
<button @tap=${(e) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>
|
|
73
77
|
<md-icon>add</md-icon>
|
|
74
78
|
</button>
|
|
75
79
|
<ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>
|
|
@@ -77,7 +81,7 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
|
|
|
77
81
|
${(this.value || []).length > 1
|
|
78
82
|
? html `
|
|
79
83
|
<button
|
|
80
|
-
@
|
|
84
|
+
@tap=${(e) => this._removeEditorColor(e)}
|
|
81
85
|
data-index=${index}
|
|
82
86
|
?disabled=${this.disabled}
|
|
83
87
|
>
|
|
@@ -93,17 +97,22 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
|
|
|
93
97
|
_onValueChanged() {
|
|
94
98
|
this.value = Array.from(this.colors).map(color => color.value);
|
|
95
99
|
}
|
|
96
|
-
_appendEditorColor() {
|
|
97
|
-
|
|
100
|
+
_appendEditorColor(e) {
|
|
101
|
+
const idx = Number(e.target.getAttribute('data-index'));
|
|
102
|
+
const hue = this.value[idx] || '#fff';
|
|
103
|
+
this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString());
|
|
104
|
+
this.value = [...this.value];
|
|
98
105
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
99
106
|
}
|
|
100
107
|
_removeEditorColor(e) {
|
|
101
108
|
var values = [];
|
|
102
109
|
for (var i = 0; i < this.value.length; i++) {
|
|
103
|
-
if (i == Number(e.target.
|
|
110
|
+
if (i == Number(e.target.getAttribute('data-index'))) {
|
|
104
111
|
continue;
|
|
105
|
-
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
106
114
|
values.push(this.value[i]);
|
|
115
|
+
}
|
|
107
116
|
}
|
|
108
117
|
this.value = values;
|
|
109
118
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAC5B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAC5B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EAAE,MAAM,IAAI,WAAW,EAAa,MAAM,iBAAiB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD;;;;;;;;;;EAUE;AAGK,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QA2CsB,UAAK,GAAa,EAAE,CAAA;IAgEjD,CAAC;aA1GQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwClB,AAxCY,CAwCZ;IAOD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CACtB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;6BAEF,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,eAAe,KAAK,cAAc,IAAI,CAAC,QAAQ;;;uCAG7E,IAAI,cAAc,IAAI,CAAC,QAAQ;;gBAEtD,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;YAC7B,CAAC,CAAC,IAAI,CAAA;;6BAEO,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;mCAClC,KAAK;kCACN,IAAI,CAAC,QAAQ;;;;mBAI5B;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;WAEb,CACF;;KAEJ,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAM,CAAC,CAAA;IACjE,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,MAAM,GAAG,GAAG,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAA;QACxE,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,MAAM,CAAA;QACrC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAA;QACjE,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAA;QAE5B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,MAAM,CAAE,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC;gBACtE,SAAQ;YACV,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;YAC5B,CAAC;QACH,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA/D0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAqB;AAEnB;IAA3B,KAAK,CAAC,mBAAmB,CAAC;8DAAiC;AAChC;IAA3B,QAAQ,CAAC,gBAAgB,CAAC;qDAAkC;AA9ClD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA2GjC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n <ox-input-multiple-colors values=${values}>\n </ox-input-multiple-colors>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n static styles = css`\n :host {\n display: inline-block;\n\n --md-icon-size: var(--fontsize-default, 14px);\n }\n\n #colors-container > div {\n display: grid;\n grid-template-columns: 34px 1fr 34px;\n grid-gap: var(--spacing-medium);\n align-items: center;\n justify-content: left;\n margin-bottom: var(--spacing-tiny, 2px);\n }\n\n ox-input-color {\n width: 100%;\n }\n\n md-icon {\n pointer-events: none;\n }\n\n button {\n height: 100%;\n border: var(--button-border);\n border-radius: 0;\n background-color: transparent;\n line-height: 0.8;\n color: var(--md-sys-color-on-surface);\n cursor: pointer;\n }\n\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--md-sys-color-on-primary);\n color: var(--md-sys-color-primary);\n }\n `\n\n @property({ type: Array }) value: string[] = []\n\n @query('#colors-container') colorsContainer!: HTMLDivElement\n @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n }\n\n render() {\n return html`\n <div id=\"colors-container\">\n ${(this.value || []).map(\n (item, index) => html`\n <div>\n <button @tap=${(e: Event) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>\n <md-icon>add</md-icon>\n </button>\n <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>\n\n ${(this.value || []).length > 1\n ? html`\n <button\n @tap=${(e: Event) => this._removeEditorColor(e)}\n data-index=${index}\n ?disabled=${this.disabled}\n >\n <md-icon>remove</md-icon>\n </button>\n `\n : html``}\n </div>\n `\n )}\n </div>\n `\n }\n\n _onValueChanged() {\n this.value = Array.from(this.colors).map(color => color.value!)\n }\n\n _appendEditorColor(e: Event) {\n const idx = Number((e.target as HTMLElement).getAttribute('data-index'))\n const hue = this.value[idx] || '#fff'\n this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString())\n this.value = [...this.value]\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _removeEditorColor(e: Event) {\n var values = []\n for (var i = 0; i < this.value.length; i++) {\n if (i == Number((e.target as HTMLElement).getAttribute('data-index'))) {\n continue\n } else {\n values.push(this.value[i])\n }\n }\n\n this.value = values\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -32,13 +32,13 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
|
32
32
|
data-value=${value}
|
|
33
33
|
label=${display}
|
|
34
34
|
?selected=${values.includes(value)}
|
|
35
|
-
@
|
|
35
|
+
@tap=${(e) => !this.disabled && this.onTap(e)}
|
|
36
36
|
></md-filter-chip>
|
|
37
37
|
`)}
|
|
38
38
|
</md-chip-set>
|
|
39
39
|
`;
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
onTap(e) {
|
|
42
42
|
e.stopPropagation();
|
|
43
43
|
const target = e.target;
|
|
44
44
|
const value = target.getAttribute('data-value');
|
|
@@ -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;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAMtC,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QAUsB,UAAK,GAAkC,EAAE,CAAA;QACzC,YAAO,GAAa,EAAE,CAAA;QACpB,aAAQ,GAAY,KAAK,CAAA;IA4CxD,CAAC;aAvDQ,WAAM,GAAG,GAAG,CAAA;;;;;;;GAOlB,AAPY,CAOZ;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC7D,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QAE3G,OAAO,IAAI,CAAA;;UAEL,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CACnB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;2BAEX,KAAK;sBACV,OAAO;0BACH,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;
|
|
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'\n\nimport { OxFormField } from './ox-form-field'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = { display: string; value: string }\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-flow: row;\n flex-wrap: wrap;\n gap: var(--spacing-medium);\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 }) => html`\n <md-filter-chip\n data-value=${value}\n label=${display}\n ?selected=${values.includes(value)}\n @tap=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onTap(e)}\n ></md-filter-chip>\n `\n )}\n </md-chip-set>\n `\n }\n\n onTap(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"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { OxFormField } from './ox-form-field';
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
|
+
export interface ColumnConfig {
|
|
4
|
+
name: string;
|
|
5
|
+
label: string;
|
|
6
|
+
visible: boolean;
|
|
7
|
+
width: number;
|
|
8
|
+
order: number;
|
|
9
|
+
}
|
|
10
|
+
export declare class OxInputTableColumnConfig extends OxFormField {
|
|
11
|
+
static styles: import("lit").CSSResult[];
|
|
12
|
+
value: ColumnConfig[];
|
|
13
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
14
|
+
private _updateVisibility;
|
|
15
|
+
private _updateLabel;
|
|
16
|
+
private _updateWidth;
|
|
17
|
+
private _moveUp;
|
|
18
|
+
private _moveDown;
|
|
19
|
+
private _updateOrder;
|
|
20
|
+
private _notifyChange;
|
|
21
|
+
}
|