@fluid-topics/ft-filter 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/build/ft-filter-level.d.ts +16 -1
  3. package/build/ft-filter-level.js +36 -20
  4. package/build/ft-filter.d.ts +10 -3
  5. package/build/ft-filter.js +25 -12
  6. package/build/ft-filter.min.js +291 -128
  7. package/package.json +7 -7
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- Flat selector for multivalued or monovalued filters
1
+ A Flat selector for multivalued or monovalued filters.
2
2
 
3
3
  ## Install
4
4
 
package/build/ft-filter-level.d.ts CHANGED
@@ -1,5 +1,20 @@
1
- import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
1
+ import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
2
2
  import { FtFilterOptionProperties } from "./ft-filter-option";
3
+ export declare const FtFilterLevelCssVariables: {
4
+ borderRadiusM: FtCssVariable;
5
+ colorOutline: FtCssVariable;
6
+ colorOnSurface: FtCssVariable;
7
+ colorOnSurfaceMedium: FtCssVariable;
8
+ colorOnSurfaceDisabled: FtCssVariable;
9
+ colorPrimary: FtCssVariable;
10
+ colorOnPrimary: FtCssVariable;
11
+ fontFamily: FtCssVariable;
12
+ fontSize: FtCssVariable;
13
+ fontWeight: FtCssVariable;
14
+ letterSpacing: FtCssVariable;
15
+ lineHeight: FtCssVariable;
16
+ textTransform: FtCssVariable;
17
+ };
3
18
  export declare class FtFilterLevel extends FtLitElement {
4
19
  static elementDefinitions: ElementDefinitionsMap;
5
20
  protected getStyles(): import("lit").CSSResult[];
package/build/ft-filter-level.js CHANGED
@@ -7,15 +7,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { css, html, nothing } from "lit";
8
8
  import { property, query, state } from "lit/decorators.js";
9
9
  import { repeat } from "lit/directives/repeat.js";
10
- import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
10
+ import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
11
11
  import { Checkbox } from "@material/mwc-checkbox";
12
12
  import { flatDeep } from "./utils";
13
- import { FtButton } from "@fluid-topics/ft-button";
14
- import { FtTypography } from "@fluid-topics/ft-typography";
13
+ import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
14
+ import { FtTypography, FtTypographyBody2CssVariables } from "@fluid-topics/ft-typography";
15
15
  import { Formfield } from "@material/mwc-formfield";
16
16
  import { Radio } from "@material/mwc-radio";
17
17
  import { Icon } from "@material/mwc-icon";
18
18
  import { FtRipple } from "@fluid-topics/ft-ripple";
19
+ export const FtFilterLevelCssVariables = {
20
+ borderRadiusM: FtCssVariable.external(designSystemVariables.borderRadiusM, "Design system"),
21
+ colorOutline: FtCssVariable.external(designSystemVariables.colorOutline, "Design system"),
22
+ colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "Design system"),
23
+ colorOnSurfaceMedium: FtCssVariable.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
24
+ colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
25
+ colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
26
+ colorOnPrimary: FtCssVariable.external(designSystemVariables.colorOnPrimary, "Design system"),
27
+ fontFamily: FtCssVariable.external(FtTypographyBody2CssVariables.fontFamily, "Body2 typography"),
28
+ fontSize: FtCssVariable.external(FtTypographyBody2CssVariables.fontSize, "Body2 typography"),
29
+ fontWeight: FtCssVariable.external(FtTypographyBody2CssVariables.fontWeight, "Body2 typography"),
30
+ letterSpacing: FtCssVariable.external(FtTypographyBody2CssVariables.letterSpacing, "Body2 typography"),
31
+ lineHeight: FtCssVariable.external(FtTypographyBody2CssVariables.lineHeight, "Body2 typography"),
32
+ textTransform: FtCssVariable.external(FtTypographyBody2CssVariables.textTransform, "Body2 typography"),
33
+ };
19
34
  let FtFilterLevel = class FtFilterLevel extends FtLitElement {
20
35
  constructor() {
21
36
  super(...arguments);
@@ -47,14 +62,14 @@ let FtFilterLevel = class FtFilterLevel extends FtLitElement {
47
62
  flex-shrink: 0;
48
63
  text-decoration: none;
49
64
  position: relative;
50
- border-radius: var(--ft-border-radius-M, 8px);
65
+ border-radius: ${FtFilterLevelCssVariables.borderRadiusM};
51
66
  overflow: hidden;
52
67
  display: flex;
53
68
  align-items: center;
54
69
  padding: 4px 4px;
55
70
  gap: 4px;
56
71
  cursor: pointer;
57
- color: var(--ft-color-on-surface, rgba(0, 0, 0, 0.87));
72
+ color: ${FtFilterLevelCssVariables.colorOnSurface};
58
73
  }
59
74
 
60
75
  .ft-filter-level--go-back:focus {
@@ -83,7 +98,7 @@ let FtFilterLevel = class FtFilterLevel extends FtLitElement {
83
98
  }
84
99
 
85
100
  ft-button {
86
- --ft-color-primary: var(--ft-color-on-surface, rgba(0, 0, 0, 0.87));
101
+ ${setVariable(FtButtonCssVariables.color, FtFilterLevelCssVariables.colorOnSurface)};
87
102
  }
88
103
 
89
104
  mwc-formfield {
@@ -94,27 +109,28 @@ let FtFilterLevel = class FtFilterLevel extends FtLitElement {
94
109
  margin-left: -10px;
95
110
  word-break: break-word;
96
111
 
97
- --mdc-theme-secondary: var(--ft-color-primary, #2196F3);
112
+ --mdc-theme-secondary: ${FtFilterLevelCssVariables.colorPrimary};
98
113
 
99
- --mdc-radio-unchecked-color: var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60));
100
- --mdc-checkbox-unchecked-color: var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60));
101
- --mdc-checkbox-ink-color: var(--ft-color-on-primary, #FFFFFF);
114
+ --mdc-radio-unchecked-color: ${FtFilterLevelCssVariables.colorOnSurfaceMedium};
115
+ --mdc-checkbox-unchecked-color: ${FtFilterLevelCssVariables.colorOnSurfaceMedium};
116
+ --mdc-checkbox-ink-color: ${FtFilterLevelCssVariables.colorOnPrimary};
102
117
 
103
- --mdc-radio-disabled-color: var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));
104
- --mdc-checkbox-disabled-color: var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));
118
+ --mdc-radio-disabled-color: ${FtFilterLevelCssVariables.colorOnSurfaceDisabled};
119
+ --mdc-checkbox-disabled-color: ${FtFilterLevelCssVariables.colorOnSurfaceDisabled};
105
120
 
