@haloduck/ui 2.0.19 → 2.0.21

package/fesm2022/haloduck-ui.mjs

@@ -345,6 +345,7 @@ class SelectDropdownComponent {
     manualInputValues = {};
     activeManualKey = null;
     selectedChange = new EventEmitter();
+    closeDropdown = new EventEmitter();
     useFilter = false;
     multiselect = true;
     atLeastOne = false;
@@ -400,8 +401,13 @@ class SelectDropdownComponent {
                 this.activeManualKey = null;
             }
             else {
-                // open manual input without changing selection yet
+                // open manual input and handle selection based on mode
                 this.activeManualKey = key;
+                // In single select mode, clear existing selections first
+                if (!this.multiselect) {
+                    const sentinel = option.id || option.value;
+                    this.setSelected([sentinel]);
+                }
                 // ensure there is an entry in manualInputValues
                 if (this.manualInputValues[key] === undefined) {
                     this.manualInputValues[key] = '';
@@ -457,15 +463,19 @@ class SelectDropdownComponent {
     isOptionSelected(option) {
         const id = option.id || option.value;
         if (option.shouldManualInput) {
+            const key = this.getManualKey(option);
             const prefix = option.manualPrefix;
+            // Check if this manual input option is currently active
+            const isActive = this.activeManualKey === key;
             if (prefix) {
-                // selected only if there exists a value with more than prefix
-                return this._selectedOptionIds.some((selectedId) => typeof selectedId === 'string' && selectedId.startsWith(prefix) && selectedId.length > prefix.length);
+                // selected if there exists a value with more than prefix, OR if it's currently active
+                const hasValueWithPrefix = this._selectedOptionIds.some((selectedId) => typeof selectedId === 'string' && selectedId.startsWith(prefix) && selectedId.length > prefix.length);
+                return hasValueWithPrefix || isActive;
             }
-            // no prefix: consider selected if any selected id equals current typed value (non-empty)
-            const key = this.getManualKey(option);
+            // no prefix: consider selected if any selected id equals current typed value (non-empty) OR if it's active
             const typed = (this.manualInputValues[key] || '').trim();
-            return typed !== '' && this._selectedOptionIds.includes(typed);
+            const hasTypedValue = typed !== '' && this._selectedOptionIds.includes(typed);
+            return hasTypedValue || isActive;
         }
         return this._selectedOptionIds.includes(id);
     }
@@ -500,14 +510,15 @@ class SelectDropdownComponent {
     onManualInputChange(option, value) {
         const key = this.getManualKey(option);
         this.manualInputValues[key] = value;
-        // Dynamically reflect selection as user types, only when non-empty
+        // Dynamically reflect selection as user types
         const prefix = option.manualPrefix || '';
         const sentinel = option.id || option.value;
         const trimmed = (value || '').trim();
         if (this.multiselect) {
             if (option.isExclusive) {
                 if (trimmed === '') {
-                    this.setSelected([]);
+                    // Keep the sentinel selected to maintain the manual input option as "active"
+                    this.setSelected([sentinel]);
                 }
                 else {
                     this.setSelected([`${prefix}${trimmed}`]);
@@ -523,13 +534,20 @@ class SelectDropdownComponent {
                         next = [toAdd, ...next];
                     }
                 }
+                else {
+                    // Keep the sentinel to maintain selection state when text is empty
+                    if (!next.includes(sentinel)) {
+                        next = [sentinel, ...next];
+                    }
+                }
                 this.setSelected(next);
             }
         }
         else {
             // single select
             if (trimmed === '') {
-                this.setSelected([]);
+                // Keep the sentinel selected to maintain the manual input option as "active"
+                this.setSelected([sentinel]);
             }
             else {
                 this.setSelected([`${prefix}${trimmed}`]);
@@ -541,6 +559,10 @@ class SelectDropdownComponent {
         const raw = (this.manualInputValues[key] || '').trim();
         // Use same logic as onManualInputChange
         this.onManualInputChange(option, raw);
+        // Close dropdown in single select mode after confirming input
+        if (!this.multiselect) {
+            this.closeDropdown.emit();
+        }
     }
     onManualInputBlur(option) {
         const key = this.getManualKey(option);
@@ -548,6 +570,25 @@ class SelectDropdownComponent {
         if (raw === '') {
             // hide input on blur when empty
             this.activeManualKey = null;
+            // Also deselect the manual input option completely
+            const prefix = option.manualPrefix || '';
+            const sentinel = option.id || option.value;
+            if (this.multiselect) {
+                let next = [...this._selectedOptionIds];
+                // Remove sentinel and any values with the prefix
+                next = next.filter((id) => {
+                    if (id === sentinel)
+                        return false;
+                    if (prefix && id.startsWith(prefix))
+                        return false;
+                    return true;
+                });
+                this.setSelected(next);
+            }
+            else {
+                // Single select: deselect completely
+                this.setSelected([]);
+            }
         }
     }
     emitSelectedChange() {
@@ -562,13 +603,15 @@ class SelectDropdownComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectDropdownComponent, isStandalone: true, selector: "haloduck-select-dropdown", inputs: { useFilter: "useFilter", multiselect: "multiselect", atLeastOne: "atLeastOne", asButton: "asButton", options: "options", selectedOptionIds: "selectedOptionIds" }, outputs: { selectedChange: "selectedChange" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div id=\"dropdown\"\n     class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\">\n  @if (useFilter && _options.length >= 5) {\n  <input #inputFilter\n         id=\"inputFilter\"\n         type=\"text\"\n         [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n         (input)=\"onFilterInput($event)\"\n         class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\" />\n  }\n  <div class=\"overflow-y-auto\">\n    @for ( option of _filteredOptions(); track (option.id) ? option.id : option.value) {\n    <div class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         [class.cursor-pointer]=\"!option.shouldManualInput\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( isOptionSelected(option)) {\n      <svg class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n      } @else {\n      <div class=\"w-4 h-4 inline-block mr-2\"></div>\n      }\n      }\n      @if(option.shouldManualInput && (isOptionSelected(option) || (activeManualKey === (option.manualPrefix ? option.manualPrefix : (option.id || option.value))))) {\n        <input type=\"text\"\n               [(ngModel)]=\"manualInputValues[option.manualPrefix ? option.manualPrefix : (option.id || option.value)]\"\n               [attr.data-manual-key]=\"option.manualPrefix ? option.manualPrefix : (option.id || option.value)\"\n               (ngModelChange)=\"onManualInputChange(option, $event)\"\n               (click)=\"$event.stopPropagation()\"\n               (blur)=\"onManualInputBlur(option)\"\n               (keydown.enter)=\"onManualInputConfirm(option)\"\n               class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\" />\n      } @else {\n        {{ option.value }}\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: SelectDropdownComponent, isStandalone: true, selector: "haloduck-select-dropdown", inputs: { useFilter: "useFilter", multiselect: "multiselect", atLeastOne: "atLeastOne", asButton: "asButton", options: "options", selectedOptionIds: "selectedOptionIds" }, outputs: { selectedChange: "selectedChange", closeDropdown: "closeDropdown" }, providers: [provideTranslocoScope('haloduck')], ngImport: i0, template: "<div id=\"dropdown\"\n     class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\">\n  @if (useFilter && _options.length >= 5) {\n  <input #inputFilter\n         id=\"inputFilter\"\n         type=\"text\"\n         [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n         (input)=\"onFilterInput($event)\"\n         class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\" />\n  }\n  <div class=\"overflow-y-auto\">\n    @for ( option of _filteredOptions(); track (option.id) ? option.id : option.value) {\n    <div class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         [class.cursor-pointer]=\"!option.shouldManualInput\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( isOptionSelected(option)) {\n      <svg class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n      } @else {\n      <div class=\"w-4 h-4 inline-block mr-2\"></div>\n      }\n      }\n      @if(option.shouldManualInput && (isOptionSelected(option) || (activeManualKey === (option.manualPrefix ? option.manualPrefix : (option.id || option.value))))) {\n        <input type=\"text\"\n               [(ngModel)]=\"manualInputValues[option.manualPrefix ? option.manualPrefix : (option.id || option.value)]\"\n               [attr.data-manual-key]=\"option.manualPrefix ? option.manualPrefix : (option.id || option.value)\"\n               (ngModelChange)=\"onManualInputChange(option, $event)\"\n               (click)=\"$event.stopPropagation()\"\n               (blur)=\"onManualInputBlur(option)\"\n               (keydown.enter)=\"onManualInputConfirm(option)\"\n               class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\" />\n      } @else {\n        {{ option.value }}\n      }\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SelectDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'haloduck-select-dropdown', imports: [TranslocoModule, FormsModule], providers: [provideTranslocoScope('haloduck')], template: "<div id=\"dropdown\"\n     class=\"max-w-full mt-2 absolute z-40 bg-light-background dark:bg-dark-background text-light-on-background dark:text-dark-on-background border border-light-inactive dark:border-dark-inactive rounded max-h-60 flex flex-col gap-2\">\n  @if (useFilter && _options.length >= 5) {\n  <input #inputFilter\n         id=\"inputFilter\"\n         type=\"text\"\n         [placeholder]=\"'haloduck.ui.select.Keyword...' | transloco\"\n         (input)=\"onFilterInput($event)\"\n         class=\"text-light-inactive dark:text-dark-inactive rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-3 py-1.5 text-sm/6 bg-light-control dark:bg-dark-control m-2\" />\n  }\n  <div class=\"overflow-y-auto\">\n    @for ( option of _filteredOptions(); track (option.id) ? option.id : option.value) {\n    <div class=\"px-3 py-2 text-sm/6 hover:bg-light-secondary/60 dark:hover:bg-dark-secondary/60 flex items-center justify-start whitespace-nowrap\"\n         [class.cursor-pointer]=\"!option.shouldManualInput\"\n         (click)=\"onToggleOption(option)\">\n      @if(!asButton) {\n      @if( isOptionSelected(option)) {\n      <svg class=\"w-4 h-4 text-light-primary dark:text-dark-primary inline-block mr-2\"\n           xmlns=\"http://www.w3.org/2000/svg\"\n           viewBox=\"0 0 20 20\"\n           fill=\"currentColor\"\n           aria-hidden=\"true\">\n        <path fill-rule=\"evenodd\"\n              d=\"M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z\"\n              clip-rule=\"evenodd\" />\n      </svg>\n      } @else {\n      <div class=\"w-4 h-4 inline-block mr-2\"></div>\n      }\n      }\n      @if(option.shouldManualInput && (isOptionSelected(option) || (activeManualKey === (option.manualPrefix ? option.manualPrefix : (option.id || option.value))))) {\n        <input type=\"text\"\n               [(ngModel)]=\"manualInputValues[option.manualPrefix ? option.manualPrefix : (option.id || option.value)]\"\n               [attr.data-manual-key]=\"option.manualPrefix ? option.manualPrefix : (option.id || option.value)\"\n               (ngModelChange)=\"onManualInputChange(option, $event)\"\n               (click)=\"$event.stopPropagation()\"\n               (blur)=\"onManualInputBlur(option)\"\n               (keydown.enter)=\"onManualInputConfirm(option)\"\n               class=\"text-light-on-control dark:text-dark-on-control rounded-md outline -outline-offset-1 outline-light-inactive dark:outline-dark-inactive focus:outline-2 focus:outline-offset-2 focus:outline-light-primary dark:focus:outline-dark-primary px-2 py-1 text-sm/6 bg-light-control dark:bg-dark-control w-full\" />\n      } @else {\n        {{ option.value }}\n      }\n    </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { selectedChange: [{
                 type: Output
+            }], closeDropdown: [{
+                type: Output
             }], useFilter: [{
                 type: Input
             }], multiselect: [{
@@ -685,6 +728,10 @@ class SelectComponent {
                     }
                 });
             });
+            componentRef.instance.closeDropdown.subscribe(() => {
+                this.isDropdownOpen.set(false);
+                this.overlayRef?.detach();
+            });
             this.isDropdownOpen.set(true);
         }
         else {
@@ -728,10 +775,10 @@ class SelectComponent {
     onTouched = () => { };
     writeValue(value) {
         if (Array.isArray(value)) {
-            this.selectedOptionIds = value;
+            this.selectedOptionIds = value.filter(id => id !== null && id !== undefined && id !== '');
         }
         else {
-            this.selectedOptionIds = [value];
+            this.selectedOptionIds = (value !== null && value !== undefined && value !== '') ? [value] : [];
         }
         this.recomputeSelectedOptions();
     }