@fluid-topics/ft-filter 0.1.17 → 0.1.18

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,7 +33,7 @@ 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;

package/build/ft-filter-level.js

@@ -7,7 +7,7 @@ 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 { 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";
@@ -31,7 +31,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 +45,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 +56,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);
@@ -242,7 +152,7 @@ let FtFilterLevel = class FtFilterLevel extends FtLitElement {
     displayLevel(option) {
         this.dispatchEvent(new CustomEvent("display-level", { detail: option }));
     }
-};
+}
 FtFilterLevel.elementDefinitions = {
     "ft-button": FtButton,
     "ft-ripple": FtRipple,
@@ -252,6 +162,94 @@ FtFilterLevel.elementDefinitions = {
     "mwc-icon": Icon,
     "mwc-radio": Radio,
 };
+// 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 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};
+            }
+        `
+];
 __decorate([
     property({ type: String })
 ], FtFilterLevel.prototype, "id", void 0);
@@ -288,8 +286,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;