@optionfactory/ful 0.50.0 → 0.52.0

package/dist/ful.iife.js

@@ -812,11 +812,11 @@ var ful = (function (exports) {
     const upgradeQueue = new UpgradeQueue();
 
     const ParsedElement = (conf) => {
-        const {flags, attrs, template, slots} = conf || {};
+        const {states, attributes, template, slots} = conf || {};
 
-        const observed_flags = flags || [];
-        const observed_others = attrs || [];
-        const observed = [].concat(observed_flags).concat(observed_others);
+        const observed_states = states || [];
+        const observed_attributes = attributes || [];
+        const observed = [].concat(observed_states).concat(observed_attributes);
 
         const templateId = elements.defineTemplate(template);
 
@@ -870,12 +870,12 @@ var ful = (function (exports) {
                 }
                 this.#parsed = true;
                 await this.render(elements.template(templateId), slots ? LightSlots.from(this) : undefined);
-                for (const flag of observed_flags) {
+                for (const flag of observed_states) {
                     if (this.hasAttribute(flag)) {
                         this[flag] = true;
                     }
                 }
-                for (const other of observed_others) {
+                for (const other of observed_attributes) {
                     if (this.hasAttribute(other)) {
                         this[other] = this.getAttribute(other);
                     }
@@ -884,18 +884,17 @@ var ful = (function (exports) {
             }
         };
 
-        for (const flag of observed_flags) {
-            const state = `--${flag};`;
-            Object.defineProperty(k.prototype, flag, {
+        for (const state of observed_states) {
+            Object.defineProperty(k.prototype, state, {
                 enumerable: true,
                 configurable: true,
                 get() {
-                    return this.internals.states.has(state);
+                    return this.internals.states.has(`--${state}`);
                 },
                 set(value) {
                     const v = Attributes.asBoolean(value);
                     const et = this.initialized ? 'changed' : 'init';
-                    const event = new SyncEvent(`${flag}:${et}`, {
+                    const event = new SyncEvent(`${state}:${et}`, {
                         detail: { 
                             target: this,
                             value: v 
@@ -906,12 +905,8 @@ var ful = (function (exports) {
                         if (!success) {
                             return;
                         }
-                        if (v) {
-                            //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
-                            this.internals.states.add(state);
-                            return;
-                        }
-                        this.internals.states.delete(state);
+                        //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
+                        this.internals.states[v ? 'add' : 'delete'](`--${state}`);
                     })();
                 }
             });
@@ -1069,6 +1064,18 @@ var ful = (function (exports) {
         }
     }
 
+    const INPUT_TEMPLATE = `
+<label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
+<div class="input-group">
+    <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
+    <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
+    {{{{ slots.input }}}} 
+    <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
+    <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
+</div>
+<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+`;
+
     const makeInputFragment = (el, template, slots) => {
         const input = el.input = slots.input = slots.input || (() => {
             const el = document.createElement("input");
@@ -1087,20 +1094,10 @@ var ful = (function (exports) {
     };
 
     class Input extends ParsedElement({
-        flags: [], 
-        attrs: ['value'],
+        states: [], 
+        attributes: ['value'],
         slots: true,
-        template: `
-        <label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
-        <div class="input-group">
-            <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
-            <div data-tpl-if="slots.before" data-tpl-remove="tag">{{{{ slots.before }}}}</div>
-            {{{{ slots.input }}}} 
-            <div data-tpl-if="slots.after" data-tpl-remove="tag">{{{{ slots.after }}}}</div>
-            <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
-        </div>
-        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
-    `
+        template: INPUT_TEMPLATE
     }){
         render(template, slots) {
             const fragment = makeInputFragment(this, template, slots);
@@ -1120,8 +1117,8 @@ var ful = (function (exports) {
      */
 
     class Select extends ParsedElement({
-        flags: [], 
-        attrs: ["value"],
+        states: [], 
+        attributes: ["value"],
         slots: true,
         template: `
         <label data-tpl-for="tsId" class="form-label">{{{{ slots.default }}}}</label>
@@ -1221,8 +1218,8 @@ var ful = (function (exports) {
     }
 
     class RadioGroup extends ParsedElement({
-        flags: ['disabled'], 
-        attrs: ['value'],
+        states: ['disabled'], 
+        attributes: ['value'],
         slots: true,
         template: `
         <fieldset>
@@ -1368,6 +1365,7 @@ var ful = (function (exports) {
     exports.Fragments = Fragments;
     exports.Hex = Hex;
     exports.HttpClient = HttpClient;
+    exports.INPUT_TEMPLATE = INPUT_TEMPLATE;
     exports.Input = Input;
     exports.LightSlots = LightSlots;
     exports.LocalStorage = LocalStorage;