@operato/grist-editor 1.0.0-alpha.23 → 1.0.0-beta.40

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 (121) hide show
  1. package/.storybook/main.js +2 -2
  2. package/.storybook/server.mjs +4 -4
  3. package/CHANGELOG.md +4 -116
  4. package/LICENSE +2 -2
  5. package/README.md +29 -9
  6. package/dist/src/index.d.ts +1 -0
  7. package/dist/src/index.js +15 -1
  8. package/dist/src/index.js.map +1 -1
  9. package/dist/src/ox-grist-editor-crontab.d.ts +8 -0
  10. package/dist/src/ox-grist-editor-crontab.js +50 -0
  11. package/dist/src/ox-grist-editor-crontab.js.map +1 -0
  12. package/dist/src/ox-grist-editor-duration.d.ts +8 -0
  13. package/dist/src/ox-grist-editor-duration.js +50 -0
  14. package/dist/src/ox-grist-editor-duration.js.map +1 -0
  15. package/dist/src/ox-grist-editor-parameters.d.ts +12 -0
  16. package/dist/src/{parameters/parameters-editor.js → ox-grist-editor-parameters.js} +17 -39
  17. package/dist/src/ox-grist-editor-parameters.js.map +1 -0
  18. package/dist/src/ox-grist-editor-partition-keys.d.ts +11 -0
  19. package/dist/src/ox-grist-editor-partition-keys.js +74 -0
  20. package/dist/src/ox-grist-editor-partition-keys.js.map +1 -0
  21. package/dist/src/ox-grist-editor-value-map.d.ts +11 -0
  22. package/dist/src/ox-grist-editor-value-map.js +74 -0
  23. package/dist/src/ox-grist-editor-value-map.js.map +1 -0
  24. package/dist/src/ox-grist-renderer-crontab.d.ts +2 -0
  25. package/dist/src/ox-grist-renderer-crontab.js +26 -0
  26. package/dist/src/ox-grist-renderer-crontab.js.map +1 -0
  27. package/dist/src/{parameters/parameters-editor-builder.d.ts → ox-parameters-builder.d.ts} +0 -0
  28. package/dist/src/{parameters/parameters-editor-builder.js → ox-parameters-builder.js} +12 -14
  29. package/dist/src/ox-parameters-builder.js.map +1 -0
  30. package/dist/src/ox-popup-crontab-input.d.ts +11 -0
  31. package/dist/src/ox-popup-crontab-input.js +75 -0
  32. package/dist/src/ox-popup-crontab-input.js.map +1 -0
  33. package/dist/src/ox-popup-duration-input.d.ts +11 -0
  34. package/dist/src/ox-popup-duration-input.js +75 -0
  35. package/dist/src/ox-popup-duration-input.js.map +1 -0
  36. package/dist/src/{parameters/parameters-editor-popup.d.ts → ox-popup-parameters-builder.d.ts} +1 -1
  37. package/dist/src/{parameters/parameters-editor-popup.js → ox-popup-parameters-builder.js} +20 -19
  38. package/dist/src/ox-popup-parameters-builder.js.map +1 -0
  39. package/dist/src/ox-popup-partition-keys-input.d.ts +12 -0
  40. package/dist/src/ox-popup-partition-keys-input.js +100 -0
  41. package/dist/src/ox-popup-partition-keys-input.js.map +1 -0
  42. package/dist/src/ox-popup-value-map-input.d.ts +12 -0
  43. package/dist/src/ox-popup-value-map-input.js +105 -0
  44. package/dist/src/ox-popup-value-map-input.js.map +1 -0
  45. package/dist/stories/ox-grist-editor-crontab.stories.d.ts +24 -0
  46. package/dist/stories/ox-grist-editor-crontab.stories.js +406 -0
  47. package/dist/stories/ox-grist-editor-crontab.stories.js.map +1 -0
  48. package/dist/tsconfig.tsbuildinfo +1 -1
  49. package/package.json +36 -24
  50. package/src/index.ts +18 -0
  51. package/src/ox-grist-editor-crontab.ts +62 -0
  52. package/src/ox-grist-editor-duration.ts +62 -0
  53. package/src/{parameters/parameters-editor.ts → ox-grist-editor-parameters.ts} +14 -27
  54. package/src/ox-grist-editor-partition-keys.ts +86 -0
  55. package/src/ox-grist-editor-value-map.ts +86 -0
  56. package/src/ox-grist-renderer-crontab.ts +31 -0
  57. package/src/{parameters/parameters-editor-builder.ts → ox-parameters-builder.ts} +6 -8
  58. package/src/ox-popup-crontab-input.ts +75 -0
  59. package/src/ox-popup-duration-input.ts +75 -0
  60. package/src/{parameters/parameters-editor-popup.ts → ox-popup-parameters-builder.ts} +10 -9
  61. package/src/ox-popup-partition-keys-input.ts +97 -0
  62. package/src/ox-popup-value-map-input.ts +102 -0
  63. package/stories/ox-grist-editor-crontab.stories.ts +429 -0
  64. package/themes/app-theme.css +142 -0
  65. package/themes/form-theme.css +75 -0
  66. package/themes/grist-theme.css +194 -0
  67. package/themes/oops-theme.css +26 -0
  68. package/themes/report-theme.css +47 -0
  69. package/translations/en.json +3 -0
  70. package/translations/ko.json +3 -0
  71. package/translations/ms.json +3 -0
  72. package/translations/zh.json +3 -0
  73. package/web-dev-server.config.mjs +9 -8
  74. package/web-test-runner.config.mjs +7 -19
  75. package/.editorconfig +0 -29
  76. package/demo/data-grist-test.html +0 -456
  77. package/demo/index.html +0 -33
  78. package/dist/src/code/code-editor.d.ts +0 -6
  79. package/dist/src/code/code-editor.js +0 -50
  80. package/dist/src/code/code-editor.js.map +0 -1
  81. package/dist/src/code/index.d.ts +0 -1
  82. package/dist/src/code/index.js +0 -5
  83. package/dist/src/code/index.js.map +0 -1
  84. package/dist/src/id/id-input.d.ts +0 -19
  85. package/dist/src/id/id-input.js +0 -119
  86. package/dist/src/id/id-input.js.map +0 -1
  87. package/dist/src/id/id-renderer.d.ts +0 -2
  88. package/dist/src/id/id-renderer.js +0 -9
  89. package/dist/src/id/id-renderer.js.map +0 -1
  90. package/dist/src/id/id-selector.d.ts +0 -23
  91. package/dist/src/id/id-selector.js +0 -197
  92. package/dist/src/id/id-selector.js.map +0 -1
  93. package/dist/src/id/index.d.ts +0 -1
  94. package/dist/src/id/index.js +0 -7
  95. package/dist/src/id/index.js.map +0 -1
  96. package/dist/src/object/index.d.ts +0 -1
  97. package/dist/src/object/index.js +0 -6
  98. package/dist/src/object/index.js.map +0 -1
  99. package/dist/src/object/object-editor.d.ts +0 -18
  100. package/dist/src/object/object-editor.js +0 -152
  101. package/dist/src/object/object-editor.js.map +0 -1
  102. package/dist/src/object/object-selector.d.ts +0 -38
  103. package/dist/src/object/object-selector.js +0 -338
  104. package/dist/src/object/object-selector.js.map +0 -1
  105. package/dist/src/parameters/index.d.ts +0 -1
  106. package/dist/src/parameters/index.js +0 -6
  107. package/dist/src/parameters/index.js.map +0 -1
  108. package/dist/src/parameters/parameters-editor-builder.js.map +0 -1
  109. package/dist/src/parameters/parameters-editor-popup.js.map +0 -1
  110. package/dist/src/parameters/parameters-editor.d.ts +0 -18
  111. package/dist/src/parameters/parameters-editor.js.map +0 -1
  112. package/src/code/code-editor.ts +0 -78
  113. package/src/code/index.ts +0 -6
  114. package/src/id/id-input.ts +0 -135
  115. package/src/id/id-renderer.ts +0 -12
  116. package/src/id/id-selector.ts +0 -189
  117. package/src/id/index.ts +0 -8
  118. package/src/object/index.ts +0 -8
  119. package/src/object/object-editor.ts +0 -162
  120. package/src/object/object-selector.ts +0 -346
  121. package/src/parameters/index.ts +0 -8
