@operato/data-grist 2.0.0-alpha.99 → 2.0.0-beta.0

package/dist/src/filters/filter-select.js

@@ -1,17 +1,9 @@
 import '@operato/input/ox-checkbox.js';
-import { html } from 'lit-html';
-export const FilterSelect = (column, value, owner) => {
-    /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
-    const filter = column.filter;
-    const operator = filter === null || filter === void 0 ? void 0 : filter.operator;
-    var options = (filter === null || filter === void 0 ? void 0 : filter.options) || column.record.options || [];
-    if (typeof options === 'function') {
-        if (!(filter === null || filter === void 0 ? void 0 : filter.options)) {
-            console.warn('ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.');
-        }
-        options = options.call(column, owner);
-    }
-    options = options.map((option) => {
+import { html } from 'lit';
+import { until } from 'lit/directives/until.js';
+import { OxFiltersForm } from './filters-form';
+function buildOptions(options, operator) {
+    const selectOptionObjects = options.map(option => {
         switch (typeof option) {
             case 'string':
                 return {
@@ -20,7 +12,7 @@ export const FilterSelect = (column, value, owner) => {
                 };
             case 'object':
                 return {
-                    display: option.display,
+                    display: option.display || option.name,
                     value: option.value
                 };
             default:
@@ -29,10 +21,32 @@ export const FilterSelect = (column, value, owner) => {
     });
     return operator === 'in'
         ? html `
-        ${options === null || options === void 0 ? void 0 : options.filter((option) => !!option).map((option) => html ` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `)}
+        ${selectOptionObjects === null || selectOptionObjects === void 0 ? void 0 : selectOptionObjects.filter(option => !!option).map(({ value, display, name }) => html ` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `)}
       `
         : html `
-        ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <div option value=${option.value}>${option.display}&nbsp;</div> `)}
+        ${selectOptionObjects === null || selectOptionObjects === void 0 ? void 0 : selectOptionObjects.map(({ value, display, name }) => html ` <div option value=${value}>${display || name}&nbsp;</div> `)}
       `;
+}
+export const FilterSelect = (column, value, owner) => {
+    /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+    const filter = column.filter;
+    const operator = filter === null || filter === void 0 ? void 0 : filter.operator;
+    const form = owner;
+    var options = (filter === null || filter === void 0 ? void 0 : filter.options) || column.record.options || [];
+    if (typeof options === 'function') {
+        if (!(filter === null || filter === void 0 ? void 0 : filter.options)) {
+            console.warn('ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.');
+        }
+        options = options.call(null, value, column, form instanceof OxFiltersForm ? form.getFormObjectValue() : {}, owner);
+        if (options instanceof Promise) {
+            return html `${until(options.then(options => buildOptions(options, operator)))}`;
+        }
+        else {
+            return buildOptions((options || []), operator);
+        }
+    }
+    else {
+        return buildOptions((options || []), operator);
+    }
 };
 //# sourceMappingURL=filter-select.js.map

package/dist/src/filters/filter-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAItC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACzE,4DAA4D;IAC5D,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,QAAQ,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAA;IAEjC,IAAI,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE5D,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA,EAAE,CAAC;YACrB,OAAO,CAAC,IAAI,CACV,oGAAoG,CACrG,CAAA;QACH,CAAC;QACD,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IACvC,CAAC;IAED,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE;QACpC,QAAQ,OAAO,MAAM,EAAE,CAAC;YACtB,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,MAAM;iBACd,CAAA;YACH,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM,CAAC,OAAO;oBACvB,KAAK,EAAE,MAAM,CAAC,KAAK;iBACpB,CAAA;YACH;gBACE,OAAO,MAAM,CAAA;QACjB,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,QAAQ,KAAK,IAAI;QACtB,CAAC,CAAC,IAAI,CAAA;UACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CACL,MAAM,CAAC,CAAC,MAAuC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAC7D,GAAG,CACF,CAAC,MAAuC,EAAE,EAAE,CAC1C,IAAI,CAAA,8BAA8B,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,iBAAiB,CACpF;OACJ;QACH,CAAC,CAAC,IAAI,CAAA;UACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CACZ,CAAC,MAAuC,EAAE,EAAE,CAC1C,IAAI,CAAA,sBAAsB,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,eAAe,CAC1E;OACF,CAAA;AACP,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nimport { html } from 'lit-html'\n\nexport const FilterSelect: FilterSelectRenderer = (column, value, owner) => {\n  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */\n  const filter = column.filter as FilterConfigObject\n  const operator = filter?.operator\n\n  var options = filter?.options || column.record.options || []\n\n  if (typeof options === 'function') {\n    if (!filter?.options) {\n      console.warn(\n        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'\n      )\n    }\n    options = options.call(column, owner)\n  }\n\n  options = options.map((option: any) => {\n    switch (typeof option) {\n      case 'string':\n        return {\n          display: option,\n          value: option\n        }\n      case 'object':\n        return {\n          display: option.display,\n          value: option.value\n        }\n      default:\n        return option\n    }\n  })\n\n  return operator === 'in'\n    ? html`\n        ${options\n          ?.filter((option: { display: string; value: any }) => !!option)\n          .map(\n            (option: { display: string; value: any }) =>\n              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n          )}\n      `\n    : html`\n        ${options?.map(\n          (option: { display: string; value: any }) =>\n            html` <div option value=${option.value}>${option.display}&nbsp;</div> `\n        )}\n      `\n}\n"]}
+{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit'\nimport { until } from 'lit/directives/until.js'\n\nimport { FilterConfigObject, FilterOperator, FilterSelectRenderer, SelectOption, SelectOptionObject } from '../types'\nimport { OxFiltersForm } from './filters-form'\nimport { DataGridHeader } from '../data-grid/data-grid-header'\n\nfunction buildOptions(options: SelectOption[], operator?: FilterOperator) {\n  const selectOptionObjects = options.map(option => {\n    switch (typeof option) {\n      case 'string':\n        return {\n          display: option,\n          value: option\n        }\n      case 'object':\n        return {\n          display: option.display || option.name,\n          value: option.value\n        }\n      default:\n        return option\n    }\n  }) as SelectOptionObject[]\n\n  return operator === 'in'\n    ? html`\n        ${selectOptionObjects\n          ?.filter(option => !!option)\n          .map(\n            ({ value, display, name }) => html` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `\n          )}\n      `\n    : html`\n        ${selectOptionObjects?.map(\n          ({ value, display, name }) => html` <div option value=${value}>${display || name}&nbsp;</div> `\n        )}\n      `\n}\n\nexport const FilterSelect: FilterSelectRenderer = (column, value, owner) => {\n  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */\n  const filter = column.filter as FilterConfigObject\n  const operator = filter?.operator\n  const form = owner as OxFiltersForm | DataGridHeader\n\n  var options = filter?.options || column.record.options || []\n\n  if (typeof options === 'function') {\n    if (!filter?.options) {\n      console.warn(\n        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'\n      )\n    }\n\n    options = options.call(null, value, column, form instanceof OxFiltersForm ? form.getFormObjectValue() : {}, owner)\n\n    if (options instanceof Promise) {\n      return html`${until(options.then(options => buildOptions(options, operator)))}`\n    } else {\n      return buildOptions((options || []) as SelectOption[], operator)\n    }\n  } else {\n    return buildOptions((options || []) as SelectOption[], operator)\n  }\n}\n"]}

package/dist/src/filters/filter-styles.js

@@ -1,15 +1,15 @@
 import { css } from 'lit';
 export const FilterStyles = css `
   :host {
-    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
+    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface));
 
     --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
-    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
+    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-outline-variant));
     --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
-    --ox-filters-input-color: var(--input-color, var(--primary-text-color));
-    --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
+    --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));
+    --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));
     --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
