@fluid-topics/ft-select 1.2.63 → 1.2.65

package/build/ft-select.d.ts

@@ -11,6 +11,7 @@ export declare class FtSelectOption extends FtLitElement implements FtSelectOpti
 }
 export declare class FtSelect extends FtLitElement implements FtSelectProperties {
     static elementDefinitions: ElementDefinitionsMap;
+    static searchTimeoutMilliseconds: number;
     static styles: import("lit").CSSResult[];
     label: string;
     ariaLabel: string;
@@ -23,6 +24,8 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     selectedOption?: FtSelectOptionProperties;
     private optionsDisplayed;
     private focusOptions;
+    private currentSearch;
+    private lastSearchInputDate;
     private container?;
     private optionsMenu?;
     private mainPanel;
@@ -40,6 +43,8 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     private updateOptionsFromSlot;
     private onMainPanelKeyDown;
     private onOptionsKeyDown;
+    private isKeyAlphanumeric;
+    private handleAlphanumericPress;
     private onOptionKeyDown;
     private selectOption;
     private hideOptions;

package/build/ft-select.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { repeat } from "lit/directives/repeat.js";
@@ -53,6 +53,8 @@ class FtSelect extends FtLitElement {
         this.options = [];
         this.optionsDisplayed = false;
         this.focusOptions = false;
+        this.currentSearch = "";
+        this.lastSearchInputDate = new Date("01/01/1970");
         this.hideOptions = (e) => this.optionsDisplayed = this.optionsDisplayed && e.composedPath().includes(this.container);
     }
     render() {
@@ -106,9 +108,11 @@ class FtSelect extends FtLitElement {
                         ${repeat(this.options, option => option.value, option => this.renderOption(option))}
                     </div>
                 </div>
-                ${this.helper ? html `
-                    <ft-typography class="ft-select--helper-text" variant="caption">${this.helper}
-                    </ft-typography>` : undefined}
+                <slot name="helper" part="helper">
+                    ${this.helper ? html `
+                        <ft-typography class="ft-select--helper-text" variant="caption">${this.helper}
+                        </ft-typography>` : nothing}
+                </slot>
             </div>
             <slot @slotchange=${this.updateOptionsFromSlot}
                   @option-change=${this.updateOptionsFromSlot}
@@ -215,9 +219,41 @@ class FtSelect extends FtLitElement {
                 e.stopPropagation();
                 optionToFocus = (_e = (_d = this.focusedOption) === null || _d === void 0 ? void 0 : _d.nextElementSibling) !== null && _e !== void 0 ? _e : this.firstOption;
                 break;
+            default:
+                if (e.key.length != 1) {
+                    break;
+                }
+                if (this.isKeyAlphanumeric(e.key)) {
+                    optionToFocus = this.handleAlphanumericPress(e.key);
+                }
+                break;
         }
         optionToFocus === null || optionToFocus === void 0 ? void 0 : optionToFocus.focus();
     }
+    isKeyAlphanumeric(key) {
+        let charCode = key.charCodeAt(0);
+        return (charCode > 47 && charCode < 58) || // numeric (0-9)
+            (charCode > 64 && charCode < 91) || // upper alpha (A-Z)
+            (charCode > 96 && charCode < 123); // lower alpha (a-z)
+    }
+    handleAlphanumericPress(c) {
+        var _a, _b;
+        let currentDate = new Date();
+        // Resetting current search if timeout elapsed
+        if (currentDate.getTime() - this.lastSearchInputDate.getTime() > FtSelect.searchTimeoutMilliseconds) {
+            this.currentSearch = "";
+        }
+        this.currentSearch += c.toLowerCase();
+        // Searching for option
+        let foundOption = this.options.find((opt) => { var _a; return ((_a = opt.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().substring(0, this.currentSearch.length)) === this.currentSearch; });
+        if (foundOption === undefined) {
+            this.lastSearchInputDate = currentDate;
+            return undefined;
+        }
+        let optionElement = (_b = (_a = this.optionsMenu) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-value="${foundOption.value}"]`)) !== null && _b !== void 0 ? _b : undefined;
+        this.lastSearchInputDate = currentDate;
+        return optionElement;
+    }
     onOptionKeyDown(e, option) {
         var _a;
         if (e.key === "Enter" || e.key === " ") {
@@ -254,6 +290,7 @@ FtSelect.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-icon": FtIcon,
 };
+FtSelect.searchTimeoutMilliseconds = 2000;
 FtSelect.styles = [
     FtTypographyBody2,
     FtTypographyCaption,
@@ -292,6 +329,12 @@ __decorate([
 __decorate([
     state()
 ], FtSelect.prototype, "focusOptions", void 0);
+__decorate([
+    state()
+], FtSelect.prototype, "currentSearch", void 0);
+__decorate([
+    state()
+], FtSelect.prototype, "lastSearchInputDate", void 0);
 __decorate([
     query(".ft-select")
 ], FtSelect.prototype, "container", void 0);
@@ -314,6 +357,6 @@ __decorate([
     query(".ft-select--option:last-child")
 ], FtSelect.prototype, "lastOption", void 0);
 __decorate([
-    query("slot")
+    query("slot:not([name])")
 ], FtSelect.prototype, "optionsSlot", void 0);
 export { FtSelect };