@ekzo-dev/bootstrap-addons 5.3.19 → 5.3.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.3.19",
+  "version": "5.3.21",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,9 +9,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "~5.3.4",
+    "@ekzo-dev/bootstrap": "~5.3.6",
     "@ekzo-dev/vanilla-jsoneditor": "~3.11.0",
-    "@ekzo-dev/toolkit": "^1.2.4",
+    "@ekzo-dev/toolkit": "^1.3.0",
     "@fortawesome/free-solid-svg-icons": "^7.0.1",
     "@types/json-schema": "^7.0.14",
     "@js-temporal/polyfill": "^0.5.1",

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

@@ -1,14 +1,8 @@
 <template class="${floatingLabel ? 'form-floating' : ''}">
   <label for.one-time="id" if.bind="label && !floatingLabel" class="form-label">${label}</label>
   <fieldset class="${classes}" disabled.bind="disabled">
-    <input
-      type="text"
-      id.one-time="id"
-      required.bind="required"
-      value.bind="value"
-      form.bind="form & attr"
-      focus.trigger="focus()"
-    />
+    <input type="text" id.one-time="id" value.bind="value" focus.trigger="focus()" ref="control" />
+
     <input type="number" min="0" value.bind="duration.years" placeholder="--" />
     <span>${labels.years}</span>
     <input type="number" min="0" value.bind="duration.months" placeholder="--" />

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
@@ -45,7 +50,7 @@ export class BsDurationInput extends BaseField implements EventListenerObject {
   bsSize?: Size;
 
   @bindable(coerceBoolean)
-  floatingLabel: boolean = false;
+  floatingLabel: boolean = this.config.floatingLabels;
 
   duration: Duration = {};
 
@@ -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/index.ts

@@ -0,0 +1 @@
+export * from './select-dropdown';

package/src/forms/{select/select.scss → select-dropdown/select-dropdown.scss}

@@ -1,7 +1,10 @@
 @import '@ekzo-dev/bootstrap/src/utils';
 @import 'bootstrap/scss/forms/form-check';
 
-bs-select.addon {
+bs-select-dropdown {
+  display: block;
+  width: 100%;
+
   .form-select {
     cursor: default;
   }
@@ -56,10 +59,10 @@ bs-select.addon {
 }
 
 /* stylelint-disable */
-.was-validated bs-select.addon:has(.btn-close) .form-select:invalid,
-.was-validated bs-select.addon:has(.btn-close) .form-select:valid,
-bs-select.addon:has(.btn-close) .form-select.is-invalid,
-bs-select.addon:has(.btn-close) .form-select.is-valid {
+.was-validated bs-select-dropdown:has(.btn-close) .form-select:invalid,
+.was-validated bs-select-dropdown:has(.btn-close) .form-select:valid,
+bs-select-dropdown:has(.btn-close) .form-select.is-invalid,
+bs-select-dropdown:has(.btn-close) .form-select.is-valid {
   padding-right: 5.5rem !important;
 
   + .btn-close {

package/src/forms/{select/select.ts → select-dropdown/select-dropdown.ts}

@@ -1,6 +1,6 @@
-import template from './select.html';
+import template from './select-dropdown.html';
 
-import './select.scss';
+import './select-dropdown.scss';
 
 import type { Options } from '@popperjs/core';
 import type { Tooltip } from 'bootstrap';
@@ -11,24 +11,22 @@ import {
   BsDropdownItem,
   BsDropdownMenu,
   BsDropdownToggle,
-  BsSelect as BaseBsSelect,
+  BsSelect,
   ISelectOption,
 } from '@ekzo-dev/bootstrap';
-import { bindable, customElement, ICustomElementViewModel, resolve } from 'aurelia';
+import { bindable, customElement, ICustomElementViewModel, queueTask } from 'aurelia';
 
 import { Filter } from './filter';
 
 @customElement({
-  name: 'bs-select',
+  name: 'bs-select-dropdown',
   template,
   dependencies: [BsDropdown, BsDropdownMenu, BsDropdownToggle, BsDropdownItem, Filter, BsCloseButton],
 })
-export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
+export class BsSelectDropdown extends BsSelect implements ICustomElementViewModel {
   @bindable()
   emptyValue?: unknown = null;
 
-  host = resolve(HTMLElement);
-
   filter: string = '';
 
   emptyOption?: ISelectOption;
@@ -36,8 +34,6 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   popperConfig: Partial<Options> | Tooltip.PopperConfigFunction | null = null;
 
   binding() {
-    super.binding();
-
     if (this.multiple && !Array.isArray(this.value)) {
       this.value = [];
     }
@@ -47,7 +43,7 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     this.setPopperConfig();
   }
 
-  valueChanged(value: unknown): void {
+  valueChanged(value: unknown) {
     if (this.multiple && !Array.isArray(value)) {
       this.value = [];
     }
@@ -62,7 +58,7 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   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 = {
@@ -71,7 +67,7 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       dropdownMenu.style.minWidth = `${host.offsetWidth}px`;
     } else {
       this.popperConfig = null;
-      dropdownMenu.style.minWidth = undefined;
+      dropdownMenu.style.minWidth = '';
     }
   }
 
@@ -79,8 +75,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     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();
   }
 
@@ -89,7 +85,7 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       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(', ')
         : '';
     }
 
@@ -138,13 +134,16 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       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;
       }
@@ -153,18 +152,19 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     });
 
     option =
+      // @ts-ignore
       isEntries && option !== undefined ? { value: option[0], text: option[1] as string } : (option as ISelectOption);
 
     // update value next tick
     const foundValue = option?.value;
 
     if (foundValue !== value) {
-      console.info(`[bootstrap-addons] updating <bs-select> [id=${this.id}] value to`, foundValue);
-      void Promise.resolve().then(() => (this.value = foundValue));
+      queueTask(() => (this.value = foundValue));
     }
 
     // update empty option next tick
-    void Promise.resolve().then(() => (this.emptyOption = emptyOption));
+    // TODO: investigate if next tick is still needed
+    queueTask(() => (this.emptyOption = emptyOption));
 
     return option;
   }

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

@@ -0,0 +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 };

package/src/index.ts

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

package/src/forms/select/index.ts

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

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

@@ -1,89 +0,0 @@
-import { BsButton, BsOffcanvas } from '@ekzo-dev/bootstrap';
-import { extractArgTypes, Meta, Story } from '@storybook/aurelia';
-
-import { selectControl } from '../../../../../.storybook/helpers';
-
-import { BsSelect } from '.';
-
-export default {
-  title: 'Ekzo / Bootstrap Addons / Forms / Select',
-  component: BsSelect,
-  parameters: {
-    actions: {
-      handles: ['change', 'input'],
-    },
-  },
-  args: {
-    label: 'Label',
-    floatingLabel: false,
-    valid: null,
-  },
-  argTypes: {
-    bsSize: {
-      ...extractArgTypes(BsSelect).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 };