@@ -0,0 +1,74 @@
1
+ /**
2
+ * @license Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import { __decorate } from "tslib";
5
+ import './ox-popup-value-map-input.js';
6
+ import { html } from 'lit';
7
+ import { customElement } from 'lit/decorators.js';
8
+ import { cloneDeep } from 'lodash-es';
9
+ import { OxGristEditor } from '@operato/data-grist';
10
+ import { i18next } from '@operato/i18n';
11
+ import { openPopup } from '@operato/popup';
12
+ let OxGristEditorValueMap = class OxGristEditorValueMap extends OxGristEditor {
13
+ get editorTemplate() {
14
+ const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value;
15
+ return html ` ${value || ''} `;
16
+ }
17
+ async firstUpdated() {
18
+ await this.updateComplete;
19
+ this.renderRoot.addEventListener('click', e => {
20
+ e.stopPropagation();
21
+ this.openSelector();
22
+ });
23
+ this.openSelector();
24
+ }
25
+ async openSelector() {
26
+ var _a;
27
+ if (this.popup) {
28
+ delete this.popup;
29
+ }
30
+ const { name, help, valuetype = 'string', objectified = false } = ((_a = this.column.record) === null || _a === void 0 ? void 0 : _a.options) || {};
31
+ const confirmCallback = (newval) => {
32
+ this.dispatchEvent(new CustomEvent('field-change', {
33
+ bubbles: true,
34
+ composed: true,
35
+ detail: {
36
+ before: this.value,
37
+ after: !objectified ? JSON.stringify(newval) : newval,
38
+ record: this.record,
39
+ column: this.column,
40
+ row: this.row
41
+ }
42
+ }));
43
+ };
44
+ try {
45
+ var value = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {});
46
+ }
47
+ catch (e) {
48
+ var value = {};
49
+ }
50
+ /*
51
+ 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
52
+ layout의 구성에 변화가 발생하면, 다시 render된다.
53
+ 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
54
+ 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
55
+ 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
56
+ 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
57
+ */
58
+ var template = html `
59
+ <ox-popup-value-map-input .value=${value} .valuetype=${valuetype} .confirmCallback=${confirmCallback}>
60
+ </ox-popup-value-map-input>
61
+ `;
62
+ this.popup = openPopup(template, {
63
+ backdrop: true,
64
+ size: 'large',
65
+ title: `${(name === null || name === void 0 ? void 0 : name.toUpperCase()) || i18next.t('field.value-map')} `,
66
+ help
67
+ });
68
+ }
69
+ };
70
+ OxGristEditorValueMap = __decorate([
71
+ customElement('ox-grist-editor-value-map')
72
+ ], OxGristEditorValueMap);
73
+ export { OxGristEditorValueMap };
74
+ //# sourceMappingURL=ox-grist-editor-value-map.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-grist-editor-value-map.js","sourceRoot":"","sources":["../../src/ox-grist-editor-value-map.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-popup-value-map-input.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { cloneDeep } from 'lodash-es'\n\nimport { OxGristEditor } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { openPopup, PopupHandle } from '@operato/popup'\n\n@customElement('ox-grist-editor-value-map')\nexport class OxGristEditorValueMap extends OxGristEditor {\n private popup?: PopupHandle\n\n get editorTemplate() {\n const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value\n return html` ${value || ''} `\n }\n\n async firstUpdated() {\n await this.updateComplete\n\n this.renderRoot.addEventListener('click', e => {\n e.stopPropagation()\n\n this.openSelector()\n })\n\n this.openSelector()\n }\n\n async openSelector() {\n if (this.popup) {\n delete this.popup\n }\n\n const { name, help, valuetype = 'string', objectified = false } = this.column.record?.options || {}\n\n const confirmCallback = (newval: any) => {\n this.dispatchEvent(\n new CustomEvent('field-change', {\n bubbles: true,\n composed: true,\n detail: {\n before: this.value,\n after: !objectified ? JSON.stringify(newval) : newval,\n record: this.record,\n column: this.column,\n row: this.row\n }\n })\n )\n }\n\n try {\n var value: any =\n !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : cloneDeep(this.value || {})\n } catch (e) {\n var value: any = {}\n }\n\n /* \n 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n layout의 구성에 변화가 발생하면, 다시 render된다.\n 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n */\n var template = html`\n <ox-popup-value-map-input .value=${value} .valuetype=${valuetype} .confirmCallback=${confirmCallback}>\n </ox-popup-value-map-input>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: `${name?.toUpperCase() || i18next.t('field.value-map')} `,\n help\n })\n }\n}\n"]}
@@ -0,0 +1,2 @@
1
+ import { FieldRenderer } from '@operato/data-grist';
2
+ export declare const OxGristRendererCrontab: FieldRenderer;
@@ -0,0 +1,26 @@
1
+ import cronstrue from 'cronstrue/i18n';
2
+ import i18next from 'i18next';
3
+ import { html } from 'lit';
4
+ import { detectOverflow } from '@operato/utils';
5
+ function onmouseover(e) {
6
+ const element = e.target;
7
+ if (detectOverflow(element)) {
8
+ element.setAttribute('data-tooltip', element.textContent);
9
+ }
10
+ }
11
+ function onmouseout(e) {
12
+ const element = e.target;
13
+ element.removeAttribute('data-tooltip');
14
+ }
15
+ export const OxGristRendererCrontab = (value, column, record, rowIndex, field) => {
16
+ let text = '';
17
+ try {
18
+ const language = (i18next.language || 'en').substring(0, 2);
19
+ text = !value ? '' : cronstrue.toString(value, { locale: language || 'en' });
20
+ }
21
+ catch (e) {
22
+ console.error(e);
23
+ }
24
+ return html `<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`;
25
+ };
26
+ //# sourceMappingURL=ox-grist-renderer-crontab.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-grist-renderer-crontab.js","sourceRoot":"","sources":["../../src/ox-grist-renderer-crontab.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,gBAAgB,CAAA;AACtC,OAAO,OAAO,MAAM,SAAS,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,SAAS,WAAW,CAAC,CAAQ;IAC3B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;IAC3C,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;QAC3B,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,WAAY,CAAC,CAAA;KAC3D;AACH,CAAC;AAED,SAAS,UAAU,CAAC,CAAQ;IAC1B,MAAM,OAAO,GAAG,CAAC,CAAC,MAAyB,CAAA;IAC3C,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;AACzC,CAAC;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC9F,IAAI,IAAI,GAAG,EAAE,CAAA;IAEb,IAAI;QACF,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAC3D,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,IAAI,IAAI,EAAE,CAAC,CAAA;KAC7E;IAAC,OAAO,CAAC,EAAE;QACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;KACjB;IAED,OAAO,IAAI,CAAA,oBAAoB,WAAW,cAAc,UAAU,IAAI,IAAI,SAAS,CAAA;AACrF,CAAC,CAAA","sourcesContent":["import cronstrue from 'cronstrue/i18n'\nimport i18next from 'i18next'\nimport { html } from 'lit'\n\nimport { FieldRenderer } from '@operato/data-grist'\nimport { detectOverflow } from '@operato/utils'\n\nfunction onmouseover(e: Event) {\n const element = e.target as HTMLSpanElement\n if (detectOverflow(element)) {\n element.setAttribute('data-tooltip', element.textContent!)\n }\n}\n\nfunction onmouseout(e: Event) {\n const element = e.target as HTMLSpanElement\n element.removeAttribute('data-tooltip')\n}\n\nexport const OxGristRendererCrontab: FieldRenderer = (value, column, record, rowIndex, field) => {\n let text = ''\n\n try {\n const language = (i18next.language || 'en').substring(0, 2)\n text = !value ? '' : cronstrue.toString(value, { locale: language || 'en' })\n } catch (e) {\n console.error(e)\n }\n\n return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}</span>`\n}\n"]}
@@ -2,22 +2,20 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import { LitElement, html } from 'lit';
6
- import { OxPropertyEditor } from '@operato/property-editor';
5
+ import { html, LitElement } from 'lit';
7
6
  import { customElement, property } from 'lit/decorators.js';
