@fluid-topics/ft-filter 1.1.75 → 1.1.77

package/build/ft-filter-level.d.ts

@@ -25,12 +25,9 @@ export declare class FtFilterLevel extends FtLitElement {
     private goBackOnKeyPress;
     private goBackOnClick;
     private displayMore;
-    private onRadioChange;
     private buildMultiValuedOption;
     private buildMonoValuedOption;
-    private onRadioKeyUp;
+    private onRadioKeyDown;
     private optionsChanged;
     private displayLevel;
-    connectedCallback(): void;
-    private makeRadioKeyBoardNavigable;
 }

package/build/ft-filter-level.js

@@ -116,18 +116,6 @@ class FtFilterLevel extends FtLitElement {
     }
     displayMore() {
         this.displayedPages++;
-        this.makeRadioKeyBoardNavigable();
-    }
-    onRadioChange(e) {
-        var _a;
-        e.stopPropagation();
-        const event = e;
-        (_a = this.radios) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
-            //we put radio.name in the FtRadioChangeEvent detail.value because in ft-filter-level
-            //ft-radio don't have value
-            radio.checked = (radio.name === event.detail.value);
-            radio.setAttribute("tabindex", "0"); // to make all ft-radio keyboard navigable
-        });
     }
     buildMultiValuedOption(option) {
         var _a;
@@ -135,7 +123,6 @@ class FtFilterLevel extends FtLitElement {
             <ft-checkbox name="${this.filterId}"
                          part="multivalued-option"
                          data-value="${option.value}"
-
                          .checked=${option.selected}
                          .disabled=${this.disabled}
                          .indeterminate=${flatDeep((_a = option.subOptions) !== null && _a !== void 0 ? _a : [], o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; }).some(o => o.selected)}
@@ -149,17 +136,19 @@ class FtFilterLevel extends FtLitElement {
             <ft-radio name="${this.filterId + Math.round(Math.random() * 1000000)}"
                       part="monovalued-option"
                       data-value="${option.value}"
+                      value="${option.value}"
                       .checked=${option.selected}
                       .disabled=${this.disabled}
-                      @click=${(e) => this.optionsChanged(e, option)}
-                      @keyup=${(e) => this.onRadioKeyUp(e, option)}
-                      @change=${(e) => this.onRadioChange(e)}>
+                      @keydown=${(e) => this.onRadioKeyDown(e, option)}
+                      @change=${(e) => this.optionsChanged(e, option)}>
                 ${option.renderOption ? option.renderOption : option.label}${this.displayCount ? ` (${option.count})` : ""}
             </ft-radio>
         `;
     }
-    onRadioKeyUp(e, option) {
-        if (option.selected && e.key === " ") {
+    onRadioKeyDown(e, option) {
+        e.stopPropagation();
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
             this.optionsChanged(e, option);
         }
     }
@@ -170,23 +159,6 @@ class FtFilterLevel extends FtLitElement {
     displayLevel(option) {
         this.dispatchEvent(new CustomEvent("display-level", { detail: option }));
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.makeRadioKeyBoardNavigable();
-    }
-    makeRadioKeyBoardNavigable() {
-        if (!this.multivalued) {
-            setTimeout(() => {
-                var _a, _b;
-                this.radios = Array.from((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ft-radio"));
-                (_b = this.radios) === null || _b === void 0 ? void 0 : _b.forEach(option => {
-                    var _a, _b;
-                    option.setAttribute("tabindex", "0");
-                    (_b = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("input[type=\"radio\"]")) === null || _b === void 0 ? void 0 : _b.setAttribute("tabindex", "-1");
-                });
-            }, 5);
-        }
-    }
 }
 FtFilterLevel.elementDefinitions = {
     "ft-button": FtButton,