@fluid-topics/ft-select 0.1.1 → 0.1.5

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 +15 -7
  2. package/build/ft-select.js +42 -22
  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[];
@@ -38,6 +45,7 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
38
45
  selectedOption?: FtSelectOptionProperties;
39
46
  private optionsDisplayed;
40
47
  private focusOptions;
48
+ private container?;
41
49
  private mainPanel?;
42
50
  private firstOption?;
43
51
  private focusedOption?;
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);
@@ -52,7 +65,7 @@ let FtSelect = class FtSelect extends FtLitElement {
52
65
  this.options = [];
53
66
  this.optionsDisplayed = false;
54
67
  this.focusOptions = false;
55
- this.hideOptions = () => this.optionsDisplayed = false;
68
+ this.hideOptions = (e) => this.optionsDisplayed = this.optionsDisplayed && e.composedPath().includes(this.container);
56
69
  }
57
70
  // language=CSS
58
71
  getStyles() {
@@ -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,14 +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)};
123
+ }
124
+
125
+ .ft-select:not(.ft-select--disabled):focus-within mwc-icon {
126
+ color: ${FtSelectCssVariables.colorPrimary};
110
127
  }
111
128
 
112
129
  .ft-select:not(.ft-select--disabled):focus-within ft-input-label {
113
- --ft-input-label-border-color: var(--ft-color-primary, #2196F3);
114
- --ft-input-label-text-color: var(--ft-color-primary, #2196F3);
130
+ ${setVariable(FtInputLabelCssVariables.borderColor, FtSelectCssVariables.colorPrimary)};
131
+ ${setVariable(FtInputLabelCssVariables.textColor, FtSelectCssVariables.colorPrimary)};
115
132
  }
116
133
 
117
134
  .ft-select--selected-option {
@@ -121,8 +138,8 @@ let FtSelect = class FtSelect extends FtLitElement {
121
138
  overflow: hidden;
122
139
  white-space: nowrap;
123
140
  text-overflow: ellipsis;
124
- --ft-typography-font-size: var(--ft-select-selected-option-size, 14px);
125
- --ft-typography-line-height: var(--ft-select-selected-option-size, 14px);
141
+ ${setVariable(FtTypographyBody1CssVariables.fontSize, FtSelectCssVariables.selectedOptionSize)};
142
+ ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtSelectCssVariables.selectedOptionSize)};
126
143
  }
127
144
 
128
145
  mwc-icon {
@@ -134,16 +151,16 @@ let FtSelect = class FtSelect extends FtLitElement {
134
151
  }
135
152
 
136
153
  .ft-select--filled .ft-select--input-panel {
137
- 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;
138
155
  }
139
156
 
140
157
  .ft-select--filled:not(.ft-select--no-label) .ft-select--selected-option {
141
158
  align-self: stretch;
142
- 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});
143
160
  }
144
161
 
145
162
  .ft-select--outlined .ft-select--input-panel {
146
- border-radius: var(--ft-border-radius-S, 4px);
163
+ border-radius: ${FtSelectCssVariables.borderRadiusS};
147
164
  }
148
165
 
149
166
  .ft-select--options {
@@ -152,9 +169,9 @@ let FtSelect = class FtSelect extends FtLitElement {
152
169
  top: 100%;
153
170
  left: 0;
154
171
  right: 0;
155
- background: var(--ft-color-surface, #FFFFFF);
156
- z-index: var(--ft-select-options-z-index, 1);
157
- 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};
158
175
  }
159
176
 
160
177
  .ft-select--options-displayed .ft-select--options {
@@ -171,7 +188,7 @@ let FtSelect = class FtSelect extends FtLitElement {
171
188
 
172
189
  .ft-select--helper-text {
173
190
  padding: 0 12px 0 16px;
174
- color: var(--ft-select-helper-color, var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60)));
191
+ color: ${FtSelectCssVariables.helperColor};
175
192
  }
176
193
  `
177
194
  ];
@@ -190,7 +207,7 @@ let FtSelect = class FtSelect extends FtLitElement {
190
207
  "ft-select--no-label": !this.label
191
208
  };
192
209
  return html `
193
- <div class="${classMap(classes)}" @click=${(e) => e.stopPropagation()} part="container">
210
+ <div class="${classMap(classes)}" part="container">
194
211
  <div class="ft-select--main-panel" part="main-panel">
195
212
  <ft-input-label text="${this.label}"
196
213
  part="label"
@@ -376,6 +393,9 @@ __decorate([
376
393
  __decorate([
377
394
  state()
378
395
  ], FtSelect.prototype, "focusOptions", void 0);
396
+ __decorate([
397
+ query(".ft-select")
398
+ ], FtSelect.prototype, "container", void 0);
379
399
  __decorate([
380
400
  query(".ft-select--input-panel")
381
401
  ], FtSelect.prototype, "mainPanel", void 0);