@things-factory/id-rule-base 7.0.1-alpha.64 → 7.0.1-alpha.71

package/client/bootstrap.ts

@@ -0,0 +1,8 @@
+import { registerEditor } from '@operato/data-grist'
+
+import { GristCodeInput } from './editors/grist-code-input'
+
+export default function bootstrap() {
+  /* id-rule 의 GristRenderer는 텍스트와 같으므로, 별도로 정의하지 않음. */
+  registerEditor('id-rule', GristCodeInput)
+}

package/client/editors/{grist-code-input-popup.js → grist-code-input-popup.ts}

@@ -1,11 +1,15 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 import '@operato/i18n/ox-i18n.js'
 import '@operato/input/ox-input-code.js'
 
-import { i18next } from '@things-factory/i18n-base'
-import { client, gqlContext } from '@things-factory/shell'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { ColumnConfig, GristRecord } from '@operato/data-grist'
+import { OxInputCode } from '@operato/input'
 
 const FETCH_ID_RULE_GQL = type => {
   return gql`
@@ -19,9 +23,10 @@ const FETCH_ID_RULE_GQL = type => {
 `
 }
 
+@customElement('grist-code-input-popup')
 export class GristCodeInputPopup extends LitElement {
-  static get styles() {
-    return css`
+  static styles = [
+    css`
       :host {
         display: flex;
         flex-direction: column;
@@ -80,19 +85,18 @@ export class GristCodeInputPopup extends LitElement {
         justify-content: flex-end;
       }
     `
-  }
+  ]
+
+  @property({ type: String }) value?: string
+  @property({ type: Object }) column?: ColumnConfig
+  @property({ type: Object }) record?: GristRecord
+  @property({ type: Number }) row?: number
+  @property({ type: Object }) field?: any
+  @property({ type: Object }) _idRule?: any
+  @property({ type: Object }) headers?: { [header: string]: string }
+
+  @query('ox-input-code') ruleEditor!: OxInputCode
 
-  static get properties() {
-    return {
-      value: String,
-      column: Object,
-      record: Object,
-      row: Number,
-      field: Object,
-      _idRule: Object,
-      headers: Object
-    }
-  }
   render() {
     return html`
       <div id="wrapper">
@@ -102,13 +106,14 @@ export class GristCodeInputPopup extends LitElement {
           <li><span>seed</span><ox-i18n msgid="label.argument seed description"></ox-i18n></li>
         </ul>
         <ox-input-code id="rule-editor" type="text" .value=${(this._idRule || {}).rule}></ox-input-code>
+
         <div id="footer">
-          <mwc-button
-            label=${i18next.t('button.save')}
-            @click=${e => {
+          <md-elevated-button
+            label=${String(i18next.t('button.save'))}
+            @click=${(e: Event) => {
               this.updateIdRule()
             }}
-          ></mwc-button>
+          ></md-elevated-button>
         </div>
       </div>
     `
@@ -117,15 +122,14 @@ export class GristCodeInputPopup extends LitElement {
   updated(changed) {
     if (changed.has('value')) {
       if (this.value && typeof this.value === 'string') {
-        this.getRule(this.value)
+        this.getRule()
       }
     }
   }
 
   async getRule() {
     var response = await client.query({
-      query: FETCH_ID_RULE_GQL(this.value),
-      context: gqlContext()
+      query: FETCH_ID_RULE_GQL(this.value)
     })
 
     let idRule = response.data.idRule
@@ -153,8 +157,7 @@ export class GristCodeInputPopup extends LitElement {
             }
           }
         `,
-        variables: { idRule },
-        context: gqlContext()
+        variables: { idRule }
       })
     ).data?.createIdRule
   }
@@ -162,13 +165,12 @@ export class GristCodeInputPopup extends LitElement {
   async updateIdRule() {
     if (!this._idRule) console.error('ID Rule not found')
 
-    const editor = this.renderRoot.querySelector('#rule-editor')
-    const rule = editor.value
+    const rule = this.ruleEditor.value
 
     const type = this._idRule.type
 
     const patch = {
-      ...this.idRule,
+      ...this._idRule,
       rule
     }
 
@@ -181,8 +183,7 @@ export class GristCodeInputPopup extends LitElement {
           }
         }
       `,
-      variables: { type, patch },
-      context: gqlContext()
+      variables: { type, patch }
     })
 
     this.dispatchEvent(
@@ -193,4 +194,3 @@ export class GristCodeInputPopup extends LitElement {
     )
   }
 }
-customElements.define('grist-code-input-popup', GristCodeInputPopup)

package/client/editors/{grist-code-input.js → grist-code-input.ts}

@@ -1,13 +1,17 @@
-import '@material/mwc-button'
-import { OxGristEditor } from '@operato/data-grist'
-import { i18next } from '@things-factory/i18n-base'
+import '@material/web/icon/icon.js'
+
 import { css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { OxPopup } from '@operato/popup'
+
 import './grist-code-input-popup'
-import './id-rule-renderer'
 
+@customElement('grist-code-input')
 export class GristCodeInput extends OxGristEditor {
-  static get styles() {
-    return css`
+  static styles = [
+    css`
       :host {
         display: flex;
         flex-flow: row nowrap;
@@ -28,14 +32,7 @@ export class GristCodeInput extends OxGristEditor {
         justify-content: inherit;
       }
 
-      id-rule-renderer {
-        display: flex;
-        flex: auto;
-
-        justify-content: inherit;
-      }
-
-      mwc-icon {
+      md-icon {
         width: 20px;
         font-size: 1.5em;
       }
@@ -55,15 +52,10 @@ export class GristCodeInput extends OxGristEditor {
         border: none;
       }
     `
-  }
+  ]
 
-  static get properties() {
-    return {
-      ...OxGristEditor.properties,
-      headers: Object,
-      popup: Object
-    }
-  }
+  @property({ type: Object }) headers?: Object
+  @property({ type: Object }) popup?: OxPopup | null
 
   render() {
     return html`
@@ -75,7 +67,8 @@ export class GristCodeInput extends OxGristEditor {
         .field=${this.column}
         .row=${this.row}
       ></input>
-      <mwc-icon id="more" @click=${e => this.openPopup()}>more_vert</mwc-icon>
+
+      <md-icon id="more" @click=${e => this.openPopup()}>more_vert</md-icon>
     `
   }
 
@@ -110,7 +103,7 @@ export class GristCodeInput extends OxGristEditor {
               .field=${this.field}
               .headers=${this.headers}
               @close-popup=${e => {
-                this.popup.close()
+                this.popup?.close()
                 this.popup = null
               }}
             ></grist-code-input-popup>
@@ -126,4 +119,3 @@ export class GristCodeInput extends OxGristEditor {
     )
   }
 }
-customElements.define('grist-code-input', GristCodeInput)

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,7 @@
+import { registerEditor } from '@operato/data-grist';
+import { GristCodeInput } from './editors/grist-code-input';
+export default function bootstrap() {
+    /* id-rule 의 GristRenderer는 텍스트와 같으므로, 별도로 정의하지 않음. */
+    registerEditor('id-rule', GristCodeInput);
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,sDAAsD;IACtD,cAAc,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;AAC3C,CAAC","sourcesContent":["import { registerEditor } from '@operato/data-grist'\n\nimport { GristCodeInput } from './editors/grist-code-input'\n\nexport default function bootstrap() {\n  /* id-rule 의 GristRenderer는 텍스트와 같으므로, 별도로 정의하지 않음. */\n  registerEditor('id-rule', GristCodeInput)\n}\n"]}

package/dist-client/editors/grist-code-input-popup.d.ts

@@ -0,0 +1,24 @@
+import '@material/web/button/elevated-button.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/input/ox-input-code.js';
+import { LitElement } from 'lit';
+import { ColumnConfig, GristRecord } from '@operato/data-grist';
+import { OxInputCode } from '@operato/input';
+export declare class GristCodeInputPopup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: string;
+    column?: ColumnConfig;
+    record?: GristRecord;
+    row?: number;
+    field?: any;
+    _idRule?: any;
+    headers?: {
+        [header: string]: string;
+    };
+    ruleEditor: OxInputCode;
+    render(): import("lit").TemplateResult<1>;
+    updated(changed: any): void;
+    getRule(): Promise<void>;
+    createIdRule(): Promise<any>;
+    updateIdRule(): Promise<void>;
+}

package/dist-client/editors/grist-code-input-popup.js

@@ -0,0 +1,200 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/elevated-button.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/input/ox-input-code.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { client } from '@operato/graphql';
+import { OxInputCode } from '@operato/input';
+const FETCH_ID_RULE_GQL = type => {
+    return gql `
+  {
+    idRule(type:"${type}") {
+      id,
+      type,
+      rule
+    }
+  }
+`;
+};
+let GristCodeInputPopup = class GristCodeInputPopup extends LitElement {
+    render() {
+        return html `
+      <div id="wrapper">
+        <h4><ox-i18n msgid="label.arguments"></ox-i18n></h4>
+        <ul>
+          <li><span>domain</span><ox-i18n msgid="label.argument domain description"></ox-i18n></li>
+          <li><span>seed</span><ox-i18n msgid="label.argument seed description"></ox-i18n></li>
+        </ul>
+        <ox-input-code id="rule-editor" type="text" .value=${(this._idRule || {}).rule}></ox-input-code>
+
+        <div id="footer">
+          <md-elevated-button
+            label=${String(i18next.t('button.save'))}
+            @click=${(e) => {
+            this.updateIdRule();
+        }}
+          ></md-elevated-button>
+        </div>
+      </div>
+    `;
+    }
+    updated(changed) {
+        if (changed.has('value')) {
+            if (this.value && typeof this.value === 'string') {
+                this.getRule();
+            }
+        }
+    }
+    async getRule() {
+        var response = await client.query({
+            query: FETCH_ID_RULE_GQL(this.value)
+        });
+        let idRule = response.data.idRule;
+        if (!idRule) {
+            idRule = await this.createIdRule();
+        }
+        this._idRule = idRule;
+        this.requestUpdate();
+    }
+    async createIdRule() {
+        var _a;
+        var idRule = {
+            type: this.value,
+            rule: `return ''`
+        };
+        return (_a = (await client.mutate({
+            mutation: gql `
+          mutation createIdRule($idRule: NewIdRule!) {
+            createIdRule(idRule: $idRule) {
+              type
+              rule
+            }
+          }
+        `,
+            variables: { idRule }
+        })).data) === null || _a === void 0 ? void 0 : _a.createIdRule;
+    }
+    async updateIdRule() {
+        if (!this._idRule)
+            console.error('ID Rule not found');
+        const rule = this.ruleEditor.value;
+        const type = this._idRule.type;
+        const patch = Object.assign(Object.assign({}, this._idRule), { rule });
+        await client.mutate({
+            mutation: gql `
+        mutation updateIdRule($type: String!, $patch: IdRulePatch!) {
+          updateIdRule(type: $type, patch: $patch) {
+            type
+            rule
+          }
+        }
+      `,
+            variables: { type, patch }
+        });
+        this.dispatchEvent(new CustomEvent('close-popup', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+};
+GristCodeInputPopup.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        align-items: center;
+        box-sizing: border-box;
+        width: 100%;
+        border: 0;
+        background-color: var(--popup-content-background-color);
+
+        font: var(--grist-object-editor-font);
+        color: var(--grist-object-editor-color);
+
+        justify-content: inherit;
+      }
+
+      :host * {
+        box-sizing: border-box;
+      }
+
+      #wrapper {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: 5px;
+      }
+
+      #wrapper > h4 {
+        margin: 0;
+      }
+
+      #wrapper > ul {
+        width: 100%;
+      }
+
+      #wrapper > ul > li {
+        display: flex;
+      }
+      #wrapper > ul > li > span {
+        font-weight: bold;
+        flex-basis: 200px;
+      }
+
+      #wrapper > ul > li > ox-i18n {
+        flex: 1;
+      }
+
+      ox-input-code {
+        width: 100%;
+        flex: 1;
+      }
+
+      #footer {
+        display: flex;
+        justify-content: flex-end;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], GristCodeInputPopup.prototype, "value", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], GristCodeInputPopup.prototype, "column", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], GristCodeInputPopup.prototype, "record", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], GristCodeInputPopup.prototype, "row", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], GristCodeInputPopup.prototype, "field", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], GristCodeInputPopup.prototype, "_idRule", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], GristCodeInputPopup.prototype, "headers", void 0);
+__decorate([
+    query('ox-input-code'),
+    __metadata("design:type", OxInputCode)
+], GristCodeInputPopup.prototype, "ruleEditor", void 0);
+GristCodeInputPopup = __decorate([
+    customElement('grist-code-input-popup')
+], GristCodeInputPopup);
+export { GristCodeInputPopup };
+//# sourceMappingURL=grist-code-input-popup.js.map

