@fluid-topics/ft-filter 0.1.16 → 0.2.0

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

@@ -17,7 +17,7 @@ export declare const FtFilterLevelCssVariables: {
 };
 export declare class FtFilterLevel extends FtLitElement {
     static elementDefinitions: ElementDefinitionsMap;
-    protected getStyles(): import("lit").CSSResult[];
+    static styles: import("lit").CSSResult[];
     id: string;
     parent?: FtFilterOptionProperties;
     options: Array<FtFilterOptionProperties>;
@@ -33,12 +33,13 @@ export declare class FtFilterLevel extends FtLitElement {
     get hasHiddenValues(): boolean;
     private get limit();
     get height(): number;
-    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     private goBackOnKeyPress;
     private goBackOnClick;
     private displayMore;
     private buildMultiValuedOption;
     private buildMonoValuedOption;
+    private onRadioKeyUp;
     private optionsChanged;
     private displayLevel;
 }

package/build/ft-filter-level.js

@@ -7,15 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
-import { Checkbox } from "@material/mwc-checkbox";
+import { designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
 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"),
@@ -31,7 +30,7 @@ export const FtFilterLevelCssVariables = {
     lineHeight: FtCssVariable.external(FtTypographyBody2CssVariables.lineHeight, "Body2 typography"),
     textTransform: FtCssVariable.external(FtTypographyBody2CssVariables.textTransform, "Body2 typography"),
 };
-let FtFilterLevel = class FtFilterLevel extends FtLitElement {
+export class FtFilterLevel extends FtLitElement {
     constructor() {
         super(...arguments);
         this.id = "";
@@ -45,96 +44,6 @@ let FtFilterLevel = class FtFilterLevel extends FtLitElement {
         this.displayedValuesLimit = 0;
         this.displayedPages = 1;
     }
-    // language=CSS
-    getStyles() {
-        return [
-            css `
-                .ft-filter-level--container {
-                    display: flex;
-                    flex-direction: column;
-                }
-
-                .ft-filter-level--container > * {
-                    padding: 0 10px;
-                }
-
-                .ft-filter-level--go-back {
-                    flex-shrink: 0;
-                    text-decoration: none;
-                    position: relative;
-                    border-radius: ${FtFilterLevelCssVariables.borderRadiusM};
-                    overflow: hidden;
-                    display: flex;
-                    align-items: center;
-                    padding: 4px 4px;
-                    gap: 4px;
-                    cursor: pointer;
-                    color: ${FtFilterLevelCssVariables.colorOnSurface};
-                }
-
-                .ft-filter-level--go-back:focus {
-                    outline: none;
-                }
-
-                .ft-filter-level--go-back mwc-icon {
-                    flex-shrink: 0;
-                }
-
-                .ft-filter-level--go-back ft-typography {
-                    display: block;
-                    flex-grow: 1;
-                    flex-shrink: 0;
-                }
-
-                .ft-filter-level--option {
-                    display: flex;
-                    align-items: center;
-                    max-width: 100%;
-                }
-
-                .ft-filter-level--option ft-button {
-                    margin-right: -10px;
-                    flex-shrink: 0;
-                }
-
-                ft-button {
-                    ${setVariable(FtButtonCssVariables.color, FtFilterLevelCssVariables.colorOnSurface)};
-                }
-
-                mwc-formfield {
-                    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};
-                }
-            `
-        ];
-    }
     get hasHiddenValues() {
         let limit = this.limit;
         return limit != null && limit < this.options.length;
@@ -146,7 +55,7 @@ let FtFilterLevel = class FtFilterLevel extends FtLitElement {
         var _a, _b;
         return (_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0;
     }
-    getTemplate() {
+    render() {
         let options = this.options;
         if (this.hideSelectedOptions) {
             options = options.filter(o => !o.selected);
@@ -164,7 +73,7 @@ let FtFilterLevel = 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>
                 `}
@@ -211,30 +120,33 @@ let FtFilterLevel = 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 }));
@@ -242,16 +154,80 @@ let FtFilterLevel = class FtFilterLevel extends FtLitElement {
     displayLevel(option) {
         this.dispatchEvent(new CustomEvent("display-level", { detail: option }));
     }
-};
+}
 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 = [
+    css `
+            .ft-filter-level--container {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .ft-filter-level--container > * {
+                padding: 0 10px;
+            }
+
+            .ft-filter-level--go-back {
+                flex-shrink: 0;
+                text-decoration: none;
+                position: relative;
+                border-radius: ${FtFilterLevelCssVariables.borderRadiusM};
+                overflow: hidden;
+                display: flex;
+                align-items: center;
+                padding: 4px 4px;
+                gap: 4px;
+                cursor: pointer;
+                color: ${FtFilterLevelCssVariables.colorOnSurface};
+            }
+
+            .ft-filter-level--go-back:focus {
+                outline: none;
+            }
+
+            .ft-filter-level--go-back ft-icon {
+                flex-shrink: 0;
+            }
+
+            .ft-filter-level--go-back ft-typography {
+                display: block;
+                flex-grow: 1;
+                flex-shrink: 0;
+            }
+
+            .ft-filter-level--option {
+                display: flex;
+                align-items: center;
+                max-width: 100%;
+            }
+
+            .ft-filter-level--option ft-button {
+                margin-right: -10px;
+                flex-shrink: 0;
+            }
+
+            ft-button {
+                ${setVariable(FtButtonCssVariables.color, FtFilterLevelCssVariables.colorOnSurface)};
+            }
+
+            ft-radio, ft-checkbox {
+                flex-shrink: 1;
+                flex-grow: 1;
+                display: block;
+                max-width: calc(100% + 10px);
+                margin-left: -10px;
+                word-break: break-word;
+            }
+        `
+];
 __decorate([
     property({ type: String })
 ], FtFilterLevel.prototype, "id", void 0);
@@ -288,8 +264,4 @@ __decorate([
 __decorate([
     state()
 ], FtFilterLevel.prototype, "displayedPages", void 0);
-FtFilterLevel = __decorate([
-    customElement("ft-filter-level")
-], FtFilterLevel);
-export { FtFilterLevel };
 //# sourceMappingURL=ft-filter-level.js.map

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

@@ -13,7 +13,7 @@ export declare class FtFilterOption extends FtLitElement implements FtFilterOpti
     selected: boolean;
     subOptions: Array<FtFilterOptionProperties>;
     private slotElement;
-    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     private updateSubOptionsFromSlot;
     protected updated(changedProperties: PropertyValues): void;
 }

package/build/ft-filter-option.js

@@ -4,10 +4,10 @@ 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 { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { property, query } from "lit/decorators.js";
 import { html } from "lit";
-let FtFilterOption = class FtFilterOption extends FtLitElement {
+export class FtFilterOption extends FtLitElement {
     constructor() {
         super(...arguments);
         this.label = "";
@@ -15,7 +15,7 @@ let FtFilterOption = class FtFilterOption extends FtLitElement {
         this.selected = false;
         this.subOptions = [];
     }
-    getTemplate() {
+    render() {
         return html `
             <slot class="ft-filter-option--slot" @slotchange=${this.updateSubOptionsFromSlot}></slot>
         `;
@@ -28,7 +28,7 @@ let FtFilterOption = class FtFilterOption extends FtLitElement {
         super.updated(changedProperties);
         this.dispatchEvent(new CustomEvent("option-change", { detail: this, bubbles: true }));
     }
-};
+}
 FtFilterOption.elementDefinitions = {};
 __decorate([
     property({ type: String })
@@ -48,8 +48,4 @@ __decorate([
 __decorate([
     query(".ft-filter-option--slot")
 ], FtFilterOption.prototype, "slotElement", void 0);
-FtFilterOption = __decorate([
-    customElement("ft-filter-option")
-], FtFilterOption);
-export { FtFilterOption };
 //# sourceMappingURL=ft-filter-option.js.map

package/build/ft-filter.d.ts

@@ -1,7 +1,6 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtFilterOptionProperties } from "./ft-filter-option";
-export * from "./ft-filter-option";
 export interface FtFilterProperties {
     id: string;
     label: string;
@@ -28,7 +27,7 @@ export declare class FtFilterChangeEvent extends CustomEvent<Array<any>> {
 }
 export declare class FtFilter extends FtLitElement implements FtFilterProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    protected getStyles(): import("lit").CSSResult[];
+    static styles: import("lit").CSSResult[];
     id: string;
     label: string;
     filterPlaceHolder: string;
@@ -52,7 +51,7 @@ export declare class FtFilter extends FtLitElement implements FtFilterProperties
     private slideOut?;
     private scrollResizeObserver;
     private get flatOptions();
-    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     protected update(props: PropertyValues): void;
     protected contentAvailableCallback(props: PropertyValues): void;
     private levelsScrollDebouncer;