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

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

@@ -1,14 +1,17 @@
-import { LitElement } from 'lit-element';
-import { Operator, Type } from "./types.js";
-import { Group } from "./components/Group.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { html, LitElement } from 'lit-element';
+import { InferrableMixin } from "../../../mixins/inferrable.js";
 import { ResponsiveMixin } from "../../../mixins/responsive.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
-import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { parse } from "./utils/parse.js";
+import { Operator, Type } from "./types.js";
+import { AdvancedGroup } from "./components/AdvancedGroup.js";
+import { SimpleGroup } from "./components/SimpleGroup.js";
 import { stringify } from "./utils/stringify.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from "../../../utils/class-map.js";
 import { styles } from "./styles.js";
-import { InferrableMixin } from "../../../mixins/inferrable.js";
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { parse } from "./utils/parse.js";
 const NS = 'query-builder';
 const Base = ConfigurableMixin(ResponsiveMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS))));
 /**
@@ -19,56 +22,174 @@ const Base = ConfigurableMixin(ResponsiveMixin(ThemeableMixin(TranslatableMixin(
  * @element foxy-query-builder
  * @since 1.12.0
  */
-class QueryBuilder extends Base {
+export class QueryBuilder extends Base {
     constructor() {
         super(...arguments);
+        /** Simple Mode will not show controls for these paths unless explicitly specified in options. */
+        this.reservedPaths = ['zoom', 'limit', 'offset', 'order', 'fields'];
         /** If true, doesn't add `zoom` query parameter for complex paths. */
         this.disableZoom = false;
-        /** If true, hides the UI for the "OR" operator in queries. */
+        /** If true, hides the UI for the "OR" operator in queries in the Advanced Mode. */
         this.disableOr = false;
         /** List of operators available in the builder UI. */
         this.operators = Object.values(Operator);
-        /** Autocomplete suggestions. */
+        /** When provided, will display a documentation link in the Advanced Mode. */
+        this.docsHref = null;
+        /** Filter options in Simple Mode and autocomplete suggestions in Advanced Mode. */
         this.options = null;
         /** Current value as hAPI filter string. */
         this.value = null;
+        this.__isAdvancedMode = false;
     }
     static get properties() {
         return {
             ...super.properties,
+            reservedPaths: { type: Array, attribute: 'reserved-paths' },
             disableZoom: { type: Boolean, attribute: 'disable-zoom' },
             disableOr: { type: Boolean, attribute: 'disable-or' },
             operators: { type: Array },
+            docsHref: { attribute: 'docs-href' },
             options: { type: Array },
-            value: { type: String },
+            value: {},
+            __isAdvancedMode: { attribute: false },
         };
     }
     static get styles() {
         return [super.styles, styles];
     }
     render() {
-        var _a, _b, _c;
-        const reservedPaths = new Set(['zoom', 'limit', 'offset', 'order', 'fields']);
-        const hiddenValues = [];
-        const visibleValues = [];
-        parse((_a = this.value) !== null && _a !== void 0 ? _a : '').forEach(value => {
-            const isVisible = Array.isArray(value) || !reservedPaths.has(value.path);
-            isVisible ? visibleValues.push(value) : hiddenValues.push(value);
-        });
-        return Group({
-            parsedValues: visibleValues,
-            disableOr: this.disableOr,
-            operators: (_b = this.operators) !== null && _b !== void 0 ? _b : [],
-            disabled: this.disabled,
-            readonly: this.readonly,
-            options: (_c = this.options) !== null && _c !== void 0 ? _c : [],
-            t: this.t.bind(this),
-            onChange: newValue => {
-                this.value = stringify([...newValue, ...hiddenValues], this.disableZoom);
-                this.dispatchEvent(new QueryBuilder.ChangeEvent('change'));
-            },
+        var _a, _b, _c, _d, _e, _f;
+        const isSimpleModeSupported = this.__isSimpleModeSupported;
+        const parsedValue = parse((_a = this.value) !== null && _a !== void 0 ? _a : '');
+        const operators = (_b = this.operators) !== null && _b !== void 0 ? _b : [];
+        const options = (_c = this.options) !== null && _c !== void 0 ? _c : [];
+        const t = this.t.bind(this);
+        const onChange = (newParsedValue) => {
+            this.value = stringify(newParsedValue, this.disableZoom);
+            this.dispatchEvent(new QueryBuilder.ChangeEvent('change'));
+        };
+        // This will trigger a re-render but is necessary to stay in the advanced mode once the support
+        // for simple mode is available again.
+        if (!isSimpleModeSupported && !this.__isAdvancedMode)
+            this.__isAdvancedMode = true;
+        return html `
+      <div class="space-y-m">
+        <div
+          class="grid grid-cols-2 gap-xs p-xs bg-contrast-5 rounded"
+          ?hidden=${!((_d = this.options) === null || _d === void 0 ? void 0 : _d.length)}
+        >
+          <label
+            class=${classMap({
+            'p-xs rounded-s text-center font-medium transition-colors': true,
+            'bg-base ring-1 ring-contrast-5': !this.__isAdvancedMode && isSimpleModeSupported,
+            'hover-bg-contrast-5': this.__isAdvancedMode && isSimpleModeSupported,
+            'focus-within-ring-2 focus-within-ring-inset focus-within-ring-primary-50': true,
+            'cursor-pointer': isSimpleModeSupported,
+            'text-disabled': !isSimpleModeSupported,
+        })}
+          >
+            <foxy-i18n infer="" key="mode_simple${isSimpleModeSupported ? '' : '_unsupported'}">
+            </foxy-i18n>
+            <input
+              class="sr-only"
+              type="radio"
+              name="mode"
+              ?disabled=${!isSimpleModeSupported}
+              ?checked=${!this.__isAdvancedMode}
+              @change=${() => (this.__isAdvancedMode = false)}
+            />
+          </label>
+
+          <label
+            class=${classMap({
+            'p-xs rounded-s text-center font-medium cursor-pointer transition-colors': true,
+            'bg-base ring-1 ring-contrast-5': this.__isAdvancedMode,
+            'hover-bg-contrast-5': !this.__isAdvancedMode,
+            'focus-within-ring-2 focus-within-ring-inset focus-within-ring-primary-50': true,
+        })}
+          >
+            <foxy-i18n infer="" key="mode_advanced"></foxy-i18n>
+            <input
+              class="sr-only"
+              type="radio"
+              name="mode"
+              ?checked=${this.__isAdvancedMode}
+              @change=${() => (this.__isAdvancedMode = true)}
+            />
+          </label>
+        </div>
+
+        ${this.__isAdvancedMode || !isSimpleModeSupported
+            ? html `
+              <p class="leading-s text-tertiary" ?hidden=${this.docsHref === null}>
+                <foxy-i18n infer="" key="advanced_mode_notice"></foxy-i18n>
+                <a
+                  target="_blank"
+                  class="cursor-pointer rounded-s text-secondary font-medium hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50"
+                  href=${ifDefined((_e = this.docsHref) !== null && _e !== void 0 ? _e : void 0)}
+                  rel="nofollow noreferrer noopener"
+                >
+                  <foxy-i18n infer="" key="api_reference_link"></foxy-i18n>
+                </a>
+              </p>
+
+              ${AdvancedGroup({
+                disableOr: this.disableOr,
+                disabled: this.disabled,
+                readonly: this.readonly,
+                rules: parsedValue,
+                operators,
+                onChange,
+                options,
+                t,
+            })}
+            `
+            : (_f = this.__simpleModeOptions) === null || _f === void 0 ? void 0 : _f.map(group => {
+                return SimpleGroup({
+                    ...group,
+                    disabled: this.disabled,
+                    readonly: this.readonly,
+                    rules: parsedValue,
+                    onChange,
+                    t,
+                });
+            })}
+      </div>
+    `;
+    }
+    get __isSimpleModeSupported() {
+        var _a;
+        if (this.options === null)
+            return false;
+        if (this.options.length === 0)
+            return false;
+        const parsedValue = parse((_a = this.value) !== null && _a !== void 0 ? _a : '');
+        if (parsedValue.length === 0)
+            return true;
+        return parsedValue.every(entry => {
+            var _a;
+            if (Array.isArray(entry))
+                return false;
+            if (entry.operator === Operator.In)
+                return false;
+            if (entry.operator === Operator.IsDefined && entry.value !== 'true')
+                return false;
+            return !!(this.reservedPaths.includes(entry.path) || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.find(option => option.path === entry.path)));
         });
     }
+    get __simpleModeOptions() {
+        var _a;
+        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.reduce((result, option) => {
+            const group = result.find(group => { var _a; return group.name === ((_a = option.group) === null || _a === void 0 ? void 0 : _a.name); });
+            if (group) {
+                group.options.push(option);
+            }
+            else {
+                result.push({ ...option.group, options: [option] });
+            }
+            return result;
+        }, []);
+    }
 }
 /** QueryBuilder dispatches this event on itself when value changes. */
 QueryBuilder.ChangeEvent = class extends CustomEvent {
@@ -77,5 +198,4 @@ QueryBuilder.ChangeEvent = class extends CustomEvent {
 QueryBuilder.Operator = Operator;
 /** Field type dictionary for use in autocomplete options. */
 QueryBuilder.Type = Type;
-export { QueryBuilder };
 //# sourceMappingURL=QueryBuilder.js.map

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      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  /** 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(['zoom', 'limit', 'offset', 'order', 'fields']);\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 {};