package/dist-client/editors/grist-code-input-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grist-code-input-popup.js","sourceRoot":"","sources":["../../client/editors/grist-code-input-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-code.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport { ColumnConfig, GristRecord } from '@operato/data-grist'\nimport { OxInputCode } from '@operato/input'\n\nconst FETCH_ID_RULE_GQL = type => {\n  return gql`\n  {\n    idRule(type:\"${type}\") {\n      id,\n      type,\n      rule\n    }\n  }\n`\n}\n\n@customElement('grist-code-input-popup')\nexport class GristCodeInputPopup extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        padding: 0;\n        align-items: center;\n        box-sizing: border-box;\n        width: 100%;\n        border: 0;\n        background-color: var(--popup-content-background-color);\n\n        font: var(--grist-object-editor-font);\n        color: var(--grist-object-editor-color);\n\n        justify-content: inherit;\n      }\n\n      :host * {\n        box-sizing: border-box;\n      }\n\n      #wrapper {\n        flex: 1;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        padding: 5px;\n      }\n\n      #wrapper > h4 {\n        margin: 0;\n      }\n\n      #wrapper > ul {\n        width: 100%;\n      }\n\n      #wrapper > ul > li {\n        display: flex;\n      }\n      #wrapper > ul > li > span {\n        font-weight: bold;\n        flex-basis: 200px;\n      }\n\n      #wrapper > ul > li > ox-i18n {\n        flex: 1;\n      }\n\n      ox-input-code {\n        width: 100%;\n        flex: 1;\n      }\n\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) column?: ColumnConfig\n  @property({ type: Object }) record?: GristRecord\n  @property({ type: Number }) row?: number\n  @property({ type: Object }) field?: any\n  @property({ type: Object }) _idRule?: any\n  @property({ type: Object }) headers?: { [header: string]: string }\n\n  @query('ox-input-code') ruleEditor!: OxInputCode\n\n  render() {\n    return html`\n      <div id=\"wrapper\">\n        <h4><ox-i18n msgid=\"label.arguments\"></ox-i18n></h4>\n        <ul>\n          <li><span>domain</span><ox-i18n msgid=\"label.argument domain description\"></ox-i18n></li>\n          <li><span>seed</span><ox-i18n msgid=\"label.argument seed description\"></ox-i18n></li>\n        </ul>\n        <ox-input-code id=\"rule-editor\" type=\"text\" .value=${(this._idRule || {}).rule}></ox-input-code>\n\n        <div id=\"footer\">\n          <md-elevated-button\n            label=${String(i18next.t('button.save'))}\n            @click=${(e: Event) => {\n              this.updateIdRule()\n            }}\n          ></md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n\n  updated(changed) {\n    if (changed.has('value')) {\n      if (this.value && typeof this.value === 'string') {\n        this.getRule()\n      }\n    }\n  }\n\n  async getRule() {\n    var response = await client.query({\n      query: FETCH_ID_RULE_GQL(this.value)\n    })\n\n    let idRule = response.data.idRule\n    if (!idRule) {\n      idRule = await this.createIdRule()\n    }\n\n    this._idRule = idRule\n    this.requestUpdate()\n  }\n\n  async createIdRule() {\n    var idRule = {\n      type: this.value,\n      rule: `return ''`\n    }\n\n    return (\n      await client.mutate({\n        mutation: gql`\n          mutation createIdRule($idRule: NewIdRule!) {\n            createIdRule(idRule: $idRule) {\n              type\n              rule\n            }\n          }\n        `,\n        variables: { idRule }\n      })\n    ).data?.createIdRule\n  }\n\n  async updateIdRule() {\n    if (!this._idRule) console.error('ID Rule not found')\n\n    const rule = this.ruleEditor.value\n\n    const type = this._idRule.type\n\n    const patch = {\n      ...this._idRule,\n      rule\n    }\n\n    await client.mutate({\n      mutation: gql`\n        mutation updateIdRule($type: String!, $patch: IdRulePatch!) {\n          updateIdRule(type: $type, patch: $patch) {\n            type\n            rule\n          }\n        }\n      `,\n      variables: { type, patch }\n    })\n\n    this.dispatchEvent(\n      new CustomEvent('close-popup', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

