@fluid-topics/ft-input-label 2.2.10 → 2.2.12
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(()=>{var Q=Object.create;var
|
|
1
|
+
"use strict";(()=>{var Q=Object.create;var R=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var tt=Object.getPrototypeOf,et=Object.prototype.hasOwnProperty;var v=(i,o)=>()=>{try{return o||i((o={exports:{}}).exports,o),o.exports}catch(a){throw o=0,a}};var ot=(i,o,a,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of Y(o))!et.call(i,l)&&l!==a&&R(i,l,{get:()=>o[l],enumerable:!(s=X(o,l))||s.enumerable});return i};var h=(i,o,a)=>(a=i!=null?Q(tt(i)):{},ot(o||!i||!i.__esModule?R(a,"default",{value:i,enumerable:!0}):a,i));var W=v((nt,N)=>{N.exports=ftGlobals.wcUtils});var V=v((rt,I)=>{I.exports=ftGlobals.litDecorators});var H=v((at,Z)=>{Z.exports=ftGlobals.lit});var P=v((Tt,G)=>{G.exports=ftGlobals.litClassMap});var J=h(W());var C=h(V());var y=h(H()),t=h(W()),_=t.FtCssVariableFactory.extend("--ft-typography-font-family","",t.designSystemVariables.titleFont),x=t.FtCssVariableFactory.extend("--ft-typography-font-family","",t.designSystemVariables.contentFont),e={fontFamily:x,fontSize:t.FtCssVariableFactory.create("--ft-typography-font-size","","SIZE","16px"),fontWeight:t.FtCssVariableFactory.create("--ft-typography-font-weight","","UNKNOWN","normal"),letterSpacing:t.FtCssVariableFactory.create("--ft-typography-letter-spacing","","SIZE","0.496px"),lineHeight:t.FtCssVariableFactory.create("--ft-typography-line-height","","NUMBER","1.5"),textTransform:t.FtCssVariableFactory.create("--ft-typography-text-transform","","UNKNOWN","inherit"),textDecoration:t.FtCssVariableFactory.create("--ft-typography-text-decoration","","UNKNOWN","inherit")},b={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-title-font-family","",_),fontSize:t.FtCssVariableFactory.extend("--ft-typography-title-font-size","",e.fontSize,"20px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-title-font-weight","",e.fontWeight,"normal"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-title-letter-spacing","",e.letterSpacing,"0.15px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-title-line-height","",e.lineHeight,"1.2"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-title-text-transform","",e.textTransform,"inherit"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-title-text-decoration","",e.textDecoration,"inherit")},m={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-title-dense-font-family","",_),fontSize:t.FtCssVariableFactory.extend("--ft-typography-title-dense-font-size","",e.fontSize,"14px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-title-dense-font-weight","",e.fontWeight,"normal"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-title-dense-letter-spacing","",e.letterSpacing,"0.105px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-title-dense-line-height","",e.lineHeight,"1.7"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-title-dense-text-transform","",e.textTransform,"inherit"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-title-dense-text-decoration","",e.textDecoration,"inherit")},u={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-subtitle1-font-family","",x),fontSize:t.FtCssVariableFactory.extend("--ft-typography-subtitle1-font-size","",e.fontSize,"16px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-subtitle1-font-weight","",e.fontWeight,"600"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-subtitle1-letter-spacing","",e.letterSpacing,"0.144px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-subtitle1-line-height","",e.lineHeight,"1.5"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-subtitle1-text-transform","",e.textTransform,"inherit"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-subtitle1-text-decoration","",e.textDecoration,"inherit")},$={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-subtitle2-font-family","",x),fontSize:t.FtCssVariableFactory.extend("--ft-typography-subtitle2-font-size","",e.fontSize,"14px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-subtitle2-font-weight","",e.fontWeight,"normal"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-subtitle2-letter-spacing","",e.letterSpacing,"0.098px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-subtitle2-line-height","",e.lineHeight,"1.7"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-subtitle2-text-transform","",e.textTransform,"inherit"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-subtitle2-text-decoration","",e.textDecoration,"inherit")},S={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-body1-font-family","",x),fontSize:t.FtCssVariableFactory.extend("--ft-typography-body1-font-size","",e.fontSize,"16px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-body1-font-weight","",e.fontWeight,"normal"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-body1-letter-spacing","",e.letterSpacing,"0.496px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-body1-line-height","",e.lineHeight,"1.5"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-body1-text-transform","",e.textTransform,"inherit"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-body1-text-decoration","",e.textDecoration,"inherit")},z={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-body2-font-family","",x),fontSize:t.FtCssVariableFactory.extend("--ft-typography-body2-font-size","",e.fontSize,"14px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-body2-font-weight","",e.fontWeight,"normal"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-body2-letter-spacing","",e.letterSpacing,"0.252px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-body2-line-height","",e.lineHeight,"1.4"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-body2-text-transform","",e.textTransform,"inherit"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-body2-text-decoration","",e.textDecoration,"inherit")},f={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-caption-font-family","",x),fontSize:t.FtCssVariableFactory.extend("--ft-typography-caption-font-size","",e.fontSize,"12px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-caption-font-weight","",e.fontWeight,"normal"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-caption-letter-spacing","",e.letterSpacing,"0.396px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-caption-line-height","",e.lineHeight,"1.33"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-caption-text-transform","",e.textTransform,"inherit"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-caption-text-decoration","",e.textDecoration,"inherit")},T={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-family","",x),fontSize:t.FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-size","",e.fontSize,"10px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-weight","",e.fontWeight,"normal"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-breadcrumb-letter-spacing","",e.letterSpacing,"0.33px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-breadcrumb-line-height","",e.lineHeight,"1.6"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-breadcrumb-text-transform","",e.textTransform,"inherit"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-breadcrumb-text-decoration","",e.textDecoration,"inherit")},F={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-overline-font-family","",x),fontSize:t.FtCssVariableFactory.extend("--ft-typography-overline-font-size","",e.fontSize,"10px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-overline-font-weight","",e.fontWeight,"normal"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-overline-letter-spacing","",e.letterSpacing,"1.5px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-overline-line-height","",e.lineHeight,"1.6"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-overline-text-transform","",e.textTransform,"uppercase"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-overline-text-decoration","",e.textDecoration,"inherit")},D={fontFamily:t.FtCssVariableFactory.extend("--ft-typography-button-font-family","",x),fontSize:t.FtCssVariableFactory.extend("--ft-typography-button-font-size","",e.fontSize,"14px"),fontWeight:t.FtCssVariableFactory.extend("--ft-typography-button-font-weight","",e.fontWeight,"600"),letterSpacing:t.FtCssVariableFactory.extend("--ft-typography-button-letter-spacing","",e.letterSpacing,"1.246px"),lineHeight:t.FtCssVariableFactory.extend("--ft-typography-button-line-height","",e.lineHeight,"1.15"),textTransform:t.FtCssVariableFactory.extend("--ft-typography-button-text-transform","",e.textTransform,"uppercase"),textDecoration:t.FtCssVariableFactory.extend("--ft-typography-button-text-decoration","",e.textDecoration,"inherit")},pt=y.css`
|
|
2
2
|
.ft-typography--title {
|
|
3
3
|
font-family: ${b.fontFamily};
|
|
4
4
|
font-size: ${b.fontSize};
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
text-transform: ${b.textTransform};
|
|
9
9
|
text-decoration: ${b.textDecoration};
|
|
10
10
|
}
|
|
11
|
-
`,
|
|
11
|
+
`,lt=y.css`
|
|
12
12
|
.ft-typography--title-dense {
|
|
13
13
|
font-family: ${m.fontFamily};
|
|
14
14
|
font-size: ${m.fontSize};
|
|
@@ -91,50 +91,48 @@
|
|
|
91
91
|
}
|
|
92
92
|
`,dt=y.css`
|
|
93
93
|
.ft-typography--button {
|
|
94
|
-
font-family: ${
|
|
95
|
-
font-size: ${
|
|
96
|
-
font-weight: ${
|
|
97
|
-
letter-spacing: ${
|
|
98
|
-
line-height: ${
|
|
99
|
-
text-transform: ${
|
|
100
|
-
text-decoration: ${
|
|
94
|
+
font-family: ${D.fontFamily};
|
|
95
|
+
font-size: ${D.fontSize};
|
|
96
|
+
font-weight: ${D.fontWeight};
|
|
97
|
+
letter-spacing: ${D.letterSpacing};
|
|
98
|
+
line-height: ${D.lineHeight};
|
|
99
|
+
text-transform: ${D.textTransform};
|
|
100
|
+
text-decoration: ${D.textDecoration};
|
|
101
101
|
}
|
|
102
102
|
`,ct=y.css`
|
|
103
103
|
.ft-typography {
|
|
104
104
|
vertical-align: inherit;
|
|
105
105
|
}
|
|
106
|
-
`;var j=h(H()),
|
|
106
|
+
`;var j=h(H()),n=h(W());var r={fontSize:n.FtCssVariableFactory.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:n.FtCssVariableFactory.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:n.FtCssVariableFactory.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:n.FtCssVariableFactory.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:n.FtCssVariableFactory.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:n.FtCssVariableFactory.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:n.FtCssVariableFactory.extend("--ft-input-label-border-color","",n.designSystemVariables.colorOutline),textColor:n.FtCssVariableFactory.extend("--ft-input-label-text-color","",n.designSystemVariables.colorOnSurfaceMedium),disabledTextColor:n.FtCssVariableFactory.extend("--ft-input-label-disabled-text-color","",n.designSystemVariables.colorOnSurfaceDisabled),backgroundColor:n.FtCssVariableFactory.extend("--ft-input-label-background-color","",n.designSystemVariables.colorSurface),borderRadius:n.FtCssVariableFactory.extend("--ft-input-label-border-radius","",n.designSystemVariables.borderRadiusS),colorError:n.FtCssVariableFactory.external(n.designSystemVariables.colorError,"Design system")},U=j.css`
|
|
107
107
|
.ft-input-label {
|
|
108
108
|
position: absolute;
|
|
109
109
|
inset: 0;
|
|
110
110
|
display: flex;
|
|
111
|
-
background-color: ${
|
|
112
|
-
border-radius: ${
|
|
111
|
+
background-color: ${r.backgroundColor};
|
|
112
|
+
border-radius: ${r.borderRadius} ${r.borderRadius} 0 0;
|
|
113
|
+
border-color: ${r.borderColor};
|
|
114
|
+
border-bottom-width: 1px;
|
|
115
|
+
border-bottom-style: solid;
|
|
113
116
|
}
|
|
114
117
|
|
|
115
118
|
.ft-input-label--outlined {
|
|
116
|
-
border-radius: ${
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
.ft-input-label {
|
|
120
|
-
border-color: ${n.borderColor};
|
|
119
|
+
border-radius: ${r.borderRadius};
|
|
120
|
+
border-width: 1px;
|
|
121
|
+
border-style: solid;
|
|
121
122
|
}
|
|
122
123
|
|
|
123
124
|
.ft-input-label.ft-input-label--in-error {
|
|
124
|
-
border-color: ${
|
|
125
|
+
border-color: ${r.colorError}
|
|
125
126
|
}
|
|
126
127
|
|
|
127
128
|
.ft-input-label:before,
|
|
128
129
|
.ft-input-label:after {
|
|
129
130
|
content: "";
|
|
130
131
|
display: flex;
|
|
131
|
-
border-bottom-width: 1px;
|
|
132
|
-
border-bottom-style: solid;
|
|
133
|
-
border-color: inherit;
|
|
134
132
|
}
|
|
135
133
|
|
|
136
134
|
.ft-input-label:before {
|
|
137
|
-
width: calc(${
|
|
135
|
+
width: calc(${r.horizontalSpacing} - 4px);
|
|
138
136
|
flex-shrink: 0;
|
|
139
137
|
}
|
|
140
138
|
|
|
@@ -147,23 +145,20 @@
|
|
|
147
145
|
display: flex;
|
|
148
146
|
flex-shrink: 1;
|
|
149
147
|
position: relative;
|
|
150
|
-
|
|
151
|
-
border-bottom-style: solid;
|
|
152
|
-
border-color: inherit;
|
|
153
|
-
color: ${n.textColor};
|
|
148
|
+
color: ${r.textColor};
|
|
154
149
|
transition: font-size 250ms, line-height 250ms, color 250ms;
|
|
155
|
-
max-width: calc(${
|
|
150
|
+
max-width: calc(${r.labelMaxWidth} - 2 * (${r.horizontalSpacing} - 4px)); /* -2px on spacing for label padding */
|
|
156
151
|
text-overflow: ellipsis;
|
|
157
|
-
${(0,
|
|
158
|
-
${(0,
|
|
152
|
+
${(0,n.setVariable)(f.fontSize,r.fontSize)};
|
|
153
|
+
${(0,n.setVariable)(f.lineHeight,r.fontSize)};
|
|
159
154
|
}
|
|
160
155
|
|
|
161
156
|
.ft-input-label--in-error .ft-input-label--text {
|
|
162
|
-
color: ${
|
|
157
|
+
color: ${r.colorError}
|
|
163
158
|
}
|
|
164
159
|
|
|
165
160
|
.ft-input-label--disabled .ft-input-label--text {
|
|
166
|
-
color: ${
|
|
161
|
+
color: ${r.disabledTextColor};
|
|
167
162
|
}
|
|
168
163
|
|
|
169
164
|
.ft-input-label--hidden-text {
|
|
@@ -180,61 +175,38 @@
|
|
|
180
175
|
overflow: hidden;
|
|
181
176
|
white-space: nowrap;
|
|
182
177
|
text-overflow: ellipsis;
|
|
183
|
-
padding: ${
|
|
184
|
-
margin: calc(${
|
|
178
|
+
padding: ${r.verticalSpacing} 4px;
|
|
179
|
+
margin: calc(${r.verticalSpacing} * -1) 0;
|
|
185
180
|
max-width: 100%;
|
|
186
181
|
box-sizing: border-box;
|
|
187
182
|
}
|
|
188
183
|
|
|
189
184
|
.ft-input-label--raised .ft-input-label--text {
|
|
190
|
-
${(0,
|
|
191
|
-
${(0,
|
|
185
|
+
${(0,n.setVariable)(f.fontSize,r.raisedFontSize)};
|
|
186
|
+
${(0,n.setVariable)(f.lineHeight,r.raisedFontSize)};
|
|
192
187
|
}
|
|
193
188
|
|
|
194
189
|
.ft-input-label--raised .ft-input-label--floating-text {
|
|
195
|
-
top: ${
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.ft-input-label--outlined .ft-input-label--text,
|
|
199
|
-
.ft-input-label--outlined:before,
|
|
200
|
-
.ft-input-label--outlined:after {
|
|
201
|
-
border-top-width: 1px;
|
|
202
|
-
border-top-style: solid;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.ft-input-label--outlined:before {
|
|
206
|
-
border-left-width: 1px;
|
|
207
|
-
border-left-style: solid;
|
|
208
|
-
border-radius: ${n.borderRadius} 0 0 ${n.borderRadius};
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.ft-input-label--outlined:after {
|
|
212
|
-
border-right-width: 1px;
|
|
213
|
-
border-right-style: solid;
|
|
214
|
-
border-radius: 0 ${n.borderRadius} ${n.borderRadius} 0;
|
|
190
|
+
top: ${r.verticalSpacing};
|
|
215
191
|
}
|
|
216
192
|
|
|
217
193
|
.ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
|
|
218
194
|
padding: 2px 4px;
|
|
219
|
-
z-index: ${
|
|
220
|
-
background-color: ${
|
|
221
|
-
border-radius: ${
|
|
195
|
+
z-index: ${r.raisedZIndex};
|
|
196
|
+
background-color: ${r.backgroundColor};
|
|
197
|
+
border-radius: ${r.borderRadius};
|
|
222
198
|
top: calc((${f.lineHeight} / -2) + 2px);
|
|
223
199
|
}
|
|
224
|
-
|
|
225
|
-
.ft-input-label--outlined.ft-input-label--raised .ft-input-label--text {
|
|
226
|
-
border-top: none;
|
|
227
|
-
}
|
|
228
|
-
`;var V=h(H()),E=h(R());function L(i,o,a){return i?o(i):a?.(i)}var k=h(P()),q=h(W()),K=function(i,o,a,s){var p=arguments.length,l=p<3?o:s===null?s=Object.getOwnPropertyDescriptor(o,a):s,g;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")l=Reflect.decorate(i,o,a,s);else for(var c=i.length-1;c>=0;c--)(g=i[c])&&(l=(p<3?g(l):p>3?g(o,a,l):g(o,a))||l);return p>3&&l&&Object.defineProperty(o,a,l),l},D=class extends q.FtLitElement{constructor(){super(...arguments),this.text="",this.raised=!1}get inputLabelClasses(){return{}}render(){return V.html`
|
|
200
|
+
`;var E=h(H()),B=h(V());function L(i,o,a){return i?o(i):a?.(i)}var k=h(P()),q=h(W()),K=function(i,o,a,s){var l=arguments.length,p=l<3?o:s===null?s=Object.getOwnPropertyDescriptor(o,a):s,g;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")p=Reflect.decorate(i,o,a,s);else for(var c=i.length-1;c>=0;c--)(g=i[c])&&(p=(l<3?g(p):l>3?g(o,a,p):g(o,a))||p);return l>3&&p&&Object.defineProperty(o,a,p),p},w=class extends q.FtLitElement{constructor(){super(...arguments),this.text="",this.raised=!1}get inputLabelClasses(){return{}}render(){return E.html`
|
|
229
201
|
<div class="${(0,k.classMap)(this.inputLabelClasses)}">
|
|
230
|
-
${L(this.text,()=>
|
|
202
|
+
${L(this.text,()=>E.html`
|
|
231
203
|
<div class="ft-input-label--text ft-typography--caption">
|
|
232
204
|
<label class="ft-input-label--floating-text">${this.text}</label>
|
|
233
205
|
<span class="ft-input-label--hidden-text" aria-hidden="true">${this.text}</span>
|
|
234
206
|
</div>
|
|
235
207
|
`)}
|
|
236
208
|
</div>
|
|
237
|
-
`}};
|
|
209
|
+
`}};w.elementDefinitions={};K([(0,B.property)({type:String})],w.prototype,"text",void 0);K([(0,B.property)({type:Boolean})],w.prototype,"raised",void 0);var O=function(i,o,a,s){var l=arguments.length,p=l<3?o:s===null?s=Object.getOwnPropertyDescriptor(o,a):s,g;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")p=Reflect.decorate(i,o,a,s);else for(var c=i.length-1;c>=0;c--)(g=i[c])&&(p=(l<3?g(p):l>3?g(o,a,p):g(o,a))||p);return l>3&&p&&Object.defineProperty(o,a,p),p},d=class extends w{constructor(){super(...arguments),this.outlined=!1,this.error=!1,this.disabled=!1}get inputLabelClasses(){return{"ft-input-label":!0,"ft-input-label--raised":this.raised,"ft-input-label--outlined":this.outlined,"ft-input-label--disabled":this.disabled,"ft-input-label--in-error":this.error}}};d.elementDefinitions={};d.styles=[M,U];O([(0,C.property)({type:Boolean})],d.prototype,"outlined",void 0);O([(0,C.property)({type:Boolean})],d.prototype,"error",void 0);O([(0,C.property)({type:Boolean})],d.prototype,"disabled",void 0);var A={"ft-input-label":d};(0,J.customElements)(A);})();
|
|
238
210
|
/*! Bundled license information:
|
|
239
211
|
|
|
240
212
|
lit-html/directives/when.js:
|