@ekzo-dev/bootstrap-addons 5.2.24 → 5.2.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.24",
+  "version": "5.2.25",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "^5.2.18",
+    "@ekzo-dev/bootstrap": "^5.2.19",
     "@ekzo-dev/vanilla-jsoneditor": "^0.23.7",
     "@ekzo-dev/toolkit": "^1.2.4",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",

package/src/forms/select/filter.ts

@@ -5,11 +5,13 @@ import { valueConverter } from 'aurelia';
 export class Filter {
   toView(
     list: Map<string, ISelectOption[]> | ISelectOption[],
-    search: string
+    search: string,
+    emptyOption?: ISelectOption
   ): Map<string, ISelectOption[]> | ISelectOption[] {
-    if (search === '') return list;
+    if (search === '' && emptyOption === undefined) return list;
 
-    const cb = (option: { text: string }) => option.text.toLowerCase().includes(search.toLowerCase());
+    const cb = (option: ISelectOption) =>
+      option.value !== emptyOption?.value && option.text.toLowerCase().includes(search.toLowerCase());
 
     if (list instanceof Map) {
       const result = new Map<string, ISelectOption[]>();

package/src/forms/select/select.html

@@ -28,7 +28,8 @@
       id.bind="id"
       class="form-select ${bsSize ? `form-select-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
       bs-dropdown-toggle="arrow.bind: false"
-      value="${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text ?? ''}"
+      value="${valueText}"
+      placeholder="${emptyOption?.text ?? ''}"
       disabled.bind="disabled"
       required.bind="required"
       form.bind="form & attr"
@@ -38,6 +39,12 @@
       keydown.trigger="$event.preventDefault()"
       ref="control"
     />
+    <button
+      if.bind="emptyOption && selectedOption?.value !== emptyOption?.value"
+      bs-close-button
+      type="button"
+      click.trigger="selectOption(emptyOption)"
+    ></button>
     <bs-dropdown-menu>
       <div bs-dropdown-item="text" if.bind="optionsCount > 10">
         <input class="form-control" placeholder="Filter options" type="search" value.bind="filter & debounce:250" />
@@ -45,19 +52,19 @@
       <hr bs-dropdown-item="divider" if.bind="optionsCount > 10" />
       <button
         type="button"
-        repeat.for="option of ungroupedOptions | filter:filter"
-        bs-dropdown-item="active.bind: option.value === selectedOption.value; disabled.bind: option.disabled"
+        repeat.for="option of ungroupedOptions | filter:filter:emptyOption"
+        bs-dropdown-item="active.bind: option.value === selectedOption?.value; disabled.bind: option.disabled"
         click.trigger="selectOption(option)"
       >
         ${option.text || '&nbsp;'}
       </button>
-      <template repeat.for="[k, v] of groupedOptions | filter:filter">
+      <template repeat.for="[k, v] of groupedOptions | filter:filter:emptyOption">
         <h6 bs-dropdown-item="header">${k}</h6>
         <button
           class="ps-4"
           type="button"
           repeat.for="option of v"
-          bs-dropdown-item="active.bind: option.value === selectedOption.value; disabled.bind: option.disabled"
+          bs-dropdown-item="active.bind: option.value === selectedOption?.value; disabled.bind: option.disabled"
           click.trigger="selectOption(option)"
         >
           ${option.text || '&nbsp;'}

package/src/forms/select/select.scss

@@ -1,17 +1,40 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/maps';
-@import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/forms/form-select';
-@import '~bootstrap/scss/forms/form-check';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/forms/form-check';
 
 bs-select {
-  display: block;
-
-  > .form-select {
+  .form-select {
     cursor: default;
   }
 
+  &:has(.btn-close) .form-select {
+    padding-right: 4rem;
+  }
+
+  .btn-close {
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    width: 0.8rem;
+    height: 0.8rem;
+    top: calc(-1px - 1.5rem);
+    left: calc(100% - 3.25rem);
+  }
+
+  .form-select-lg + .btn-close {
+    top: calc(-1px - 1.8rem);
+  }
+
+  .form-select-sm + .btn-close {
+    top: calc(-1px - 1.3rem);
+  }
+
+  &.form-floating .btn-close {
+    top: calc(-1px - 2.15rem) !important;
+  }
+
   .dropdown-menu {
     width: max-content;
     min-width: 100%;
@@ -76,3 +99,16 @@ bs-select {
     }
   }
 }
+
+/* stylelint-disable */
+.was-validated bs-select:has(.btn-close) .form-select:invalid,
+.was-validated bs-select:has(.btn-close) .form-select:valid,
+bs-select:has(.btn-close) .form-select.is-invalid,
+bs-select:has(.btn-close) .form-select.is-valid {
+  padding-right: 5.5rem !important;
+
+  + .btn-close {
+    left: calc(100% - 4.75rem);
+  }
+}
+/* stylelint-enable */

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

@@ -15,12 +15,14 @@ export default {
   args: {
     label: 'Label',
     options: [
-      { value: undefined, text: '' },
+      { value: undefined, text: 'Select option' },
       { value: '1', text: 'One', disabled: true },
       { value: '2', text: 'Two' },
       { value: '3', text: 'Three', group: 'Group' },
     ],
     value: '2',
+    floatingLabel: false,
+    valid: null,
   },
   argTypes: {
     bsSize: {

package/src/forms/select/select.ts

@@ -3,6 +3,7 @@ import template from './select.html';
 import './select.scss';
 
 import {
+  BsCloseButton,
   BsDropdown,
   BsDropdownItem,
   BsDropdownMenu,
@@ -10,7 +11,7 @@ import {
   BsSelect as BaseBsSelect,
   ISelectOption,
 } from '@ekzo-dev/bootstrap';
-import { customElement, ICustomElementViewModel } from 'aurelia';
+import { bindable, customElement, ICustomElementViewModel } from 'aurelia';
 
 import { Filter } from './filter';
 
@@ -22,9 +23,12 @@ const BS_SIZE_MULTIPLIER = {
 @customElement({
   name: 'bs-select',
   template,
-  dependencies: [BsDropdown, BsDropdownMenu, BsDropdownToggle, BsDropdownItem, Filter],
+  dependencies: [BsDropdown, BsDropdownMenu, BsDropdownToggle, BsDropdownItem, Filter, BsCloseButton],
 })
 export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
+  @bindable()
+  emptyValue?: unknown = null;
+
   control!: HTMLFieldSetElement;
 
   filter: string = '';
@@ -33,6 +37,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
 
   deactivating: boolean = false;
 
+  emptyOption?: ISelectOption;
+
   binding() {
     super.binding();
     this.deactivating = false;
@@ -67,6 +73,14 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     this.#dispatchEvents();
   }
 
+  get valueText(): string {
+    const { selectedOption, emptyOption } = this;
+
+    return emptyOption && emptyOption.value === selectedOption?.value
+      ? ''
+      : `${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text ?? ''}`;
+  }
+
   #dispatchEvents() {
     const change = new Event('change', { bubbles: true });
     const input = new Event('input', { bubbles: true });
@@ -102,8 +116,9 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   get selectedOption(): ISelectOption | undefined {
     if (this['__raw__'].deactivating) return;
 
-    const { matcher, value } = this;
+    const { matcher, value, emptyValue } = this;
     let { options } = this;
+    let emptyOption: ISelectOption;
 
     if (options instanceof Object && options.constructor === Object) {
       options = Object.entries(options);
@@ -115,12 +130,19 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     let option = (options as Array<ISelectOption | readonly [unknown, string]>).find((option) => {
       const currentValue: unknown = isEntries ? option[0] : (option as ISelectOption).value;
 
+      if (currentValue == emptyValue) {
+        emptyOption = {
+          value: currentValue,
+          text: isEntries ? option[1] : (option as ISelectOption).text,
+        } as ISelectOption;
+      }
+
       return matcher ? matcher(value, currentValue) : value === currentValue;
     });
 
     option = isEntries && option !== undefined ? { value: option[0], text: option[1] } : (option as ISelectOption);
 
-    // update value next tick if it differs from current
+    // update value next tick
     const foundValue = option?.value;
 
     if (foundValue !== value) {
@@ -128,6 +150,9 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       void Promise.resolve().then(() => (this.value = foundValue));
     }
 
+    // update empty option next tick
+    void Promise.resolve().then(() => (this.emptyOption = emptyOption));
+
     return option;
   }
 }