@ekzo-dev/bootstrap-addons 5.3.20 → 5.3.21

package/package.json

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

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

@@ -1,39 +1,39 @@
-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: 'P5DT1Hasds',
-    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>\${value} <button bs-button>Validate</button></form>`,
-  components: [BsButton],
-});
-
-Validation.args = {
-  required: true,
-};
-
-// eslint-disable-next-line
-export { Overview, Validation };
+// 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: 'P5DT1Hasds',
+//     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>\${value} <button bs-button>Validate</button></form>`,
+//   components: [BsButton],
+// });
+//
+// Validation.args = {
+//   required: true,
+// };
+//
+// // eslint-disable-next-line
+// export { Overview, Validation };

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

@@ -7,12 +7,17 @@ import { coerceBoolean } from '@ekzo-dev/toolkit';
 import { Temporal } from '@js-temporal/polyfill';
 import { bindable, BindingMode, customElement } from 'aurelia';
 
-type Duration = Partial<Pick<Temporal.Duration, 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds'>>;
+type Writable<T> = {
+  -readonly [P in keyof T]: T[P];
+};
+type Duration = Writable<
+  Partial<Pick<Temporal.Duration, 'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds'>>
+>;
 type DurationLabels = {
   [K in keyof Duration]: string;
 };
 