106
- --mdc-theme-on-surface: var(--ft-color-primary, #2196F3);
121
+ --mdc-theme-on-surface: ${FtFilterLevelCssVariables.colorPrimary};
107
122
 
108
- --mdc-typography-body2-font-family: var(--ft-typography-font-family, var(--ft-content-font, 'Open Sans')), system-ui, sans-serif;
109
- --mdc-typography-body2-font-size: var(--ft-typography-font-size, 14px);
110
- --mdc-typography-body2-font-weight: var(--ft-typography-font-weight, normal);
111
- --mdc-typography-body2-letter-spacing: var(--ft-typography-letter-spacing, 0.252px);
112
- --mdc-typography-body2-line-height: var(--ft-typography-line-height, 20px);
113
- --mdc-typography-body2-text-transform: var(--ft-typography-text-transform, inherit);
123
+ --mdc-typography-body2-font-family: ${FtFilterLevelCssVariables.fontFamily};
124
+ --mdc-typography-body2-font-size: ${FtFilterLevelCssVariables.fontSize};
125
+ --mdc-typography-body2-font-weight: ${FtFilterLevelCssVariables.fontWeight};
126
+ --mdc-typography-body2-letter-spacing: ${FtFilterLevelCssVariables.letterSpacing};
127
+ --mdc-typography-body2-line-height: ${FtFilterLevelCssVariables.lineHeight};
128
+ --mdc-typography-body2-text-transform: ${FtFilterLevelCssVariables.textTransform};
129
+ --mdc-theme-text-primary-on-background: ${FtFilterLevelCssVariables.colorOnSurface};
114
130
  }
115
131
 
116
132
  .ft-filter--disabled {
117
- --mdc-theme-text-primary-on-background: var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));
133
+ --mdc-theme-text-primary-on-background: ${FtFilterLevelCssVariables.colorOnSurfaceDisabled};
118
134
  }
