@fluid-topics/ft-filter 0.1.18 → 0.2.0

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

@@ -39,6 +39,7 @@ export declare class FtFilterLevel extends FtLitElement {
     private displayMore;
     private buildMultiValuedOption;
     private buildMonoValuedOption;
+    private onRadioKeyUp;
     private optionsChanged;
     private displayLevel;
 }

package/build/ft-filter-level.js

@@ -8,14 +8,13 @@ import { css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
-import { Checkbox } from "@material/mwc-checkbox";
 import { flatDeep } from "./utils";
 import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
 import { FtTypography, FtTypographyBody2CssVariables } from "@fluid-topics/ft-typography";
-import { Formfield } from "@material/mwc-formfield";
-import { Radio } from "@material/mwc-radio";
-import { Icon } from "@material/mwc-icon";
 import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtCheckbox } from "@fluid-topics/ft-checkbox";
+import { FtRadio } from "@fluid-topics/ft-radio";
 export const FtFilterLevelCssVariables = {
     borderRadiusM: FtCssVariable.external(designSystemVariables.borderRadiusM, "Design system"),
     colorOutline: FtCssVariable.external(designSystemVariables.colorOutline, "Design system"),
@@ -74,7 +73,7 @@ export class FtFilterLevel extends FtLitElement {
                          @keyup=${this.goBackOnKeyPress}
                          @click=${this.goBackOnClick}>
                         <ft-ripple></ft-ripple>
-                        <mwc-icon>chevron_left</mwc-icon>
+                        <ft-icon variant="material">chevron_left</ft-icon>
                         <ft-typography variant="body2">${this.parent.label}</ft-typography>
                     </div>
                 `}
@@ -121,30 +120,33 @@ export class FtFilterLevel extends FtLitElement {
     buildMultiValuedOption(option) {
         var _a;
         return html `
-            <mwc-formfield label="${option.label}">
-                <mwc-checkbox
-                        reducedTouchTarget
-                        .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)}
-                        @change=${(e) => this.optionsChanged(e, option)}
-                ></mwc-checkbox>
-            </mwc-formfield>
+            <ft-checkbox name="${this.id}"
+                         .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)}
+                         @change=${(e) => this.optionsChanged(e, option)}>
+                ${option.label}
+            </ft-checkbox>
         `;
     }
     buildMonoValuedOption(option) {
         return html `
-            <mwc-formfield label="${option.label}">
-                <mwc-radio
-                        reducedTouchTarget
-                        name="${this.id}"
-                        ?checked=${option.selected}
-                        ?disabled=${this.disabled}
-                        @click=${(e) => this.optionsChanged(e, option)}
-                ></mwc-radio>
-            </mwc-formfield>
+            <ft-radio name="${this.id + Math.round(Math.random() * 1000000)}"
+                      .checked=${option.selected}
+                      ?disabled=${this.disabled}
+                      @click=${(e) => this.optionsChanged(e, option)}
+                      @keyup=${(e) => this.onRadioKeyUp(e, option)}
+                      @change=${(e) => e.stopPropagation()}>
+
+                ${option.label}
+            </ft-radio>
         `;
     }
+    onRadioKeyUp(e, option) {
+        if (option.selected && e.key === " ") {
+            this.optionsChanged(e, option);
+        }
+    }
     optionsChanged(e, option) {
         e.stopPropagation();
         this.dispatchEvent(new CustomEvent("change", { detail: option }));
@@ -157,10 +159,9 @@ FtFilterLevel.elementDefinitions = {
     "ft-button": FtButton,
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
-    "mwc-checkbox": Checkbox,
-    "mwc-formfield": Formfield,
-    "mwc-icon": Icon,
-    "mwc-radio": Radio,
+    "ft-checkbox": FtCheckbox,
+    "ft-icon": FtIcon,
+    "ft-radio": FtRadio,
 };
 // language=CSS
 FtFilterLevel.styles = [
@@ -192,7 +193,7 @@ FtFilterLevel.styles = [
                 outline: none;
             }
 
-            .ft-filter-level--go-back mwc-icon {
+            .ft-filter-level--go-back ft-icon {
                 flex-shrink: 0;
             }
 
@@ -217,36 +218,13 @@ FtFilterLevel.styles = [
                 ${setVariable(FtButtonCssVariables.color, FtFilterLevelCssVariables.colorOnSurface)};
             }
 
-            mwc-formfield {
+            ft-radio, ft-checkbox {
                 flex-shrink: 1;
                 flex-grow: 1;
                 display: block;
                 max-width: calc(100% + 10px);
                 margin-left: -10px;
                 word-break: break-word;
-
-                --mdc-theme-secondary: ${FtFilterLevelCssVariables.colorPrimary};
-
-                --mdc-radio-unchecked-color: ${FtFilterLevelCssVariables.colorOnSurfaceMedium};
-                --mdc-checkbox-unchecked-color: ${FtFilterLevelCssVariables.colorOnSurfaceMedium};
-                --mdc-checkbox-ink-color: ${FtFilterLevelCssVariables.colorOnPrimary};
-
-                --mdc-radio-disabled-color: ${FtFilterLevelCssVariables.colorOnSurfaceDisabled};
-                --mdc-checkbox-disabled-color: ${FtFilterLevelCssVariables.colorOnSurfaceDisabled};
-
-                --mdc-theme-on-surface: ${FtFilterLevelCssVariables.colorPrimary};
-
-                --mdc-typography-body2-font-family: ${FtFilterLevelCssVariables.fontFamily};
-                --mdc-typography-body2-font-size: ${FtFilterLevelCssVariables.fontSize};
-                --mdc-typography-body2-font-weight: ${FtFilterLevelCssVariables.fontWeight};
-                --mdc-typography-body2-letter-spacing: ${FtFilterLevelCssVariables.letterSpacing};
-                --mdc-typography-body2-line-height: ${FtFilterLevelCssVariables.lineHeight};
-                --mdc-typography-body2-text-transform: ${FtFilterLevelCssVariables.textTransform};
-                --mdc-theme-text-primary-on-background: ${FtFilterLevelCssVariables.colorOnSurface};
-            }
-
-            .ft-filter--disabled {
-                --mdc-theme-text-primary-on-background: ${FtFilterLevelCssVariables.colorOnSurfaceDisabled};
             }
         `
 ];