@ekzo-dev/bootstrap-addons 5.2.19 → 5.2.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.19",
+  "version": "5.2.20",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",

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

@@ -1,19 +1,26 @@
 <template class="${floatingLabel ? 'form-floating' : ''}">
   <label for="${id}" if.bind="label && !floatingLabel" class="form-label">${label}</label>
-  <fieldset class="${classes}" id="${id}" disabled.bind="disabled">
-    <input type="number" min="0" value.bind="duration.years" disabled.bind="disabled" placeholder="--" />
-    ${labels.years}
-    <input type="number" min="0" value.bind="duration.months" disabled.bind="disabled" placeholder="--" />
-    ${labels.months}
-    <input type="number" min="0" value.bind="duration.days" disabled.bind="disabled" placeholder="--" />
-    ${labels.days}
-    <input type="number" min="0" value.bind="duration.hours" disabled.bind="disabled" placeholder="--" />
-    ${labels.hours}
-    <input type="number" min="0" value.bind="duration.minutes" disabled.bind="disabled" placeholder="--" />
-    ${labels.minutes}
-    <input type="number" min="0" value.bind="duration.seconds" disabled.bind="disabled" placeholder="--" />
-    ${labels.seconds}
-    <input if.bind="required" required value.bind="value" />
+  <fieldset class="${classes}" disabled.bind="disabled">
+    <input
+      type="text"
+      id="${id}"
+      required.bind="required"
+      value.bind="value"
+      form.bind="form & attr"
+      focus.trigger="focus()"
+    />
+    <input type="number" min="0" value.bind="duration.years" placeholder="--" />
+    <span>${labels.years}</span>
+    <input type="number" min="0" value.bind="duration.months" placeholder="--" />
+    <span>${labels.months}</span>
+    <input type="number" min="0" value.bind="duration.days" placeholder="--" />
+    <span>${labels.days}</span>
+    <input type="number" min="0" value.bind="duration.hours" placeholder="--" />
+    <span>${labels.hours}</span>
+    <input type="number" min="0" value.bind="duration.minutes" placeholder="--" />
+    <span>${labels.minutes}</span>
+    <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>
   <div class="invalid-feedback" if.bind="invalidFeedback">${invalidFeedback}</div>

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

@@ -24,6 +24,10 @@ bs-duration-input {
         box-shadow: $input-focus-box-shadow;
       }
     }
+
+    span {
+      user-select: none;
+    }
   }
 
   input[type='number'] {
@@ -33,6 +37,7 @@ bs-duration-input {
     outline: 0;
     text-align: right;
     field-sizing: content;
+    background: transparent;
 
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
@@ -41,7 +46,7 @@ bs-duration-input {
     }
   }
 
-  input[required] {
+  input[type='text'] {
     position: absolute;
     height: 100%;
     width: 100%;

package/src/forms/duration-input/duration-input.stories.ts

@@ -33,7 +33,6 @@ const Validation: Story = (args): StoryFnAureliaReturnType => ({
 
 Validation.args = {
   required: true,
-  floatingLabel: true,
 };
 
 // eslint-disable-next-line

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

@@ -89,6 +89,10 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
     }
   }
 
+  focus() {
+    this.controls.item(0).focus();
+  }
+
   private parseDuration(value: string) {
     const match = value?.match(/^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/);