@operato/app 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/src/grist-editor/ox-grist-renderer-crontab.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-renderer-crontab.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-renderer-crontab.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,OAAO,MAAM,SAAS,CAAA;AAE7B,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,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,IAAI,IAAI,EAAE,CAAC,CAAA;KAC1F;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 { FieldRenderer } from '@operato/data-grist'\nimport cronstrue from 'cronstrue/i18n'\nimport { detectOverflow } from '@operato/utils'\nimport { html } from 'lit'\nimport i18next from 'i18next'\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 === undefined ? '' : 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"]}
+{"version":3,"file":"ox-grist-renderer-crontab.js","sourceRoot":"","sources":["../../../src/grist-editor/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"]}

package/dist/src/grist-editor/ox-grist-renderer-resource-id.js

@@ -3,7 +3,10 @@ export const OxGristRendererResourceId = (value, column, record, rowIndex, field
     if (!value) {
         return '';
     }
-    var { nameField = 'name', descriptionField = 'description' } = column.record.options || {};
-    return html `<span>${value[nameField] || ''}(${value[descriptionField] || ''})</span> `;
+    const { nameField = 'name', descriptionField = 'description' } = column.record.options || {};
+    const name = value[nameField] || '';
+    const description = value[descriptionField] || '';
+    const suffix = description ? `(${description})` : '';
+    return html `<span>${name}${suffix}</span> `;
 };
 //# sourceMappingURL=ox-grist-renderer-resource-id.js.map

package/dist/src/grist-editor/ox-grist-renderer-resource-id.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-grist-renderer-resource-id.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-renderer-resource-id.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,yBAAyB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACjG,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IAED,IAAI,EAAE,SAAS,GAAG,MAAM,EAAE,gBAAgB,GAAG,aAAa,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE1F,OAAO,IAAI,CAAA,SAAS,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,gBAAgB,CAAC,IAAI,EAAE,WAAW,CAAA;AACxF,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '@operato/data-grist'\n\nexport const OxGristRendererResourceId: FieldRenderer = (value, column, record, rowIndex, field) => {\n  if (!value) {\n    return ''\n  }\n\n  var { nameField = 'name', descriptionField = 'description' } = column.record.options || {}\n\n  return html`<span>${value[nameField] || ''}(${value[descriptionField] || ''})</span> `\n}\n"]}
+{"version":3,"file":"ox-grist-renderer-resource-id.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-grist-renderer-resource-id.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,yBAAyB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IACjG,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAA;KACV;IAED,MAAM,EAAE,SAAS,GAAG,MAAM,EAAE,gBAAgB,GAAG,aAAa,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE5F,MAAM,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;IACnC,MAAM,WAAW,GAAG,KAAK,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAA;IACjD,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAEpD,OAAO,IAAI,CAAA,SAAS,IAAI,GAAG,MAAM,UAAU,CAAA;AAC7C,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '@operato/data-grist'\n\nexport const OxGristRendererResourceId: FieldRenderer = (value, column, record, rowIndex, field) => {\n  if (!value) {\n    return ''\n  }\n\n  const { nameField = 'name', descriptionField = 'description' } = column.record.options || {}\n\n  const name = value[nameField] || ''\n  const description = value[descriptionField] || ''\n  const suffix = description ? `(${description})` : ''\n\n  return html`<span>${name}${suffix}</span> `\n}\n"]}

