chuijs 4.0.2 → 4.0.4

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]);
@@ -128,47 +151,49 @@ class QueryBuilder {
     #fields = [];
     #value = undefined;
     #listeners = [];
-    #on_change = undefined;
-    #max_depth = QueryBuilder.MAX_DEPTH;
+    #onChange = undefined;
+    #maxDepth = QueryBuilder.MAX_DEPTH;
     #disabled = false;
-    #error_shown = false;
-    #node_counter = 0;
-    #rule_counter = 0;
+    #errorShown = false;
+    #nodeCounter = 0;
+    #ruleCounter = 0;
     // Переключатели «И/ИЛИ» живут по группе: при перерисовке пересобираются вместе с узлами
     #combinators = new Map();
     // Готовые поля условий: их нужно гасить, снимать у них слушатели окна и уметь закрыть
     // раскрытый список при возврате фокуса после пересборки
     #controls = [];
-    #title_text = undefined;
-    #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
-    }) {
+    #titleText = undefined;
+    #labelText = undefined;
+    #emptyText = 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;
         this.#name = options.name;
         this.#root.id = this.#id;
         this.#root.setAttribute("role", "group");
-        this.#label_text = options.label;
-        this.#on_change = options.onChange;
-        if (options.emptyText !== undefined) this.#empty_text = String(options.emptyText);
-        else this.#empty_text = I18n.t("queryBuilder.empty");
-        if (options.maxDepth !== undefined) this.#max_depth = Math.max(1, Number(options.maxDepth));
+        this.#labelText = options.label;
+        this.#onChange = options.onChange;
+        if (options.emptyText !== undefined) this.#emptyText = String(options.emptyText);
+        else this.#emptyText = I18n.t("queryBuilder.empty");
+        if (options.maxDepth !== undefined) this.#maxDepth = Math.max(1, Number(options.maxDepth));
         this.#title.className = "query_builder_title";
         this.#title.id = `${this.#id}_title`;
         this.#tree.className = "query_builder_tree";
@@ -182,19 +207,32 @@ class QueryBuilder {
         this.#root.appendChild(this.#status);
         if (options.title !== undefined) this.setTitle(options.title);
         else this.#title.hidden = true;
-        this.setLabel(this.#label_text === undefined ? I18n.t("queryBuilder.title") : this.#label_text);
+        this.setLabel(this.#labelText === undefined ? I18n.t("queryBuilder.title") : this.#labelText);
         this.setFields(options.fields === undefined ? [] : options.fields);
         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);
-        const base_validate = this.validate;
+        Validate.installField(
+            this,
+            options,
+            this.#root,
+            this.#error,
+            () => (this.isEmpty() ? "" : this.getText()),
+            this.#tree
+        );
+        const baseValidate = this.validate;
         this.validate = () => {
-            const result = base_validate();
+            const result = baseValidate();
             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);
@@ -206,11 +244,11 @@ class QueryBuilder {
     }
 
     getTitle() {
-        return this.#title_text;
+        return this.#titleText;
     }
 
     getLabel() {
-        return this.#label_text;
+        return this.#labelText;
     }
 
     /** Имя запроса для формы: с ним `Form.getValues()`/`setValues()` знают, куда класть дерево */
@@ -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()` */
@@ -264,7 +304,7 @@ class QueryBuilder {
     }
 
     getMaxDepth() {
-        return this.#max_depth;
+        return this.#maxDepth;
     }
 
     isDisabled() {
@@ -272,7 +312,7 @@ class QueryBuilder {
     }
 
     getEmptyText() {
-        return this.#empty_text;
+        return this.#emptyText;
     }
 
     /** Запрос словами: «Статус равно «Оплачен» И Сумма больше 1000» */
@@ -291,7 +331,7 @@ class QueryBuilder {
 
     /** Подпись над запросом; `undefined` её убирает (имя тогда даёт `label`) */
     setTitle(text = undefined) {
-        this.#title_text = text;
+        this.#titleText = text;
         if (text === undefined || text === "") {
             this.#title.hidden = true;
             this.#title.innerText = "";
@@ -306,7 +346,7 @@ class QueryBuilder {
 
     /** Имя запроса, когда подписи в разметке нет */
     setLabel(text = undefined) {
-        this.#label_text = text;
+        this.#labelText = text;
         this.#syncLabel();
         return this;
     }
@@ -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()) {
@@ -347,7 +389,7 @@ class QueryBuilder {
 
     /** Дерево запроса; `silent` (как у полей формы) — молча, без уведомления слушателей */
     setValue(value = Object(), silent = false) {
-        this.#node_counter = 0;
+        this.#nodeCounter = 0;
         this.#value = this.#toGroup(value, 1);
         this.#render();
         if (silent === false) this.#notify();
@@ -355,13 +397,13 @@ class QueryBuilder {
     }
 
     setMaxDepth(depth = Number()) {
-        this.#max_depth = Math.max(1, Number(depth));
+        this.#maxDepth = Math.max(1, Number(depth));
         this.#render();
         return this;
     }
 
     setEmptyText(text = String()) {
-        this.#empty_text = text === undefined ? "" : String(text);
+        this.#emptyText = text === undefined ? "" : String(text);
         this.#render();
         return this;
     }
@@ -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;
@@ -405,18 +449,20 @@ class QueryBuilder {
     addGroup(groupId = undefined) {
         const group = groupId === undefined ? this.#value : this.#group(groupId);
         if (group === undefined) return undefined;
-        if (this.#depthOf(group) >= this.#max_depth) return undefined;
+        if (this.#depthOf(group) >= this.#maxDepth) return undefined;
         const field = this.#fields[0];
         if (field === undefined) return undefined;
         const nested = {
             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;
@@ -484,12 +531,12 @@ class QueryBuilder {
     check() {
         const result = this.validate();
         if (result.valid) {
-            this.#error_shown = false;
+            this.#errorShown = false;
             this.clearError();
             this.#announce(this.isEmpty() ? I18n.t("queryBuilder.empty") : I18n.t("queryBuilder.valid"));
             return this;
         }
-        this.#error_shown = true;
+        this.#errorShown = true;
         this.setError(result.message);
         this.#syncErrors();
         this.#announce(result.message);
@@ -515,8 +562,8 @@ class QueryBuilder {
 
     // === ВНУТРЕННЕЕ ===
     #nextId(prefix = String()) {
-        this.#node_counter += 1;
-        return `${this.#id}_${prefix}_${this.#node_counter}`;
+        this.#nodeCounter += 1;
+        return `${this.#id}_${prefix}_${this.#nodeCounter}`;
     }
 
     #emptyRule(field = Object()) {
@@ -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,13 +592,13 @@ 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) {
             if (child === undefined || child === null || typeof child !== "object") continue;
             if (child.children !== undefined || child.combinator !== undefined) {
-                if (depth >= this.#max_depth) continue;
+                if (depth >= this.#maxDepth) continue;
                 group.children.push(this.#toGroup(child, depth + 1));
                 continue;
             }
@@ -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,27 +702,28 @@ 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 = "";
         this.#combinators.clear();
-        this.#rule_counter = 0;
+        this.#ruleCounter = 0;
         if (this.#value === undefined || this.#fields.length === 0) {
             this.#tree.hidden = true;
             this.#empty.hidden = false;
-            this.#empty.innerText = this.#fields.length === 0 ? I18n.t("queryBuilder.noFields") : this.#empty_text;
+            this.#empty.innerText = this.#fields.length === 0 ? I18n.t("queryBuilder.noFields") : this.#emptyText;
             return this;
         }
         this.#tree.appendChild(this.#groupNode(this.#value, 0));
         this.#tree.hidden = false;
         this.#empty.hidden = true;
-        this.#empty.innerText = this.#empty_text;
+        this.#empty.innerText = this.#emptyText;
         this.#syncErrors();
         if (mark !== undefined) {
             const node = this.#tree.querySelector(`[data-id="${CSS.escape(mark.owner)}"] ${mark.control}`);
@@ -705,13 +755,14 @@ 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");
         if (holder === null) return own;
-        const holder_class = [...holder.classList].find((name) => name.startsWith("query_builder_"));
-        return holder_class === undefined ? own : `.${CSS.escape(holder_class)} ${own}`;
+        const holderClass = [...holder.classList].find((name) => name.startsWith("query_builder_"));
+        return holderClass === undefined ? own : `.${CSS.escape(holderClass)} ${own}`;
     }
 
     #groupNode(group = Object(), depth = Number()) {
@@ -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);
@@ -776,7 +836,7 @@ class QueryBuilder {
         if (group.children.length === 0) {
             const note = document.createElement("query_builder_group_empty");
             note.className = "query_builder_group_empty";
-            note.innerText = this.#empty_text;
+            note.innerText = this.#emptyText;
             list.appendChild(note);
             return list;
         }
@@ -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)
-        }));
-        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.ruleShort"),
+                label:
+                    depth === 0
+                        ? I18n.t("queryBuilder.addRule")
+                        : I18n.t("queryBuilder.addRuleInGroup", { depth: depth }),
+                onClick: () => this.addRule(group.id),
+            })
+        );
+        if (this.#depthOf(group) < this.#maxDepth) {
+            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;
     }
 
