@foxy.io/elements 1.22.0-beta.2 → 1.22.0-beta.4

package/dist/elements/public/QueryBuilder/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Input.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { classMap } from '../../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { serializeDateUTC } from '../../../../utils/serialize-date';\n\nexport type InputParams = {\n  t: I18n['t'];\n  id?: string;\n  list?: { label: string; value: string }[];\n  type: string;\n  label: string;\n  value: string;\n  disabled?: boolean;\n  displayValue?: string;\n  onChange: (newValue: string) => void;\n};\n\nexport function Input(params: InputParams): TemplateResult {\n  const id = params.id ?? String(Math.floor(Math.random() * Math.pow(10, 8)));\n  const listId = `${id}-list`;\n  const hasDisplayValue = !!params.displayValue;\n\n  let normalizedValue = params.value;\n\n  if (params.type === 'date') {\n    const date = new Date(params.value);\n    normalizedValue = isNaN(date.getTime()) ? '' : serializeDateUTC(date);\n  }\n\n  return html`\n    <label class=\"relative flex items-center cursor-text group text-tertiary\">\n      <div class=\"relative flex-1 min-w-0 overflow-hidden\">\n        ${hasDisplayValue\n          ? html`\n              <div\n                aria-hidden=\"true\"\n                class=\"absolute inset-0 h-m px-s font-medium text-body flex items-center\"\n              >\n                <div class=\"truncate\">${params.t(params.displayValue!)}</div>\n              </div>\n            `\n          : ''}\n\n        <input\n          placeholder=${normalizedValue || params.type === 'date' ? '' : params.t(params.label)}\n          class=${classMap({\n            'bg-base text-body relative flex h-m px-s font-medium w-full': true,\n            'flex max-w-full whitespace-nowrap': true, // ugh safari\n            'focus-outline-none': true,\n            'opacity-0 focus-opacity-100': hasDisplayValue,\n          })}\n          list=${ifDefined(params.list ? listId : undefined)}\n          type=${params.type}\n          max=${ifDefined(params.type === 'date' ? '9999-12-31' : '')}\n          .value=${normalizedValue}\n          ?disabled=${params.disabled}\n          @input=${(evt: Event) => {\n            const input = evt.currentTarget as HTMLInputElement;\n\n            try {\n              const valueAsDate = input.valueAsDate as Date;\n              if (valueAsDate.getFullYear() > 9999) valueAsDate.setFullYear(9999);\n              params.onChange(valueAsDate.toISOString());\n            } catch {\n              params.onChange(input.value);\n            }\n          }}\n        />\n      </div>\n\n      <span\n        class=${classMap({\n          'font-tnum text-xs font-medium border border-current mr-s px-xs rounded-s': true,\n          'inline-block': !!normalizedValue || params.type === 'date',\n          'sr-only': !normalizedValue && params.type !== 'date',\n        })}\n      >\n        ${params.t(params.label)}\n      </span>\n\n      ${params.list\n        ? html`\n            <datalist id=${listId}>\n              ${params.list.map(\n                ({ label, value }) => html`<option value=${value}>${params.t(label)}</option>`\n              )}\n            </datalist>\n          `\n        : ''}\n      ${params.disabled\n        ? ''\n        : html`\n            <div\n              class=\"absolute inset-0 transition-colors bg-transparent group-hover-bg-contrast-5 pointer-events-none\"\n            ></div>\n          `}\n    </label>\n  `;\n}\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Input.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { classMap } from '../../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { serializeDateUTC } from '../../../../utils/serialize-date';\n\nexport type InputParams = {\n  t: I18n['t'];\n  id?: string;\n  list?: { label: string; value: string }[];\n  type: string;\n  label: string;\n  value: string;\n  disabled: boolean;\n  readonly: boolean;\n  displayValue?: string;\n  onChange: (newValue: string) => void;\n};\n\nexport function Input(params: InputParams): TemplateResult {\n  const id = params.id ?? String(Math.floor(Math.random() * Math.pow(10, 8)));\n  const listId = `${id}-list`;\n  const hasDisplayValue = !!params.displayValue;\n\n  let normalizedValue = params.value;\n\n  if (params.type === 'date') {\n    const date = new Date(params.value);\n    normalizedValue = isNaN(date.getTime()) ? '' : serializeDateUTC(date);\n  }\n\n  return html`\n    <label class=\"relative flex items-center cursor-text group text-tertiary\">\n      <div class=\"relative flex-1 min-w-0 overflow-hidden\">\n        ${hasDisplayValue\n          ? html`\n              <div\n                aria-hidden=\"true\"\n                class=${classMap({\n                  'absolute inset-0 h-m px-s font-medium flex items-center': true,\n                  'text-body': !params.disabled && !params.readonly,\n                  'text-disabled': params.disabled,\n                  'text-secondary': params.readonly,\n                })}\n              >\n                <div class=\"truncate\">${params.t(params.displayValue!)}</div>\n              </div>\n            `\n          : ''}\n\n        <input\n          placeholder=${normalizedValue || params.type === 'date' ? '' : params.t(params.label)}\n          class=${classMap({\n            'bg-base relative flex h-m px-s font-medium w-full': true,\n            'text-body': !params.disabled && !params.readonly,\n            'text-disabled': params.disabled,\n            'text-secondary': params.readonly,\n            'flex max-w-full whitespace-nowrap': true, // ugh safari\n            'focus-outline-none': true,\n            'opacity-0 focus-opacity-100': hasDisplayValue,\n          })}\n          list=${ifDefined(params.list ? listId : undefined)}\n          type=${params.type}\n          max=${ifDefined(params.type === 'date' ? '9999-12-31' : '')}\n          .value=${normalizedValue}\n          ?disabled=${params.disabled || params.readonly}\n          @input=${(evt: Event) => {\n            const input = evt.currentTarget as HTMLInputElement;\n\n            try {\n              const valueAsDate = input.valueAsDate as Date;\n              if (valueAsDate.getFullYear() > 9999) valueAsDate.setFullYear(9999);\n              params.onChange(valueAsDate.toISOString());\n            } catch {\n              params.onChange(input.value);\n            }\n          }}\n        />\n      </div>\n\n      <span\n        class=${classMap({\n          'font-tnum text-xs font-medium border border-current mr-s px-xs rounded-s': true,\n          'inline-block': !!normalizedValue || params.type === 'date',\n          'sr-only': !normalizedValue && params.type !== 'date',\n          'text-body': !params.disabled && !params.readonly,\n          'text-disabled': params.disabled,\n          'text-secondary': params.readonly,\n        })}\n      >\n        ${params.t(params.label)}\n      </span>\n\n      ${params.list\n        ? html`\n            <datalist id=${listId}>\n              ${params.list.map(\n                ({ label, value }) => html`<option value=${value}>${params.t(label)}</option>`\n              )}\n            </datalist>\n          `\n        : ''}\n      ${params.disabled || params.readonly\n        ? ''\n        : html`\n            <div\n              class=\"absolute inset-0 transition-colors bg-transparent group-hover-bg-contrast-5 pointer-events-none\"\n            ></div>\n          `}\n    </label>\n  `;\n}\n"]}

package/dist/elements/public/QueryBuilder/components/IsDefinedValue.d.ts

@@ -3,6 +3,8 @@ import { ParsedValue } from '../types';
 import { TemplateResult } from 'lit-html';
 export declare type IsDefinedValueParams = {
     parsedValue: ParsedValue;
+    readonly: boolean;
+    disabled: boolean;
     t: I18n['t'];
     onChange: (newValue: ParsedValue) => void;
 };

package/dist/elements/public/QueryBuilder/components/IsDefinedValue.js

