@ship-ui/core 0.13.2 → 0.13.3

package/fesm2022/ship-ui-core.mjs

@@ -3027,6 +3027,7 @@ class ShipSelectComponent {
         this.options = model([]);
         this.selectedOptions = model([]);
         this.cleared = output();
+        this.#previousSelectedOptions = signal(null);
         this.inlineTemplate = contentChild(TemplateRef);
         this.optionsWrapRef = viewChild.required('optionsWrap');
         this.inputRefInput = signal(null);
@@ -3094,6 +3095,7 @@ class ShipSelectComponent {
             scoredOptions.sort((a, b) => b.score - a.score);
             return scoredOptions.map((scoredOption) => scoredOption.item);
         });
+        this.#componentId = generateUniqueId();
         this.inputRefEl = computed(() => {
             const inputRefInput = this.inputRefInput();
             if (inputRefInput === null)
@@ -3104,6 +3106,10 @@ class ShipSelectComponent {
                 return null;
             }
             input.autocomplete = 'off';
+            input.setAttribute('role', 'combobox');
+            input.setAttribute('id', `combobox-${this.#componentId}`);
+            input.setAttribute('aria-haspopup', 'listbox');
+            input.setAttribute('aria-owns', 'optionsWrapId');
             this.#createCustomInputEventListener(input);
             input.addEventListener('focus', () => {
                 if (this.readonly())
@@ -3131,11 +3137,23 @@ class ShipSelectComponent {
                     return;
                 }
                 this.setSelectedOptionsFromValue(newInputValue);
-                this.setInputValueFromSelectedOptions();
+                this.setInputValueFromOptions(this.selectedOptions());
                 this.#setFirstSelectedOptionAsFocused();
             });
             return input;
         });
