@operato/attribute 2.0.0-alpha.99 → 2.0.0-beta.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 CHANGED
@@ -3,6 +3,420 @@
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.1](https://github.com/hatiolab/operato/compare/v2.0.0-beta.0...v2.0.0-beta.1) (2024-06-03)
7
+
8
+ **Note:** Version bump only for package @operato/attribute
9
+
10
+
11
+
12
+
13
+
14
+ ## [2.0.0-beta.0](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.158...v2.0.0-beta.0) (2024-06-01)
15
+
16
+ **Note:** Version bump only for package @operato/attribute
17
+
18
+
19
+
20
+
21
+
22
+ ## [2.0.0-alpha.158](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.157...v2.0.0-alpha.158) (2024-06-01)
23
+
24
+ **Note:** Version bump only for package @operato/attribute
25
+
26
+
27
+
28
+
29
+
30
+ ## [2.0.0-alpha.157](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.156...v2.0.0-alpha.157) (2024-06-01)
31
+
32
+
33
+ ### :bug: Bug Fix
34
+
35
+ * theming styles ([118fe71](https://github.com/hatiolab/operato/commit/118fe711fd86d89453f97320bf9fef1e51b4ac23))
36
+
37
+
38
+
39
+ ## [2.0.0-alpha.156](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.155...v2.0.0-alpha.156) (2024-06-01)
40
+
41
+ **Note:** Version bump only for package @operato/attribute
42
+
43
+
44
+
45
+
46
+
47
+ ## [2.0.0-alpha.155](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.154...v2.0.0-alpha.155) (2024-06-01)
48
+
49
+ **Note:** Version bump only for package @operato/attribute
50
+
51
+
52
+
53
+
54
+
55
+ ## [2.0.0-alpha.154](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.153...v2.0.0-alpha.154) (2024-06-01)
56
+
57
+
58
+ ### :bug: Bug Fix
59
+
60
+ * missing icon ([ae6cf08](https://github.com/hatiolab/operato/commit/ae6cf0849f23c56669bca59e824ed847a19d3e15))
61
+
62
+
63
+
64
+ ## [2.0.0-alpha.153](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.152...v2.0.0-alpha.153) (2024-05-31)
65
+
66
+
67
+ ### :bug: Bug Fix
68
+
69
+ * update theme file for form module ([6bcc259](https://github.com/hatiolab/operato/commit/6bcc25933b8be42f8e15ab71cdaf0b75ca5a3a72))
70
+
71
+
72
+
73
+ ## [2.0.0-alpha.152](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.151...v2.0.0-alpha.152) (2024-05-30)
74
+
75
+
76
+ ### :bug: Bug Fix
77
+
78
+ * theming style - background-color ([48a0fe4](https://github.com/hatiolab/operato/commit/48a0fe49a533ae1fbd7931a2951b6a68e9c39b01))
79
+
80
+
81
+
82
+ ## [2.0.0-alpha.151](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.150...v2.0.0-alpha.151) (2024-05-30)
83
+
84
+ **Note:** Version bump only for package @operato/attribute
85
+
86
+
87
+
88
+
89
+
90
+ ## [2.0.0-alpha.150](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.149...v2.0.0-alpha.150) (2024-05-30)
91
+
92
+ **Note:** Version bump only for package @operato/attribute
93
+
94
+
95
+
96
+
97
+
98
+ ## [2.0.0-alpha.149](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.148...v2.0.0-alpha.149) (2024-05-30)
99
+
100
+ **Note:** Version bump only for package @operato/attribute
101
+
102
+
103
+
104
+
105
+
106
+ ## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
107
+
108
+
109
+ ### :rocket: New Features
110
+
111
+ * md3 ([2d85145](https://github.com/hatiolab/operato/commit/2d8514510e4dd88d3ff0652e0b22c9992cabce5c))
112
+ * md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
113
+
114
+
115
+
116
+ ## [2.0.0-alpha.146](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.145...v2.0.0-alpha.146) (2024-05-29)
117
+
118
+ **Note:** Version bump only for package @operato/attribute
119
+
120
+
121
+
122
+
123
+
124
+ ## [2.0.0-alpha.145](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.144...v2.0.0-alpha.145) (2024-05-28)
125
+
126
+ **Note:** Version bump only for package @operato/attribute
127
+
128
+
129
+
130
+
131
+
132
+ ## [2.0.0-alpha.143](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.142...v2.0.0-alpha.143) (2024-05-23)
133
+
134
+ **Note:** Version bump only for package @operato/attribute
135
+
136
+
137
+
138
+
139
+
140
+ ## [2.0.0-alpha.142](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.141...v2.0.0-alpha.142) (2024-05-21)
141
+
142
+ **Note:** Version bump only for package @operato/attribute
143
+
144
+
145
+
146
+
147
+
148
+ ## [2.0.0-alpha.141](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.140...v2.0.0-alpha.141) (2024-05-17)
149
+
150
+ **Note:** Version bump only for package @operato/attribute
151
+
152
+
153
+
154
+
155
+
156
+ ## [2.0.0-alpha.140](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.139...v2.0.0-alpha.140) (2024-05-17)
157
+
158
+ **Note:** Version bump only for package @operato/attribute
159
+
160
+
161
+
162
+
163
+
164
+ ## [2.0.0-alpha.139](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.138...v2.0.0-alpha.139) (2024-05-16)
165
+
166
+ **Note:** Version bump only for package @operato/attribute
167
+
168
+
169
+
170
+
171
+
172
+ ## [2.0.0-alpha.138](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.137...v2.0.0-alpha.138) (2024-05-15)
173
+
174
+ **Note:** Version bump only for package @operato/attribute
175
+
176
+
177
+
178
+
179
+
180
+ ## [2.0.0-alpha.137](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.136...v2.0.0-alpha.137) (2024-05-15)
181
+
182
+ **Note:** Version bump only for package @operato/attribute
183
+
184
+
185
+
186
+
187
+
188
+ ## [2.0.0-alpha.136](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.135...v2.0.0-alpha.136) (2024-05-14)
189
+
190
+ **Note:** Version bump only for package @operato/attribute
191
+
192
+
193
+
194
+
195
+
196
+ ## [2.0.0-alpha.134](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.133...v2.0.0-alpha.134) (2024-05-13)
197
+
198
+ **Note:** Version bump only for package @operato/attribute
199
+
200
+
201
+
202
+
203
+
204
+ ## [2.0.0-alpha.133](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.132...v2.0.0-alpha.133) (2024-05-12)
205
+
206
+ **Note:** Version bump only for package @operato/attribute
207
+
208
+
209
+
210
+
211
+
212
+ ## [2.0.0-alpha.132](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.131...v2.0.0-alpha.132) (2024-05-11)
213
+
214
+ **Note:** Version bump only for package @operato/attribute
215
+
216
+
217
+
218
+
219
+
220
+ ## [2.0.0-alpha.131](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.130...v2.0.0-alpha.131) (2024-05-11)
221
+
222
+ **Note:** Version bump only for package @operato/attribute
223
+
224
+
225
+
226
+
227
+
228
+ ## [2.0.0-alpha.129](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.128...v2.0.0-alpha.129) (2024-05-08)
229
+
230
+ **Note:** Version bump only for package @operato/attribute
231
+
232
+
233
+
234
+
235
+
236
+ ## [2.0.0-alpha.124](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.123...v2.0.0-alpha.124) (2024-05-08)
237
+
238
+ **Note:** Version bump only for package @operato/attribute
239
+
240
+
241
+
242
+
243
+
244
+ ## [2.0.0-alpha.123](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.122...v2.0.0-alpha.123) (2024-05-07)
245
+
246
+ **Note:** Version bump only for package @operato/attribute
247
+
248
+
249
+
250
+
251
+
252
+ ## [2.0.0-alpha.122](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.121...v2.0.0-alpha.122) (2024-05-06)
253
+
254
+ **Note:** Version bump only for package @operato/attribute
255
+
256
+
257
+
258
+
259
+
260
+ ## [2.0.0-alpha.121](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.120...v2.0.0-alpha.121) (2024-05-05)
261
+
262
+ **Note:** Version bump only for package @operato/attribute
263
+
264
+
265
+
266
+
267
+
268
+ ## [2.0.0-alpha.120](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.119...v2.0.0-alpha.120) (2024-05-05)
269
+
270
+ **Note:** Version bump only for package @operato/attribute
271
+
272
+
273
+
274
+
275
+
276
+ ## [2.0.0-alpha.119](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.118...v2.0.0-alpha.119) (2024-05-04)
277
+
278
+ **Note:** Version bump only for package @operato/attribute
279
+
280
+
281
+
282
+
283
+
284
+ ## [2.0.0-alpha.118](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.117...v2.0.0-alpha.118) (2024-05-04)
285
+
286
+ **Note:** Version bump only for package @operato/attribute
287
+
288
+
289
+
290
+
291
+
292
+ ## [2.0.0-alpha.117](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.116...v2.0.0-alpha.117) (2024-05-04)
293
+
294
+ **Note:** Version bump only for package @operato/attribute
295
+
296
+
297
+
298
+
299
+
300
+ ## [2.0.0-alpha.116](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.115...v2.0.0-alpha.116) (2024-05-04)
301
+
302
+ **Note:** Version bump only for package @operato/attribute
303
+
304
+
305
+
306
+
307
+
308
+ ## [2.0.0-alpha.115](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.114...v2.0.0-alpha.115) (2024-05-04)
309
+
310
+ **Note:** Version bump only for package @operato/attribute
311
+
312
+
313
+
314
+
315
+
316
+ ## [2.0.0-alpha.114](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.113...v2.0.0-alpha.114) (2024-05-04)
317
+
318
+ **Note:** Version bump only for package @operato/attribute
319
+
320
+
321
+
322
+
323
+
324
+ ## [2.0.0-alpha.112](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.111...v2.0.0-alpha.112) (2024-05-02)
325
+
326
+ **Note:** Version bump only for package @operato/attribute
327
+
328
+
329
+
330
+
331
+
332
+ ## [2.0.0-alpha.111](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.110...v2.0.0-alpha.111) (2024-05-02)
333
+
334
+ **Note:** Version bump only for package @operato/attribute
335
+
336
+
337
+
338
+
339
+
340
+ ## [2.0.0-alpha.110](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.109...v2.0.0-alpha.110) (2024-05-02)
341
+
342
+ **Note:** Version bump only for package @operato/attribute
343
+
344
+
345
+
346
+
347
+
348
+ ## [2.0.0-alpha.109](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.108...v2.0.0-alpha.109) (2024-05-02)
349
+
350
+ **Note:** Version bump only for package @operato/attribute
351
+
352
+
353
+
354
+
355
+
356
+ ## [2.0.0-alpha.108](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.107...v2.0.0-alpha.108) (2024-05-02)
357
+
358
+ **Note:** Version bump only for package @operato/attribute
359
+
360
+
361
+
362
+
363
+
364
+ ## [2.0.0-alpha.107](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.106...v2.0.0-alpha.107) (2024-05-01)
365
+
366
+ **Note:** Version bump only for package @operato/attribute
367
+
368
+
369
+
370
+
371
+
372
+ ## [2.0.0-alpha.106](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.105...v2.0.0-alpha.106) (2024-04-26)
373
+
374
+ **Note:** Version bump only for package @operato/attribute
375
+
376
+
377
+
378
+
379
+
380
+ ## [2.0.0-alpha.105](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.104...v2.0.0-alpha.105) (2024-04-26)
381
+
382
+ **Note:** Version bump only for package @operato/attribute
383
+
384
+
385
+
386
+
387
+
388
+ ## [2.0.0-alpha.104](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.103...v2.0.0-alpha.104) (2024-04-26)
389
+
390
+ **Note:** Version bump only for package @operato/attribute
391
+
392
+
393
+
394
+
395
+
396
+ ## [2.0.0-alpha.103](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.102...v2.0.0-alpha.103) (2024-04-26)
397
+
398
+ **Note:** Version bump only for package @operato/attribute
399
+
400
+
401
+
402
+
403
+
404
+ ## [2.0.0-alpha.102](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.101...v2.0.0-alpha.102) (2024-04-22)
405
+
406
+ **Note:** Version bump only for package @operato/attribute
407
+
408
+
409
+
410
+
411
+
412
+ ## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
413
+
414
+ **Note:** Version bump only for package @operato/attribute
415
+
416
+
417
+
418
+
419
+
6
420
  ## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
7
421
 
8
422
  **Note:** Version bump only for package @operato/attribute
@@ -52,7 +52,7 @@ OxPopupAttributes.styles = [
52
52
  display: flex;
53
53
  flex-direction: column;
54
54
 
55
- background-color: #fff;
55
+ background-color: var(--md-sys-color-surface);
56
56
 
57
57
  width: var(--overlay-center-normal-width, 50%);
58
58
  height: var(--overlay-center-normal-height, 50%);
@@ -71,7 +71,7 @@ OxPopupAttributes.styles = [
71
71
  align-items: center;
72
72
  justify-content: center;
73
73
 
74
- color: var(--primary-color);
74
+ color: var(--md-sys-color-on-primary-container);
75
75
  }
76
76
  `
77
77
  ];
@@ -1 +1 @@
1
- {"version":3,"file":"ox-popup-attributes.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-attributes.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAKjE,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAqC/C,MAAM;QACJ,IAAI,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAA;QAE1C,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,kBAAkB,YAAY,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;yBAIrF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;qCACZ,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;yBAEtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEnG,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA5EM,wBAAM,GAAG;IACd,qBAAqB;IACrB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BF;CACF,AA9BY,CA8BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAwC;AAnCxD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA8E7B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../ox-attribute-form.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from '../types.js'\n\n@customElement('ox-popup-attributes')\nexport class OxPopupAttributes extends LitElement {\n static styles = [\n ButtonContainerStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: #fff;\n\n width: var(--overlay-center-normal-width, 50%);\n height: var(--overlay-center-normal-height, 50%);\n }\n\n ox-attribute-form {\n flex: 1;\n overflow-y: auto;\n padding: var(--padding-wide);\n }\n\n span {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--primary-color);\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: Object }) attributeSet?: AttributeSet\n @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n render() {\n var attributeSet = this.attributeSet || {}\n\n return html`\n <ox-attribute-form .value=${this.value} .attributeSet=${attributeSet} @change=${this.onChange.bind(this)}>\n </ox-attribute-form>\n\n <div class=\"button-container\">\n <button @click=${this.onCancel.bind(this)} danger>\n <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n </button>\n <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>\n </div>\n `\n }\n\n private onChange(e: CustomEvent) {\n e.stopPropagation()\n\n /* \n 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n layout의 구성에 변화가 발생하면, 다시 render된다.\n 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n => \n 이런 이유로, Object.assign(...)을 사용하였다.\n */\n this.value = e.detail\n }\n\n private onCancel(e: Event) {\n closePopup(this)\n }\n\n private onConfirm(e: Event) {\n this.confirmCallback && this.confirmCallback(this.value)\n closePopup(this)\n }\n}\n"]}
1
+ {"version":3,"file":"ox-popup-attributes.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-attributes.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAKjE,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAqC/C,MAAM;QACJ,IAAI,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAA;QAE1C,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,kBAAkB,YAAY,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;yBAIrF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;qCACZ,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;yBAEtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEnG,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA5EM,wBAAM,GAAG;IACd,qBAAqB;IACrB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BF;CACF,AA9BY,CA8BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAwC;AAnCxD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA8E7B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../ox-attribute-form.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from '../types.js'\n\n@customElement('ox-popup-attributes')\nexport class OxPopupAttributes extends LitElement {\n static styles = [\n ButtonContainerStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n\n width: var(--overlay-center-normal-width, 50%);\n height: var(--overlay-center-normal-height, 50%);\n }\n\n ox-attribute-form {\n flex: 1;\n overflow-y: auto;\n padding: var(--padding-wide);\n }\n\n span {\n flex: 1;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n color: var(--md-sys-color-on-primary-container);\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: Object }) attributeSet?: AttributeSet\n @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n render() {\n var attributeSet = this.attributeSet || {}\n\n return html`\n <ox-attribute-form .value=${this.value} .attributeSet=${attributeSet} @change=${this.onChange.bind(this)}>\n </ox-attribute-form>\n\n <div class=\"button-container\">\n <button @click=${this.onCancel.bind(this)} danger>\n <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n </button>\n <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>\n </div>\n `\n }\n\n private onChange(e: CustomEvent) {\n e.stopPropagation()\n\n /* \n 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n layout의 구성에 변화가 발생하면, 다시 render된다.\n 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n => \n 이런 이유로, Object.assign(...)을 사용하였다.\n */\n this.value = e.detail\n }\n\n private onCancel(e: Event) {\n closePopup(this)\n }\n\n private onConfirm(e: Event) {\n this.confirmCallback && this.confirmCallback(this.value)\n closePopup(this)\n }\n}\n"]}
@@ -58,7 +58,7 @@ let OxAttributeForm = class OxAttributeForm extends LitElement {
58
58
  }
59
59
  return html ` <label .title=${description}>
60
60
  <div name>${name}</div>
61
- <div description><md-icon>info_outline</md-icon> ${description}</div>
61
+ <div description><md-icon>info</md-icon> ${description}</div>
62
62
  <div elements>${element}</div>
63
63
  </label>`;
64
64
  });
@@ -113,11 +113,11 @@ OxAttributeForm.styles = css `
113
113
 
114
114
  grid-gap: 9px;
115
115
  align-items: center;
116
- margin-bottom: var(--margin-default);
116
+ margin-bottom: var(--spacing-medium);
117
117
  }
118
118
 
119
119
  label:nth-child(odd) {
120
- background-color: var(--main-section-background-color);
120
+ background-color: var(--md-sys-color-background);
121
121
  padding: var(--padding-default) 0;
122
122
  }
123
123
 
@@ -176,7 +176,7 @@ OxAttributeForm.styles = css `
176
176
 
177
177
  grid-gap: 9px;
178
178
  align-items: center;
179
- margin-bottom: var(--margin-default);
179
+ margin-bottom: var(--spacing-medium);
180
180
  }
181
181
 
182
182
  div[name] {
@@ -1 +1 @@
1
- {"version":3,"file":"ox-attribute-form.js","sourceRoot":"","sources":["../../src/ox-attribute-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-form')\nexport class OxAttributeForm extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: row;\n --item-description-font: normal 0.8rem/1rem var(--theme-font);\n --item-description-color: var(--page-description-color);\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n text-transform: capitalize;\n text-align: center;\n }\n\n h3 {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n text-transform: capitalize;\n text-align: center;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n\n label {\n display: grid;\n\n grid-template-rows: auto 1fr;\n grid-template-columns: 1fr 5fr;\n grid-template-areas: 'name description' 'empty inputs';\n\n grid-gap: 9px;\n align-items: center;\n margin-bottom: var(--margin-default);\n }\n\n label:nth-child(odd) {\n background-color: var(--main-section-background-color);\n padding: var(--padding-default) 0;\n }\n\n div[name] {\n grid-area: name;\n font: var(--label-font);\n color: var(--label-color);\n text-align: right;\n }\n\n div[description] {\n grid-area: description;\n opacity: 0.7;\n font: var(--item-description-font);\n color: var(--item-description-color);\n text-align: left;\n }\n\n div[description] * {\n vertical-align: middle;\n }\n\n div[description] md-icon {\n margin-top: -3px;\n font-size: 0.9rem;\n }\n\n div[elements] {\n grid-area: inputs;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n padding-right: var(--padding-default);\n }\n\n div[elements] * {\n flex: 1;\n }\n\n div[elements] input,\n div[elements] select {\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n @media only screen and (max-width: 460px) {\n label {\n display: grid;\n\n grid-template-rows: auto auto 1fr;\n grid-template-columns: 1fr;\n grid-template-areas: 'name' 'description' 'inputs';\n\n grid-gap: 9px;\n align-items: center;\n margin-bottom: var(--margin-default);\n }\n\n div[name] {\n text-align: left;\n }\n }\n `\n\n @property({ type: Object }) attributeSet?: AttributeSet\n @property({ type: Object }) value?: { [tag: string]: any }\n\n render() {\n return html` <form @change=${(e: Event) => this.onChange(e)}>\n <h2>${this.attributeSet?.entity || ''}</h2>\n <h3>${this.attributeSet?.description || ''}</h3>\n ${this.buildInputs()}\n </form>`\n }\n\n private onChange(e: Event) {\n this.value = this.buildValue()\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n private buildInputs() {\n const items = (this.attributeSet?.items || []).filter(item => item.active)\n\n return (items || []).map(item => {\n const { name, description, tag, type, options = {} } = item\n\n const value = this.value && this.value[tag]\n\n switch (type) {\n case 'select':\n var element = html` <select .name=${tag}>\n <option value=\"\"></option>\n ${(options.options || []).map(\n option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n )}\n </select>`\n break\n\n case 'boolean':\n var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} />`\n break\n\n case 'number':\n var element = html` <input type=\"number\" name=${tag} value=${value} />`\n break\n\n case 'date':\n var element = html` <input type=\"date\" name=${tag} value=${value} />`\n break\n\n case 'datetime':\n var element = html` <input type=\"datetime-local\" name=${tag} value=${value} />`\n break\n\n case 'file':\n var element = html`<ox-input-file\n name=${tag}\n label=\"Attach Files\"\n accept=\"*/*\"\n multiple=\"true\"\n hide-filelist\n ></ox-input-file>`\n\n case 'string':\n default:\n var element = html` <input type=\"text\" name=${tag} value=${value} />`\n }\n\n return html` <label .title=${description}>\n <div name>${name}</div>\n <div description><md-icon>info_outline</md-icon> ${description}</div>\n <div elements>${element}</div>\n </label>`\n })\n }\n\n private buildValue() {\n const items = this.attributeSet!.items\n\n return (items || []).reduce(\n (sum, item) => {\n const { tag, type } = item\n\n const editor = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement\n\n sum[tag] = type === 'boolean' ? editor.checked : editor.value\n\n return sum\n },\n {} as { [tag: string]: any }\n )\n }\n}\n"]}
1
+ {"version":3,"file":"ox-attribute-form.js","sourceRoot":"","sources":["../../src/ox-attribute-form.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAoH7C,MAAM;;QACJ,OAAO,IAAI,CAAA,kBAAkB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,KAAI,EAAE;YAC/B,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,WAAW,KAAI,EAAE;QACxC,IAAI,CAAC,WAAW,EAAE;YACd,CAAA;IACV,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAEO,WAAW;;QACjB,MAAM,KAAK,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAE1E,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9B,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAA;YAE3D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE3C,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,QAAQ;oBACX,IAAI,OAAO,GAAG,IAAI,CAAA,kBAAkB,GAAG;;cAEnC,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,MAAM,CAAC,KAAK,cAAc,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,MAAM,CAAC,IAAI,WAAW,CAC1G;oBACO,CAAA;oBACV,MAAK;gBAEP,KAAK,SAAS;oBACZ,IAAI,OAAO,GAAG,IAAI,CAAA,gCAAgC,GAAG,aAAa,KAAK,KAAK,CAAA;oBAC5E,MAAK;gBAEP,KAAK,QAAQ;oBACX,IAAI,OAAO,GAAG,IAAI,CAAA,8BAA8B,GAAG,UAAU,KAAK,KAAK,CAAA;oBACvE,MAAK;gBAEP,KAAK,MAAM;oBACT,IAAI,OAAO,GAAG,IAAI,CAAA,4BAA4B,GAAG,UAAU,KAAK,KAAK,CAAA;oBACrE,MAAK;gBAEP,KAAK,UAAU;oBACb,IAAI,OAAO,GAAG,IAAI,CAAA,sCAAsC,GAAG,UAAU,KAAK,KAAK,CAAA;oBAC/E,MAAK;gBAEP,KAAK,MAAM;oBACT,IAAI,OAAO,GAAG,IAAI,CAAA;mBACT,GAAG;;;;;4BAKM,CAAA;gBAEpB,KAAK,QAAQ,CAAC;gBACd;oBACE,IAAI,OAAO,GAAG,IAAI,CAAA,4BAA4B,GAAG,UAAU,KAAK,KAAK,CAAA;YACzE,CAAC;YAED,OAAO,IAAI,CAAA,kBAAkB,WAAW;oBAC1B,IAAI;mDAC2B,WAAW;wBACtC,OAAO;eAChB,CAAA;QACX,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,UAAU;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAa,CAAC,KAAK,CAAA;QAEtC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CACzB,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;YACZ,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;YAE1B,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,GAAG,GAAG,CAAqB,CAAA;YAEjF,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YAE7D,OAAO,GAAG,CAAA;QACZ,CAAC,EACD,EAA4B,CAC7B,CAAA;IACH,CAAC;;AA9MM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8GlB,AA9GY,CA8GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA+B;AAlH/C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAgN3B","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-form')\nexport class OxAttributeForm extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: row;\n --item-description-font: normal 0.8rem/1rem var(--theme-font);\n --item-description-color: var(--page-description-color);\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n text-transform: capitalize;\n text-align: center;\n }\n\n h3 {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n text-transform: capitalize;\n text-align: center;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n\n label {\n display: grid;\n\n grid-template-rows: auto 1fr;\n grid-template-columns: 1fr 5fr;\n grid-template-areas: 'name description' 'empty inputs';\n\n grid-gap: 9px;\n align-items: center;\n margin-bottom: var(--spacing-medium);\n }\n\n label:nth-child(odd) {\n background-color: var(--md-sys-color-background);\n padding: var(--padding-default) 0;\n }\n\n div[name] {\n grid-area: name;\n font: var(--label-font);\n color: var(--label-color);\n text-align: right;\n }\n\n div[description] {\n grid-area: description;\n opacity: 0.7;\n font: var(--item-description-font);\n color: var(--item-description-color);\n text-align: left;\n }\n\n div[description] * {\n vertical-align: middle;\n }\n\n div[description] md-icon {\n margin-top: -3px;\n font-size: 0.9rem;\n }\n\n div[elements] {\n grid-area: inputs;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n padding-right: var(--padding-default);\n }\n\n div[elements] * {\n flex: 1;\n }\n\n div[elements] input,\n div[elements] select {\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n @media only screen and (max-width: 460px) {\n label {\n display: grid;\n\n grid-template-rows: auto auto 1fr;\n grid-template-columns: 1fr;\n grid-template-areas: 'name' 'description' 'inputs';\n\n grid-gap: 9px;\n align-items: center;\n margin-bottom: var(--spacing-medium);\n }\n\n div[name] {\n text-align: left;\n }\n }\n `\n\n @property({ type: Object }) attributeSet?: AttributeSet\n @property({ type: Object }) value?: { [tag: string]: any }\n\n render() {\n return html` <form @change=${(e: Event) => this.onChange(e)}>\n <h2>${this.attributeSet?.entity || ''}</h2>\n <h3>${this.attributeSet?.description || ''}</h3>\n ${this.buildInputs()}\n </form>`\n }\n\n private onChange(e: Event) {\n this.value = this.buildValue()\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n private buildInputs() {\n const items = (this.attributeSet?.items || []).filter(item => item.active)\n\n return (items || []).map(item => {\n const { name, description, tag, type, options = {} } = item\n\n const value = this.value && this.value[tag]\n\n switch (type) {\n case 'select':\n var element = html` <select .name=${tag}>\n <option value=\"\"></option>\n ${(options.options || []).map(\n option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n )}\n </select>`\n break\n\n case 'boolean':\n var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} />`\n break\n\n case 'number':\n var element = html` <input type=\"number\" name=${tag} value=${value} />`\n break\n\n case 'date':\n var element = html` <input type=\"date\" name=${tag} value=${value} />`\n break\n\n case 'datetime':\n var element = html` <input type=\"datetime-local\" name=${tag} value=${value} />`\n break\n\n case 'file':\n var element = html`<ox-input-file\n name=${tag}\n label=\"Attach Files\"\n accept=\"*/*\"\n multiple=\"true\"\n hide-filelist\n ></ox-input-file>`\n\n case 'string':\n default:\n var element = html` <input type=\"text\" name=${tag} value=${value} />`\n }\n\n return html` <label .title=${description}>\n <div name>${name}</div>\n <div description><md-icon>info</md-icon> ${description}</div>\n <div elements>${element}</div>\n </label>`\n })\n }\n\n private buildValue() {\n const items = this.attributeSet!.items\n\n return (items || []).reduce(\n (sum, item) => {\n const { tag, type } = item\n\n const editor = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement\n\n sum[tag] = type === 'boolean' ? editor.checked : editor.value\n\n return sum\n },\n {} as { [tag: string]: any }\n )\n }\n}\n"]}
@@ -46,7 +46,7 @@ let OxAttributeView = class OxAttributeView extends LitElement {
46
46
  }
47
47
  return html ` <label .title=${description}>
48
48
  <div name>${name}</div>
49
- <div description><md-icon>info_outline</md-icon> ${description}</div>
49
+ <div description><md-icon>info</md-icon> ${description}</div>
50
50
  <div elements>${element}</div>
51
51
  </label>`;
52
52
  });
@@ -98,11 +98,11 @@ OxAttributeView.styles = [
98
98
 
99
99
  grid-gap: 9px;
100
100
  align-items: center;
101
- margin-bottom: var(--margin-default);
101
+ margin-bottom: var(--spacing-medium);
102
102
  }
103
103
 
104
104
  label:nth-child(odd) {
105
- background-color: var(--main-section-background-color);
105
+ background-color: var(--md-sys-color-background);
106
106
  padding: var(--padding-default) 0;
107
107
  }
108
108
 
@@ -161,7 +161,7 @@ OxAttributeView.styles = [
161
161
 
162
162
  grid-gap: 9px;
163
163
  align-items: center;
164
- margin-bottom: var(--margin-default);
164
+ margin-bottom: var(--spacing-medium);
165
165
  }
166
166
 
167
167
  div[name] {
@@ -1 +1 @@
1
- {"version":3,"file":"ox-attribute-view.js","sourceRoot":"","sources":["../../src/ox-attribute-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAK1C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IA2H7C,MAAM;;QACJ,OAAO,IAAI,CAAA;YACH,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,KAAI,EAAE;YAC/B,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,WAAW,KAAI,EAAE;QACxC,IAAI,CAAC,eAAe,EAAE;aACjB,CAAA;IACX,CAAC;IAEO,eAAe;;QACrB,MAAM,KAAK,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAE1E,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9B,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAA;YAE3D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE3C,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,QAAQ;oBACX,IAAI,OAAO,GAAG,IAAI,CAAA,kBAAkB,GAAG;;cAEnC,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,MAAM,CAAC,KAAK,cAAc,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,MAAM,CAAC,IAAI,WAAW,CAC1G;oBACO,CAAA;oBACV,MAAK;gBAEP,KAAK,SAAS;oBACZ,IAAI,OAAO,GAAG,IAAI,CAAA,gCAAgC,GAAG,aAAa,KAAK,cAAc,CAAA;oBACrF,MAAK;gBAEP,KAAK,QAAQ;oBACX,IAAI,OAAO,GAAG,IAAI,CAAA,8BAA8B,GAAG,UAAU,KAAK,cAAc,CAAA;oBAChF,MAAK;gBAEP,KAAK,MAAM;oBACT,IAAI,OAAO,GAAG,IAAI,CAAA;mBACT,GAAG;;;;;;4BAMM,CAAA;gBAEpB,KAAK,QAAQ,CAAC;gBACd;oBACE,IAAI,OAAO,GAAG,IAAI,CAAA,4BAA4B,GAAG,UAAU,KAAK,cAAc,CAAA;YAClF,CAAC;YAED,OAAO,IAAI,CAAA,kBAAkB,WAAW;oBAC1B,IAAI;2DACmC,WAAW;wBAC9C,OAAO;eAChB,CAAA;QACX,CAAC,CAAC,CAAA;IACJ,CAAC;;AAjLM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkHF;CACF,AArHY,CAqHZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA+B;AAzH/C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAmL3B","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-view')\nexport class OxAttributeView extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: row;\n\n --item-description-font: normal 0.8rem/1rem var(--theme-font);\n --item-description-color: var(--page-description-color);\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n text-transform: capitalize;\n text-align: center;\n }\n\n h3 {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n text-transform: capitalize;\n text-align: center;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n\n overflow-y: auto;\n padding: var(--padding-default);\n }\n\n label {\n display: grid;\n\n grid-template-rows: auto 1fr;\n grid-template-columns: 1fr 5fr;\n grid-template-areas: 'name description' 'empty inputs';\n\n grid-gap: 9px;\n align-items: center;\n margin-bottom: var(--margin-default);\n }\n\n label:nth-child(odd) {\n background-color: var(--main-section-background-color);\n padding: var(--padding-default) 0;\n }\n\n div[name] {\n grid-area: name;\n font: var(--label-font);\n color: var(--label-color);\n text-align: right;\n }\n\n div[description] {\n grid-area: description;\n opacity: 0.7;\n font: var(--item-description-font);\n color: var(--item-description-color);\n text-align: left;\n }\n\n div[description] * {\n vertical-align: middle;\n }\n\n div[description] md-icon {\n margin-top: -3px;\n font-size: 0.9rem;\n }\n\n div[elements] {\n grid-area: inputs;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n padding-right: var(--padding-default);\n }\n\n div[elements] * {\n flex: 1;\n }\n\n div[elements] input,\n div[elements] select {\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n @media only screen and (max-width: 460px) {\n label {\n display: grid;\n\n grid-template-rows: auto auto 1fr;\n grid-template-columns: 1fr;\n grid-template-areas: 'name' 'description' 'inputs';\n\n grid-gap: 9px;\n align-items: center;\n margin-bottom: var(--margin-default);\n }\n\n div[name] {\n text-align: left;\n }\n }\n `\n ]\n\n @property({ type: Object }) attributeSet?: AttributeSet\n @property({ type: Object }) value?: { [tag: string]: any }\n\n render() {\n return html`<form>\n <h2>${this.attributeSet?.entity || ''}</h2>\n <h3>${this.attributeSet?.description || ''}</h3>\n ${this.buildEntryViews()}\n </form> `\n }\n\n private buildEntryViews() {\n const items = (this.attributeSet?.items || []).filter(item => item.active)\n\n return (items || []).map(item => {\n const { name, description, tag, type, options = {} } = item\n\n const value = this.value && this.value[tag]\n\n switch (type) {\n case 'select':\n var element = html` <select .name=${tag} disabled>\n <option value=\"\"></option>\n ${(options.options || []).map(\n option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n )}\n </select>`\n break\n\n case 'boolean':\n var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} disabled />`\n break\n\n case 'number':\n var element = html` <input type=\"number\" name=${tag} value=${value} disabled />`\n break\n\n case 'file':\n var element = html`<ox-input-file\n name=${tag}\n label=\"Attach Files\"\n accept=\"*/*\"\n multiple=\"true\"\n hide-filelist\n disabled\n ></ox-input-file>`\n\n case 'string':\n default:\n var element = html` <input type=\"text\" name=${tag} value=${value} disabled />`\n }\n\n return html` <label .title=${description}>\n <div name>${name}</div>\n <div description><md-icon>info_outline</md-icon> ${description}</div>\n <div elements>${element}</div>\n </label>`\n })\n }\n}\n"]}
1
+ {"version":3,"file":"ox-attribute-view.js","sourceRoot":"","sources":["../../src/ox-attribute-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAK1C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IA2H7C,MAAM;;QACJ,OAAO,IAAI,CAAA;YACH,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,KAAI,EAAE;YAC/B,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,WAAW,KAAI,EAAE;QACxC,IAAI,CAAC,eAAe,EAAE;aACjB,CAAA;IACX,CAAC;IAEO,eAAe;;QACrB,MAAM,KAAK,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAE1E,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9B,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAA;YAE3D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAE3C,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,QAAQ;oBACX,IAAI,OAAO,GAAG,IAAI,CAAA,kBAAkB,GAAG;;cAEnC,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,MAAM,CAAC,KAAK,cAAc,MAAM,CAAC,KAAK,KAAK,KAAK,IAAI,MAAM,CAAC,IAAI,WAAW,CAC1G;oBACO,CAAA;oBACV,MAAK;gBAEP,KAAK,SAAS;oBACZ,IAAI,OAAO,GAAG,IAAI,CAAA,gCAAgC,GAAG,aAAa,KAAK,cAAc,CAAA;oBACrF,MAAK;gBAEP,KAAK,QAAQ;oBACX,IAAI,OAAO,GAAG,IAAI,CAAA,8BAA8B,GAAG,UAAU,KAAK,cAAc,CAAA;oBAChF,MAAK;gBAEP,KAAK,MAAM;oBACT,IAAI,OAAO,GAAG,IAAI,CAAA;mBACT,GAAG;;;;;;4BAMM,CAAA;gBAEpB,KAAK,QAAQ,CAAC;gBACd;oBACE,IAAI,OAAO,GAAG,IAAI,CAAA,4BAA4B,GAAG,UAAU,KAAK,cAAc,CAAA;YAClF,CAAC;YAED,OAAO,IAAI,CAAA,kBAAkB,WAAW;oBAC1B,IAAI;mDAC2B,WAAW;wBACtC,OAAO;eAChB,CAAA;QACX,CAAC,CAAC,CAAA;IACJ,CAAC;;AAjLM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkHF;CACF,AArHY,CAqHZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA+B;AAzH/C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAmL3B","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-view')\nexport class OxAttributeView extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: row;\n\n --item-description-font: normal 0.8rem/1rem var(--theme-font);\n --item-description-color: var(--page-description-color);\n }\n\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n text-transform: capitalize;\n text-align: center;\n }\n\n h3 {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n text-transform: capitalize;\n text-align: center;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n\n overflow-y: auto;\n padding: var(--padding-default);\n }\n\n label {\n display: grid;\n\n grid-template-rows: auto 1fr;\n grid-template-columns: 1fr 5fr;\n grid-template-areas: 'name description' 'empty inputs';\n\n grid-gap: 9px;\n align-items: center;\n margin-bottom: var(--spacing-medium);\n }\n\n label:nth-child(odd) {\n background-color: var(--md-sys-color-background);\n padding: var(--padding-default) 0;\n }\n\n div[name] {\n grid-area: name;\n font: var(--label-font);\n color: var(--label-color);\n text-align: right;\n }\n\n div[description] {\n grid-area: description;\n opacity: 0.7;\n font: var(--item-description-font);\n color: var(--item-description-color);\n text-align: left;\n }\n\n div[description] * {\n vertical-align: middle;\n }\n\n div[description] md-icon {\n margin-top: -3px;\n font-size: 0.9rem;\n }\n\n div[elements] {\n grid-area: inputs;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n padding-right: var(--padding-default);\n }\n\n div[elements] * {\n flex: 1;\n }\n\n div[elements] input,\n div[elements] select {\n border: var(--input-field-border);\n border-radius: var(--input-field-border-radius);\n padding: var(--input-field-padding);\n font: var(--input-field-font);\n }\n\n @media only screen and (max-width: 460px) {\n label {\n display: grid;\n\n grid-template-rows: auto auto 1fr;\n grid-template-columns: 1fr;\n grid-template-areas: 'name' 'description' 'inputs';\n\n grid-gap: 9px;\n align-items: center;\n margin-bottom: var(--spacing-medium);\n }\n\n div[name] {\n text-align: left;\n }\n }\n `\n ]\n\n @property({ type: Object }) attributeSet?: AttributeSet\n @property({ type: Object }) value?: { [tag: string]: any }\n\n render() {\n return html`<form>\n <h2>${this.attributeSet?.entity || ''}</h2>\n <h3>${this.attributeSet?.description || ''}</h3>\n ${this.buildEntryViews()}\n </form> `\n }\n\n private buildEntryViews() {\n const items = (this.attributeSet?.items || []).filter(item => item.active)\n\n return (items || []).map(item => {\n const { name, description, tag, type, options = {} } = item\n\n const value = this.value && this.value[tag]\n\n switch (type) {\n case 'select':\n var element = html` <select .name=${tag} disabled>\n <option value=\"\"></option>\n ${(options.options || []).map(\n option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n )}\n </select>`\n break\n\n case 'boolean':\n var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} disabled />`\n break\n\n case 'number':\n var element = html` <input type=\"number\" name=${tag} value=${value} disabled />`\n break\n\n case 'file':\n var element = html`<ox-input-file\n name=${tag}\n label=\"Attach Files\"\n accept=\"*/*\"\n multiple=\"true\"\n hide-filelist\n disabled\n ></ox-input-file>`\n\n case 'string':\n default:\n var element = html` <input type=\"text\" name=${tag} value=${value} disabled />`\n }\n\n return html` <label .title=${description}>\n <div name>${name}</div>\n <div description><md-icon>info</md-icon> ${description}</div>\n <div elements>${element}</div>\n </label>`\n })\n }\n}\n"]}
@@ -223,7 +223,7 @@ GristDemo.styles = [
223
223
  #tailer {
224
224
  display: flex;
225
225
  flex-direction: row;
226
- margin: 0 var(--margin-default);
226
+ margin: 0 var(--spacing-medium);
227
227
  }
228
228
 
229
229
  #tailer a {
@@ -231,7 +231,7 @@ GristDemo.styles = [
231
231
  margin: 0 var(--margin-narrow);
232
232
  border-right: 1px solid rgba(0, 0, 0, 0.1);
233
233
  font-size: var(--fontsize-default);
234
- color: var(--primary-color);
234
+ color: var(--md-sys-color-on-primary-container);
235
235
  }
236
236
  `
237
237
  ];
@@ -268,7 +268,7 @@ const Template = ({}) => html `
268
268
  flex-direction: row;
269
269
  align-items: center;
270
270
  padding: var(--padding-default) var(--padding-wide);
271
- background-color: var(--theme-white-color);
271
+ background-color: var(--md-sys-color-surface);
272
272
  box-shadow: var(--box-shadow);
273
273
 
274
274
  --md-icon-size: 24px;
@@ -279,11 +279,11 @@ const Template = ({}) => html `
279
279
  }
280
280
  #sorters {
281
281
  margin-left: auto;
282
- margin-right: var(--margin-default);
282
+ margin-right: var(--spacing-medium);
283
283
  padding-left: var(--padding-narrow);
284
284
  border-bottom: var(--border-dark-color);
285
285
  position: relative;
286
- color: var(--secondary-color);
286
+ color: var(--md-sys-color-on-secondary-container);
287
287
  font-size: var(--fontsize-default);
288
288
  user-select: none;
289
289
  }
@@ -300,7 +300,7 @@ const Template = ({}) => html `
300
300
  }
301
301
 
302
302
  #filters * {
303
- margin-right: var(--margin-default);
303
+ margin-right: var(--spacing-medium);
304
304
  }
305
305
 
306
306
  @media only screen and (max-width: 460px) {