@ekzo-dev/bootstrap-addons 5.2.28 → 5.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.28",
+  "version": "5.3.0",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,20 +9,20 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "^5.2.20",
+    "@ekzo-dev/bootstrap": "^5.3.0",
     "@ekzo-dev/vanilla-jsoneditor": "^0.23.7",
     "@ekzo-dev/toolkit": "^1.2.4",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@types/json-schema": "^7.0.14",
-    "@formatjs/intl-durationformat": "^0.7.1",
+    "@js-temporal/polyfill": "^0.5.1",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "vanilla-jsoneditor": "~0.23.0",
     "immutable-json-patch": "^5.1.3"
   },
   "peerDependencies": {
-    "aurelia": "^2.0.0-beta.8",
-    "bootstrap": "^5.2.3",
+    "aurelia": "^2.0.0-beta.25",
+    "bootstrap": "~5.3.7",
     "@popperjs/core": "^2.11.8"
   },
   "main": "src/index.ts",

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

@@ -9,7 +9,7 @@ const meta: Meta = {
   title: 'Ekzo / Bootstrap Addons / Forms / Duration input',
   component: BsDurationInput,
   args: {
-    value: 'P5DT1H',
+    value: 'P5DT1Hasds',
     label: 'Duration',
   },
   argTypes: {
@@ -27,7 +27,7 @@ const Validation: Story = (args): StoryFnAureliaReturnType => ({
   props: args,
   template: `<form class='was-validated'>${createComponentTemplate(
     BsDurationInput
-  )}<br><button bs-button>Validate</button></form>`,
+  )}<br>\${value} <button bs-button>Validate</button></form>`,
   components: [BsButton],
 });
 

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

@@ -2,20 +2,15 @@ import template from './duration-input.html';
 
 import './duration-input.scss';
 
-import '@formatjs/intl-durationformat/polyfill';
-
 import { BaseField, Size } from '@ekzo-dev/bootstrap';
 import { coerceBoolean } from '@ekzo-dev/toolkit';
+import { Temporal } from '@js-temporal/polyfill';
 import { bindable, BindingMode, customElement, resolve } from 'aurelia';
 
-interface IDuration {
-  years?: string;
-  months?: string;
-  days?: string;
-  hours?: string;
-  minutes?: string;
-  seconds?: string;
-}
+type Duration = Partial<Pick<Temporal.Duration, 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds'>>;
+type DurationLabels = {
+  [K in keyof Duration]: string;
+};
 
 /**
  * https://github.com/whatwg/html/issues/5488
@@ -30,13 +25,18 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
   get value(): string {
     const { years, months, days, hours, minutes, seconds } = this.duration;
 
-    const date = `${years ? years + 'Y' : ''}${months ? months + 'M' : ''}${days ? days + 'D' : ''}`;
-    const time = `${hours ? hours + 'H' : ''}${minutes ? minutes + 'M' : ''}${seconds ? seconds + 'S' : ''}`;
-
-    return date || time ? `P${date}${time ? 'T' + time : ''}` : '';
+    return Temporal.Duration.from({
+      // at least one field must be present for correct formatting
+      years: years ?? 0,
+      months,
+      days,
+      hours,
+      minutes,
+      seconds,
+    }).toString();
   }
   set value(value: string | null | undefined) {
-    this.parseDuration(value);
+    this._parseDuration(value);
   }
 
   @bindable()
@@ -47,9 +47,9 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
 
   readonly host = resolve(HTMLElement);
 
-  duration: IDuration = {};
+  duration!: Duration;
 
-  labels: IDuration = this.#getLabels();
+  labels: DurationLabels = this.#getLabels();
 
   controls!: NodeListOf<HTMLInputElement>;
 
@@ -89,7 +89,7 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
 
     // allow pasting full duration value, e.g. P2YT2H
     if (event instanceof ClipboardEvent && data.startsWith('P')) {
-      this.parseDuration(data);
+      this._parseDuration(data);
     }
   }
 
@@ -97,24 +97,29 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
     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)?)?$/);
+  private _parseDuration(value: string) {
+    try {
+      const duration = Temporal.Duration.from(value);
 
-    if (match) {
       this.duration = {
-        years: match[1],
-        months: match[2],
-        days: match[3],
-        hours: match[4],
-        minutes: match[5],
-        seconds: match[6],
+        years: duration.years,
+        months: duration.months,
+        days: duration.days,
+        hours: duration.hours,
+        minutes: duration.minutes,
+        seconds: duration.seconds,
       };
-    } else {
-      this.duration = {};
+    } catch (error) {
+      if (error instanceof RangeError) {
+        console.warn(`[bs-duration-input] ${error.message}`);
+        this.duration = {};
+      } else {
+        throw error;
+      }
     }
   }
 
-  #getLabels(): IDuration {
+  #getLabels(): DurationLabels {
     const str: string = new Intl['DurationFormat'](navigator.language, { style: 'narrow' }).format({
       years: 1,
       months: 1,

package/src/forms/select/select.ts

@@ -84,9 +84,13 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   }
 
   get valueText(): string {
-    // if (this.multiple) {
-    //
-    // }
+    if (this.multiple) {
+      const { options, value } = this;
+
+      return (value as [])
+        .map((val) => (options as ISelectOption[]).find((option) => option.value === val).text)
+        .join(', ');
+    }
 
     const { selectedOption, emptyOption } = this;
 
@@ -134,19 +138,20 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
 
     const isEntries = Array.isArray(options[0]);
     let option = (options as Array<ISelectOption | readonly [unknown, string]>).find((option) => {
-      const currentValue: unknown = isEntries ? option[0] : (option as ISelectOption).value;
+      const optionValue: unknown = isEntries ? option[0] : (option as ISelectOption).value;
 
-      if (currentValue == emptyValue) {
+      if (optionValue == emptyValue) {
         emptyOption = {
-          value: currentValue,
-          text: isEntries ? option[1] : (option as ISelectOption).text,
+          value: optionValue,
+          text: isEntries ? (option[1] as string) : (option as ISelectOption).text,
         } as ISelectOption;
       }
 
-      return matcher ? matcher(value, currentValue) : value === currentValue;
+      return matcher ? matcher(value, optionValue) : value === optionValue;
     });
 
-    option = isEntries && option !== undefined ? { value: option[0], text: option[1] } : (option as ISelectOption);
+    option =
+      isEntries && option !== undefined ? { value: option[0], text: option[1] as string } : (option as ISelectOption);
 
     // update value next tick
     const foundValue = option?.value;