@fluid-topics/ft-select 1.3.16 → 1.3.18

package/build/ft-select.js

@@ -34,7 +34,7 @@ __decorate([
     property({ type: String })
 ], FtSelectOption.prototype, "label", void 0);
 __decorate([
-    property({ type: Object, converter: value => value })
+    property({ type: Object, converter: (value) => value })
 ], FtSelectOption.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -59,8 +59,8 @@ class FtSelect extends FtLitElement {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        let optionsDisplayed = this.hasOptionsMenuOpen;
-        let disabled = this.disabled || !this.hasOptions;
+        const optionsDisplayed = this.hasOptionsMenuOpen;
+        const disabled = this.disabled || !this.hasOptions;
         const hasOptionSelected = ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) != null || ((_c = (_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : "").length > 0;
         const classes = {
             "ft-select": true,
@@ -71,7 +71,7 @@ class FtSelect extends FtLitElement {
             "ft-select--has-option-selected": hasOptionSelected,
             "ft-select--no-label": !this.label,
             "ft-select--fixed": this.fixedMenuPosition,
-            "ft-select--in-error": this.error
+            "ft-select--in-error": this.error,
         };
         return html `
             <div class="${classMap(classes)}" part="container">
@@ -105,7 +105,7 @@ class FtSelect extends FtLitElement {
                          part="options"
                          @keydown=${this.onOptionsKeyDown}
                          innerrole="listbox">
-                        ${repeat(this.options, option => option.value, option => this.renderOption(option))}
+                        ${repeat(this.options, (option) => option.value, (option) => this.renderOption(option))}
                     </div>
                 </div>
                 <slot name="helper" part="helper">
@@ -120,16 +120,17 @@ class FtSelect extends FtLitElement {
         `;
     }
     renderOption(option) {
-        let selected = this.selectedOption === option;
+        const selected = this.selectedOption === option;
         const classes = {
             "ft-select--option": true,
             "ft-select--option-selected": selected,
-            "ft-typography--body2": true
+            "ft-typography--body2": true,
         };
         return html `
             <div class="${classMap(classes)}"
                  part="option"
                  tabindex="0"
+                 aria-label="${option.label}"
                  data-value="${option.value}"
                  @keydown=${(e) => this.onOptionKeyDown(e, option)}
                  @click=${() => this.selectOption(option)}>
@@ -141,7 +142,7 @@ class FtSelect extends FtLitElement {
     update(props) {
         super.update(props);
         if (props.has("options")) {
-            this.selectedOption = this.options.filter(o => o.selected)[0];
+            this.selectedOption = this.options.filter((o) => o.selected)[0];
         }
         if (props.has("selectedOption")) {
             this.optionsDisplayed = false;
@@ -173,7 +174,7 @@ class FtSelect extends FtLitElement {
     updateOptionsFromSlot(e) {
         var _a;
         e.stopPropagation();
-        let optionsFromSlot = (_a = this.optionsSlot) === null || _a === void 0 ? void 0 : _a.assignedElements().map(n => n);
+        const optionsFromSlot = (_a = this.optionsSlot) === null || _a === void 0 ? void 0 : _a.assignedElements().map((n) => n);
         if (optionsFromSlot && optionsFromSlot.length > 0) {
             this.options = optionsFromSlot;
         }
@@ -231,26 +232,26 @@ class FtSelect extends FtLitElement {
         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)
+        const 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();
+        const 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; });
+        const 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;
+        const 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;
     }
@@ -268,7 +269,7 @@ class FtSelect extends FtLitElement {
         var _a, _b;
         if (!deepEqual((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value, option.value)) {
             this.selectedOption = option;
-            for (let otherOption of this.options) {
+            for (const otherOption of this.options) {
                 otherOption.selected = otherOption === option;
             }
             this.dispatchEvent(new CustomEvent("change", { detail: (_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.value }));
@@ -294,7 +295,7 @@ FtSelect.searchTimeoutMilliseconds = 2000;
 FtSelect.styles = [
     FtTypographyBody2,
     FtTypographyCaption,
-    styles
+    styles,
 ];
 __decorate([
     property({ type: String })

package/build/ft-select.light.js

@@ -694,6 +694,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
             <div class="${(0,ot.classMap)({"ft-select--option":!0,"ft-select--option-selected":n,"ft-typography--body2":!0})}"
                  part="option"
                  tabindex="0"
+                 aria-label="${r.label}"
                  data-value="${r.value}"
                  @keydown=${l=>this.onOptionKeyDown(l,r)}
                  @click=${()=>this.selectOption(r)}>