@optionfactory/ful 1.0.12 → 1.0.13

package/dist/ful.mjs

@@ -1412,16 +1412,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,13 +1429,11 @@ 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`;
         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.#input.addEventListener('change', (evt) => {
@@ -1448,7 +1446,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() {
@@ -1564,11 +1566,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()));
     }
 }
@@ -1680,19 +1680,19 @@ class Select extends ParsedElement {
     static observed = ['value:csvm']
     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 +1714,23 @@ class Select extends ParsedElement {
     constructor() {
         super();
         this.internals = this.attachInternals();
-        this.internals.role = 'combobox';
+        this.internals.role = 'presentation';
     }
     async render({ slots, observed }) {
         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.#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)));
@@ -1851,7 +1854,7 @@ class RadioGroup extends ParsedElement {
     static observed = ['value'];
     static slots = true;
     static template = `
-        <fieldset data-tpl-aria-describedby="fieldErrorId">
+        <fieldset>
             <legend class="form-label">
                 {{{{ slots.default }}}}
             </legend>
@@ -1866,7 +1869,7 @@ 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>
@@ -1907,9 +1910,9 @@ 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.#fieldError = this.querySelector('ful-field-error');
+        this.ariaDescribedByElements = [this.#fieldError];
         this.#firstRadio = this.querySelector('input[type=radio]');
         this.#booleanType = this.getAttribute('type') === 'boolean';
     }
@@ -1951,11 +1954,11 @@ class Checkbox extends ParsedElement {
     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>
     `;
     #input;
     #fieldError;
@@ -1963,17 +1966,13 @@ class Checkbox extends ParsedElement {
     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";
         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.#input = fragment.querySelector("input");
         Attributes.forward('input-', this, this.#input);
-        this.#fieldError = fragment.querySelector('ful-field-error');
         this.#input.addEventListener('change', (evt) => {
             evt.stopPropagation();
             this.dispatchEvent(new CustomEvent('change', {
@@ -1983,7 +1982,12 @@ class Checkbox extends ParsedElement {
                     value: this.value
                 }
             }));
-        });        
+        });
+        const label = fragment.querySelector('label');
+        label.addEventListener('click', () => { this.focus(); 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() {
@@ -2215,48 +2219,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 +2291,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 +2385,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 +2397,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 +2413,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 +2487,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 +2499,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 +2515,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 +2579,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 +2588,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 +2602,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')) {