@foxy.io/elements 1.43.0-beta.2 → 1.43.0-beta.3

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

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../../../src/elements/public/QueryBuilder/QueryBuilder.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { ParsedValue, Operator, Option, Type } from './types';\n\nimport { Group } from './components/Group';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { parse } from './utils/parse';\nimport { stringify } from './utils/stringify';\nimport { styles } from './styles';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\n\nconst NS = 'query-builder';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)))\n);\n\n/**\n * UI component for creating Foxy hAPI filters visually. Compatible with\n * Backend API, Customer API or any other API using the same format as described\n * in our [docs](https://api.foxy.io/docs/cheat-sheet).\n *\n * @element foxy-query-builder\n * @since 1.12.0\n */\nclass QueryBuilder extends Base {\n  /** QueryBuilder dispatches this event on itself when value changes. */\n  static readonly ChangeEvent = class extends CustomEvent<void> {};\n\n  /** Operator dictionary for use in autocomplete options. */\n  static readonly Operator = Operator;\n\n  /** Field type dictionary for use in autocomplete options. */\n  static readonly Type = Type;\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      reservedPaths: { type: Array, attribute: 'reserved-paths' },\n      disableZoom: { type: Boolean, attribute: 'disable-zoom' },\n      disableOr: { type: Boolean, attribute: 'disable-or' },\n      operators: { type: Array },\n      options: { type: Array },\n      value: { type: String },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [super.styles, styles];\n  }\n\n  /** List of reserved paths that should not be visible. */\n  reservedPaths: string[] = ['zoom', 'limit', 'offset', 'order', 'fields'];\n\n  /** If true, doesn't add `zoom` query parameter for complex paths. */\n  disableZoom = false;\n\n  /** If true, hides the UI for the \"OR\" operator in queries. */\n  disableOr = false;\n\n  /** List of operators available in the builder UI. */\n  operators: Operator[] = Object.values(Operator);\n\n  /** Autocomplete suggestions. */\n  options: Option[] | null = null;\n\n  /** Current value as hAPI filter string. */\n  value: string | null = null;\n\n  render(): TemplateResult {\n    const reservedPaths = new Set(this.reservedPaths);\n    const hiddenValues: (ParsedValue | ParsedValue[])[] = [];\n    const visibleValues: (ParsedValue | ParsedValue[])[] = [];\n\n    parse(this.value ?? '').forEach(value => {\n      const isVisible = Array.isArray(value) || !reservedPaths.has(value.path);\n      isVisible ? visibleValues.push(value) : hiddenValues.push(value);\n    });\n\n    return Group({\n      parsedValues: visibleValues,\n      disableOr: this.disableOr,\n      operators: this.operators ?? [],\n      disabled: this.disabled,\n      readonly: this.readonly,\n      options: this.options ?? [],\n      t: this.t.bind(this),\n      onChange: newValue => {\n        this.value = stringify([...newValue, ...hiddenValues], this.disableZoom);\n        this.dispatchEvent(new QueryBuilder.ChangeEvent('change'));\n      },\n    });\n  }\n}\n\nexport { QueryBuilder };\n"]}
+{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../../../src/elements/public/QueryBuilder/QueryBuilder.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Rule, Option } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { html, LitElement } from 'lit-element';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { Operator, Type } from './types';\nimport { AdvancedGroup } from './components/AdvancedGroup';\nimport { SimpleGroup } from './components/SimpleGroup';\nimport { stringify } from './utils/stringify';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { styles } from './styles';\nimport { parse } from './utils/parse';\n\nconst NS = 'query-builder';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)))\n);\n\n/**\n * UI component for creating Foxy hAPI filters visually. Compatible with\n * Backend API, Customer API or any other API using the same format as described\n * in our [docs](https://api.foxy.io/docs/cheat-sheet).\n *\n * @element foxy-query-builder\n * @since 1.12.0\n */\nexport class QueryBuilder extends Base {\n  /** QueryBuilder dispatches this event on itself when value changes. */\n  static readonly ChangeEvent = class extends CustomEvent<void> {};\n\n  /** Operator dictionary for use in autocomplete options. */\n  static readonly Operator = Operator;\n\n  /** Field type dictionary for use in autocomplete options. */\n  static readonly Type = Type;\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      reservedPaths: { type: Array, attribute: 'reserved-paths' },\n      disableZoom: { type: Boolean, attribute: 'disable-zoom' },\n      disableOr: { type: Boolean, attribute: 'disable-or' },\n      operators: { type: Array },\n      docsHref: { attribute: 'docs-href' },\n      options: { type: Array },\n      value: {},\n      __isAdvancedMode: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [super.styles, styles];\n  }\n\n  /** Simple Mode will not show controls for these paths unless explicitly specified in options. */\n  reservedPaths: string[] = ['zoom', 'limit', 'offset', 'order', 'fields'];\n\n  /** If true, doesn't add `zoom` query parameter for complex paths. */\n  disableZoom = false;\n\n  /** If true, hides the UI for the \"OR\" operator in queries in the Advanced Mode. */\n  disableOr = false;\n\n  /** List of operators available in the builder UI. */\n  operators: Operator[] = Object.values(Operator);\n\n  /** When provided, will display a documentation link in the Advanced Mode. */\n  docsHref: string | null = null;\n\n  /** Filter options in Simple Mode and autocomplete suggestions in Advanced Mode. */\n  options: Option[] | null = null;\n\n  /** Current value as hAPI filter string. */\n  value: string | null = null;\n\n  private __isAdvancedMode = false;\n\n  render(): TemplateResult {\n    const isSimpleModeSupported = this.__isSimpleModeSupported;\n    const parsedValue = parse(this.value ?? '');\n    const operators = this.operators ?? [];\n    const options = this.options ?? [];\n    const t = this.t.bind(this);\n\n    const onChange = (newParsedValue: (Rule | Rule[])[]) => {\n      this.value = stringify(newParsedValue, this.disableZoom);\n      this.dispatchEvent(new QueryBuilder.ChangeEvent('change'));\n    };\n\n    // This will trigger a re-render but is necessary to stay in the advanced mode once the support\n    // for simple mode is available again.\n    if (!isSimpleModeSupported && !this.__isAdvancedMode) this.__isAdvancedMode = true;\n\n    return html`\n      <div class=\"space-y-m\">\n        <div\n          class=\"grid grid-cols-2 gap-xs p-xs bg-contrast-5 rounded\"\n          ?hidden=${!this.options?.length}\n        >\n          <label\n            class=${classMap({\n              'p-xs rounded-s text-center font-medium transition-colors': true,\n              'bg-base ring-1 ring-contrast-5': !this.__isAdvancedMode && isSimpleModeSupported,\n              'hover-bg-contrast-5': this.__isAdvancedMode && isSimpleModeSupported,\n              'focus-within-ring-2 focus-within-ring-inset focus-within-ring-primary-50': true,\n              'cursor-pointer': isSimpleModeSupported,\n              'text-disabled': !isSimpleModeSupported,\n            })}\n          >\n            <foxy-i18n infer=\"\" key=\"mode_simple${isSimpleModeSupported ? '' : '_unsupported'}\">\n            </foxy-i18n>\n            <input\n              class=\"sr-only\"\n              type=\"radio\"\n              name=\"mode\"\n              ?disabled=${!isSimpleModeSupported}\n              ?checked=${!this.__isAdvancedMode}\n              @change=${() => (this.__isAdvancedMode = false)}\n            />\n          </label>\n\n          <label\n            class=${classMap({\n              'p-xs rounded-s text-center font-medium cursor-pointer transition-colors': true,\n              'bg-base ring-1 ring-contrast-5': this.__isAdvancedMode,\n              'hover-bg-contrast-5': !this.__isAdvancedMode,\n              'focus-within-ring-2 focus-within-ring-inset focus-within-ring-primary-50': true,\n            })}\n          >\n            <foxy-i18n infer=\"\" key=\"mode_advanced\"></foxy-i18n>\n            <input\n              class=\"sr-only\"\n              type=\"radio\"\n              name=\"mode\"\n              ?checked=${this.__isAdvancedMode}\n              @change=${() => (this.__isAdvancedMode = true)}\n            />\n          </label>\n        </div>\n\n        ${this.__isAdvancedMode || !isSimpleModeSupported\n          ? html`\n              <p class=\"leading-s text-tertiary\" ?hidden=${this.docsHref === null}>\n                <foxy-i18n infer=\"\" key=\"advanced_mode_notice\"></foxy-i18n>\n                <a\n                  target=\"_blank\"\n                  class=\"cursor-pointer rounded-s text-secondary font-medium hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                  href=${ifDefined(this.docsHref ?? void 0)}\n                  rel=\"nofollow noreferrer noopener\"\n                >\n                  <foxy-i18n infer=\"\" key=\"api_reference_link\"></foxy-i18n>\n                </a>\n              </p>\n\n              ${AdvancedGroup({\n                disableOr: this.disableOr,\n                disabled: this.disabled,\n                readonly: this.readonly,\n                rules: parsedValue,\n                operators,\n                onChange,\n                options,\n                t,\n              })}\n            `\n          : this.__simpleModeOptions?.map(group => {\n              return SimpleGroup({\n                ...group,\n                disabled: this.disabled,\n                readonly: this.readonly,\n                rules: parsedValue as Rule[],\n                onChange,\n                t,\n              });\n            })}\n      </div>\n    `;\n  }\n\n  private get __isSimpleModeSupported() {\n    if (this.options === null) return false;\n    if (this.options.length === 0) return false;\n\n    const parsedValue = parse(this.value ?? '');\n    if (parsedValue.length === 0) return true;\n\n    return parsedValue.every(entry => {\n      if (Array.isArray(entry)) return false;\n      if (entry.operator === Operator.In) return false;\n      if (entry.operator === Operator.IsDefined && entry.value !== 'true') return false;\n      return !!(\n        this.reservedPaths.includes(entry.path) ||\n        this.options?.find(option => option.path === entry.path)\n      );\n    });\n  }\n\n  private get __simpleModeOptions() {\n    return this.options?.reduce((result, option) => {\n      const group = result.find(group => group.name === option.group?.name);\n\n      if (group) {\n        group.options.push(option);\n      } else {\n        result.push({ ...option.group, options: [option] });\n      }\n\n      return result;\n    }, [] as { name?: string; layout?: string; options: Option[] }[]);\n  }\n}\n"]}

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

@@ -0,0 +1,16 @@
+import type { Operator, Option, Rule } from '../types';
+import type { TemplateResult } from 'lit-html';
+import type { I18n } from '../../I18n/I18n';
+declare type Params = {
+    operators: Operator[];
+    disableOr: boolean;
+    isNested?: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    options: Option[];
+    rules: (Rule | Rule[])[];
+    t: I18n['t'];
+    onChange: (newValue: (Rule | Rule[])[]) => void;
+};
+export declare function AdvancedGroup(params: Params): TemplateResult;
+export {};

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

@@ -0,0 +1,78 @@
+import { AdvancedRule } from "./AdvancedRule.js";
+import { repeat } from 'lit-html/directives/repeat';
+import { html } from 'lit-html';
+export function AdvancedGroup(params) {
+    const hasNestedRules = params.rules.some(v => Array.isArray(v));
+    const andDivider = html `<div class=${hasNestedRules ? 'h-xs' : 'mt-s'}></div>`;
+    const orDivider = html `
+    <div class="flex items-center h-s">
+      <div class="w-m text-center leading-none uppercase font-medium text-xs text-contrast-30">
+        ${params.t('or')}
+      </div>
+
+      <div class="flex-1 border-t border-contrast-20"></div>
+      <div class="w-m ml-s flex-shrink-0"></div>
+      <div class="hidden sm-block w-m flex-shrink-0"></div>
+    </div>
+  `;
+    return html `
+    <div aria-label=${params.t('query_builder_group')}>
+      ${repeat([...params.rules, null], (rule, ruleIndex) => String(ruleIndex), (rule, ruleIndex) => {
+        const divider = ruleIndex > 0 ? (params.isNested ? orDivider : andDivider) : '';
+        if (rule === null) {
+            return [
+                divider,
+                AdvancedRule({
+                    ...params,
+                    rule: { path: '', operator: null, value: '' },
+                    isFullSize: !params.isNested && params.rules.length === 0,
+                    onChange: newValue => params.onChange([...params.rules, newValue]),
+                }),
+            ];
+        }
+        if (Array.isArray(rule)) {
+            return [
+                divider,
+                html `
+                <div class="bg-contrast-10 rounded-t-l rounded-b-l p-s -m-s">
+                  ${AdvancedGroup({
+                    ...params,
+                    rules: rule,
+                    isNested: true,
+                    onChange: newRule => {
+                        const newValue = [...params.rules];
+                        const typedNewRule = newRule;
+                        newValue[ruleIndex] = newRule.length > 1 ? typedNewRule : typedNewRule[0];
+                        params.onChange(newValue);
+                    },
+                })}
+                </div>
+              `,
+            ];
+        }
+        return [
+            divider,
+            AdvancedRule({
+                ...params,
+                rule: rule,
+                onChange: newValue => {
+                    const newRules = [...params.rules];
+                    newRules[ruleIndex] = newValue;
+                    params.onChange(newRules);
+                },
+                onDelete: () => {
+                    const newRules = params.rules.filter((_, i) => i !== ruleIndex);
+                    params.onChange(newRules);
+                },
+                onConvert: () => {
+                    const newRules = [...params.rules];
+                    newRules[ruleIndex] = [rule, { ...rule, operator: null, value: '' }];
+                    params.onChange(newRules);
+                },
+            }),
+        ];
+    })}
+    </div>
+  `;
+}
+//# sourceMappingURL=AdvancedGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedGroup.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/AdvancedGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Operator, Option, Rule } from '../types';\nimport type { TemplateResult } from 'lit-html';\nimport type { I18n } from '../../I18n/I18n';\n\nimport { AdvancedRule } from './AdvancedRule';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { html } from 'lit-html';\n\ntype Params = {\n  operators: Operator[];\n  disableOr: boolean;\n  isNested?: boolean;\n  disabled: boolean;\n  readonly: boolean;\n  options: Option[];\n  rules: (Rule | Rule[])[];\n  t: I18n['t'];\n  onChange: (newValue: (Rule | Rule[])[]) => void;\n};\n\nexport function AdvancedGroup(params: Params): TemplateResult {\n  const hasNestedRules = params.rules.some(v => Array.isArray(v));\n  const andDivider = html`<div class=${hasNestedRules ? 'h-xs' : 'mt-s'}></div>`;\n  const orDivider = html`\n    <div class=\"flex items-center h-s\">\n      <div class=\"w-m text-center leading-none uppercase font-medium text-xs text-contrast-30\">\n        ${params.t('or')}\n      </div>\n\n      <div class=\"flex-1 border-t border-contrast-20\"></div>\n      <div class=\"w-m ml-s flex-shrink-0\"></div>\n      <div class=\"hidden sm-block w-m flex-shrink-0\"></div>\n    </div>\n  `;\n\n  return html`\n    <div aria-label=${params.t('query_builder_group')}>\n      ${repeat(\n        [...params.rules, null],\n        (rule, ruleIndex) => String(ruleIndex),\n        (rule, ruleIndex) => {\n          const divider = ruleIndex > 0 ? (params.isNested ? orDivider : andDivider) : '';\n\n          if (rule === null) {\n            return [\n              divider,\n              AdvancedRule({\n                ...params,\n                rule: { path: '', operator: null, value: '' },\n                isFullSize: !params.isNested && params.rules.length === 0,\n                onChange: newValue => params.onChange([...params.rules, newValue]),\n              }),\n            ];\n          }\n\n          if (Array.isArray(rule)) {\n            return [\n              divider,\n              html`\n                <div class=\"bg-contrast-10 rounded-t-l rounded-b-l p-s -m-s\">\n                  ${AdvancedGroup({\n                    ...params,\n                    rules: rule,\n                    isNested: true,\n                    onChange: newRule => {\n                      const newValue = [...params.rules];\n                      const typedNewRule = newRule as Rule[];\n                      newValue[ruleIndex] = newRule.length > 1 ? typedNewRule : typedNewRule[0];\n                      params.onChange(newValue);\n                    },\n                  })}\n                </div>\n              `,\n            ];\n          }\n\n          return [\n            divider,\n            AdvancedRule({\n              ...params,\n              rule: rule,\n              onChange: newValue => {\n                const newRules = [...params.rules];\n                newRules[ruleIndex] = newValue;\n                params.onChange(newRules);\n              },\n              onDelete: () => {\n                const newRules = params.rules.filter((_, i) => i !== ruleIndex);\n                params.onChange(newRules);\n              },\n              onConvert: () => {\n                const newRules = [...params.rules];\n                newRules[ruleIndex] = [rule, { ...rule, operator: null, value: '' }];\n                params.onChange(newRules);\n              },\n            }),\n          ];\n        }\n      )}\n    </div>\n  `;\n}\n"]}

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

@@ -0,0 +1,12 @@
+import type { TemplateResult } from 'lit-html';
+import type { I18n } from '../../I18n/I18n';
+declare type Params = {
+    disabled: boolean;
+    readonly: boolean;
+    label: string;
+    value: string;
+    t: I18n['t'];
+    onChange: (newValue: string) => void;
+};
+export declare function AdvancedInput(params: Params): TemplateResult;
+export {};

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

@@ -0,0 +1,49 @@
+import { classMap } from "../../../../utils/class-map.js";
+import { html } from 'lit-html';
+export function AdvancedInput(params) {
+    return html `
+    <label class="relative flex items-center cursor-text group text-tertiary">
+      <div class="relative flex-1 min-w-0 overflow-hidden">
+        <input
+          placeholder=${params.t(params.label)}
+          class=${classMap({
+        'bg-base relative flex h-m px-s font-medium w-full': true,
+        'text-body': !params.disabled && !params.readonly,
+        'text-disabled': params.disabled,
+        'text-secondary': params.readonly,
+        'flex max-w-full whitespace-nowrap': true,
+        'focus-outline-none': true,
+    })}
+          .value=${params.value}
+          ?disabled=${params.disabled || params.readonly}
+          @input=${(evt) => {
+        const input = evt.currentTarget;
+        params.onChange(input.value);
+    }}
+        />
+      </div>
+
+      <span
+        class=${classMap({
+        'font-tnum text-xs font-medium border border-current mr-s px-xs rounded-s': true,
+        'inline-block': !!params.value,
+        'sr-only': !params.value,
+        'text-body': !params.disabled && !params.readonly,
+        'text-disabled': params.disabled,
+        'text-secondary': params.readonly,
+    })}
+      >
+        ${params.t(params.label)}
+      </span>
+
+      ${params.disabled || params.readonly
+        ? ''
+        : html `
+            <div
+              class="absolute inset-0 transition-colors bg-transparent group-hover-bg-contrast-5 pointer-events-none"
+            ></div>
+          `}
+    </label>
+  `;
+}
+//# sourceMappingURL=AdvancedInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedInput.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/AdvancedInput.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,uCAAoC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAWhC,MAAM,UAAU,aAAa,CAAC,MAAc;IAC1C,OAAO,IAAI,CAAA;;;;wBAIW,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;kBAC5B,QAAQ,CAAC;QACf,mDAAmD,EAAE,IAAI;QACzD,WAAW,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,QAAQ;QACjD,eAAe,EAAE,MAAM,CAAC,QAAQ;QAChC,gBAAgB,EAAE,MAAM,CAAC,QAAQ;QACjC,mCAAmC,EAAE,IAAI;QACzC,oBAAoB,EAAE,IAAI;KAC3B,CAAC;mBACO,MAAM,CAAC,KAAK;sBACT,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ;mBACrC,CAAC,GAAU,EAAE,EAAE;QACtB,MAAM,KAAK,GAAG,GAAG,CAAC,aAAiC,CAAC;QACpD,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;;;;;gBAKK,QAAQ,CAAC;QACf,0EAA0E,EAAE,IAAI;QAChF,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;QAC9B,SAAS,EAAE,CAAC,MAAM,CAAC,KAAK;QACxB,WAAW,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,QAAQ;QACjD,eAAe,EAAE,MAAM,CAAC,QAAQ;QAChC,gBAAgB,EAAE,MAAM,CAAC,QAAQ;KAClC,CAAC;;UAEA,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;QAGxB,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ;QAClC,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,IAAI,CAAA;;;;WAIH;;GAER,CAAC;AACJ,CAAC","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { I18n } from '../../I18n/I18n';\n\nimport { classMap } from '../../../../utils/class-map';\nimport { html } from 'lit-html';\n\ntype Params = {\n  disabled: boolean;\n  readonly: boolean;\n  label: string;\n  value: string;\n  t: I18n['t'];\n  onChange: (newValue: string) => void;\n};\n\nexport function AdvancedInput(params: Params): TemplateResult {\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        <input\n          placeholder=${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          })}\n          .value=${params.value}\n          ?disabled=${params.disabled || params.readonly}\n          @input=${(evt: Event) => {\n            const input = evt.currentTarget as HTMLInputElement;\n            params.onChange(input.value);\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': !!params.value,\n          'sr-only': !params.value,\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.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/AdvancedOperatorToggle.d.ts

@@ -0,0 +1,14 @@
+import type { TemplateResult } from 'lit-html';
+import type { Rule } from '../types';
+import type { I18n } from '../../I18n/I18n';
+import { Operator } from '../types';
+declare type Params = {
+    operators: Operator[];
+    readonly: boolean;
+    disabled: boolean;
+    rule: Rule;
+    t: I18n['t'];
+    onChange: (newValue: Rule) => void;
+};
+export declare function AdvancedOperatorToggle(params: Params): TemplateResult;
+export {};

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

@@ -0,0 +1,41 @@
+import * as icons from "../icons/index.js";
+import { classMap } from "../../../../utils/class-map.js";
+import { Operator } from "../types.js";
+import { html } from 'lit-html';
+export function AdvancedOperatorToggle(params) {
+    const { rule, operators, disabled, readonly, t, onChange } = params;
+    const { operator, value, path, name } = rule;
+    const operatorToIcon = {
+        [Operator.GreaterThan]: icons.operatorGreaterThan,
+        [Operator.GreaterThanOrEqual]: icons.operatorGreaterThanOrEqual,
+        [Operator.In]: icons.operatorIn,
+        [Operator.IsDefined]: icons.operatorIsDefined,
+        [Operator.LessThan]: icons.operatorLessThan,
+        [Operator.LessThanOrEqual]: icons.operatorLessThanOrEqual,
+        [Operator.Not]: icons.operatorNot,
+    };
+    const availableOperators = Object.values(Operator).filter(v => operators.includes(v) && (name ? true : v !== Operator.IsDefined));
+    const isDisabled = disabled || readonly || !availableOperators.length || !path;
+    return html `
+    <button
+      title=${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-body hover-bg-contrast-5': !isDisabled && availableOperators.length > 1,
+        'cursor-default text-tertiary': !isDisabled && availableOperators.length <= 1,
+        'text-disabled cursor-default': isDisabled,
+    })}
+      ?disabled=${isDisabled || availableOperators.length <= 1}
+      @click=${() => {
+        var _a;
+        const newOperatorIndex = operator ? availableOperators.indexOf(operator) : -1;
+        const newOperator = (_a = availableOperators[newOperatorIndex + 1]) !== null && _a !== void 0 ? _a : null;
+        onChange({ ...rule, operator: newOperator, value: value });
+    }}
+    >
+      <div aria-hidden="true">${operator ? operatorToIcon[operator] : icons.operatorEqual}</div>
+    </button>
+  `;
+}
+//# sourceMappingURL=AdvancedOperatorToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedOperatorToggle.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/AdvancedOperatorToggle.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,0BAAuB;AAExC,OAAO,EAAE,QAAQ,EAAE,uCAAoC;AACvD,OAAO,EAAE,QAAQ,EAAE,oBAAiB;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAWhC,MAAM,UAAU,sBAAsB,CAAC,MAAc;IACnD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IACpE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAE7C,MAAM,cAAc,GAAsC;QACxD,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB;QACjD,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,0BAA0B;QAC/D,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU;QAC/B,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB;QAC7C,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB;QAC3C,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,uBAAuB;QACzD,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,WAAW;KAClC,CAAC;IAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CACvD,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,SAAS,CAAC,CACvE,CAAC;IAEF,MAAM,UAAU,GAAG,QAAQ,IAAI,QAAQ,IAAI,CAAC,kBAAkB,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC;IAE/E,OAAO,IAAI,CAAA;;cAEC,CAAC,CAAC,YAAY,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,EAAE,CAAC;cACpC,QAAQ,CAAC;QACf,4DAA4D,EAAE,IAAI;QAClE,wEAAwE,EAAE,IAAI;QAC9E,+BAA+B,EAAE,CAAC,UAAU,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC;QAC7E,8BAA8B,EAAE,CAAC,UAAU,IAAI,kBAAkB,CAAC,MAAM,IAAI,CAAC;QAC7E,8BAA8B,EAAE,UAAU;KAC3C,CAAC;kBACU,UAAU,IAAI,kBAAkB,CAAC,MAAM,IAAI,CAAC;eAC/C,GAAG,EAAE;;QACZ,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9E,MAAM,WAAW,SAAG,kBAAkB,CAAC,gBAAgB,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC;QACrE,QAAQ,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7D,CAAC;;gCAEyB,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa;;GAEtF,CAAC;AACJ,CAAC","sourcesContent":["import type { SVGTemplateResult, TemplateResult } from 'lit-html';\nimport type { Rule } from '../types';\nimport type { I18n } from '../../I18n/I18n';\n\nimport * as icons from '../icons/index';\n\nimport { classMap } from '../../../../utils/class-map';\nimport { Operator } from '../types';\nimport { html } from 'lit-html';\n\ntype Params = {\n  operators: Operator[];\n  readonly: boolean;\n  disabled: boolean;\n  rule: Rule;\n  t: I18n['t'];\n  onChange: (newValue: Rule) => void;\n};\n\nexport function AdvancedOperatorToggle(params: Params): TemplateResult {\n  const { rule, operators, disabled, readonly, t, onChange } = params;\n  const { operator, value, path, name } = rule;\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 availableOperators = Object.values(Operator).filter(\n    v => operators.includes(v) && (name ? true : v !== Operator.IsDefined)\n  );\n\n  const isDisabled = disabled || readonly || !availableOperators.length || !path;\n\n  return html`\n    <button\n      title=${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-body hover-bg-contrast-5': !isDisabled && availableOperators.length > 1,\n        'cursor-default text-tertiary': !isDisabled && availableOperators.length <= 1,\n        'text-disabled cursor-default': isDisabled,\n      })}\n      ?disabled=${isDisabled || availableOperators.length <= 1}\n      @click=${() => {\n        const newOperatorIndex = operator ? availableOperators.indexOf(operator) : -1;\n        const newOperator = availableOperators[newOperatorIndex + 1] ?? null;\n        onChange({ ...rule, operator: newOperator, value: value });\n      }}\n    >\n      <div aria-hidden=\"true\">${operator ? operatorToIcon[operator] : icons.operatorEqual}</div>\n    </button>\n  `;\n}\n"]}

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

@@ -0,0 +1,18 @@
+import type { TemplateResult } from 'lit-html';
+import type { Operator, Rule } from '../types';
+import type { I18n } from '../../I18n/I18n';
+declare type Params = {
+    isFullSize?: boolean;
+    isNested?: boolean;
+    operators: Operator[];
+    disableOr: boolean;
+    readonly: boolean;
+    disabled: boolean;
+    rule: Rule;
+    t: I18n['t'];
+    onConvert?: () => void;
+    onDelete?: () => void;
+    onChange: (newValue: Rule) => void;
+};
+export declare function AdvancedRule(params: Params): TemplateResult;
+export {};

package/dist/elements/public/QueryBuilder/components/{Rule.js → AdvancedRule.js}

@@ -1,39 +1,12 @@
-import * as icons from "../icons/index.js";
-import { Operator, Type } from "../types.js";
-import { html } from 'lit-html';
-import { BooleanValue } from "./BooleanValue.js";
-import { IsDefinedValue } from "./IsDefinedValue.js";
-import { ListValue } from "./ListValue.js";
-import { Name } from "./Name.js";
-import { OperatorToggle } from "./OperatorToggle.js";
-import { Path } from "./Path.js";
-import { RangeValue } from "./RangeValue.js";
-import { SingleValue } from "./SingleValue.js";
+import { AdvancedOperatorToggle } from "./AdvancedOperatorToggle.js";
+import { AdvancedInput } from "./AdvancedInput.js";
 import { classMap } from "../../../../utils/class-map.js";
-export function Rule(params) {
+import { field } from "../icons/index.js";
+import { html } from 'lit-html';
+export function AdvancedRule(params) {
     var _a, _b;
-    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,
-        operators: params.operators,
-        disabled,
-        readonly,
-        options,
-        option,
-        t,
-        onChange,
-    };
-    const typeToIcon = {
-        [Type.Attribute]: icons.typeAttribute,
-        [Type.Boolean]: icons.typeBoolean,
-        [Type.Number]: icons.typeNumber,
-        [Type.String]: icons.typeString,
-        [Type.Date]: icons.typeDate,
-        [Type.Any]: icons.typeAny,
-    };
+    const { isFullSize, isNested, disableOr, readonly, disabled, rule } = params;
+    const { t, onConvert, onDelete, onChange } = params;
     return html `
     <div class="flex items-center space-x-s" aria-label=${t('query_builder_rule')}>
       <div
@@ -47,42 +20,60 @@ export function Rule(params) {
       >
         <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="bg-base">
               <div
+                aria-hidden="true"
                 class=${classMap({
-        'w-m h-m': true,
         'text-tertiary': !readonly && !disabled,
         'text-disabled': readonly || disabled,
+        'w-m h-m': true,
     })}
-                aria-hidden="true"
               >
-                ${option ? typeToIcon[type] : icons.typeAny}
+                ${field}
               </div>
             </div>
 
             <div class="bg-base">
-              ${parsedValue.path && (type === Type.Attribute || parsedValue.name)
+              ${rule.path && rule.name
         ? html `
                     <div class="bg-contrast-10 grid gap-1px grid-cols-1 sm-grid-cols-2">
-                      <div class="bg-base">${Path(componentParams)}</div>
-                      <div class="bg-base">${Name(componentParams)}</div>
+                      <div class="bg-base">
+                        ${AdvancedInput({
+            ...params,
+            value: rule.path,
+            label: 'field',
+            onChange: newPath => {
+                onChange({ operator: null, value: '', path: newPath });
+            },
+        })}
+                      </div>
+                      <div class="bg-base">
+                        ${AdvancedInput({
+            ...params,
+            value: (_a = rule.name) !== null && _a !== void 0 ? _a : '',
+            label: 'name',
+            onChange: newValue => onChange({ ...rule, name: newValue }),
+        })}
+                      </div>
                     </div>
                   `
-        : Path(componentParams)}
+        : AdvancedInput({
+            ...params,
+            value: rule.path,
+            label: 'field',
+            onChange: newPath => onChange({ operator: null, value: '', path: newPath }),
+        })}
             </div>
 
-            <div class="bg-base">${OperatorToggle(componentParams)}</div>
-
+            <div class="bg-base">${AdvancedOperatorToggle(params)}</div>
             <div class="bg-base">
-              ${operator === Operator.In
-        ? ListValue(componentParams)
-        : operator === Operator.IsDefined
-            ? IsDefinedValue(componentParams)
-            : type === Type.Boolean
-                ? BooleanValue(componentParams)
-                : operator === null && [Type.Number, Type.Date].includes(type)
-                    ? RangeValue(componentParams)
-                    : SingleValue(componentParams)}
+              ${AdvancedInput({
+        ...params,
+        disabled: disabled || !rule.path,
+        value: (_b = rule.value) !== null && _b !== void 0 ? _b : '',
+        label: 'value',
+        onChange: newValue => onChange({ ...rule, value: newValue }),
+    })}
             </div>
           </div>
         </div>
@@ -103,9 +94,9 @@ export function Rule(params) {
         '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 pointer-events-none': !parsedValue.path,
+        'opacity-0 pointer-events-none': !rule.path,
     })}
-          ?disabled=${disabled || readonly || !parsedValue.path}
+          ?disabled=${disabled || readonly || !rule.path}
           @click=${onDelete}
         >
           <iron-icon
@@ -123,10 +114,10 @@ export function Rule(params) {
         'text-success hover-bg-contrast-5': !disabled,
         'cursor-default text-disabled': disabled,
         'focus-outline-none focus-ring-2 ring-primary-50': true,
-        'opacity-0 pointer-events-none': !parsedValue.path || !!isNested || params.disableOr,
+        'opacity-0 pointer-events-none': !rule.path || !!isNested || disableOr,
     })}
-          ?disabled=${disabled || readonly || !parsedValue.path || !!isNested || params.disableOr}
-          ?hidden=${params.disableOr}
+          ?disabled=${disabled || readonly || !rule.path || !!isNested || disableOr}
+          ?hidden=${disableOr}
           @click=${onConvert}
         >
           <iron-icon
@@ -140,4 +131,4 @@ export function Rule(params) {
     </div>
   `;
 }
-//# sourceMappingURL=Rule.js.map
+//# sourceMappingURL=AdvancedRule.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedRule.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/AdvancedRule.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Operator, Rule } from '../types';\nimport type { I18n } from '../../I18n/I18n';\n\nimport { AdvancedOperatorToggle } from './AdvancedOperatorToggle';\nimport { AdvancedInput } from './AdvancedInput';\nimport { classMap } from '../../../../utils/class-map';\nimport { field } from '../icons/index';\nimport { html } from 'lit-html';\n\ntype Params = {\n  isFullSize?: boolean;\n  isNested?: boolean;\n  operators: Operator[];\n  disableOr: boolean;\n  readonly: boolean;\n  disabled: boolean;\n  rule: Rule;\n  t: I18n['t'];\n  onConvert?: () => void;\n  onDelete?: () => void;\n  onChange: (newValue: Rule) => void;\n};\n\nexport function AdvancedRule(params: Params): TemplateResult {\n  const { isFullSize, isNested, disableOr, readonly, disabled, rule } = params;\n  const { t, onConvert, onDelete, onChange } = params;\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\">\n              <div\n                aria-hidden=\"true\"\n                class=${classMap({\n                  'text-tertiary': !readonly && !disabled,\n                  'text-disabled': readonly || disabled,\n                  'w-m h-m': true,\n                })}\n              >\n                ${field}\n              </div>\n            </div>\n\n            <div class=\"bg-base\">\n              ${rule.path && rule.name\n                ? html`\n                    <div class=\"bg-contrast-10 grid gap-1px grid-cols-1 sm-grid-cols-2\">\n                      <div class=\"bg-base\">\n                        ${AdvancedInput({\n                          ...params,\n                          value: rule.path,\n                          label: 'field',\n                          onChange: newPath => {\n                            onChange({ operator: null, value: '', path: newPath });\n                          },\n                        })}\n                      </div>\n                      <div class=\"bg-base\">\n                        ${AdvancedInput({\n                          ...params,\n                          value: rule.name ?? '',\n                          label: 'name',\n                          onChange: newValue => onChange({ ...rule, name: newValue }),\n                        })}\n                      </div>\n                    </div>\n                  `\n                : AdvancedInput({\n                    ...params,\n                    value: rule.path,\n                    label: 'field',\n                    onChange: newPath => onChange({ operator: null, value: '', path: newPath }),\n                  })}\n            </div>\n\n            <div class=\"bg-base\">${AdvancedOperatorToggle(params)}</div>\n            <div class=\"bg-base\">\n              ${AdvancedInput({\n                ...params,\n                disabled: disabled || !rule.path,\n                value: rule.value ?? '',\n                label: 'value',\n                onChange: newValue => onChange({ ...rule, value: newValue }),\n              })}\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 pointer-events-none': !rule.path,\n          })}\n          ?disabled=${disabled || readonly || !rule.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 pointer-events-none': !rule.path || !!isNested || disableOr,\n          })}\n          ?disabled=${disabled || readonly || !rule.path || !!isNested || disableOr}\n          ?hidden=${disableOr}\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/SimpleAttributeRule.d.ts

@@ -0,0 +1,2 @@
+import type { SimpleRuleComponent } from '../types';
+export declare const SimpleAttributeRule: SimpleRuleComponent;

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

@@ -0,0 +1,78 @@
+import { SimpleSelect } from "./SimpleSelect.js";
+import { SimpleInput } from "./SimpleInput.js";
+import { Operator } from "../types.js";
+import { classMap } from "../../../../utils/class-map.js";
+import { html } from 'lit-html';
+export const SimpleAttributeRule = params => {
+    var _a;
+    const { operator, value, name } = (_a = params.rule) !== null && _a !== void 0 ? _a : {};
+    const { disabled, readonly, t } = params;
+    const not = Operator.Not;
+    const labelClass = classMap({ 'text-disabled': disabled, 'text-contrast-80': readonly });
+    const displayedOperator = operator === null ? 'equal' : operator === not ? not : null;
+    return html `
+    <foxy-i18n class=${labelClass} infer="" key="name"></foxy-i18n>
+
+    ${SimpleInput({
+        layout: 'auto-grow',
+        value: name || '',
+        label: 'name',
+        type: 'text',
+        disabled,
+        readonly,
+        t,
+        onChange: newValue => {
+            if (!newValue)
+                return params.onChange(null);
+            if (value) {
+                params.onChange({ name: newValue });
+            }
+            else {
+                params.onChange({ name: newValue, operator: Operator.IsDefined, value: 'true' });
+            }
+        },
+    })}
+
+    <foxy-i18n class=${labelClass} infer="" key="value"></foxy-i18n>
+
+    ${SimpleSelect({
+        current: {
+            label: displayedOperator ? `operator_${displayedOperator}` : 'value_any',
+            value: displayedOperator !== null && displayedOperator !== void 0 ? displayedOperator : 'any',
+        },
+        options: [
+            { label: 'value_any', value: 'any' },
+            { label: 'operator_equal', value: 'equal' },
+            { label: 'operator_not', value: not },
+        ],
+        disabled,
+        readonly,
+        t,
+        onChange: newValue => {
+            if (newValue === 'any') {
+                params.onChange(name ? { operator: Operator.IsDefined, value: 'true' } : null);
+            }
+            else {
+                return params.onChange({
+                    operator: newValue === 'equal' ? null : newValue,
+                    value: operator === Operator.IsDefined ? '' : value !== null && value !== void 0 ? value : '',
+                    name: name !== null && name !== void 0 ? name : '',
+                });
+            }
+        },
+    })}
+    ${value === undefined || operator === Operator.IsDefined
+        ? ''
+        : SimpleInput({
+            layout: 'auto-grow',
+            label: 'value',
+            value: value || '',
+            type: 'text',
+            disabled,
+            readonly,
+            t,
+            onChange: newValue => params.onChange({ value: newValue }),
+        })}
+  `;
+};
+//# sourceMappingURL=SimpleAttributeRule.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleAttributeRule.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/SimpleAttributeRule.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SimpleRuleComponent } from '../types';\n\nimport { SimpleSelect } from './SimpleSelect';\nimport { SimpleInput } from './SimpleInput';\nimport { Operator } from '../types';\nimport { classMap } from '../../../../utils/class-map';\nimport { html } from 'lit-html';\n\nexport const SimpleAttributeRule: SimpleRuleComponent = params => {\n  const { operator, value, name } = params.rule ?? {};\n  const { disabled, readonly, t } = params;\n\n  const not = Operator.Not;\n  const labelClass = classMap({ 'text-disabled': disabled, 'text-contrast-80': readonly });\n  const displayedOperator = operator === null ? 'equal' : operator === not ? not : null;\n\n  return html`\n    <foxy-i18n class=${labelClass} infer=\"\" key=\"name\"></foxy-i18n>\n\n    ${SimpleInput({\n      layout: 'auto-grow',\n      value: name || '',\n      label: 'name',\n      type: 'text',\n      disabled,\n      readonly,\n      t,\n      onChange: newValue => {\n        if (!newValue) return params.onChange(null);\n        if (value) {\n          params.onChange({ name: newValue });\n        } else {\n          params.onChange({ name: newValue, operator: Operator.IsDefined, value: 'true' });\n        }\n      },\n    })}\n\n    <foxy-i18n class=${labelClass} infer=\"\" key=\"value\"></foxy-i18n>\n\n    ${SimpleSelect({\n      current: {\n        label: displayedOperator ? `operator_${displayedOperator}` : 'value_any',\n        value: displayedOperator ?? 'any',\n      },\n      options: [\n        { label: 'value_any', value: 'any' },\n        { label: 'operator_equal', value: 'equal' },\n        { label: 'operator_not', value: not },\n      ],\n      disabled,\n      readonly,\n      t,\n      onChange: newValue => {\n        if (newValue === 'any') {\n          params.onChange(name ? { operator: Operator.IsDefined, value: 'true' } : null);\n        } else {\n          return params.onChange({\n            operator: newValue === 'equal' ? null : (newValue as Operator),\n            value: operator === Operator.IsDefined ? '' : value ?? '',\n            name: name ?? '',\n          });\n        }\n      },\n    })}\n    ${value === undefined || operator === Operator.IsDefined\n      ? ''\n      : SimpleInput({\n          layout: 'auto-grow',\n          label: 'value',\n          value: value || '',\n          type: 'text',\n          disabled,\n          readonly,\n          t,\n          onChange: newValue => params.onChange({ value: newValue }),\n        })}\n  `;\n};\n"]}

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

@@ -0,0 +1,2 @@
+import type { SimpleRuleComponent } from '../types';
+export declare const SimpleBooleanRule: SimpleRuleComponent;

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

@@ -0,0 +1,16 @@
+import { SimpleSelect } from "./SimpleSelect.js";
+export const SimpleBooleanRule = params => {
+    var _a;
+    const options = [
+        { label: 'value_any', value: 'any' },
+        { label: `${params.option.label}_true`, value: 'true' },
+        { label: `${params.option.label}_false`, value: 'false' },
+    ];
+    return SimpleSelect({
+        ...params,
+        onChange: newValue => params.onChange(newValue === 'any' ? null : { value: newValue }),
+        current: (_a = options.find(o => { var _a; return o.value === ((_a = params.rule) === null || _a === void 0 ? void 0 : _a.value); })) !== null && _a !== void 0 ? _a : options[0],
+        options,
+    });
+};
+//# sourceMappingURL=SimpleBooleanRule.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleBooleanRule.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/SimpleBooleanRule.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,MAAM,CAAC,MAAM,iBAAiB,GAAwB,MAAM,CAAC,EAAE;;IAC7D,MAAM,OAAO,GAAG;QACd,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE;QACpC,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE;QACvD,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE;KAC1D,CAAC;IAEF,OAAO,YAAY,CAAC;QAClB,GAAG,MAAM;QACT,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;QACtF,OAAO,QAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,WAAC,OAAA,CAAC,CAAC,KAAK,YAAK,MAAM,CAAC,IAAI,0CAAE,KAAK,CAAA,CAAA,EAAA,CAAC,mCAAI,OAAO,CAAC,CAAC,CAAC;QACxE,OAAO;KACR,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import type { SimpleRuleComponent } from '../types';\n\nimport { SimpleSelect } from './SimpleSelect';\n\nexport const SimpleBooleanRule: SimpleRuleComponent = params => {\n  const options = [\n    { label: 'value_any', value: 'any' },\n    { label: `${params.option.label}_true`, value: 'true' },\n    { label: `${params.option.label}_false`, value: 'false' },\n  ];\n\n  return SimpleSelect({\n    ...params,\n    onChange: newValue => params.onChange(newValue === 'any' ? null : { value: newValue }),\n    current: options.find(o => o.value === params.rule?.value) ?? options[0],\n    options,\n  });\n};\n"]}

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

@@ -0,0 +1,2 @@
+import type { SimpleRuleComponent } from '../types';
+export declare const SimpleDateRule: SimpleRuleComponent;