package/dist-client/editors/grist-code-input.d.ts

@@ -0,0 +1,12 @@
+import '@material/web/icon/icon.js';
+import { OxGristEditor } from '@operato/data-grist';
+import { OxPopup } from '@operato/popup';
+import './grist-code-input-popup';
+export declare class GristCodeInput extends OxGristEditor {
+    static styles: import("lit").CSSResult[];
+    headers?: Object;
+    popup?: OxPopup | null;
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    openPopup(): void;
+}

package/dist-client/editors/grist-code-input.js

@@ -0,0 +1,119 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxGristEditor } from '@operato/data-grist';
+import { i18next } from '@operato/i18n';
+import './grist-code-input-popup';
+let GristCodeInput = class GristCodeInput extends OxGristEditor {
+    render() {
+        return html `
+      <input
+        type="text"
+        .value=${this.value}
+        .record=${this.record}
+        .column=${this.column}
+        .field=${this.column}
+        .row=${this.row}
+      ></input>
+
+      <md-icon id="more" @click=${e => this.openPopup()}>more_vert</md-icon>
+    `;
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        await super.firstUpdated();
+    }
+    openPopup() {
+        if (this.record.__dirty__) {
+            document.dispatchEvent(new CustomEvent('notify', {
+                detail: {
+                    level: 'error',
+                    message: i18next.t('text.please_save_your_modifications_first')
+                }
+            }));
+            return;
+        }
+        document.dispatchEvent(new CustomEvent('open-popup', {
+            detail: {
+                template: html `
+            <grist-code-input-popup
+              .value=${this.value}
+              .column=${this.column}
+              .record=${this.record}
+              .row=${this.row}
+              .field=${this.field}
+              .headers=${this.headers}
+              @close-popup=${e => {
+                    var _a;
+                    (_a = this.popup) === null || _a === void 0 ? void 0 : _a.close();
+                    this.popup = null;
+                }}
+            ></grist-code-input-popup>
+          `,
+                options: {
+                    title: i18next.t('title.ID Rule Editor')
+                },
+                callback: popup => {
+                    this.popup = popup;
+                }
+            }
+        }));
+    }
+};
+GristCodeInput.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        padding: 7px 0px;
+        box-sizing: border-box;
+
+        width: 100%;
+        height: 100%;
+
+        border: 0;
+        background-color: transparent;
+
+        font: var(--grist-object-editor-font);
+        color: var(--grist-object-editor-color);
+
+        justify-content: inherit;
+      }
+
+      md-icon {
+        width: 20px;
+        font-size: 1.5em;
+      }
+
+      #popup {
+        display: flex;
+        overflow: hidden;
+      }
+
+      input {
+        border: none;
+        background-color: transparent;
+      }
+
+      input:focus {
+        outline: none;
+        border: none;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], GristCodeInput.prototype, "headers", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], GristCodeInput.prototype, "popup", void 0);
+GristCodeInput = __decorate([
+    customElement('grist-code-input')
+], GristCodeInput);
+export { GristCodeInput };
+//# sourceMappingURL=grist-code-input.js.map

