@optionfactory/ful 0.50.0 → 0.52.0

package/dist/ful.mjs

@@ -809,11 +809,11 @@ class UpgradeQueue {
 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);
 
@@ -867,12 +867,12 @@ const ParsedElement = (conf) => {
             }
             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);
                 }
@@ -881,18 +881,17 @@ const ParsedElement = (conf) => {
         }
     };
 
-    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 
@@ -903,12 +902,8 @@ const ParsedElement = (conf) => {
                     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}`);
                 })();
             }
         });
@@ -1066,6 +1061,18 @@ class Form extends ParsedElement() {
     }
 }
 
+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");
@@ -1084,20 +1091,10 @@ const makeInputFragment = (el, template, slots) => {
 };
 
 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);
@@ -1117,8 +1114,8 @@ class Input extends ParsedElement({
  */
 
 class Select extends ParsedElement({
-    flags: [], 
-    attrs: ["value"],
+    states: [], 
+    attributes: ["value"],
     slots: true,
     template: `
         <label data-tpl-for="tsId" class="form-label">{{{{ slots.default }}}}</label>
@@ -1218,8 +1215,8 @@ class Select extends ParsedElement({
 }
 
 class RadioGroup extends ParsedElement({
-    flags: ['disabled'], 
-    attrs: ['value'],
+    states: ['disabled'], 
+    attributes: ['value'],
     slots: true,
     template: `
         <fieldset>
@@ -1354,5 +1351,5 @@ class Wizard extends HTMLElement {
     }
 }
 
-export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, Input, LightSlots, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, SyncEvent, TemplatesRegistry, VersionedStorage, Wizard, elements, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, timing };
+export { Attributes, AuthorizationCodeFlow, AuthorizationCodeFlowInterceptor, AuthorizationCodeFlowSession, Base64, ElementsRegistry, Failure, Form, Fragments, Hex, HttpClient, INPUT_TEMPLATE, Input, LightSlots, LocalStorage, Nodes, ParsedElement, RadioGroup, Select, SessionStorage, Spinner, SyncEvent, TemplatesRegistry, VersionedStorage, Wizard, elements, jsonPatch, jsonPost, jsonPut, jsonRequest, makeInputFragment, timing };
 //# sourceMappingURL=ful.mjs.map