-const durationKeys = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'] as const;
+const durationKeys: (keyof Duration)[] = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'] as const;
 
 /**
  * https://github.com/whatwg/html/issues/5488
@@ -81,7 +86,7 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
   }
 
   handleEvent(event: KeyboardEvent | ClipboardEvent): void {
-    const data = event instanceof KeyboardEvent ? event.key : event.clipboardData.getData('text');
+    const data = event instanceof KeyboardEvent ? event.key : event.clipboardData!.getData('text');
 
     // don't allow non-numeric values
     if (!/^\d+$/.test(data)) {
@@ -101,10 +106,10 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
   private _parseDuration(value: string) {
     try {
       const duration = Temporal.Duration.from(value);
-      const result = {};
+      const result: Duration = {};
 
       durationKeys.forEach((key) => {
-        result[key] = duration[key] ? duration[key].toString() : '';
+        result[key] = duration[key] ? duration[key] : undefined;
       });
       this.duration = result;
     } catch (error) {
@@ -118,6 +123,7 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
   }
 
   #getLabels(): DurationLabels {
+    // @ts-ignore
     const str: string = new Intl['DurationFormat'](navigator.language, { style: 'narrow' }).format({
       years: 1,
       months: 1,

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

@@ -1,59 +1,59 @@
-import { Meta, Story, StoryFnAureliaReturnType } from '@storybook/aurelia';
-
-import { BsJsonInput } from '.';
-
-const meta: Meta = {
-  title: 'Ekzo / Bootstrap Addons / Forms / Json input',
-  component: BsJsonInput,
-};
-
-export default meta;
-
-const Overview: Story = (args): StoryFnAureliaReturnType => ({
-  props: args,
-});
-
-Overview.args = {
-  jsonSchema: {
-    $schema: 'https://json-schema.org/draft/2020-12/schema',
-    type: 'object',
-    properties: {
-      enum: {
-        type: 'string',
-        enum: ['1', '2', '3'],
-      },
-      boolean: {
-        type: 'boolean',
-      },
-      email: {
-        type: 'string',
-        format: 'email',
-      },
-      number: {
-        type: 'number',
-        multipleOf: 0.0001,
-      },
-    },
-    required: ['enum'],
-  },
-  value: {
-    number: 1.11,
-    enum: '1',
-  },
-};
-
-const JsonSchemaEditor: Story = (args): StoryFnAureliaReturnType => ({
-  props: args,
-});
-
-JsonSchemaEditor.args = {
-  jsonSchema: true,
-  value: {
-    $schema: 'http://json-schema.org/draft-07/schema#',
-    type: 'object',
-    properties: {},
-  },
-};
-
-// eslint-disable-next-line
-export { Overview, JsonSchemaEditor };
+// import { Meta, Story, StoryFnAureliaReturnType } from '@storybook/aurelia';
+//
+// import { BsJsonInput } from '.';
+//
+// const meta: Meta = {
+//   title: 'Ekzo / Bootstrap Addons / Forms / Json input',
+//   component: BsJsonInput,
+// };
+//
+// export default meta;
+//
+// const Overview: Story = (args): StoryFnAureliaReturnType => ({
+//   props: args,
+// });
+//
+// Overview.args = {
+//   jsonSchema: {
+//     $schema: 'https://json-schema.org/draft/2020-12/schema',
+//     type: 'object',
+//     properties: {
+//       enum: {
+//         type: 'string',
+//         enum: ['1', '2', '3'],
+//       },
+//       boolean: {
+//         type: 'boolean',
+//       },
+//       email: {
+//         type: 'string',
+//         format: 'email',
+//       },
+//       number: {
+//         type: 'number',
+//         multipleOf: 0.0001,
+//       },
+//     },
+//     required: ['enum'],
+//   },
+//   value: {
+//     number: 1.11,
+//     enum: '1',
+//   },
+// };
+//
+// const JsonSchemaEditor: Story = (args): StoryFnAureliaReturnType => ({
+//   props: args,
+// });
+//
+// JsonSchemaEditor.args = {
+//   jsonSchema: true,
+//   value: {
+//     $schema: 'http://json-schema.org/draft-07/schema#',
+//     type: 'object',
+//     properties: {},
+//   },
+// };
+//
+// // eslint-disable-next-line
+// export { Overview, JsonSchemaEditor };

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

@@ -21,7 +21,7 @@ import { ProxyObservable } from '@aurelia/runtime';
 import { coerceBoolean } from '@ekzo-dev/toolkit';
 import { JsonEditor } from '@ekzo-dev/vanilla-jsoneditor';
 import { faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons/faUpRightAndDownLeftFromCenter';
-import Ajv, { ErrorObject, Options } from 'ajv';
+import Ajv, { type AnySchema, type ErrorObject, type Options } from 'ajv';
 import Ajv2019 from 'ajv/dist/2019';
 import Ajv2020 from 'ajv/dist/2020';
 import addFormats from 'ajv-formats';
@@ -49,7 +49,7 @@ export class BsJsonInput {
   @bindable(coerceBoolean)
   disabled: boolean = false;
 
-  @bindable({ set: (v: BsJsonInput['jsonSchema'] | string) => (v === '' || v === true || v === 'true' ? true : v) })
+  @bindable({ set: (v: unknown) => (v === '' || v === true || v === 'true' ? true : v) })
   jsonSchema?: JSONSchema | SchemaNode | boolean;
 
   @bindable()
@@ -77,7 +77,7 @@ export class BsJsonInput {
   }
 
   onRenderValue = (props: RenderValueProps): RenderValueComponentDescription[] => {
-    let result: RenderValueComponentDescription[] | null;
+    // let result: RenderValueComponentDescription[] | null;
     // const { jsonSchema } = this;
     const { editorModule } = this.editorComponent;
 
@@ -86,7 +86,7 @@ export class BsJsonInput {
     //   result = editorModule.renderJSONSchemaEnum(props, jsonSchema, this.#getSchemaDefinitions(jsonSchema));
     // }
 
-    return result ?? editorModule.renderValue(props);
+    return editorModule!.renderValue(props);
   };
 
   onRenderMenu = (items: MenuItem[]): MenuItem[] | undefined => {
@@ -140,12 +140,12 @@ export class BsJsonInput {
     return this.required && (this.value == null || this.value === '');
   }
 
-  get schemaVersion(): string {
+  get schemaVersion(): string | undefined {
     if (this.jsonSchema !== true) return undefined;
 
-    const { value } = this;
+    const value = this.value as JSONSchema;
 
-    return value == null || value['$schema'] == null ? '' : (value['$schema'] as string);
+    return value == null || value.$schema == null ? '' : (value.$schema as string);
   }
 
   get validator(): Validator | undefined {
@@ -172,7 +172,7 @@ export class BsJsonInput {
         // do not validate empty documents
         if (json === undefined) return [];
 
-        void ajv.validateSchema(json);
+        void ajv.validateSchema(json as AnySchema);
 
         return rawThis.#processErrorsAjv(ajv.errors, json);
       };
@@ -244,7 +244,7 @@ export class BsJsonInput {
     return (schema.$defs ?? schema.definitions) as JSONSchemaDefinitions;
   }
 
-  #processErrorsAjv(errors: ErrorObject[] | null, json: unknown): ValidationError[] {
+  #processErrorsAjv(errors: ErrorObject[] | null | undefined, json: unknown): ValidationError[] {
     const message = this.jsonSchema === true ? 'JSON is not a valid JSONSchema' : 'JSON does not match schema';
 
     this.input.setCustomValidity(errors?.length ? message : '');

package/src/forms/select-dropdown/select-dropdown.ts

@@ -58,7 +58,7 @@ export class BsSelectDropdown extends BsSelect implements ICustomElementViewMode
   setPopperConfig() {
     const { host } = this;
     const parentModal = host.closest('.modal-body,.popover-body,.offcanvas-body');
-    const dropdownMenu: HTMLElement = host.querySelector('.dropdown-menu');
+    const dropdownMenu: HTMLElement = host.querySelector('.dropdown-menu')!;
 
     if (parentModal != null) {
       this.popperConfig = {
@@ -67,7 +67,7 @@ export class BsSelectDropdown extends BsSelect implements ICustomElementViewMode
       dropdownMenu.style.minWidth = `${host.offsetWidth}px`;
     } else {
       this.popperConfig = null;
-      dropdownMenu.style.minWidth = undefined;
+      dropdownMenu.style.minWidth = '';
     }
   }
 
@@ -75,8 +75,8 @@ export class BsSelectDropdown extends BsSelect implements ICustomElementViewMode
     return `${this.id}${parentIndex != null ? '-g' + parentIndex.toString() : ''}-${index}`;
   }
 
-  selectOption(option: ISelectOption) {
-    this.value = option.value;
+  selectOption(option?: ISelectOption) {
+    this.value = option?.value;
     this.#dispatchEvents();
   }
 
@@ -85,7 +85,7 @@ export class BsSelectDropdown extends BsSelect implements ICustomElementViewMode
       const { options, value } = this;
 
       return Array.isArray(value)
-        ? value.map((val) => (options as ISelectOption[]).find((option) => option.value === val).text).join(', ')
+        ? value.map((val) => (options as ISelectOption[]).find((option) => option.value === val)!.text).join(', ')
         : '';
     }
 
@@ -134,13 +134,16 @@ export class BsSelectDropdown extends BsSelect implements ICustomElementViewMode
       options = Object.entries(options);
     }
 
+    // @ts-ignore
     const isEntries = Array.isArray(options[0]);
     let option = (options as Array<ISelectOption | readonly [unknown, string]>).find((option) => {
+      // @ts-ignore
       const optionValue: unknown = isEntries ? option[0] : (option as ISelectOption).value;
 
       if (optionValue == emptyValue) {
         emptyOption = {
           value: optionValue,
+          // @ts-ignore
           text: isEntries ? (option[1] as string) : (option as ISelectOption).text,
         } as ISelectOption;
       }
@@ -149,6 +152,7 @@ export class BsSelectDropdown extends BsSelect implements ICustomElementViewMode
     });
 
     option =
+      // @ts-ignore
       isEntries && option !== undefined ? { value: option[0], text: option[1] as string } : (option as ISelectOption);
 
     // update value next tick

package/src/forms/select-dropdown/select.stories.ts

@@ -1,89 +1,89 @@
-// import { BsButton, BsOffcanvas } from '@ekzo-dev/bootstrap';
-// import { extractArgTypes, Meta, Story } from '@storybook/aurelia';
-//
-// import { selectControl } from '../../../../../.storybook/helpers';
-//
-// import { BsSelectDropdown } from '.';
-//
-// export default {
-//   title: 'Ekzo / Bootstrap Addons / Forms / Select',
-//   component: BsSelectDropdown,
-//   parameters: {
-//     actions: {
-//       handles: ['change', 'input'],
-//     },
-//   },
-//   args: {
-//     label: 'Label',
-//     floatingLabel: false,
-//     valid: null,
-//   },
-//   argTypes: {
-//     bsSize: {
-//       ...extractArgTypes(BsSelectDropdown).bsSize,
-//       ...selectControl(['', 'sm', 'lg']),
-//     },
-//   },
-// } as Meta;
-//
-// const Overview: Story = (args) => ({
-//   props: args,
-// });
-//
-// Overview.args = {
-//   options: [
-//     { value: undefined, text: 'Select option' },
-//     { value: '1', text: 'One', disabled: true },
-//     { value: '2', text: 'Two' },
-//     { value: '3', text: 'Three', group: 'Group' },
-//   ],
-//   value: '2',
-// };
-//
-// const Multiple: Story = (args) => ({
-//   props: args,
-// });
-//
-// Multiple.args = {
-//   multiple: true,
-//   value: ['2', '3'],
-//   options: [
-//     { value: '1', text: 'One', disabled: true },
-//     { value: '2', text: 'Two' },
-//     { value: '3', text: 'Three', group: 'Group' },
-//   ],
-// };
-//
-// const LargeOptions: Story = (args) => ({
-//   props: args,
-//   template:
-//     '<bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 400px; max-width: 100%"></bs-select>',
-// });
-//
-// LargeOptions.args = {
-//   options: Array.from({ length: 1000 }).map((v, i) => ({
-//     value: i.toString(),
-//     text: `Option ${i} has long content which forces dropdown menu to scale larger that select box`,
-//   })),
-// };
-//
-// const InModal: Story = (args) => ({
-//   props: args,
-//   template: `
-// <button bs-button click.trigger="offcanvas.toggle()">Open modal</button>
-// <bs-offcanvas component.ref="offcanvas">
-//   <bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 100%"></bs-select>
-//   <div style="height: 2000px"></div>
-// </bs-offcanvas>`,
-//   components: [BsOffcanvas, BsButton],
-// });
-//
-// InModal.args = {
-//   options: Array.from({ length: 1000 }).map((v, i) => ({
-//     value: i.toString(),
-//     text: `Option ${i} has long content which forces dropdown menu to scale larger that select box`,
-//   })),
-// };
-//
-// // eslint-disable-next-line
-// export { Overview, Multiple, LargeOptions, InModal };
+// // import { BsButton, BsOffcanvas } from '@ekzo-dev/bootstrap';
+// // import { extractArgTypes, Meta, Story } from '@storybook/aurelia';
+// //
+// // import { selectControl } from '../../../../../.storybook/helpers';
+// //
+// // import { BsSelectDropdown } from '.';
+// //
+// // export default {
+// //   title: 'Ekzo / Bootstrap Addons / Forms / Select',
+// //   component: BsSelectDropdown,
+// //   parameters: {
+// //     actions: {
+// //       handles: ['change', 'input'],
+// //     },
+// //   },
+// //   args: {
+// //     label: 'Label',
+// //     floatingLabel: false,
+// //     valid: null,
+// //   },
+// //   argTypes: {
+// //     bsSize: {
+// //       ...extractArgTypes(BsSelectDropdown).bsSize,
+// //       ...selectControl(['', 'sm', 'lg']),
+// //     },
+// //   },
+// // } as Meta;
+// //
+// // const Overview: Story = (args) => ({
+// //   props: args,
+// // });
+// //
+// // Overview.args = {
+// //   options: [
+// //     { value: undefined, text: 'Select option' },
+// //     { value: '1', text: 'One', disabled: true },
+// //     { value: '2', text: 'Two' },
+// //     { value: '3', text: 'Three', group: 'Group' },
+// //   ],
+// //   value: '2',
+// // };
+// //
+// // const Multiple: Story = (args) => ({
+// //   props: args,
+// // });
+// //
+// // Multiple.args = {
+// //   multiple: true,
+// //   value: ['2', '3'],
+// //   options: [
+// //     { value: '1', text: 'One', disabled: true },
+// //     { value: '2', text: 'Two' },
+// //     { value: '3', text: 'Three', group: 'Group' },
+// //   ],
+// // };
+// //
+// // const LargeOptions: Story = (args) => ({
+// //   props: args,
+// //   template:
+// //     '<bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 400px; max-width: 100%"></bs-select>',
+// // });
+// //
+// // LargeOptions.args = {
+// //   options: Array.from({ length: 1000 }).map((v, i) => ({
+// //     value: i.toString(),
+// //     text: `Option ${i} has long content which forces dropdown menu to scale larger that select box`,
+// //   })),
+// // };
+// //
+// // const InModal: Story = (args) => ({
+// //   props: args,
+// //   template: `
+// // <button bs-button click.trigger="offcanvas.toggle()">Open modal</button>
+// // <bs-offcanvas component.ref="offcanvas">
+// //   <bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 100%"></bs-select>
+// //   <div style="height: 2000px"></div>
+// // </bs-offcanvas>`,
+// //   components: [BsOffcanvas, BsButton],
+// // });
+// //
+// // InModal.args = {
+// //   options: Array.from({ length: 1000 }).map((v, i) => ({
+// //     value: i.toString(),
+// //     text: `Option ${i} has long content which forces dropdown menu to scale larger that select box`,
+// //   })),
+// // };
+// //
+// // // eslint-disable-next-line
+// // export { Overview, Multiple, LargeOptions, InModal };