@optionfactory/ful 1.0.4 → 1.0.6

package/dist/ful.mjs

@@ -1399,7 +1399,8 @@ class Input extends ParsedElement {
         <div class="input-group">
             <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
             {{{{ slots.before }}}}
-            <input class="form-control" data-tpl-id="id" type="text" placeholder=" " data-tpl-aria-describedby="fieldErrorId" form="">
+            <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>
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
@@ -1415,9 +1416,9 @@ class Input extends ParsedElement {
     render({ slots }) {
         const id = Attributes.uid('ful-input');
         const fieldErrorId = `${id}-error`;
-        
-        const fragment = this.template().withOverlay({ id, fieldErrorId, slots }).render();    
-        this.#input = fragment.querySelector("input");
+        const type = this.getAttribute("type") ?? 'text';
+        const fragment = this.template().withOverlay({ id, type, fieldErrorId, slots }).render();    
+        this.#input = fragment.querySelector("input,textarea");
         Attributes.forward('input-', this, this.#input);
         this.#input.addEventListener('change', (evt) => {
             evt.stopPropagation();
@@ -1849,6 +1850,7 @@ class RadioGroup extends ParsedElement {
     static formAssociated = true;
     #fieldError;
     #firstRadio;
+    #booleanType;
     constructor() {
         super();
         this.internals = this.attachInternals();
@@ -1883,11 +1885,12 @@ class RadioGroup extends ParsedElement {
         this.template().withOverlay({ name, fieldErrorId, slots, inputsAndLabels }).renderTo(this);
         this.#fieldError = this.querySelector('ful-field-error');
         this.#firstRadio = this.querySelector('input[type=radio]');
+        this.#booleanType = this.getAttribute('type') === 'boolean';
     }
     get value() {
         /** @type {HTMLInputElement|null} */
         const checked = this.querySelector('input[type=radio]:checked');
-        return checked ? checked.value : null;
+        return checked ? (this.#booleanType ? (checked.value === 'true') : checked.value) : null;
     }
     set value(value) {
         if (value === null) {
@@ -1897,7 +1900,7 @@ class RadioGroup extends ParsedElement {
             return;
         }
         /** @type {HTMLInputElement|null} */
-        const el = this.querySelector(`input[type=radio][value=${CSS.escape(value)}]`);
+        const el = this.querySelector(`input[type=radio][value=${CSS.escape(String(value))}]`);
         if (el) {
             el.checked = true;
         }
@@ -1921,7 +1924,9 @@ class Checkbox extends ParsedElement {
     static slots = true;
     static template = `
         <div data-tpl-class="klass">
-            <input dat-tpl-id="id" class="form-check-input" type="checkbox" role="switch" form="" placeholder=" " data-tpl-aria-describedby="fieldErrorId">
+            <div class="input-container">
+                <input data-tpl-id="id" class="form-check-input" type="checkbox" role="switch" form="" placeholder=" " data-tpl-aria-describedby="fieldErrorId">
+            </div>
             <label data-tpl-for="id" class="form-check-label">{{{{ slots.default }}}}</label>
         </div>
         <ful-field-error data-tpl-if="fieldErrorId"></ful-field-error>