@things-factory/meta-ui 7.0.1-alpha.99 → 7.0.1-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.
Files changed (31) hide show
  1. package/client/component/popup/code-input-editor-popup.js +4 -2
  2. package/client/component/popup/file-upload-popup.js +4 -2
  3. package/client/component/popup/meta-object-selector-popup.ts +1 -1
  4. package/client/component/popup/record-based-code-editor-popup.ts +1 -1
  5. package/client/pages/activity/meta-activiy-mixin.js +61 -60
  6. package/client/pages/entity/main-menu-selector.js +2 -2
  7. package/client/pages/menu/dynamic-menu-template.js +1 -1
  8. package/client/pages/menu/export-menu-popup.js +1 -1
  9. package/client/utils/meta-ui-util.js +23 -23
  10. package/dist-client/component/popup/code-input-editor-popup.js +4 -2
  11. package/dist-client/component/popup/code-input-editor-popup.js.map +1 -1
  12. package/dist-client/component/popup/file-upload-popup.js +4 -2
  13. package/dist-client/component/popup/file-upload-popup.js.map +1 -1
  14. package/dist-client/component/popup/meta-object-selector-popup.js +1 -1
  15. package/dist-client/component/popup/meta-object-selector-popup.js.map +1 -1
  16. package/dist-client/component/popup/record-based-code-editor-popup.js +1 -1
  17. package/dist-client/component/popup/record-based-code-editor-popup.js.map +1 -1
  18. package/dist-client/pages/activity/meta-activiy-mixin.js +16 -16
  19. package/dist-client/pages/activity/meta-activiy-mixin.js.map +1 -1
  20. package/dist-client/pages/entity/main-menu-selector.js +2 -2
  21. package/dist-client/pages/entity/main-menu-selector.js.map +1 -1
  22. package/dist-client/pages/menu/dynamic-menu-template.js +1 -1
  23. package/dist-client/pages/menu/dynamic-menu-template.js.map +1 -1
  24. package/dist-client/pages/menu/dynamic-menu.d.ts +4 -5
  25. package/dist-client/pages/menu/export-menu-popup.js +1 -1
  26. package/dist-client/pages/menu/export-menu-popup.js.map +1 -1
  27. package/dist-client/tsconfig.tsbuildinfo +1 -1
  28. package/dist-client/utils/meta-ui-util.js +23 -23
  29. package/dist-client/utils/meta-ui-util.js.map +1 -1
  30. package/dist-server/tsconfig.tsbuildinfo +1 -1
  31. package/package.json +24 -24
package/client/component/popup/code-input-editor-popup.js CHANGED
@@ -18,7 +18,7 @@ export class CodeInputEditorPopup extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
 
21
- background-color: #fff;
21
+ background-color: var(--md-sys-color-surface);
22
22
 
23
23
  width: var(--overlay-center-normal-width, 50%);
24
24
  height: var(--overlay-center-normal-height, 50%);
@@ -51,7 +51,9 @@ export class CodeInputEditorPopup extends LitElement {
51
51
  <ox-input-code mode="javascript" value=${this.codeVlaue} tab-size="2" tab-as-space="true"></ox-input-code>
52
52
 
53
53
  <div class="button-container" style="margin-left:unset;">
54
- <button @click=${this.clickEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}</button>
54
+ <button @click=${this.clickEmpty.bind(this)}>
55
+ <md-icon>check_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}
56
+ </button>
55
57
  <div filler></div>
56
58
  <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>
57
59
  <button @click=${this.clickConfirm.bind(this)}><md-icon>done</md-icon>${TermsUtil.tButton('confirm')}</button>
package/client/component/popup/file-upload-popup.js CHANGED
@@ -20,7 +20,7 @@ class FileUploadPopup extends LitElement {
20
20
  display: flex;
21
21
  flex-direction: column;
22
22
  overflow-x: overlay;
23
- background-color: var(--main-section-background-color);
23
+ background-color: var(--md-sys-color-background);
24
24
  }
25
25
 
