@optionfactory/ful 0.26.0 → 0.28.0

package/dist/ful.css

@@ -1,2 +1,2 @@
-ful-errors:not(:defined),ful-field-error:not(:defined){visibility:hidden}ful-errors,ful-field-error{display:block}ful-input:not(:defined){visibility:hidden}ful-input{display:block}ful-select:not(:defined){visibility:hidden}ful-select{display:block}.form-floating>.ts-wrapper{height:calc(3.5rem + var(--bs-border-width)*2);line-height:1.25;min-height:calc(3.5rem + var(--bs-border-width)*2)}.form-floating>.ts-wrapper>.ts-control{line-height:20px;padding-bottom:.625rem!important;padding-top:1.625rem!important}.form-floating>.ts-wrapper~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.ts-wrapper.multi .ts-control>div{margin:0 3px 0 0;padding:0 5px}ful-spinner:not(:defined){visibility:hidden}ful-wizard:not(:defined){visibility:hidden}ful-wizard,ful-wizard>ol>li.active{display:block}ful-wizard>ol>li,ful-wizard>section{display:none}ful-wizard>section.current{display:block}
+ful-errors:not(:defined),ful-field-error:not(:defined){visibility:hidden}ful-errors,ful-field-error{display:block}ful-input:not(:defined){visibility:hidden}ful-input{display:block}ful-select:not(:defined){visibility:hidden}ful-select{display:block}.form-floating>.ts-wrapper{height:calc(3.5rem + var(--bs-border-width)*2);line-height:1.25;min-height:calc(3.5rem + var(--bs-border-width)*2)}.form-floating>.ts-wrapper>.ts-control{line-height:20px;padding-bottom:.625rem!important;padding-top:1.625rem!important}.form-floating>.ts-wrapper~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.ts-wrapper.multi .ts-control>div{margin:0 3px 0 0;padding:0 5px}ful-radio-group:not(:defined){visibility:hidden}ful-radio{display:none}ful-radio-group{--ful-radio-group-label-border-color:var(--bs-border-color);--ful-radio-group-label-border-color-checked:#46ce95;--ful-radio-group-label-background-color:inherit;--ful-radio-group-label-background-color-checked:#f5fffc;display:block}ful-radio-group>fieldset legend{font-size:16px;line-height:22px;margin:0}ful-radio-group>fieldset>section{display:grid;gap:10px;grid-template-columns:1fr}ful-radio-group.horizontal>fieldset>section{gap:16px;grid-template-columns:1fr 1fr}ful-radio-group>fieldset input[type=radio]{height:16px;margin-left:8px;margin-right:12px;vertical-align:text-bottom;width:16px}ful-radio-group>fieldset label:has(input[type=radio]){background-color:var(--ful-radio-group-label-background-color);border:1px solid var(--ful-radio-group-label-border-color);border-radius:4px;display:block;padding:6px 10px}ful-radio-group>fieldset label:has(input[type=radio].is-invalid){border-color:var(--bs-form-invalid-border-color)}ful-radio-group>fieldset label:has(input[type=radio]:checked){background-color:var(--ful-radio-group-label-background-color-checked);border-color:var(--ful-radio-group-label-border-color-checked)}ful-radio-group:has(.is-invalid) .invalid-feedback{display:block}ful-spinner:not(:defined){visibility:hidden}ful-wizard:not(:defined){visibility:hidden}ful-wizard,ful-wizard>ol>li.active{display:block}ful-wizard>ol>li,ful-wizard>section{display:none}ful-wizard>section.current{display:block}
 /*# sourceMappingURL=ful.css.map */

package/dist/ful.css.map

@@ -1 +1 @@
-{"version":3,"sources":["errors.scss","input.scss","select.scss","spinner.scss","wizard.scss"],"names":[],"mappings":"AAAA,uDAEE,iBACF,CAEA,2BAEE,aACF,CCRA,wBACE,iBACF,CAEA,UACE,aACF,CCNA,yBACE,iBACF,CAEA,WACE,aACF,CAEA,2BACE,8CAAiD,CAEjD,gBAAiB,CADjB,kDAEF,CAEA,uCAGE,gBAAiB,CADjB,gCAAmC,CADnC,8BAGF,CAEA,iCACE,wCAA2C,CAC3C,0DACF,CAEA,iDACE,gBAAiB,CACjB,aACF,CC5BA,0BACE,iBACF,CCFA,yBACE,iBACF,CAMA,mCACE,aACF,CAMA,oCACE,YACF,CAEA,2BACE,aACF","file":"ful.css","sourcesContent":["ful-errors:not(:defined),\nful-field-error:not(:defined) {\n  visibility: hidden;\n}\n\nful-errors,\nful-field-error {\n  display: block;\n}","ful-input:not(:defined) {\n  visibility: hidden;\n}\n\nful-input {\n  display: block;\n}","ful-select:not(:defined) {\n  visibility: hidden;\n}\n\nful-select {\n  display: block;\n}\n\n.form-floating > .ts-wrapper {\n  height: calc(3.5rem + var(--bs-border-width) * 2);\n  min-height: calc(3.5rem + var(--bs-border-width) * 2);\n  line-height: 1.25;\n}\n\n.form-floating > .ts-wrapper > .ts-control {\n  padding-top: 1.625rem !important;\n  padding-bottom: 0.625rem !important;\n  line-height: 20px;\n}\n\n.form-floating > .ts-wrapper ~ label {\n  color: rgba(var(--bs-body-color-rgb), 0.65);\n  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);\n}\n\n.form-floating > .ts-wrapper.multi .ts-control > div {\n  margin: 0 3px 0 0;\n  padding: 0px 5px;\n}","ful-spinner:not(:defined) {\n  visibility: hidden;\n}","ful-wizard:not(:defined) {\n  visibility: hidden;\n}\n\nful-wizard {\n  display: block;\n}\n\nful-wizard > ol > li.active {\n  display: block;\n}\n\nful-wizard > ol > li {\n  display: none;\n}\n\nful-wizard > section {\n  display: none;\n}\n\nful-wizard > section.current {\n  display: block;\n}"]}
+{"version":3,"sources":["errors.scss","input.scss","select.scss","radio.scss","spinner.scss","wizard.scss"],"names":[],"mappings":"AAAA,uDAEE,iBACF,CAEA,2BAEE,aACF,CCRA,wBACE,iBACF,CAEA,UACE,aACF,CCNA,yBACE,iBACF,CAEA,WACE,aACF,CAEA,2BACE,8CAAiD,CAEjD,gBAAiB,CADjB,kDAEF,CAEA,uCAGE,gBAAiB,CADjB,gCAAmC,CADnC,8BAGF,CAEA,iCACE,wCAA2C,CAC3C,0DACF,CAEA,iDACE,gBAAiB,CACjB,aACF,CC5BA,8BACE,iBACF,CAEA,UACE,YACF,CAEA,gBAEE,2DAA4D,CAC5D,oDAAqD,CACrD,gDAAiD,CACjD,wDAAyD,CAJzD,aAKF,CAEA,gCAEE,cAAe,CADf,gBAAiB,CAEjB,QACF,CAEA,iCACE,YAAa,CACb,QAAS,CACT,yBACF,CAEA,4CACE,QAAS,CACT,6BACF,CAEA,2CAGE,WAAY,CAFZ,eAAgB,CAChB,iBAAkB,CAGlB,0BAA2B,CAD3B,UAEF,CAEA,sDAGE,8DAA+D,CAD/D,0DAA2D,CAE3D,iBAAkB,CAHlB,aAAc,CAId,gBACF,CAEA,iEACE,gDACF,CAEA,8DACE,sEAAuE,CACvE,8DACF,CAEA,mDACE,aACF,CC5DA,0BACE,iBACF,CCFA,yBACE,iBACF,CAMA,mCACE,aACF,CAMA,oCACE,YACF,CAEA,2BACE,aACF","file":"ful.css","sourcesContent":["ful-errors:not(:defined),\nful-field-error:not(:defined) {\n  visibility: hidden;\n}\n\nful-errors,\nful-field-error {\n  display: block;\n}","ful-input:not(:defined) {\n  visibility: hidden;\n}\n\nful-input {\n  display: block;\n}","ful-select:not(:defined) {\n  visibility: hidden;\n}\n\nful-select {\n  display: block;\n}\n\n.form-floating > .ts-wrapper {\n  height: calc(3.5rem + var(--bs-border-width) * 2);\n  min-height: calc(3.5rem + var(--bs-border-width) * 2);\n  line-height: 1.25;\n}\n\n.form-floating > .ts-wrapper > .ts-control {\n  padding-top: 1.625rem !important;\n  padding-bottom: 0.625rem !important;\n  line-height: 20px;\n}\n\n.form-floating > .ts-wrapper ~ label {\n  color: rgba(var(--bs-body-color-rgb), 0.65);\n  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);\n}\n\n.form-floating > .ts-wrapper.multi .ts-control > div {\n  margin: 0 3px 0 0;\n  padding: 0px 5px;\n}","ful-radio-group:not(:defined) {\n  visibility: hidden;\n}\n\nful-radio {\n  display: none;\n}\n\nful-radio-group {\n  display: block;\n  --ful-radio-group-label-border-color: var(--bs-border-color);\n  --ful-radio-group-label-border-color-checked: #46ce95;\n  --ful-radio-group-label-background-color: inherit;\n  --ful-radio-group-label-background-color-checked: #f5fffc;\n}\n\nful-radio-group > fieldset legend {\n  line-height: 22px;\n  font-size: 16px;\n  margin: 0;\n}\n\nful-radio-group > fieldset > section {\n  display: grid;\n  gap: 10px;\n  grid-template-columns: 1fr;\n}\n\nful-radio-group.horizontal > fieldset > section {\n  gap: 16px;\n  grid-template-columns: 1fr 1fr;\n}\n\nful-radio-group > fieldset input[type=radio] {\n  margin-left: 8px;\n  margin-right: 12px;\n  height: 16px;\n  width: 16px;\n  vertical-align: text-bottom;\n}\n\nful-radio-group > fieldset label:has(input[type=radio]) {\n  display: block;\n  border: 1px solid var(--ful-radio-group-label-border-color);\n  background-color: var(--ful-radio-group-label-background-color);\n  border-radius: 4px;\n  padding: 6px 10px;\n}\n\nful-radio-group > fieldset label:has(input[type=radio].is-invalid) {\n  border-color: var(--bs-form-invalid-border-color);\n}\n\nful-radio-group > fieldset label:has(input[type=radio]:checked) {\n  background-color: var(--ful-radio-group-label-background-color-checked);\n  border-color: var(--ful-radio-group-label-border-color-checked);\n}\n\nful-radio-group:has(.is-invalid) .invalid-feedback {\n  display: block;\n}","ful-spinner:not(:defined) {\n  visibility: hidden;\n}","ful-wizard:not(:defined) {\n  visibility: hidden;\n}\n\nful-wizard {\n  display: block;\n}\n\nful-wizard > ol > li.active {\n  display: block;\n}\n\nful-wizard > ol > li {\n  display: none;\n}\n\nful-wizard > section {\n  display: none;\n}\n\nful-wizard > section.current {\n  display: block;\n}"]}

package/dist/ful.iife.js

@@ -654,17 +654,19 @@ var ful = (function (exports) {
 
     class Slots {
         static from(el) {
-            const slotted = Object.fromEntries(Array.from(el.querySelectorAll("[slot]")).map(el => {
-                el.parentElement.removeChild(el);
-                const slot = el.getAttribute("slot");
-                el.removeAttribute("slot");
-                return [slot, el];
-            }));
+            const namedSlots = Array.from(el.childNodes)
+                .filter(el => el.matches('[slot]'))
+                .map(el => {
+                    el.remove();
+                    const slot = el.getAttribute("slot");
+                    el.removeAttribute("slot");
+                    return [slot, el];
+                });
+            const slotted = Object.fromEntries(namedSlots);
             slotted.default = new DocumentFragment();
             slotted.default.append(...el.childNodes);
             return slotted;
         }
-
     }
 
     const Templated = (SuperClass, template) => {
@@ -702,6 +704,7 @@ var ful = (function (exports) {
                             return this.hasAttribute(flag);
                         },
                         set(value) {
+                            //see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#using_double_dash_prefixed_idents
                             if (Attributes.asBoolean(value)) {
                                 this.internals_.states.add(`--${flag}`);
                                 this.setAttribute(flag, '');
@@ -925,9 +928,11 @@ var ful = (function (exports) {
         }
     }
 
-    const ful_input_ec = globalThis.ec || ftl.EvaluationContext.configure({});
+    const ful_input_ec = globalThis.ec || ftl.EvaluationContext.configure({
+
+    });
 
-    const ful_input_template = globalThis.template || ftl.Template.fromHtml(`
+    const ful_input_template_ = globalThis.ful_input_template || ftl.Template.fromHtml(`
     <div data-tpl-if="floating" class="input-group has-validation">
         <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
         <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
@@ -954,7 +959,7 @@ var ful = (function (exports) {
 
 
 
-    class Input extends Templated(HTMLElement, ful_input_template) {
+    class Input extends Templated(HTMLElement, ful_input_template_) {
         render(slotted, template) {
             const floating = this.hasAttribute('floating');
             const input = slotted.input = slotted.input || (() => {
@@ -979,9 +984,11 @@ var ful = (function (exports) {
      * <script src="tom-select.complete.js"></script>
      * <link href="tom-select.bootstrap5.css" rel="stylesheet" />
      */
-    const ful_select_ec = globalThis.ec || ftl.EvaluationContext.configure({});
+    const ful_select_ec = globalThis.ec || ftl.EvaluationContext.configure({
 
-    const ful_select_template = globalThis.template || ftl.Template.fromHtml(`
+    });
+
+    const ful_select_template_ = globalThis.ful_select_template || ftl.Template.fromHtml(`
     <div data-tpl-if="floating" class="input-group has-validation">
         <span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
         <div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
@@ -1007,7 +1014,7 @@ var ful = (function (exports) {
 `, ful_select_ec);
 
 
-    class Select extends Templated(Observable(HTMLElement), ful_select_template) {
+    class Select extends Templated(Observable(HTMLElement), ful_select_template_) {
         constructor(tsConfig) {
             super();
             this.tsConfig = tsConfig;
@@ -1069,6 +1076,53 @@ var ful = (function (exports) {
 
     }
 
+    const ful_radiogroup_ec = globalThis.ec || ftl.EvaluationContext.configure({
+
+    });
+
+    const ful_radiougroup_template_ = globalThis.ful_radiogroup_template || ftl.Template.fromHtml(`
+    <fieldset>
+        <legend class="form-label">
+            {{{{ slotted.default }}}}
+        </legend>
+        <section>
+            <label data-tpl-each="inputsAndLabels" data-tpl-var="ial">
+                {{{{ ial[0] }}}}
+                {{{{ ial[1] }}}}
+            </label>
+        </section>
+        <ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
+    </fieldset>
+`, ful_radiogroup_ec);
+
+
+    class RadioGroup extends Stateful(Templated(HTMLElement, ful_radiougroup_template_), ['readonly']) {
+        render(slotted, template) {        
+            const name = this.getAttribute('input-name') || Attributes.uid('ful-radiogroup');
+            const radioEls = Array.from(slotted.default.querySelectorAll('ful-radio'));
+            const inputsAndLabels = radioEls.map(el => {
+                const input = document.createElement('input');
+                input.setAttribute('type', 'radio');
+                Attributes.forward('input-', this, input);
+                Attributes.forward('', el, input);
+                Attributes.defaultValue(input, 'name', name);
+                const label = Fragments.fromChildNodes(el);
+                return [input, label];
+            });
+            radioEls.forEach(el => el.remove());
+            
+            const fragment = template.render({
+                name: name,
+                slotted: slotted,
+                inputsAndLabels: inputsAndLabels
+            });
+            return fragment;
+        }
+        static configure() {
+            customElements.define('ful-radio-group', RadioGroup);
+        }    
+    }
+
     class Spinner extends Templated(HTMLElement) {
         render(slotted, template) {
             return Fragments.fromHtml(`
@@ -1201,6 +1255,7 @@ var ful = (function (exports) {
     exports.Input = Input;
     exports.LocalStorage = LocalStorage;
     exports.Observable = Observable;
+    exports.RadioGroup = RadioGroup;
     exports.Select = Select;
     exports.SessionStorage = SessionStorage;
     exports.Slots = Slots;