chuijs 4.0.2 → 4.0.3

package/framework/components/chui_query_builder/query_builder.js

@@ -1,17 +1,17 @@
-const {setStyles} = require("../../modules/chui_functions");
-const {Validate} = require("../../modules/chui_validate/chui_validate");
-const {SegmentedControl} = require("../chui_segmented_control/segmented_control");
-const {Select} = require("../chui_inputs/chui_select_box/select_box");
-const {TextInput} = require("../chui_inputs/chui_text/text");
-const {NumberInput} = require("../chui_inputs/chui_number/number");
-const {DateInput} = require("../chui_inputs/chui_date/date");
-const {I18n} = require("../../modules/chui_i18n/chui_i18n");
-const {Icon, Icons} = require("../chui_icons/icons");
+const { setStyles } = require("../../modules/chui_functions");
+const { Validate } = require("../../modules/chui_validate/chui_validate");
+const { SegmentedControl } = require("../chui_segmented_control/segmented_control");
+const { Select } = require("../chui_inputs/chui_select_box/select_box");
+const { TextInput } = require("../chui_inputs/chui_text/text");
+const { NumberInput } = require("../chui_inputs/chui_number/number");
+const { DateInput } = require("../chui_inputs/chui_date/date");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { Icon, Icons } = require("../chui_icons/icons");
 
 /** Соединение условий внутри группы */
-const COMBINATOR = {AND: "and", OR: "or"};
+const COMBINATOR = { AND: "and", OR: "or" };
 /** Типы полей: от типа зависят и операторы, и вид поля значения */
