@fluid-topics/ft-filter 0.3.11 → 0.3.13

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

@@ -0,0 +1,17 @@
+export declare const FtFilterLevelCssVariables: {
+    borderRadiusM: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-filter-level.css.d.ts.map

package/build/ft-filter-level.css.js

@@ -0,0 +1,88 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button/build/ft-button.css";
+import { FtTypographyBody2CssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
+export const FtFilterLevelCssVariables = {
+    borderRadiusM: FtCssVariableFactory.external(designSystemVariables.borderRadiusM, "Design system"),
+    colorOutline: FtCssVariableFactory.external(designSystemVariables.colorOutline, "Design system"),
+    colorOnSurface: FtCssVariableFactory.external(designSystemVariables.colorOnSurface, "Design system"),
+    colorOnSurfaceMedium: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
+    colorOnSurfaceDisabled: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
+    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
+    colorOnPrimary: FtCssVariableFactory.external(designSystemVariables.colorOnPrimary, "Design system"),
+    fontFamily: FtCssVariableFactory.external(FtTypographyBody2CssVariables.fontFamily, "Body2 typography"),
+    fontSize: FtCssVariableFactory.external(FtTypographyBody2CssVariables.fontSize, "Body2 typography"),
+    fontWeight: FtCssVariableFactory.external(FtTypographyBody2CssVariables.fontWeight, "Body2 typography"),
+    letterSpacing: FtCssVariableFactory.external(FtTypographyBody2CssVariables.letterSpacing, "Body2 typography"),
+    lineHeight: FtCssVariableFactory.external(FtTypographyBody2CssVariables.lineHeight, "Body2 typography"),
+    textTransform: FtCssVariableFactory.external(FtTypographyBody2CssVariables.textTransform, "Body2 typography"),
+};
+// language=CSS
+export const 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: flex;
+        max-width: calc(100% + 10px);
+        margin-left: -10px;
+        word-break: break-word;
+    }
+
+    .ft-filter-level--no-values {
+        margin: 10px 0;
+        color: ${FtFilterLevelCssVariables.colorOnSurfaceMedium};
+    }
+`;
+//# sourceMappingURL=ft-filter-level.css.js.map

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

@@ -1,23 +1,8 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtFilterOptionProperties } from "./ft-filter-option";
-export declare const FtFilterLevelCssVariables: {
-    borderRadiusM: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurfaceDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    fontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    letterSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    lineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textTransform: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
+import { FtFilterOptionProperties } from "./ft-filter-option.properties";
 export declare class FtFilterLevel extends FtLitElement {
     static elementDefinitions: ElementDefinitionsMap;
-    static styles: import("lit").CSSResult[];
+    static styles: import("lit").CSSResult;
     id: string;
     parent?: FtFilterOptionProperties;
     options: Array<FtFilterOptionProperties>;

package/build/ft-filter-level.js

@@ -4,32 +4,18 @@ 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 { css, html, nothing } from "lit";
+import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { designSystemVariables, FtCssVariableFactory, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement } 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 { FtButton } from "@fluid-topics/ft-button";
+import { FtTypography } from "@fluid-topics/ft-typography";
 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: FtCssVariableFactory.external(designSystemVariables.borderRadiusM, "Design system"),
-    colorOutline: FtCssVariableFactory.external(designSystemVariables.colorOutline, "Design system"),
-    colorOnSurface: FtCssVariableFactory.external(designSystemVariables.colorOnSurface, "Design system"),
-    colorOnSurfaceMedium: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
-    colorOnSurfaceDisabled: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
-    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
-    colorOnPrimary: FtCssVariableFactory.external(designSystemVariables.colorOnPrimary, "Design system"),
-    fontFamily: FtCssVariableFactory.external(FtTypographyBody2CssVariables.fontFamily, "Body2 typography"),
-    fontSize: FtCssVariableFactory.external(FtTypographyBody2CssVariables.fontSize, "Body2 typography"),
-    fontWeight: FtCssVariableFactory.external(FtTypographyBody2CssVariables.fontWeight, "Body2 typography"),
-    letterSpacing: FtCssVariableFactory.external(FtTypographyBody2CssVariables.letterSpacing, "Body2 typography"),
-    lineHeight: FtCssVariableFactory.external(FtTypographyBody2CssVariables.lineHeight, "Body2 typography"),
-    textTransform: FtCssVariableFactory.external(FtTypographyBody2CssVariables.textTransform, "Body2 typography"),
-};
+import { styles } from "./ft-filter-level.css";
 export class FtFilterLevel extends FtLitElement {
     constructor() {
         super(...arguments);
@@ -175,75 +161,7 @@ FtFilterLevel.elementDefinitions = {
     "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: flex;
-                max-width: calc(100% + 10px);
-                margin-left: -10px;
-                word-break: break-word;
-            }
-
-            .ft-filter-level--no-values {
-                margin: 10px 0;
-                color: ${FtFilterLevelCssVariables.colorOnSurfaceMedium};
-            }
-        `
-];
+FtFilterLevel.styles = styles;
 __decorate([
     property({ type: String })
 ], FtFilterLevel.prototype, "id", void 0);

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

