@fluid-topics/ft-text-field 0.1.17 → 0.2.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.
Files changed (11) hide show
  1. package/README.md +8 -7
  2. package/build/ft-text-field.d.ts +2 -2
  3. package/build/ft-text-field.inline-styles.js +537 -0
  4. package/build/ft-text-field.js +99 -105
  5. package/build/ft-text-field.light.js +336 -412
  6. package/build/ft-text-field.min.js +388 -460
  7. package/build/index.d.ts +2 -0
  8. package/build/index.js +5 -0
  9. package/build/inline-styles.d.ts +2 -0
  10. package/build/inline-styles.js +4 -0
  11. package/package.json +8 -8
package/build/ft-text-field.js CHANGED
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  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
- import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
10
+ import { designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
11
11
  import { FtTypography, FtTypographyBody1, FtTypographyBody1CssVariables } from "@fluid-topics/ft-typography";
12
12
  import { FtInputLabel, FtInputLabelCssVariables } from "@fluid-topics/ft-input-label";
13
13
  import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
@@ -22,7 +22,7 @@ export const FtTextFieldCssVariables = {
22
22
  colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
23
23
  borderRadiusS: FtCssVariable.external(designSystemVariables.borderRadiusS, "Design system"),
24
24
  };
25
- let FtTextField = class FtTextField extends FtLitElement {
25
+ export class FtTextField extends FtLitElement {
26
26
  constructor() {
27
27
  super(...arguments);
28
28
  this.label = "";
@@ -33,104 +33,7 @@ let FtTextField = class FtTextField extends FtLitElement {
33
33
  this.dataList = [];
34
34
  this.focused = false;
35
35
  }
36
- // language=CSS
37
- getStyles() {
38
- return [
39
- FtTypographyBody1,
40
- css `
41
- *:focus {
42
- outline: none;
43
- }
44
-
45
- .ft-text-field {
46
- display: flex;
47
- flex-direction: column;
48
- align-items: stretch;
49
- }
50
-
51
- ft-input-label {
52
- ${setVariable(FtInputLabelCssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
53
- ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtTextFieldCssVariables.labelSize)};
54
- ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtTextFieldCssVariables.verticalSpacing)};
55
- ${setVariable(FtInputLabelCssVariables.horizontalSpacing, css `calc(${FtTextFieldCssVariables.horizontalSpacing} - 4px)`)};
56
- }
57
-
58
- .ft-text-field--main-panel {
59
- position: relative;
60
- display: flex;
61
- height: calc(4 * ${FtTextFieldCssVariables.verticalSpacing} + ${FtTextFieldCssVariables.labelSize} + ${FtTextFieldCssVariables.fontSize});
62
- }
63
-
64
- .ft-text-field--input-panel {
65
- flex-grow: 1;
66
- position: relative;
67
- display: flex;
68
- align-items: center;
69
- overflow: hidden;
70
- gap: 8px;
71
- }
72
-
73
- .ft-text-field--input-panel ft-ripple {
74
- ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
75
- ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceDragged, "0.04")};
76
- }
77
-
78
- .ft-text-field--input {
79
- display: block;
80
- flex-grow: 1;
81
- flex-shrink: 1;
82
- min-width: 0; /* flex sets this to auto an prevents input from shrinking properly */
83
-
84
- ${setVariable(FtTypographyBody1CssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
85
- ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtTextFieldCssVariables.fontSize)};
86
- color: ${FtTextFieldCssVariables.colorOnSurface};
87
-
88
- padding: 0 ${FtTextFieldCssVariables.horizontalSpacing};
89
-
90
- border: none;
91
- background: none;
92
- }
93
-
94
- .ft-text-field--input::-webkit-calendar-picker-indicator,
95
- .ft-text-field--input::-webkit-list-button {
96
- display: none !important;
97
- }
98
-
99
- .ft-text-field--disabled .ft-text-field--input {
100
- color: ${FtTextFieldCssVariables.colorOnSurfaceDisabled};
101
- }
102
-
103
- .ft-text-field:not(.ft-text-field--disabled) .ft-text-field--input-panel {
104
- cursor: pointer;
105
- }
106
-
107
- .ft-text-field:not(.ft-text-field--disabled):focus-within ft-input-label {
108
- ${setVariable(FtInputLabelCssVariables.borderColor, FtTextFieldCssVariables.colorPrimary)};
109
- ${setVariable(FtInputLabelCssVariables.textColor, FtTextFieldCssVariables.colorPrimary)};
110
- }
111
-
112
- .ft-text-field--filled .ft-text-field--input-panel {
113
- border-radius: ${FtTextFieldCssVariables.borderRadiusS} ${FtTextFieldCssVariables.borderRadiusS} 0 0;
114
- }
115
-
116
- .ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input {
117
- align-self: stretch;
118
- padding-bottom: ${FtTextFieldCssVariables.verticalSpacing};
119
- padding-top: calc(${FtTextFieldCssVariables.labelSize} + 2 * ${FtTextFieldCssVariables.verticalSpacing});
120
- }
121
-
122
- .ft-text-field--outlined .ft-text-field--input-panel {
123
- border-radius: ${FtTextFieldCssVariables.borderRadiusS};
124
- }
125
-
126
- .ft-text-field--helper-text {
127
- padding: 0 12px 0 ${FtTextFieldCssVariables.horizontalSpacing};
128
- color: ${FtTextFieldCssVariables.helperColor};
129
- }
130
- `
131
- ];
132
- }
133
- getTemplate() {
36
+ render() {
134
37
  const classes = {
135
38
  "ft-text-field": true,
136
39
  "ft-text-field--filled": !this.outlined,
@@ -191,12 +94,107 @@ let FtTextField = class FtTextField extends FtLitElement {
191
94
  var _a;
192
95
  this.value = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || "";
193
96
  }
194
- };
97
+ }
195
98
  FtTextField.elementDefinitions = {
196
99
  "ft-input-label": FtInputLabel,
197
100
  "ft-ripple": FtRipple,
198
101
  "ft-typography": FtTypography,
199
102
  };
103
+ // language=CSS
104
+ FtTextField.styles = [
105
+ FtTypographyBody1,
106
+ css `
107
+ *:focus {
108
+ outline: none;
109
+ }
110
+
111
+ .ft-text-field {
112
+ display: flex;
113
+ flex-direction: column;
114
+ align-items: stretch;
115
+ }
116
+
117
+ ft-input-label {
118
+ ${setVariable(FtInputLabelCssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
119
+ ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtTextFieldCssVariables.labelSize)};
120
+ ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtTextFieldCssVariables.verticalSpacing)};
121
+ ${setVariable(FtInputLabelCssVariables.horizontalSpacing, css `calc(${FtTextFieldCssVariables.horizontalSpacing} - 4px)`)};
122
+ }
123
+
124
+ .ft-text-field--main-panel {
125
+ position: relative;
126
+ display: flex;
127
+ height: calc(4 * ${FtTextFieldCssVariables.verticalSpacing} + ${FtTextFieldCssVariables.labelSize} + ${FtTextFieldCssVariables.fontSize});
128
+ }
129
+
130
+ .ft-text-field--input-panel {
131
+ flex-grow: 1;
132
+ position: relative;
133
+ display: flex;
134
+ align-items: center;
135
+ overflow: hidden;
136
+ gap: 8px;
137
+ }
138
+
139
+ .ft-text-field--input-panel ft-ripple {
140
+ ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
141
+ ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, "0.04")};
142
+ }
143
+
144
+ .ft-text-field--input {
145
+ display: block;
146
+ flex-grow: 1;
147
+ flex-shrink: 1;
148
+ min-width: 0; /* flex sets this to auto an prevents input from shrinking properly */
149
+
150
+ ${setVariable(FtTypographyBody1CssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
151
+ ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtTextFieldCssVariables.fontSize)};
152
+ color: ${FtTextFieldCssVariables.colorOnSurface};
153
+
154
+ padding: 0 ${FtTextFieldCssVariables.horizontalSpacing};
155
+
156
+ border: none;
157
+ background: none;
158
+ }
159
+
160
+ .ft-text-field--input::-webkit-calendar-picker-indicator,
161
+ .ft-text-field--input::-webkit-list-button {
162
+ display: none !important;
163
+ }
164
+
165
+ .ft-text-field--disabled .ft-text-field--input {
166
+ color: ${FtTextFieldCssVariables.colorOnSurfaceDisabled};
167
+ }
168
+
169
+ .ft-text-field:not(.ft-text-field--disabled) .ft-text-field--input-panel {
170
+ cursor: pointer;
171
+ }
172
+
173
+ .ft-text-field:not(.ft-text-field--disabled):focus-within ft-input-label {
174
+ ${setVariable(FtInputLabelCssVariables.borderColor, FtTextFieldCssVariables.colorPrimary)};
175
+ ${setVariable(FtInputLabelCssVariables.textColor, FtTextFieldCssVariables.colorPrimary)};
176
+ }
177
+
178
+ .ft-text-field--filled .ft-text-field--input-panel {
179
+ border-radius: ${FtTextFieldCssVariables.borderRadiusS} ${FtTextFieldCssVariables.borderRadiusS} 0 0;
180
+ }
181
+
182
+ .ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input {
183
+ align-self: stretch;
184
+ padding-bottom: ${FtTextFieldCssVariables.verticalSpacing};
185
+ padding-top: calc(${FtTextFieldCssVariables.labelSize} + 2 * ${FtTextFieldCssVariables.verticalSpacing});
186
+ }
187
+
188
+ .ft-text-field--outlined .ft-text-field--input-panel {
189
+ border-radius: ${FtTextFieldCssVariables.borderRadiusS};
190
+ }
191
+
192
+ .ft-text-field--helper-text {
193
+ padding: 0 12px 0 ${FtTextFieldCssVariables.horizontalSpacing};
194
+ color: ${FtTextFieldCssVariables.helperColor};
195
+ }
196
+ `
197
+ ];
200
198
  __decorate([
201
199
  property({ type: String })
202
200
  ], FtTextField.prototype, "label", void 0);
@@ -221,8 +219,4 @@ __decorate([
221
219
  __decorate([
222
220
  state()
223
221
  ], FtTextField.prototype, "focused", void 0);
224
- FtTextField = __decorate([
225
- customElement("ft-text-field")
226
- ], FtTextField);
227
- export { FtTextField };
228
222
  //# sourceMappingURL=ft-text-field.js.map