@fluid-topics/ft-text-field 0.1.0 → 0.1.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/README.md +1 -1
- package/build/ft-text-field.js +12 -3
- package/build/ft-text-field.min.js +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
package/build/ft-text-field.js
CHANGED
|
@@ -59,6 +59,11 @@ let FtTextField = class FtTextField extends FtLitElement {
|
|
|
59
59
|
gap: 8px;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
.ft-text-field--input-panel ft-ripple {
|
|
63
|
+
--ft-opacity-color-content-on-surface-hover: 0.08;
|
|
64
|
+
--ft-opacity-color-content-on-surface-dragged: 0.04;
|
|
65
|
+
}
|
|
66
|
+
|
|
62
67
|
.ft-text-field--input {
|
|
63
68
|
display: block;
|
|
64
69
|
flex-grow: 1;
|
|
@@ -68,8 +73,6 @@ let FtTextField = class FtTextField extends FtLitElement {
|
|
|
68
73
|
--ft-typography-font-size: var(--ft-text-field-font-size, 14px);
|
|
69
74
|
--ft-typography-line-height: var(--ft-text-field-font-size, 14px);
|
|
70
75
|
color: var(--ft-color-on-surface, rgba(0, 0, 0, 0.87));
|
|
71
|
-
--ft-opacity-color-content-on-surface-hover: 0.08;
|
|
72
|
-
--ft-opacity-color-content-on-surface-dragged: 0.04;
|
|
73
76
|
|
|
74
77
|
padding: 0 var(--ft-text-field-horizontal-spacing, 16px);
|
|
75
78
|
|
|
@@ -77,6 +80,11 @@ let FtTextField = class FtTextField extends FtLitElement {
|
|
|
77
80
|
background: none;
|
|
78
81
|
}
|
|
79
82
|
|
|
83
|
+
.ft-text-field--input::-webkit-calendar-picker-indicator,
|
|
84
|
+
.ft-text-field--input::-webkit-list-button {
|
|
85
|
+
display: none !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
80
88
|
.ft-text-field--disabled .ft-text-field--input {
|
|
81
89
|
color: var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));
|
|
82
90
|
}
|
|
@@ -145,7 +153,8 @@ let FtTextField = class FtTextField extends FtLitElement {
|
|
|
145
153
|
/>
|
|
146
154
|
|
|
147
155
|
<datalist id="datalist">
|
|
148
|
-
${this.dataList.map(optionValue => html
|
|
156
|
+
${this.dataList.map(optionValue => html `
|
|
157
|
+
<option value="${optionValue}"></option>`)}
|
|
149
158
|
</datalist>
|
|
150
159
|
|
|
151
160
|
</div>
|
|
@@ -322,4 +322,4 @@ const Xt=o`.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-
|
|
|
322
322
|
* Copyright 2020 Google LLC
|
|
323
323
|
* SPDX-License-Identifier: Apache-2.0
|
|
324
324
|
*/
|
|
325
|
-
class Qt{constructor(t){this.startPress=e=>{t().then((t=>{t&&t.startPress(e)}))},this.endPress=()=>{t().then((t=>{t&&t.endPress()}))},this.startFocus=()=>{t().then((t=>{t&&t.startFocus()}))},this.endFocus=()=>{t().then((t=>{t&&t.endFocus()}))},this.startHover=()=>{t().then((t=>{t&&t.startHover()}))},this.endHover=()=>{t().then((t=>{t&&t.endHover()}))}}}var te=function(t,e,i,r){for(var a,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(a=t[s])&&(n=(o<3?a(n):o>3?a(e,i,n):a(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};let ee=class extends dt{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1}getStyles(){return o`:host{display:contents;--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-content, #000));--mdc-ripple-press-opacity:var(--ft-opacity-color-content-on-surface-pressed, 0.1);--mdc-ripple-hover-opacity:var(--ft-opacity-color-content-on-surface-hover, 0.04);--mdc-ripple-focus-opacity:var(--ft-opacity-color-content-on-surface-focused, 0.12);--mdc-ripple-selected-opacity:var(--ft-opacity-color-content-on-surface-selected, 0.08);--mdc-ripple-activated-opacity:var(--ft-opacity-color-content-on-surface-dragged, 0.08)}mwc-ripple.ft-ripple--secondary{--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-secondary, #FFCC80))}mwc-ripple.ft-ripple--primary{--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-primary, #2196F3))}`}getTemplate(){return R`<mwc-ripple class="${this.primary?"ft-ripple--primary":this.secondary?"ft-ripple--secondary":""}" ?unbounded="${this.unbounded}" ?activated="${this.activated}" ?selected="${this.selected}" ?disabled="${this.disabled}"></mwc-ripple>`}updated(t){super.updated(t),t.has("disabled")&&this.disabled&&this.endRipple()}endRipple(){var t,e,i;null===(t=this.rippleHandlers)||void 0===t||t.endHover(),null===(e=this.rippleHandlers)||void 0===e||e.endFocus(),null===(i=this.rippleHandlers)||void 0===i||i.endPress()}connectedCallback(){var t;super.connectedCallback();const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentNode;if(e){const t=new Qt((async()=>this.mwcRipple)),i=e=>i=>{window.addEventListener(e,t.endPress,{once:!0}),t.startPress(i)},r=i("mouseup"),a=i("touchend"),o=t=>{["Enter"," "].includes(t.key)&&i("keyup")()};e.addEventListener("mouseenter",t.startHover),e.addEventListener("mouseleave",t.endHover),e.addEventListener("mousedown",r),e.addEventListener("touchstart",a),e.addEventListener("keydown",o),e.addEventListener("focus",t.startFocus),e.addEventListener("blur",t.endFocus),this.onDisconnect=()=>{e.removeEventListener("mouseenter",t.startHover),e.removeEventListener("mouseleave",t.endHover),e.removeEventListener("mousedown",r),e.removeEventListener("touchstart",a),e.removeEventListener("keydown",o),e.removeEventListener("focus",t.startFocus),e.removeEventListener("blur",t.endFocus)},this.rippleHandlers=t}}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}};ee.elementDefinitions={"mwc-ripple":Yt},te([et({type:Boolean})],ee.prototype,"primary",void 0),te([et({type:Boolean})],ee.prototype,"secondary",void 0),te([et({type:Boolean})],ee.prototype,"unbounded",void 0),te([et({type:Boolean})],ee.prototype,"activated",void 0),te([et({type:Boolean})],ee.prototype,"selected",void 0),te([et({type:Boolean})],ee.prototype,"disabled",void 0),te([rt("mwc-ripple")],ee.prototype,"mwcRipple",void 0),ee=te([ct("ft-ripple")],ee);var ie=function(t,e,i,r){for(var a,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(a=t[s])&&(n=(o<3?a(n):o>3?a(e,i,n):a(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};t.FtTextField=class extends dt{constructor(){super(...arguments),this.label="",this.value="",this.helper="",this.outlined=!1,this.disabled=!1,this.dataList=[],this.focused=!1}getStyles(){return[At,o`:focus{outline:0}.ft-text-field{display:flex;flex-direction:column;align-items:stretch}ft-input-label{--ft-input-label-font-size:var(--ft-text-field-font-size, 14px);--ft-input-label-raised-font-size:var(--ft-text-field-label-size, 11px);--ft-input-label-vertical-spacing:var(--ft-text-field-vertical-spacing, 4px);--ft-input-label-horizontal-spacing:calc(var(--ft-text-field-horizontal-spacing, 16px) - 4px)}.ft-text-field--main-panel{position:relative;display:flex;height:calc(4 * var(--ft-text-field-vertical-spacing,4px) + var(--ft-text-field-label-size,11px) + var(--ft-text-field-font-size,14px))}.ft-text-field--input-panel{flex-grow:1;position:relative;display:flex;align-items:center;overflow:hidden;gap:8px}.ft-text-field--input{display:block;flex-grow:1;flex-shrink:1;min-width:0;--ft-typography-font-size:var(--ft-text-field-font-size, 14px);--ft-typography-line-height:var(--ft-text-field-font-size, 14px);color:var(--ft-color-on-surface,rgba(0,0,0,.87))
|
|
325
|
+
class Qt{constructor(t){this.startPress=e=>{t().then((t=>{t&&t.startPress(e)}))},this.endPress=()=>{t().then((t=>{t&&t.endPress()}))},this.startFocus=()=>{t().then((t=>{t&&t.startFocus()}))},this.endFocus=()=>{t().then((t=>{t&&t.endFocus()}))},this.startHover=()=>{t().then((t=>{t&&t.startHover()}))},this.endHover=()=>{t().then((t=>{t&&t.endHover()}))}}}var te=function(t,e,i,r){for(var a,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(a=t[s])&&(n=(o<3?a(n):o>3?a(e,i,n):a(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};let ee=class extends dt{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1}getStyles(){return o`:host{display:contents;--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-content, #000));--mdc-ripple-press-opacity:var(--ft-opacity-color-content-on-surface-pressed, 0.1);--mdc-ripple-hover-opacity:var(--ft-opacity-color-content-on-surface-hover, 0.04);--mdc-ripple-focus-opacity:var(--ft-opacity-color-content-on-surface-focused, 0.12);--mdc-ripple-selected-opacity:var(--ft-opacity-color-content-on-surface-selected, 0.08);--mdc-ripple-activated-opacity:var(--ft-opacity-color-content-on-surface-dragged, 0.08)}mwc-ripple.ft-ripple--secondary{--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-secondary, #FFCC80))}mwc-ripple.ft-ripple--primary{--mdc-ripple-color:var(--ft-ripple-color, var(--ft-color-primary, #2196F3))}`}getTemplate(){return R`<mwc-ripple class="${this.primary?"ft-ripple--primary":this.secondary?"ft-ripple--secondary":""}" ?unbounded="${this.unbounded}" ?activated="${this.activated}" ?selected="${this.selected}" ?disabled="${this.disabled}"></mwc-ripple>`}updated(t){super.updated(t),t.has("disabled")&&this.disabled&&this.endRipple()}endRipple(){var t,e,i;null===(t=this.rippleHandlers)||void 0===t||t.endHover(),null===(e=this.rippleHandlers)||void 0===e||e.endFocus(),null===(i=this.rippleHandlers)||void 0===i||i.endPress()}connectedCallback(){var t;super.connectedCallback();const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentNode;if(e){const t=new Qt((async()=>this.mwcRipple)),i=e=>i=>{window.addEventListener(e,t.endPress,{once:!0}),t.startPress(i)},r=i("mouseup"),a=i("touchend"),o=t=>{["Enter"," "].includes(t.key)&&i("keyup")()};e.addEventListener("mouseenter",t.startHover),e.addEventListener("mouseleave",t.endHover),e.addEventListener("mousedown",r),e.addEventListener("touchstart",a),e.addEventListener("keydown",o),e.addEventListener("focus",t.startFocus),e.addEventListener("blur",t.endFocus),this.onDisconnect=()=>{e.removeEventListener("mouseenter",t.startHover),e.removeEventListener("mouseleave",t.endHover),e.removeEventListener("mousedown",r),e.removeEventListener("touchstart",a),e.removeEventListener("keydown",o),e.removeEventListener("focus",t.startFocus),e.removeEventListener("blur",t.endFocus)},this.rippleHandlers=t}}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.endRipple()}};ee.elementDefinitions={"mwc-ripple":Yt},te([et({type:Boolean})],ee.prototype,"primary",void 0),te([et({type:Boolean})],ee.prototype,"secondary",void 0),te([et({type:Boolean})],ee.prototype,"unbounded",void 0),te([et({type:Boolean})],ee.prototype,"activated",void 0),te([et({type:Boolean})],ee.prototype,"selected",void 0),te([et({type:Boolean})],ee.prototype,"disabled",void 0),te([rt("mwc-ripple")],ee.prototype,"mwcRipple",void 0),ee=te([ct("ft-ripple")],ee);var ie=function(t,e,i,r){for(var a,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,s=t.length-1;s>=0;s--)(a=t[s])&&(n=(o<3?a(n):o>3?a(e,i,n):a(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};t.FtTextField=class extends dt{constructor(){super(...arguments),this.label="",this.value="",this.helper="",this.outlined=!1,this.disabled=!1,this.dataList=[],this.focused=!1}getStyles(){return[At,o`:focus{outline:0}.ft-text-field{display:flex;flex-direction:column;align-items:stretch}ft-input-label{--ft-input-label-font-size:var(--ft-text-field-font-size, 14px);--ft-input-label-raised-font-size:var(--ft-text-field-label-size, 11px);--ft-input-label-vertical-spacing:var(--ft-text-field-vertical-spacing, 4px);--ft-input-label-horizontal-spacing:calc(var(--ft-text-field-horizontal-spacing, 16px) - 4px)}.ft-text-field--main-panel{position:relative;display:flex;height:calc(4 * var(--ft-text-field-vertical-spacing,4px) + var(--ft-text-field-label-size,11px) + var(--ft-text-field-font-size,14px))}.ft-text-field--input-panel{flex-grow:1;position:relative;display:flex;align-items:center;overflow:hidden;gap:8px}.ft-text-field--input-panel ft-ripple{--ft-opacity-color-content-on-surface-hover:0.08;--ft-opacity-color-content-on-surface-dragged:0.04}.ft-text-field--input{display:block;flex-grow:1;flex-shrink:1;min-width:0;--ft-typography-font-size:var(--ft-text-field-font-size, 14px);--ft-typography-line-height:var(--ft-text-field-font-size, 14px);color:var(--ft-color-on-surface,rgba(0,0,0,.87));padding:0 var(--ft-text-field-horizontal-spacing,16px);border:none;background:0 0}.ft-text-field--input::-webkit-calendar-picker-indicator,.ft-text-field--input::-webkit-list-button{display:none!important}.ft-text-field--disabled .ft-text-field--input{color:var(--ft-color-on-surface-disabled,rgba(0,0,0,.38))}.ft-text-field:not(.ft-text-field--disabled) .ft-text-field--input-panel{cursor:pointer}.ft-text-field:not(.ft-text-field--disabled):focus-within ft-text-field-label{--ft-text-field-label-border-color:var(--ft-color-primary, #2196F3);--ft-text-field-label-text-color:var(--ft-color-primary, #2196F3)}.ft-text-field--filled .ft-text-field--input-panel{border-radius:var(--ft-border-radius-S,4px) var(--ft-border-radius-S,4px) 0 0}.ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input{align-self:stretch;padding-bottom:var(--ft-text-field-vertical-spacing,4px);padding-top:calc(var(--ft-text-field-label-size,11px) + 2 * var(--ft-text-field-vertical-spacing,4px))}.ft-text-field--outlined .ft-text-field--input-panel{border-radius:var(--ft-border-radius-S,4px)}.ft-text-field--helper-text{padding:0 12px 0 var(--ft-text-field-horizontal-spacing,16px);color:var(--ft-text-field-helper-color,var(--ft-color-on-surface-medium,rgba(0,0,0,.6)))}`]}getTemplate(){const t={"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--no-label":!this.label};return R`<div class="${lt(t)}"><div class="ft-text-field--main-panel"><ft-input-label text="${this.label}" ?disabled="${this.disabled}" ?outlined="${this.outlined}" ?raised="${this.focused||""!=this.value}"></ft-input-label><div class="ft-text-field--input-panel" aria-label="${this.label}">${this.outlined?null:R`<ft-ripple ?disabled="${this.disabled}" activated></ft-ripple>`} <input type="text" class="ft-typography--caption ft-text-field--input" ?disabled="${this.disabled}" .value="${this.value}" @change="${this.updateValueFromInputField}" @keyup="${this.liveUpdateValueFromInputField}" @focus="${()=>this.focused=!0}" @focusout="${()=>this.focused=!1}" list="datalist"><datalist id="datalist">${this.dataList.map((t=>R`<option value="${t}"></option>`))}</datalist></div></div>${this.helper?R`<ft-typography class="ft-text-field--helper-text" variant="caption">${this.helper}</ft-typography>`:void 0}</div>`}updated(t){super.updated(t),t.has("value")&&this.dispatchEvent(new CustomEvent("live-change",{detail:this.value}))}updateValueFromInputField(){var t;this.value=(null===(t=this.input)||void 0===t?void 0:t.value)||"",this.dispatchEvent(new CustomEvent("change",{detail:this.value}))}liveUpdateValueFromInputField(){var t;this.value=(null===(t=this.input)||void 0===t?void 0:t.value)||""}},t.FtTextField.elementDefinitions={"ft-input-label":_t,"ft-ripple":ee,"ft-typography":jt},ie([et({type:String})],t.FtTextField.prototype,"label",void 0),ie([et({reflect:!0})],t.FtTextField.prototype,"value",void 0),ie([et({type:String})],t.FtTextField.prototype,"helper",void 0),ie([et({type:Boolean})],t.FtTextField.prototype,"outlined",void 0),ie([et({type:Boolean})],t.FtTextField.prototype,"disabled",void 0),ie([rt("input")],t.FtTextField.prototype,"input",void 0),ie([et({attribute:!1})],t.FtTextField.prototype,"dataList",void 0),ie([it()],t.FtTextField.prototype,"focused",void 0),t.FtTextField=ie([ct("ft-text-field")],t.FtTextField),Object.defineProperty(t,"t",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-text-field",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A fluidtopics text field",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,11 +19,11 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-input-label": "^0.1.
|
|
23
|
-
"@fluid-topics/ft-ripple": "^0.1.
|
|
24
|
-
"@fluid-topics/ft-typography": "^0.1.
|
|
22
|
+
"@fluid-topics/ft-input-label": "^0.1.1",
|
|
23
|
+
"@fluid-topics/ft-ripple": "^0.1.1",
|
|
24
|
+
"@fluid-topics/ft-typography": "^0.1.1",
|
|
25
25
|
"@fluid-topics/ft-wc-utils": "^0.1.0",
|
|
26
26
|
"lit": "^2.0.2"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "4ca50a74e93ab7d8935fc06db38e924d58f55a88"
|
|
29
29
|
}
|