package/dist-client/editors/grist-code-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grist-code-input.js","sourceRoot":"","sources":["../../client/editors/grist-code-input.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,OAAO,0BAA0B,CAAA;AAG1B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,aAAa;IAgD/C,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;kBACT,IAAI,CAAC,MAAM;kBACX,IAAI,CAAC,MAAM;iBACZ,IAAI,CAAC,MAAM;eACb,IAAI,CAAC,GAAG;;;kCAGW,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;KAClD,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,MAAM,KAAK,CAAC,YAAY,EAAE,CAAA;IAC5B,CAAC;IAED,SAAS;QACP,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE;YACzB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE;oBACN,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,2CAA2C,CAAC;iBAChE;aACF,CAAC,CACH,CAAA;YAED,OAAM;SACP;QAED,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE;gBACN,QAAQ,EAAE,IAAI,CAAA;;uBAED,IAAI,CAAC,KAAK;wBACT,IAAI,CAAC,MAAM;wBACX,IAAI,CAAC,MAAM;qBACd,IAAI,CAAC,GAAG;uBACN,IAAI,CAAC,KAAK;yBACR,IAAI,CAAC,OAAO;6BACR,CAAC,CAAC,EAAE;;oBACjB,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,CAAA;oBACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;gBACnB,CAAC;;WAEJ;gBACD,OAAO,EAAE;oBACP,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;iBACzC;gBACD,QAAQ,EAAE,KAAK,CAAC,EAAE;oBAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;gBACpB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;;AA3GM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8BAAW,MAAM;+CAAA;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAAuB;AA9CvC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA6G1B;SA7GY,cAAc","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { OxGristEditor } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { OxPopup } from '@operato/popup'\n\nimport './grist-code-input-popup'\n\n@customElement('grist-code-input')\nexport class GristCodeInput extends OxGristEditor {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-flow: row nowrap;\n        align-items: center;\n\n        padding: 7px 0px;\n        box-sizing: border-box;\n\n        width: 100%;\n        height: 100%;\n\n        border: 0;\n        background-color: transparent;\n\n        font: var(--grist-object-editor-font);\n        color: var(--grist-object-editor-color);\n\n        justify-content: inherit;\n      }\n\n      md-icon {\n        width: 20px;\n        font-size: 1.5em;\n      }\n\n      #popup {\n        display: flex;\n        overflow: hidden;\n      }\n\n      input {\n        border: none;\n        background-color: transparent;\n      }\n\n      input:focus {\n        outline: none;\n        border: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) headers?: Object\n  @property({ type: Object }) popup?: OxPopup | null\n\n  render() {\n    return html`\n      <input\n        type=\"text\"\n        .value=${this.value}\n        .record=${this.record}\n        .column=${this.column}\n        .field=${this.column}\n        .row=${this.row}\n      ></input>\n\n      <md-icon id=\"more\" @click=${e => this.openPopup()}>more_vert</md-icon>\n    `\n  }\n\n  async firstUpdated() {\n    await this.updateComplete\n    await super.firstUpdated()\n  }\n\n  openPopup() {\n    if (this.record.__dirty__) {\n      document.dispatchEvent(\n        new CustomEvent('notify', {\n          detail: {\n            level: 'error',\n            message: i18next.t('text.please_save_your_modifications_first')\n          }\n        })\n      )\n\n      return\n    }\n\n    document.dispatchEvent(\n      new CustomEvent('open-popup', {\n        detail: {\n          template: html`\n            <grist-code-input-popup\n              .value=${this.value}\n              .column=${this.column}\n              .record=${this.record}\n              .row=${this.row}\n              .field=${this.field}\n              .headers=${this.headers}\n              @close-popup=${e => {\n                this.popup?.close()\n                this.popup = null\n              }}\n            ></grist-code-input-popup>\n          `,\n          options: {\n            title: i18next.t('title.ID Rule Editor')\n          },\n          callback: popup => {\n            this.popup = popup\n          }\n        }\n      })\n    )\n  }\n}\n"]}

package/dist-client/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}