@ekzo-dev/bootstrap-addons 5.3.12 → 5.3.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.3.12",
+  "version": "5.3.13",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "~5.3.0",
+    "@ekzo-dev/bootstrap": "~5.3.3",
     "@ekzo-dev/vanilla-jsoneditor": "~3.11.0",
     "@ekzo-dev/toolkit": "^1.2.4",
     "@fortawesome/free-solid-svg-icons": "^7.0.1",

package/src/forms/duration-input/duration-input.html

@@ -1,9 +1,9 @@
 <template class="${floatingLabel ? 'form-floating' : ''}">
-  <label for="${id}" if.bind="label && !floatingLabel" class="form-label">${label}</label>
+  <label for.one-time="id" if.bind="label && !floatingLabel" class="form-label">${label}</label>
   <fieldset class="${classes}" disabled.bind="disabled">
     <input
       type="text"
-      id="${id}"
+      id.one-time="id"
       required.bind="required"
       value.bind="value"
       form.bind="form & attr"
@@ -22,7 +22,7 @@
     <input type="number" min="0" value.bind="duration.seconds" placeholder="--" />
     <span>${labels.seconds}</span>
   </fieldset>
-  <label for="${id}" if.bind="label && floatingLabel"><span>${label}</span></label>
+  <label for.one-time="id" if.bind="label && floatingLabel"><span>${label}</span></label>
   <div class="invalid-feedback" if.bind="invalidFeedback">${invalidFeedback}</div>
   <div class="valid-feedback" if.bind="validFeedback">${validFeedback}</div>
 </template>

package/src/forms/select/select.html

@@ -1,16 +1,11 @@
 <template class="addon ${floatingLabel ? 'form-floating' : ''}" bs-dropdown>
-  <label for="${id}" if.bind="label && !floatingLabel" class="form-label">${label}</label>
+  <label for.one-time="id" if.bind="label && !floatingLabel" class="form-label">${label}</label>
   <input
-    id="${id}"
+    id.one-time="id"
     class="form-select ${bsSize ? `form-select-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
     bs-dropdown-toggle="arrow.bind: false"
     value="${valueText}"
     placeholder="${emptyOption?.text ?? ''}"
-    disabled.bind="disabled"
-    required.bind="required"
-    form.bind="form & attr"
-    name.bind="name & attr"
-    title.bind="title & attr"
     autocomplete="off"
     keydown.trigger="$event.preventDefault()"
     ref="control"
@@ -33,12 +28,12 @@
             class="form-check-input"
             type="checkbox"
             checked.bind="value"
-            model.bind="option.value"
-            disabled.bind="option.disabled"
             matcher.bind="matcher"
-            id="${optionId($index)}"
+            model.one-time="option.value"
+            disabled.one-time="option.disabled"
+            id.one-time="optionId($index)"
           />
-          <label class="form-check-label" for="${optionId($index)}">${option.text || '&nbsp;'}</label>
+          <label class="form-check-label" for.one-time="optionId($index)">${option.text || '&nbsp;'}</label>
         </div>
       </div>
       <template repeat.for="[k, v] of groupedOptions | filter:filter">
@@ -49,12 +44,14 @@
               class="form-check-input"
               type="checkbox"
               checked.bind="value"
-              model.bind="option.value"
-              disabled.bind="option.disabled"
               matcher.bind="matcher"
-              id="${optionId($index, $parent.$index)}"
+              model.one-time="option.value"
+              disabled.one-time="option.disabled"
+              id.one-time="optionId($index, $parent.$index)"
             />
-            <label class="form-check-label" for="${optionId($index, $parent.$index)}">${option.text || '&nbsp;'}</label>
+            <label class="form-check-label" for.one-time="optionId($index, $parent.$index)"
+              >${option.text || '&nbsp;'}</label
+            >
           </div>
         </div>
       </template>
@@ -64,7 +61,7 @@
         type="button"
         repeat.for="option of ungroupedOptions | filter:filter:emptyOption"
         class="dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
-        disabled.bind="option.disabled"
+        disabled.one-time="option.disabled"
         click.trigger="selectOption(option)"
       >
         ${option.text || '&nbsp;'}
@@ -75,7 +72,7 @@
           type="button"
           repeat.for="option of v"
           class="ps-4 dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
-          disabled.bind="option.disabled"
+          disabled.one-time="option.disabled"
           click.trigger="selectOption(option)"
         >
           ${option.text || '&nbsp;'}
@@ -83,7 +80,7 @@
       </template>
     </template>
   </bs-dropdown-menu>
-  <label for="${id}" if.bind="label && floatingLabel"><span>${label}</span></label>
+  <label for.one-time="id" if.bind="label && floatingLabel"><span>${label}</span></label>
   <div class="invalid-feedback" if.bind="invalidFeedback">${invalidFeedback}</div>
   <div class="valid-feedback" if.bind="validFeedback">${validFeedback}</div>
 </template>

package/src/forms/select/select.ts

@@ -29,8 +29,6 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
 
   host = resolve(HTMLElement);
 
-  control!: HTMLFieldSetElement;
-
   filter: string = '';
 
   emptyOption?: ISelectOption;
@@ -97,8 +95,6 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   }
 
   get showClear(): boolean {
-    console.warn(`BsSelect #${this.id}: get showClear`);
-
     return (
       !this.disabled &&
       ((this.emptyOption && this.selectedOption?.value !== this.emptyOption.value) ||
@@ -126,7 +122,6 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   }
 
   get selectedOption(): ISelectOption | undefined {
-    console.warn(`BsSelect #${this.id}: get selectedOption`);
     if (this.multiple) return;
 
     const { value, emptyValue, matcher } = this;