@ekzo-dev/bootstrap-addons 5.2.16 → 5.2.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.16",
+  "version": "5.2.18",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,16 +9,20 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "^5.2.11",
+    "@ekzo-dev/bootstrap": "^5.2.18",
     "@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",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "vanilla-jsoneditor": "~0.23.0",
     "immutable-json-patch": "^5.1.3"
   },
+  "peerDependencies": {
+    "bootstrap": "^5.2.3"
+  },
   "main": "src/index.ts",
   "files": [
     "src"

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

@@ -0,0 +1,21 @@
+<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>
+  <label for="${id}" if.bind="label && floatingLabel"><span>${label}</span></label>
+  <div class="invalid-feedback" if.bind="invalidFeedback">${invalidFeedback}</div>
+  <div class="valid-feedback" if.bind="validFeedback">${validFeedback}</div>
+</template>

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

@@ -0,0 +1,46 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/forms/form-control';
+
+bs-duration-input {
+  display: block;
+
+  fieldset {
+    position: relative;
+  }
+
+  input[type='number'] {
+    border: 0;
+    min-inline-size: 2ch;
+    appearance: textfield;
+    outline: 0;
+    text-align: right;
+    field-sizing: content;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+  }
+
+  input[required] {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+@supports not (field-sizing: content) {
+  bs-duration-input {
+    input[type='number'] {
+      inline-size: 3ch;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import { BsButton } from '@ekzo-dev/bootstrap';
+import { createComponentTemplate, Meta, Story, StoryFnAureliaReturnType } from '@storybook/aurelia';
+
+import { selectControl } from '../../../../../.storybook/helpers';
+
+import { BsDurationInput } from '.';
+
+const meta: Meta = {
+  title: 'Ekzo / Bootstrap Addons / Forms / Duration input',
+  component: BsDurationInput,
+  args: {
+    value: 'P5DT1H',
+    label: 'Duration',
+  },
+  argTypes: {
+    bsSize: selectControl(['', 'sm', 'lg']),
+  },
+};
+
+export default meta;
+
+const Overview: Story = (args): StoryFnAureliaReturnType => ({
+  props: args,
+});
+
+const Validation: Story = (args): StoryFnAureliaReturnType => ({
+  props: args,
+  template: `<form class='was-validated'>${createComponentTemplate(
+    BsDurationInput
+  )}<br><button bs-button>Validate</button></form>`,
+  components: [BsButton],
+});
+
+Validation.args = {
+  required: true,
+  floatingLabel: true,
+};
+
+// eslint-disable-next-line
+export { Overview, Validation };

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

@@ -0,0 +1,95 @@
+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 { bindable, BindingMode, customElement } from 'aurelia';
+
+interface IDuration {
+  years?: string;
+  months?: string;
+  days?: string;
+  hours?: string;
+  minutes?: string;
+  seconds?: string;
+}
+
+@customElement({
+  name: 'bs-duration-input',
+  template,
+})
+export class BsDurationInput extends BaseField {
+  @bindable({ mode: BindingMode.twoWay })
+  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 : ''}` : '';
+  }
+  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 = {};
+    }
+  }
+
+  @bindable()
+  bsSize?: Size;
+
+  @bindable(coerceBoolean)
+  floatingLabel: boolean = false;
+
+  duration: IDuration = {};
+
+  labels: IDuration = this.#getLabels();
+
+  get classes(): string {
+    return [
+      'form-control',
+      this.bsSize ? `form-control-${this.bsSize}` : null,
+      this.valid === true ? 'is-valid' : null,
+      this.valid === false ? 'is-invalid' : null,
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  #getLabels(): IDuration {
+    const str: string = new Intl['DurationFormat'](navigator.language, { style: 'narrow' }).format({
+      years: 1,
+      months: 1,
+      days: 1,
+      hours: 1,
+      minutes: 1,
+      seconds: 1,
+    });
+    const labels: string[] = str
+      .split('1')
+      .slice(1)
+      .map((n) => n.trim());
+
+    return {
+      years: labels[0],
+      months: labels[1],
+      days: labels[2],
+      hours: labels[3],
+      minutes: labels[4],
+      seconds: labels[5],
+    };
+  }
+}

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

@@ -0,0 +1 @@
+export * from './duration-input';

package/src/forms/select/select.html

@@ -34,7 +34,7 @@
       form.bind="form & attr"
       name.bind="name & attr"
       title.bind="title & attr"
-      autocomplete.bind="autocomplete & attr"
+      autocomplete="off"
       keydown.trigger="$event.preventDefault()"
     />
     <bs-dropdown-menu>

package/src/forms/select/select.ts

@@ -34,6 +34,7 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   deactivating: boolean = false;
 
   binding() {
+    super.binding();
     this.deactivating = false;
   }
 

package/src/index.ts

@@ -1,2 +1,3 @@
+export * from './forms/duration-input';
 export * from './forms/json-input';
 export * from './forms/select';