@optionfactory/ful 4.0.13 → 4.0.15

package/dist/ful.iife.js

@@ -1462,7 +1462,7 @@ var ful = (function (exports, ftl) {
         _fragment(type, slots) {
             return this.template().withOverlay({ type, slots }).render();
         }
-        render({ slots, observed, disabled }) {
+        render({ slots, observed, disabled, skipValueSetup }) {
             const type = this._type();
             const fragment = this._fragment(type, slots);
             this._input = fragment.querySelector("input,textarea");
@@ -1470,7 +1470,9 @@ var ful = (function (exports, ftl) {
             ftl.Attributes.forward('input-', this, this._input);
             this.disabled = disabled;
             this.readonly = observed.readonly;
-            this.value = observed.value;
+            if(!skipValueSetup){
+                this.value = observed.value;
+            }
 
             this._input.addEventListener('change', (evt) => {
                 evt.stopPropagation();
@@ -1725,24 +1727,24 @@ var ful = (function (exports, ftl) {
         <div data-ref="dropzone" class="dropzone" data-tpl-if="!slots.dropzone">
             {{ #l10n:t('dropzonelabel') }}
         </div>
-        <div data-ref="items" class="items"></div>
+        <ful-item-list></ful-item-list>
         <ful-field-warnings></ful-field-warnings>
         <ful-field-error></ful-field-error>
     `;
         static templates = {
             items: `
-            <div class="item" data-tpl-each="files" data-tpl-var="file" data-tpl-data-name="file.name">
-                <div class="filename"><span>{{ file.name }}</span></div>
-                <div class="size">{{ #bytes:format(file.size) }}</div>
-                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-x-lg"></i></button>
-            </div>
+            <ful-item data-tpl-each="files" data-tpl-var="file" data-tpl-data-name="file.name">
+                <div>{{ file.name }}</div>
+                <div>{{ #bytes:format(file.size) }}</div>
+                <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg"></button>
+            </ful-item>
         `,
             warning: `<ful-field-warning>{{ #l10n:t(key, args) }}</ful-field-warning>`
         }
         render(conf) {
             const { observed } = conf;
             super.render(conf);
-            this.#items = this.querySelector("[data-ref=items]");
+            this.#items = this.querySelector("ful-item-list");
             this.#dropzone = this.querySelector("[data-ref=dropzone]");
             this.#warnings = this.querySelector("ful-field-warnings");
             this.accept = observed.accept;
@@ -1758,7 +1760,7 @@ var ful = (function (exports, ftl) {
                 if (!e.target.closest("button")) {
                     return;
                 }
-                const fileName = e.target.closest(".item").dataset.name;
+                const fileName = e.target.closest("ful-item").dataset.name;
                 const dt = new DataTransfer();
                 [...this.files].filter(f => f.name !== fileName).forEach(f => dt.items.add(f));
                 this.files = dt.files;
@@ -1790,11 +1792,7 @@ var ful = (function (exports, ftl) {
             this.#ensureAcceptable();
             this.#ensureFileSizes();
             this.#ensureTotalSize();
-            if(this.#useItemlist){
-                this.template('items').withOverlay({ files: this.files }).withModule('bytes', { format: this.#formatByteSize }).renderTo(this.#items);
-            }else {
-                this.#items.replaceChildren();
-            }
+            this.template('items').withOverlay({ files: this.files }).withModule('bytes', { format: this.#formatByteSize }).renderTo(this.#items);
         }
         warning(key, args) {
             this.template('warning').withOverlay({ key, args }).renderTo(this.#warnings);
@@ -1855,7 +1853,7 @@ var ful = (function (exports, ftl) {
         set multiple(v) {
             this._input.multiple = v;
             this.reflect(() => {
-                this.setAttribute('multiple', this._input.multiple);
+                ftl.Attributes.toggle(this, "multiple", v);
             });
         }
         get files() {
@@ -1888,7 +1886,6 @@ var ful = (function (exports, ftl) {
             this.reflect(() => {
                 this.setAttribute('maxfilesize', v);
             });
-
         }
         #maxtotalsize;
         get maxtotalsize() {
@@ -1906,7 +1903,6 @@ var ful = (function (exports, ftl) {
         }
         set itemlist(v) {
             this.#useItemlist = v;
-            ftl.Attributes.toggle(this.#items, "hidden", !v);
             this.reflect(() => {
                 ftl.Attributes.toggle(this, "itemlist", v);
             });
@@ -1917,7 +1913,6 @@ var ful = (function (exports, ftl) {
         }
         set dropzone(v) {
             this.#useDropzone = v;
-            ftl.Attributes.toggle(this.#dropzone, "hidden", !v);
             this.reflect(() => {
                 ftl.Attributes.toggle(this, "dropzone", v);
             });
@@ -2146,7 +2141,7 @@ var ful = (function (exports, ftl) {
     }
 
     class Select extends ftl.ParsedElement {
-        static observed = ['value:csvm', 'readonly:presence']
+        static observed = ['value:csvm', 'readonly:presence', 'itemlist:presence']
         static slots = true
         static template = `
         <div class="form-label">
@@ -2166,8 +2161,17 @@ var ful = (function (exports, ftl) {
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
+        <ful-item-list></ful-item-list>
         <ful-field-error></ful-field-error>
     `;
+        static templates = {
+            items: `
+            <ful-item data-tpl-each="entries" data-tpl-var="entry" data-tpl-data-key="entry[0]">
+                <div>{{ entry[1][0] }}</div>
+                <button type="button" class="btn btn-sm btn-outline-danger bi bi-x-lg"></button>
+            </ful-item>
+        `
+        }    
         static mappers = {
             "csvm": (v, name, el) => {
                 if (el.hasAttribute("multiple")) {
@@ -2182,6 +2186,7 @@ var ful = (function (exports, ftl) {
         #badges
         #ddmenu
         #input
+        #items;
         #multiple
         #fieldError
         #values = new Map()
@@ -2197,12 +2202,14 @@ var ful = (function (exports, ftl) {
             await this.#loader.prefetch?.();
             const fragment = this.template().withOverlay({ slots, name }).render();
             this.#input = fragment.querySelector('input');
+            this.#items = fragment.querySelector("ful-item-list");
             ftl.Attributes.forward('input-', this, this.#input);
             this.#badges = fragment.querySelector('badges');
 
             this.value = observed.value;
             this.disabled = disabled;
             this.readonly = observed.readonly;
+            this.itemlist = observed.itemlist;
 
             this.#ddmenu = fragment.querySelector('ful-dropdown');
             const label = fragment.querySelector('label');
@@ -2227,6 +2234,22 @@ var ful = (function (exports, ftl) {
                 this.#input.focus();
                 dload();
             });
+            this.#items.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (!e.target.closest("button")) {
+                    return;
+                }
+                if(this.disabled || this.readonly){
+                    return;
+                }            
+                const idx = [...this.#items.children].indexOf(e.target.closest('ful-item'));
+                if (idx === -1) {
+                    return;
+                }
+                this.#values.delete(Array.from(this.#values.keys()).pop());
+                this.#changed();
+                this.#syncBadges();
+            });
             this.#badges.addEventListener('click', (e) => {
                 e.stopPropagation();
                 if(this.disabled || this.readonly){
@@ -2334,6 +2357,8 @@ var ful = (function (exports, ftl) {
             });
             this.#badges.replaceChildren();
             this.#badges.append(...badges);
+            this.#items.replaceChildren();
+            this.template('items').withOverlay({ entries: this.#values.entries() }).renderTo(this.#items);
         }
         set value(vs) {
             if(vs === null){
@@ -2375,6 +2400,16 @@ var ful = (function (exports, ftl) {
                 ftl.Attributes.toggle(this, 'readonly', v);
             });
         }
+        #useItemlist;
+        get itemlist() {
+            return this.#useItemlist;
+        }
+        set itemlist(v) {
+            this.#useItemlist = v;
+            this.reflect(() => {
+                ftl.Attributes.toggle(this, "itemlist", v);
+            });
+        }
         focus(options) {
             this.#input.focus(options);
         }
@@ -3012,15 +3047,16 @@ var ful = (function (exports, ftl) {
         }
     }
 
-    class InstantFilter extends ftl.ParsedElement {
-        static observed = ["value:json"];
-        static slots = true;
+    class InstantFilter extends Input {
+        static observed = ['value:json', 'readonly:presence'];
         static template = `
-        <div class="form-label" data-tpl-if="label">
-            <label>{{{{ label }}}}</label>
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
             {{{{ slots.info }}}}
         </div>
         <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
             <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">
                 <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
@@ -3033,32 +3069,21 @@ var ful = (function (exports, ftl) {
             </ul>
             <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>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
         <ful-field-error></ful-field-error>
     `;
-        static formAssociated = true;
         #operator;
         #value1;
         #value2;
-        #fieldError;
-        constructor() {
-            super();
-            this.internals = this.attachInternals();
-        }
-        render({ slots }) {
-            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({ slots, label, name  }).render();
-            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);
+        render(conf) {
+            super.render({...conf, skipValueSetup: true});
+            this.#operator = this.querySelector('[data-ref=operator]');
+            this.#value1 = this.querySelector('[data-ref=value1]');
+            this.#value2 = this.querySelector('[data-ref=value2]');
+            this.value = conf.observed.value;
+
             this.addEventListener('click', (evt) => {
                 const target = /** @type HTMLElement */ (evt.target);
                 if (!target.matches('ul > li > a')) {
@@ -3081,42 +3106,25 @@ var ful = (function (exports, ftl) {
             if (v === null || v === undefined) {
                 this.#value1.value = '';
                 this.#value2.value = '';
-                this.reflect(() => {
-                    this.removeAttribute('value');
-                });
                 return;
             }
             const [operator, ...values] = v;
             this.#operator.setAttribute('value', operator);
             this.#value1.value = values[0] ? Instant.isoToLocal(values[0]) : values[0];
             this.#value2.value = values[1] ? Instant.isoToLocal(values[1]) : values[1];
-            this.reflect(() => {
-                this.setAttribute('value', JSON.stringify(v));
-            });
-        }
-        focus(options) {
-            this.#value1.focus(options);
-        }
-        setCustomValidity(error) {
-            if (!error) {
-                this.internals.setValidity({});
-                this.#fieldError.innerText = "";
-                return;
-            }
-            this.internals.setValidity({ customError: true }, " ");
-            this.#fieldError.innerText = error;
         }
     }
 
-    class LocalDateFilter extends ftl.ParsedElement {
-        static observed = ["value:json"];
-        static slots = true;
+    class LocalDateFilter extends Input {
+        static observed = ["value:json", 'readonly:presence'];
         static template = `
-        <div class="form-label" data-tpl-if="label">
-            <label>{{{{ label }}}}</label>
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
             {{{{ slots.info }}}}
         </div>
         <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
             <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">
                 <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
@@ -3129,32 +3137,22 @@ var ful = (function (exports, ftl) {
             </ul>
             <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>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
         <ful-field-error></ful-field-error>
     `;
-        static formAssociated = true;
         #operator;
         #value1;
         #value2;
-        #fieldError;
-        constructor() {
-            super();
-            this.internals = this.attachInternals();
-        }
-        render({ slots }) {
-            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({ slots, label, name }).render();
-            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);
+        render(conf) {
+            super.render({...conf, skipValueSetup: true});
+
+            this.#operator = this.querySelector('[data-ref=operator]');
+            this.#value1 = this.querySelector('[data-ref=value1]');
+            this.#value2 = this.querySelector('[data-ref=value2]');
+            this.value = conf.observed.value;
+            
             this.addEventListener('click', (evt) => {
                 const target = /** @type HTMLElement */(evt.target);
                 if (!target.matches('ul > li > a')) {
@@ -3176,42 +3174,25 @@ var ful = (function (exports, ftl) {
             if (v === null || v === undefined) {
                 this.#value1.value = '';
                 this.#value2.value = '';
-                this.reflect(() => {
-                    this.removeAttribute('value');
-                });
                 return;
             }
             const [operator, ...values] = v;
             this.#operator.setAttibute('value', operator);
             this.#value1.value = values[0];
             this.#value2.value = values[1];
-            this.reflect(() => {
-                this.setAttribute('value', JSON.stringify(v));
-            });
-        }
-        focus(options) {
-            this.#value1.focus(options);
-        }
-        setCustomValidity(error) {
-            if (!error) {
-                this.internals.setValidity({});
-                this.#fieldError.innerText = "";
-                return;
-            }
-            this.internals.setValidity({ customError: true }, " ");
-            this.#fieldError.innerText = error;
         }
     }
 
-    class TextFilter extends ftl.ParsedElement {
-        static observed = ["value:json"];
-        static slots = true;
+    class TextFilter extends Input {
+        static observed = ["value:json", 'readonly:presence'];
         static template = `
-        <div class="form-label" data-tpl-if="label">
-            <label>{{{{ label }}}}</label>
+        <div class="form-label">
+            <label>{{{{ slots.default }}}}</label>
             {{{{ slots.info }}}}
         </div>
         <div class="input-group">
+            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+            {{{{ slots.before }}}}
             <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">
                 <li><a class="dropdown-item" role="button" value="CONTAINS">&mldr;a&mldr;</a></li>
@@ -3220,30 +3201,20 @@ var ful = (function (exports, ftl) {
                 <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
             </ul>
             <input data-ref="value" type="text" class="form-control" form="">
-            <span class="input-group-text"><i class="bi bi-search"></i></span>
+            {{{{ slots.after }}}}
+            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
         <ful-field-error></ful-field-error>
     `;
-        static formAssociated = true;
         #operator;
         #value;
-        #fieldError;
-        constructor() {
-            super();
-            this.internals = this.attachInternals();
-        }
-        render({ slots }) {
-            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({ slots, label, name }).render();
-            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);
+        render(conf) {
+            super.render({...conf, skipValueSetup: true});
+
+            this.#operator = this.querySelector('[data-ref=operator]');
+            this.#value = this.querySelector('[data-ref=value]');
+            this.value = conf.observed.value;
+
             this.addEventListener('click', (evt) => {
                 const target = /** @type HTMLElement */(evt.target);
                 if (!target.matches('ul > li > a')) {
@@ -3264,29 +3235,11 @@ var ful = (function (exports, ftl) {
         set value(v) {
             if (v === null || v === undefined) {
                 this.#value.value = '';
-                this.reflect(() => {
-                    this.removeAttribute('value');
-                });
                 return;
             }
             const [operator, sensitivity, value] = v;
             this.#operator.setAttribute('value', operator);
             this.#value.value = value;
-            this.reflect(() => {
-                this.setAttribute('value', JSON.stringify(v));
-            });
-        }
-        focus(options) {
-            this.#value.focus(options);
-        }
-        setCustomValidity(error) {
-            if (!error) {
-                this.internals.setValidity({});
-                this.#fieldError.innerText = "";
-                return;
-            }
-            this.internals.setValidity({ customError: true }, " ");
-            this.#fieldError.innerText = error;
         }
     }