26
26
  .input-container {
@@ -66,7 +66,9 @@ class FileUploadPopup extends LitElement {
66
66
  </div>
67
67
 
68
68
  <div class="button-container">
69
- <button @click=${this._createAttachment}><md-icon>attach_file_add</md-icon>${TermsUtil.tButton('create')}</button>
69
+ <button @click=${this._createAttachment}>
70
+ <md-icon>attach_file_add</md-icon>${TermsUtil.tButton('create')}
71
+ </button>
70
72
  </div>
71
73
  `
72
74
  }
package/client/component/popup/meta-object-selector-popup.ts CHANGED
@@ -24,7 +24,7 @@ export class MetaObjectSelectorPopup extends LitElement {
24
24
  display: flex;
25
25
  flex-direction: column;
26
26
 
27
- background-color: #fff;
27
+ background-color: var(--md-sys-color-surface);
28
28
 
29
29
  width: var(--overlay-center-normal-width, 50%);
30
30
  height: var(--overlay-center-normal-height, 50%);
package/client/component/popup/record-based-code-editor-popup.ts CHANGED
@@ -24,7 +24,7 @@ export class RecordBasedCodeEditorPopup extends LitElement {
24
24
  display: flex;
25
25
  flex-direction: column;
26
26
 
27
- background-color: #fff;
27
+ background-color: var(--md-sys-color-surface);
28
28
 
29
29
  width: var(--overlay-center-normal-width, 50%);
30
30
  height: var(--overlay-center-normal-height, 50%);
package/client/pages/activity/meta-activiy-mixin.js CHANGED
@@ -5,74 +5,75 @@ import { client } from '@operato/graphql'
5
5
  import { ServiceUtil } from './../../utils/service-util'
6
6
  import { MetaApi } from './../../utils/meta-api'
7
7
 
8
- export const MetaActivityMixin = (baseElement) => class extends baseElement {
9
- static get properties() {
10
- return {
11
- activityId: String,
12
- input: Object,
13
- output: Object
14
- }
15
- }
16
-
17
- static get styles(){
18
- return css`
19
- :host {
20
- display: flex;
21
- flex-direction: column;
22
- overflow-x: auto;
23
- background-color: var(--main-section-background-color);
8
+ export const MetaActivityMixin = baseElement =>
9
+ class extends baseElement {
10
+ static get properties() {
11
+ return {
12
+ activityId: String,
13
+ input: Object,
14
+ output: Object
24
15
  }
25
- `
26
- }
16
+ }
27
17
 
28
- async connectedCallback(){
29
- await this.getActivity();
30
- await super.connectedCallback();
31
- }
18
+ static get styles() {
19
+ return css`
20
+ :host {
21
+ display: flex;
22
+ flex-direction: column;
23
+ overflow-x: auto;
24
+ background-color: var(--md-sys-color-background);
25
+ }
26
+ `
27
+ }
28
+
29
+ async connectedCallback() {
30
+ await this.getActivity()
31
+ await super.connectedCallback()
32
+ }
32
33
 
33
- async getActivity(){
34
- const response = await client.query({
35
- query: gql`
36
- query activity($id: String!) {
37
- activity(id: $id) {
38
- id
39
- model {
40
- name
41
- description
34
+ async getActivity() {
35
+ const response = await client.query({
36
+ query: gql`
37
+ query activity($id: String!) {
38
+ activity(id: $id) {
39
+ id
40
+ model {
41
+ name
42
+ description
43
+ }
42
44
  }
43
45
  }
46
+ `,
47
+ variables: {
48
+ id: this.activityId
44
49
  }
45
- `,
46
- variables: {
47
- id: this.activityId
48
- }
49
- })
50
+ })
50
51
 
51
- this.activity = response.data.activity
52
- let relationMenu = undefined
53
- this.activity.model?.forEach(x => {
54
- if(x.name == 'relation-menu'){
55
- relationMenu = JSON.parse(x.description);
56
- }
57
- })
58
- this.relationMenu = relationMenu;
59
- await this.getMenuInfo(this.relationMenu.id, this.relationMenu.routing);
60
- }
52
+ this.activity = response.data.activity
53
+ let relationMenu = undefined
54
+ this.activity.model?.forEach(x => {
55
+ if (x.name == 'relation-menu') {
56
+ relationMenu = JSON.parse(x.description)
57
+ }
58
+ })
59
+ this.relationMenu = relationMenu
60
+ await this.getMenuInfo(this.relationMenu.id, this.relationMenu.routing)
61
+ }
61
62
 
62
- async getMenuInfo(id, menuRouting){
63
- let filters = [{ name : 'id', operator: 'eq', value : id }];
64
- let data = await ServiceUtil.searchByPagination('menus', filters, null, 0, 0, 'id,category,resourceUrl');
63
+ async getMenuInfo(id, menuRouting) {
64
+ let filters = [{ name: 'id', operator: 'eq', value: id }]
65
+ let data = await ServiceUtil.searchByPagination('menus', filters, null, 0, 0, 'id,category,resourceUrl')
65
66
 
66
- if(!data && data.length == 0) {
67
- let msg = TermsUtil.tText('value_is_not_exist', {value : `${TermsUtil.tMenu('menu')} ${menuRouting}`});
68
- MetaApi.showToast('info', msg);
69
- throw new Error(msg);
70
- }
67
+ if (!data && data.length == 0) {
68
+ let msg = TermsUtil.tText('value_is_not_exist', { value: `${TermsUtil.tMenu('menu')} ${menuRouting}` })
69
+ MetaApi.showToast('info', msg)
70
+ throw new Error(msg)
71
+ }
71
72
 
72
- let menu = data.records[0];
73
+ let menu = data.records[0]
73
74
 
74
- menu.tagName = menu.category.endsWith('-page') ? menu.category.replace('-page','-element') : menu.category;
75
- menu.resourceUrl = menu.resourceUrl.replace(menu.category, menu.tagName);
76
- Object.assign(this.relationMenu, menu);
77
- }
78
- }
75
+ menu.tagName = menu.category.endsWith('-page') ? menu.category.replace('-page', '-element') : menu.category
76
+ menu.resourceUrl = menu.resourceUrl.replace(menu.category, menu.tagName)
77
+ Object.assign(this.relationMenu, menu)
78
+ }
79
+ }
package/client/pages/entity/main-menu-selector.js CHANGED
@@ -40,7 +40,7 @@ export class MainMenuSelector extends localize(i18next)(LitElement) {
40
40
  }
41
41
 
42
42
  .container_detail {
43
- background-color: var(--main-section-background-color);
43
+ background-color: var(--md-sys-color-background);
44
44
  display: flex;
45
45
  flex-direction: column;
46
46
  flex: 1;
@@ -58,7 +58,7 @@ export class MainMenuSelector extends localize(i18next)(LitElement) {
58
58
  margin: var(--grist-title-margin);
59
59
  border: var(--grist-title-border);
60
60
  font: var(--grist-title-font);
61
- color: var(--secondary-color);
61
+ color: var(--md-sys-color-secondary);
62
62
  }
63
63
 
64
64
  .container_detail h2 md-icon {
package/client/pages/menu/dynamic-menu-template.js CHANGED
@@ -22,7 +22,7 @@ class DynamicMenuTemplate extends localize(i18next)(LitElement) {
22
22
  display: flex;
23
23
  flex-direction: column;
24
24
  overflow-x: overlay;
25
- background-color: var(--main-section-background-color);
25
+ background-color: var(--md-sys-color-background);
26
26
  }
27
27
  legend {
28
28
  margin: 10px;
package/client/pages/menu/export-menu-popup.js CHANGED
@@ -49,7 +49,7 @@ export class ExportMenuPopup extends localize(i18next)(LitElement) {
49
49
  display: flex;
50
50
  flex-direction: column;
51
51
  overflow-x: overlay;
52
- background-color: var(--main-section-background-color);
52
+ background-color: var(--md-sys-color-background);
53
53
  }
54
54
 
55
55
  ox-grist {
package/client/utils/meta-ui-util.js CHANGED
@@ -2016,7 +2016,7 @@ export class MetaUiUtil {
2016
2016
  display: flex;
2017
2017
  flex-direction: column;
2018
2018
  overflow-x: overlay;
2019
- background-color: var(--main-section-background-color);
2019
+ background-color: var(--md-sys-color-background);
2020
2020
  }
2021
2021
 
2022
2022
  ox-grist {
@@ -2048,7 +2048,7 @@ export class MetaUiUtil {
2048
2048
  display: flex;
2049
2049
  flex-direction: column;
2050
2050
  overflow-x: overlay;
2051
- background-color: var(--main-section-background-color);
2051
+ background-color: var(--md-sys-color-background);
2052
2052
  }
2053
2053
 
2054
2054
  .container {
@@ -2058,7 +2058,7 @@ export class MetaUiUtil {
2058
2058
  }
2059
2059
 
2060
2060
  .container_detail {
2061
- background-color: var(--main-section-background-color);
2061
+ background-color: var(--md-sys-color-background);
2062
2062
  display: flex;
2063
2063
  flex-direction: column;
2064
2064
  flex: 1;
@@ -2076,7 +2076,7 @@ export class MetaUiUtil {
2076
2076
  margin: var(--grist-title-margin);
2077
2077
  border: var(--grist-title-border);
2078
2078
  font: var(--grist-title-font);
2079
- color: var(--secondary-color);
2079
+ color: var(--md-sys-color-secondary);
2080
2080
  }
2081
2081
 
2082
2082
  .container_detail h2 md-icon {
@@ -2119,7 +2119,7 @@ export class MetaUiUtil {
2119
2119
  display: flex;
2120
2120
  flex-direction: column;
2121
2121
  overflow-x: overlay;
2122
- background-color: var(--main-section-background-color);
2122
+ background-color: var(--md-sys-color-background);
2123
2123
  }
2124
2124
 
2125
2125
  .container {
@@ -2129,7 +2129,7 @@ export class MetaUiUtil {
2129
2129
  }
2130
2130
 
2131
2131
  .container_detail {
2132
- background-color: var(--main-section-background-color);
2132
+ background-color: var(--md-sys-color-background);
2133
2133
  display: flex;
2134
2134
  flex-direction: column;
2135
2135
  flex: 1;
@@ -2147,7 +2147,7 @@ export class MetaUiUtil {
2147
2147
  margin: var(--grist-title-margin);
2148
2148
  border: var(--grist-title-border);
2149
2149
  font: var(--grist-title-font);
2150
- color: var(--secondary-color);
2150
+ color: var(--md-sys-color-secondary);
2151
2151
  }
2152
2152
 
2153
2153
  .container_detail h2 md-icon {
@@ -2190,7 +2190,7 @@ export class MetaUiUtil {
2190
2190
  display: flex;
2191
2191
  flex-direction: column;
2192
2192
  overflow-x: overlay;
2193
- background-color: var(--main-section-background-color);
2193
+ background-color: var(--md-sys-color-background);
2194
2194
  }
2195
2195
 
2196
2196
  .container {
@@ -2200,7 +2200,7 @@ export class MetaUiUtil {
2200
2200
  }
2201
2201
 
2202
2202
  .container_detail {
2203
- background-color: var(--main-section-background-color);
2203
+ background-color: var(--md-sys-color-background);
2204
2204
  display: flex;
2205
2205
  flex-direction: column;
2206
2206
  flex: 1;
@@ -2218,7 +2218,7 @@ export class MetaUiUtil {
2218
2218
  margin: var(--grist-title-margin);
2219
2219
  border: var(--grist-title-border);
2220
2220
  font: var(--grist-title-font);
2221
- color: var(--secondary-color);
2221
+ color: var(--md-sys-color-secondary);
2222
2222
  }
2223
2223
 
2224
2224
  .container_detail h2 md-icon {
@@ -2261,7 +2261,7 @@ export class MetaUiUtil {
2261
2261
  display: flex;
2262
2262
  flex-direction: column;
2263
2263
  overflow-x: overlay;
2264
- background-color: var(--main-section-background-color);
2264
+ background-color: var(--md-sys-color-background);
2265
2265
  }
2266
2266
 
2267
2267
  .container {
@@ -2314,7 +2314,7 @@ export class MetaUiUtil {
2314
2314
  display: flex;
2315
2315
  flex-direction: column;
2316
2316
  overflow-x: auto;
2317
- background-color: var(--main-section-background-color);
2317
+ background-color: var(--md-sys-color-background);
2318
2318
  }
2319
2319
 
2320
2320
  .container {
@@ -2325,7 +2325,7 @@ export class MetaUiUtil {
2325
2325
  }
2326
2326
 
2327
2327
  .container_detail {
2328
- background-color: var(--main-section-background-color);
2328
+ background-color: var(--md-sys-color-background);
2329
2329
  display: flex;
2330
2330
  flex-direction: column;
2331
2331
  flex: 1;
@@ -2343,7 +2343,7 @@ export class MetaUiUtil {
2343
2343
  margin: var(--grist-title-margin);
2344
2344
  border: var(--grist-title-border);
2345
2345
  font: var(--grist-title-font);
2346
- color: var(--secondary-color);
2346
+ color: var(--md-sys-color-secondary);
2347
2347
  }
2348
2348
 
2349
2349
  .container_detail h2 md-icon {
@@ -2385,7 +2385,7 @@ export class MetaUiUtil {
2385
2385
  display: flex;
2386
2386
  flex-direction: column;
2387
2387
  overflow-x: auto;
2388
- background-color: var(--main-section-background-color);
2388
+ background-color: var(--md-sys-color-background);
2389
2389
  }
2390
2390
 
2391
2391
  .container {
@@ -2396,7 +2396,7 @@ export class MetaUiUtil {
2396
2396
  }
2397
2397
 
2398
2398
  .container_detail {
2399
- background-color: var(--main-section-background-color);
2399
+ background-color: var(--md-sys-color-background);
2400
2400
  display: flex;
2401
2401
  flex-direction: column;
2402
2402
  flex: 1;
@@ -2414,7 +2414,7 @@ export class MetaUiUtil {
2414
2414
  margin: var(--grist-title-margin);
2415
2415
  border: var(--grist-title-border);
2416
2416
  font: var(--grist-title-font);
2417
- color: var(--secondary-color);
2417
+ color: var(--md-sys-color-secondary);
2418
2418
  }
2419
2419
 
2420
2420
  .container_detail h2 md-icon {
@@ -2455,7 +2455,7 @@ export class MetaUiUtil {
2455
2455
  flex: 1;
2456
2456
  flex-direction: column;
2457
2457
  overflow-x: overlay;
2458
- background-color: var(--main-section-background-color);
2458
+ background-color: var(--md-sys-color-background);
2459
2459
  }
2460
2460
 
2461
2461
  .container {
@@ -2488,7 +2488,7 @@ export class MetaUiUtil {
2488
2488
  h2 {
2489
2489
  border: var(--grist-title-border);
2490
2490
  font: var(--grist-title-font);
2491
- color: var(--secondary-color);
2491
+ color: var(--md-sys-color-secondary);
2492
2492
  margin: var(--grist-title-margin);
2493
2493
  padding-bottom: var(--grist-title-with-grid-padding);
2494
2494
  padding-top: var(--grist-title-with-grid-padding);
@@ -2554,7 +2554,7 @@ export class MetaUiUtil {
2554
2554
  flex: 1;
2555
2555
  flex-direction: column;
2556
2556
  overflow-x: overlay;
2557
- background-color: var(--main-section-background-color);
2557
+ background-color: var(--md-sys-color-background);
2558
2558
  }
2559
2559
 
2560
2560
  .tabs {
@@ -2577,7 +2577,7 @@ export class MetaUiUtil {
2577
2577
  }
2578
2578
 
2579
2579
  .tab[activate] {
2580
- background-color: var(--primary-color);
2580
+ background-color: var(--md-sys-color-primary);
2581
2581
  box-shadow: 2px -2px 2px 0px rgba(0, 0, 0, 0.15);
2582
2582
  opacity: 1;
2583
2583
  font-weight: bold;
@@ -2596,7 +2596,7 @@ export class MetaUiUtil {
2596
2596
  flex: 1;
2597
2597
  display: flex;
2598
2598
  flex-direction: column;
2599
- background-color: var(--theme-white-color);
2599
+ background-color: var(--md-sys-color-surface);
2600
2600
  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
2601
2601
  border: var(--border-dark-color);
2602
2602
  border-width: 0 1px 1px 1px;
@@ -2609,7 +2609,7 @@ export class MetaUiUtil {
2609
2609
  flex: 1;
2610
2610
  flex-direction: column;
2611
2611
  overflow-x: overlay;
2612
- background-color: var(--main-section-background-color);
2612
+ background-color: var(--md-sys-color-background);
2613
2613
  }
2614
2614
  `
2615
2615
  ]
package/dist-client/component/popup/code-input-editor-popup.js CHANGED
@@ -26,7 +26,9 @@ export class CodeInputEditorPopup extends LitElement {
26
26
  <ox-input-code mode="javascript" value=${this.codeVlaue} tab-size="2" tab-as-space="true"></ox-input-code>
27
27
 
28
28
  <div class="button-container" style="margin-left:unset;">
29
- <button @click=${this.clickEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}</button>
29
+ <button @click=${this.clickEmpty.bind(this)}>
30
+ <md-icon>check_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}
31
+ </button>
30
32
  <div filler></div>
31
33
  <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>
32
34
  <button @click=${this.clickConfirm.bind(this)}><md-icon>done</md-icon>${TermsUtil.tButton('confirm')}</button>
@@ -82,7 +84,7 @@ CodeInputEditorPopup.styles = [
82
84
  display: flex;
83
85
  flex-direction: column;
84
86
 
85
- background-color: #fff;
87
+ background-color: var(--md-sys-color-surface);
86
88
 
87
89
  width: var(--overlay-center-normal-width, 50%);
88
90
  height: var(--overlay-center-normal-height, 50%);
package/dist-client/component/popup/code-input-editor-popup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"code-input-editor-popup.js","sourceRoot":"","sources":["../../../client/component/popup/code-input-editor-popup.js"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,iCAAiC,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,UAAU;IAsBlD,KAAK,CAAC,iBAAiB;QACrB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;SAClD;aAAM;YACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAA;SAC5B;QAED,MAAM,KAAK,CAAC,iBAAiB,EAAE,CAAA;IACjC,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,KAAK,CAAC,YAAY,EAAE,CAAA;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;+CACgC,IAAI,CAAC,SAAS;;;yBAGpC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,8CAA8C,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;;yBAElG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC;yBACnF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;;KAEvG,CAAA;IACH,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;IACvD,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,UAAU,CAAC,CAAC;QAChB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;QAClD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IACD;;;;OAIG;IACH,KAAK,CAAC,WAAW,CAAC,CAAC;QACjB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IACD;;;;OAIG;IACH,KAAK,CAAC,YAAY,CAAC,CAAC;QAClB,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;YAC5C,OAAO,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAA;YAC7D,OAAM;SACP;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IAC1C,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,YAAY,CAAC,KAAK;QACtB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;QACnD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA1FM,2BAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,CAAA;AA0EH,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,oBAAoB,CAAC,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { ButtonContainerStyles } from '@operato/styles'\nimport { TermsUtil } from '../../utils/terms-util'\nimport { MetaApi } from '../../utils/meta-api'\nimport '@operato/input/ox-input-code.js'\nimport { closePopup } from '@operato/popup'\n\n/**\n * 코드 편집기 팝업\n */\nexport class CodeInputEditorPopup extends LitElement {\n static styles = [\n ButtonContainerStyles,\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-input-code {\n margin: 10px;\n overflow-y: auto;\n flex: 1;\n }\n `\n ]\n\n async connectedCallback() {\n if (typeof this.value === 'object') {\n this.codeVlaue = JSON.stringify(this.value, 0, 2)\n } else {\n this.codeVlaue = this.value\n }\n\n await super.connectedCallback()\n }\n\n async firstUpdated() {\n await super.firstUpdated()\n }\n\n render() {\n return html`\n <ox-input-code mode=\"javascript\" value=${this.codeVlaue} tab-size=\"2\" tab-as-space=\"true\"></ox-input-code>\n\n <div class=\"button-container\" style=\"margin-left:unset;\">\n <button @click=${this.clickEmpty.bind(this)}><md-icon>check_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}</button>\n <div filler></div>\n <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>\n <button @click=${this.clickConfirm.bind(this)}><md-icon>done</md-icon>${TermsUtil.tButton('confirm')}</button>\n </div>\n `\n }\n\n get codeEditor() {\n return this.shadowRoot.querySelector('ox-input-code')\n }\n\n /**\n * @description 비우기\n ***************************\n * @returns\n */\n async clickEmpty(e) {\n this.confirmCallback && this.confirmCallback(null)\n closePopup(this)\n }\n /**\n * @description 취소\n ***************************\n * @returns\n */\n async clickCancel(e) {\n closePopup(this)\n }\n /**\n * @description 확인\n ***************************\n * @returns\n */\n async clickConfirm(e) {\n if (this.codeVlaue === this.codeEditor.value) {\n MetaApi.showToast('info', TermsUtil.tText('NOTHING_CHANGED'))\n return\n }\n this.changedValue(this.codeEditor.value)\n }\n\n /**\n * @description 확정\n ***************************\n * @param {*} record\n */\n async changedValue(value) {\n this.confirmCallback && this.confirmCallback(value)\n closePopup(this)\n }\n}\n\ncustomElements.define('code-input-editor-popup', CodeInputEditorPopup)\n"]}
1
+ {"version":3,"file":"code-input-editor-popup.js","sourceRoot":"","sources":["../../../client/component/popup/code-input-editor-popup.js"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,iCAAiC,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,UAAU;IAsBlD,KAAK,CAAC,iBAAiB;QACrB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;SAClD;aAAM;YACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAA;SAC5B;QAED,MAAM,KAAK,CAAC,iBAAiB,EAAE,CAAA;IACjC,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,KAAK,CAAC,YAAY,EAAE,CAAA;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;+CACgC,IAAI,CAAC,SAAS;;;yBAGpC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;sDACG,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC;;;yBAGvD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC;yBACnF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;;KAEvG,CAAA;IACH,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAA;IACvD,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,UAAU,CAAC,CAAC;QAChB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;QAClD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IACD;;;;OAIG;IACH,KAAK,CAAC,WAAW,CAAC,CAAC;QACjB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IACD;;;;OAIG;IACH,KAAK,CAAC,YAAY,CAAC,CAAC;QAClB,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;YAC5C,OAAO,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAA;YAC7D,OAAM;SACP;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IAC1C,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,YAAY,CAAC,KAAK;QACtB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;QACnD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA5FM,2BAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,CAAA;AA4EH,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,oBAAoB,CAAC,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { ButtonContainerStyles } from '@operato/styles'\nimport { TermsUtil } from '../../utils/terms-util'\nimport { MetaApi } from '../../utils/meta-api'\nimport '@operato/input/ox-input-code.js'\nimport { closePopup } from '@operato/popup'\n\n/**\n * 코드 편집기 팝업\n */\nexport class CodeInputEditorPopup extends LitElement {\n static styles = [\n ButtonContainerStyles,\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-input-code {\n margin: 10px;\n overflow-y: auto;\n flex: 1;\n }\n `\n ]\n\n async connectedCallback() {\n if (typeof this.value === 'object') {\n this.codeVlaue = JSON.stringify(this.value, 0, 2)\n } else {\n this.codeVlaue = this.value\n }\n\n await super.connectedCallback()\n }\n\n async firstUpdated() {\n await super.firstUpdated()\n }\n\n render() {\n return html`\n <ox-input-code mode=\"javascript\" value=${this.codeVlaue} tab-size=\"2\" tab-as-space=\"true\"></ox-input-code>\n\n <div class=\"button-container\" style=\"margin-left:unset;\">\n <button @click=${this.clickEmpty.bind(this)}>\n <md-icon>check_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}\n </button>\n <div filler></div>\n <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>\n <button @click=${this.clickConfirm.bind(this)}><md-icon>done</md-icon>${TermsUtil.tButton('confirm')}</button>\n </div>\n `\n }\n\n get codeEditor() {\n return this.shadowRoot.querySelector('ox-input-code')\n }\n\n /**\n * @description 비우기\n ***************************\n * @returns\n */\n async clickEmpty(e) {\n this.confirmCallback && this.confirmCallback(null)\n closePopup(this)\n }\n /**\n * @description 취소\n ***************************\n * @returns\n */\n async clickCancel(e) {\n closePopup(this)\n }\n /**\n * @description 확인\n ***************************\n * @returns\n */\n async clickConfirm(e) {\n if (this.codeVlaue === this.codeEditor.value) {\n MetaApi.showToast('info', TermsUtil.tText('NOTHING_CHANGED'))\n return\n }\n this.changedValue(this.codeEditor.value)\n }\n\n /**\n * @description 확정\n ***************************\n * @param {*} record\n */\n async changedValue(value) {\n this.confirmCallback && this.confirmCallback(value)\n closePopup(this)\n }\n}\n\ncustomElements.define('code-input-editor-popup', CodeInputEditorPopup)\n"]}
package/dist-client/component/popup/file-upload-popup.js CHANGED
@@ -18,7 +18,7 @@ class FileUploadPopup extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
  overflow-x: overlay;
21
- background-color: var(--main-section-background-color);
21
+ background-color: var(--md-sys-color-background);
22
22
  }
23
23
 
24
24
  .input-container {
@@ -61,7 +61,9 @@ class FileUploadPopup extends LitElement {
61
61
  </div>
62
62
 
63
63
  <div class="button-container">
64
- <button @click=${this._createAttachment}><md-icon>attach_file_add</md-icon>${TermsUtil.tButton('create')}</button>
64
+ <button @click=${this._createAttachment}>
65
+ <md-icon>attach_file_add</md-icon>${TermsUtil.tButton('create')}
66
+ </button>
65
67
  </div>
66
68
  `;
67
69
  }
package/dist-client/component/popup/file-upload-popup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"file-upload-popup.js","sourceRoot":"","sources":["../../../client/component/popup/file-upload-popup.js"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { client, gqlContext } from '@things-factory/shell'\nimport { css, html, LitElement } from 'lit'\nimport { SingleColumnFormStyles } from '@things-factory/form-ui'\nimport { ButtonContainerStyles } from '@operato/styles'\nimport gql from 'graphql-tag'\nimport { TermsUtil } from '../../utils/terms-util'\nimport { ServiceUtil } from '../../utils/service-util'\nimport { MetaApi } from '../../utils/meta-api'\n\nclass FileUploadPopup extends LitElement {\n static get styles() {\n return [\n ButtonContainerStyles,\n SingleColumnFormStyles,\n css`\n :host {\n padding: 10px;\n display: flex;\n flex-direction: column;\n overflow-x: overlay;\n background-color: var(--main-section-background-color);\n }\n\n .input-container {\n display: flex;\n }\n `\n ]\n }\n\n static get properties() {\n return {\n templateTypes: Array\n }\n }\n\n async connectedCallback() {\n super.connectedCallback()\n this.templateTypes = await ServiceUtil.codeItems('TEMPLATE_TYPES')\n }\n\n render() {\n return html`\n <div>\n <form id=\"input-form\" class=\"single-column-form\">\n <fieldset>\n <legend>${TermsUtil.tLabel('file_upload')}</legend>\n <label>${TermsUtil.tLabel('file_upload')}</label>\n <file-uploader custom-input id=\"uploadTemplate\" name=\"attachments\"></file-uploader>\n\n <label>${TermsUtil.tLabel('category')}</label>\n <select name=\"category\" required>\n <option value=\"\">${TermsUtil.tText('please_select_upload_category')}</option>\n ${(this.templateTypes || []).map(templateType => {\n const { name, description } = templateType\n return html` <option value=\"${name}\">${name} ${description ? ` (${description})` : ''}</option> `\n })}\n </select>\n\n <label>${TermsUtil.tLabel('description')}</label>\n <input name=\"description\" />\n </fieldset>\n </form>\n </div>\n\n <div class=\"button-container\">\n <button @click=${this._createAttachment}><md-icon>attach_file_add</md-icon>${TermsUtil.tButton('create')}</button>\n </div>\n `\n }\n\n get _template() {\n return this.renderRoot.querySelector('#uploadTemplate')\n }\n\n async _createAttachment() {\n try {\n const attachment = this._getAttachmentInfo()\n const response = await client.mutate({\n mutation: gql`\n mutation ($attachment: NewAttachment!) {\n createAttachment(attachment: $attachment) {\n id\n name\n path\n }\n }\n `,\n variables: {\n attachment\n },\n context: {\n ...gqlContext(),\n hasUpload: true\n }\n })\n\n if (!response.errors) {\n history.back()\n this.dispatchEvent(new CustomEvent('template-uploaded', { bubbles: true, composed: true, cancelable: true }))\n }\n } catch (e) {\n MetaApi.showAlertPopup('label.error', e.message, 'error', 'confirm')\n }\n }\n\n _getAttachmentInfo() {\n if (this.renderRoot.querySelector('form').checkValidity()) {\n return {\n file: this._template.files[0],\n category: this._getInputByName('category').value,\n description: this._getInputByName('description').value\n }\n } else {\n throw new Error(TermsUtil.tText('text.attachment_info_not_valid'))\n }\n }\n\n _getInputByName(name) {\n return this.renderRoot.querySelector(`select[name=${name}], input[name=${name}]`)\n }\n}\n\nwindow.customElements.define('file-upload-popup', FileUploadPopup)\n"]}
1
+ {"version":3,"file":"file-upload-popup.js","sourceRoot":"","sources":["../../../client/component/popup/file-upload-popup.js"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { client, gqlContext } from '@things-factory/shell'\nimport { css, html, LitElement } from 'lit'\nimport { SingleColumnFormStyles } from '@things-factory/form-ui'\nimport { ButtonContainerStyles } from '@operato/styles'\nimport gql from 'graphql-tag'\nimport { TermsUtil } from '../../utils/terms-util'\nimport { ServiceUtil } from '../../utils/service-util'\nimport { MetaApi } from '../../utils/meta-api'\n\nclass FileUploadPopup extends LitElement {\n static get styles() {\n return [\n ButtonContainerStyles,\n SingleColumnFormStyles,\n css`\n :host {\n padding: 10px;\n display: flex;\n flex-direction: column;\n overflow-x: overlay;\n background-color: var(--md-sys-color-background);\n }\n\n .input-container {\n display: flex;\n }\n `\n ]\n }\n\n static get properties() {\n return {\n templateTypes: Array\n }\n }\n\n async connectedCallback() {\n super.connectedCallback()\n this.templateTypes = await ServiceUtil.codeItems('TEMPLATE_TYPES')\n }\n\n render() {\n return html`\n <div>\n <form id=\"input-form\" class=\"single-column-form\">\n <fieldset>\n <legend>${TermsUtil.tLabel('file_upload')}</legend>\n <label>${TermsUtil.tLabel('file_upload')}</label>\n <file-uploader custom-input id=\"uploadTemplate\" name=\"attachments\"></file-uploader>\n\n <label>${TermsUtil.tLabel('category')}</label>\n <select name=\"category\" required>\n <option value=\"\">${TermsUtil.tText('please_select_upload_category')}</option>\n ${(this.templateTypes || []).map(templateType => {\n const { name, description } = templateType\n return html` <option value=\"${name}\">${name} ${description ? ` (${description})` : ''}</option> `\n })}\n </select>\n\n <label>${TermsUtil.tLabel('description')}</label>\n <input name=\"description\" />\n </fieldset>\n </form>\n </div>\n\n <div class=\"button-container\">\n <button @click=${this._createAttachment}>\n <md-icon>attach_file_add</md-icon>${TermsUtil.tButton('create')}\n </button>\n </div>\n `\n }\n\n get _template() {\n return this.renderRoot.querySelector('#uploadTemplate')\n }\n\n async _createAttachment() {\n try {\n const attachment = this._getAttachmentInfo()\n const response = await client.mutate({\n mutation: gql`\n mutation ($attachment: NewAttachment!) {\n createAttachment(attachment: $attachment) {\n id\n name\n path\n }\n }\n `,\n variables: {\n attachment\n },\n context: {\n ...gqlContext(),\n hasUpload: true\n }\n })\n\n if (!response.errors) {\n history.back()\n this.dispatchEvent(new CustomEvent('template-uploaded', { bubbles: true, composed: true, cancelable: true }))\n }\n } catch (e) {\n MetaApi.showAlertPopup('label.error', e.message, 'error', 'confirm')\n }\n }\n\n _getAttachmentInfo() {\n if (this.renderRoot.querySelector('form').checkValidity()) {\n return {\n file: this._template.files[0],\n category: this._getInputByName('category').value,\n description: this._getInputByName('description').value\n }\n } else {\n throw new Error(TermsUtil.tText('text.attachment_info_not_valid'))\n }\n }\n\n _getInputByName(name) {\n return this.renderRoot.querySelector(`select[name=${name}], input[name=${name}]`)\n }\n}\n\nwindow.customElements.define('file-upload-popup', FileUploadPopup)\n"]}
package/dist-client/component/popup/meta-object-selector-popup.js CHANGED
@@ -249,7 +249,7 @@ MetaObjectSelectorPopup.styles = [
249
249
  display: flex;
250
250
  flex-direction: column;
251
251
 
252
- background-color: #fff;
252
+ background-color: var(--md-sys-color-surface);
253
253
 
254
254
  width: var(--overlay-center-normal-width, 50%);
255
255
  height: var(--overlay-center-normal-height, 50%);