-    --ox-filters-label-color: var(--label-color, var(--primary-text-color));
+    --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));
     --ox-filters-input-background-color: transparent;
 
     --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
@@ -21,7 +21,7 @@ export const FilterStyles = css `
 
   label {
     font: var(--ox-filters-label-font);
-    color: var(--ox-filters-label-color);
+    color: var(--ox-filters-label-color, var(--md-sys-color-on-surface));
   }
 
   span {
@@ -29,44 +29,40 @@ export const FilterStyles = css `
   }
 
   input::placeholder {
-    color: var(--ox-filters-input-placeholder-color);
+    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-surface-dim));
     opacity: 0.6;
   }
 
-  input {
+  input,
+  ox-input-search,
+  [filter-input] {
     padding: var(--ox-filters-input-padding);
   }
 
-  label > span + *,
   ox-select,
-  input {
+  ox-input-search,
+  input,
+  [filter-input] {
     border: none;
-    border-bottom: var(--ox-filters-input-border);
+    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));
     font: var(--ox-filters-input-font);
-    color: var(--ox-filters-input-color);
+    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface));
     background-color: var(--ox-filters-input-background-color, transparent);
   }
 
-  label > span + * {
-    min-width: 120px;
-  }
-
   ox-select:focus,
-  input:focus {
+  input:focus,
+  [filter-input]:focus {
     outline: none;
-    border-bottom: var(--ox-filters-input-focus-border);
-    color: var(--ox-filters-input-focus-color);
+    border-bottom: var(--ox-filters-input-focus-border, var(--md-sys-color-outline-variant));
+    color: var(--ox-filters-input-focus-color, var(--md-sys-color-on-surface-variant));
   }
 
   ox-select {
-    min-width: 100px;
+    min-width: 90px;
     max-width: 170px;
   }
 
-  ox-input-barcode {
-    min-width: 150px;
-  }
-
   ox-input-search {
     max-width: 150px;
   }
@@ -82,21 +78,40 @@ export const FilterStyles = css `
     max-width: 170px;
   }
 
+  [filter-input] {
+    min-width: 140px;
+    max-width: 170px;
+  }
+
   @media only screen and (max-width: 460px) {
     :host {
       --ox-filters-form-label-font: bold 13px var(--theme-font);
       --ox-filters-input-font: normal 16px var(--theme-font);
     }
 
-    input[from],
-    input[to] {
-      max-width: 44%;
+    ox-input-barcode {
+      max-width: unset;
+      flex: 1;
+    }
+
+    ox-input-search {
+      max-width: unset;
+    }
+
+    ox-select {
+      max-width: unset;
+    }
+
+    ox-checkbox {
+      max-width: unset;
+    }
+
+    input[type='number'] {
+      max-width: unset;
     }
 
-    input[type*='datetime'][from],
-    input[type*='datetime'][to] {
-      padding-right: var(--padding-narrow);
-      min-width: 91%;
+    input {
+      flex: 1;
     }
   }
 `;

package/dist/src/filters/filter-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoG9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n  :host {\n    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));\n\n    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));\n    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n    --ox-filters-input-color: var(--input-color, var(--primary-text-color));\n    --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));\n    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n    --ox-filters-label-color: var(--label-color, var(--primary-text-color));\n    --ox-filters-input-background-color: transparent;\n\n    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n    --ox-filters-input-padding: var(--input-padding, 6px 2px);\n\n    --ox-select-padding: var(--ox-filters-input-padding);\n    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n  }\n\n  label {\n    font: var(--ox-filters-label-font);\n    color: var(--ox-filters-label-color);\n  }\n\n  span {\n    text-transform: capitalize;\n  }\n\n  input::placeholder {\n    color: var(--ox-filters-input-placeholder-color);\n    opacity: 0.6;\n  }\n\n  input {\n    padding: var(--ox-filters-input-padding);\n  }\n\n  label > span + *,\n  ox-select,\n  input {\n    border: none;\n    border-bottom: var(--ox-filters-input-border);\n    font: var(--ox-filters-input-font);\n    color: var(--ox-filters-input-color);\n    background-color: var(--ox-filters-input-background-color, transparent);\n  }\n\n  label > span + * {\n    min-width: 120px;\n  }\n\n  ox-select:focus,\n  input:focus {\n    outline: none;\n    border-bottom: var(--ox-filters-input-focus-border);\n    color: var(--ox-filters-input-focus-color);\n  }\n\n  ox-select {\n    min-width: 100px;\n    max-width: 170px;\n  }\n\n  ox-input-barcode {\n    min-width: 150px;\n  }\n\n  ox-input-search {\n    max-width: 150px;\n  }\n\n  input[type='number'] {\n    max-width: 90px;\n  }\n\n  input[type*='date'],\n  input[type*='time'],\n  input[type='week'],\n  input[type='month'] {\n    max-width: 170px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      --ox-filters-form-label-font: bold 13px var(--theme-font);\n      --ox-filters-input-font: normal 16px var(--theme-font);\n    }\n\n    input[from],\n    input[to] {\n      max-width: 44%;\n    }\n\n    input[type*='datetime'][from],\n    input[type*='datetime'][to] {\n      padding-right: var(--padding-narrow);\n      min-width: 91%;\n    }\n  }\n`\n"]}
+{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmH9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n  :host {\n    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface));\n\n    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-outline-variant));\n    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n    --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));\n    --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));\n    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n    --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));\n    --ox-filters-input-background-color: transparent;\n\n    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n    --ox-filters-input-padding: var(--input-padding, 6px 2px);\n\n    --ox-select-padding: var(--ox-filters-input-padding);\n    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n  }\n\n  label {\n    font: var(--ox-filters-label-font);\n    color: var(--ox-filters-label-color, var(--md-sys-color-on-surface));\n  }\n\n  span {\n    text-transform: capitalize;\n  }\n\n  input::placeholder {\n    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-surface-dim));\n    opacity: 0.6;\n  }\n\n  input,\n  ox-input-search,\n  [filter-input] {\n    padding: var(--ox-filters-input-padding);\n  }\n\n  ox-select,\n  ox-input-search,\n  input,\n  [filter-input] {\n    border: none;\n    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));\n    font: var(--ox-filters-input-font);\n    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface));\n    background-color: var(--ox-filters-input-background-color, transparent);\n  }\n\n  ox-select:focus,\n  input:focus,\n  [filter-input]:focus {\n    outline: none;\n    border-bottom: var(--ox-filters-input-focus-border, var(--md-sys-color-outline-variant));\n    color: var(--ox-filters-input-focus-color, var(--md-sys-color-on-surface-variant));\n  }\n\n  ox-select {\n    min-width: 90px;\n    max-width: 170px;\n  }\n\n  ox-input-search {\n    max-width: 150px;\n  }\n\n  input[type='number'] {\n    max-width: 90px;\n  }\n\n  input[type*='date'],\n  input[type*='time'],\n  input[type='week'],\n  input[type='month'] {\n    max-width: 170px;\n  }\n\n  [filter-input] {\n    min-width: 140px;\n    max-width: 170px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      --ox-filters-form-label-font: bold 13px var(--theme-font);\n      --ox-filters-input-font: normal 16px var(--theme-font);\n    }\n\n    ox-input-barcode {\n      max-width: unset;\n      flex: 1;\n    }\n\n    ox-input-search {\n      max-width: unset;\n    }\n\n    ox-select {\n      max-width: unset;\n    }\n\n    ox-checkbox {\n      max-width: unset;\n    }\n\n    input[type='number'] {\n      max-width: unset;\n    }\n\n    input {\n      flex: 1;\n    }\n  }\n`\n"]}