119
135
  `
120
136
  ];
package/build/ft-filter.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { PropertyValues } from "lit";
2
- import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
2
+ import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
3
3
  import { FtFilterOptionProperties } from "./ft-filter-option";
4
4
  export * from "./ft-filter-option";
5
5
  export interface FtFilterProperties {
@@ -14,8 +14,15 @@ export interface FtFilterProperties {
14
14
  raiseSelectedOptions?: boolean;
15
15
  displayedValuesLimit?: number;
16
16
  }
17
- export interface FtFilterCssVariables {
18
- }
17
+ export declare const FtFilterCssVariables: {
18
+ colorOutline: FtCssVariable;
19
+ colorOnSurface: FtCssVariable;
20
+ colorOnSurfaceMedium: FtCssVariable;
21
+ colorPrimary: FtCssVariable;
22
+ colorSurface: FtCssVariable;
23
+ transitionDuration: FtCssVariable;
24
+ transitionTimingFunction: FtCssVariable;
25
+ };
19
26
  export declare class FtFilterChangeEvent extends CustomEvent<Array<any>> {
20
27
  constructor(selectedValues: any[]);
21
28
  }
package/build/ft-filter.js CHANGED
@@ -6,13 +6,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { css, html } from "lit";
8
8
  import { property, query, queryAll, state } from "lit/decorators.js";
9
- import { customElement, Debouncer, FtLitElement } from "@fluid-topics/ft-wc-utils";
10
- import { FtTypography, FtTypographyCaption } from "@fluid-topics/ft-typography";
9
+ import { customElement, Debouncer, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
10
+ import { FtTypography, FtTypographyCaption, FtTypographyCssVariables } from "@fluid-topics/ft-typography";
11
11
  import { flatDeep } from "./utils";
12
12
  import { FtFilterLevel } from "./ft-filter-level";
13
- import { FtButton } from "@fluid-topics/ft-button";
13
+ import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
14
14
  import { FtSnapScroll } from "@fluid-topics/ft-snap-scroll";
15
15
  export * from "./ft-filter-option";
16
+ export const FtFilterCssVariables = {
17
+ colorOutline: FtCssVariable.external(designSystemVariables.colorOutline, "Design system"),
18
+ colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "Design system"),
19
+ colorOnSurfaceMedium: FtCssVariable.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
20
+ colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
21
+ colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
22
+ transitionDuration: FtCssVariable.external(designSystemVariables.transitionDuration, "Design system"),
23
+ transitionTimingFunction: FtCssVariable.external(designSystemVariables.transitionTimingFunction, "Design system"),
24
+ };
16
25
  export class FtFilterChangeEvent extends CustomEvent {
17
26
  constructor(selectedValues) {
18
27
  super("change", { detail: selectedValues });
@@ -54,7 +63,8 @@ let FtFilter = class FtFilter extends FtLitElement {
54
63
  flex-direction: column;
55
64
  max-height: 100%;
56
65
  max-width: 100%;
57
- background: var(--ft-color-surface, #FFFFFF);
66
+ color: ${FtFilterCssVariables.colorOnSurface};
67
+ background: ${FtFilterCssVariables.colorSurface};
58
68
  }
59
69
 
60
70
  .ft-filter--header {
@@ -64,13 +74,13 @@ let FtFilter = class FtFilter extends FtLitElement {
64
74
  flex-shrink: 0;
65
75
  padding: 0 10px;
66
76
  margin-bottom: 8px;
67
- --ft-typography-font-size: 14px;
77
+ ${setVariable(FtTypographyCssVariables.fontSize, "14px")};
68
78
  }
69
79
 
70
80
  .ft-filter--header ft-button {
71
81
  flex-shrink: 0;
72
82
  margin-left: auto;
73
- --ft-button-icon-size: 18px;
83
+ ${setVariable(FtButtonCssVariables.iconSize, "18px")};
74
84
  }
75
85
 
76
86
  .ft-filter--label {
@@ -78,8 +88,8 @@ let FtFilter = class FtFilter extends FtLitElement {
78
88
  flex-shrink: 1;
79
89
  flex-grow: 1;
80
90
  word-break: break-word;
81
- --ft-typography-line-height: 22px;
82
- --ft-typography-font-weight: bold;
91
+ ${setVariable(FtTypographyCssVariables.lineHeight, "22px")};
92
+ ${setVariable(FtTypographyCssVariables.fontWeight, "bold")};
83
93
  }
84
94
 
85
95
  .ft-filter--filter {
@@ -90,7 +100,8 @@ let FtFilter = class FtFilter extends FtLitElement {
90
100
  padding: 0 10px;
91
101
  overflow: hidden;
92
102
  height: 32px;
93
- transition: height 250ms ease-in-out, margin 250ms ease-in-out;
103
+ transition: height ${FtFilterCssVariables.transitionDuration} ${FtFilterCssVariables.transitionTimingFunction},
104
+ margin ${FtFilterCssVariables.transitionDuration} ${FtFilterCssVariables.transitionTimingFunction};
94
105
  transition-delay: 500ms;
95
106
  }
96
107
 
@@ -103,9 +114,11 @@ let FtFilter = class FtFilter extends FtLitElement {
103
114
  display: block;
104
115
  width: 100%;
105
116
  border-radius: 4px;
106
- border: 1px solid var(--ft-color-outline, rgba(0, 0, 0, 0.14));
117
+ border: 1px solid ${FtFilterCssVariables.colorOutline};
107
118
  padding: 4px;
108
- outline-color: var(--ft-color-primary, #2196F3);
119
+ background-color: ${FtFilterCssVariables.colorSurface};
120
+ color: ${FtFilterCssVariables.colorOnSurfaceMedium};
121
+ outline-color: ${FtFilterCssVariables.colorPrimary};
109
122
  }
110
123
 
111
124
  .ft-filter--values {
@@ -117,7 +130,7 @@ let FtFilter = class FtFilter extends FtLitElement {
117
130
  }
118
131
 
119
132
  .ft-filter--separator {
120
- border-top: 1px solid var(--ft-color-outline, rgba(0, 0, 0, 0.14));
133
+ border-top: 1px solid ${FtFilterCssVariables.colorOutline};
121
134
  margin: 4px 10px;
122
135
  }
123
136