@ekzo-dev/bootstrap-addons 5.2.19 → 5.2.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.19",
+  "version": "5.2.21",
   "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

@@ -17,6 +17,10 @@ interface IDuration {
   seconds?: string;
 }
 
+/**
+ * https://github.com/whatwg/html/issues/5488
+ * https://github.com/tc39/proposal-intl-duration-format
+ */
 @customElement({
   name: 'bs-duration-input',
   template,
@@ -89,6 +93,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)?)?$/);
 

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

@@ -190,9 +190,16 @@ export class BsJsonInput {
   }
 
   #initAjv($schema: string, ajvOptions: Options): Ajv {
+    const regExp = (pattern: string) => new RegExp(pattern, 'v');
+
+    regExp.code = 'regexp';
+
     const options: Options = {
       strict: false,
       multipleOfPrecision: 2,
+      code: {
+        regExp,
+      },
       ...ajvOptions,
     };
     let ajv: Ajv;