+        this.focusEffect = effect(() => {
+            const input = this.inputRefEl();
+            if (!input)
+                return;
+            const focusedId = this.getLabelAsSlug(this.filteredOptions()[this.focusedOptionIndex()]);
+            if (focusedId) {
+                input.setAttribute('aria-activedescendant', focusedId);
+            }
+            else {
+                input.removeAttribute('aria-activedescendant');
+            }
+        });
         this.openAbortController = null;
         this.isOpenEffect = effect(() => {
             const isOpen = this.isOpen();
@@ -3146,6 +3164,7 @@ class ShipSelectComponent {
                 const input = this.inputRefEl();
                 if (!input)
                     return;
+                input.setAttribute('aria-expanded', this.isOpen().toString());
                 input.addEventListener('keydown', (e) => {
                     if (e.key === 'Escape' || e.key === 'Tab') {
                         e.preventDefault();
@@ -3173,6 +3192,7 @@ class ShipSelectComponent {
                 const input = this.inputRefEl();
                 if (!input)
                     return;
+                input.setAttribute('aria-expanded', this.isOpen().toString());
                 if (this.openAbortController) {
                     this.openAbortController.abort();
                     this.openAbortController = null;
@@ -3192,7 +3212,7 @@ class ShipSelectComponent {
                 return;
             this.disabled.set(input.disabled);
             this.setSelectedOptionsFromValue(input.value);
-            this.setInputValueFromSelectedOptions();
+            this.setInputValueFromOptions(this.selectedOptions());
         });
         this.selectedLabels = computed(() => {
             const selected = this.selectedOptions();
@@ -3237,6 +3257,7 @@ class ShipSelectComponent {
         });
     }
     #selfRef;
+    #previousSelectedOptions;
     #inputObserver;
     #calculateMatchScore(option, input) {
         if (!input)
@@ -3271,6 +3292,7 @@ class ShipSelectComponent {
         score += matchCount * 20;
         return score;
     }
+    #componentId;
     #selectedOptionsEffect;
     ngOnInit() {
         this.setInitInput();
@@ -3311,15 +3333,14 @@ class ShipSelectComponent {
         });
         this.selectedOptions.set(selectMultiple ? selectedOptions : [selectedOptions[0]]);
     }
-    setInputValueFromSelectedOptions() {
-        const selectedOptions = this.selectedOptions();
+    setInputValueFromOptions(options) {
         const valueKey = this.value();
-        if (selectedOptions.length === 0) {
+        if (options.length === 0) {
             this.inputValue.set('');
             this.updateInputElValue();
             return;
         }
-        const inputValue = selectedOptions
+        const inputValue = options
             .map((option) => {
             const optionValue = valueKey ? this.#getProperty(option, valueKey) : option;
             return optionValue;
@@ -3334,6 +3355,12 @@ class ShipSelectComponent {
             return option;
         return this.#getProperty(option, label);
     }
+    getLabelAsSlug(option) {
+        const label = this.getLabel(option);
+        if (!label || typeof label !== 'string')
+            return '';
+        return label.replaceAll(' ', '-');
+    }
     toggleOptionByIndex(optionIndex, event) {
         const option = this.filteredOptions()[optionIndex];
         if ((this.asFreeText() && optionIndex === -1) || !option) {
@@ -3349,6 +3376,7 @@ class ShipSelectComponent {
         const selectedOptionValues = this.selectedOptionValues();
         const optionValue = valueKey ? this.#getProperty(option, valueKey) : option;
         this.prevInputValue.set(null);
+        this.#previousSelectedOptions.set(null);
         this.selectedOptions.update((selectedOptions) => {
             const index = selectedOptionValues.indexOf(optionValue);
             if (index > -1) {
@@ -3372,7 +3400,7 @@ class ShipSelectComponent {
         else {
             this.isOpen.set(false);
         }
-        this.setInputValueFromSelectedOptions();
+        this.setInputValueFromOptions(this.selectedOptions());
         if (selectMultiple && this.hasSearch()) {
             this.inputValue.set('');
             this.updateInputElValue();
@@ -3383,7 +3411,7 @@ class ShipSelectComponent {
         this.selectedOptions.update((selectedOptions) => {
             return [...selectedOptions.slice(0, optionRemoveIndex), ...selectedOptions.slice(optionRemoveIndex + 1)];
         });
-        this.setInputValueFromSelectedOptions();
+        this.setInputValueFromOptions(this.selectedOptions());
     }
     isSelected(optionIndex) {
         const valueKey = this.value();
@@ -3400,6 +3428,9 @@ class ShipSelectComponent {
             this.inputValue.set('');
             this.updateInputElValue();
         }
+        else {
+            this.#previousSelectedOptions.set(this.selectedOptions());
+        }
         if (!this.selectMultiple()) {
             this.#setFirstSelectedOptionAsFocused();
         }
@@ -3418,16 +3449,20 @@ class ShipSelectComponent {
     close() {
         this.isOpen.set(false);
         const prevInputValue = this.prevInputValue();
+        const prevSelectedOptions = this.#previousSelectedOptions();
         if (this.asFreeText()) {
             this.updateInputElValue();
             return;
         }
         if (this.hasSearch() && prevInputValue) {
             this.inputValue.set(prevInputValue);
-            this.setInputValueFromSelectedOptions();
+            this.setInputValueFromOptions(this.selectedOptions());
+        }
+        if (!this.hasSearch() && prevSelectedOptions !== null) {
+            this.setInputValueFromOptions(prevSelectedOptions);
         }
         if (this.selectMultiple()) {
-            this.setInputValueFromSelectedOptions();
+            this.setInputValueFromOptions(this.selectedOptions());
         }
     }
     clear($event) {
@@ -3585,11 +3620,13 @@ class ShipSelectComponent {
         }
       </sh-form-field>
 
-      <div class="ship-options" #optionsWrap>
+      <div class="ship-options" #optionsWrap id="optionsWrapId" role="listbox">
         @for (option of filteredOptions(); track $index) {
           <li
             (click)="toggleOptionByIndex($index)"
             class="option"
+            [id]="this.getLabelAsSlug(option)"
+            [attr.aria-selected]="isSelected($index)"
             [class.selected]="isSelected($index)"
             [class.focused]="$index === focusedOptionIndex()">
             @if (selectMultiple()) {
@@ -3711,11 +3748,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }
       </sh-form-field>
 
-      <div class="ship-options" #optionsWrap>
+      <div class="ship-options" #optionsWrap id="optionsWrapId" role="listbox">
         @for (option of filteredOptions(); track $index) {
           <li
             (click)="toggleOptionByIndex($index)"
             class="option"
+            [id]="this.getLabelAsSlug(option)"
+            [attr.aria-selected]="isSelected($index)"
             [class.selected]="isSelected($index)"
             [class.focused]="$index === focusedOptionIndex()">
             @if (selectMultiple()) {