@@ -864,33 +934,40 @@ class QueryBuilder {
     }
 
     #ruleNode(rule = Object()) {
-        this.#rule_counter += 1;
-        const index = this.#rule_counter;
+        this.#ruleCounter += 1;
+        const index = this.#ruleCounter;
         const field = this.#fieldOf(rule.field);
         const node = document.createElement("query_builder_rule");
         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,15 +1114,19 @@ 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() {
-        if (this.#title_text !== undefined && this.#title_text !== "") {
+        if (this.#titleText !== undefined && this.#titleText !== "") {
             this.#root.setAttribute("aria-labelledby", this.#title.id);
             this.#root.removeAttribute("aria-label");
         } else {
@@ -1047,8 +1137,8 @@ class QueryBuilder {
     }
 
     #accessibleName() {
-        if (this.#title_text !== undefined && this.#title_text !== "") return this.#title_text;
-        if (this.#label_text !== undefined && this.#label_text !== "") return this.#label_text;
+        if (this.#titleText !== undefined && this.#titleText !== "") return this.#titleText;
+        if (this.#labelText !== undefined && this.#labelText !== "") return this.#labelText;
         return I18n.t("queryBuilder.title");
     }
 
@@ -1057,17 +1147,20 @@ 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;
     }
 
     /** После правки показанная ошибка пересчитывается: она не должна пережить своё условие */
     #refreshErrors() {
-        if (this.#error_shown === false) return this;
+        if (this.#errorShown === false) return this;
         const result = this.validate();
         if (result.valid) {
-            this.#error_shown = false;
+            this.#errorShown = false;
             this.clearError();
             return this;
         }
@@ -1084,9 +1177,9 @@ class QueryBuilder {
     #notify() {
         const value = this.getValue();
         for (const listener of [...this.#listeners]) listener(value, this);
-        if (this.#on_change !== undefined) this.#on_change(value, this);
+        if (this.#onChange !== undefined) this.#onChange(value, this);
         return this;
     }
 }
 
-exports.QueryBuilder = QueryBuilder
+exports.QueryBuilder = QueryBuilder;