@@ -1,6 +1,8 @@
 import { Select } from "./Select.js";
 export function IsDefinedValue(params) {
     return Select({
+        readonly: params.readonly,
+        disabled: params.disabled,
         value: params.parsedValue.value,
         label: 'value',
         list: [

package/dist/elements/public/QueryBuilder/components/IsDefinedValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"IsDefinedValue.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/IsDefinedValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,oBAAiB;AASlC,MAAM,UAAU,cAAc,CAAC,MAA4B;IACzD,OAAO,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,KAAK;QAC/B,KAAK,EAAE,OAAO;QACd,IAAI,EAAE;YACJ,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,EAAE;YAC3C,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,OAAO,EAAE;SAC9C;QACD,CAAC,EAAE,MAAM,CAAC,CAAC;QACX,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,MAAM,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KAClF,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { I18n } from '../../I18n/I18n';\nimport { ParsedValue } from '../types';\nimport { Select } from './Select';\nimport { TemplateResult } from 'lit-html';\n\nexport type IsDefinedValueParams = {\n  parsedValue: ParsedValue;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function IsDefinedValue(params: IsDefinedValueParams): TemplateResult {\n  return Select({\n    value: params.parsedValue.value,\n    label: 'value',\n    list: [\n      { label: 'is_defined_true', value: 'true' },\n      { label: 'is_defined_false', value: 'false' },\n    ],\n    t: params.t,\n    onChange: newValue => params.onChange({ ...params.parsedValue, value: newValue }),\n  });\n}\n"]}
+{"version":3,"file":"IsDefinedValue.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/IsDefinedValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAWlC,MAAM,UAAU,cAAc,CAAC,MAA4B;IACzD,OAAO,MAAM,CAAC;QACZ,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,KAAK;QAC/B,KAAK,EAAE,OAAO;QACd,IAAI,EAAE;YACJ,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,EAAE;YAC3C,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,OAAO,EAAE;SAC9C;QACD,CAAC,EAAE,MAAM,CAAC,CAAC;QACX,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,MAAM,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KAClF,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { I18n } from '../../I18n/I18n';\nimport { ParsedValue } from '../types';\nimport { Select } from './Select';\nimport { TemplateResult } from 'lit-html';\n\nexport type IsDefinedValueParams = {\n  parsedValue: ParsedValue;\n  readonly: boolean;\n  disabled: boolean;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function IsDefinedValue(params: IsDefinedValueParams): TemplateResult {\n  return Select({\n    readonly: params.readonly,\n    disabled: params.disabled,\n    value: params.parsedValue.value,\n    label: 'value',\n    list: [\n      { label: 'is_defined_true', value: 'true' },\n      { label: 'is_defined_false', value: 'false' },\n    ],\n    t: params.t,\n    onChange: newValue => params.onChange({ ...params.parsedValue, value: newValue }),\n  });\n}\n"]}

package/dist/elements/public/QueryBuilder/components/ListValue.d.ts

@@ -3,6 +3,8 @@ import { TemplateResult } from 'lit-html';
 import { I18n } from '../../I18n/I18n';
 export declare type ListValueParams = {
     parsedValue: ParsedValue;
+    disabled: boolean;
+    readonly: boolean;
     option: Option | null;
     t: I18n['t'];
     onChange: (newValue: ParsedValue) => void;

package/dist/elements/public/QueryBuilder/components/ListValue.js

@@ -10,9 +10,12 @@ export function ListValue(params) {
     const optionType = (_c = (_b = params.option) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : Type.Any;
     const type = optionType === Type.Number ? 'number' : optionType === Type.Date ? 'date' : 'text';
     const list = (_d = params.option) === null || _d === void 0 ? void 0 : _d.list;
+    const displayedValues = [...splitValue.filter(value => !!value)];
+    if (!params.readonly)
+        displayedValues.push(null);
     return html `
     <div class="bg-contrast-10 grid grid-cols-1 gap-1px">
-      ${repeat([...splitValue.filter(value => !!value), null], (value, index) => index, (value, index) => {
+      ${repeat(displayedValues, (value, index) => index, (value, index) => {
         var _a;
         return html `
           <div class="bg-base">
@@ -22,6 +25,8 @@ export function ListValue(params) {
             t: params.t,
             value: value !== null && value !== void 0 ? value : '',
             label: value ? String(index + 1) : 'add_value',
+            disabled: params.disabled,
+            readonly: params.readonly,
             clearable: true,
             displayValue: (_a = list === null || list === void 0 ? void 0 : list.find(item => item.value === value)) === null || _a === void 0 ? void 0 : _a.label,
             onChange: newValue => {

package/dist/elements/public/QueryBuilder/components/ListValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListValue.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/ListValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,oBAAiB;AACrD,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AASpD,MAAM,UAAU,SAAS,CAAC,MAAuB;;IAC/C,MAAM,KAAK,GAAG,OAAA,MAAM,CAAC,MAAM,0CAAE,IAAI,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IACnD,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,UAAU,eAAG,MAAM,CAAC,MAAM,0CAAE,IAAI,mCAAI,IAAI,CAAC,GAAG,CAAC;IACnD,MAAM,IAAI,GAAG,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAChG,MAAM,IAAI,SAAG,MAAM,CAAC,MAAM,0CAAE,IAAI,CAAC;IAEjC,OAAO,IAAI,CAAA;;QAEL,MAAM,CACN,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,EAC9C,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACvB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;;QAAC,OAAA,IAAI,CAAA;;cAEhB,KAAK,CAAC;YACN,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,IAAI;YACV,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE;YAClB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW;YAC9C,SAAS,EAAE,IAAI;YACf,YAAY,QAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,2CAAG,KAAK;YAC7D,QAAQ,EAAE,QAAQ,CAAC,EAAE;gBACnB,IAAI,QAAQ,EAAE;oBACZ,UAAU,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;iBAC9B;qBAAM;oBACL,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;iBAC7B;gBAED,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,MAAM,CAAC,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAC1E,CAAC;SACF,CAAC;;SAEL,CAAA;KAAA,CACF;;GAEJ,CAAC;AACJ,CAAC","sourcesContent":["import { Option, ParsedValue, Type } from '../types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { Select } from './Select';\nimport { repeat } from 'lit-html/directives/repeat';\n\nexport type ListValueParams = {\n  parsedValue: ParsedValue;\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function ListValue(params: ListValueParams): TemplateResult {\n  const Field = params.option?.list ? Select : Input;\n  const splitValue = params.parsedValue.value.split(',');\n  const optionType = params.option?.type ?? Type.Any;\n  const type = optionType === Type.Number ? 'number' : optionType === Type.Date ? 'date' : 'text';\n  const list = params.option?.list;\n\n  return html`\n    <div class=\"bg-contrast-10 grid grid-cols-1 gap-1px\">\n      ${repeat(\n        [...splitValue.filter(value => !!value), null],\n        (value, index) => index,\n        (value, index) => html`\n          <div class=\"bg-base\">\n            ${Field({\n              type: type,\n              list: list,\n              t: params.t,\n              value: value ?? '',\n              label: value ? String(index + 1) : 'add_value',\n              clearable: true,\n              displayValue: list?.find(item => item.value === value)?.label,\n              onChange: newValue => {\n                if (newValue) {\n                  splitValue[index] = newValue;\n                } else {\n                  splitValue.splice(index, 1);\n                }\n\n                params.onChange({ ...params.parsedValue, value: splitValue.join(',') });\n              },\n            })}\n          </div>\n        `\n      )}\n    </div>\n  `;\n}\n"]}
+{"version":3,"file":"ListValue.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/ListValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,oBAAiB;AACrD,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAWpD,MAAM,UAAU,SAAS,CAAC,MAAuB;;IAC/C,MAAM,KAAK,GAAG,OAAA,MAAM,CAAC,MAAM,0CAAE,IAAI,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IACnD,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,UAAU,eAAG,MAAM,CAAC,MAAM,0CAAE,IAAI,mCAAI,IAAI,CAAC,GAAG,CAAC;IACnD,MAAM,IAAI,GAAG,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAChG,MAAM,IAAI,SAAG,MAAM,CAAC,MAAM,0CAAE,IAAI,CAAC;IACjC,MAAM,eAAe,GAAsB,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpF,IAAI,CAAC,MAAM,CAAC,QAAQ;QAAE,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjD,OAAO,IAAI,CAAA;;QAEL,MAAM,CACN,eAAe,EACf,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACvB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;;QAAC,OAAA,IAAI,CAAA;;cAEhB,KAAK,CAAC;YACN,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,IAAI;YACV,CAAC,EAAE,MAAM,CAAC,CAAC;YACX,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE;YAClB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW;YAC9C,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,SAAS,EAAE,IAAI;YACf,YAAY,QAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,2CAAG,KAAK;YAC7D,QAAQ,EAAE,QAAQ,CAAC,EAAE;gBACnB,IAAI,QAAQ,EAAE;oBACZ,UAAU,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;iBAC9B;qBAAM;oBACL,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;iBAC7B;gBAED,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,MAAM,CAAC,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAC1E,CAAC;SACF,CAAC;;SAEL,CAAA;KAAA,CACF;;GAEJ,CAAC;AACJ,CAAC","sourcesContent":["import { Option, ParsedValue, Type } from '../types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { Select } from './Select';\nimport { repeat } from 'lit-html/directives/repeat';\n\nexport type ListValueParams = {\n  parsedValue: ParsedValue;\n  disabled: boolean;\n  readonly: boolean;\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function ListValue(params: ListValueParams): TemplateResult {\n  const Field = params.option?.list ? Select : Input;\n  const splitValue = params.parsedValue.value.split(',');\n  const optionType = params.option?.type ?? Type.Any;\n  const type = optionType === Type.Number ? 'number' : optionType === Type.Date ? 'date' : 'text';\n  const list = params.option?.list;\n  const displayedValues: (string | null)[] = [...splitValue.filter(value => !!value)];\n\n  if (!params.readonly) displayedValues.push(null);\n\n  return html`\n    <div class=\"bg-contrast-10 grid grid-cols-1 gap-1px\">\n      ${repeat(\n        displayedValues,\n        (value, index) => index,\n        (value, index) => html`\n          <div class=\"bg-base\">\n            ${Field({\n              type: type,\n              list: list,\n              t: params.t,\n              value: value ?? '',\n              label: value ? String(index + 1) : 'add_value',\n              disabled: params.disabled,\n              readonly: params.readonly,\n              clearable: true,\n              displayValue: list?.find(item => item.value === value)?.label,\n              onChange: newValue => {\n                if (newValue) {\n                  splitValue[index] = newValue;\n                } else {\n                  splitValue.splice(index, 1);\n                }\n\n                params.onChange({ ...params.parsedValue, value: splitValue.join(',') });\n              },\n            })}\n          </div>\n        `\n      )}\n    </div>\n  `;\n}\n"]}

package/dist/elements/public/QueryBuilder/components/Name.d.ts

@@ -3,6 +3,8 @@ import { ParsedValue } from '../types';
 import { TemplateResult } from 'lit-html';
 export declare type NameParams = {
     parsedValue: ParsedValue;
+    readonly: boolean;
+    disabled: boolean;
     t: I18n['t'];
     onChange: (newValue: ParsedValue) => void;
 };

package/dist/elements/public/QueryBuilder/components/Name.js

@@ -2,6 +2,8 @@ import { Input } from "./Input.js";
 export function Name(params) {
     var _a;
     return Input({
+        disabled: params.disabled,
+        readonly: params.readonly,
         value: (_a = params.parsedValue.name) !== null && _a !== void 0 ? _a : '',
         label: 'name',
         type: 'text',

package/dist/elements/public/QueryBuilder/components/Name.js.map

@@ -1 +1 @@
-{"version":3,"file":"Name.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Name.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAUhC,MAAM,UAAU,IAAI,CAAC,MAAkB;;IACrC,OAAO,KAAK,CAAC;QACX,KAAK,QAAE,MAAM,CAAC,WAAW,CAAC,IAAI,mCAAI,EAAE;QACpC,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,MAAM;QACZ,CAAC,EAAE,MAAM,CAAC,CAAC;QACX,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,MAAM,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;KAC/E,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { ParsedValue } from '../types';\nimport { TemplateResult } from 'lit-html';\n\nexport type NameParams = {\n  parsedValue: ParsedValue;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function Name(params: NameParams): TemplateResult {\n  return Input({\n    value: params.parsedValue.name ?? '',\n    label: 'name',\n    type: 'text',\n    t: params.t,\n    onChange: newName => params.onChange({ ...params.parsedValue, name: newName }),\n  });\n}\n"]}
+{"version":3,"file":"Name.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Name.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAYhC,MAAM,UAAU,IAAI,CAAC,MAAkB;;IACrC,OAAO,KAAK,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,KAAK,QAAE,MAAM,CAAC,WAAW,CAAC,IAAI,mCAAI,EAAE;QACpC,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,MAAM;QACZ,CAAC,EAAE,MAAM,CAAC,CAAC;QACX,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,MAAM,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;KAC/E,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { ParsedValue } from '../types';\nimport { TemplateResult } from 'lit-html';\n\nexport type NameParams = {\n  parsedValue: ParsedValue;\n  readonly: boolean;\n  disabled: boolean;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function Name(params: NameParams): TemplateResult {\n  return Input({\n    disabled: params.disabled,\n    readonly: params.readonly,\n    value: params.parsedValue.name ?? '',\n    label: 'name',\n    type: 'text',\n    t: params.t,\n    onChange: newName => params.onChange({ ...params.parsedValue, name: newName }),\n  });\n}\n"]}

package/dist/elements/public/QueryBuilder/components/OperatorToggle.d.ts

@@ -3,6 +3,8 @@ import { TemplateResult } from 'lit-html';
 import { I18n } from '../../I18n/I18n';
 export declare type OperatorToggleParams = {
     parsedValue: ParsedValue;
+    readonly: boolean;
+    disabled: boolean;
     option: Option | null;
     t: I18n['t'];
     onChange: (newValue: ParsedValue) => void;

package/dist/elements/public/QueryBuilder/components/OperatorToggle.js

@@ -33,14 +33,14 @@ export function OperatorToggle(params) {
         : params.parsedValue.name
             ? Object.values(Operator)
             : Object.values(Operator).filter(v => v !== Operator.IsDefined);
-    const isDisabled = operatorsForType.length === 0 || !params.parsedValue.path;
+    const isDisabled = params.disabled || params.readonly || operatorsForType.length === 0 || !params.parsedValue.path;
     return html `
     <button
       title=${params.t(`operator_${operator !== null && operator !== void 0 ? operator : 'equal'}`)}
       class=${classMap({
         'flex items-center justify-center w-m h-m transition-colors': true,
         'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,
-        'text-tertiary cursor-default': isDisabled,
+        'text-disabled cursor-default': isDisabled,
         'hover-bg-contrast-5': !isDisabled,
     })}
       ?disabled=${isDisabled}

package/dist/elements/public/QueryBuilder/components/OperatorToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperatorToggle.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/OperatorToggle.ts"],"names":[],"mappings":"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","sourcesContent":["import * as icons from '../icons/index';\n\nimport { Operator, Option, ParsedValue, Type } from '../types';\nimport { SVGTemplateResult, TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { classMap } from '../../../../utils/class-map';\n\nexport type OperatorToggleParams = {\n  parsedValue: ParsedValue;\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function OperatorToggle(params: OperatorToggleParams): TemplateResult {\n  const operator = params.parsedValue.operator;\n\n  const operatorToIcon: Record<string, SVGTemplateResult> = {\n    [Operator.GreaterThan]: icons.operatorGreaterThan,\n    [Operator.GreaterThanOrEqual]: icons.operatorGreaterThanOrEqual,\n    [Operator.In]: icons.operatorIn,\n    [Operator.IsDefined]: icons.operatorIsDefined,\n    [Operator.LessThan]: icons.operatorLessThan,\n    [Operator.LessThanOrEqual]: icons.operatorLessThanOrEqual,\n    [Operator.Not]: icons.operatorNot,\n  };\n\n  const operatorsByType = {\n    [Type.Attribute]: [Operator.In, Operator.Not, Operator.IsDefined],\n    [Type.Boolean]: [],\n    [Type.String]: [Operator.In, Operator.Not],\n    [Type.Number]: [\n      Operator.In,\n      Operator.Not,\n      Operator.GreaterThan,\n      Operator.LessThan,\n      Operator.GreaterThanOrEqual,\n      Operator.LessThanOrEqual,\n    ],\n    [Type.Date]: [Operator.In, Operator.Not],\n    [Type.Any]: Object.values(Operator),\n  };\n\n  const operatorsForType = params.option\n    ? operatorsByType[params.option.type]\n    : params.parsedValue.name\n    ? Object.values(Operator)\n    : Object.values(Operator).filter(v => v !== Operator.IsDefined);\n\n  const isDisabled = operatorsForType.length === 0 || !params.parsedValue.path;\n\n  return html`\n    <button\n      title=${params.t(`operator_${operator ?? 'equal'}`)}\n      class=${classMap({\n        'flex items-center justify-center w-m h-m transition-colors': true,\n        'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n        'text-tertiary cursor-default': isDisabled,\n        'hover-bg-contrast-5': !isDisabled,\n      })}\n      ?disabled=${isDisabled}\n      @click=${() => {\n        const newOperatorIndex = operator ? operatorsForType.indexOf(operator) : -1;\n        const newOperator = operatorsForType[newOperatorIndex + 1] ?? null;\n\n        params.onChange({\n          ...params.parsedValue,\n          operator: newOperator,\n          value: params.parsedValue.value,\n        });\n      }}\n    >\n      <div aria-hidden=\"true\">${operator ? operatorToIcon[operator] : icons.operatorEqual}</div>\n    </button>\n  `;\n}\n"]}
+{"version":3,"file":"OperatorToggle.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/OperatorToggle.ts"],"names":[],"mappings":"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","sourcesContent":["import * as icons from '../icons/index';\n\nimport { Operator, Option, ParsedValue, Type } from '../types';\nimport { SVGTemplateResult, TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { classMap } from '../../../../utils/class-map';\n\nexport type OperatorToggleParams = {\n  parsedValue: ParsedValue;\n  readonly: boolean;\n  disabled: boolean;\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function OperatorToggle(params: OperatorToggleParams): TemplateResult {\n  const operator = params.parsedValue.operator;\n\n  const operatorToIcon: Record<string, SVGTemplateResult> = {\n    [Operator.GreaterThan]: icons.operatorGreaterThan,\n    [Operator.GreaterThanOrEqual]: icons.operatorGreaterThanOrEqual,\n    [Operator.In]: icons.operatorIn,\n    [Operator.IsDefined]: icons.operatorIsDefined,\n    [Operator.LessThan]: icons.operatorLessThan,\n    [Operator.LessThanOrEqual]: icons.operatorLessThanOrEqual,\n    [Operator.Not]: icons.operatorNot,\n  };\n\n  const operatorsByType = {\n    [Type.Attribute]: [Operator.In, Operator.Not, Operator.IsDefined],\n    [Type.Boolean]: [],\n    [Type.String]: [Operator.In, Operator.Not],\n    [Type.Number]: [\n      Operator.In,\n      Operator.Not,\n      Operator.GreaterThan,\n      Operator.LessThan,\n      Operator.GreaterThanOrEqual,\n      Operator.LessThanOrEqual,\n    ],\n    [Type.Date]: [Operator.In, Operator.Not],\n    [Type.Any]: Object.values(Operator),\n  };\n\n  const operatorsForType = params.option\n    ? operatorsByType[params.option.type]\n    : params.parsedValue.name\n    ? Object.values(Operator)\n    : Object.values(Operator).filter(v => v !== Operator.IsDefined);\n\n  const isDisabled =\n    params.disabled || params.readonly || operatorsForType.length === 0 || !params.parsedValue.path;\n\n  return html`\n    <button\n      title=${params.t(`operator_${operator ?? 'equal'}`)}\n      class=${classMap({\n        'flex items-center justify-center w-m h-m transition-colors': true,\n        'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n        'text-disabled cursor-default': isDisabled,\n        'hover-bg-contrast-5': !isDisabled,\n      })}\n      ?disabled=${isDisabled}\n      @click=${() => {\n        const newOperatorIndex = operator ? operatorsForType.indexOf(operator) : -1;\n        const newOperator = operatorsForType[newOperatorIndex + 1] ?? null;\n\n        params.onChange({\n          ...params.parsedValue,\n          operator: newOperator,\n          value: params.parsedValue.value,\n        });\n      }}\n    >\n      <div aria-hidden=\"true\">${operator ? operatorToIcon[operator] : icons.operatorEqual}</div>\n    </button>\n  `;\n}\n"]}

package/dist/elements/public/QueryBuilder/components/Path.d.ts

@@ -3,9 +3,11 @@ import { I18n } from '../../I18n/I18n';
 import { TemplateResult } from 'lit-html';
 export declare type PathParams = {
     parsedValue: ParsedValue;
+    readonly: boolean;
+    disabled: boolean;
     options: Option[];
     option: Option | null;
     t: I18n['t'];
     onChange: (newValue: ParsedValue) => void;
 };
-export declare function Path({ parsedValue, option, options, t, onChange }: PathParams): TemplateResult;
+export declare function Path({ parsedValue, disabled, readonly, options, option, t, onChange, }: PathParams): TemplateResult;

package/dist/elements/public/QueryBuilder/components/Path.js

@@ -1,7 +1,9 @@
 import { Input } from "./Input.js";
-export function Path({ parsedValue, option, options, t, onChange }) {
+export function Path({ parsedValue, disabled, readonly, options, option, t, onChange, }) {
     return Input({
         displayValue: option === null || option === void 0 ? void 0 : option.label,
+        disabled,
+        readonly,
         value: parsedValue.path,
         label: 'field',
         list: options.map(option => ({ ...option, value: option.path })),

package/dist/elements/public/QueryBuilder/components/Path.js.map

@@ -1 +1 @@
-{"version":3,"file":"Path.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Path.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAWhC,MAAM,UAAU,IAAI,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAc;IAC5E,OAAO,KAAK,CAAC;QACX,YAAY,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK;QAC3B,KAAK,EAAE,WAAW,CAAC,IAAI;QACvB,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QAChE,IAAI,EAAE,MAAM;QACZ,EAAE,EAAE,MAAM;QACV,CAAC,EAAE,CAAC;QACJ,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;KAC5E,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { Option, ParsedValue } from '../types';\n\nimport { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { TemplateResult } from 'lit-html';\n\nexport type PathParams = {\n  parsedValue: ParsedValue;\n  options: Option[];\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function Path({ parsedValue, option, options, t, onChange }: PathParams): TemplateResult {\n  return Input({\n    displayValue: option?.label,\n    value: parsedValue.path,\n    label: 'field',\n    list: options.map(option => ({ ...option, value: option.path })),\n    type: 'text',\n    id: 'path',\n    t: t,\n    onChange: newPath => onChange({ operator: null, value: '', path: newPath }),\n  });\n}\n"]}
+{"version":3,"file":"Path.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Path.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAahC,MAAM,UAAU,IAAI,CAAC,EACnB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,CAAC,EACD,QAAQ,GACG;IACX,OAAO,KAAK,CAAC;QACX,YAAY,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK;QAC3B,QAAQ;QACR,QAAQ;QACR,KAAK,EAAE,WAAW,CAAC,IAAI;QACvB,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QAChE,IAAI,EAAE,MAAM;QACZ,EAAE,EAAE,MAAM;QACV,CAAC,EAAE,CAAC;QACJ,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;KAC5E,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { Option, ParsedValue } from '../types';\n\nimport { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { TemplateResult } from 'lit-html';\n\nexport type PathParams = {\n  parsedValue: ParsedValue;\n  readonly: boolean;\n  disabled: boolean;\n  options: Option[];\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function Path({\n  parsedValue,\n  disabled,\n  readonly,\n  options,\n  option,\n  t,\n  onChange,\n}: PathParams): TemplateResult {\n  return Input({\n    displayValue: option?.label,\n    disabled,\n    readonly,\n    value: parsedValue.path,\n    label: 'field',\n    list: options.map(option => ({ ...option, value: option.path })),\n    type: 'text',\n    id: 'path',\n    t: t,\n    onChange: newPath => onChange({ operator: null, value: '', path: newPath }),\n  });\n}\n"]}

package/dist/elements/public/QueryBuilder/components/RangeValue.d.ts

@@ -3,6 +3,8 @@ import { TemplateResult } from 'lit-html';
 import { I18n } from '../../I18n/I18n';
 export declare type RangeValueParams = {
     parsedValue: ParsedValue;
+    readonly: boolean;
+    disabled: boolean;
     option: Option | null;
     t: I18n['t'];
     onChange: (newValue: ParsedValue) => void;

package/dist/elements/public/QueryBuilder/components/RangeValue.js

@@ -4,7 +4,7 @@ import { Input } from "./Input.js";
 import { Select } from "./Select.js";
 export function RangeValue(params) {
     var _a, _b, _c;
-    const { t, parsedValue, option, onChange } = params;
+    const { t, parsedValue, option, readonly, disabled, onChange } = params;
     const splitValue = parsedValue.value.split('..');
     const from = splitValue.length >= 1 ? splitValue[0] : '';
     const to = splitValue.length >= 2 ? splitValue[1] : '';
@@ -17,6 +17,8 @@ export function RangeValue(params) {
       <div class="bg-base">
         ${Field({
         displayValue: (_b = list === null || list === void 0 ? void 0 : list.find(v => v.value === from)) === null || _b === void 0 ? void 0 : _b.label,
+        readonly,
+        disabled,
         value: from,
         label: 'range_from',
         type: type,
@@ -29,6 +31,8 @@ export function RangeValue(params) {
       <div class="bg-base">
         ${Field({
         displayValue: (_c = list === null || list === void 0 ? void 0 : list.find(v => v.value === to)) === null || _c === void 0 ? void 0 : _c.label,
+        readonly,
+        disabled,
         label: 'range_to',
         value: to,
         type: type,

package/dist/elements/public/QueryBuilder/components/RangeValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeValue.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/RangeValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,oBAAiB;AACrD,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,MAAM,EAAE,oBAAiB;AASlC,MAAM,UAAU,UAAU,CAAC,MAAwB;;IACjD,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IACpD,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,IAAI,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACzD,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5C,MAAM,UAAU,SAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,mCAAI,IAAI,CAAC,GAAG,CAAC;IAC5C,MAAM,IAAI,GAAG,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAChG,MAAM,IAAI,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC;IAE1B,OAAO,IAAI,CAAA;;;UAGH,KAAK,CAAC;QACN,YAAY,QAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,2CAAG,KAAK;QACtD,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QACV,CAAC,EAAE,CAAC;QACJ,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,GAAG,QAAQ,KAAK,EAAE,EAAE,EAAE,CAAC;KAChF,CAAC;;;;UAIA,KAAK,CAAC;QACN,YAAY,QAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,2CAAG,KAAK;QACpD,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QACV,CAAC,EAAE,CAAC;QACJ,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,GAAG,IAAI,KAAK,QAAQ,EAAE,EAAE,CAAC;KAClF,CAAC;;;GAGP,CAAC;AACJ,CAAC","sourcesContent":["import { Option, ParsedValue, Type } from '../types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { Select } from './Select';\n\nexport type RangeValueParams = {\n  parsedValue: ParsedValue;\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function RangeValue(params: RangeValueParams): TemplateResult {\n  const { t, parsedValue, option, onChange } = params;\n  const splitValue = parsedValue.value.split('..');\n  const from = splitValue.length >= 1 ? splitValue[0] : '';\n  const to = splitValue.length >= 2 ? splitValue[1] : '';\n\n  const Field = option?.list ? Select : Input;\n  const optionType = option?.type ?? Type.Any;\n  const type = optionType === Type.Number ? 'number' : optionType === Type.Date ? 'date' : 'text';\n  const list = option?.list;\n\n  return html`\n    <div class=\"grid bg-contrast-10 gap-1px grid-cols-1 grid-rows-2 sm-grid-cols-2 sm-grid-rows-1\">\n      <div class=\"bg-base\">\n        ${Field({\n          displayValue: list?.find(v => v.value === from)?.label,\n          value: from,\n          label: 'range_from',\n          type: type,\n          list: list,\n          t: t,\n          onChange: newValue => onChange({ ...parsedValue, value: `${newValue}..${to}` }),\n        })}\n      </div>\n\n      <div class=\"bg-base\">\n        ${Field({\n          displayValue: list?.find(v => v.value === to)?.label,\n          label: 'range_to',\n          value: to,\n          type: type,\n          list: list,\n          t: t,\n          onChange: newValue => onChange({ ...parsedValue, value: `${from}..${newValue}` }),\n        })}\n      </div>\n    </div>\n  `;\n}\n"]}
+{"version":3,"file":"RangeValue.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/RangeValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,oBAAiB;AACrD,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAWlC,MAAM,UAAU,UAAU,CAAC,MAAwB;;IACjD,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IACxE,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,IAAI,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACzD,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvD,MAAM,KAAK,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5C,MAAM,UAAU,SAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,mCAAI,IAAI,CAAC,GAAG,CAAC;IAC5C,MAAM,IAAI,GAAG,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAChG,MAAM,IAAI,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC;IAE1B,OAAO,IAAI,CAAA;;;UAGH,KAAK,CAAC;QACN,YAAY,QAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,2CAAG,KAAK;QACtD,QAAQ;QACR,QAAQ;QACR,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QACV,CAAC,EAAE,CAAC;QACJ,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,GAAG,QAAQ,KAAK,EAAE,EAAE,EAAE,CAAC;KAChF,CAAC;;;;UAIA,KAAK,CAAC;QACN,YAAY,QAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,2CAAG,KAAK;QACpD,QAAQ;QACR,QAAQ;QACR,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QACV,CAAC,EAAE,CAAC;QACJ,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,GAAG,IAAI,KAAK,QAAQ,EAAE,EAAE,CAAC;KAClF,CAAC;;;GAGP,CAAC;AACJ,CAAC","sourcesContent":["import { Option, ParsedValue, Type } from '../types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { Select } from './Select';\n\nexport type RangeValueParams = {\n  parsedValue: ParsedValue;\n  readonly: boolean;\n  disabled: boolean;\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function RangeValue(params: RangeValueParams): TemplateResult {\n  const { t, parsedValue, option, readonly, disabled, onChange } = params;\n  const splitValue = parsedValue.value.split('..');\n  const from = splitValue.length >= 1 ? splitValue[0] : '';\n  const to = splitValue.length >= 2 ? splitValue[1] : '';\n\n  const Field = option?.list ? Select : Input;\n  const optionType = option?.type ?? Type.Any;\n  const type = optionType === Type.Number ? 'number' : optionType === Type.Date ? 'date' : 'text';\n  const list = option?.list;\n\n  return html`\n    <div class=\"grid bg-contrast-10 gap-1px grid-cols-1 grid-rows-2 sm-grid-cols-2 sm-grid-rows-1\">\n      <div class=\"bg-base\">\n        ${Field({\n          displayValue: list?.find(v => v.value === from)?.label,\n          readonly,\n          disabled,\n          value: from,\n          label: 'range_from',\n          type: type,\n          list: list,\n          t: t,\n          onChange: newValue => onChange({ ...parsedValue, value: `${newValue}..${to}` }),\n        })}\n      </div>\n\n      <div class=\"bg-base\">\n        ${Field({\n          displayValue: list?.find(v => v.value === to)?.label,\n          readonly,\n          disabled,\n          label: 'range_to',\n          value: to,\n          type: type,\n          list: list,\n          t: t,\n          onChange: newValue => onChange({ ...parsedValue, value: `${from}..${newValue}` }),\n        })}\n      </div>\n    </div>\n  `;\n}\n"]}

package/dist/elements/public/QueryBuilder/components/Rule.d.ts

@@ -5,6 +5,8 @@ export declare type RuleParams = {
     parsedValue: ParsedValue;
     isFullSize?: boolean;
     isNested?: boolean;
+    disabled: boolean;
+    readonly: boolean;
     options: Option[];
     t: I18n['t'];
     onChange: (newValue: ParsedValue) => void;

package/dist/elements/public/QueryBuilder/components/Rule.js

@@ -12,11 +12,19 @@ import { SingleValue } from "./SingleValue.js";
 import { classMap } from "../../../../utils/class-map.js";
 export function Rule(params) {
     var _a, _b;
-    const { parsedValue, options, t, isNested, isFullSize, onChange, onDelete, onConvert } = params;
+    const { parsedValue, isFullSize, isNested, readonly, disabled, options, t, onConvert, onDelete, onChange, } = params;
     const option = (_a = options.find(o => o.path === parsedValue.path)) !== null && _a !== void 0 ? _a : null;
     const type = (_b = option === null || option === void 0 ? void 0 : option.type) !== null && _b !== void 0 ? _b : Type.Any;
     const operator = parsedValue.operator;
-    const componentParams = { parsedValue: parsedValue, option, options, t, onChange };
+    const componentParams = {
+        parsedValue: parsedValue,
+        disabled,
+        readonly,
+        options,
+        option,
+        t,
+        onChange,
+    };
     const typeToIcon = {
         [Type.Attribute]: icons.typeAttribute,
         [Type.Boolean]: icons.typeBoolean,
@@ -30,14 +38,23 @@ export function Rule(params) {
       <div
         class=${classMap({
         'flex-1 bg-base rounded overflow-hidden border': true,
-        'border-contrast-10': !isNested,
-        'border-contrast-50': !!isNested,
+        'border-contrast-10': !isNested && !readonly,
+        'border-contrast-50': !!isNested || readonly,
+        'border-dashed': readonly,
+        'border-solid': !readonly,
     })}
       >
         <div class="bg-contrast-10">
           <div class="grid gap-1px grid-vertical sm-grid-horizontal">
             <div class="bg-base" title=${t(`type_${type}`)}>
-              <div class="w-m h-m text-tertiary" aria-hidden="true">
+              <div
+                class=${classMap({
+        'w-m h-m': true,
+        'text-tertiary': !readonly && !disabled,
+        'text-disabled': readonly || disabled,
+    })}
+                aria-hidden="true"
+              >
                 ${option ? typeToIcon[type] : icons.typeAny}
               </div>
             </div>
@@ -74,7 +91,7 @@ export function Rule(params) {
         class=${classMap({
         '-mr-s self-start flex-col sm-flex-row flex-shrink-0 items-center': true,
         'border-t border-b border-transparent divide-y divide-transparent': true,
-        'hidden': !!isFullSize,
+        'hidden': !!isFullSize || readonly,
         'flex': !isFullSize,
     })}
       >
@@ -82,11 +99,12 @@ export function Rule(params) {
           aria-label=${t('delete')}
           class=${classMap({
         'box-content flex w-m h-m rounded-full transition-colors': true,
-        'text-secondary hover-bg-contrast-5 hover-text-error': true,
+        'text-secondary hover-bg-contrast-5 hover-text-error': !disabled,
+        'cursor-default text-disabled': disabled,
         'focus-outline-none focus-ring-2 ring-primary-50': true,
         'opacity-0': !parsedValue.path,
     })}
-          ?disabled=${!parsedValue.path}
+          ?disabled=${disabled || readonly || !parsedValue.path}
           @click=${onDelete}
         >
           <iron-icon
@@ -100,11 +118,13 @@ export function Rule(params) {
         <button
           aria-label=${t('add_or_clause')}
           class=${classMap({
-        'box-content flex w-m h-m rounded-full transition-colors text-success': true,
-        'hover-bg-contrast-5 focus-outline-none focus-ring-2 ring-primary-50': true,
+        'box-content flex w-m h-m rounded-full transition-colors': true,
+        'text-success hover-bg-contrast-5': !disabled,
+        'cursor-default text-disabled': disabled,
+        'focus-outline-none focus-ring-2 ring-primary-50': true,
         'opacity-0': !parsedValue.path || !!isNested,
     })}
-          ?disabled=${!parsedValue.path}
+          ?disabled=${disabled || readonly || !parsedValue.path}
           @click=${onConvert}
         >
           <iron-icon

package/dist/elements/public/QueryBuilder/components/Rule.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Rule.ts"],"names":[],"mappings":"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","sourcesContent":["import * as icons from '../icons/index';\n\nimport { Operator, Option, ParsedValue, Type } from '../types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { BooleanValue } from './BooleanValue';\nimport { I18n } from '../../I18n/I18n';\nimport { IsDefinedValue } from './IsDefinedValue';\nimport { ListValue } from './ListValue';\nimport { Name } from './Name';\nimport { OperatorToggle } from './OperatorToggle';\nimport { Path } from './Path';\nimport { RangeValue } from './RangeValue';\nimport { SingleValue } from './SingleValue';\nimport { classMap } from '../../../../utils/class-map';\n\nexport type RuleParams = {\n  parsedValue: ParsedValue;\n  isFullSize?: boolean;\n  isNested?: boolean;\n  options: Option[];\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n  onDelete?: () => void;\n  onConvert?: () => void;\n};\n\nexport function Rule(params: RuleParams): TemplateResult {\n  const { parsedValue, options, t, isNested, isFullSize, onChange, onDelete, onConvert } = params;\n\n  const option = options.find(o => o.path === parsedValue.path) ?? null;\n  const type = option?.type ?? Type.Any;\n  const operator = parsedValue.operator;\n  const componentParams = { parsedValue: parsedValue, option, options, t, onChange };\n\n  const typeToIcon = {\n    [Type.Attribute]: icons.typeAttribute,\n    [Type.Boolean]: icons.typeBoolean,\n    [Type.Number]: icons.typeNumber,\n    [Type.String]: icons.typeString,\n    [Type.Date]: icons.typeDate,\n    [Type.Any]: icons.typeAny,\n  };\n\n  return html`\n    <div class=\"flex items-center space-x-s\" aria-label=${t('query_builder_rule')}>\n      <div\n        class=${classMap({\n          'flex-1 bg-base rounded overflow-hidden border': true,\n          'border-contrast-10': !isNested,\n          'border-contrast-50': !!isNested,\n        })}\n      >\n        <div class=\"bg-contrast-10\">\n          <div class=\"grid gap-1px grid-vertical sm-grid-horizontal\">\n            <div class=\"bg-base\" title=${t(`type_${type}`)}>\n              <div class=\"w-m h-m text-tertiary\" aria-hidden=\"true\">\n                ${option ? typeToIcon[type] : icons.typeAny}\n              </div>\n            </div>\n\n            <div class=\"bg-base\">\n              ${parsedValue.path && (type === Type.Attribute || parsedValue.name)\n                ? html`\n                    <div class=\"bg-contrast-10 grid gap-1px grid-cols-1 sm-grid-cols-2\">\n                      <div class=\"bg-base\">${Path(componentParams)}</div>\n                      <div class=\"bg-base\">${Name(componentParams)}</div>\n                    </div>\n                  `\n                : Path(componentParams)}\n            </div>\n\n            <div class=\"bg-base\">${OperatorToggle(componentParams)}</div>\n\n            <div class=\"bg-base\">\n              ${operator === Operator.In\n                ? ListValue(componentParams)\n                : operator === Operator.IsDefined\n                ? IsDefinedValue(componentParams)\n                : type === Type.Boolean\n                ? BooleanValue(componentParams)\n                : operator === null && [Type.Number, Type.Date].includes(type)\n                ? RangeValue(componentParams)\n                : SingleValue(componentParams)}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          '-mr-s self-start flex-col sm-flex-row flex-shrink-0 items-center': true,\n          'border-t border-b border-transparent divide-y divide-transparent': true,\n          'hidden': !!isFullSize,\n          'flex': !isFullSize,\n        })}\n      >\n        <button\n          aria-label=${t('delete')}\n          class=${classMap({\n            'box-content flex w-m h-m rounded-full transition-colors': true,\n            'text-secondary hover-bg-contrast-5 hover-text-error': true,\n            'focus-outline-none focus-ring-2 ring-primary-50': true,\n            'opacity-0': !parsedValue.path,\n          })}\n          ?disabled=${!parsedValue.path}\n          @click=${onDelete}\n        >\n          <iron-icon\n            aria-hidden=\"true\"\n            class=\"m-auto icon-inline text-xl\"\n            icon=\"icons:remove-circle-outline\"\n          >\n          </iron-icon>\n        </button>\n\n        <button\n          aria-label=${t('add_or_clause')}\n          class=${classMap({\n            'box-content flex w-m h-m rounded-full transition-colors text-success': true,\n            'hover-bg-contrast-5 focus-outline-none focus-ring-2 ring-primary-50': true,\n            'opacity-0': !parsedValue.path || !!isNested,\n          })}\n          ?disabled=${!parsedValue.path}\n          @click=${onConvert}\n        >\n          <iron-icon\n            aria-hidden=\"true\"\n            class=\"m-auto icon-inline text-xl\"\n            icon=\"icons:add-circle-outline\"\n          >\n          </iron-icon>\n        </button>\n      </div>\n    </div>\n  `;\n}\n"]}
+{"version":3,"file":"Rule.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Rule.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,0BAAuB;AAExC,OAAO,EAAE,QAAQ,EAAuB,IAAI,EAAE,oBAAiB;AAC/D,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,OAAO,EAAE,cAAc,EAAE,4BAAyB;AAClD,OAAO,EAAE,SAAS,EAAE,uBAAoB;AACxC,OAAO,EAAE,IAAI,EAAE,kBAAe;AAC9B,OAAO,EAAE,cAAc,EAAE,4BAAyB;AAClD,OAAO,EAAE,IAAI,EAAE,kBAAe;AAC9B,OAAO,EAAE,UAAU,EAAE,wBAAqB;AAC1C,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAC5C,OAAO,EAAE,QAAQ,EAAE,uCAAoC;AAevD,MAAM,UAAU,IAAI,CAAC,MAAkB;;IACrC,MAAM,EACJ,WAAW,EACX,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,CAAC,EACD,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,GAAG,MAAM,CAAC;IAEX,MAAM,MAAM,SAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,IAAI,CAAC,mCAAI,IAAI,CAAC;IACtE,MAAM,IAAI,SAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,mCAAI,IAAI,CAAC,GAAG,CAAC;IACtC,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC;IACtC,MAAM,eAAe,GAAG;QACtB,WAAW,EAAE,WAAW;QACxB,QAAQ;QACR,QAAQ;QACR,OAAO;QACP,MAAM;QACN,CAAC;QACD,QAAQ;KACT,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa;QACrC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW;QACjC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU;QAC/B,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,UAAU;QAC/B,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,QAAQ;QAC3B,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,OAAO;KAC1B,CAAC;IAEF,OAAO,IAAI,CAAA;0DAC6C,CAAC,CAAC,oBAAoB,CAAC;;gBAEjE,QAAQ,CAAC;QACf,+CAA+C,EAAE,IAAI;QACrD,oBAAoB,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;QAC5C,oBAAoB,EAAE,CAAC,CAAC,QAAQ,IAAI,QAAQ;QAC5C,eAAe,EAAE,QAAQ;QACzB,cAAc,EAAE,CAAC,QAAQ;KAC1B,CAAC;;;;yCAI+B,CAAC,CAAC,QAAQ,IAAI,EAAE,CAAC;;wBAElC,QAAQ,CAAC;QACf,SAAS,EAAE,IAAI;QACf,eAAe,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;QACvC,eAAe,EAAE,QAAQ,IAAI,QAAQ;KACtC,CAAC;;;kBAGA,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO;;;;;gBAK3C,WAAW,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,IAAI,WAAW,CAAC,IAAI,CAAC;QACjE,CAAC,CAAC,IAAI,CAAA;;6CAEuB,IAAI,CAAC,eAAe,CAAC;6CACrB,IAAI,CAAC,eAAe,CAAC;;mBAE/C;QACH,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;;;mCAGJ,cAAc,CAAC,eAAe,CAAC;;;gBAGlD,QAAQ,KAAK,QAAQ,CAAC,EAAE;QACxB,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC;QAC5B,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,SAAS;YACjC,CAAC,CAAC,cAAc,CAAC,eAAe,CAAC;YACjC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO;gBACvB,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC;gBAC/B,CAAC,CAAC,QAAQ,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;oBAC9D,CAAC,CAAC,UAAU,CAAC,eAAe,CAAC;oBAC7B,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC;;;;;;;gBAO9B,QAAQ,CAAC;QACf,kEAAkE,EAAE,IAAI;QACxE,kEAAkE,EAAE,IAAI;QACxE,QAAQ,EAAE,CAAC,CAAC,UAAU,IAAI,QAAQ;QAClC,MAAM,EAAE,CAAC,UAAU;KACpB,CAAC;;;uBAGa,CAAC,CAAC,QAAQ,CAAC;kBAChB,QAAQ,CAAC;QACf,yDAAyD,EAAE,IAAI;QAC/D,qDAAqD,EAAE,CAAC,QAAQ;QAChE,8BAA8B,EAAE,QAAQ;QACxC,iDAAiD,EAAE,IAAI;QACvD,WAAW,EAAE,CAAC,WAAW,CAAC,IAAI;KAC/B,CAAC;sBACU,QAAQ,IAAI,QAAQ,IAAI,CAAC,WAAW,CAAC,IAAI;mBAC5C,QAAQ;;;;;;;;;;;uBAWJ,CAAC,CAAC,eAAe,CAAC;kBACvB,QAAQ,CAAC;QACf,yDAAyD,EAAE,IAAI;QAC/D,kCAAkC,EAAE,CAAC,QAAQ;QAC7C,8BAA8B,EAAE,QAAQ;QACxC,iDAAiD,EAAE,IAAI;QACvD,WAAW,EAAE,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,QAAQ;KAC7C,CAAC;sBACU,QAAQ,IAAI,QAAQ,IAAI,CAAC,WAAW,CAAC,IAAI;mBAC5C,SAAS;;;;;;;;;;;GAWzB,CAAC;AACJ,CAAC","sourcesContent":["import * as icons from '../icons/index';\n\nimport { Operator, Option, ParsedValue, Type } from '../types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { BooleanValue } from './BooleanValue';\nimport { I18n } from '../../I18n/I18n';\nimport { IsDefinedValue } from './IsDefinedValue';\nimport { ListValue } from './ListValue';\nimport { Name } from './Name';\nimport { OperatorToggle } from './OperatorToggle';\nimport { Path } from './Path';\nimport { RangeValue } from './RangeValue';\nimport { SingleValue } from './SingleValue';\nimport { classMap } from '../../../../utils/class-map';\n\nexport type RuleParams = {\n  parsedValue: ParsedValue;\n  isFullSize?: boolean;\n  isNested?: boolean;\n  disabled: boolean;\n  readonly: boolean;\n  options: Option[];\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n  onDelete?: () => void;\n  onConvert?: () => void;\n};\n\nexport function Rule(params: RuleParams): TemplateResult {\n  const {\n    parsedValue,\n    isFullSize,\n    isNested,\n    readonly,\n    disabled,\n    options,\n    t,\n    onConvert,\n    onDelete,\n    onChange,\n  } = params;\n\n  const option = options.find(o => o.path === parsedValue.path) ?? null;\n  const type = option?.type ?? Type.Any;\n  const operator = parsedValue.operator;\n  const componentParams = {\n    parsedValue: parsedValue,\n    disabled,\n    readonly,\n    options,\n    option,\n    t,\n    onChange,\n  };\n\n  const typeToIcon = {\n    [Type.Attribute]: icons.typeAttribute,\n    [Type.Boolean]: icons.typeBoolean,\n    [Type.Number]: icons.typeNumber,\n    [Type.String]: icons.typeString,\n    [Type.Date]: icons.typeDate,\n    [Type.Any]: icons.typeAny,\n  };\n\n  return html`\n    <div class=\"flex items-center space-x-s\" aria-label=${t('query_builder_rule')}>\n      <div\n        class=${classMap({\n          'flex-1 bg-base rounded overflow-hidden border': true,\n          'border-contrast-10': !isNested && !readonly,\n          'border-contrast-50': !!isNested || readonly,\n          'border-dashed': readonly,\n          'border-solid': !readonly,\n        })}\n      >\n        <div class=\"bg-contrast-10\">\n          <div class=\"grid gap-1px grid-vertical sm-grid-horizontal\">\n            <div class=\"bg-base\" title=${t(`type_${type}`)}>\n              <div\n                class=${classMap({\n                  'w-m h-m': true,\n                  'text-tertiary': !readonly && !disabled,\n                  'text-disabled': readonly || disabled,\n                })}\n                aria-hidden=\"true\"\n              >\n                ${option ? typeToIcon[type] : icons.typeAny}\n              </div>\n            </div>\n\n            <div class=\"bg-base\">\n              ${parsedValue.path && (type === Type.Attribute || parsedValue.name)\n                ? html`\n                    <div class=\"bg-contrast-10 grid gap-1px grid-cols-1 sm-grid-cols-2\">\n                      <div class=\"bg-base\">${Path(componentParams)}</div>\n                      <div class=\"bg-base\">${Name(componentParams)}</div>\n                    </div>\n                  `\n                : Path(componentParams)}\n            </div>\n\n            <div class=\"bg-base\">${OperatorToggle(componentParams)}</div>\n\n            <div class=\"bg-base\">\n              ${operator === Operator.In\n                ? ListValue(componentParams)\n                : operator === Operator.IsDefined\n                ? IsDefinedValue(componentParams)\n                : type === Type.Boolean\n                ? BooleanValue(componentParams)\n                : operator === null && [Type.Number, Type.Date].includes(type)\n                ? RangeValue(componentParams)\n                : SingleValue(componentParams)}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          '-mr-s self-start flex-col sm-flex-row flex-shrink-0 items-center': true,\n          'border-t border-b border-transparent divide-y divide-transparent': true,\n          'hidden': !!isFullSize || readonly,\n          'flex': !isFullSize,\n        })}\n      >\n        <button\n          aria-label=${t('delete')}\n          class=${classMap({\n            'box-content flex w-m h-m rounded-full transition-colors': true,\n            'text-secondary hover-bg-contrast-5 hover-text-error': !disabled,\n            'cursor-default text-disabled': disabled,\n            'focus-outline-none focus-ring-2 ring-primary-50': true,\n            'opacity-0': !parsedValue.path,\n          })}\n          ?disabled=${disabled || readonly || !parsedValue.path}\n          @click=${onDelete}\n        >\n          <iron-icon\n            aria-hidden=\"true\"\n            class=\"m-auto icon-inline text-xl\"\n            icon=\"icons:remove-circle-outline\"\n          >\n          </iron-icon>\n        </button>\n\n        <button\n          aria-label=${t('add_or_clause')}\n          class=${classMap({\n            'box-content flex w-m h-m rounded-full transition-colors': true,\n            'text-success hover-bg-contrast-5': !disabled,\n            'cursor-default text-disabled': disabled,\n            'focus-outline-none focus-ring-2 ring-primary-50': true,\n            'opacity-0': !parsedValue.path || !!isNested,\n          })}\n          ?disabled=${disabled || readonly || !parsedValue.path}\n          @click=${onConvert}\n        >\n          <iron-icon\n            aria-hidden=\"true\"\n            class=\"m-auto icon-inline text-xl\"\n            icon=\"icons:add-circle-outline\"\n          >\n          </iron-icon>\n        </button>\n      </div>\n    </div>\n  `;\n}\n"]}

package/dist/elements/public/QueryBuilder/components/Select.d.ts

@@ -2,6 +2,8 @@ import { TemplateResult } from 'lit-html';
 import { I18n } from '../../I18n/I18n';
 export declare type SelectParams = {
     clearable?: boolean;
+    disabled: boolean;
+    readonly: boolean;
     label: string;
     value: string;
     list?: {

package/dist/elements/public/QueryBuilder/components/Select.js

@@ -5,16 +5,25 @@ export function Select(params) {
     const isEmpty = (_b = (_a = params.list) === null || _a === void 0 ? void 0 : _a.every(v => v.value !== params.value)) !== null && _b !== void 0 ? _b : true;
     return html `
     <label
-      class="flex items-center cursor-pointer transition-colors group text-tertiary hover-bg-contrast-5"
+      class=${classMap({
+        'flex items-center transition-colors group text-tertiary': true,
+        'cursor-pointer hover-bg-contrast-5': !params.disabled && !params.readonly,
+        'cursor-default': params.disabled || params.readonly,
+    })}
     >
       <div class="relative flex-1 min-w-0 overflow-hidden">
         <select
           class=${classMap({
-        'cursor-pointer bg-transparent relative appearance-none flex h-m px-s': true,
+        'bg-transparent relative appearance-none flex h-m px-s': true,
         'font-medium w-full max-w-full whitespace-nowrap focus-outline-none': true,
-        'text-tertiary': isEmpty,
-        'text-body': !isEmpty,
+        'text-tertiary': isEmpty && !params.disabled,
+        'text-body': !isEmpty && !params.disabled && !params.readonly,
+        'text-disabled': params.disabled,
+        'text-secondary': !isEmpty && params.readonly,
+        'cursor-pointer': !params.disabled && !params.readonly,
+        'cursor-default': params.disabled || params.readonly,
     })}
+          ?disabled=${params.disabled || params.readonly}
           @change=${(evt) => {
         const select = evt.currentTarget;
         const value = select.options[select.options.selectedIndex].value;
@@ -38,16 +47,27 @@ export function Select(params) {
         ? ''
         : html `
             <span
-              class="font-tnum text-xs font-medium border mr-s px-xs rounded-s border-current inline-block"
+              class=${classMap({
+            'font-tnum text-xs font-medium border mr-s px-xs rounded-s border-current inline-block': true,
+            'text-body': !params.disabled && !params.readonly,
+            'text-disabled': params.disabled,
+            'text-secondary': params.readonly,
+        })}
             >
               ${params.t(params.label)}
             </span>
 
-            ${params.clearable
+            ${params.clearable && !params.readonly
             ? html `
                   <button
                     aria-label=${params.t('delete')}
-                    class="w-s h-s mr-xs text-body flex items-center justify-center transition-colors rounded-full focus-outline-none focus-ring-2 focus-ring-primary-50 hover-bg-contrast-5 hover-text-error"
+                    class=${classMap({
+                'w-s h-s mr-xs flex items-center justify-center transition-colors rounded-full': true,
+                'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+                'hover-bg-contrast-5 hover-text-error text-body': !params.disabled,
+                'text-disabled': params.disabled,
+            })}
+                    ?disabled=${params.disabled}
                     @click=${() => params.onChange('')}
                   >
                     <iron-icon

package/dist/elements/public/QueryBuilder/components/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,uCAAoC;AAWvD,MAAM,UAAU,MAAM,CAAC,MAAoB;;IACzC,MAAM,OAAO,eAAG,MAAM,CAAC,IAAI,0CAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,oCAAK,IAAI,CAAC;IAE1E,OAAO,IAAI,CAAA;;;;;;kBAMK,QAAQ,CAAC;QACf,sEAAsE,EAAE,IAAI;QAC5E,oEAAoE,EAAE,IAAI;QAC1E,eAAe,EAAE,OAAO;QACxB,WAAW,EAAE,CAAC,OAAO;KACtB,CAAC;oBACQ,CAAC,GAAU,EAAE,EAAE;QACvB,MAAM,MAAM,GAAG,GAAG,CAAC,aAAkC,CAAC;QACtD,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;QACjE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;;YAEC,OAAO;QACP,CAAC,CAAC,IAAI,CAAA;sDACoC,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;eACxE;QACH,CAAC,CAAC,EAAE;YACJ,MAAA,MAAM,CAAC,IAAI,0CAAE,GAAG,CAChB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CACnB,IAAI,CAAA;gCACc,KAAK,cAAc,KAAK,KAAK,MAAM,CAAC,KAAK;oBACrD,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;;eAEpB,CACJ;;;;QAIH,OAAO;QACP,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,IAAI,CAAA;;;;gBAIE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;cAGxB,MAAM,CAAC,SAAS;YAChB,CAAC,CAAC,IAAI,CAAA;;iCAEa,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;;6BAEtB,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;;;;;iBASrC;YACH,CAAC,CAAC,EAAE;WACP;;GAER,CAAC;AACJ,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { classMap } from '../../../../utils/class-map';\n\nexport type SelectParams = {\n  clearable?: boolean;\n  label: string;\n  value: string;\n  list?: { label: string; value: string }[];\n  t: I18n['t'];\n  onChange: (newValue: string) => void;\n};\n\nexport function Select(params: SelectParams): TemplateResult {\n  const isEmpty = params.list?.every(v => v.value !== params.value) ?? true;\n\n  return html`\n    <label\n      class=\"flex items-center cursor-pointer transition-colors group text-tertiary hover-bg-contrast-5\"\n    >\n      <div class=\"relative flex-1 min-w-0 overflow-hidden\">\n        <select\n          class=${classMap({\n            'cursor-pointer bg-transparent relative appearance-none flex h-m px-s': true,\n            'font-medium w-full max-w-full whitespace-nowrap focus-outline-none': true,\n            'text-tertiary': isEmpty,\n            'text-body': !isEmpty,\n          })}\n          @change=${(evt: Event) => {\n            const select = evt.currentTarget as HTMLSelectElement;\n            const value = select.options[select.options.selectedIndex].value;\n            params.onChange(value);\n          }}\n        >\n          ${isEmpty\n            ? html`\n                <option value=\"\" disabled ?selected=${isEmpty}>${params.t(params.label)}</option>\n              `\n            : ''}\n          ${params.list?.map(\n            ({ label, value }) =>\n              html`\n                <option value=${value} ?selected=${value === params.value}>\n                  ${params.t(label)}\n                </option>\n              `\n          )}\n        </select>\n      </div>\n\n      ${isEmpty\n        ? ''\n        : html`\n            <span\n              class=\"font-tnum text-xs font-medium border mr-s px-xs rounded-s border-current inline-block\"\n            >\n              ${params.t(params.label)}\n            </span>\n\n            ${params.clearable\n              ? html`\n                  <button\n                    aria-label=${params.t('delete')}\n                    class=\"w-s h-s mr-xs text-body flex items-center justify-center transition-colors rounded-full focus-outline-none focus-ring-2 focus-ring-primary-50 hover-bg-contrast-5 hover-text-error\"\n                    @click=${() => params.onChange('')}\n                  >\n                    <iron-icon\n                      aria-hidden=\"true\"\n                      class=\"icon-inline text-l\"\n                      icon=\"icons:remove-circle-outline\"\n                    >\n                    </iron-icon>\n                  </button>\n                `\n              : ''}\n          `}\n    </label>\n  `;\n}\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Select.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { classMap } from '../../../../utils/class-map';\n\nexport type SelectParams = {\n  clearable?: boolean;\n  disabled: boolean;\n  readonly: boolean;\n  label: string;\n  value: string;\n  list?: { label: string; value: string }[];\n  t: I18n['t'];\n  onChange: (newValue: string) => void;\n};\n\nexport function Select(params: SelectParams): TemplateResult {\n  const isEmpty = params.list?.every(v => v.value !== params.value) ?? true;\n\n  return html`\n    <label\n      class=${classMap({\n        'flex items-center transition-colors group text-tertiary': true,\n        'cursor-pointer hover-bg-contrast-5': !params.disabled && !params.readonly,\n        'cursor-default': params.disabled || params.readonly,\n      })}\n    >\n      <div class=\"relative flex-1 min-w-0 overflow-hidden\">\n        <select\n          class=${classMap({\n            'bg-transparent relative appearance-none flex h-m px-s': true,\n            'font-medium w-full max-w-full whitespace-nowrap focus-outline-none': true,\n            'text-tertiary': isEmpty && !params.disabled,\n            'text-body': !isEmpty && !params.disabled && !params.readonly,\n            'text-disabled': params.disabled,\n            'text-secondary': !isEmpty && params.readonly,\n            'cursor-pointer': !params.disabled && !params.readonly,\n            'cursor-default': params.disabled || params.readonly,\n          })}\n          ?disabled=${params.disabled || params.readonly}\n          @change=${(evt: Event) => {\n            const select = evt.currentTarget as HTMLSelectElement;\n            const value = select.options[select.options.selectedIndex].value;\n            params.onChange(value);\n          }}\n        >\n          ${isEmpty\n            ? html`\n                <option value=\"\" disabled ?selected=${isEmpty}>${params.t(params.label)}</option>\n              `\n            : ''}\n          ${params.list?.map(\n            ({ label, value }) =>\n              html`\n                <option value=${value} ?selected=${value === params.value}>\n                  ${params.t(label)}\n                </option>\n              `\n          )}\n        </select>\n      </div>\n\n      ${isEmpty\n        ? ''\n        : html`\n            <span\n              class=${classMap({\n                'font-tnum text-xs font-medium border mr-s px-xs rounded-s border-current inline-block':\n                  true,\n                'text-body': !params.disabled && !params.readonly,\n                'text-disabled': params.disabled,\n                'text-secondary': params.readonly,\n              })}\n            >\n              ${params.t(params.label)}\n            </span>\n\n            ${params.clearable && !params.readonly\n              ? html`\n                  <button\n                    aria-label=${params.t('delete')}\n                    class=${classMap({\n                      'w-s h-s mr-xs flex items-center justify-center transition-colors rounded-full':\n                        true,\n                      'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n                      'hover-bg-contrast-5 hover-text-error text-body': !params.disabled,\n                      'text-disabled': params.disabled,\n                    })}\n                    ?disabled=${params.disabled}\n                    @click=${() => params.onChange('')}\n                  >\n                    <iron-icon\n                      aria-hidden=\"true\"\n                      class=\"icon-inline text-l\"\n                      icon=\"icons:remove-circle-outline\"\n                    >\n                    </iron-icon>\n                  </button>\n                `\n              : ''}\n          `}\n    </label>\n  `;\n}\n"]}

package/dist/elements/public/QueryBuilder/components/SingleValue.d.ts

@@ -3,6 +3,8 @@ import { I18n } from '../../I18n/I18n';
 import { TemplateResult } from 'lit-html';
 export declare type SingleValueParams = {
     parsedValue: ParsedValue;
+    readonly: boolean;
+    disabled: boolean;
     option: Option | null;
     t: I18n['t'];
     onChange: (newValue: ParsedValue) => void;

package/dist/elements/public/QueryBuilder/components/SingleValue.js

@@ -3,12 +3,13 @@ import { Input } from "./Input.js";
 import { Select } from "./Select.js";
 export function SingleValue(params) {
     var _a, _b, _c, _d;
-    const { t, option, parsedValue, onChange } = params;
+    const { t, option, parsedValue, readonly, disabled, onChange } = params;
     const Field = (option === null || option === void 0 ? void 0 : option.list) ? Select : Input;
     const type = (_a = option === null || option === void 0 ? void 0 : option.type) !== null && _a !== void 0 ? _a : Type.Any;
     return Field({
         displayValue: (_c = (_b = option === null || option === void 0 ? void 0 : option.list) === null || _b === void 0 ? void 0 : _b.find(v => v.value === parsedValue.value)) === null || _c === void 0 ? void 0 : _c.label,
-        disabled: !parsedValue.path,
+        readonly,
+        disabled: disabled || !parsedValue.path,
         value: (_d = parsedValue.value) !== null && _d !== void 0 ? _d : '',
         label: 'value',
         type: type === Type.Number ? 'number' : type === Type.Date ? 'date' : 'text',

package/dist/elements/public/QueryBuilder/components/SingleValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleValue.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/SingleValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,oBAAiB;AAGrD,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAUlC,MAAM,UAAU,WAAW,CAAC,MAAyB;;IACnD,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IACpD,MAAM,KAAK,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5C,MAAM,IAAI,SAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,mCAAI,IAAI,CAAC,GAAG,CAAC;IAEtC,OAAO,KAAK,CAAC;QACX,YAAY,cAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,2CAAG,KAAK;QAC3E,QAAQ,EAAE,CAAC,WAAW,CAAC,IAAI;QAC3B,KAAK,QAAE,WAAW,CAAC,KAAK,mCAAI,EAAE;QAC9B,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;QAC5E,IAAI,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI;QAClB,CAAC,EAAE,CAAC;QACJ,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KACpE,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { Option, ParsedValue, Type } from '../types';\n\nimport { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { Select } from './Select';\nimport { TemplateResult } from 'lit-html';\n\nexport type SingleValueParams = {\n  parsedValue: ParsedValue;\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function SingleValue(params: SingleValueParams): TemplateResult {\n  const { t, option, parsedValue, onChange } = params;\n  const Field = option?.list ? Select : Input;\n  const type = option?.type ?? Type.Any;\n\n  return Field({\n    displayValue: option?.list?.find(v => v.value === parsedValue.value)?.label,\n    disabled: !parsedValue.path,\n    value: parsedValue.value ?? '',\n    label: 'value',\n    type: type === Type.Number ? 'number' : type === Type.Date ? 'date' : 'text',\n    list: option?.list,\n    t: t,\n    onChange: newValue => onChange({ ...parsedValue, value: newValue }),\n  });\n}\n"]}
+{"version":3,"file":"SingleValue.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/SingleValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,oBAAiB;AAGrD,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAYlC,MAAM,UAAU,WAAW,CAAC,MAAyB;;IACnD,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IACxE,MAAM,KAAK,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5C,MAAM,IAAI,SAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,mCAAI,IAAI,CAAC,GAAG,CAAC;IAEtC,OAAO,KAAK,CAAC;QACX,YAAY,cAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,2CAAG,KAAK;QAC3E,QAAQ;QACR,QAAQ,EAAE,QAAQ,IAAI,CAAC,WAAW,CAAC,IAAI;QACvC,KAAK,QAAE,WAAW,CAAC,KAAK,mCAAI,EAAE;QAC9B,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;QAC5E,IAAI,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI;QAClB,CAAC,EAAE,CAAC;QACJ,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KACpE,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { Option, ParsedValue, Type } from '../types';\n\nimport { I18n } from '../../I18n/I18n';\nimport { Input } from './Input';\nimport { Select } from './Select';\nimport { TemplateResult } from 'lit-html';\n\nexport type SingleValueParams = {\n  parsedValue: ParsedValue;\n  readonly: boolean;\n  disabled: boolean;\n  option: Option | null;\n  t: I18n['t'];\n  onChange: (newValue: ParsedValue) => void;\n};\n\nexport function SingleValue(params: SingleValueParams): TemplateResult {\n  const { t, option, parsedValue, readonly, disabled, onChange } = params;\n  const Field = option?.list ? Select : Input;\n  const type = option?.type ?? Type.Any;\n\n  return Field({\n    displayValue: option?.list?.find(v => v.value === parsedValue.value)?.label,\n    readonly,\n    disabled: disabled || !parsedValue.path,\n    value: parsedValue.value ?? '',\n    label: 'value',\n    type: type === Type.Number ? 'number' : type === Type.Date ? 'date' : 'text',\n    list: option?.list,\n    t: t,\n    onChange: newValue => onChange({ ...parsedValue, value: newValue }),\n  });\n}\n"]}