@m3e/form-field 1.0.0-rc.1 → 1.0.0-rc.2
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 -2
- package/dist/custom-elements.json +2573 -7
- package/dist/index.js +2 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +68 -68
- package/dist/index.min.js.map +1 -1
- package/package.json +3 -3
- package/cem.config.mjs +0 -16
- package/demo/index.html +0 -116
- package/dist/src/FloatLabelType.d.ts +0 -3
- package/dist/src/FloatLabelType.d.ts.map +0 -1
- package/dist/src/FormFieldControl.d.ts +0 -48
- package/dist/src/FormFieldControl.d.ts.map +0 -1
- package/dist/src/FormFieldElement.d.ts +0 -144
- package/dist/src/FormFieldElement.d.ts.map +0 -1
- package/dist/src/FormFieldVariant.d.ts +0 -3
- package/dist/src/FormFieldVariant.d.ts.map +0 -1
- package/dist/src/HideSubscriptType.d.ts +0 -3
- package/dist/src/HideSubscriptType.d.ts.map +0 -1
- package/dist/src/index.d.ts +0 -6
- package/dist/src/index.d.ts.map +0 -1
- package/eslint.config.mjs +0 -13
- package/rollup.config.js +0 -32
- package/src/FloatLabelType.ts +0 -2
- package/src/FormFieldControl.ts +0 -83
- package/src/FormFieldElement.ts +0 -876
- package/src/FormFieldVariant.ts +0 -2
- package/src/HideSubscriptType.ts +0 -2
- package/src/index.ts +0 -5
- package/tsconfig.json +0 -9
package/dist/index.min.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2025 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{LitElement as t,nothing as e,html as i,unsafeCSS as o,css as s}from"lit";import{AttachInternals as r,
|
|
6
|
+
import{LitElement as t,nothing as e,html as i,unsafeCSS as o,css as s}from"lit";import{AttachInternals as r,MutationController as a,ResizeController as n,FocusController as l,HoverController as d,PressedController as h,isReadOnlyMixin as c,DesignToken as f,hasAssignedNodes as p,getTextContent as u}from"@m3e/core";import{M3eAriaDescriber as m}from"@m3e/core/a11y";
|
|
7
7
|
/**
|
|
8
8
|
* Adapted from Angular Material Form Field Control
|
|
9
9
|
* Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts
|
|
@@ -11,34 +11,34 @@ import{LitElement as t,nothing as e,html as i,unsafeCSS as o,css as s}from"lit";
|
|
|
11
11
|
* @license MIT
|
|
12
12
|
* Copyright (c) 2025 Google LLC
|
|
13
13
|
* See LICENSE file in the project root for full license text.
|
|
14
|
-
*/const
|
|
14
|
+
*/const b=["m3e-input-chip-set","m3e-select"];function v(t){return t instanceof HTMLElement&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement||b.includes(t.tagName.toLowerCase()))}function g(t){for(const e of t.assignedElements({flatten:!0})){if(v(e))return e;const t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);for(;t.nextNode();)if(v(t.currentNode))return t.currentNode}return null}function y(t,e,i,o){var s,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,o);else for(var n=t.length-1;n>=0;n--)(s=t[n])&&(a=(r<3?s(a):r>3?s(e,i,a):s(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a}function w(t,e,i,o){if("a"===i&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?o:"a"===i?o.call(t):o?o.value:e.get(t)}function _(t,e,i,o,s){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?s.call(t,i):s?s.value=i:e.set(t,i),i}"function"==typeof SuppressedError&&SuppressedError;
|
|
15
15
|
/**
|
|
16
16
|
* @license
|
|
17
17
|
* Copyright 2017 Google LLC
|
|
18
18
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
19
19
|
*/
|
|
20
|
-
const
|
|
20
|
+
const $=globalThis,x=$.ShadowRoot&&(void 0===$.ShadyCSS||$.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,S=Symbol(),E=new WeakMap;
|
|
21
21
|
/**
|
|
22
22
|
* @license
|
|
23
23
|
* Copyright 2019 Google LLC
|
|
24
24
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
25
|
-
*/let
|
|
25
|
+
*/let k=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==S)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(x&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=E.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&E.set(e,t))}return t}toString(){return this.cssText}};const C=(t,e)=>{if(x)t.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const i of e){const e=document.createElement("style"),o=$.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=i.cssText,t.appendChild(e)}},P=x?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new k("string"==typeof t?t:t+"",void 0,S))(e)})(t):t,{is:z,defineProperty:M,getOwnPropertyDescriptor:L,getOwnPropertyNames:U,getOwnPropertySymbols:O,getPrototypeOf:T}=Object,A=globalThis,R=A.trustedTypes,q=R?R.emptyScript:"",W=A.reactiveElementPolyfillSupport,j=(t,e)=>t,D={toAttribute(t,e){switch(e){case Boolean:t=t?q:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},H=(t,e)=>!z(t,e),N={attribute:!0,type:String,converter:D,reflect:!1,useDefault:!1,hasChanged:H};
|
|
26
26
|
/**
|
|
27
27
|
* @license
|
|
28
28
|
* Copyright 2017 Google LLC
|
|
29
29
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
30
|
-
*/Symbol.metadata??=Symbol("metadata"),
|
|
30
|
+
*/Symbol.metadata??=Symbol("metadata"),A.litPropertyMetadata??=new WeakMap;class V extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=N){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),o=this.getPropertyDescriptor(t,i,e);void 0!==o&&M(this.prototype,t,o)}}static getPropertyDescriptor(t,e,i){const{get:o,set:s}=L(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:o,set(e){const r=o?.call(this);s?.call(this,e),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??N}static _$Ei(){if(this.hasOwnProperty(j("elementProperties")))return;const t=T(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(j("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(j("properties"))){const t=this.properties,e=[...U(t),...O(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(P(t))}else void 0!==t&&e.push(P(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return C(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,i);if(void 0!==o&&!0===i.reflect){const s=(void 0!==i.converter?.toAttribute?i.converter:D).toAttribute(e,i.type);this._$Em=t,null==s?this.removeAttribute(o):this.setAttribute(o,s),this._$Em=null}}_$AK(t,e){const i=this.constructor,o=i._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=i.getPropertyOptions(o),s="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:D;this._$Em=o;const r=s.fromAttribute(e,t.type);this[o]=r??this._$Ej?.get(o)??r,this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){const o=this.constructor,s=this[t];if(i??=o.getPropertyOptions(t),!((i.hasChanged??H)(s,e)||i.useDefault&&i.reflect&&s===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:o,wrapped:s},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??e??this[t]),!0!==s||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,o=this[e];!0!==t||this._$AL.has(e)||void 0===o||this.C(e,void 0,i,o)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}}V.elementStyles=[],V.shadowRootOptions={mode:"open"},V[j("elementProperties")]=new Map,V[j("finalized")]=new Map,W?.({ReactiveElement:V}),(A.reactiveElementVersions??=[]).push("2.1.1");
|
|
31
31
|
/**
|
|
32
32
|
* @license
|
|
33
33
|
* Copyright 2017 Google LLC
|
|
34
34
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
35
35
|
*/
|
|
36
|
-
const
|
|
36
|
+
const I={attribute:!0,type:String,converter:D,reflect:!1,hasChanged:H},F=(t=I,e,i)=>{const{kind:o,metadata:s}=i;let r=globalThis.litPropertyMetadata.get(s);if(void 0===r&&globalThis.litPropertyMetadata.set(s,r=new Map),"setter"===o&&((t=Object.create(t)).wrapped=!0),r.set(i.name,t),"accessor"===o){const{name:o}=i;return{set(i){const s=e.get.call(this);e.set.call(this,i),this.requestUpdate(o,s,t)},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===o){const{name:o}=i;return function(i){const s=this[o];e.call(this,i),this.requestUpdate(o,s,t)}}throw Error("Unsupported decorator location: "+o)};function G(t){return(e,i)=>"object"==typeof i?F(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
|
|
37
37
|
/**
|
|
38
38
|
* @license
|
|
39
39
|
* Copyright 2017 Google LLC
|
|
40
40
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
41
|
-
*/function
|
|
41
|
+
*/function B(t){return G({...t,state:!0,attribute:!1})}
|
|
42
42
|
/**
|
|
43
43
|
* @license
|
|
44
44
|
* Copyright 2017 Google LLC
|
|
@@ -49,7 +49,7 @@ const F={attribute:!0,type:String,converter:H,reflect:!1,hasChanged:N},G=(t=F,e,
|
|
|
49
49
|
* Copyright 2017 Google LLC
|
|
50
50
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
51
51
|
*/
|
|
52
|
-
function
|
|
52
|
+
function J(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}
|
|
53
53
|
/**
|
|
54
54
|
* Adapted from Angular Material Form Field
|
|
55
55
|
* Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field.ts
|
|
@@ -57,7 +57,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
57
57
|
* @license MIT
|
|
58
58
|
* Copyright (c) 2025 Google LLC
|
|
59
59
|
* See LICENSE file in the project root for full license text.
|
|
60
|
-
*/var Q,X,Y,Z,tt,et,it,ot,st,rt,at,nt,lt,dt,ht,ct,ft,pt,ut,mt,bt,vt,gt,yt,wt
|
|
60
|
+
*/var K,Q,X,Y,Z,tt,et,it,ot,st,rt,at,nt,lt,dt,ht,ct,ft,pt,ut,mt,bt,vt,gt,yt,wt;let _t=class extends(r(t)){constructor(){super(),K.add(this),Q.set(this,null),X.set(this,()=>w(this,K,"m",vt).call(this)),Y.set(this,()=>w(this,K,"m",mt).call(this)),Z.set(this,new a(this,{target:null,config:{attributeFilter:["disabled","readonly","required"]},callback:()=>this.notifyControlStateChange()})),tt.set(this,new n(this,{target:null,callback:()=>w(this,K,"m",ft).call(this)})),et.set(this,new l(this,{target:null,callback:t=>{t=t&&!(w(this,Q,"f")?.disabled??1),this.classList.toggle("-no-animate",!1),_(this,st,t,"f"),t?this.classList.toggle("-float-label",!0):(this._invalid=!(w(this,Q,"f")?.checkValidity?.()??1),this.notifyControlStateChange())}})),it.set(this,new a(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>w(this,K,"m",yt).call(this)})),ot.set(this,new a(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>w(this,K,"m",wt).call(this)})),st.set(this,!1),this._pseudoLabel="",this._required=!1,this._invalid=!1,this._validationMessage="",rt.set(this,""),at.set(this,""),this.variant="outlined",this.hideRequiredMarker=!1,this.hideSubscript="auto",this.floatLabel="auto",new d(this,{callback:()=>this.classList.toggle("-no-animate",!1)}),new h(this,{callback:t=>this.classList.toggle("-pressed",t&&!(w(this,Q,"f")?.disabled??1))})}get control(){return w(this,Q,"f")}notifyControlStateChange(t=!1){this._required=!0===w(this,Q,"f")?.required,this.classList.toggle("-required",this._required),this.classList.toggle("-disabled",!0===w(this,Q,"f")?.disabled),this.classList.toggle("-readonly",c(w(this,Q,"f"))&&!0===w(this,Q,"f").readOnly),"auto"===this.floatLabel&&this.classList.toggle("-float-label",w(this,K,"a",nt)||w(this,st,"f")),t&&(this._invalid=!(w(this,Q,"f")?.checkValidity?.()??1)),this.classList.toggle("-invalid",this._invalid),this._validationMessage=w(this,Q,"f")?.validationMessage??"",this.isUpdatePending||this.performUpdate()}connectedCallback(){super.connectedCallback(),this.classList.toggle("-no-animate",!0)}disconnectedCallback(){super.disconnectedCallback(),w(this,K,"m",gt).call(this,null)}firstUpdated(t){super.firstUpdated(t),w(this,et,"f").observe(this._base),w(this,it,"f").observe(this._hint),w(this,K,"m",yt).call(this),w(this,ot,"f").observe(this._error),w(this,K,"m",wt).call(this)}update(t){super.update(t),t.has("_invalid")&&w(this,Q,"f")&&(w(this,Q,"f").ariaInvalid=this._invalid?"true":null,w(this,at,"f")&&(this._invalid?m.describe(w(this,Q,"f"),w(this,at,"f")):m.removeDescription(w(this,Q,"f"),w(this,at,"f"))))}render(){return i`<div class="base" @click="${w(this,K,"m",ut)}">
|
|
61
61
|
${"outlined"===this.variant?i`<div class="outline" aria-hidden="true">
|
|
62
62
|
<div class="outline-start"></div>
|
|
63
63
|
<div class="outline-notch">
|
|
@@ -68,35 +68,35 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
68
68
|
<div class="outline-end"></div>
|
|
69
69
|
</div>`:e}
|
|
70
70
|
<div class="prefix">
|
|
71
|
-
<slot name="prefix" @slotchange="${
|
|
71
|
+
<slot name="prefix" @slotchange="${w(this,K,"m",ht)}"></slot>
|
|
72
72
|
</div>
|
|
73
73
|
<div class="content">
|
|
74
74
|
<span class="prefix-text"><slot name="prefix-text"></slot></span>
|
|
75
75
|
<span class="input">
|
|
76
|
-
<slot @slotchange="${
|
|
76
|
+
<slot @slotchange="${w(this,K,"m",pt)}" @change="${w(this,K,"m",bt)}"></slot>
|
|
77
77
|
</span>
|
|
78
78
|
<span class="suffix-text"><slot name="suffix-text"></slot></span>
|
|
79
79
|
<span class="label">
|
|
80
|
-
<slot name="label" @slotchange="${
|
|
80
|
+
<slot name="label" @slotchange="${w(this,K,"m",dt)}"></slot>
|
|
81
81
|
${!this.hideRequiredMarker&&this._required?i`<span class="required-marker" aria-hidden="true"> *</span>`:e}
|
|
82
82
|
</span>
|
|
83
83
|
</div>
|
|
84
|
-
<div class="suffix" @click="${
|
|
85
|
-
<slot name="suffix" @slotchange="${
|
|
84
|
+
<div class="suffix" @click="${w(this,K,"m",lt)}">
|
|
85
|
+
<slot name="suffix" @slotchange="${w(this,K,"m",ct)}"></slot>
|
|
86
86
|
</div>
|
|
87
87
|
</div>
|
|
88
88
|
<span class="subscript" aria-hidden="true">
|
|
89
89
|
<span class="error"><slot name="error">${this._validationMessage}</slot></span>
|
|
90
90
|
<span class="hint"><slot name="hint"></slot></span>
|
|
91
|
-
</span>`}};X=new WeakMap,Y=new WeakMap,Z=new WeakMap,tt=new WeakMap,et=new WeakMap,it=new WeakMap,ot=new WeakMap,st=new WeakMap,rt=new WeakMap,at=new WeakMap,
|
|
91
|
+
</span>`}};Q=new WeakMap,X=new WeakMap,Y=new WeakMap,Z=new WeakMap,tt=new WeakMap,et=new WeakMap,it=new WeakMap,ot=new WeakMap,st=new WeakMap,rt=new WeakMap,at=new WeakMap,K=new WeakSet,nt=function(){return void 0!==w(this,Q,"f")?.shouldLabelFloat?!0===w(this,Q,"f").shouldLabelFloat:"string"==typeof w(this,Q,"f")?.value&&w(this,Q,"f").value.length>0},lt=function(t){t.stopImmediatePropagation(),t.stopPropagation()},dt=function(t){const e=t.target.assignedElements({flatten:!0});this.classList.toggle("-with-label",e.length>0),this._pseudoLabel=e[0]?.textContent??""},ht=function(t){this.classList.toggle("-with-prefix",p(t.target)),w(this,tt,"f").observe(this._prefix)},ct=function(t){this.classList.toggle("-with-suffix",p(t.target))},ft=function(){"outlined"===this.variant&&this._base.style.setProperty("--_prefix-width",`${this._prefix.clientWidth}px`)},pt=function(t){w(this,K,"m",gt).call(this,g(t.target))},ut=function(t){!w(this,Q,"f")||w(this,st,"f")||w(this,Q,"f").disabled||(w(this,Q,"f").onContainerClick?w(this,Q,"f").onContainerClick(t):w(this,Q,"f").focus())},mt=function(){this._invalid=!0,this.notifyControlStateChange()},bt=function(){this._invalid=!(w(this,Q,"f")?.checkValidity?.()??1),this.notifyControlStateChange()},vt=function(){this._invalid=!1,this.notifyControlStateChange()},gt=function(t){w(this,Q,"f")!==t&&(w(this,Q,"f")&&(w(this,rt,"f")&&m.removeDescription(w(this,Q,"f"),w(this,rt,"f")),w(this,at,"f")&&m.removeDescription(w(this,Q,"f"),w(this,at,"f")),w(this,Z,"f").unobserve(w(this,Q,"f")),w(this,Q,"f").removeEventListener("invalid",w(this,Y,"f")),w(this,Q,"f").form?.removeEventListener("reset",w(this,X,"f"))),_(this,Q,t,"f"),w(this,Q,"f")&&(w(this,Z,"f").observe(w(this,Q,"f")),w(this,Q,"f").addEventListener("invalid",w(this,Y,"f")),w(this,Q,"f").form?.addEventListener("reset",w(this,X,"f")),w(this,Q,"f").removeAttribute("aria-invalid"),w(this,rt,"f")&&m.describe(w(this,Q,"f"),w(this,rt,"f")),this.notifyControlStateChange()))},yt=function(){const t=u(this._hint,!0);t!==w(this,rt,"f")&&(w(this,Q,"f")&&w(this,rt,"f")&&m.removeDescription(w(this,Q,"f"),w(this,rt,"f")),_(this,rt,t,"f"),w(this,Q,"f")&&w(this,rt,"f")&&m.describe(w(this,Q,"f"),w(this,rt,"f")))},wt=function(){const t=u(this._error,!0);t!==w(this,at,"f")&&(w(this,Q,"f")&&w(this,at,"f")&&m.removeDescription(w(this,Q,"f"),w(this,at,"f")),_(this,at,t,"f"),w(this,Q,"f")&&w(this,at,"f")&&this._invalid&&m.describe(w(this,Q,"f"),w(this,at,"f")))},_t.styles=s`
|
|
92
92
|
:host {
|
|
93
93
|
display: inline-flex;
|
|
94
94
|
flex-direction: column;
|
|
95
95
|
vertical-align: middle;
|
|
96
|
-
font-size: var(--m3e-form-field-font-size, ${
|
|
97
|
-
font-weight: var(--m3e-form-field-font-weight, ${
|
|
98
|
-
line-height: var(--m3e-form-field-line-height, ${
|
|
99
|
-
letter-spacing: var(--m3e-form-field-tracking, ${
|
|
96
|
+
font-size: var(--m3e-form-field-font-size, ${f.typescale.standard.body.large.fontSize});
|
|
97
|
+
font-weight: var(--m3e-form-field-font-weight, ${f.typescale.standard.body.large.fontWeight});
|
|
98
|
+
line-height: var(--m3e-form-field-line-height, ${f.typescale.standard.body.large.lineHeight});
|
|
99
|
+
letter-spacing: var(--m3e-form-field-tracking, ${f.typescale.standard.body.large.tracking});
|
|
100
100
|
width: var(--m3e-form-field-width, 14.5rem);
|
|
101
101
|
color: var(--_form-field-color);
|
|
102
102
|
}
|
|
@@ -104,14 +104,14 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
104
104
|
display: flex;
|
|
105
105
|
align-items: center;
|
|
106
106
|
position: relative;
|
|
107
|
-
min-height: calc(3.5rem + ${
|
|
107
|
+
min-height: calc(3.5rem + ${f.density.calc(-2)});
|
|
108
108
|
--_form-field-label-font-size: var(
|
|
109
109
|
--m3e-form-field-label-font-size,
|
|
110
|
-
${
|
|
110
|
+
${f.typescale.standard.body.small.fontSize}
|
|
111
111
|
);
|
|
112
112
|
--_form-field-label-line-height: var(
|
|
113
113
|
--m3e-form-field-label-line-height,
|
|
114
|
-
${
|
|
114
|
+
${f.typescale.standard.body.small.lineHeight}
|
|
115
115
|
);
|
|
116
116
|
}
|
|
117
117
|
.content {
|
|
@@ -134,7 +134,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
134
134
|
.prefix-text,
|
|
135
135
|
.suffix-text {
|
|
136
136
|
opacity: 1;
|
|
137
|
-
transition: opacity ${
|
|
137
|
+
transition: opacity ${f.motion.duration.extraLong1};
|
|
138
138
|
user-select: none;
|
|
139
139
|
flex: none;
|
|
140
140
|
}
|
|
@@ -152,12 +152,12 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
152
152
|
top: 0;
|
|
153
153
|
left: 0;
|
|
154
154
|
right: 0;
|
|
155
|
-
font-size: var(--m3e-form-field-label-font-size, ${
|
|
156
|
-
font-weight: var(--m3e-form-field-label-font-weight, ${
|
|
157
|
-
line-height: var(--m3e-form-field-label-line-height, ${
|
|
158
|
-
letter-spacing: var(--m3e-form-field-label-tracking, ${
|
|
155
|
+
font-size: var(--m3e-form-field-label-font-size, ${f.typescale.standard.body.small.fontSize});
|
|
156
|
+
font-weight: var(--m3e-form-field-label-font-weight, ${f.typescale.standard.body.small.fontWeight});
|
|
157
|
+
line-height: var(--m3e-form-field-label-line-height, ${f.typescale.standard.body.small.lineHeight});
|
|
158
|
+
letter-spacing: var(--m3e-form-field-label-tracking, ${f.typescale.standard.body.small.tracking});
|
|
159
159
|
color: var(--_form-field-label-color, inherit);
|
|
160
|
-
transition: ${o(`top ${
|
|
160
|
+
transition: ${o(`top ${f.motion.duration.short4}, \n font-size ${f.motion.duration.short4}, \n line-height ${f.motion.duration.short4}`)};
|
|
161
161
|
}
|
|
162
162
|
:host(.-with-select) .label {
|
|
163
163
|
margin-right: 1.5rem;
|
|
@@ -171,12 +171,12 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
171
171
|
display: inline-flex;
|
|
172
172
|
width: 100%;
|
|
173
173
|
margin-top: 0.25rem;
|
|
174
|
-
font-size: var(--m3e-form-field-subscript-font-size, ${
|
|
175
|
-
font-weight: var(--m3e-form-field-subscript-font-weight, ${
|
|
176
|
-
line-height: var(--m3e-form-field-subscript-line-height, ${
|
|
177
|
-
letter-spacing: var(--m3e-form-field-subscript-tracking, ${
|
|
178
|
-
min-height: var(--m3e-form-field-subscript-line-height, ${
|
|
179
|
-
color: var(--m3e-form-field-subscript-color, ${
|
|
174
|
+
font-size: var(--m3e-form-field-subscript-font-size, ${f.typescale.standard.body.small.fontSize});
|
|
175
|
+
font-weight: var(--m3e-form-field-subscript-font-weight, ${f.typescale.standard.body.small.fontWeight});
|
|
176
|
+
line-height: var(--m3e-form-field-subscript-line-height, ${f.typescale.standard.body.small.lineHeight});
|
|
177
|
+
letter-spacing: var(--m3e-form-field-subscript-tracking, ${f.typescale.standard.body.small.tracking});
|
|
178
|
+
min-height: var(--m3e-form-field-subscript-line-height, ${f.typescale.standard.body.small.lineHeight});
|
|
179
|
+
color: var(--m3e-form-field-subscript-color, ${f.color.onSurfaceVariant});
|
|
180
180
|
}
|
|
181
181
|
.error,
|
|
182
182
|
.hint {
|
|
@@ -189,7 +189,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
189
189
|
opacity: 0;
|
|
190
190
|
margin-top: 0px;
|
|
191
191
|
margin-bottom: 0.25rem;
|
|
192
|
-
transition: ${o(`opacity ${
|
|
192
|
+
transition: ${o(`opacity ${f.motion.duration.short4}, \n margin-top ${f.motion.duration.short4}, \n margin-bottom ${f.motion.duration.short4}`)};
|
|
193
193
|
}
|
|
194
194
|
:host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript,
|
|
195
195
|
:host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript {
|
|
@@ -220,8 +220,8 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
220
220
|
padding: unset;
|
|
221
221
|
}
|
|
222
222
|
::slotted(textarea) {
|
|
223
|
-
scrollbar-width: ${
|
|
224
|
-
scrollbar-color: ${
|
|
223
|
+
scrollbar-width: ${f.scrollbar.thinWidth};
|
|
224
|
+
scrollbar-color: ${f.scrollbar.color};
|
|
225
225
|
}
|
|
226
226
|
::slotted(m3e-select),
|
|
227
227
|
::slotted(m3e-input-chip-set) {
|
|
@@ -229,7 +229,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
229
229
|
min-width: 0;
|
|
230
230
|
}
|
|
231
231
|
:host([variant="outlined"]) ::slotted(m3e-input-chip-set) {
|
|
232
|
-
margin-block: calc(calc(3.5rem + ${
|
|
232
|
+
margin-block: calc(calc(3.5rem + ${f.density.calc(-2)}) / 4);
|
|
233
233
|
}
|
|
234
234
|
::slotted(:not([slot])::part(focus-ring)) {
|
|
235
235
|
display: none;
|
|
@@ -238,7 +238,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
238
238
|
::slotted(textarea)::placeholder {
|
|
239
239
|
user-select: none;
|
|
240
240
|
color: currentColor;
|
|
241
|
-
transition: opacity ${
|
|
241
|
+
transition: opacity ${f.motion.duration.extraLong1};
|
|
242
242
|
}
|
|
243
243
|
:host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
|
|
244
244
|
font-size: inherit;
|
|
@@ -295,7 +295,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
295
295
|
:host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label {
|
|
296
296
|
max-width: 0;
|
|
297
297
|
margin-right: 0px;
|
|
298
|
-
transition-delay: ${
|
|
298
|
+
transition-delay: ${f.motion.duration.short2};
|
|
299
299
|
}
|
|
300
300
|
:host([variant="outlined"]) .outline-start,
|
|
301
301
|
:host([variant="outlined"]) .outline-notch,
|
|
@@ -303,7 +303,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
303
303
|
box-sizing: border-box;
|
|
304
304
|
border-width: var(--_form-field-outline-size, 0.0625rem);
|
|
305
305
|
border-color: var(--_form-field-outline-color);
|
|
306
|
-
transition: border-color ${
|
|
306
|
+
transition: border-color ${f.motion.duration.short4};
|
|
307
307
|
}
|
|
308
308
|
:host([variant="outlined"]:not(.-with-label)) .outline-notch {
|
|
309
309
|
display: none;
|
|
@@ -316,8 +316,8 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
316
316
|
border-top-style: solid;
|
|
317
317
|
border-left-style: solid;
|
|
318
318
|
border-bottom-style: solid;
|
|
319
|
-
border-radius: var(--m3e-outlined-form-field-container-shape, ${
|
|
320
|
-
var(--m3e-outlined-form-field-container-shape, ${
|
|
319
|
+
border-radius: var(--m3e-outlined-form-field-container-shape, ${f.shape.corner.extraSmall}) 0 0
|
|
320
|
+
var(--m3e-outlined-form-field-container-shape, ${f.shape.corner.extraSmall});
|
|
321
321
|
}
|
|
322
322
|
:host([variant="outlined"]) .outline-notch {
|
|
323
323
|
border-bottom-style: solid;
|
|
@@ -328,8 +328,8 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
328
328
|
border-top-style: solid;
|
|
329
329
|
border-right-style: solid;
|
|
330
330
|
border-bottom-style: solid;
|
|
331
|
-
border-radius: 0 var(--m3e-outlined-form-field-container-shape, ${
|
|
332
|
-
var(--m3e-outlined-form-field-container-shape, ${
|
|
331
|
+
border-radius: 0 var(--m3e-outlined-form-field-container-shape, ${f.shape.corner.extraSmall})
|
|
332
|
+
var(--m3e-outlined-form-field-container-shape, ${f.shape.corner.extraSmall}) 0;
|
|
333
333
|
}
|
|
334
334
|
:host([variant="outlined"].-with-prefix) .outline-start {
|
|
335
335
|
min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem);
|
|
@@ -344,18 +344,18 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
344
344
|
width: calc(100% - 2rem);
|
|
345
345
|
}
|
|
346
346
|
:host([variant="outlined"]) .content {
|
|
347
|
-
min-height: calc(3.5rem + ${
|
|
347
|
+
min-height: calc(3.5rem + ${f.density.calc(-2)});
|
|
348
348
|
--_form-field-label-font-size: var(
|
|
349
349
|
--m3e-form-field-label-font-size,
|
|
350
|
-
${
|
|
350
|
+
${f.typescale.standard.body.small.fontSize}
|
|
351
351
|
);
|
|
352
352
|
}
|
|
353
353
|
:host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
|
|
354
354
|
margin-top: unset;
|
|
355
|
-
line-height: calc(3.5rem + ${
|
|
355
|
+
line-height: calc(3.5rem + ${f.density.calc(-2)});
|
|
356
356
|
--_form-field-label-font-size: var(
|
|
357
357
|
--m3e-form-field-label-font-size,
|
|
358
|
-
${
|
|
358
|
+
${f.typescale.standard.body.small.fontSize}
|
|
359
359
|
);
|
|
360
360
|
}
|
|
361
361
|
:host([variant="filled"]) .base {
|
|
@@ -374,7 +374,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
374
374
|
bottom: 0;
|
|
375
375
|
border-bottom-style: solid;
|
|
376
376
|
border-width: 0.0625rem;
|
|
377
|
-
border-radius: var(--m3e-form-field-container-shape, ${
|
|
377
|
+
border-radius: var(--m3e-form-field-container-shape, ${f.shape.corner.extraSmallTop});
|
|
378
378
|
border-color: var(--_form-field-outline-color);
|
|
379
379
|
background-color: var(--_form-field-container-color);
|
|
380
380
|
}
|
|
@@ -393,75 +393,75 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
393
393
|
right: 0;
|
|
394
394
|
bottom: 0;
|
|
395
395
|
background-color: var(--_form-field-hover-container-color);
|
|
396
|
-
transition: background-color ${
|
|
396
|
+
transition: background-color ${f.motion.duration.short4};
|
|
397
397
|
}
|
|
398
398
|
:host([variant="filled"]) .subscript {
|
|
399
399
|
margin-inline: 1rem;
|
|
400
400
|
width: calc(100% - 2rem);
|
|
401
401
|
}
|
|
402
402
|
:host([variant="filled"]) .content {
|
|
403
|
-
padding-top: calc(1.5rem + ${
|
|
403
|
+
padding-top: calc(1.5rem + ${f.density.calc(-2)});
|
|
404
404
|
margin-bottom: 0.5rem;
|
|
405
405
|
}
|
|
406
406
|
:host([variant="filled"]) .label {
|
|
407
|
-
top: calc(0.5rem + ${
|
|
407
|
+
top: calc(0.5rem + ${f.density.calc(-2)});
|
|
408
408
|
}
|
|
409
409
|
:host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
|
|
410
410
|
top: 0px;
|
|
411
|
-
line-height: calc(3.5rem + ${
|
|
411
|
+
line-height: calc(3.5rem + ${f.density.calc(-2)} - 0.0625rem);
|
|
412
412
|
--_form-field-label-font-size: var(
|
|
413
413
|
--m3e-form-field-label-font-size,
|
|
414
|
-
${
|
|
414
|
+
${f.typescale.standard.body.small.fontSize}
|
|
415
415
|
);
|
|
416
416
|
}
|
|
417
417
|
:host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover {
|
|
418
418
|
--_form-field-hover-container-color: color-mix(
|
|
419
419
|
in srgb,
|
|
420
|
-
var(--m3e-form-field-hover-container-color, ${
|
|
420
|
+
var(--m3e-form-field-hover-container-color, ${f.color.onSurface})
|
|
421
421
|
var(--m3e-form-field-hover-container-opacity, 8%),
|
|
422
422
|
transparent
|
|
423
423
|
);
|
|
424
424
|
}
|
|
425
425
|
:host(:not(.-disabled):not(.-invalid)) {
|
|
426
|
-
color: var(--m3e-form-field-color, ${
|
|
426
|
+
color: var(--m3e-form-field-color, ${f.color.onSurface});
|
|
427
427
|
}
|
|
428
428
|
:host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base {
|
|
429
|
-
--_form-field-outline-color: var(--m3e-form-field-outline-color, ${
|
|
429
|
+
--_form-field-outline-color: var(--m3e-form-field-outline-color, ${f.color.outline});
|
|
430
430
|
}
|
|
431
431
|
:host([variant="filled"]:not(.-disabled):not(.-invalid)) .base {
|
|
432
|
-
--_form-field-outline-color: var(--m3e-form-field-outline-color, ${
|
|
432
|
+
--_form-field-outline-color: var(--m3e-form-field-outline-color, ${f.color.onSurfaceVariant});
|
|
433
433
|
}
|
|
434
434
|
:host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base,
|
|
435
435
|
:host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base,
|
|
436
436
|
:host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base,
|
|
437
437
|
:host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base {
|
|
438
|
-
--_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${
|
|
439
|
-
--_form-field-label-color: var(--m3e-form-field-focused-color, ${
|
|
438
|
+
--_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${f.color.primary});
|
|
439
|
+
--_form-field-label-color: var(--m3e-form-field-focused-color, ${f.color.primary});
|
|
440
440
|
}
|
|
441
441
|
:host(:not(.-disabled)) .base {
|
|
442
442
|
--_form-field-container-color: var(
|
|
443
443
|
--m3e-form-field-container-color,
|
|
444
|
-
${
|
|
444
|
+
${f.color.surfaceContainerHighest}
|
|
445
445
|
);
|
|
446
446
|
}
|
|
447
447
|
:host(:not(.-disabled).-invalid) .base {
|
|
448
|
-
--_form-field-label-color: var(--m3e-form-field-invalid-color, ${
|
|
449
|
-
--_form-field-outline-color: var(--m3e-form-field-invalid-color, ${
|
|
448
|
+
--_form-field-label-color: var(--m3e-form-field-invalid-color, ${f.color.error});
|
|
449
|
+
--_form-field-outline-color: var(--m3e-form-field-invalid-color, ${f.color.error});
|
|
450
450
|
}
|
|
451
451
|
:host(:not(.-disabled).-invalid) .subscript {
|
|
452
|
-
color: var(--m3e-form-field-invalid-color, ${
|
|
452
|
+
color: var(--m3e-form-field-invalid-color, ${f.color.error});
|
|
453
453
|
}
|
|
454
454
|
:host(.-disabled) {
|
|
455
455
|
color: color-mix(
|
|
456
456
|
in srgb,
|
|
457
|
-
var(--m3e-form-field-disabled-color, ${
|
|
457
|
+
var(--m3e-form-field-disabled-color, ${f.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%),
|
|
458
458
|
transparent
|
|
459
459
|
);
|
|
460
460
|
}
|
|
461
461
|
:host(.-disabled) .base {
|
|
462
462
|
--_form-field-container-color: color-mix(
|
|
463
463
|
in srgb,
|
|
464
|
-
var(--m3e-form-field-disabled-container-color, ${
|
|
464
|
+
var(--m3e-form-field-disabled-container-color, ${f.color.onSurface})
|
|
465
465
|
var(--m3e-form-field-disabled-container-opacity, 4%),
|
|
466
466
|
transparent
|
|
467
467
|
);
|
|
@@ -500,5 +500,5 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
500
500
|
transition: none !important;
|
|
501
501
|
}
|
|
502
502
|
}
|
|
503
|
-
`,
|
|
503
|
+
`,y([J(".base")],_t.prototype,"_base",void 0),y([J(".prefix")],_t.prototype,"_prefix",void 0),y([J(".error")],_t.prototype,"_error",void 0),y([J(".hint")],_t.prototype,"_hint",void 0),y([B()],_t.prototype,"_pseudoLabel",void 0),y([B()],_t.prototype,"_required",void 0),y([B()],_t.prototype,"_invalid",void 0),y([B()],_t.prototype,"_validationMessage",void 0),y([G({reflect:!0})],_t.prototype,"variant",void 0),y([G({attribute:"hide-required-marker",type:Boolean,reflect:!0})],_t.prototype,"hideRequiredMarker",void 0),y([G({attribute:"hide-subscript",reflect:!0})],_t.prototype,"hideSubscript",void 0),y([G({attribute:"float-label",reflect:!0})],_t.prototype,"floatLabel",void 0),_t=y([(t=>(e,i)=>{void 0!==i?i.addInitializer(()=>{customElements.define(t,e)}):customElements.define(t,e)})("m3e-form-field")],_t);export{_t as M3eFormFieldElement,g as findFormFieldControl,v as isFormFieldControl};
|
|
504
504
|
//# sourceMappingURL=index.min.js.map
|