@operato/app 1.0.1 → 1.0.7

package/package.json

@@ -3,7 +3,7 @@
   "description": "WebApplication production supporting components following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.1",
+  "version": "1.0.7",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -28,6 +28,67 @@
     "./grist-editor/ox-grist-editor-resource-code.js": "./dist/src/grist-editor/ox-grist-editor-resource-code.js",
     "./filter-renderer.js": "./dist/src/filter-renderer/index.js"
   },
+  "typesVersions": {
+    "*": {
+      "input.js": [
+        "dist/src/input/index.d.ts"
+      ],
+      "input/ox-input-graphql.js": [
+        "dist/src/input/ox-input-graphql.d.ts"
+      ],
+      "input/ox-input-background-pattern.js": [
+        "dist/src/input/ox-input-background-pattern.d.ts"
+      ],
+      "input/ox-input-fill-style.js": [
+        "dist/src/input/ox-input-fill-style.d.ts"
+      ],
+      "property-editor.js": [
+        "dist/src/property-editor/index.d.ts"
+      ],
+      "property-editor/ox-property-editor-graphql.js": [
+        "dist/src/property-editor/ox-property-editor-graphql.d.ts"
+      ],
+      "grist-editor.js": [
+        "dist/src/grist-editor/index.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-resource-id.js": [
+        "dist/src/grist-editor/ox-grist-editor-resource-id.d.ts"
+      ],
+      "grist-editor/ox-selector-resource-id.js": [
+        "dist/src/grist-editor/ox-selector-resource-id.d.ts"
+      ],
+      "grist-editor/ox-grist-renderer-resource-id.js": [
+        "dist/src/grist-editor/ox-grist-renderer-resource-id.d.ts"
+      ],
+      "grist-editor/ox-selector-resource-object.js": [
+        "dist/src/grist-editor/ox-selector-resource-object.d.ts"
+      ],
+      "grist-editor/ox-grist-renderer-resource-object.js": [
+        "dist/src/grist-editor/ox-grist-renderer-resource-object.d.ts"
+      ],
+      "grist-editor/ox-grist-renderer-crontab.js": [
+        "dist/src/grist-editor/ox-grist-renderer-crontab.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-json.js": [
+        "dist/src/grist-editor/ox-grist-editor-json.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-code.js": [
+        "dist/src/grist-editor/ox-grist-editor-code.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-resource-object.js": [
+        "dist/src/grist-editor/ox-grist-editor-resource-object.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-resource-object-legacy.js": [
+        "dist/src/grist-editor/ox-grist-editor-resource-object-legacy.d.ts"
+      ],
+      "grist-editor/ox-grist-editor-resource-code.js": [
+        "dist/src/grist-editor/ox-grist-editor-resource-code.d.ts"
+      ],
+      "filter-renderer.js": [
+        "dist/src/filter-renderer/index.d.ts"
+      ]
+    }
+  },
   "publishConfig": {
     "access": "public",
     "@operato:registry": "https://registry.npmjs.org"
@@ -54,18 +115,18 @@
     "@material/mwc-button": "^0.26.1",
     "@material/mwc-icon": "^0.26.1",
     "@material/mwc-icon-button": "^0.26.1",
-    "@operato/attachment": "^1.0.1",
-    "@operato/data-grist": "^1.0.1",
-    "@operato/font": "^1.0.1",
-    "@operato/form": "^1.0.1",
-    "@operato/graphql": "^1.0.0",
-    "@operato/i18n": "^1.0.0",
-    "@operato/input": "^1.0.1",
-    "@operato/layout": "^1.0.1",
-    "@operato/property-editor": "^1.0.1",
-    "@operato/shell": "^1.0.1",
-    "@operato/styles": "^1.0.0",
-    "@operato/utils": "^1.0.1",
+    "@operato/attachment": "^1.0.7",
+    "@operato/data-grist": "^1.0.6",
+    "@operato/font": "^1.0.7",
+    "@operato/form": "^1.0.6",
+    "@operato/graphql": "^1.0.6",
+    "@operato/i18n": "^1.0.6",
+    "@operato/input": "^1.0.6",
+    "@operato/layout": "^1.0.7",
+    "@operato/property-editor": "^1.0.7",
+    "@operato/shell": "^1.0.7",
+    "@operato/styles": "^1.0.6",
+    "@operato/utils": "^1.0.6",
     "codemirror": "^5.64.0",
     "codemirror-graphql": "^1.3.2",
     "cronstrue": "^2.2.0",
@@ -102,9 +163,9 @@
   },
   "lint-staged": {
     "*.ts": [
-      "eslint --fix",
+      "eslint --fid.t",
       "prettier --write"
     ]
   },
-  "gitHead": "4518c7ee134a20627d81d0a41e071e4b50cf173d"
+  "gitHead": "24e241b4f2d4cde785816ea5241f110ffb7a692c"
 }

package/src/grist-editor/ox-grist-editor-resource-object.ts

@@ -59,9 +59,13 @@ export class OxGristEditorResourceObject extends OxGristEditor {
       queryName,
       basicArgs,
       select,
+      columns,
       list
     } = this.column.record.options || {}
 
+    /* select options is only for compatability, it might be able to be deprecated. */
+    columns = columns || select
+
     const confirmCallback = (selected?: { [field: string]: any }) => {
       this.dispatchEvent(
         new CustomEvent('field-change', {
@@ -71,7 +75,7 @@ export class OxGristEditorResourceObject extends OxGristEditor {
             before: this.value,
             after: selected
               ? {
-                  ...(this.column.record.options.select || [])
+                  ...(columns || [])
                     .map((field: any) => field.name)
                     .reduce((obj: { [field: string]: any }, fieldName: string) => {
                       return (obj = {
@@ -107,7 +111,7 @@ export class OxGristEditorResourceObject extends OxGristEditor {
           .value=${actualValue}
           .confirmCallback=${confirmCallback.bind(this)}
           .queryName=${queryName}
-          .select=${select}
+          .columns=${columns}
           .list=${list}
           .basicArgs=${basicArgs}
           .valueField=${valueField}

package/src/grist-editor/ox-selector-resource-object.ts

@@ -54,13 +54,12 @@ export class OxSelectorResourceObject extends LitElement {
   @property({ type: Array }) selectedRecords: GristRecord[] = []
 
   @property({ type: Array }) searchFields: any
-  @property({ type: Array }) select: {
+  @property({ type: Array }) columns: {
     type: string
     name: string
     header: string
     subFields?: string[]
     hidden: boolean
-    ignoreCondition: boolean
     queryName: string
     width: number
   }[] = []
@@ -115,7 +114,7 @@ export class OxSelectorResourceObject extends LitElement {
       query: gql`
         query($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
           fetch: ${this.queryName} (filters: $filters, pagination: $pagination, sortings: $sortings) {
-            ${this.getSelectFields()}
+            ${this.getQueryFields()}
           }
         }
       `,
@@ -180,7 +179,7 @@ export class OxSelectorResourceObject extends LitElement {
       }
     }
 
-    const select = this.select || [
+    const columns = this.columns || [
       {
         type: 'string',
         name: 'id',
@@ -215,7 +214,7 @@ export class OxSelectorResourceObject extends LitElement {
       ...this.config,
       columns: [
         ...this.config.columns,
-        ...select.map(selectField => {
+        ...columns.map(selectField => {
           return {
             ...selectField,
             type: selectField.type || 'string',
@@ -227,10 +226,10 @@ export class OxSelectorResourceObject extends LitElement {
     }
   }
 
-  getSelectFields() {
-    if (this.select && this.select.length > 0) {
+  getQueryFields() {
+    if (this.columns && this.columns.length > 0) {
       return `items {
-        ${this.select.map(selectField => {
+        ${this.columns.map(selectField => {
           return selectField.type === 'object'
             ? `${selectField.name} { ${
                 selectField.subFields && selectField.subFields.length > 0

package/dist/src/grist-editor/ox-selector-resource-object-adv.d.ts

@@ -1,36 +0,0 @@
-import '@operato/data-grist';
-import '@operato/form/ox-search-form.js';
-import { LitElement } from 'lit';
-import { DataGrist, FetchHandler, GristData, GristRecord } from '@operato/data-grist';
-export declare class OxSelectorResourceObjectAdv extends LitElement {
-    static styles: import("lit").CSSResult[];
-    value?: string;
-    config: any;
-    data: GristData;
-    queryName: string;
-    basicArgs: any;
-    confirmCallback?: (record?: GristRecord | null) => void;
-    selectedRecords: GristRecord[];
-    searchFields: any;
-    select: {
-        type: string;
-        name: string;
-        header: string;
-        subFields?: string[];
-        hidden: boolean;
-        ignoreCondition: boolean;
-        queryName: string;
-        width: number;
-    }[];
-    list: any;
-    valueField: string | ((item: any) => any);
-    grist: DataGrist;
-    render(): import("lit-html").TemplateResult<1>;
-    onempty(): void;
-    oncancel(): void;
-    onconfirm(): void;
-    fetchHandler: FetchHandler;
-    firstUpdated(): Promise<void>;
-    getSelectFields(): string;
-    get selected(): GristRecord | undefined;
-}

package/dist/src/grist-editor/ox-selector-resource-object-adv.js

@@ -1,270 +0,0 @@
-import { __decorate } from "tslib";
-import '@operato/data-grist';
-import '@operato/form/ox-search-form.js';
-import gql from 'graphql-tag';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { ZERO_DATA } from '@operato/data-grist';
-import { MultiColumnFormStyles } from '@operato/form';
-import { client, gqlContext } from '@operato/graphql';
-import { i18next } from '@operato/i18n';
-import { closePopup } from '@operato/popup';
-import { adjustFilters, isMobileDevice } from '@operato/utils';
-let OxSelectorResourceObjectAdv = class OxSelectorResourceObjectAdv extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.data = ZERO_DATA;
-        this.selectedRecords = [];
-        this.select = [];
-        this.valueField = 'id';
-        this.fetchHandler = async ({ filters = [], page, limit, sortings = [] }) => {
-            if (this.basicArgs) {
-                filters = adjustFilters(filters, this.basicArgs);
-            }
-            const pagination = { page, limit };
-            const response = await client.query({
-                query: gql `
-        query($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          fetch: ${this.queryName} (filters: $filters, pagination: $pagination, sortings: $sortings) {
-            ${this.getSelectFields()}
-          }
-        }
-      `,
-                variables: { filters, pagination, sortings },
-                context: gqlContext()
-            });
-            if (!response.errors) {
-                const records = response.data.fetch.items.map((item) => {
-                    let rowValue;
-                    if (this.valueField && typeof this.valueField === 'function') {
-                        rowValue = this.valueField(item);
-                    }
-                    else if (this.valueField) {
-                        rowValue = item[this.valueField];
-                    }
-                    else {
-                        rowValue = item.id;
-                    }
-                    if (this.value && this.value === rowValue) {
-                        this.selectedRecords = [item];
-                        item['__selected__'] = true;
-                    }
-                    return item;
-                });
-                const total = response.data.fetch.total;
-                return {
-                    records,
-                    total,
-                    limit,
-                    page
-                };
-            }
-        };
-    }
-    render() {
-        return html `
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .data=${this.data}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        .selectedRecords=${this.selectedRecords}
-      >
-        <div id="filters" slot="headroom">
-          <ox-filters-form autofocus></ox-filters-form>
-        </div>
-      </ox-grist>
-
-      <div class="button-container">
-        <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.oncancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onconfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
-      </div>
-    `;
-    }
-    onempty() {
-        this.confirmCallback && this.confirmCallback();
-        closePopup(this);
-    }
-    oncancel() {
-        closePopup(this);
-    }
-    onconfirm() {
-        this.confirmCallback && this.confirmCallback(this.selected);
-        closePopup(this);
-    }
-    async firstUpdated() {
-        this.config = {
-            columns: [
-                {
-                    type: 'gutter',
-                    gutterName: 'sequence'
-                },
-                {
-                    type: 'gutter',
-                    gutterName: 'row-selector',
-                    multiple: false
-                }
-            ],
-            rows: {
-                selectable: {
-                    multiple: false
-                },
-                handlers: {
-                    click: 'select-row',
-                    dblclick: ((columns, data, column, record, rowIndex, field) => {
-                        this.onconfirm();
-                    })
-                },
-                appendable: false
-            }
-        };
-        const select = this.select || [
-            {
-                type: 'string',
-                name: 'id',
-                header: i18next.t('field.id'),
-                hidden: true
-            },
-            {
-                type: 'string',
-                name: 'name',
-                header: i18next.t('field.name'),
-                record: {
-                    align: 'left'
-                },
-                sortable: true,
-                filter: 'search',
-                width: 160
-            },
-            {
-                type: 'string',
-                name: 'description',
-                header: i18next.t('field.description'),
-                record: {
-                    align: 'left'
-                },
-                sortable: true,
-                filter: 'search',
-                width: 300
-            }
-        ];
-        this.config = {
-            ...this.config,
-            columns: [
-                ...this.config.columns,
-                ...select.map(selectField => {
-                    return {
-                        ...selectField,
-                        type: selectField.type || 'string',
-                        width: selectField.width || 160,
-                        header: selectField.header || i18next.t(`field.${selectField.name}`)
-                    };
-                })
-            ]
-        };
-    }
-    getSelectFields() {
-        if (this.select && this.select.length > 0) {
-            return `items {
-        ${this.select.map(selectField => {
-                return selectField.type === 'object'
-                    ? `${selectField.name} { ${selectField.subFields && selectField.subFields.length > 0
-                        ? selectField.subFields.join(' ')
-                        : `id name description`} }`
-                    : `${selectField.name}`;
-            })}
-      }
-      total`;
-        }
-        else {
-            return `
-        items {
-          id
-          name
-          description
-        }
-        total
-      `;
-        }
-    }
-    get selected() {
-        var grist = this.renderRoot.querySelector('ox-grist');
-        var selected = grist.selected;
-        return selected && selected.length > 0 ? selected[0] : undefined;
-    }
-};
-OxSelectorResourceObjectAdv.styles = [
-    MultiColumnFormStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: #fff;
-
-        width: var(--overlay-center-normal-width, 50%);
-        height: var(--overlay-center-normal-height, 50%);
-      }
-
-      ox-grist {
-        flex: 1;
-      }
-
-      #filters {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      #filters > * {
-        padding: var(--padding-default) var(--padding-wide);
-      }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
-    `
-];
-__decorate([
-    property({ type: String })
-], OxSelectorResourceObjectAdv.prototype, "value", void 0);
-__decorate([
-    property({ type: Object })
-], OxSelectorResourceObjectAdv.prototype, "config", void 0);
-__decorate([
-    property({ type: Object })
-], OxSelectorResourceObjectAdv.prototype, "data", void 0);
-__decorate([
-    property({ type: String })
-], OxSelectorResourceObjectAdv.prototype, "queryName", void 0);
-__decorate([
-    property({ type: Object })
-], OxSelectorResourceObjectAdv.prototype, "basicArgs", void 0);
-__decorate([
-    property({ type: Object })
-], OxSelectorResourceObjectAdv.prototype, "confirmCallback", void 0);
-__decorate([
-    property({ type: Array })
-], OxSelectorResourceObjectAdv.prototype, "selectedRecords", void 0);
-__decorate([
-    property({ type: Array })
-], OxSelectorResourceObjectAdv.prototype, "searchFields", void 0);
-__decorate([
-    property({ type: Array })
-], OxSelectorResourceObjectAdv.prototype, "select", void 0);
-__decorate([
-    property({ type: Object })
-], OxSelectorResourceObjectAdv.prototype, "list", void 0);
-__decorate([
-    property({ type: String })
-], OxSelectorResourceObjectAdv.prototype, "valueField", void 0);
-__decorate([
-    query('ox-grist')
-], OxSelectorResourceObjectAdv.prototype, "grist", void 0);
-OxSelectorResourceObjectAdv = __decorate([
-    customElement('ox-selector-resource-object-adv')
-], OxSelectorResourceObjectAdv);
-export { OxSelectorResourceObjectAdv };
-//# sourceMappingURL=ox-selector-resource-object-adv.js.map

package/dist/src/grist-editor/ox-selector-resource-object-adv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-selector-resource-object-adv.js","sourceRoot":"","sources":["../../../src/grist-editor/ox-selector-resource-object-adv.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/form/ox-search-form.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist, FetchHandler, GristData, GristEventHandler, GristRecord, ZERO_DATA } from '@operato/data-grist'\nimport { MultiColumnFormStyles } from '@operato/form'\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { adjustFilters, isMobileDevice } from '@operato/utils'\n\n@customElement('ox-selector-resource-object-adv')\nexport class OxSelectorResourceObjectAdv extends LitElement {\n  static styles = [\n    MultiColumnFormStyles,\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-grist {\n        flex: 1;\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n      }\n\n      #filters > * {\n        padding: var(--padding-default) var(--padding-wide);\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) config: any\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: String }) queryName!: string\n  @property({ type: Object }) basicArgs: any\n  @property({ type: Object }) confirmCallback?: (record?: GristRecord | null) => void\n  @property({ type: Array }) selectedRecords: GristRecord[] = []\n\n  @property({ type: Array }) searchFields: any\n  @property({ type: Array }) select: {\n    type: string\n    name: string\n    header: string\n    subFields?: string[]\n    hidden: boolean\n    ignoreCondition: boolean\n    queryName: string\n    width: number\n  }[] = []\n  @property({ type: Object }) list: any\n  @property({ type: String }) valueField: string | ((item: any) => any) = 'id'\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.config}\n        .data=${this.data}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .selectedRecords=${this.selectedRecords}\n      >\n        <div id=\"filters\" slot=\"headroom\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n      </ox-grist>\n\n      <div class=\"button-container\">\n        <mwc-button @click=${this.onempty.bind(this)}>${i18next.t('button.empty')}</mwc-button>\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  onempty() {\n    this.confirmCallback && this.confirmCallback()\n    closePopup(this)\n  }\n\n  oncancel() {\n    closePopup(this)\n  }\n\n  onconfirm() {\n    this.confirmCallback && this.confirmCallback(this.selected)\n    closePopup(this)\n  }\n\n  fetchHandler: FetchHandler = async ({ filters = [], page, limit, sortings = [] }) => {\n    if (this.basicArgs) {\n      filters = adjustFilters(filters, this.basicArgs)\n    }\n    const pagination = { page, limit }\n\n    const response = await client.query({\n      query: gql`\n        query($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          fetch: ${this.queryName} (filters: $filters, pagination: $pagination, sortings: $sortings) {\n            ${this.getSelectFields()}\n          }\n        }\n      `,\n      variables: { filters, pagination, sortings },\n      context: gqlContext()\n    })\n\n    if (!response.errors) {\n      const records = response.data.fetch.items.map((item: any) => {\n        let rowValue\n\n        if (this.valueField && typeof this.valueField === 'function') {\n          rowValue = this.valueField(item)\n        } else if (this.valueField) {\n          rowValue = item[this.valueField]\n        } else {\n          rowValue = item.id\n        }\n\n        if (this.value && this.value === rowValue) {\n          this.selectedRecords = [item]\n          item['__selected__'] = true\n        }\n\n        return item\n      })\n      const total = response.data.fetch.total\n\n      return {\n        records,\n        total,\n        limit,\n        page\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.config = {\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'row-selector',\n          multiple: false\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row',\n          dblclick: ((columns, data, column, record, rowIndex, field) => {\n            this.onconfirm()\n          }) as GristEventHandler\n        },\n        appendable: false\n      }\n    }\n\n    const select = this.select || [\n      {\n        type: 'string',\n        name: 'id',\n        header: i18next.t('field.id'),\n        hidden: true\n      },\n      {\n        type: 'string',\n        name: 'name',\n        header: i18next.t('field.name'),\n        record: {\n          align: 'left'\n        },\n        sortable: true,\n        filter: 'search',\n        width: 160\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        record: {\n          align: 'left'\n        },\n        sortable: true,\n        filter: 'search',\n        width: 300\n      }\n    ]\n\n    this.config = {\n      ...this.config,\n      columns: [\n        ...this.config.columns,\n        ...select.map(selectField => {\n          return {\n            ...selectField,\n            type: selectField.type || 'string',\n            width: selectField.width || 160,\n            header: selectField.header || i18next.t(`field.${selectField.name}`)\n          }\n        })\n      ]\n    }\n  }\n\n  getSelectFields() {\n    if (this.select && this.select.length > 0) {\n      return `items {\n        ${this.select.map(selectField => {\n          return selectField.type === 'object'\n            ? `${selectField.name} { ${\n                selectField.subFields && selectField.subFields.length > 0\n                  ? selectField.subFields.join(' ')\n                  : `id name description`\n              } }`\n            : `${selectField.name}`\n        })}\n      }\n      total`\n    } else {\n      return `\n        items {\n          id\n          name\n          description\n        }\n        total\n      `\n    }\n  }\n\n  get selected() {\n    var grist = this.renderRoot.querySelector('ox-grist') as DataGrist\n\n    var selected = grist.selected\n\n    return selected && selected.length > 0 ? selected[0] : undefined\n  }\n}\n"]}