@ekzo-dev/bootstrap-addons 5.2.18 → 5.2.20

package/package.json

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

@@ -9,6 +9,25 @@ bs-duration-input {
 
   fieldset {
     position: relative;
+
+    // Customize the `:focus` state to imitate native WebKit styles.
+    &:focus-within {
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
+      border-color: $input-focus-border-color;
+      outline: 0;
+
+      @if $enable-shadows {
+        @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $input-focus-box-shadow;
+      }
+    }
+
+    span {
+      user-select: none;
+    }
   }
 
   input[type='number'] {
@@ -18,6 +37,7 @@ bs-duration-input {
     outline: 0;
     text-align: right;
     field-sizing: content;
+    background: transparent;
 
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
@@ -26,7 +46,7 @@ bs-duration-input {
     }
   }
 
-  input[required] {
+  input[type='text'] {
     position: absolute;
     height: 100%;
     width: 100%;
@@ -37,6 +57,18 @@ bs-duration-input {
   }
 }
 
+.was-validated bs-duration-input {
+  .form-control:invalid:focus-within,
+  .form-control.is-invalid:focus-within {
+    box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
+  }
+
+  .form-control:valid:focus-within,
+  .form-control.is-valid:focus-within {
+    box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
+  }
+}
+
 @supports not (field-sizing: content) {
   bs-duration-input {
     input[type='number'] {

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

@@ -6,7 +6,7 @@ import '@formatjs/intl-durationformat/polyfill';
 
 import { BaseField, Size } from '@ekzo-dev/bootstrap';
 import { coerceBoolean } from '@ekzo-dev/toolkit';
-import { bindable, BindingMode, customElement } from 'aurelia';
+import { bindable, BindingMode, customElement, resolve } from 'aurelia';
 
 interface IDuration {
   years?: string;
@@ -21,7 +21,7 @@ interface IDuration {
   name: 'bs-duration-input',
   template,
 })
-export class BsDurationInput extends BaseField {
+export class BsDurationInput extends BaseField implements EventListenerObject {
   @bindable({ mode: BindingMode.twoWay })
   get value(): string {
     const { years, months, days, hours, minutes, seconds } = this.duration;
@@ -32,20 +32,7 @@ export class BsDurationInput extends BaseField {
     return date || time ? `P${date}${time ? 'T' + time : ''}` : '';
   }
   set value(value: string | null | undefined) {
-    const match = value?.match(/^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/);
-
-    if (match) {
-      this.duration = {
-        years: match[1],
-        months: match[2],
-        days: match[3],
-        hours: match[4],
-        minutes: match[5],
-        seconds: match[6],
-      };
-    } else {
-      this.duration = {};
-    }
+    this.parseDuration(value);
   }
 
   @bindable()
@@ -54,10 +41,14 @@ export class BsDurationInput extends BaseField {
   @bindable(coerceBoolean)
   floatingLabel: boolean = false;
 
+  readonly host = resolve(HTMLElement);
+
   duration: IDuration = {};
 
   labels: IDuration = this.#getLabels();
 
+  controls!: NodeListOf<HTMLInputElement>;
+
   get classes(): string {
     return [
       'form-control',
@@ -69,6 +60,56 @@ export class BsDurationInput extends BaseField {
       .join(' ');
   }
 
+  attaching() {
+    this.controls = this.host.querySelectorAll('input[type=number]');
+    this.controls.forEach((control) => {
+      control.addEventListener('keypress', this);
+      control.addEventListener('paste', this);
+    });
+  }
+
+  detached() {
+    this.controls.forEach((control) => {
+      control.removeEventListener('keypress', this);
+      control.removeEventListener('paste', this);
+    });
+  }
+
+  handleEvent(event: KeyboardEvent | ClipboardEvent): void {
+    const data = event instanceof KeyboardEvent ? event.key : event.clipboardData.getData('text');
+
+    // don't allow non-numeric values
+    if (!/^\d+$/.test(data)) {
+      event.preventDefault();
+    }
+
+    // allow pasting full duration value, e.g. P2YT2H
+    if (event instanceof ClipboardEvent && data.startsWith('P')) {
+      this.parseDuration(data);
+    }
+  }
+
+  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)?)?$/);
+
+    if (match) {
+      this.duration = {
+        years: match[1],
+        months: match[2],
+        days: match[3],
+        hours: match[4],
+        minutes: match[5],
+        seconds: match[6],
+      };
+    } else {
+      this.duration = {};
+    }
+  }
+
   #getLabels(): IDuration {
     const str: string = new Intl['DurationFormat'](navigator.language, { style: 'narrow' }).format({
       years: 1,