package/dist/src/grist-editor/ox-popup-partition-keys-input.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-partition-keys.js';
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ScrollbarStyles } from '@operato/styles';
 import { i18next } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
 let OxPopupPartitionKeysInput = class OxPopupPartitionKeysInput extends LitElement {
     constructor() {
         super(...arguments);
@@ -64,6 +64,7 @@ OxPopupPartitionKeysInput.styles = [
       ox-input-partition-keys {
         flex: 1;
         overflow-y: auto;
+        padding: 10px;
       }
 
       span {

package/dist/src/grist-editor/ox-popup-partition-keys-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-partition-keys-input.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-popup-partition-keys-input.ts"],"names":[],"mappings":";AAAA,OAAO,2CAA2C,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,IAAa,yBAAyB,GAAtC,MAAa,yBAA0B,SAAQ,UAAU;IAAzD;;QAqC8B,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,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;CACF,CAAA;AApFQ,gCAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;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;AAtCxD,yBAAyB;IADrC,aAAa,CAAC,+BAA+B,CAAC;GAClC,yBAAyB,CAqFrC;SArFY,yBAAyB","sourcesContent":["import '@operato/input/ox-input-partition-keys.js'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\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      }\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    history.back()\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    history.back()\n  }\n}\n"]}
+{"version":3,"file":"ox-popup-partition-keys-input.js","sourceRoot":"","sources":["../../../src/grist-editor/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,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,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,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 { 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    history.back()\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    history.back()\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -1,3 +1,4 @@
 export * from './input/index.js';
-export * from './property-editor';
+export * from './property-editor/index.js';
 export * from './grist-editor/index.js';
+export * from './filter-renderer/index.js';

package/dist/src/index.js

@@ -1,4 +1,5 @@
 export * from './input/index.js';
-export * from './property-editor';
+export * from './property-editor/index.js';
 export * from './grist-editor/index.js';
+export * from './filter-renderer/index.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA","sourcesContent":["export * from './input/index.js'\nexport * from './property-editor'\nexport * from './grist-editor/index.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA","sourcesContent":["export * from './input/index.js'\nexport * from './property-editor/index.js'\nexport * from './grist-editor/index.js'\nexport * from './filter-renderer/index.js'\n"]}

package/dist/src/input/ox-input-resource.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import 'codemirror/addon/display/fullscreen';
+import 'codemirror/addon/display/autorefresh';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/lint/lint';
+import 'codemirror-graphql/hint';
+import 'codemirror-graphql/lint';
+import 'codemirror-graphql/mode';
+import { LitElement, PropertyValues } from 'lit';
+import CodeMirror from 'codemirror';
+/**
+ WEB Component for code-mirror graphql editor.
+ 
+ Example:
+ 
+   <ox-input-graphql value=${text} link=${link}>
+   </ox-input-graphql>
+ */
+export default class OxInputGraphql extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * `value`는 에디터에서 작성중인 contents이다.
+     */
+    value?: string;
+    link?: string;
+    textarea: HTMLTextAreaElement;
+    private _self_changing;
+    private _changed;
+    private _editor?;
+    updated(changes: PropertyValues<this>): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    getSchema(): Promise<import("graphql").GraphQLSchema>;
+    getEditor(): Promise<CodeMirror.EditorFromTextArea | undefined>;
+}

package/dist/src/input/ox-input-resource.js

@@ -0,0 +1,161 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import 'codemirror/addon/display/fullscreen';
+import 'codemirror/addon/display/autorefresh';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/lint/lint';
+import 'codemirror-graphql/hint';
+import 'codemirror-graphql/lint';
+import 'codemirror-graphql/mode';
+import { GRAPHQL_URI } from '@operato/graphql';
+import { LitElement, css, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { introspectSchema, wrapSchema } from '@graphql-tools/wrap';
+import CodeMirror from 'codemirror';
+import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
+import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
+import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css';
+import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
+import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css';
+import { fetch } from 'cross-fetch';
+import { print } from 'graphql';
+/**
+ WEB Component for code-mirror graphql editor.
+ 
+ Example:
+ 
+   <ox-input-graphql value=${text} link=${link}>
+   </ox-input-graphql>
+ */
+let OxInputGraphql = class OxInputGraphql extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._self_changing = false;
+        this._changed = false;
+    }
+    async updated(changes) {
+        if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {
+            if (changes.has('link')) {
+                this._editor = undefined;
+            }
+            ;
+            (await this.getEditor()).setValue(this.value === undefined ? '' : String(this.value));
+            // ;(await this.getEditor()).refresh()
+        }
+    }
+    render() {
+        return html ` <textarea></textarea> `;
+    }
+    async getSchema() {
+        const executor = async ({ document, variables }) => {
+            const query = print(document);
+            const uri = this.link || GRAPHQL_URI;
+            const fetchResult = await fetch(uri, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ query, variables })
+            });
+            return fetchResult.json();
+        };
+        return await wrapSchema({
+            schema: await introspectSchema(executor),
+            executor
+        });
+    }
+    async getEditor() {
+        if (!this._editor) {
+            try {
+                var schema = await this.getSchema();
+            }
+            catch (err) {
+                console.error(err);
+            }
+            if (this.textarea) {
+                this._editor = CodeMirror.fromTextArea(this.textarea, {
+                    value: this.value,
+                    mode: 'graphql',
+                    lint: {
+                        //@ts-ignore
+                        schema
+                    },
+                    hintOptions: {
+                        //@ts-ignore
+                        schema
+                    },
+                    tabSize: 2,
+                    lineNumbers: false,
+                    showCursorWhenSelecting: true,
+                    theme: 'night',
+                    extraKeys: {
+                        F11: function (cm) {
+                            cm.setOption('fullScreen', !cm.getOption('fullScreen'));
+                        },
+                        Esc: function (cm) {
+                            cm.setOption('fullScreen', !cm.getOption('fullScreen'));
+                        }
+                    },
+                    autoRefresh: {
+                        delay: 500
+                    }
+                });
+                this._editor.on('blur', (editor, e) => {
+                    if (!this._changed)
+                        return;
+                    this.value = editor.getValue();
+                    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+                });
+                this._editor.on('change', async (editor, changeObj) => {
+                    this._self_changing = true;
+                    this._changed = true;
+                    await this.requestUpdate();
+                    this._self_changing = false;
+                });
+            }
+        }
+        return this._editor;
+    }
+};
+OxInputGraphql.styles = [
+    css `
+      ${unsafeCSS(CodeMirrorStyle)}
+      ${unsafeCSS(FullScreenStyle)}
+         ${unsafeCSS(NightThemeStyle)}
+         ${unsafeCSS(LintStyle)}
+         ${unsafeCSS(ShowHintStyle)}
+    `,
+    css `
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      textarea {
+        display: block;
+        height: 100%;
+        width: 100%;
+        resize: none;
+        font-size: 16px;
+        line-height: 20px;
+        border: 0px;
+        padding: 0px;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxInputGraphql.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxInputGraphql.prototype, "link", void 0);
+__decorate([
+    query('textarea')
+], OxInputGraphql.prototype, "textarea", void 0);
+OxInputGraphql = __decorate([
+    customElement('ox-input-graphql')
+], OxInputGraphql);
+export default OxInputGraphql;
+//# sourceMappingURL=ox-input-resource.js.map

package/dist/src/input/ox-input-resource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-resource.js","sourceRoot":"","sources":["../../../src/input/ox-input-resource.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'codemirror/addon/display/fullscreen'\nimport 'codemirror/addon/display/autorefresh'\nimport 'codemirror/addon/hint/show-hint'\nimport 'codemirror/addon/lint/lint'\nimport 'codemirror-graphql/hint'\nimport 'codemirror-graphql/lint'\nimport 'codemirror-graphql/mode'\n\nimport { GRAPHQL_URI, client } from '@operato/graphql'\nimport { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { introspectSchema, wrapSchema } from '@graphql-tools/wrap'\n\nimport CodeMirror from 'codemirror'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'\nimport { fetch } from 'cross-fetch'\nimport { print } from 'graphql'\n\n/**\n WEB Component for code-mirror graphql editor.\n \n Example:\n \n   <ox-input-graphql value=${text} link=${link}>\n   </ox-input-graphql>\n */\n@customElement('ox-input-graphql')\nexport default class OxInputGraphql extends LitElement {\n  static styles = [\n    css`\n      ${unsafeCSS(CodeMirrorStyle)}\n      ${unsafeCSS(FullScreenStyle)}\n         ${unsafeCSS(NightThemeStyle)}\n         ${unsafeCSS(LintStyle)}\n         ${unsafeCSS(ShowHintStyle)}\n    `,\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      textarea {\n        display: block;\n        height: 100%;\n        width: 100%;\n        resize: none;\n        font-size: 16px;\n        line-height: 20px;\n        border: 0px;\n        padding: 0px;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value?: string\n  @property({ type: String }) link?: string\n\n  @query('textarea') textarea!: HTMLTextAreaElement\n\n  private _self_changing: boolean = false\n  private _changed: boolean = false\n  private _editor?: CodeMirror.EditorFromTextArea\n\n  async updated(changes: PropertyValues<this>) {\n    if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {\n      if (changes.has('link')) {\n        this._editor = undefined\n      }\n      ;(await this.getEditor())!.setValue(this.value === undefined ? '' : String(this.value))\n      // ;(await this.getEditor()).refresh()\n    }\n  }\n\n  render() {\n    return html` <textarea></textarea> `\n  }\n\n  async getSchema() {\n    const executor = async ({ document, variables }: any) => {\n      const query = print(document)\n      const uri = this.link || GRAPHQL_URI\n\n      const fetchResult = await fetch(uri, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({ query, variables })\n      })\n      return fetchResult.json()\n    }\n\n    return await wrapSchema({\n      schema: await introspectSchema(executor),\n      executor\n    })\n  }\n\n  async getEditor() {\n    if (!this._editor) {\n      try {\n        var schema = await this.getSchema()\n      } catch (err) {\n        console.error(err)\n      }\n\n      if (this.textarea) {\n        this._editor = CodeMirror.fromTextArea(this.textarea, {\n          value: this.value,\n          mode: 'graphql',\n          lint: {\n            //@ts-ignore\n            schema\n          },\n          hintOptions: {\n            //@ts-ignore\n            schema\n          },\n          tabSize: 2,\n          lineNumbers: false,\n          showCursorWhenSelecting: true,\n          theme: 'night',\n          extraKeys: {\n            F11: function (cm) {\n              cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n            },\n            Esc: function (cm) {\n              cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n            }\n          },\n          autoRefresh: {\n            delay: 500\n          }\n        })\n\n        this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {\n          if (!this._changed) return\n\n          this.value = editor.getValue()\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        })\n\n        this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {\n          this._self_changing = true\n\n          this._changed = true\n\n          await this.requestUpdate()\n\n          this._self_changing = false\n        })\n      }\n    }\n\n    return this._editor\n  }\n}\n"]}