@ekzo-dev/bootstrap-addons 5.2.17 → 5.2.19

package/package.json

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

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

@@ -9,6 +9,21 @@ 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;
+      }
+    }
   }
 
   input[type='number'] {
@@ -37,6 +52,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.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;
@@ -31,21 +31,8 @@ export class BsDurationInput extends BaseField {
 
     return date || time ? `P${date}${time ? 'T' + time : ''}` : '';
   }
-  set value(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 = {};
-    }
+  set value(value: string | null | undefined) {
+    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,52 @@ 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);
+    }
+  }
+
+  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,