@@ -1,11 +1,6 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { PropertyValues } from "lit";
-export interface FtFilterOptionProperties {
-    label: string;
-    value: any;
-    selected?: boolean;
-    subOptions?: Array<FtFilterOptionProperties>;
-}
+import { FtFilterOptionProperties } from "./ft-filter-option.properties";
 export declare class FtFilterOption extends FtLitElement implements FtFilterOptionProperties {
     static elementDefinitions: ElementDefinitionsMap;
     label: string;

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

@@ -0,0 +1,7 @@
+export interface FtFilterOptionProperties {
+    label: string;
+    value: any;
+    selected?: boolean;
+    subOptions?: Array<FtFilterOptionProperties>;
+}
+//# sourceMappingURL=ft-filter-option.properties.d.ts.map

package/build/ft-filter-option.properties.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ft-filter-option.properties.js.map

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

@@ -0,0 +1,11 @@
+export declare const FtFilterCssVariables: {
+    colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    transitionDuration: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    transitionTimingFunction: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=ft-filter.css.d.ts.map

package/build/ft-filter.css.js

@@ -0,0 +1,126 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyCaption, FtTypographyCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button/build/ft-button.css";
+export const FtFilterCssVariables = {
+    colorOutline: FtCssVariableFactory.external(designSystemVariables.colorOutline, "Design system"),
+    colorOnSurface: FtCssVariableFactory.external(designSystemVariables.colorOnSurface, "Design system"),
+    colorOnSurfaceMedium: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
+    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
+    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
+    transitionDuration: FtCssVariableFactory.external(designSystemVariables.transitionDuration, "Design system"),
+    transitionTimingFunction: FtCssVariableFactory.external(designSystemVariables.transitionTimingFunction, "Design system"),
+};
+export const 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};
+            }
+
+            .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.colorOnSurface};
+                outline-color: ${FtFilterCssVariables.colorPrimary};
+            }
+
+            input::placeholder {
+                color: ${FtFilterCssVariables.colorOnSurfaceMedium};
+            }
+
+            .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;
+            }
+        `
+];
+//# sourceMappingURL=ft-filter.css.js.map

package/build/ft-filter.d.ts

@@ -1,28 +1,7 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtFilterOptionProperties } from "./ft-filter-option";
-export interface FtFilterProperties {
-    id: string;
-    label: string;
-    filterPlaceHolder?: string;
-    clearButtonLabel?: string;
-    moreValuesButtonLabel?: string;
-    noValuesLabel?: string;
-    options: Array<FtFilterOptionProperties>;
-    multivalued?: boolean;
-    disabled?: boolean;
-    raiseSelectedOptions?: boolean;
-    displayedValuesLimit?: number;
-}
-export declare const FtFilterCssVariables: {
-    colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    transitionDuration: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    transitionTimingFunction: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
+import { FtFilterProperties } from "./ft-filter.properties";
+import { FtFilterOptionProperties } from "./ft-filter-option.properties";
 export declare class FtFilterChangeEvent extends CustomEvent<Array<any>> {
     constructor(selectedValues: any[]);
 }

package/build/ft-filter.js

@@ -4,23 +4,15 @@ 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 { css, html } from "lit";
+import { html } from "lit";
 import { property, query, queryAll, state } from "lit/decorators.js";
-import { Debouncer, designSystemVariables, FtCssVariableFactory, FtLitElement, jsonProperty, setVariable } from "@fluid-topics/ft-wc-utils";
-import { FtTypography, FtTypographyCaption, FtTypographyCssVariables } from "@fluid-topics/ft-typography";
+import { Debouncer, FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
+import { FtTypography } from "@fluid-topics/ft-typography";
 import { flatDeep } from "./utils";
 import { FtFilterLevel } from "./ft-filter-level";
-import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
+import { FtButton } from "@fluid-topics/ft-button";
 import { FtSnapScroll } from "@fluid-topics/ft-snap-scroll";
-export const FtFilterCssVariables = {
-    colorOutline: FtCssVariableFactory.external(designSystemVariables.colorOutline, "Design system"),
-    colorOnSurface: FtCssVariableFactory.external(designSystemVariables.colorOnSurface, "Design system"),
-    colorOnSurfaceMedium: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
-    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
-    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
-    transitionDuration: FtCssVariableFactory.external(designSystemVariables.transitionDuration, "Design system"),
-    transitionTimingFunction: FtCssVariableFactory.external(designSystemVariables.transitionTimingFunction, "Design system"),
-};
+import { styles } from "./ft-filter.css";
 export class FtFilterChangeEvent extends CustomEvent {
     constructor(selectedValues) {
         super("change", { detail: selectedValues });
@@ -252,118 +244,7 @@ FtFilter.elementDefinitions = {
     "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};
-            }
-
-            .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.colorOnSurface};
-                outline-color: ${FtFilterCssVariables.colorPrimary};
-            }
-
-            input::placeholder {
-                color: ${FtFilterCssVariables.colorOnSurfaceMedium};
-            }
-
-            .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;
-            }
-        `
-];
+FtFilter.styles = styles;
 __decorate([
     property({ type: String })
 ], FtFilter.prototype, "id", void 0);