package/dist/src/filters/filters-form.d.ts

@@ -3,28 +3,39 @@ import '@operato/input/ox-select.js';
 import '@operato/popup/ox-popup-list.js';
 import '@operato/input/ox-input-search.js';
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { ColumnConfig, FilterOperator, FilterValue, GristConfig } from '../types';
+import { PagePreferenceProvider } from '@operato/p13n';
+import { FilterPreference } from '../types.js';
+import { ColumnConfig, FilterOperator, FilterValue, GristConfig, PersonalGristPreference } from '../types';
 export type QueryFilterRangeValue = [from: number, to: number];
 export type QueryFilter = {
     name: string;
     operator: FilterOperator;
     value: any;
 };
-export declare class FiltersForm extends LitElement {
+export declare class OxFiltersForm extends LitElement {
     static styles: import("lit").CSSResult[];
     value: FilterValue[];
     withoutSearch: boolean;
     autofocus: boolean;
     empty: boolean;
+    personalConfigProvider?: PagePreferenceProvider;
+    personalConfig?: PersonalGristPreference;
+    personalFilters?: FilterPreference[];
     config: GristConfig;
     filterColumns: ColumnConfig[];
     searchColumns: ColumnConfig[];
     form: HTMLFormElement;
+    private autoUpdateTargetsOnChange;
+    private objectValue?;
     connectedCallback(): void;
-    buildDefaultValue(operator: string, defaultValue: any): any;
-    updated(changes: PropertyValues<this>): void;
+    buildDefaultValue(operator: FilterOperator, defaultValue: any): any;
+    updated(changes: PropertyValues<this>): Promise<void>;
     render(): TemplateResult;
+    applyUpdatedConfiguration(): void;
     getQueryFilters(): Promise<QueryFilter[]>;
     setInputValue(name: string, value: any): void;
     getInputValue(name: string): any;
+    private updateObjectValues;
+    getFormObjectValue(): object | undefined;
+    reset(): void;
 }