8
- import { connect } from 'pwa-helpers/connect-mixin';
9
- import { store } from '@operato/shell';
7
+ import { OxPropertyEditor } from '@operato/property-editor';
10
8
  /**
11
9
  모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
12
10
 
13
11
  Example:
14
12
 
15
- <ox-parameters-editor-builder value="{{value}}">
13
+ <ox-parameters-builder value="{{value}}">
16
14
  <label>Center X</label>
17
15
  <input type="number" .value="${value.cx}">
18
16
  <label>Width</label>
19
17
  <input type="number" .value="${value.width}">
20
- </ox-parameters-editor-builder>
18
+ </ox-parameters-builder>
21
19
  */
22
20
  const DEFAULT_VALUE = {
23
21
  legend: '',
@@ -39,7 +37,7 @@ const DEFAULT_VALUE = {
39
37
  options: null,
40
38
  date: null
41
39
  };
42
- let ParametersEditorBuilder = class ParametersEditorBuilder extends connect(store)(LitElement) {
40
+ let OxParametersBuilder = class OxParametersBuilder extends LitElement {
43
41
  render() {
44
42
  return html `<slot></slot>`;
45
43
  }
@@ -105,14 +103,14 @@ let ParametersEditorBuilder = class ParametersEditorBuilder extends connect(stor
105
103
  };
106
104
  __decorate([
107
105
  property({ type: Object })
108
- ], ParametersEditorBuilder.prototype, "value", void 0);
106
+ ], OxParametersBuilder.prototype, "value", void 0);
109
107
  __decorate([
110
108
  property({ type: Array })
111
- ], ParametersEditorBuilder.prototype, "props", void 0);
109
+ ], OxParametersBuilder.prototype, "props", void 0);
112
110
  __decorate([
113
111
  property({ type: Object })
114
- ], ParametersEditorBuilder.prototype, "host", void 0);
115
- ParametersEditorBuilder = __decorate([
116
- customElement('ox-parameters-editor-builder')
117
- ], ParametersEditorBuilder);
118
- //# sourceMappingURL=parameters-editor-builder.js.map
112
+ ], OxParametersBuilder.prototype, "host", void 0);
113
+ OxParametersBuilder = __decorate([
114
+ customElement('ox-parameters-builder')
115
+ ], OxParametersBuilder);
116
+ //# sourceMappingURL=ox-parameters-builder.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-parameters-builder.js","sourceRoot":"","sources":["../../src/ox-parameters-builder.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n/**\n모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.\n\nExample:\n\n <ox-parameters-builder value=\"{{value}}\">\n <label>Center X</label>\n <input type=\"number\" .value=\"${value.cx}\">\n <label>Width</label>\n <input type=\"number\" .value=\"${value.width}\">\n </ox-parameters-builder>\n*/\n\nconst DEFAULT_VALUE = {\n legend: '',\n number: 0,\n angle: 0,\n string: '',\n text: '',\n textarea: '',\n checkbox: false,\n select: '',\n color: '#000000',\n 'solidcolor-stops': null,\n 'gradientcolor-stops': null,\n 'gltf-selector': '',\n 'image-selector': '',\n multiplecolor: null,\n editortable: null,\n imageselector: '',\n options: null,\n date: null\n} as any\n\n@customElement('ox-parameters-builder')\nclass OxParametersBuilder extends LitElement {\n @property({ type: Object }) value: any\n @property({ type: Array }) props?: PropertySpec[]\n @property({ type: Object }) host: any\n\n render() {\n return html`<slot></slot>`\n }\n\n firstUpdated() {\n this.addEventListener('change', this._onValueChanged.bind(this))\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('props') && this._onPropsChanged(this.props)\n changes.has('value') && this._setValues()\n }\n\n _onPropsChanged(props: PropertySpec[] | undefined) {\n this.textContent = ''\n ;(props || []).forEach(prop => {\n let elementType = OxPropertyEditor.getEditor(prop.type)\n if (!elementType) {\n console.warn('Property Editor not defined', prop.type)\n return\n }\n let element = document.createElement(elementType) as OxPropertyEditor\n\n element.label = prop.label\n element.type = prop.type\n element.placeholder = prop.placeholder\n element.host = this.host\n // element.context = this.context\n element.setAttribute('name', prop.name)\n\n if (prop.observe) {\n element.observe = prop.observe\n }\n element.property = prop.property\n element.setAttribute('property-editor', '')\n\n this.appendChild(element)\n })\n }\n\n _setValues() {\n var value = this.value || {}\n Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {\n const editor = propertyEditor as OxPropertyEditor\n let name = editor.getAttribute('name')\n editor.value = value[name!] === undefined ? DEFAULT_VALUE[editor.type] : value[name!]\n })\n }\n\n _getValues() {\n var value = {} as any\n Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {\n const editor = propertyEditor as OxPropertyEditor\n let name = editor.getAttribute('name')\n value[name!] = editor.value === undefined ? DEFAULT_VALUE[editor.type] : editor.value\n })\n\n return value\n }\n\n _onValueChanged(e: Event) {\n e.stopPropagation()\n var prop = e.target as HTMLElement\n\n if (!prop || !prop.hasAttribute('property-editor')) {\n return\n }\n\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: this._getValues()\n })\n )\n }\n}\n"]}
@@ -0,0 +1,11 @@
1
+ import '@operato/input/ox-input-crontab.js';
2
+ import { LitElement } from 'lit';
3
+ export declare class OxPopupCrontabInput extends LitElement {
4
+ static styles: import("lit").CSSResult[];
5
+ value: any;
6
+ confirmCallback: (newval: any) => void;
7
+ render(): import("lit-html").TemplateResult<1>;
8
+ private onChange;
9
+ private onCancel;
10
+ private onConfirm;
11
+ }
@@ -0,0 +1,75 @@
1
+ import { __decorate } from "tslib";
2
+ import '@operato/input/ox-input-crontab.js';
3
+ import { css, html, LitElement } from 'lit';
4
+ import { customElement, property } from 'lit/decorators.js';
5
+ import { i18next } from '@operato/i18n';
6
+ import { closePopup } from '@operato/popup';
7
+ import { ScrollbarStyles } from '@operato/styles';
8
+ let OxPopupCrontabInput = class OxPopupCrontabInput extends LitElement {
9
+ render() {
10
+ return html `
11
+ <ox-input-crontab .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-crontab>
12
+
13
+ <div class="button-container">
14
+ <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
15
+ <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
16
+ </div>
17
+ `;
18
+ }
19
+ onChange(e) {
20
+ e.stopPropagation();
21
+ this.value = e.detail;
22
+ }
23
+ onCancel(e) {
24
+ closePopup(this);
25
+ }
26
+ onConfirm(e) {
27
+ this.confirmCallback && this.confirmCallback(this.value);
28
+ closePopup(this);
29
+ }
30
+ };
31
+ OxPopupCrontabInput.styles = [
32
+ ScrollbarStyles,
33
+ css `
34
+ :host {
35
+ display: flex;
36
+ flex-direction: column;
37
+
38
+ background-color: #fff;
39
+
40
+ width: var(--overlay-center-normal-width, 50%);
41
+ height: var(--overlay-center-normal-height, 50%);
42
+ }
43
+
44
+ ox-input-crontab {
45
+ flex: 1;
46
+ overflow-y: auto;
47
+ }
48
+
49
+ span {
50
+ flex: 1;
51
+
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+
56
+ color: var(--primary-color);
57
+ }
58
+
59
+ .button-container {
60
+ display: flex;
61
+ margin-left: auto;
62
+ }
63
+ `
64
+ ];
65
+ __decorate([
66
+ property({ type: Object })
67
+ ], OxPopupCrontabInput.prototype, "value", void 0);
68
+ __decorate([
69
+ property({ type: Object })
70
+ ], OxPopupCrontabInput.prototype, "confirmCallback", void 0);
71
+ OxPopupCrontabInput = __decorate([
72
+ customElement('ox-popup-crontab-input')
73
+ ], OxPopupCrontabInput);
74
+ export { OxPopupCrontabInput };
75
+ //# sourceMappingURL=ox-popup-crontab-input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-popup-crontab-input.js","sourceRoot":"","sources":["../../src/ox-popup-crontab-input.ts"],"names":[],"mappings":";AAAA,OAAO,oCAAoC,CAAA;AAE3C,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,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAuCjD,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;6BAGlD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,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;CACF,CAAA;AA/DQ,0BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAwC;AArCxD,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAgE/B;SAhEY,mBAAmB","sourcesContent":["import '@operato/input/ox-input-crontab.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 { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-popup-crontab-input')\nexport class OxPopupCrontabInput extends LitElement {\n static styles = [\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-input-crontab {\n flex: 1;\n overflow-y: auto;\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 .button-container {\n display: flex;\n margin-left: auto;\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n render() {\n return html`\n <ox-input-crontab .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-crontab>\n\n <div class=\"button-container\">\n <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n </div>\n `\n }\n\n private onChange(e: CustomEvent) {\n e.stopPropagation()\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"]}
@@ -0,0 +1,11 @@
1
+ import '@operato/input/ox-input-duration.js';
2
+ import { LitElement } from 'lit';
3
+ export declare class OxPopupDurationInput extends LitElement {
4
+ static styles: import("lit").CSSResult[];
5
+ value: any;
6
+ confirmCallback: (newval: any) => void;
7
+ render(): import("lit-html").TemplateResult<1>;
8
+ private onChange;
9
+ private onCancel;
10
+ private onConfirm;
11
+ }
@@ -0,0 +1,75 @@
1
+ import { __decorate } from "tslib";
2
+ import '@operato/input/ox-input-duration.js';
3
+ import { css, html, LitElement } from 'lit';
4
+ import { customElement, property } from 'lit/decorators.js';
5
+ import { i18next } from '@operato/i18n';
6
+ import { closePopup } from '@operato/popup';
7
+ import { ScrollbarStyles } from '@operato/styles';
8
+ let OxPopupDurationInput = class OxPopupDurationInput extends LitElement {
9
+ render() {
10
+ return html `
11
+ <ox-input-duration .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-duration>
12
+
13
+ <div class="button-container">
14
+ <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
15
+ <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
16
+ </div>
17
+ `;
18
+ }
19
+ onChange(e) {
20
+ e.stopPropagation();
21
+ this.value = e.detail;
22
+ }
23
+ onCancel(e) {
24
+ closePopup(this);
25
+ }
26
+ onConfirm(e) {
27
+ this.confirmCallback && this.confirmCallback(this.value);
28
+ closePopup(this);
29
+ }
30
+ };
31
+ OxPopupDurationInput.styles = [
32
+ ScrollbarStyles,
33
+ css `
34
+ :host {
35
+ display: flex;
36
+ flex-direction: column;
37
+
38
+ background-color: #fff;
39
+
40
+ width: var(--overlay-center-normal-width, 50%);
41
+ height: var(--overlay-center-normal-height, 50%);
42
+ }
43
+
44
+ ox-input-duration {
45
+ flex: 1;
46
+ overflow-y: auto;
47
+ }
48
+
49
+ span {
50
+ flex: 1;
51
+
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+
56
+ color: var(--primary-color);
57
+ }
58
+
59
+ .button-container {
60
+ display: flex;
61
+ margin-left: auto;
62
+ }
63
+ `
64
+ ];
65
+ __decorate([
66
+ property({ type: Object })
67
+ ], OxPopupDurationInput.prototype, "value", void 0);
68
+ __decorate([
69
+ property({ type: Object })
70
+ ], OxPopupDurationInput.prototype, "confirmCallback", void 0);
71
+ OxPopupDurationInput = __decorate([
72
+ customElement('ox-popup-duration-input')
73
+ ], OxPopupDurationInput);
74
+ export { OxPopupDurationInput };
75
+ //# sourceMappingURL=ox-popup-duration-input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-popup-duration-input.js","sourceRoot":"","sources":["../../src/ox-popup-duration-input.ts"],"names":[],"mappings":";AAAA,OAAO,qCAAqC,CAAA;AAE5C,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,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAuClD,MAAM;QACJ,OAAO,IAAI,CAAA;kCACmB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;6BAGnD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,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;CACF,CAAA;AA/DQ,2BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAwC;AArCxD,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAgEhC;SAhEY,oBAAoB","sourcesContent":["import '@operato/input/ox-input-duration.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 { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-popup-duration-input')\nexport class OxPopupDurationInput extends LitElement {\n static styles = [\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-input-duration {\n flex: 1;\n overflow-y: auto;\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 .button-container {\n display: flex;\n margin-left: auto;\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n render() {\n return html`\n <ox-input-duration .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-duration>\n\n <div class=\"button-container\">\n <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n </div>\n `\n }\n\n private onChange(e: CustomEvent) {\n e.stopPropagation()\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,5 +1,5 @@
1
1
  import { LitElement } from 'lit';
