@fluid-topics/ft-filter 0.1.15 → 0.1.18

package/build/ft-filter.js

@@ -6,13 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html } from "lit";
 import { property, query, queryAll, state } from "lit/decorators.js";
-import { customElement, Debouncer, designSystemVariables, FtCssVariable, FtLitElement, jsonProperty, setVariable } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, designSystemVariables, FtCssVariable, FtLitElement, jsonProperty, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtTypography, FtTypographyCaption, FtTypographyCssVariables } from "@fluid-topics/ft-typography";
 import { flatDeep } from "./utils";
 import { FtFilterLevel } from "./ft-filter-level";
 import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
 import { FtSnapScroll } from "@fluid-topics/ft-snap-scroll";
-export * from "./ft-filter-option";
 export const FtFilterCssVariables = {
     colorOutline: FtCssVariable.external(designSystemVariables.colorOutline, "Design system"),
     colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "Design system"),
@@ -27,7 +26,7 @@ export class FtFilterChangeEvent extends CustomEvent {
         super("change", { detail: selectedValues });
     }
 }
-let FtFilter = class FtFilter extends FtLitElement {
+export class FtFilter extends FtLitElement {
     constructor() {
         super(...arguments);
         this.id = "";
@@ -47,122 +46,10 @@ let FtFilter = class FtFilter extends FtLitElement {
         this.levelsScrollDebouncer = new Debouncer(300);
         this.changeDebouncer = new Debouncer(10);
     }
-    // language=CSS
-    getStyles() {
-        return [
-            FtTypographyCaption,
-            css `
-                :host {
-                    display: flex;
-                    max-height: 100%;
-                    max-width: 100%;
-                }
-
-                .ft-filter--container {
-                    flex-grow: 1;
-                    display: flex;
-                    flex-direction: column;
-                    max-height: 100%;
-                    max-width: 100%;
-                    color: ${FtFilterCssVariables.colorOnSurface};
-                    background: ${FtFilterCssVariables.colorSurface};
-                }
-
-                .ft-filter--header {
-                    display: flex;
-                    flex-wrap: wrap;
-                    gap: 4px;
-                    flex-shrink: 0;
-                    padding: 0 10px;
-                    margin-bottom: 8px;
-                    ${setVariable(FtTypographyCssVariables.fontSize, "14px")};
-                }
-
-                .ft-filter--header ft-button {
-                    flex-shrink: 0;
-                    margin-left: auto;
-                    ${setVariable(FtButtonCssVariables.iconSize, "18px")};
-                }
-
-                .ft-filter--label {
-                    display: block;
-                    flex-shrink: 1;
-                    flex-grow: 1;
-                    word-break: break-word;
-                    ${setVariable(FtTypographyCssVariables.lineHeight, "22px")};
-                    ${setVariable(FtTypographyCssVariables.fontWeight, "bold")};
-                }
-
-                .ft-filter--filter {
-                    flex-shrink: 0;
-                    display: flex;
-                    margin: 0;
-                    margin-bottom: 8px;
-                    padding: 0 10px;
-                    overflow: hidden;
-                    height: 32px;
-                    transition: height ${FtFilterCssVariables.transitionDuration} ${FtFilterCssVariables.transitionTimingFunction},
-                    margin ${FtFilterCssVariables.transitionDuration} ${FtFilterCssVariables.transitionTimingFunction};
-                    transition-delay: 500ms;
-                }
-
-                .ft-filter--filter[hidden] {
-                    height: 0;
-                    margin-bottom: 0;
-                }
-
-                input {
-                    display: block;
-                    width: 100%;
-                    border-radius: 4px;
-                    border: 1px solid ${FtFilterCssVariables.colorOutline};
-                    padding: 4px;
-                    background-color: ${FtFilterCssVariables.colorSurface};
-                    color: ${FtFilterCssVariables.colorOnSurfaceMedium};
-                    outline-color: ${FtFilterCssVariables.colorPrimary};
-                }
-
-                .ft-filter--values {
-                    flex-grow: 1;
-                    flex-shrink: 1;
-                    max-width: 100%;
-                    overflow-x: hidden;
-                    overflow-y: auto;
-                }
-
-                .ft-filter--separator {
-                    border-top: 1px solid ${FtFilterCssVariables.colorOutline};
-                    margin: 4px 10px;
-                }
-
-                .ft-filter--levels-container {
-                    position: relative;
-                    overflow: hidden;
-                }
-
-                .ft-filter--levels {
-                    position: relative;
-                    overflow: hidden;
-                }
-
-                ft-filter-level {
-                    width: 100%;
-                }
-
-                .ft-filter--level-left {
-                    height: 0;
-                }
-
-                slot {
-                    display: none;
-                }
-            `
-        ];
-    }
     get flatOptions() {
         return flatDeep(this.options, o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; });
     }
-    getTemplate() {
+    render() {
         var _a, _b;
         const valuesSelected = this.flatOptions.some(o => o.selected);
         let showFilter = this.withScroll || this.filter || ((_b = (_a = this.lastLevel) === null || _a === void 0 ? void 0 : _a.hasHiddenValues) !== null && _b !== void 0 ? _b : false);
@@ -352,13 +239,123 @@ let FtFilter = class FtFilter extends FtLitElement {
             this.withScroll = this.valuesContainer.scrollHeight > this.valuesContainer.clientHeight;
         }
     }
-};
+}
 FtFilter.elementDefinitions = {
     "ft-button": FtButton,
     "ft-filter-level": FtFilterLevel,
     "ft-snap-scroll": FtSnapScroll,
     "ft-typography": FtTypography,
 };
+// language=CSS
+FtFilter.styles = [
+    FtTypographyCaption,
+    css `
+            :host {
+                display: flex;
+                max-height: 100%;
+                max-width: 100%;
+            }
+
+            .ft-filter--container {
+                flex-grow: 1;
+                display: flex;
+                flex-direction: column;
+                max-height: 100%;
+                max-width: 100%;
+                color: ${FtFilterCssVariables.colorOnSurface};
+                background: ${FtFilterCssVariables.colorSurface};
+            }
+
+            .ft-filter--header {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 4px;
+                flex-shrink: 0;
+                padding: 0 10px;
+                margin-bottom: 8px;
+                ${setVariable(FtTypographyCssVariables.fontSize, "14px")};
+            }
+
+            .ft-filter--header ft-button {
+                flex-shrink: 0;
+                margin-left: auto;
+                ${setVariable(FtButtonCssVariables.iconSize, "18px")};
+            }
+
+            .ft-filter--label {
+                display: block;
+                flex-shrink: 1;
+                flex-grow: 1;
+                word-break: break-word;
+                ${setVariable(FtTypographyCssVariables.lineHeight, "22px")};
+                ${setVariable(FtTypographyCssVariables.fontWeight, "bold")};
+            }
+
+            .ft-filter--filter {
+                flex-shrink: 0;
+                display: flex;
+                margin: 0;
+                margin-bottom: 8px;
+                padding: 0 10px;
+                overflow: hidden;
+                height: 32px;
+                transition: height ${FtFilterCssVariables.transitionDuration} ${FtFilterCssVariables.transitionTimingFunction},
+                margin ${FtFilterCssVariables.transitionDuration} ${FtFilterCssVariables.transitionTimingFunction};
+                transition-delay: 500ms;
+            }
+
+            .ft-filter--filter[hidden] {
+                height: 0;
+                margin-bottom: 0;
+            }
+
+            input {
+                display: block;
+                width: 100%;
+                border-radius: 4px;
+                border: 1px solid ${FtFilterCssVariables.colorOutline};
+                padding: 4px;
+                background-color: ${FtFilterCssVariables.colorSurface};
+                color: ${FtFilterCssVariables.colorOnSurfaceMedium};
+                outline-color: ${FtFilterCssVariables.colorPrimary};
+            }
+
+            .ft-filter--values {
+                flex-grow: 1;
+                flex-shrink: 1;
+                max-width: 100%;
+                overflow-x: hidden;
+                overflow-y: auto;
+            }
+
+            .ft-filter--separator {
+                border-top: 1px solid ${FtFilterCssVariables.colorOutline};
+                margin: 4px 10px;
+            }
+
+            .ft-filter--levels-container {
+                position: relative;
+                overflow: hidden;
+            }
+
+            .ft-filter--levels {
+                position: relative;
+                overflow: hidden;
+            }
+
+            ft-filter-level {
+                width: 100%;
+            }
+
+            .ft-filter--level-left {
+                height: 0;
+            }
+
+            slot {
+                display: none;
+            }
+        `
+];
 __decorate([
     property({ type: String })
 ], FtFilter.prototype, "id", void 0);
@@ -419,8 +416,4 @@ __decorate([
 __decorate([
     state()
 ], FtFilter.prototype, "slideOut", void 0);
-FtFilter = __decorate([
-    customElement("ft-filter")
-], FtFilter);
-export { FtFilter };
 //# sourceMappingURL=ft-filter.js.map