@optionfactory/ful 1.0.12 → 1.0.13

package/dist/ful.iife.js

@@ -1413,16 +1413,16 @@ var ful = (function (exports, ftl) {
         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;
@@ -1430,13 +1430,11 @@ var ful = (function (exports, ftl) {
         constructor() {
             super();
             this.internals = this.attachInternals();
-            this.internals.role = 'textbox';
+            this.internals.role = 'presentation';
         }
         render({ slots }) {
-            const id = ftl.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");
             ftl.Attributes.forward('input-', this, this.#input);
             this.#input.addEventListener('change', (evt) => {
@@ -1449,7 +1447,11 @@ var ful = (function (exports, ftl) {
                     }
                 }));
             });
+            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() {
@@ -1565,11 +1567,9 @@ var ful = (function (exports, ftl) {
             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()));
         }
     }
@@ -1681,19 +1681,19 @@ var ful = (function (exports, ftl) {
         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) => {
@@ -1715,20 +1715,23 @@ var ful = (function (exports, ftl) {
         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 = ftl.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)));
@@ -1852,7 +1855,7 @@ var ful = (function (exports, ftl) {
         static observed = ['value'];
         static slots = true;
         static template = `
-        <fieldset data-tpl-aria-describedby="fieldErrorId">
+        <fieldset>
             <legend class="form-label">
                 {{{{ slots.default }}}}
             </legend>
@@ -1867,7 +1870,7 @@ var ful = (function (exports, ftl) {
                     </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>
@@ -1908,9 +1911,9 @@ var ful = (function (exports, ftl) {
             });
 
             radioEls.forEach(el => el.remove());
-            const fieldErrorId = ftl.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';
         }
@@ -1952,11 +1955,11 @@ var ful = (function (exports, ftl) {
         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;
@@ -1964,17 +1967,13 @@ var ful = (function (exports, ftl) {
         constructor() {
             super();
             this.internals = this.attachInternals();
-            this.internals.role = 'checkbox';
+            this.internals.role = 'presentation';
         }
         render({ slots }) {
-            const id = ftl.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");
             ftl.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', {
@@ -1984,7 +1983,12 @@ var ful = (function (exports, ftl) {
                         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() {
@@ -2216,48 +2220,50 @@ var ful = (function (exports, ftl) {
         <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 = {
@@ -2286,7 +2292,8 @@ var ful = (function (exports, ftl) {
             const template = this.template();
             const schema = TableSchemaParser.parse(slots.default, template);
             const fragment = template.withOverlay({ slots, schema }).render();
-            const table = /** @type HTMLTableElement */ (ftl.Nodes.queryChildren(fragment, 'table'));
+            const tableWrapper = /** @type HTMLTableElement */ (ftl.Nodes.queryChildren(fragment, '.table-wrapper'));
+            const table = /** @type HTMLTableElement */ (tableWrapper.querySelector("table"));
             ftl.Attributes.forward('table-', this, table);
             this.#schema = schema;
             this.#body = table.querySelector(':scope > tbody');
@@ -2379,7 +2386,7 @@ var ful = (function (exports, ftl) {
         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">
@@ -2391,7 +2398,7 @@ var ful = (function (exports, ftl) {
                 <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>
@@ -2407,15 +2414,18 @@ var ful = (function (exports, ftl) {
             this.internals = this.attachInternals();
         }
         render({ slots }) {
-            const id = ftl.Attributes.uid('instant-filter');
             const label = ftl.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')) {
@@ -2478,7 +2488,7 @@ var ful = (function (exports, ftl) {
         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">
@@ -2490,10 +2500,9 @@ var ful = (function (exports, ftl) {
                 <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>
     `;
@@ -2507,15 +2516,18 @@ var ful = (function (exports, ftl) {
             this.internals = this.attachInternals();
         }
         render({ slots }) {
-            const id = ftl.Attributes.uid('instant-filter');
             const label = ftl.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')) {
@@ -2568,7 +2580,7 @@ var ful = (function (exports, ftl) {
         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">
@@ -2577,7 +2589,7 @@ var ful = (function (exports, ftl) {
                 <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>
@@ -2591,14 +2603,17 @@ var ful = (function (exports, ftl) {
             this.internals = this.attachInternals();
         }
         render({ slots }) {
-            const id = ftl.Attributes.uid('string-filter');
             const label = ftl.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')) {