@fluid-topics/ft-select 0.1.2 → 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 (4) hide show
  1. package/build/ft-select.d.ts +14 -7
  2. package/build/ft-select.js +34 -21
  3. package/build/ft-select.min.js +374 -105
  4. package/package.json +6 -6
package/build/ft-select.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
  export interface FtSelectOptionProperties {
4
4
  label?: string;
5
5
  value?: any;
@@ -21,12 +21,19 @@ export interface FtSelectProperties {
21
21
  options?: Array<FtSelectOptionProperties>;
22
22
  selectedOption?: FtSelectOptionProperties;
23
23
  }
24
- export interface FtSelectCssVariables {
25
- "--ft-select-label-size"?: string;
26
- "--ft-select-selected-option-size"?: string;
27
- "--ft-select-vertical-spacing"?: string;
28
- "--ft-select-helper-color"?: string;
29
- }
24
+ export declare const FtSelectCssVariables: {
25
+ labelSize: FtCssVariable;
26
+ selectedOptionSize: FtCssVariable;
27
+ verticalSpacing: FtCssVariable;
28
+ helperColor: FtCssVariable;
29
+ optionsZIndex: FtCssVariable;
30
+ colorSurface: FtCssVariable;
31
+ colorOnSurface: FtCssVariable;
32
+ colorOnSurfaceDisabled: FtCssVariable;
33
+ colorPrimary: FtCssVariable;
34
+ borderRadiusS: FtCssVariable;
35
+ elevation02: FtCssVariable;
36
+ };
30
37
  export declare class FtSelect extends FtLitElement implements FtSelectProperties {
31
38
  static elementDefinitions: ElementDefinitionsMap;
32
39
  protected getStyles(): import("lit").CSSResult[];
package/build/ft-select.js CHANGED
@@ -8,9 +8,9 @@ import { css, html } from "lit";
8
8
  import { property, query, state } from "lit/decorators.js";
9
9
  import { classMap } from "lit/directives/class-map.js";
10
10
  import { repeat } from "lit/directives/repeat.js";
11
- import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
12
- import { FtTypography, FtTypographyBody2, FtTypographyCaption } from "@fluid-topics/ft-typography";
13
- import { FtInputLabel } from "@fluid-topics/ft-input-label";
11
+ import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
12
+ import { FtTypography, FtTypographyBody1CssVariables, FtTypographyBody2, FtTypographyCaption } from "@fluid-topics/ft-typography";
13
+ import { FtInputLabel, FtInputLabelCssVariables } from "@fluid-topics/ft-input-label";
14
14
  import { FtRipple } from "@fluid-topics/ft-ripple";
15
15
  import { Icon } from "@material/mwc-icon";
16
16
  let FtSelectOption = class FtSelectOption extends FtLitElement {
@@ -42,6 +42,19 @@ FtSelectOption = __decorate([
42
42
  customElement("ft-select-option")
43
43
  ], FtSelectOption);
44
44
  export { FtSelectOption };
45
+ export const FtSelectCssVariables = {
46
+ labelSize: FtCssVariable.create("--ft-select-label-size", "SIZE", "11px"),
47
+ selectedOptionSize: FtCssVariable.create("--ft-select-selected-option-size", "SIZE", "14px"),
48
+ verticalSpacing: FtCssVariable.create("--ft-select-vertical-spacing", "SIZE", "4px"),
49
+ helperColor: FtCssVariable.extend("--ft-select-helper-color", designSystemVariables.colorOnSurfaceMedium),
50
+ optionsZIndex: FtCssVariable.create("--ft-select-options-z-index", "NUMBER", "2"),
51
+ colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
52
+ colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "Design system"),
53
+ colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
54
+ colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
55
+ borderRadiusS: FtCssVariable.external(designSystemVariables.borderRadiusS, "Design system"),
56
+ elevation02: FtCssVariable.external(designSystemVariables.elevation02, "Design system"),
57
+ };
45
58
  let FtSelect = class FtSelect extends FtLitElement {
46
59
  constructor() {
47
60
  super(...arguments);
@@ -73,7 +86,7 @@ let FtSelect = class FtSelect extends FtLitElement {
73
86
  .ft-select--main-panel {
74
87
  position: relative;
75
88
  display: flex;
76
- height: calc(4 * var(--ft-select-vertical-spacing, 4px) + var(--ft-select-label-size, 11px) + var(--ft-select-selected-option-size, 14px));
89
+ height: calc(4 * ${FtSelectCssVariables.verticalSpacing} + ${FtSelectCssVariables.labelSize} + ${FtSelectCssVariables.selectedOptionSize});
77
90
  }
78
91
 
79
92
  .ft-select--input-panel {
@@ -89,14 +102,14 @@ let FtSelect = class FtSelect extends FtLitElement {
89
102
 
90
103
  .ft-select--input-panel,
91
104
  .ft-select--option {
92
- color: var(--ft-color-on-surface, rgba(0, 0, 0, 0.87));
105
+ color: ${FtSelectCssVariables.colorOnSurface};
93
106
  --ft-opacity-color-content-on-surface-hover: 0.08;
94
107
  --ft-opacity-color-content-on-surface-dragged: 0.04;
95
108
  }
96
109
 
97
110
  .ft-select--disabled .ft-select--input-panel,
98
111
  .ft-select--disabled .ft-select--option {
99
- color: var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));
112
+ color: ${FtSelectCssVariables.colorOnSurfaceDisabled};
100
113
  }
101
114
 
102
115
  .ft-select:not(.ft-select--disabled) .ft-select--input-panel {
@@ -104,18 +117,18 @@ let FtSelect = class FtSelect extends FtLitElement {
104
117
  }
105
118
 
106
119
  ft-input-label {
107
- --ft-input-label-font-size: var(--ft-select-selected-option-size, 14px);
108
- --ft-input-label-raised-font-size: var(--ft-select-label-size, 11px);
109
- --ft-input-label-vertical-spacing: var(--ft-select-vertical-spacing, 4px);
120
+ ${setVariable(FtInputLabelCssVariables.fontSize, FtSelectCssVariables.selectedOptionSize)};
121
+ ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtSelectCssVariables.labelSize)};
122
+ ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtSelectCssVariables.verticalSpacing)};
110
123
  }
111
124
 
112
125
  .ft-select:not(.ft-select--disabled):focus-within mwc-icon {
113
- color: var(--ft-color-primary, #2196F3);
126
+ color: ${FtSelectCssVariables.colorPrimary};
114
127
  }
115
128
 
116
129
  .ft-select:not(.ft-select--disabled):focus-within ft-input-label {
117
- --ft-input-label-border-color: var(--ft-color-primary, #2196F3);
118
- --ft-input-label-text-color: var(--ft-color-primary, #2196F3);
130
+ ${setVariable(FtInputLabelCssVariables.borderColor, FtSelectCssVariables.colorPrimary)};
131
+ ${setVariable(FtInputLabelCssVariables.textColor, FtSelectCssVariables.colorPrimary)};
119
132
  }
120
133
 
121
134
  .ft-select--selected-option {
@@ -125,8 +138,8 @@ let FtSelect = class FtSelect extends FtLitElement {
125
138
  overflow: hidden;
126
139
  white-space: nowrap;
127
140
  text-overflow: ellipsis;
128
- --ft-typography-font-size: var(--ft-select-selected-option-size, 14px);
129
- --ft-typography-line-height: var(--ft-select-selected-option-size, 14px);
141
+ ${setVariable(FtTypographyBody1CssVariables.fontSize, FtSelectCssVariables.selectedOptionSize)};
142
+ ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtSelectCssVariables.selectedOptionSize)};
130
143
  }
131
144
 
132
145
  mwc-icon {
@@ -138,16 +151,16 @@ let FtSelect = class FtSelect extends FtLitElement {
138
151
  }
139
152
 
140
153
  .ft-select--filled .ft-select--input-panel {
141
- border-radius: var(--ft-border-radius-S, 4px) var(--ft-border-radius-S, 4px) 0 0;
154
+ border-radius: ${FtSelectCssVariables.borderRadiusS} ${FtSelectCssVariables.borderRadiusS} 0 0;
142
155
  }
143
156
 
144
157
  .ft-select--filled:not(.ft-select--no-label) .ft-select--selected-option {
145
158
  align-self: stretch;
146
- padding-top: calc(var(--ft-select-label-size, 11px) + 2 * var(--ft-select-vertical-spacing, 4px));
159
+ padding-top: calc(${FtSelectCssVariables.labelSize} + 2 * ${FtSelectCssVariables.verticalSpacing});
147
160
  }
148
161
 
149
162
  .ft-select--outlined .ft-select--input-panel {
150
- border-radius: var(--ft-border-radius-S, 4px);
163
+ border-radius: ${FtSelectCssVariables.borderRadiusS};
151
164
  }
152
165
 
153
166
  .ft-select--options {
@@ -156,9 +169,9 @@ let FtSelect = class FtSelect extends FtLitElement {
156
169
  top: 100%;
157
170
  left: 0;
158
171
  right: 0;
159
- background: var(--ft-color-surface, #FFFFFF);
160
- z-index: var(--ft-select-options-z-index, 1);
161
- box-shadow: var(--ft-elevation-02, 0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06));
172
+ background: ${FtSelectCssVariables.colorSurface};
173
+ z-index: ${FtSelectCssVariables.optionsZIndex};
174
+ box-shadow: ${FtSelectCssVariables.elevation02};
162
175
  }
163
176
 
164
177
  .ft-select--options-displayed .ft-select--options {
@@ -175,7 +188,7 @@ let FtSelect = class FtSelect extends FtLitElement {
175
188
 
176
189
  .ft-select--helper-text {
177
190
  padding: 0 12px 0 16px;
178
- color: var(--ft-select-helper-color, var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60)));
191
+ color: ${FtSelectCssVariables.helperColor};
179
192
  }
180
193
  `
181
194
  ];