@ship-ui/core 0.13.16 → 0.13.17

package/fesm2022/ship-ui-core.mjs

@@ -3015,6 +3015,7 @@ class ShipSelectComponent {
         this.value = input();
         this.label = input();
         this.asFreeText = input(false);
+        this.validateFreeText = input();
         this.placeholder = input();
         this.readonly = model(false);
         this.disabled = model(false);
@@ -3026,11 +3027,21 @@ class ShipSelectComponent {
         this.optionTemplate = input(null);
         this.selectedOptionTemplate = input(null);
         this.placeholderTemplate = input(null);
+        this.freeTextOptionTemplate = input(null);
         this.isOpen = model(false);
         this.isLoading = model(false);
         this.options = model([]);
         this.selectedOptions = model([]);
         this.cleared = output();
+        this.computedFreeTextOption = computed(() => {
+            const inputValue = this.inputValue();
+            const valueKey = this.value();
+            const newOption = valueKey ? {} : inputValue;
+            if (valueKey && typeof newOption === 'object') {
+                newOption[valueKey] = inputValue;
+            }
+            return newOption;
+        });
         this.#previousSelectedOptions = signal(null);
         this.inlineTemplate = contentChild(TemplateRef);
         this.optionsWrapRef = viewChild.required('optionsWrap');
@@ -3166,6 +3177,8 @@ class ShipSelectComponent {
                     this.openAbortController = new AbortController();
                 }
                 const input = this.inputRefEl();
+                const asFreeText = this.asFreeText();
+                const baseIndex = asFreeText ? -1 : 0;
                 if (!input)
                     return;
                 input.setAttribute('aria-expanded', this.isOpen().toString());
@@ -3181,12 +3194,12 @@ class ShipSelectComponent {
                     if (e.key === 'ArrowDown') {
                         e.preventDefault();
                         const newIndex = this.focusedOptionIndex() + 1;
-                        this.focusedOptionIndex.set(newIndex > this.filteredOptions().length - 1 ? 0 : newIndex);
+                        this.focusedOptionIndex.set(newIndex > this.filteredOptions().length - 1 ? baseIndex : newIndex);
                     }
                     if (e.key === 'ArrowUp') {
                         e.preventDefault();
                         const newIndex = this.focusedOptionIndex() - 1;
-                        this.focusedOptionIndex.set(newIndex < 0 ? this.filteredOptions().length - 1 : newIndex);
+                        this.focusedOptionIndex.set(newIndex < baseIndex ? this.filteredOptions().length - 1 : newIndex);
                     }
                 }, {
                     signal: this.openAbortController?.signal,
@@ -3355,6 +3368,12 @@ class ShipSelectComponent {
         this.inputValue.set(newInputValue);
         this.updateInputElValue();
     }
+    getValue(option) {
+        const valueKey = this.value();
+        if (!valueKey)
+            return option;
+        return this.#getProperty(option, valueKey);
+    }
     getLabel(option) {
         const label = this.label();
         if (!label)
@@ -3368,8 +3387,24 @@ class ShipSelectComponent {
         return label.replaceAll(' ', '-');
     }
     toggleOptionByIndex(optionIndex, event) {
-        const option = this.filteredOptions()[optionIndex];
-        if ((this.asFreeText() && optionIndex === -1) || !option) {
+        let option = this.filteredOptions()[optionIndex];
+        if (this.asFreeText() && optionIndex === -1) {
+            const newOption = this.computedFreeTextOption();
+            const newOptionValue = this.getValue(newOption);
+            const validateFreeTextFunc = this.validateFreeText() ?? ((val) => true);
+            const isValid = validateFreeTextFunc(newOptionValue);
+            if (!isValid)
+                return;
+            this.options.update((options) => {
+                const index = options.findIndex((option) => this.getValue(option) === newOptionValue);
+                if (index > -1)
+                    return options;
+                return [newOption, ...options];
+            });
+            optionIndex = 0;
+            option = newOption;
+        }
+        else if (!option) {
             this.close();
             return;
         }
@@ -3535,9 +3570,10 @@ class ShipSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ShipSelectComponent, isStandalone: true, selector: "sh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, asFreeText: { classPropertyName: "asFreeText", publicName: "asFreeText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lazySearch: { classPropertyName: "lazySearch", publicName: "lazySearch", isSignal: true, isRequired: false, transformFunction: null }, inlineSearch: { classPropertyName: "inlineSearch", publicName: "inlineSearch", isSignal: true, isRequired: false, transformFunction: null }, asText: { classPropertyName: "asText", publicName: "asText", isSignal: true, isRequired: false, transformFunction: null }, isClearable: { classPropertyName: "isClearable", publicName: "isClearable", isSignal: true, isRequired: false, transformFunction: null }, selectMultiple: { classPropertyName: "selectMultiple", publicName: "selectMultiple", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionTemplate: { classPropertyName: "selectedOptionTemplate", publicName: "selectedOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, placeholderTemplate: { classPropertyName: "placeholderTemplate", publicName: "placeholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "selectedOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", disabled: "disabledChange", isOpen: "isOpenChange", isLoading: "isLoadingChange", options: "optionsChange", selectedOptions: "selectedOptionsChange", cleared: "cleared" }, host: { properties: { "class.multiple": "selectMultiple()" } }, queries: [{ propertyName: "inlineTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsWrapRef", first: true, predicate: ["optionsWrap"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ShipSelectComponent, isStandalone: true, selector: "sh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, asFreeText: { classPropertyName: "asFreeText", publicName: "asFreeText", isSignal: true, isRequired: false, transformFunction: null }, validateFreeText: { classPropertyName: "validateFreeText", publicName: "validateFreeText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lazySearch: { classPropertyName: "lazySearch", publicName: "lazySearch", isSignal: true, isRequired: false, transformFunction: null }, inlineSearch: { classPropertyName: "inlineSearch", publicName: "inlineSearch", isSignal: true, isRequired: false, transformFunction: null }, asText: { classPropertyName: "asText", publicName: "asText", isSignal: true, isRequired: false, transformFunction: null }, isClearable: { classPropertyName: "isClearable", publicName: "isClearable", isSignal: true, isRequired: false, transformFunction: null }, selectMultiple: { classPropertyName: "selectMultiple", publicName: "selectMultiple", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionTemplate: { classPropertyName: "selectedOptionTemplate", publicName: "selectedOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, placeholderTemplate: { classPropertyName: "placeholderTemplate", publicName: "placeholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, freeTextOptionTemplate: { classPropertyName: "freeTextOptionTemplate", publicName: "freeTextOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "selectedOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", disabled: "disabledChange", isOpen: "isOpenChange", isLoading: "isLoadingChange", options: "optionsChange", selectedOptions: "selectedOptionsChange", cleared: "cleared" }, host: { properties: { "class.multiple": "selectMultiple()" } }, queries: [{ propertyName: "inlineTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsWrapRef", first: true, predicate: ["optionsWrap"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @let _placeholderTemplate = placeholderTemplate();
     @let _optionTemplate = optionTemplate();
+    @let _freeTextOptionTemplate = freeTextOptionTemplate();
     @let _selectedOptionTemplate = selectedOptionTemplate();
     @let _inlineTemplate = inlineTemplate();
     @let _selectedOptions = selectedOptions();
@@ -3629,6 +3665,31 @@ class ShipSelectComponent {
       </sh-form-field>
 
       <div class="ship-options" #optionsWrap id="optionsWrapId" role="listbox">
+        @if (asFreeText()) {
+          @let freeTextOption = computedFreeTextOption();
+          @let freeTextOptionValue = getValue(freeTextOption);
+
+          @if ($any(freeTextOptionValue).length > 0) {
+            <li
+              (click)="toggleOptionByIndex(-1)"
+              class="option"
+              [id]="this.getLabelAsSlug(freeTextOption)"
+              [attr.aria-selected]="isSelected(-1)"
+              [class.selected]="isSelected(-1)"
+              [class.focused]="-1 === focusedOptionIndex()">
+              @if (_freeTextOptionTemplate) {
+                <ng-container
+                  *ngTemplateOutlet="_freeTextOptionTemplate; context: { $implicit: { option: freeTextOption } }" />
+              } @else if (_listOptionTemplate) {
+                <ng-container
+                  *ngTemplateOutlet="_listOptionTemplate; context: { $implicit: { option: freeTextOption } }" />
+              } @else {
+                {{ freeTextOptionValue }}
+              }
+            </li>
+          }
+        }
+
         @for (option of filteredOptions(); track $index) {
           <li
             (click)="toggleOptionByIndex($index)"
@@ -3668,6 +3729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     template: `
     @let _placeholderTemplate = placeholderTemplate();
     @let _optionTemplate = optionTemplate();
+    @let _freeTextOptionTemplate = freeTextOptionTemplate();
     @let _selectedOptionTemplate = selectedOptionTemplate();
     @let _inlineTemplate = inlineTemplate();
     @let _selectedOptions = selectedOptions();
@@ -3759,6 +3821,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
       </sh-form-field>
 
       <div class="ship-options" #optionsWrap id="optionsWrapId" role="listbox">
+        @if (asFreeText()) {
+          @let freeTextOption = computedFreeTextOption();
+          @let freeTextOptionValue = getValue(freeTextOption);
+
+          @if ($any(freeTextOptionValue).length > 0) {
+            <li
+              (click)="toggleOptionByIndex(-1)"
+              class="option"
+              [id]="this.getLabelAsSlug(freeTextOption)"
+              [attr.aria-selected]="isSelected(-1)"
+              [class.selected]="isSelected(-1)"
+              [class.focused]="-1 === focusedOptionIndex()">
+              @if (_freeTextOptionTemplate) {
+                <ng-container
+                  *ngTemplateOutlet="_freeTextOptionTemplate; context: { $implicit: { option: freeTextOption } }" />
+              } @else if (_listOptionTemplate) {
+                <ng-container
+                  *ngTemplateOutlet="_listOptionTemplate; context: { $implicit: { option: freeTextOption } }" />
+              } @else {
+                {{ freeTextOptionValue }}
+              }
+            </li>
+          }
+        }
+
         @for (option of filteredOptions(); track $index) {
           <li
             (click)="toggleOptionByIndex($index)"