@fluid-topics/ft-text-field 2.2.11 → 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.
- package/build/ft-text-field.light.js +37 -65
- package/build/ft-text-field.min.js +58 -86
- package/package.json +7 -7
|
@@ -113,38 +113,36 @@
|
|
|
113
113
|
</${zi(this.element)}>
|
|
114
114
|
`:Wi`
|
|
115
115
|
<slot part="text" class="ft-typography ft-typography--${this.variant}"></slot>
|
|
116
|
-
`}};ie.styles=[fs,hs,ms,gs,Lr,ys,Pr,xs,vs,bs,Ss];Es([(0,Ki.property)()],ie.prototype,"element",void 0);Es([(0,Ki.property)()],ie.prototype,"variant",void 0);var Cs=f(A());var _s={"ft-typography":ie};(0,Cs.customElements)(_s);var Nr=f(J());var ws=f(V()),B=f(A());var
|
|
116
|
+
`}};ie.styles=[fs,hs,ms,gs,Lr,ys,Pr,xs,vs,bs,Ss];Es([(0,Ki.property)()],ie.prototype,"element",void 0);Es([(0,Ki.property)()],ie.prototype,"variant",void 0);var Cs=f(A());var _s={"ft-typography":ie};(0,Cs.customElements)(_s);var Nr=f(J());var ws=f(V()),B=f(A());var k={fontSize:B.FtCssVariableFactory.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:B.FtCssVariableFactory.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:B.FtCssVariableFactory.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:B.FtCssVariableFactory.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:B.FtCssVariableFactory.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:B.FtCssVariableFactory.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:B.FtCssVariableFactory.extend("--ft-input-label-border-color","",B.designSystemVariables.colorOutline),textColor:B.FtCssVariableFactory.extend("--ft-input-label-text-color","",B.designSystemVariables.colorOnSurfaceMedium),disabledTextColor:B.FtCssVariableFactory.extend("--ft-input-label-disabled-text-color","",B.designSystemVariables.colorOnSurfaceDisabled),backgroundColor:B.FtCssVariableFactory.extend("--ft-input-label-background-color","",B.designSystemVariables.colorSurface),borderRadius:B.FtCssVariableFactory.extend("--ft-input-label-border-radius","",B.designSystemVariables.borderRadiusS),colorError:B.FtCssVariableFactory.external(B.designSystemVariables.colorError,"Design system")},Ts=ws.css`
|
|
117
117
|
.ft-input-label {
|
|
118
118
|
position: absolute;
|
|
119
119
|
inset: 0;
|
|
120
120
|
display: flex;
|
|
121
|
-
background-color: ${
|
|
122
|
-
border-radius: ${
|
|
121
|
+
background-color: ${k.backgroundColor};
|
|
122
|
+
border-radius: ${k.borderRadius} ${k.borderRadius} 0 0;
|
|
123
|
+
border-color: ${k.borderColor};
|
|
124
|
+
border-bottom-width: 1px;
|
|
125
|
+
border-bottom-style: solid;
|
|
123
126
|
}
|
|
124
127
|
|
|
125
128
|
.ft-input-label--outlined {
|
|
126
|
-
border-radius: ${
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
.ft-input-label {
|
|
130
|
-
border-color: ${N.borderColor};
|
|
129
|
+
border-radius: ${k.borderRadius};
|
|
130
|
+
border-width: 1px;
|
|
131
|
+
border-style: solid;
|
|
131
132
|
}
|
|
132
133
|
|
|
133
134
|
.ft-input-label.ft-input-label--in-error {
|
|
134
|
-
border-color: ${
|
|
135
|
+
border-color: ${k.colorError}
|
|
135
136
|
}
|
|
136
137
|
|
|
137
138
|
.ft-input-label:before,
|
|
138
139
|
.ft-input-label:after {
|
|
139
140
|
content: "";
|
|
140
141
|
display: flex;
|
|
141
|
-
border-bottom-width: 1px;
|
|
142
|
-
border-bottom-style: solid;
|
|
143
|
-
border-color: inherit;
|
|
144
142
|
}
|
|
145
143
|
|
|
146
144
|
.ft-input-label:before {
|
|
147
|
-
width: calc(${
|
|
145
|
+
width: calc(${k.horizontalSpacing} - 4px);
|
|
148
146
|
flex-shrink: 0;
|
|
149
147
|
}
|
|
150
148
|
|
|
@@ -157,23 +155,20 @@
|
|
|
157
155
|
display: flex;
|
|
158
156
|
flex-shrink: 1;
|
|
159
157
|
position: relative;
|
|
160
|
-
|
|
161
|
-
border-bottom-style: solid;
|
|
162
|
-
border-color: inherit;
|
|
163
|
-
color: ${N.textColor};
|
|
158
|
+
color: ${k.textColor};
|
|
164
159
|
transition: font-size 250ms, line-height 250ms, color 250ms;
|
|
165
|
-
max-width: calc(${
|
|
160
|
+
max-width: calc(${k.labelMaxWidth} - 2 * (${k.horizontalSpacing} - 4px)); /* -2px on spacing for label padding */
|
|
166
161
|
text-overflow: ellipsis;
|
|
167
|
-
${(0,B.setVariable)(ce.fontSize,
|
|
168
|
-
${(0,B.setVariable)(ce.lineHeight,
|
|
162
|
+
${(0,B.setVariable)(ce.fontSize,k.fontSize)};
|
|
163
|
+
${(0,B.setVariable)(ce.lineHeight,k.fontSize)};
|
|
169
164
|
}
|
|
170
165
|
|
|
171
166
|
.ft-input-label--in-error .ft-input-label--text {
|
|
172
|
-
color: ${
|
|
167
|
+
color: ${k.colorError}
|
|
173
168
|
}
|
|
174
169
|
|
|
175
170
|
.ft-input-label--disabled .ft-input-label--text {
|
|
176
|
-
color: ${
|
|
171
|
+
color: ${k.disabledTextColor};
|
|
177
172
|
}
|
|
178
173
|
|
|
179
174
|
.ft-input-label--hidden-text {
|
|
@@ -190,51 +185,28 @@
|
|
|
190
185
|
overflow: hidden;
|
|
191
186
|
white-space: nowrap;
|
|
192
187
|
text-overflow: ellipsis;
|
|
193
|
-
padding: ${
|
|
194
|
-
margin: calc(${
|
|
188
|
+
padding: ${k.verticalSpacing} 4px;
|
|
189
|
+
margin: calc(${k.verticalSpacing} * -1) 0;
|
|
195
190
|
max-width: 100%;
|
|
196
191
|
box-sizing: border-box;
|
|
197
192
|
}
|
|
198
193
|
|
|
199
194
|
.ft-input-label--raised .ft-input-label--text {
|
|
200
|
-
${(0,B.setVariable)(ce.fontSize,
|
|
201
|
-
${(0,B.setVariable)(ce.lineHeight,
|
|
195
|
+
${(0,B.setVariable)(ce.fontSize,k.raisedFontSize)};
|
|
196
|
+
${(0,B.setVariable)(ce.lineHeight,k.raisedFontSize)};
|
|
202
197
|
}
|
|
203
198
|
|
|
204
199
|
.ft-input-label--raised .ft-input-label--floating-text {
|
|
205
|
-
top: ${
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.ft-input-label--outlined .ft-input-label--text,
|
|
209
|
-
.ft-input-label--outlined:before,
|
|
210
|
-
.ft-input-label--outlined:after {
|
|
211
|
-
border-top-width: 1px;
|
|
212
|
-
border-top-style: solid;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.ft-input-label--outlined:before {
|
|
216
|
-
border-left-width: 1px;
|
|
217
|
-
border-left-style: solid;
|
|
218
|
-
border-radius: ${N.borderRadius} 0 0 ${N.borderRadius};
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.ft-input-label--outlined:after {
|
|
222
|
-
border-right-width: 1px;
|
|
223
|
-
border-right-style: solid;
|
|
224
|
-
border-radius: 0 ${N.borderRadius} ${N.borderRadius} 0;
|
|
200
|
+
top: ${k.verticalSpacing};
|
|
225
201
|
}
|
|
226
202
|
|
|
227
203
|
.ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
|
|
228
204
|
padding: 2px 4px;
|
|
229
|
-
z-index: ${
|
|
230
|
-
background-color: ${
|
|
231
|
-
border-radius: ${
|
|
205
|
+
z-index: ${k.raisedZIndex};
|
|
206
|
+
background-color: ${k.backgroundColor};
|
|
207
|
+
border-radius: ${k.borderRadius};
|
|
232
208
|
top: calc((${ce.lineHeight} / -2) + 2px);
|
|
233
209
|
}
|
|
234
|
-
|
|
235
|
-
.ft-input-label--outlined.ft-input-label--raised .ft-input-label--text {
|
|
236
|
-
border-top: none;
|
|
237
|
-
}
|
|
238
210
|
`;var Gi=f(V()),qi=f(J());function Os(e,t,r){return e?t(e):r?.(e)}var Ls=f(Nt()),Ps=f(A()),Rs=function(e,t,r,i){var n=arguments.length,s=n<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(n<3?o(s):n>3?o(t,r,s):o(t,r))||s);return n>3&&s&&Object.defineProperty(t,r,s),s},ft=class extends Ps.FtLitElement{constructor(){super(...arguments),this.text="",this.raised=!1}get inputLabelClasses(){return{}}render(){return Gi.html`
|
|
239
211
|
<div class="${(0,Ls.classMap)(this.inputLabelClasses)}">
|
|
240
212
|
${Os(this.text,()=>Gi.html`
|
|
@@ -434,11 +406,11 @@
|
|
|
434
406
|
}
|
|
435
407
|
|
|
436
408
|
ft-input-label {
|
|
437
|
-
${(0,S.setVariable)(
|
|
438
|
-
${(0,S.setVariable)(
|
|
439
|
-
${(0,S.setVariable)(
|
|
440
|
-
${(0,S.setVariable)(
|
|
441
|
-
${(0,S.setVariable)(
|
|
409
|
+
${(0,S.setVariable)(k.fontSize,O.fontSize)};
|
|
410
|
+
${(0,S.setVariable)(k.raisedFontSize,O.labelSize)};
|
|
411
|
+
${(0,S.setVariable)(k.verticalSpacing,O.verticalSpacing)};
|
|
412
|
+
${(0,S.setVariable)(k.horizontalSpacing,O.horizontalSpacing)};
|
|
413
|
+
${(0,S.setVariable)(k.backgroundColor,O.backgroundColor)};
|
|
442
414
|
}
|
|
443
415
|
|
|
444
416
|
.ft-text-field--main-panel {
|
|
@@ -517,8 +489,8 @@
|
|
|
517
489
|
}
|
|
518
490
|
|
|
519
491
|
.ft-text-field:not(.ft-text-field--disabled):focus-within ft-input-label {
|
|
520
|
-
${(0,S.setVariable)(
|
|
521
|
-
${(0,S.setVariable)(
|
|
492
|
+
${(0,S.setVariable)(k.borderColor,O.colorPrimary)};
|
|
493
|
+
${(0,S.setVariable)(k.textColor,O.colorPrimary)};
|
|
522
494
|
}
|
|
523
495
|
|
|
524
496
|
.ft-text-field--filled .ft-text-field--input-panel {
|
|
@@ -573,7 +545,7 @@
|
|
|
573
545
|
}
|
|
574
546
|
|
|
575
547
|
.ft-text-field--with-icon {
|
|
576
|
-
${(0,S.setVariable)(
|
|
548
|
+
${(0,S.setVariable)(k.labelMaxWidth,`calc(100% - ${pe.size} - ${k.horizontalSpacing})`)};
|
|
577
549
|
}
|
|
578
550
|
|
|
579
551
|
.ft-text-field--with-password ft-icon:hover {
|
|
@@ -888,7 +860,7 @@
|
|
|
888
860
|
${(0,w.setVariable)(Tt.size,X.iconSize)};
|
|
889
861
|
${(0,w.setVariable)(Tt.color,"var(--button-internal-color)")};
|
|
890
862
|
}
|
|
891
|
-
`;var H=function(e,t,r,i){var n=arguments.length,s=n<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(n<3?o(s):n>3?o(t,r,s):o(t,r))||s);return n>3&&s&&Object.defineProperty(t,r,s),s},
|
|
863
|
+
`;var H=function(e,t,r,i){var n=arguments.length,s=n<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(n<3?o(s):n>3?o(t,r,s):o(t,r))||s);return n>3&&s&&Object.defineProperty(t,r,s),s},D=class e extends(0,$e.toFtFormComponent)($e.FtLitElement){get buttonClasses(){return{"ft-button":!0,"ft-button--primary":this.primary,"ft-button--outlined":this.outlined,"ft-button--dense":this.dense,"ft-button--round":this.round,"ft-button--trailing-icon":this.trailingIcon,"ft-button--loading":this.trailingIcon,"ft-no-text-select":!0}}constructor(){super(),this.primary=!1,this.outlined=!1,this.dense=!1,this.round=!1,this.disabled=!1,this.icon=void 0,this.trailingIcon=!1,this.type="button",this.href=void 0,this.target=void 0,this.loading=!1,this.ariaLabel=null,this.ariaHasPopup=null,this.ariaPressed=null,this.tooltipPosition="bottom",this.hideTooltip=!1,this.forceTooltip=!1,this.activated=!1,this.hasTextContent=!1,this.addEventListener("click",t=>{var r;this.isDisabled()?(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation()):this.type=="submit"&&((r=this.form)===null||r===void 0||r.requestSubmit())})}render(){var t,r,i;let n={"ft-button--label":!0,"ft-safari-ellipsis-fix":$e.isSafari,"ft-button--label-no-text":!this.hasTextContent},s=tt.html`
|
|
892
864
|
<ft-ripple part="ripple"
|
|
893
865
|
?disabled=${this.isDisabled()}
|
|
894
866
|
?activated=${this.activated}
|
|
@@ -929,7 +901,7 @@
|
|
|
929
901
|
<ft-icon part="icon" .variant=${this.iconVariant} .value=${this.icon}></ft-icon>
|
|
930
902
|
`:tt.html`
|
|
931
903
|
<slot part="icon" name="icon"></slot>
|
|
932
|
-
`}focus(){var t;(t=this.button)===null||t===void 0||t.focus()}showTooltip(){var t;(t=this.tooltip)===null||t===void 0||t.show()}showTemporaryTooltip(t,r){var i;return(i=this.tooltip)===null||i===void 0?void 0:i.showTemporaryText(t,r)}setTooltipManual(t){this.tooltip&&(this.tooltip.manual=t)}click(){var t;(t=this.button)===null||t===void 0||t.click()}isDisabled(){return this.disabled||this.loading}contentAvailableCallback(t){super.contentAvailableCallback(t),this.labelContainer&&e.labelsObserver.observe(this.labelContainer)}disconnectedCallback(){super.disconnectedCallback(),this.labelContainer&&e.labelsObserver.unobserve(this.labelContainer)}};
|
|
904
|
+
`}focus(){var t;(t=this.button)===null||t===void 0||t.focus()}showTooltip(){var t;(t=this.tooltip)===null||t===void 0||t.show()}showTemporaryTooltip(t,r){var i;return(i=this.tooltip)===null||i===void 0?void 0:i.showTemporaryText(t,r)}setTooltipManual(t){this.tooltip&&(this.tooltip.manual=t)}click(){var t;(t=this.button)===null||t===void 0||t.click()}isDisabled(){return this.disabled||this.loading}contentAvailableCallback(t){super.contentAvailableCallback(t),this.labelContainer&&e.labelsObserver.observe(this.labelContainer)}disconnectedCallback(){super.disconnectedCallback(),this.labelContainer&&e.labelsObserver.unobserve(this.labelContainer)}};D.elementDefinitions={"ft-ripple":$,"ft-tooltip":Y,"ft-icon":ee,"ft-loader":Ot,"ft-typography":ie};D.styles=[$e.safariEllipsisFix,rc,$e.noTextSelect];D.labelsObserver=new IntersectionObserver(e=>{for(let t of e){let r=t.target.getRootNode();r.host?r.host.hasTextContent=t.boundingClientRect.width>0:D.labelsObserver.unobserve(t.target)}});H([(0,I.property)({type:Boolean})],D.prototype,"primary",void 0);H([(0,I.property)({type:Boolean})],D.prototype,"outlined",void 0);H([(0,I.property)({type:Boolean})],D.prototype,"dense",void 0);H([(0,I.property)({type:Boolean})],D.prototype,"round",void 0);H([(0,I.property)({type:Boolean})],D.prototype,"disabled",void 0);H([(0,I.property)()],D.prototype,"icon",void 0);H([(0,I.property)()],D.prototype,"iconVariant",void 0);H([(0,I.property)({type:Boolean})],D.prototype,"trailingIcon",void 0);H([(0,I.property)()],D.prototype,"label",void 0);H([(0,I.property)()],D.prototype,"type",void 0);H([(0,I.property)()],D.prototype,"href",void 0);H([(0,I.property)()],D.prototype,"target",void 0);H([(0,I.property)({type:Boolean})],D.prototype,"loading",void 0);H([(0,I.property)({attribute:"aria-label"})],D.prototype,"ariaLabel",void 0);H([(0,I.property)()],D.prototype,"ariaHasPopup",void 0);H([(0,I.property)({attribute:"aria-pressed"})],D.prototype,"ariaPressed",void 0);H([(0,I.property)()],D.prototype,"tooltipPosition",void 0);H([(0,I.property)({type:Boolean})],D.prototype,"hideTooltip",void 0);H([(0,I.property)({type:Boolean})],D.prototype,"forceTooltip",void 0);H([(0,I.property)({type:Boolean})],D.prototype,"activated",void 0);H([(0,I.query)(".ft-button")],D.prototype,"button",void 0);H([(0,I.query)(".ft-button--label")],D.prototype,"labelContainer",void 0);H([(0,I.state)()],D.prototype,"hasTextContent",void 0);H([(0,I.query)(".ft-button--label slot")],D.prototype,"slottedContent",void 0);H([(0,I.query)("[part=tooltip]")],D.prototype,"tooltip",void 0);var nc=f(A());var ic={"ft-button":D};(0,nc.customElements)(ic);var Lt=function(e,t,r,i){var n=arguments.length,s=n<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(n<3?o(s):n>3?o(t,r,s):o(t,r))||s);return n>3&&s&&Object.defineProperty(t,r,s),s},Fn=class extends CustomEvent{constructor(t){super("suggestion-selected",{detail:t,bubbles:!0,composed:!0})}},Vn=class extends CustomEvent{constructor(t){super("suggestion-removed",{detail:t,bubbles:!0,composed:!0})}},ae=class extends sc.FtLitElement{constructor(){super(...arguments),this.removable=!1}render(){let t={"ft-text-field-suggestion":!0,"ft-text-field-suggestion--with-helper":!!this.helper};return Rt.html`
|
|
933
905
|
<div class="${(0,oc.classMap)(t)}">
|
|
934
906
|
<div
|
|
935
907
|
class="ft-text-field-suggestion--suggestion"
|
|
@@ -961,7 +933,7 @@
|
|
|
961
933
|
</ft-button>
|
|
962
934
|
`:Rt.nothing}
|
|
963
935
|
</div>
|
|
964
|
-
`}focus(t,r){var i,n;r&&this.removable?(i=this.removeButton)===null||i===void 0||i.focus():(n=this.suggestion)===null||n===void 0||n.focus(t)}click(t){var r;(r=t?this.removeButton:this.suggestion)===null||r===void 0||r.click()}isRemoveButtonFocused(){var t,r;return(r=(t=this.removeButton)===null||t===void 0?void 0:t.matches(":focus-within"))!==null&&r!==void 0?r:!1}selectSuggestion(){this.dispatchEvent(new Fn(this.getValue()))}removeSuggestion(){this.dispatchEvent(new Vn(this.getValue()))}getValue(){return this.value||this.getTextContent()}getTextContent(){return this.assignedNodes.map(t=>t.textContent).join("").trim()}suggestionKeyDown(t){var r;switch(t.key){case"Enter":case" ":t.preventDefault(),t.stopPropagation(),this.selectSuggestion();break;case"ArrowRight":this.removable&&(t.preventDefault(),t.stopPropagation(),(r=this.removeButton)===null||r===void 0||r.focus());break}}removeButtonKeyDown(t){var r;switch(t.key){case"Enter":case" ":t.preventDefault(),t.stopPropagation(),this.removeSuggestion();break;case"ArrowLeft":t.preventDefault(),t.stopPropagation(),(r=this.suggestion)===null||r===void 0||r.focus();break}}};ae.elementDefinitions={"ft-ripple":$,"ft-typography":ie,"ft-icon":ee,"ft-button":
|
|
936
|
+
`}focus(t,r){var i,n;r&&this.removable?(i=this.removeButton)===null||i===void 0||i.focus():(n=this.suggestion)===null||n===void 0||n.focus(t)}click(t){var r;(r=t?this.removeButton:this.suggestion)===null||r===void 0||r.click()}isRemoveButtonFocused(){var t,r;return(r=(t=this.removeButton)===null||t===void 0?void 0:t.matches(":focus-within"))!==null&&r!==void 0?r:!1}selectSuggestion(){this.dispatchEvent(new Fn(this.getValue()))}removeSuggestion(){this.dispatchEvent(new Vn(this.getValue()))}getValue(){return this.value||this.getTextContent()}getTextContent(){return this.assignedNodes.map(t=>t.textContent).join("").trim()}suggestionKeyDown(t){var r;switch(t.key){case"Enter":case" ":t.preventDefault(),t.stopPropagation(),this.selectSuggestion();break;case"ArrowRight":this.removable&&(t.preventDefault(),t.stopPropagation(),(r=this.removeButton)===null||r===void 0||r.focus());break}}removeButtonKeyDown(t){var r;switch(t.key){case"Enter":case" ":t.preventDefault(),t.stopPropagation(),this.removeSuggestion();break;case"ArrowLeft":t.preventDefault(),t.stopPropagation(),(r=this.suggestion)===null||r===void 0||r.focus();break}}};ae.elementDefinitions={"ft-ripple":$,"ft-typography":ie,"ft-icon":ee,"ft-button":D};ae.styles=ro;Lt([(0,Ue.property)()],ae.prototype,"value",void 0);Lt([(0,Ue.property)()],ae.prototype,"helper",void 0);Lt([(0,Ue.property)({type:Boolean})],ae.prototype,"removable",void 0);Lt([(0,Ue.property)()],ae.prototype,"removeButtonLabel",void 0);Lt([(0,Ue.query)(".ft-text-field-suggestion--suggestion")],ae.prototype,"suggestion",void 0);Lt([(0,Ue.query)(".ft-text-field-suggestion--remove")],ae.prototype,"removeButton",void 0);Lt([(0,Ue.queryAssignedNodes)()],ae.prototype,"assignedNodes",void 0);var Pi=class extends CustomEvent{constructor(t){super("live-change",{detail:t})}},Ni=class extends CustomEvent{constructor(t){super("change",{detail:t})}},Di=class extends CustomEvent{constructor(t){super("invalid",{detail:t})}};var N=function(e,t,r,i){var n=arguments.length,s=n<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(n<3?o(s):n>3?o(t,r,s):o(t,r))||s);return n>3&&s&&Object.defineProperty(t,r,s),s},_=class extends(0,le.toFtFormComponent)(le.FtLitElement){constructor(){super(...arguments),this._value="",this.dispatchedValue="",this.outlined=!1,this.disabled=!1,this.error=!1,this.fixedMenuPosition=!1,this.prefix=null,this.passwordHiddenIcon=He.EYE_SLASH,this.passwordRevealedIcon=He.EYE,this.filterSuggestions=!1,this.password=!1,this.hideCurrentValueSuggestion=!1,this.focused=!1,this.inputValid=!0,this.hidePassword=!0,this.hideSuggestions=!1,this.visibleSuggestions=[],this.providedSuggestions=[]}get value(){return this._value||""}set value(t){this.setInternalValue(t||""),this.dispatchedValue=t||""}setInternalValue(t){let r=this._value;this._value=t||"",this.setFormValue(this._value),this.requestUpdate("value",r)}focus(){var t;(t=this.input)===null||t===void 0||t.focus()}blur(){var t;(t=this.input)===null||t===void 0||t.blur()}render(){var t;let r={"ft-text-field":!0,"ft-text-field--filled":!this.outlined,"ft-text-field--outlined":this.outlined,"ft-text-field--disabled":this.disabled,"ft-text-field--has-value":!!this.value,"ft-text-field--with-label":!!this.label,"ft-text-field--in-error":!this.inputValid||this.error,"ft-text-field--fixed":this.fixedMenuPosition,"ft-text-field--with-prefix":!!this.prefix,"ft-text-field--hide-suggestions":!this.suggestionsShouldBeDisplayed(),"ft-text-field--raised-label":this.focused||this.value!="","ft-text-field--with-icon":!!this.icon,"ft-text-field--with-password":this.isPasswordField()},i=this.suggestionsProvider&&this.value&&this.value!=""&&!this.providedSuggestions.map(a=>a.label).includes(this.value),s=!this.suggestionsProvider&&this.filterSuggestions&&this.value&&this.value!=""||i,o=this.inputValid?this.helper:(t=this.input)===null||t===void 0?void 0:t.validationMessage;return q.html`
|
|
965
937
|
<div class="${(0,lc.classMap)(r)}">
|
|
966
938
|
<div class="ft-text-field--main-panel"
|
|
967
939
|
@keydown=${this.handleKeyboardNavigation}
|
|
@@ -1043,7 +1015,7 @@
|
|
|
1043
1015
|
.variant=${this.iconVariant}
|
|
1044
1016
|
.value=${this.icon}
|
|
1045
1017
|
@click=${()=>{var t;return(t=this.input)===null||t===void 0?void 0:t.focus()}}></ft-icon>
|
|
1046
|
-
`:q.nothing}update(t){super.update(t),(t.has("value")||t.has("filterSuggestions")||t.has("suggestionsProvider"))&&this.updateSuggestions(),t.has("value")&&t.get("value")!=null&&(this.hideSuggestions=!1),t.has("dispatchedValue")&&t.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){var t;if(this.suggestionsProvider){(t=this.cancelableSuggest)===null||t===void 0||t.cancel();let r=this.suggestionsProvider(this.value);r instanceof Promise?(this.cancelableSuggest=(0,le.cancelable)(r),this.providedSuggestions=await this.cancelableSuggest):(this.cancelableSuggest=void 0,this.providedSuggestions=r)}else this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(t=>t.hidden=!t.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(t=>!t.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(t){super.contentAvailableCallback(t),t.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),t.has("providedSuggestions")&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),t.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var t;this.clearWatchAutofill(),((t=this.autocomplete)!==null&&t!==void 0?t:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var r,i,n;!((r=this.input)===null||r===void 0)&&r.matches(":autofill")&&this.dispatchedValue!==((i=this.input)===null||i===void 0?void 0:i.value)&&this.setValue((n=this.input)===null||n===void 0?void 0:n.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(t,r=!1){var i,n;this.value!==t&&(this.inputValid=!0,this.setInternalValue(t),this.dispatchEvent(new Pi(t))),r&&this.dispatchedValue!==t&&(this.inputValid=(n=(i=this.input)===null||i===void 0?void 0:i.checkValidity())!==null&&n!==void 0?n:!0,this.inputValid?(this.dispatchedValue=t,this.dispatchEvent(new Ni(t))):this.dispatchEvent(new Di(this.input.validationMessage)))}handleInput(t){var r;let i=((r=this.input)===null||r===void 0?void 0:r.value)||"";this.setValue(i,t.key=="Escape"||t.key=="Enter")}catchComposingEvents(t){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(t){var r,i;if(t.key==="ArrowDown"||t.key==="ArrowUp"){t.preventDefault(),t.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(o=>o.matches(":focus-within")),s;t.key==="ArrowDown"?s=n<this.visibleSuggestions.length-1?n+1:0:s=n>0?n-1:this.visibleSuggestions.length-1,(r=this.visibleSuggestions[s])===null||r===void 0||r.focus(void 0,(i=this.visibleSuggestions[n])===null||i===void 0?void 0:i.isRemoveButtonFocused())}(t.key=="Escape"||t.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(t){var r;this.setValue(t.detail,!0),(r=this.input)===null||r===void 0||r.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onSuggestionRemoved(){setTimeout(()=>this.updateSuggestions())}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var t,r;!((t=this.mainPanel)===null||t===void 0)&&t.matches(":focus-within")||(this.focused=!1,this.setValue(((r=this.input)===null||r===void 0?void 0:r.value)||"",!0))}togglePasswordVisibility(){this.hidePassword=!this.hidePassword}isPasswordField(){return this.password||this.type==="password"}setSuggestionPosition(){this.suggestionsContainer.style.width=this.mainPanel.getBoundingClientRect().width+"px";let t=["bottom","top"];(0,le.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",t,"fixed","--text-field-internal-suggest-size",0).then(({x:r,y:i})=>{this.suggestionsContainer.style.left=`${r}px`,this.suggestionsContainer.style.top=`${i}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};_.elementDefinitions={"ft-input-label":Ce,"ft-ripple":$,"ft-typography":ie,"ft-icon":ee,"ft-text-field-suggestion":ae};_.styles=[Lr,le.noTextInputDefaultClearButton,eo];
|
|
1018
|
+
`:q.nothing}update(t){super.update(t),(t.has("value")||t.has("filterSuggestions")||t.has("suggestionsProvider"))&&this.updateSuggestions(),t.has("value")&&t.get("value")!=null&&(this.hideSuggestions=!1),t.has("dispatchedValue")&&t.get("dispatchedValue")!=null&&(this.hideSuggestions=!0)}async updateSuggestions(){var t;if(this.suggestionsProvider){(t=this.cancelableSuggest)===null||t===void 0||t.cancel();let r=this.suggestionsProvider(this.value);r instanceof Promise?(this.cancelableSuggest=(0,le.cancelable)(r),this.providedSuggestions=await this.cancelableSuggest):(this.cancelableSuggest=void 0,this.providedSuggestions=r)}else this.filterSuggestionsIfNeeded()}filterSuggestionsIfNeeded(){this.filterSuggestions?(this.slottedSuggestions.forEach(t=>t.hidden=!t.getValue().toLowerCase().includes(this.value.toLowerCase())),this.visibleSuggestions=this.slottedSuggestions.filter(t=>!t.hidden)):this.visibleSuggestions=this.slottedSuggestions,this.newValueSuggestion&&(this.visibleSuggestions=[...this.visibleSuggestions,this.newValueSuggestion]),this.hideSuggestions=this.visibleSuggestions.length<=0}contentAvailableCallback(t){super.contentAvailableCallback(t),t.has("focused")&&!this.hideSuggestions&&this.visibleSuggestions.length>0&&this.setSuggestionPosition(),t.has("providedSuggestions")&&(this.visibleSuggestions=[...this.providedSuggestionsInDom]),t.has("autocomplete")&&this.setupWatchAutofill(),this.suggestionsShouldBeDisplayed()&&this.setSuggestionPosition()}setupWatchAutofill(){var t;this.clearWatchAutofill(),((t=this.autocomplete)!==null&&t!==void 0?t:"off")!=="off"&&(this.watchAutofillInterval=setInterval(()=>{var r,i,n;!((r=this.input)===null||r===void 0)&&r.matches(":autofill")&&this.dispatchedValue!==((i=this.input)===null||i===void 0?void 0:i.value)&&this.setValue((n=this.input)===null||n===void 0?void 0:n.value,!0)},200))}clearWatchAutofill(){this.watchAutofillInterval&&clearInterval(this.watchAutofillInterval)}connectedCallback(){super.connectedCallback(),this.setupWatchAutofill()}disconnectedCallback(){super.disconnectedCallback(),this.clearWatchAutofill()}setValue(t,r=!1){var i,n;this.value!==t&&(this.inputValid=!0,this.setInternalValue(t),this.dispatchEvent(new Pi(t))),r&&this.dispatchedValue!==t&&(this.inputValid=(n=(i=this.input)===null||i===void 0?void 0:i.checkValidity())!==null&&n!==void 0?n:!0,this.inputValid?(this.dispatchedValue=t,this.dispatchEvent(new Ni(t))):this.dispatchEvent(new Di(this.input.validationMessage)))}handleInput(t){var r;let i=((r=this.input)===null||r===void 0?void 0:r.value)||"";this.setValue(i,t.key=="Escape"||t.key=="Enter")}catchComposingEvents(t){}handleClick(){this.hideSuggestions=!1}handleKeyboardNavigation(t){var r,i;if(t.key==="ArrowDown"||t.key==="ArrowUp"){t.preventDefault(),t.stopPropagation(),this.hideSuggestions=!1;let n=this.visibleSuggestions.findIndex(o=>o.matches(":focus-within")),s;t.key==="ArrowDown"?s=n<this.visibleSuggestions.length-1?n+1:0:s=n>0?n-1:this.visibleSuggestions.length-1,(r=this.visibleSuggestions[s])===null||r===void 0||r.focus(void 0,(i=this.visibleSuggestions[n])===null||i===void 0?void 0:i.isRemoveButtonFocused())}(t.key=="Escape"||t.key=="Enter")&&(this.hideSuggestions=!0)}onSuggestionSelected(t){var r;this.setValue(t.detail,!0),(r=this.input)===null||r===void 0||r.focus(),setTimeout(()=>this.hideSuggestions=!0,0)}onSuggestionRemoved(){setTimeout(()=>this.updateSuggestions())}onFocus(){this.focused=!0,this.hideSuggestions=!1}onMainPanelBlur(){var t,r;!((t=this.mainPanel)===null||t===void 0)&&t.matches(":focus-within")||(this.focused=!1,this.setValue(((r=this.input)===null||r===void 0?void 0:r.value)||"",!0))}togglePasswordVisibility(){this.hidePassword=!this.hidePassword}isPasswordField(){return this.password||this.type==="password"}setSuggestionPosition(){this.suggestionsContainer.style.width=this.mainPanel.getBoundingClientRect().width+"px";let t=["bottom","top"];(0,le.computeOffsetAutoPosition)(this.mainPanel,this.suggestionsContainer,"bottom",t,"fixed","--text-field-internal-suggest-size",0).then(({x:r,y:i})=>{this.suggestionsContainer.style.left=`${r}px`,this.suggestionsContainer.style.top=`${i}px`})}suggestionsShouldBeDisplayed(){return!this.hideSuggestions&&(this.visibleSuggestions.length||this.providedSuggestions.length)}};_.elementDefinitions={"ft-input-label":Ce,"ft-ripple":$,"ft-typography":ie,"ft-icon":ee,"ft-text-field-suggestion":ae};_.styles=[Lr,le.noTextInputDefaultClearButton,eo];N([(0,L.property)()],_.prototype,"label",void 0);N([(0,L.property)({noAccessor:!0})],_.prototype,"value",null);N([(0,L.state)()],_.prototype,"dispatchedValue",void 0);N([(0,L.property)()],_.prototype,"helper",void 0);N([(0,L.property)()],_.prototype,"suggestionsHelper",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"outlined",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"disabled",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"error",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"fixedMenuPosition",void 0);N([(0,L.property)()],_.prototype,"prefix",void 0);N([(0,L.property)()],_.prototype,"icon",void 0);N([(0,L.property)()],_.prototype,"name",void 0);N([(0,L.property)()],_.prototype,"type",void 0);N([(0,L.property)()],_.prototype,"passwordHiddenIcon",void 0);N([(0,L.property)()],_.prototype,"passwordRevealedIcon",void 0);N([(0,L.property)()],_.prototype,"iconVariant",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"filterSuggestions",void 0);N([(0,le.numberProperty)()],_.prototype,"maxLength",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"password",void 0);N([(0,L.property)({type:String})],_.prototype,"autocomplete",void 0);N([(0,L.property)({attribute:!1})],_.prototype,"suggestionsProvider",void 0);N([(0,L.property)({type:Boolean})],_.prototype,"hideCurrentValueSuggestion",void 0);N([(0,L.state)()],_.prototype,"focused",void 0);N([(0,L.state)()],_.prototype,"inputValid",void 0);N([(0,L.state)()],_.prototype,"hidePassword",void 0);N([(0,L.state)()],_.prototype,"hideSuggestions",void 0);N([(0,L.state)()],_.prototype,"visibleSuggestions",void 0);N([(0,L.state)()],_.prototype,"providedSuggestions",void 0);N([(0,L.query)(".ft-text-field--main-panel")],_.prototype,"mainPanel",void 0);N([(0,L.query)(".ft-text-field--input")],_.prototype,"input",void 0);N([(0,L.query)(".ft-text-field-suggestion--new-value")],_.prototype,"newValueSuggestion",void 0);N([(0,L.query)(".ft-text-field--suggestions")],_.prototype,"suggestionsContainer",void 0);N([(0,L.queryAll)("ft-text-field-suggestion")],_.prototype,"providedSuggestionsInDom",void 0);N([(0,L.queryAssignedElements)({selector:"ft-text-field-suggestion"})],_.prototype,"slottedSuggestions",void 0);N([(0,le.ignoreComposingEvents)()],_.prototype,"handleInput",null);N([(0,le.ignoreComposingEvents)()],_.prototype,"catchComposingEvents",null);var cc={"ft-text-field":_,"ft-text-field-suggestion":ae};(0,uc.customElements)(cc);})();
|
|
1047
1019
|
/*! Bundled license information:
|
|
1048
1020
|
|
|
1049
1021
|
lit-html/lit-html.js:
|