2
- export declare class ParametersEditorPopup extends LitElement {
2
+ export declare class OxPopupParametersBuilder extends LitElement {
3
3
  static styles: import("lit").CSSResult[];
4
4
  value: any;
5
5
  props: any;
@@ -1,22 +1,23 @@
1
1
  import { __decorate } from "tslib";
2
- import { LitElement, css, html } from 'lit';
2
+ import { css, html, LitElement } from 'lit';
3
3
  import { customElement, property } from 'lit/decorators.js';
4
- import { ScrollbarStyles } from '@operato/styles';
5
4
  import { i18next } from '@operato/i18n';
6
- let ParametersEditorPopup = class ParametersEditorPopup extends LitElement {
5
+ import { closePopup } from '@operato/popup';
6
+ import { ScrollbarStyles } from '@operato/styles';
7
+ let OxPopupParametersBuilder = class OxPopupParametersBuilder extends LitElement {
7
8
  render() {
8
9
  var props = this.props instanceof Array ? this.props : [];
9
10
  return html `
10
11
  ${props.length > 0
11
12
  ? html `
12
- <ox-parameters-editor-builder
13
+ <ox-parameters-builder
13
14
  .value=${this.value}
14
15
  .props=${props}
15
16
  .host=${this.host}
16
17
  .context=${this.context}
17
18
  @property-change=${this.onChange.bind(this)}
18
19
  >
19
- </ox-parameters-editor-builder>
20
+ </ox-parameters-builder>
20
21
  `
21
22
  : html ` <span><i18n-msg msgid="text.no properties to set"></i18n-msg></span> `}
22
23
 
@@ -48,14 +49,14 @@ let ParametersEditorPopup = class ParametersEditorPopup extends LitElement {
48
49
  Object.assign(this.value, e.detail);
49
50
  }
50
51
  onCancel(e) {
51
- history.back();
52
+ closePopup(this);
52
53
  }
53
54
  onConfirm(e) {
54
55
  this.confirmCallback && this.confirmCallback(this.value);
55
- history.back();
56
+ closePopup(this);
56
57
  }
57
58
  };
58
- ParametersEditorPopup.styles = [
59
+ OxPopupParametersBuilder.styles = [
59
60
  ScrollbarStyles,
60
61
  css `
61
62
  :host {
@@ -68,7 +69,7 @@ ParametersEditorPopup.styles = [
68
69
  height: var(--overlay-center-normal-height, 50%);
69
70
  }
70
71
 
71
- ox-parameters-editor-builder {
72
+ ox-parameters-builder {
72
73
  flex: 1;
73
74
  overflow-y: auto;
74
75
  }
@@ -91,21 +92,21 @@ ParametersEditorPopup.styles = [
91
92
  ];
92
93
  __decorate([
93
94
  property({ type: Object })
94
- ], ParametersEditorPopup.prototype, "value", void 0);
95
+ ], OxPopupParametersBuilder.prototype, "value", void 0);
95
96
  __decorate([
96
97
  property({ type: Object })
97
- ], ParametersEditorPopup.prototype, "props", void 0);
98
+ ], OxPopupParametersBuilder.prototype, "props", void 0);
98
99
  __decorate([
99
100
  property({ type: Object })
100
- ], ParametersEditorPopup.prototype, "host", void 0);
101
+ ], OxPopupParametersBuilder.prototype, "host", void 0);
101
102
  __decorate([
102
103
  property({ type: Object })
103
- ], ParametersEditorPopup.prototype, "context", void 0);
104
+ ], OxPopupParametersBuilder.prototype, "context", void 0);
104
105
  __decorate([
105
106
  property({ type: Object })
106
- ], ParametersEditorPopup.prototype, "confirmCallback", void 0);
107
- ParametersEditorPopup = __decorate([
108
- customElement('ox-parameters-editor-popup')
109
- ], ParametersEditorPopup);
110
- export { ParametersEditorPopup };
111
- //# sourceMappingURL=parameters-editor-popup.js.map
107
+ ], OxPopupParametersBuilder.prototype, "confirmCallback", void 0);
108
+ OxPopupParametersBuilder = __decorate([
109
+ customElement('ox-popup-parameters-builder')
110
+ ], OxPopupParametersBuilder);
111
+ export { OxPopupParametersBuilder };
112
+ //# sourceMappingURL=ox-popup-parameters-builder.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-popup-parameters-builder.js","sourceRoot":"","sources":["../../src/ox-popup-parameters-builder.ts"],"names":[],"mappings":";AAAA,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,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,UAAU;IA0CtD,MAAM;QACJ,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;QAEzD,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,MAAM,GAAG,CAAC;YAChB,CAAC,CAAC,IAAI,CAAA;;uBAES,IAAI,CAAC,KAAK;uBACV,KAAK;sBACN,IAAI,CAAC,IAAI;yBACN,IAAI,CAAC,OAAO;iCACJ,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;WAG9C;YACH,CAAC,CAAC,IAAI,CAAA,wEAAwE;;;6BAGzD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;SAChB;QAED,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE;YAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;SACvB;QACD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IACrC,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;CACF,CAAA;AAjGQ,+BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAU;AACT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAwC;AAxCxD,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAkGpC;SAlGY,wBAAwB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-popup-parameters-builder')\nexport class OxPopupParametersBuilder extends LitElement {\n static styles = [\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-parameters-builder {\n flex: 1;\n overflow-y: auto;\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 .button-container {\n display: flex;\n margin-left: auto;\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: Object }) props: any\n @property({ type: Object }) host: any\n @property({ type: Object }) context: any\n @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n render() {\n var props = this.props instanceof Array ? this.props : []\n\n return html`\n ${props.length > 0\n ? html`\n <ox-parameters-builder\n .value=${this.value}\n .props=${props}\n .host=${this.host}\n .context=${this.context}\n @property-change=${this.onChange.bind(this)}\n >\n </ox-parameters-builder>\n `\n : html` <span><i18n-msg msgid=\"text.no properties to set\"></i18n-msg></span> `}\n\n <div class=\"button-container\">\n <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-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 if (!this.value) {\n this.value = {}\n }\n\n for (let key in this.value) {\n delete this.value[key]\n }\n Object.assign(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"]}
@@ -0,0 +1,12 @@
1
+ import '@operato/input/ox-input-partition-keys.js';
2
+ import { LitElement } from 'lit';
3
+ export declare class OxPopupPartitionKeysInput extends LitElement {
4
+ static styles: import("lit").CSSResult[];
5
+ value: any;
6
+ valuetype: string;
7
+ confirmCallback: (newval: any) => void;
8
+ render(): import("lit-html").TemplateResult<1>;
9
+ private onChange;
10
+ private onCancel;
11
+ private onConfirm;
12
+ }
@@ -0,0 +1,100 @@
1
+ import { __decorate } from "tslib";
2
+ import '@operato/input/ox-input-partition-keys.js';
3
+ import { css, html, LitElement } from 'lit';
4
+ import { customElement, property } from 'lit/decorators.js';
5
+ import { i18next } from '@operato/i18n';
6
+ import { closePopup } from '@operato/popup';
7
+ import { ScrollbarStyles } from '@operato/styles';
8
+ let OxPopupPartitionKeysInput = class OxPopupPartitionKeysInput extends LitElement {
9
+ constructor() {
10
+ super(...arguments);
11
+ this.valuetype = 'string';
12
+ }
13
+ render() {
14
+ return html `
15
+ <ox-input-partition-keys .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-partition-keys>
16
+
17
+ <div class="button-container">
18
+ <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
19
+ <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
20
+ </div>
21
+ `;
22
+ }
23
+ onChange(e) {
24
+ e.stopPropagation();
25
+ /*
26
+ 주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
27
+ layout의 구성에 변화가 발생하면, 다시 render된다.
28
+ 이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
29
+ 이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
30
+ 만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
31
+ 따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
32
+ (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
33
+ =>
34
+ 이런 이유로, Object.assign(...)을 사용하였다.
35
+ */
36
+ if (!this.value || typeof this.value !== 'object') {
37
+ this.value = {};
38
+ }
39
+ for (let key in this.value) {
40
+ delete this.value[key];
41
+ }
42
+ Object.assign(this.value, e.detail);
43
+ }
44
+ onCancel(e) {
45
+ closePopup(this);
46
+ }
47
+ onConfirm(e) {
48
+ this.confirmCallback && this.confirmCallback(this.value);
49
+ closePopup(this);
50
+ }
51
+ };
52
+ OxPopupPartitionKeysInput.styles = [
53
+ ScrollbarStyles,
54
+ css `
55
+ :host {
56
+ display: flex;
57
+ flex-direction: column;
58
+
59
+ background-color: #fff;
60
+
61
+ width: var(--overlay-center-normal-width, 50%);
62
+ height: var(--overlay-center-normal-height, 50%);
63
+ }
64
+
65
+ ox-input-partition-keys {
66
+ flex: 1;
67
+ overflow-y: auto;
68
+ padding: 10px;
69
+ }
70
+
71
+ span {
72
+ flex: 1;
73
+
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+
78
+ color: var(--primary-color);
79
+ }
80
+
81
+ .button-container {
82
+ display: flex;
83
+ margin-left: auto;
84
+ }
85
+ `
86
+ ];
87
+ __decorate([
88
+ property({ type: Object })
89
+ ], OxPopupPartitionKeysInput.prototype, "value", void 0);
90
+ __decorate([
91
+ property({ type: String })
92
+ ], OxPopupPartitionKeysInput.prototype, "valuetype", void 0);
93
+ __decorate([
94
+ property({ type: Object })
95
+ ], OxPopupPartitionKeysInput.prototype, "confirmCallback", void 0);
96
+ OxPopupPartitionKeysInput = __decorate([
97
+ customElement('ox-popup-partition-keys-input')
98
+ ], OxPopupPartitionKeysInput);
99
+ export { OxPopupPartitionKeysInput };
100
+ //# sourceMappingURL=ox-popup-partition-keys-input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-popup-partition-keys-input.js","sourceRoot":"","sources":["../../src/ox-popup-partition-keys-input.ts"],"names":[],"mappings":";AAAA,OAAO,2CAA2C,CAAA;AAElD,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,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAa,yBAAyB,GAAtC,MAAa,yBAA0B,SAAQ,UAAU;IAAzD;;QAsC8B,cAAS,GAAW,QAAQ,CAAA;IAgD1D,CAAC;IA7CC,MAAM;QACJ,OAAO,IAAI,CAAA;wCACyB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;6BAGzD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QAEF,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YACjD,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;SAChB;QAED,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE;YAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;SACvB;QAED,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IACrC,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;CACF,CAAA;AArFQ,gCAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAAwC;AAvCxD,yBAAyB;IADrC,aAAa,CAAC,+BAA+B,CAAC;GAClC,yBAAyB,CAsFrC;SAtFY,yBAAyB","sourcesContent":["import '@operato/input/ox-input-partition-keys.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 { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-popup-partition-keys-input')\nexport class OxPopupPartitionKeysInput extends LitElement {\n static styles = [\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-input-partition-keys {\n flex: 1;\n overflow-y: auto;\n padding: 10px;\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 .button-container {\n display: flex;\n margin-left: auto;\n }\n `\n ]\n\n @property({ type: Object }) value: any\n @property({ type: String }) valuetype: string = 'string'\n @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n render() {\n return html`\n <ox-input-partition-keys .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-partition-keys>\n\n <div class=\"button-container\">\n <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-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\n if (!this.value || typeof this.value !== 'object') {\n this.value = {}\n }\n\n for (let key in this.value) {\n delete this.value[key]\n }\n\n Object.assign(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"]}
@@ -0,0 +1,12 @@
1
+ import '@operato/input/ox-input-value-map.js';
2
+ import { LitElement } from 'lit';
3
+ export declare class OxPopupValueMapInput extends LitElement {
4
+ static styles: import("lit").CSSResult[];
5
+ value: any;
6
+ valuetype: string;
7
+ confirmCallback: (newval: any) => void;
8
+ render(): import("lit-html").TemplateResult<1>;
9
+ private onChange;
10
+ private onCancel;
11
+ private onConfirm;
12
+ }