-const TYPE = {STRING: "string", NUMBER: "number", BOOLEAN: "boolean", DATE: "date", SELECT: "select"};
+const TYPE = { STRING: "string", NUMBER: "number", BOOLEAN: "boolean", DATE: "date", SELECT: "select" };
 const TYPES = [TYPE.STRING, TYPE.NUMBER, TYPE.BOOLEAN, TYPE.DATE, TYPE.SELECT];
 /** Операторы сравнения */
 const OPERATOR = {
@@ -26,7 +26,7 @@ const OPERATOR = {
     LESS: "less",
     LESS_OR_EQUAL: "less_or_equal",
     IS_EMPTY: "is_empty",
-    IS_NOT_EMPTY: "is_not_empty"
+    IS_NOT_EMPTY: "is_not_empty",
 };
 /** Операторы словами — для подписей контролов и `toText()`: внутренние ключи словаря */
 const OPERATOR_KEYS = {
@@ -41,23 +41,46 @@ const OPERATOR_KEYS = {
     less: "queryBuilder.operator.less",
     less_or_equal: "queryBuilder.operator.lessOrEqual",
     is_empty: "queryBuilder.operator.isEmpty",
-    is_not_empty: "queryBuilder.operator.isNotEmpty"
+    is_not_empty: "queryBuilder.operator.isNotEmpty",
 };
 // Публичная таблица отдаёт уже переведённый текст: геттеры читают словарь в момент обращения
 const OPERATOR_TITLES = {};
 for (const key of Object.keys(OPERATOR_KEYS)) {
-    Object.defineProperty(OPERATOR_TITLES, key, {enumerable: true, get: () => I18n.t(OPERATOR_KEYS[key])});
+    Object.defineProperty(OPERATOR_TITLES, key, { enumerable: true, get: () => I18n.t(OPERATOR_KEYS[key]) });
 }
 /** Операторы по типу поля: «содержит» у числа и «больше» у логического смысла не имеют */
 const OPERATORS_BY_TYPE = {
-    string: [OPERATOR.EQUALS, OPERATOR.NOT_EQUALS, OPERATOR.CONTAINS, OPERATOR.NOT_CONTAINS,
-        OPERATOR.STARTS_WITH, OPERATOR.ENDS_WITH, OPERATOR.IS_EMPTY, OPERATOR.IS_NOT_EMPTY],
-    number: [OPERATOR.EQUALS, OPERATOR.NOT_EQUALS, OPERATOR.GREATER, OPERATOR.GREATER_OR_EQUAL,
-        OPERATOR.LESS, OPERATOR.LESS_OR_EQUAL, OPERATOR.IS_EMPTY, OPERATOR.IS_NOT_EMPTY],
-    date: [OPERATOR.EQUALS, OPERATOR.GREATER, OPERATOR.GREATER_OR_EQUAL, OPERATOR.LESS,
-        OPERATOR.LESS_OR_EQUAL, OPERATOR.IS_EMPTY, OPERATOR.IS_NOT_EMPTY],
+    string: [
+        OPERATOR.EQUALS,
+        OPERATOR.NOT_EQUALS,
+        OPERATOR.CONTAINS,
+        OPERATOR.NOT_CONTAINS,
+        OPERATOR.STARTS_WITH,
+        OPERATOR.ENDS_WITH,
+        OPERATOR.IS_EMPTY,
+        OPERATOR.IS_NOT_EMPTY,
+    ],
+    number: [
+        OPERATOR.EQUALS,
+        OPERATOR.NOT_EQUALS,
+        OPERATOR.GREATER,
+        OPERATOR.GREATER_OR_EQUAL,
+        OPERATOR.LESS,
+        OPERATOR.LESS_OR_EQUAL,
+        OPERATOR.IS_EMPTY,
+        OPERATOR.IS_NOT_EMPTY,
+    ],
+    date: [
+        OPERATOR.EQUALS,
+        OPERATOR.GREATER,
+        OPERATOR.GREATER_OR_EQUAL,
+        OPERATOR.LESS,
+        OPERATOR.LESS_OR_EQUAL,
+        OPERATOR.IS_EMPTY,
+        OPERATOR.IS_NOT_EMPTY,
+    ],
     boolean: [OPERATOR.EQUALS, OPERATOR.NOT_EQUALS],
-    select: [OPERATOR.EQUALS, OPERATOR.NOT_EQUALS, OPERATOR.IS_EMPTY, OPERATOR.IS_NOT_EMPTY]
+    select: [OPERATOR.EQUALS, OPERATOR.NOT_EQUALS, OPERATOR.IS_EMPTY, OPERATOR.IS_NOT_EMPTY],
 };
 /** Операторы, которым значение не нужно: у них поле значения не рисуется */
 const VALUELESS = new Set([OPERATOR.IS_EMPTY, OPERATOR.IS_NOT_EMPTY]);
@@ -143,21 +166,23 @@ class QueryBuilder {
     #label_text = undefined;
     #empty_text = undefined;
 
-    constructor(options = {
-        id: String(),
-        name: String(),
-        title: String(),
-        label: String(),
-        fields: Array(),
-        value: undefined,
-        maxDepth: Number(),
-        emptyText: String(),
-        required: Boolean(),
-        messages: Object(),
-        disabled: Boolean(),
-        changeListener: undefined,
-        onChange: undefined
-    }) {
+    constructor(
+        options = {
+            id: String(),
+            name: String(),
+            title: String(),
+            label: String(),
+            fields: Array(),
+            value: undefined,
+            maxDepth: Number(),
+            emptyText: String(),
+            required: Boolean(),
+            messages: Object(),
+            disabled: Boolean(),
+            changeListener: undefined,
+            onChange: undefined,
+        }
+    ) {
         setStyles(__dirname + "/styles.css", "chUiJS_QueryBuilder");
         QueryBuilder.#counter += 1;
         this.#id = options.id === undefined ? `chui_query_builder_${QueryBuilder.#counter}` : options.id;
@@ -187,14 +212,27 @@ class QueryBuilder {
         if (options.value === undefined) this.clear(true);
         else this.setValue(options.value);
         // Правила формы и поля читают пустой запрос как пустое значение: за него отвечает required
-        Validate.installField(this, options, this.#root, this.#error, () => (this.isEmpty() ? "" : this.getText()), this.#tree);
+        Validate.installField(
+            this,
+            options,
+            this.#root,
+            this.#error,
+            () => (this.isEmpty() ? "" : this.getText()),
+            this.#tree
+        );
         const base_validate = this.validate;
         this.validate = () => {
             const result = base_validate();
             if (result.valid === false) return result;
-            const empty = this.#rules().find((rule) => this.#needsValue(rule.operator) && this.#isEmptyValue(rule.value));
+            const empty = this.#rules().find(
+                (rule) => this.#needsValue(rule.operator) && this.#isEmptyValue(rule.value)
+            );
             if (empty === undefined) return result;
-            return {valid: false, rule: "query", message: I18n.t("queryBuilder.valueMissing", {index: this.#indexOfRule(empty.id)})};
+            return {
+                valid: false,
+                rule: "query",
+                message: I18n.t("queryBuilder.valueMissing", { index: this.#indexOfRule(empty.id) }),
+            };
         };
         this.setDisabled(options.disabled === true);
         if (options.changeListener !== undefined) this.addChangeListener(options.changeListener);
@@ -220,7 +258,9 @@ class QueryBuilder {
 
     /** Описания полей: копии того, что задано в `setFields()` */
     getFields() {
-        return this.#fields.map((field) => Object.assign({}, field, {options: field.options.map((option) => Object.assign({}, option))}));
+        return this.#fields.map((field) =>
+            Object.assign({}, field, { options: field.options.map((option) => Object.assign({}, option)) })
+        );
     }
 
     /** Дерево запроса: `{id, combinator, children}`, у условий есть `id` */
@@ -235,7 +275,7 @@ class QueryBuilder {
 
     /** Плоский список условий `[{field, operator, value}]` — в порядке обхода дерева */
     getConditions() {
-        return this.#rules().map((rule) => ({field: rule.field, operator: rule.operator, value: rule.value}));
+        return this.#rules().map((rule) => ({ field: rule.field, operator: rule.operator, value: rule.value }));
     }
 
     /** Идентификаторы условий в порядке обхода — для `removeRule()` и `focus()` */
@@ -328,10 +368,12 @@ class QueryBuilder {
                 key: String(field.key),
                 label: field.label === undefined ? String(field.key) : String(field.label),
                 type: TYPES.includes(type) ? type : TYPE.STRING,
-                options: Array.isArray(field.options) ? field.options.map((option) => ({
-                    value: String(option.value),
-                    title: option.title === undefined ? String(option.value) : String(option.title)
-                })) : []
+                options: Array.isArray(field.options)
+                    ? field.options.map((option) => ({
+                          value: String(option.value),
+                          title: option.title === undefined ? String(option.value) : String(option.title),
+                      }))
+                    : [],
             };
         });
         for (const rule of this.#rules()) {
@@ -374,7 +416,9 @@ class QueryBuilder {
         if (group.combinator === next) return this;
         group.combinator = next;
         this.#render();
-        this.#announce(I18n.t("queryBuilder.connectionChanged", {combinator: I18n.t(QueryBuilder.#combinatorTitle(next))}));
+        this.#announce(
+            I18n.t("queryBuilder.connectionChanged", { combinator: I18n.t(QueryBuilder.#combinatorTitle(next)) })
+        );
         this.#notify();
         return this;
     }
@@ -391,7 +435,7 @@ class QueryBuilder {
         const rule = this.#emptyRule(field);
         group.children.push(rule);
         this.#render();
-        this.#announce(I18n.t("queryBuilder.ruleAdded", {index: this.#indexOfRule(rule.id)}));
+        this.#announce(I18n.t("queryBuilder.ruleAdded", { index: this.#indexOfRule(rule.id) }));
         this.#refreshErrors();
         this.#notify();
         return rule.id;
@@ -412,11 +456,13 @@ class QueryBuilder {
             kind: "group",
             id: this.#nextId("group"),
             combinator: COMBINATOR.AND,
-            children: [this.#emptyRule(field)]
+            children: [this.#emptyRule(field)],
         };
         group.children.push(nested);
         this.#render();
-        this.#announce(I18n.t("queryBuilder.groupAdded", {index: this.#groups().findIndex((item) => item.id === nested.id) + 1}));
+        this.#announce(
+            I18n.t("queryBuilder.groupAdded", { index: this.#groups().findIndex((item) => item.id === nested.id) + 1 })
+        );
         this.#refreshErrors();
         this.#notify();
         return nested.id;
@@ -428,7 +474,7 @@ class QueryBuilder {
         if (index === 0) return this;
         this.#removeNode(id);
         this.#render();
-        this.#announce(I18n.t("queryBuilder.ruleRemoved", {index: index}));
+        this.#announce(I18n.t("queryBuilder.ruleRemoved", { index: index }));
         this.#refreshErrors();
         this.#notify();
         return this;
@@ -441,7 +487,7 @@ class QueryBuilder {
         if (index === -1) return this;
         this.#removeNode(id);
         this.#render();
-        this.#announce(I18n.t("queryBuilder.groupRemoved", {index: index + 1}));
+        this.#announce(I18n.t("queryBuilder.groupRemoved", { index: index + 1 }));
         this.#refreshErrors();
         this.#notify();
         return this;
@@ -449,7 +495,7 @@ class QueryBuilder {
 
     /** Убрать все условия и группы: остаётся пустой корень */
     clear(silent = false) {
-        this.#value = {kind: "group", id: this.#nextId("group"), combinator: COMBINATOR.AND, children: []};
+        this.#value = { kind: "group", id: this.#nextId("group"), combinator: COMBINATOR.AND, children: [] };
         this.#render();
         if (silent === false) this.#notify();
         return this;
@@ -472,9 +518,10 @@ class QueryBuilder {
     focus(id = undefined) {
         const rules = this.#rules();
         const rule = id === undefined ? rules[0] : rules.find((item) => item.id === id);
-        const selector = rule === undefined
-            ? "query_builder_rule .query_builder_field input"
-            : `query_builder_rule[data-id="${CSS.escape(rule.id)}"] .query_builder_field input`;
+        const selector =
+            rule === undefined
+                ? "query_builder_rule .query_builder_field input"
+                : `query_builder_rule[data-id="${CSS.escape(rule.id)}"] .query_builder_field input`;
         const node = this.#tree.querySelector(selector);
         if (node !== null) node.focus();
         return this;
@@ -525,7 +572,7 @@ class QueryBuilder {
             id: this.#nextId("rule"),
             field: field.key,
             operator: OPERATORS_BY_TYPE[field.type][0],
-            value: undefined
+            value: undefined,
         };
     }
 
@@ -534,7 +581,7 @@ class QueryBuilder {
         const found = this.#fields.find((field) => field.key === key);
         if (found !== undefined) return found;
         return this.#fields[0] === undefined
-            ? {key: String(key), label: String(key), type: TYPE.STRING, options: []}
+            ? { key: String(key), label: String(key), type: TYPE.STRING, options: [] }
             : this.#fields[0];
     }
 
@@ -545,7 +592,7 @@ class QueryBuilder {
             kind: "group",
             id: typeof source.id === "string" ? source.id : this.#nextId("group"),
             combinator: source.combinator === COMBINATOR.OR ? COMBINATOR.OR : COMBINATOR.AND,
-            children: []
+            children: [],
         };
         const children = Array.isArray(source.children) ? source.children : [];
         for (const child of children) {
@@ -563,7 +610,7 @@ class QueryBuilder {
                 id: typeof child.id === "string" ? child.id : this.#nextId("rule"),
                 field: field.key,
                 operator: operators.includes(child.operator) ? child.operator : operators[0],
-                value: child.value
+                value: child.value,
             });
         }
         return group;
@@ -573,9 +620,11 @@ class QueryBuilder {
         return {
             id: group.id,
             combinator: group.combinator,
-            children: group.children.map((child) => (child.kind === "group"
-                ? QueryBuilder.#describeGroup(child)
-                : {id: child.id, field: child.field, operator: child.operator, value: child.value}))
+            children: group.children.map((child) =>
+                child.kind === "group"
+                    ? QueryBuilder.#describeGroup(child)
+                    : { id: child.id, field: child.field, operator: child.operator, value: child.value }
+            ),
         };
     }
 
@@ -630,7 +679,7 @@ class QueryBuilder {
             }
             return undefined;
         };
-        return this.#value === undefined ? 1 : walk(this.#value, 1) ?? 1;
+        return this.#value === undefined ? 1 : (walk(this.#value, 1) ?? 1);
     }
 
     /** Номер условия в порядке обхода; 0 — условия с таким `id` нет */
@@ -653,12 +702,13 @@ class QueryBuilder {
         let mark = undefined;
         if (active !== null && active !== undefined && this.#tree.contains(active)) {
             const owner = active.closest("query_builder_rule, query_builder_group");
-            if (owner !== null) mark = {
-                owner: owner.dataset.id,
-                control: QueryBuilder.#controlMark(active),
-                // Раскрытый список должен остаться раскрытым, закрытый — закрытым
-                open: active.getAttribute("aria-expanded") === "true"
-            };
+            if (owner !== null)
+                mark = {
+                    owner: owner.dataset.id,
+                    control: QueryBuilder.#controlMark(active),
+                    // Раскрытый список должен остаться раскрытым, закрытый — закрытым
+                    open: active.getAttribute("aria-expanded") === "true",
+                };
         }
         this.#destroyControls();
         this.#tree.innerHTML = "";
@@ -705,7 +755,8 @@ class QueryBuilder {
      * (три `Select` в строке), поэтому контрол ищется вместе с обёрткой условия.
      */
     static #controlMark(node = Object()) {
-        if (node.tagName === "SEGMENTED_OPTION") return `segmented_option[data-value="${CSS.escape(node.dataset.value)}"]`;
+        if (node.tagName === "SEGMENTED_OPTION")
+            return `segmented_option[data-value="${CSS.escape(node.dataset.value)}"]`;
         const list = [...node.classList];
         const own = list.length > 0 ? `.${CSS.escape(list[0])}` : node.tagName.toLowerCase();
         const holder = node.closest(".query_builder_field, .query_builder_operator, .query_builder_value");
@@ -720,10 +771,16 @@ class QueryBuilder {
         node.dataset.id = group.id;
         node.style.setProperty("--query_builder_depth", String(depth));
         node.setAttribute("role", "group");
-        node.setAttribute("aria-label", I18n.t("queryBuilder.groupAria", {
-            name: depth === 0 ? I18n.t("queryBuilder.conditions") : I18n.t("queryBuilder.nestedGroup", {depth: depth}),
-            combinator: I18n.t(QueryBuilder.#combinatorTitle(group.combinator))
-        }));
+        node.setAttribute(
+            "aria-label",
+            I18n.t("queryBuilder.groupAria", {
+                name:
+                    depth === 0
+                        ? I18n.t("queryBuilder.conditions")
+                        : I18n.t("queryBuilder.nestedGroup", { depth: depth }),
+                combinator: I18n.t(QueryBuilder.#combinatorTitle(group.combinator)),
+            })
+        );
         node.appendChild(this.#groupHead(group, depth));
         node.appendChild(this.#groupChildren(group, depth));
         node.appendChild(this.#groupFoot(group, depth));
@@ -735,14 +792,17 @@ class QueryBuilder {
         head.className = "query_builder_group_head";
         const combinator = new SegmentedControl({
             id: `${group.id}_combinator`,
-            label: depth === 0 ? I18n.t("queryBuilder.connection") : I18n.t("queryBuilder.connectionOfGroup", {depth: depth}),
+            label:
+                depth === 0
+                    ? I18n.t("queryBuilder.connection")
+                    : I18n.t("queryBuilder.connectionOfGroup", { depth: depth }),
             size: SegmentedControl.SIZE.SMALL,
             options: [
-                {value: COMBINATOR.AND, title: I18n.t("queryBuilder.and")},
-                {value: COMBINATOR.OR, title: I18n.t("queryBuilder.or")}
+                { value: COMBINATOR.AND, title: I18n.t("queryBuilder.and") },
+                { value: COMBINATOR.OR, title: I18n.t("queryBuilder.or") },
             ],
             value: group.combinator,
-            onChange: (value) => this.setCombinator(group.id, value)
+            onChange: (value) => this.setCombinator(group.id, value),
         });
         combinator.setStretch(false);
         this.#combinators.set(group.id, combinator);
@@ -751,13 +811,13 @@ class QueryBuilder {
         const summary = document.createElement("query_builder_summary");
         summary.className = "query_builder_summary";
         summary.setAttribute("aria-hidden", "true");
-        summary.innerText = I18n.t("queryBuilder.rulesCount", {count: count});
+        summary.innerText = I18n.t("queryBuilder.rulesCount", { count: count });
         head.appendChild(summary);
         if (depth > 0) {
             const remove = document.createElement("button");
             remove.type = "button";
             remove.className = "query_builder_remove query_builder_remove_group";
-            remove.setAttribute("aria-label", I18n.t("queryBuilder.removeGroup", {depth: depth}));
+            remove.setAttribute("aria-label", I18n.t("queryBuilder.removeGroup", { depth: depth }));
             const glyph = new Icon(Icons.CONTENT.REMOVE, "18px").set();
             glyph.setAttribute("aria-hidden", "true");
             remove.appendChild(glyph);
@@ -789,17 +849,27 @@ class QueryBuilder {
     #groupFoot(group = Object(), depth = Number()) {
         const foot = document.createElement("query_builder_group_foot");
         foot.className = "query_builder_group_foot";
-        foot.appendChild(this.#addButton({
-            title: I18n.t("queryBuilder.ruleShort"),
-            label: depth === 0 ? I18n.t("queryBuilder.addRule") : I18n.t("queryBuilder.addRuleInGroup", {depth: depth}),
-            onClick: () => this.addRule(group.id)
-        }));
+        foot.appendChild(
+            this.#addButton({
+                title: I18n.t("queryBuilder.ruleShort"),
+                label:
+                    depth === 0
+                        ? I18n.t("queryBuilder.addRule")
+                        : I18n.t("queryBuilder.addRuleInGroup", { depth: depth }),
+                onClick: () => this.addRule(group.id),
+            })
+        );
         if (this.#depthOf(group) < this.#max_depth) {
-            foot.appendChild(this.#addButton({
-                title: I18n.t("queryBuilder.groupShort"),
-                label: depth === 0 ? I18n.t("queryBuilder.addGroup") : I18n.t("queryBuilder.addGroupInGroup", {depth: depth}),
-                onClick: () => this.addGroup(group.id)
-            }));
+            foot.appendChild(
+                this.#addButton({
+                    title: I18n.t("queryBuilder.groupShort"),
+                    label:
+                        depth === 0
+                            ? I18n.t("queryBuilder.addGroup")
+                            : I18n.t("queryBuilder.addGroupInGroup", { depth: depth }),
+                    onClick: () => this.addGroup(group.id),
+                })
+            );
         }
         return foot;
     }
@@ -851,7 +921,7 @@ class QueryBuilder {
 
     /** Запомнить готовое поле вместе с его узлом: по узлу его найдут после пересборки */
     #track(component = Object(), node = new HTMLElement()) {
-        this.#controls.push({component: component, node: node});
+        this.#controls.push({ component: component, node: node });
         return node;
     }
 
@@ -871,26 +941,33 @@ class QueryBuilder {
         node.className = "query_builder_rule";
         node.dataset.id = rule.id;
         node.setAttribute("role", "group");
-        node.setAttribute("aria-label", I18n.t("queryBuilder.ruleLabel", {index: index}));
-        node.appendChild(this.#selectControl({
-            className: "query_builder_field",
-            label: I18n.t("queryBuilder.fieldOfRule", {index: index}),
-            options: this.#fields.map((item) => ({value: item.key, title: item.label})),
-            value: field.key,
-            onChange: (value) => this.#changeField(rule.id, value)
-        }));
-        node.appendChild(this.#selectControl({
-            className: "query_builder_operator",
-            label: I18n.t("queryBuilder.operatorOfRule", {index: index}),
-            options: OPERATORS_BY_TYPE[field.type].map((operator) => ({value: operator, title: I18n.t(OPERATOR_KEYS[operator])})),
-            value: rule.operator,
-            onChange: (value) => this.#changeOperator(rule.id, value)
-        }));
+        node.setAttribute("aria-label", I18n.t("queryBuilder.ruleLabel", { index: index }));
+        node.appendChild(
+            this.#selectControl({
+                className: "query_builder_field",
+                label: I18n.t("queryBuilder.fieldOfRule", { index: index }),
+                options: this.#fields.map((item) => ({ value: item.key, title: item.label })),
+                value: field.key,
+                onChange: (value) => this.#changeField(rule.id, value),
+            })
+        );
+        node.appendChild(
+            this.#selectControl({
+                className: "query_builder_operator",
+                label: I18n.t("queryBuilder.operatorOfRule", { index: index }),
+                options: OPERATORS_BY_TYPE[field.type].map((operator) => ({
+                    value: operator,
+                    title: I18n.t(OPERATOR_KEYS[operator]),
+                })),
+                value: rule.operator,
+                onChange: (value) => this.#changeOperator(rule.id, value),
+            })
+        );
         if (this.#needsValue(rule.operator)) node.appendChild(this.#valueControl(rule, field, index));
         const remove = document.createElement("button");
         remove.type = "button";
         remove.className = "query_builder_remove query_builder_remove_rule";
-        remove.setAttribute("aria-label", I18n.t("queryBuilder.removeRule", {index: index}));
+        remove.setAttribute("aria-label", I18n.t("queryBuilder.removeRule", { index: index }));
         const glyph = new Icon(Icons.CONTENT.REMOVE, "18px").set();
         glyph.setAttribute("aria-hidden", "true");
         remove.appendChild(glyph);
@@ -907,19 +984,23 @@ class QueryBuilder {
     #valueControl(rule = Object(), field = Object(), index = Number()) {
         const unset = rule.value === undefined || rule.value === null;
         if (field.type === TYPE.BOOLEAN || field.type === TYPE.SELECT) {
-            const options = field.type === TYPE.BOOLEAN
-                ? [{value: "true", title: I18n.t("queryBuilder.yes")}, {value: "false", title: I18n.t("queryBuilder.no")}]
-                : field.options;
+            const options =
+                field.type === TYPE.BOOLEAN
+                    ? [
+                          { value: "true", title: I18n.t("queryBuilder.yes") },
+                          { value: "false", title: I18n.t("queryBuilder.no") },
+                      ]
+                    : field.options;
             // Пустой вариант показывает «значение не выбрано» честно: модель и вид не расходятся
             return this.#selectControl({
                 className: "query_builder_value",
-                label: I18n.t("queryBuilder.valueOfRule", {index: index}),
-                options: [{value: "", title: I18n.t(UNSET_TITLE)}].concat(options),
+                label: I18n.t("queryBuilder.valueOfRule", { index: index }),
+                options: [{ value: "", title: I18n.t(UNSET_TITLE) }].concat(options),
                 value: unset ? "" : String(rule.value),
-                onChange: (value) => this.#changeValue(rule.id, value)
+                onChange: (value) => this.#changeValue(rule.id, value),
             });
         }
-        const label = I18n.t("queryBuilder.valueOfRule", {index: index});
+        const label = I18n.t("queryBuilder.valueOfRule", { index: index });
         // У числа значение живёт по подтверждению: недонабранное «1e» или «-» в модель не попадает
         if (field.type === TYPE.NUMBER) {
             const number = new NumberInput({});
@@ -940,7 +1021,7 @@ class QueryBuilder {
             return this.#bindValueControl(this.#track(date, date.set()), "query_builder_value", label);
         }
         // Строка: значение живёт по вводу, поэтому слушатель на input, а не на change
-        const text = new TextInput({placeholder: I18n.t("queryBuilder.value")});
+        const text = new TextInput({ placeholder: I18n.t("queryBuilder.value") });
         text.setValue(unset ? "" : String(rule.value));
         text.addInputListener(() => this.#changeValue(rule.id, text.getValue()));
         return this.#bindValueControl(this.#track(text, text.set()), "query_builder_value", label);
@@ -964,7 +1045,7 @@ class QueryBuilder {
         }
         rule.value = undefined;
         this.#render();
-        this.#announce(I18n.t("queryBuilder.fieldChanged", {index: this.#indexOfRule(ruleId), label: field.label}));
+        this.#announce(I18n.t("queryBuilder.fieldChanged", { index: this.#indexOfRule(ruleId), label: field.label }));
         this.#refreshErrors();
         this.#notify();
         return this;
@@ -976,7 +1057,12 @@ class QueryBuilder {
         rule.operator = operator;
         if (this.#needsValue(operator) === false) rule.value = undefined;
         this.#render();
-        this.#announce(I18n.t("queryBuilder.operatorChanged", {index: this.#indexOfRule(ruleId), operator: I18n.t(OPERATOR_KEYS[operator])}));
+        this.#announce(
+            I18n.t("queryBuilder.operatorChanged", {
+                index: this.#indexOfRule(ruleId),
+                operator: I18n.t(OPERATOR_KEYS[operator]),
+            })
+        );
         this.#refreshErrors();
         this.#notify();
         return this;
@@ -1028,11 +1114,15 @@ class QueryBuilder {
 
     static #groupText(group = Object(), fields = Array()) {
         if (group === undefined) return "";
-        const parts = group.children.map((child) => (child.kind === "group"
-            ? `(${QueryBuilder.#groupText(child, fields)})`
-            : QueryBuilder.#valueText(child, fields)));
+        const parts = group.children.map((child) =>
+            child.kind === "group"
+                ? `(${QueryBuilder.#groupText(child, fields)})`
+                : QueryBuilder.#valueText(child, fields)
+        );
         if (parts.length === 0) return "";
-        return parts.length === 1 ? parts[0] : parts.join(` ${I18n.t(QueryBuilder.#combinatorTitle(group.combinator))} `);
+        return parts.length === 1
+            ? parts[0]
+            : parts.join(` ${I18n.t(QueryBuilder.#combinatorTitle(group.combinator))} `);
     }
 
     #syncLabel() {
@@ -1057,7 +1147,10 @@ class QueryBuilder {
         for (const rule of this.#rules()) {
             const node = this.#tree.querySelector(`query_builder_rule[data-id="${CSS.escape(rule.id)}"]`);
             if (node === null) continue;
-            node.classList.toggle("query_builder_rule_empty", this.#needsValue(rule.operator) && this.#isEmptyValue(rule.value));
+            node.classList.toggle(
+                "query_builder_rule_empty",
+                this.#needsValue(rule.operator) && this.#isEmptyValue(rule.value)
+            );
         }
         return this;
     }
@@ -1089,4 +1182,4 @@ class QueryBuilder {
     }
 }
 
-exports.QueryBuilder = QueryBuilder
+exports.QueryBuilder = QueryBuilder;