@optionfactory/ful 1.0.12 → 1.0.14

package/dist/ful.mjs

@@ -1386,7 +1386,9 @@ class Form extends ParsedElement {
             this.spinner(false);
         }
     }
-
+    reset(){
+        this.form.reset();
+    }
     spinner(spin) {
         this.querySelectorAll('ful-spinner').forEach(el => {
             const hel = /** @type HTMLElement */ (el);
@@ -1412,16 +1414,16 @@ class Input extends ParsedElement {
     static observed = ['value', 'readonly:presence'];
     static slots = true;
     static template = `
-        <label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
+        <label class="form-label">{{{{ slots.default }}}}</label>
         <div class="input-group">
             <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
             {{{{ slots.before }}}}
-            <input data-tpl-if="type != 'textarea'" class="form-control" data-tpl-id="id" data-tpl-type="type" placeholder=" " data-tpl-aria-describedby="fieldErrorId" form="">
-            <textarea data-tpl-if="type == 'textarea'" class="form-control" data-tpl-id="id" placeholder=" " data-tpl-aria-describedby="fieldErrorId" form=""></textarea>
+            <input data-tpl-if="type != 'textarea'" class="form-control" data-tpl-type="type" placeholder=" " form="">
+            <textarea data-tpl-if="type == 'textarea'" class="form-control" placeholder=" " form=""></textarea>
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
-        <ful-field-error data-tpl-id="fieldErrorId"></ful-field-error>
+        <ful-field-error></ful-field-error>
     `;
     static formAssociated = true;
     #input;
@@ -1429,15 +1431,18 @@ class Input extends ParsedElement {
     constructor() {
         super();
         this.internals = this.attachInternals();
-        this.internals.role = 'textbox';
+        this.internals.role = 'presentation';
     }
-    render({ slots }) {
-        const id = Attributes.uid('ful-input');
-        const fieldErrorId = `${id}-error`;
+    render({ slots, observed, disabled }) {
         const type = this.getAttribute("type") ?? 'text';
-        const fragment = this.template().withOverlay({ id, type, fieldErrorId, slots }).render();    
+        const fragment = this.template().withOverlay({ type, slots }).render();    
         this.#input = fragment.querySelector("input,textarea");
+
         Attributes.forward('input-', this, this.#input);
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+        this.value = observed.value;
+
         this.#input.addEventListener('change', (evt) => {
             evt.stopPropagation();
             this.dispatchEvent(new CustomEvent('change', {
@@ -1448,7 +1453,11 @@ class Input extends ParsedElement {
                 }
             }));
         });
+        const label = fragment.querySelector('label');
+        label.addEventListener('click', () => this.focus());
         this.#fieldError = fragment.querySelector('ful-field-error');
+        this.#input.ariaDescribedByElements = [this.#fieldError];
+        this.#input.ariaLabelledByElements = [label];
         this.replaceChildren(fragment);
     }
     get value() {
@@ -1463,6 +1472,12 @@ class Input extends ParsedElement {
     set readonly(v) {
         this.#input.readOnly = v;
     }    
+    get disabled(){
+        return this.#input.hasAttribute('disabled');
+    }
+    set disabled(d){
+        Attributes.toggle(this.#input, 'disabled', d);
+    }
     focus(options) {
         this.#input.focus(options);
     }
@@ -1475,6 +1490,9 @@ class Input extends ParsedElement {
         this.internals.setValidity({ customError: true }, " ");
         this.#fieldError.innerText = error;
     }
+    formResetCallback(){
+        this.value = this.getAttribute("value");
+    }
 }
 
 class CompleteSelectLoader {
@@ -1564,11 +1582,9 @@ class OptionsSlotSelectLoader {
         this.#data = data;
     }
     async exact(...keys) {
-        await timing.sleep(500);
         return this.#data.filter(([k, v]) => keys.includes(k));
     }
     async load(needle) {
-        await timing.sleep(500);
         return this.#data.filter(([k, v]) => v.includes(needle?.toLowerCase()));
     }
 }
@@ -1677,22 +1693,22 @@ class Dropdown extends ParsedElement {
 }
 
 class Select extends ParsedElement {
-    static observed = ['value:csvm']
+    static observed = ['value:csvm', 'readonly:presence']
     static slots = true
     static template = `
-        <label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
+        <label class="form-label">{{{{ slots.default }}}}</label>
         <div class="input-group flex-nowrap" tabindex="-1">
             <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
             {{{{ slots.before }}}}
             <div class="ful-select-input">
                 <badges></badges>
-                <input data-tpl-id="id" data-tpl-ariadesribed-by="fieldErrorId" type="text" form="">
+                <input type="text" form="">
             </div>
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
         <ful-dropdown hidden></ful-dropdown>
-        <ful-field-error data-tpl-id="fieldErrorId"></ful-field-error>
+        <ful-field-error></ful-field-error>
     `;
     static mappers = {
         "csvm": (v, name, el) => {
@@ -1714,20 +1730,27 @@ class Select extends ParsedElement {
     constructor() {
         super();
         this.internals = this.attachInternals();
-        this.internals.role = 'combobox';
+        this.internals.role = 'presentation';
     }
-    async render({ slots, observed }) {
+    async render({ slots, observed, disabled }) {
         const name = this.getAttribute("name");
-        const id = Attributes.uid('ful-select');
-        const fieldErrorId = id + "-error";
         this.#loader = Loaders.fromAttributes(this, 'loaders:select', { options: slots.options });
         await this.#loader.prefetch?.();
-        const fragment = this.template().withOverlay({ slots, name, id, fieldErrorId }).render();
+        const fragment = this.template().withOverlay({ slots, name }).render();
         this.#input = fragment.querySelector('input');
         this.#badges = fragment.querySelector('badges');
+
+        this.value = observed.value;
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+
         this.#ddmenu = fragment.querySelector('ful-dropdown');
         this.#multiple = this.hasAttribute("multiple");
+        const label = fragment.querySelector('label');
+        label.addEventListener('click', () => this.focus());
         this.#fieldError = fragment.querySelector('ful-field-error');
+        this.#input.ariaDescribedByElements = [this.#fieldError];
+        this.#input.ariaLabelledByElements = [label];
 
         const self = this;
         const [dload, abortdload] = timing.debounce(400, () => self.#ddmenu.show(() => self.#loader.load(self.#input.value)));
@@ -1821,6 +1844,11 @@ class Select extends ParsedElement {
         this.#badges.append(...badges);
     }
     set value(value) {
+        if(value === null){
+            this.#values = new Map();
+            this.#syncBadges();
+            return;            
+        }
         (async () => {
             const entries = await (this.#multiple ? this.#loader.exact(...value) : this.#loader.exact(value));
             this.#values = new Map(entries);
@@ -1848,10 +1876,10 @@ class Select extends ParsedElement {
 }
 
 class RadioGroup extends ParsedElement {
-    static observed = ['value'];
+    static observed = ['value', 'readonly:presence'];
     static slots = true;
     static template = `
-        <fieldset data-tpl-aria-describedby="fieldErrorId">
+        <fieldset>
             <legend class="form-label">
                 {{{{ slots.default }}}}
             </legend>
@@ -1866,13 +1894,14 @@ class RadioGroup extends ParsedElement {
                     </label>
                 </div>
             </section>
-            <ful-field-error data-tpl-id="fieldErrorId"></ful-field-error>
+            <ful-field-error></ful-field-error>
             <footer data-tpl-if="slots.footer">
                 {{{{ slots.footer }}}}
             </footer>
         </fieldset>
     `;
     static formAssociated = true;
+    #fieldset;
     #fieldError;
     #firstRadio;
     #booleanType;
@@ -1881,7 +1910,7 @@ class RadioGroup extends ParsedElement {
         this.internals = this.attachInternals();
         this.internals.role = 'radiogroup';
     }
-    render({ slots }) {
+    render({ slots, observed, disabled }) {
         const name = this.getAttribute('name') ?? Attributes.uid('ful-radiogroup');
         const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
         const inputsAndLabels = radioEls.map(el => {
@@ -1907,9 +1936,13 @@ class RadioGroup extends ParsedElement {
         });
 
         radioEls.forEach(el => el.remove());
-        const fieldErrorId = Attributes.uid("ful-error");
-        this.template().withOverlay({ name, fieldErrorId, slots, inputsAndLabels }).renderTo(this);
+        this.template().withOverlay({ name, slots, inputsAndLabels }).renderTo(this);
+        this.#fieldset = this.firstElementChild;
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+        this.value = observed.value;
         this.#fieldError = this.querySelector('ful-field-error');
+        this.ariaDescribedByElements = [this.#fieldError];
         this.#firstRadio = this.querySelector('input[type=radio]');
         this.#booleanType = this.getAttribute('type') === 'boolean';
     }
@@ -1930,7 +1963,19 @@ class RadioGroup extends ParsedElement {
         if (el) {
             el.checked = true;
         }
+    }     
+    get readonly(){
+        return this.#fieldset.inert;
+    }
+    set readonly(v) {
+        this.#fieldset.inert = v;
+    }        
+    get disabled(){
+        return this.#fieldset.hasAttribute('disabled');
     }
+    set disabled(d){
+        Attributes.toggle(this.#fieldset, 'disabled', d);
+    }    
     focus(options) {
         this.#firstRadio.focus(options);
     }
@@ -1946,34 +1991,35 @@ class RadioGroup extends ParsedElement {
 }
 
 class Checkbox extends ParsedElement {
-    static observed = ['value:bool'];
+    static observed = ['value:bool', 'readonly:presence'];
     static slots = true;
     static template = `
         <div data-tpl-class="klass">
             <div class="input-container">
-                <input data-tpl-id="id" class="form-check-input" type="checkbox" role="switch" form="" placeholder=" " data-tpl-aria-describedby="fieldErrorId">
+                <input class="form-check-input" type="checkbox" role="switch" form="" placeholder=" ">
             </div>
-            <label data-tpl-for="id" class="form-check-label">{{{{ slots.default }}}}</label>
+            <label class="form-check-label">{{{{ slots.default }}}}</label>
         </div>
-        <ful-field-error data-tpl-if="fieldErrorId"></ful-field-error>
+        <ful-field-error></ful-field-error>
     `;
+    #container;
     #input;
     #fieldError;
     static formAssociated = true;
     constructor() {
         super();
         this.internals = this.attachInternals();
-        this.internals.role = 'checkbox';
+        this.internals.role = 'presentation';
     }
-    render({ slots }) {
-        const id = Attributes.uid("ful-checkbox");
-        const fieldErrorId = id + "-error";
+    render({ slots, observed, disabled }) {
         const klass = this.getAttribute('type') == 'switch' ? "form-check form-switch" : "form-check";
-        this.internals.role = this.getAttribute('type') == 'switch' ? 'switch' : 'checkbox';
-        const fragment = this.template().withOverlay({ slots, klass, id, fieldErrorId }).render();
+        const fragment = this.template().withOverlay({ slots, klass }).render();
+        this.#container = fragment.firstElementChild;
         this.#input = fragment.querySelector("input");
         Attributes.forward('input-', this, this.#input);
-        this.#fieldError = fragment.querySelector('ful-field-error');
+        this.disabled = disabled;
+        this.readonly = observed.readonly;
+        this.value = observed.value;
         this.#input.addEventListener('change', (evt) => {
             evt.stopPropagation();
             this.dispatchEvent(new CustomEvent('change', {
@@ -1983,7 +2029,18 @@ class Checkbox extends ParsedElement {
                     value: this.value
                 }
             }));
-        });        
+        });
+        const label = fragment.querySelector('label');
+        label.addEventListener('click', () => {
+            this.focus();
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.value = !this.value;
+        });
+        this.#fieldError = fragment.querySelector('ful-field-error');
+        this.#input.ariaDescribedByElements = [this.#fieldError];
+        this.#input.ariaLabelledByElements = [label];
         this.replaceChildren(fragment);
     }
     get value() {
@@ -1992,6 +2049,18 @@ class Checkbox extends ParsedElement {
     set value(value) {
         this.#input.checked = value;
     }
+    get readonly(){
+        return this.#container.inert;
+    }
+    set readonly(v) {
+        this.#container.inert = v;
+    }     
+    get disabled() {
+        return this.#input.hasAttribute('disabled');
+    }
+    set disabled(d) {
+        Attributes.toggle(this.#input, 'disabled', d);
+    }
     focus(options) {
         this.#input.focus(options);
     }
@@ -2215,48 +2284,50 @@ class Table extends ParsedElement {
         <ful-form data-tpl-if="slots.filters">
             {{{{ slots.filters }}}}
         </ful-form>
-        <table class="table">
-            <caption data-tpl-if="slots.caption">{{{{ slots.caption }}}}</caption>
-            <thead>
-                <tr>
-                    <th data-tpl-each="schema" scope="col" data-tpl-class="title.classes">
-                        {{{{ title.fragment }}}}
-                        <ful-sorter data-tpl-if="sorter || order" data-tpl-sorter="sorter" data-tpl-order="order"></ful-sorter>
-                    </th>
-                </tr>
-            </thead>
-            <tbody></tbody>
-            <tbody data-ref="no-autoload">
-                <tr>
-                    <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
-                        <i class="bi bi-search" style="font-size: 40px; color: #BDC3CA"></i>
-                        <p class="mt-3 mb-0" style="color: #BDC3CA">
-                            Avvia la ricerca per visualizzare i risultati...
-                        </p>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody data-ref="loading" hidden>
-                <tr>
-                    <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
-                        <ful-spinner class="big"></ful-spinner>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody data-ref="feedback" hidden>
-                <tr>
-                    <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
-                        <div class="alert alert-danger">
-                            <p>Errore nel caricamento della tabella:</p>
-                            <p class="mb-0" data-ref="feedback-error"></p>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-            <tfoot data-tpl-if="slots.footer">
-                {{{{ slots.footer }}}}
-            </tfoot>
-        </table>
+        <div class="table-wrapper">
+            <table class="table">
+                <caption data-tpl-if="slots.caption">{{{{ slots.caption }}}}</caption>
+                <thead>
+                    <tr>
+                        <th data-tpl-each="schema" scope="col" data-tpl-class="title.classes">
+                            {{{{ title.fragment }}}}
+                            <ful-sorter data-tpl-if="sorter || order" data-tpl-sorter="sorter" data-tpl-order="order"></ful-sorter>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+                <tbody data-ref="no-autoload">
+                    <tr>
+                        <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                            <i class="bi bi-search" style="font-size: 40px; color: #BDC3CA"></i>
+                            <p class="mt-3 mb-0" style="color: #BDC3CA">
+                                Avvia la ricerca per visualizzare i risultati...
+                            </p>
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody data-ref="loading" hidden>
+                    <tr>
+                        <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                            <ful-spinner class="big"></ful-spinner>
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody data-ref="feedback" hidden>
+                    <tr>
+                        <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                            <div class="alert alert-danger">
+                                <p>Errore nel caricamento della tabella:</p>
+                                <p class="mb-0" data-ref="feedback-error"></p>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot data-tpl-if="slots.footer">
+                    {{{{ slots.footer }}}}
+                </tfoot>
+            </table>
+        </div>
         <ful-pagination current="0" total="1"></ful-pagination>
     `;
     static templates = {
@@ -2285,7 +2356,8 @@ class Table extends ParsedElement {
         const template = this.template();
         const schema = TableSchemaParser.parse(slots.default, template);
         const fragment = template.withOverlay({ slots, schema }).render();
-        const table = /** @type HTMLTableElement */ (Nodes.queryChildren(fragment, 'table'));
+        const tableWrapper = /** @type HTMLTableElement */ (Nodes.queryChildren(fragment, '.table-wrapper'));
+        const table = /** @type HTMLTableElement */ (tableWrapper.querySelector("table"));
         Attributes.forward('table-', this, table);
         this.#schema = schema;
         this.#body = table.querySelector(':scope > tbody');
@@ -2378,7 +2450,7 @@ class InstantFilter extends ParsedElement {
     static observed = ["value:json"];
     static slots = true;
     static template = `
-        <label data-tpl-for="id" class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
+        <label class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
         <div class="input-group">
             <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="LTE" form="">&PrecedesSlantEqual;</button>
             <ul class="dropdown-menu">
@@ -2390,7 +2462,7 @@ class InstantFilter extends ParsedElement {
                 <li><a class="dropdown-item" role="button" value="GTE">&SucceedsSlantEqual;</a></li>
                 <li><a class="dropdown-item" role="button" value="BETWEEN">&LeftRightArrow;</a></li>
             </ul>
-            <input data-tpl-id="id" data-ref="value1" type="datetime-local" class="form-control" form="">
+            <input data-ref="value1" type="datetime-local" class="form-control" form="">
             <input data-ref="value2" type="datetime-local" class="form-control" form="" hidden>
             <span class="input-group-text"><i class="bi bi-search"></i></span>
         </div>
@@ -2406,15 +2478,18 @@ class InstantFilter extends ParsedElement {
         this.internals = this.attachInternals();
     }
     render({ slots }) {
-        const id = Attributes.uid('instant-filter');
         const label = Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
         const name = this.getAttribute("name");
-        const fragment = this.template().withOverlay({ id, label, name }).render(this);
+        const fragment = this.template().withOverlay({ label, name }).render(this);
         this.#operator = fragment.querySelector('[data-ref=operator]');
         this.#value1 = fragment.querySelector('[data-ref=value1]');
         this.#value2 = fragment.querySelector('[data-ref=value2]');
+        this.#fieldError = fragment.querySelector('ful-field-error');
+        const labelEl = fragment.querySelector('label');
+        labelEl?.addEventListener('click', () => this.focus());
+        this.#value1.ariaDescribedByElements = [this.#fieldError];
+        this.#value1.ariaLabelledByElements = labelEl ? [labelEl] : [];
         this.replaceChildren(fragment);
-        this.#fieldError = this.querySelector('ful-field-error');
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */ (evt.target);
             if (!target.matches('ul > li > a')) {
@@ -2477,7 +2552,7 @@ class LocalDateFilter extends ParsedElement {
     static observed = ["value:json"];
     static slots = true;
     static template = `
-        <label data-tpl-for="id" class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
+        <label class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
         <div class="input-group">
             <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="EQ" form="">=</button>
             <ul class="dropdown-menu">
@@ -2489,10 +2564,9 @@ class LocalDateFilter extends ParsedElement {
                 <li><a class="dropdown-item" role="button" value="GTE">&SucceedsSlantEqual;</a></li>
                 <li><a class="dropdown-item" role="button" value="BETWEEN">&LeftRightArrow;</a></li>
             </ul>
-            <input data-tpl-id="id" data-ref="value1" type="date" class="form-control" form="">
+            <input data-ref="value1" type="date" class="form-control" form="">
             <input data-ref="value2" type="date" class="form-control" form="" hidden>
             <span class="input-group-text"><i class="bi bi-search"></i></span>
-
         </div>
         <ful-field-error></ful-field-error>
     `;
@@ -2506,15 +2580,18 @@ class LocalDateFilter extends ParsedElement {
         this.internals = this.attachInternals();
     }
     render({ slots }) {
-        const id = Attributes.uid('instant-filter');
         const label = Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
         const name = this.getAttribute("name");
-        const fragment = this.template().withOverlay({ id, label, name }).render(this);
+        const fragment = this.template().withOverlay({ label, name }).render(this);
         this.#operator = fragment.querySelector('[data-ref=operator]');
         this.#value1 = fragment.querySelector('[data-ref=value1]');
         this.#value2 = fragment.querySelector('[data-ref=value2]');
+        this.#fieldError = fragment.querySelector('ful-field-error');
+        const labelEl = fragment.querySelector('label');
+        labelEl?.addEventListener('click', () => this.focus());
+        this.#value1.ariaDescribedByElements = [this.#fieldError];
+        this.#value1.ariaLabelledByElements = labelEl ? [labelEl] : [];
         this.replaceChildren(fragment);
-        this.#fieldError = this.querySelector('ful-field-error');
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */(evt.target);
             if (!target.matches('ul > li > a')) {
@@ -2567,7 +2644,7 @@ class TextFilter extends ParsedElement {
     static observed = ["value:json"];
     static slots = true;
     static template = `
-        <label data-tpl-for="id" class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
+        <label class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
         <div class="input-group">
             <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="CONTAINS" form="">&mldr;a&mldr;</button>
             <ul class="dropdown-menu">
@@ -2576,7 +2653,7 @@ class TextFilter extends ParsedElement {
                 <li><a class="dropdown-item" role="button" value="ENDS_WITH">&mldr;a</a></li>
                 <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
             </ul>
-            <input data-tpl-id="id" data-ref="value" type="text" class="form-control" form="">
+            <input data-ref="value" type="text" class="form-control" form="">
             <span class="input-group-text"><i class="bi bi-search"></i></span>
         </div>
         <ful-field-error></ful-field-error>
@@ -2590,14 +2667,17 @@ class TextFilter extends ParsedElement {
         this.internals = this.attachInternals();
     }
     render({ slots }) {
-        const id = Attributes.uid('string-filter');
         const label = Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
         const name = this.getAttribute("name");
-        const fragment = this.template().withOverlay({ id, label, name }).render(this);
+        const fragment = this.template().withOverlay({ label, name }).render(this);
         this.#operator = fragment.querySelector('[data-ref=operator]');
         this.#value = fragment.querySelector('[data-ref=value]');
+        this.#fieldError = fragment.querySelector('ful-field-error');
+        const labelEl = fragment.querySelector('label');
+        labelEl?.addEventListener('click', () => this.focus());
+        this.#value.ariaDescribedByElements = [this.#fieldError];
+        this.#value.ariaLabelledByElements = labelEl ? [labelEl] : [];        
         this.replaceChildren(fragment);
-        this.#fieldError = this.querySelector('ful-field-error');
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */(evt.target);
             if (!target.matches('ul > li > a')) {