@fluid-topics/ft-select 1.3.63 → 1.4.1
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.
- package/build/ft-select-option.d.ts +22 -0
- package/build/ft-select-option.js +74 -0
- package/build/ft-select-option.properties.d.ts +5 -0
- package/build/ft-select-option.properties.js +1 -0
- package/build/ft-select-option.styles.d.ts +1 -0
- package/build/ft-select-option.styles.js +32 -0
- package/build/ft-select.d.ts +9 -13
- package/build/ft-select.js +66 -92
- package/build/ft-select.light.js +256 -241
- package/build/ft-select.min.js +205 -190
- package/build/ft-select.styles.js +12 -26
- package/package.json +7 -7
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
|
-
import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { designSystemVariables, FtCssVariableFactory, setVariable, } from "@fluid-topics/ft-wc-utils";
|
|
3
3
|
import { FtInputLabelCssVariables } from "@fluid-topics/ft-input-label/build/ft-input-label.styles";
|
|
4
4
|
import { FtTypographyBody1CssVariables } from "@fluid-topics/ft-typography/build/ft-typography.styles";
|
|
5
5
|
import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
|
|
@@ -31,6 +31,7 @@ export const styles = css `
|
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-direction: column;
|
|
33
33
|
align-items: stretch;
|
|
34
|
+
max-width: 100%;
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
.ft-select--main-panel {
|
|
@@ -53,23 +54,22 @@ export const styles = css `
|
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
.ft-select--input-panel,
|
|
56
|
-
.ft-select--
|
|
57
|
+
.ft-select--options {
|
|
57
58
|
${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
|
|
58
59
|
${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, "0.04")};
|
|
59
60
|
}
|
|
60
61
|
|
|
61
|
-
.ft-select--input-panel > *:not(ft-ripple)
|
|
62
|
-
.ft-select--option > *:not(ft-ripple) {
|
|
62
|
+
.ft-select--input-panel > *:not(ft-ripple) {
|
|
63
63
|
position: relative;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
.ft-select--disabled .ft-select--input-panel,
|
|
67
|
-
.ft-select--disabled .ft-select--
|
|
67
|
+
.ft-select--disabled .ft-select--options {
|
|
68
68
|
color: ${FtSelectCssVariables.colorOnSurfaceDisabled};
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.ft-select:not(.ft-select--disabled) .ft-select--input-panel,
|
|
72
|
-
.ft-select:not(.ft-select--disabled) .ft-select--
|
|
72
|
+
.ft-select:not(.ft-select--disabled) .ft-select--options {
|
|
73
73
|
cursor: pointer;
|
|
74
74
|
}
|
|
75
75
|
|
|
@@ -108,11 +108,9 @@ export const styles = css `
|
|
|
108
108
|
|
|
109
109
|
ft-icon {
|
|
110
110
|
flex-shrink: 0;
|
|
111
|
+
margin-left: auto;
|
|
111
112
|
}
|
|
112
113
|
|
|
113
|
-
slot:not([name]) {
|
|
114
|
-
display: none;
|
|
115
|
-
}
|
|
116
114
|
|
|
117
115
|
.ft-select--filled .ft-select--input-panel {
|
|
118
116
|
border-radius: ${FtSelectCssVariables.borderRadiusS} ${FtSelectCssVariables.borderRadiusS} 0 0;
|
|
@@ -135,6 +133,7 @@ export const styles = css `
|
|
|
135
133
|
background: ${FtSelectCssVariables.backgroundColor};
|
|
136
134
|
z-index: ${FtSelectCssVariables.optionsZIndex};
|
|
137
135
|
box-shadow: ${FtSelectCssVariables.elevation02};
|
|
136
|
+
width: max-content;
|
|
138
137
|
}
|
|
139
138
|
|
|
140
139
|
.ft-select--fixed .ft-select--options {
|
|
@@ -147,23 +146,6 @@ export const styles = css `
|
|
|
147
146
|
overflow-y: auto;
|
|
148
147
|
}
|
|
149
148
|
|
|
150
|
-
.ft-select--option {
|
|
151
|
-
position: relative;
|
|
152
|
-
padding: 4px ${FtSelectCssVariables.horizontalSpacing};
|
|
153
|
-
min-height: 32px;
|
|
154
|
-
display: flex;
|
|
155
|
-
align-items: center;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.ft-select--option:hover {
|
|
159
|
-
border-left: 2px ${FtSelectCssVariables.colorPrimary} solid;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.ft-select--option span {
|
|
163
|
-
text-overflow: ellipsis;
|
|
164
|
-
overflow: hidden;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
149
|
.ft-select--helper-text {
|
|
168
150
|
padding: 0 ${FtSelectCssVariables.horizontalSpacing};
|
|
169
151
|
color: ${FtSelectCssVariables.helperColor};
|
|
@@ -172,4 +154,8 @@ export const styles = css `
|
|
|
172
154
|
.ft-select--in-error .ft-select--helper-text {
|
|
173
155
|
color: ${FtSelectCssVariables.colorError};
|
|
174
156
|
}
|
|
157
|
+
|
|
158
|
+
.ft-select:not(.ft-select--has-option-selected) .ft-select--selected-option {
|
|
159
|
+
opacity: 0;
|
|
160
|
+
}
|
|
175
161
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-select",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"description": "Value selector for a predefined list of choices",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-icon": "1.
|
|
23
|
-
"@fluid-topics/ft-input-label": "1.
|
|
24
|
-
"@fluid-topics/ft-ripple": "1.
|
|
25
|
-
"@fluid-topics/ft-typography": "1.
|
|
26
|
-
"@fluid-topics/ft-wc-utils": "1.
|
|
22
|
+
"@fluid-topics/ft-icon": "1.4.1",
|
|
23
|
+
"@fluid-topics/ft-input-label": "1.4.1",
|
|
24
|
+
"@fluid-topics/ft-ripple": "1.4.1",
|
|
25
|
+
"@fluid-topics/ft-typography": "1.4.1",
|
|
26
|
+
"@fluid-topics/ft-wc-utils": "1.4.1",
|
|
27
27
|
"lit": "3.1.0"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "1afa9ec0ae6a444d5dbd791dd7ecf2cee8766f8c"
|
|
30
30
|
}
|