@m3e/form-field 1.0.0-rc.1 → 1.0.0-rc.3
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 +2568 -7
- package/dist/html-custom-data.json +1 -1
- package/dist/index.js +38 -35
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +96 -97
- package/dist/index.min.js.map +1 -1
- package/dist/src/FormFieldElement.d.ts +2 -3
- package/dist/src/FormFieldElement.d.ts.map +1 -1
- package/package.json +3 -3
- package/cem.config.mjs +0 -16
- package/demo/index.html +0 -116
- 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,
|
|
6
|
+
import{LitElement as t,nothing as e,html as i,css as o,unsafeCSS 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,53 @@ 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")))},(()=>{const t=new CSSStyleSheet;t.replaceSync(o`
|
|
92
|
+
m3e-form-field input::placeholder,
|
|
93
|
+
m3e-form-field textarea::placeholder {
|
|
94
|
+
user-select: none;
|
|
95
|
+
color: currentColor;
|
|
96
|
+
transition: opacity ${f.motion.duration.extraLong1};
|
|
97
|
+
}
|
|
98
|
+
m3e-form-field[float-label="auto"]:not(.-float-label).-with-label input::placeholder,
|
|
99
|
+
m3e-form-field[float-label="auto"]:not(.-float-label).-with-label textarea::placeholder {
|
|
100
|
+
opacity: 0;
|
|
101
|
+
transition: opacity 0s;
|
|
102
|
+
}
|
|
103
|
+
@media (prefers-reduced-motion) {
|
|
104
|
+
m3e-form-field input::placeholder,
|
|
105
|
+
m3e-form-field textarea::placeholder {
|
|
106
|
+
transition: none !important;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
`.toString()),document.adoptedStyleSheets=[...document.adoptedStyleSheets,t]})(),_t.styles=o`
|
|
92
110
|
:host {
|
|
93
111
|
display: inline-flex;
|
|
94
112
|
flex-direction: column;
|
|
95
113
|
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, ${
|
|
114
|
+
font-size: var(--m3e-form-field-font-size, ${f.typescale.standard.body.large.fontSize});
|
|
115
|
+
font-weight: var(--m3e-form-field-font-weight, ${f.typescale.standard.body.large.fontWeight});
|
|
116
|
+
line-height: var(--m3e-form-field-line-height, ${f.typescale.standard.body.large.lineHeight});
|
|
117
|
+
letter-spacing: var(--m3e-form-field-tracking, ${f.typescale.standard.body.large.tracking});
|
|
100
118
|
width: var(--m3e-form-field-width, 14.5rem);
|
|
101
119
|
color: var(--_form-field-color);
|
|
102
120
|
}
|
|
@@ -104,14 +122,14 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
104
122
|
display: flex;
|
|
105
123
|
align-items: center;
|
|
106
124
|
position: relative;
|
|
107
|
-
min-height: calc(3.5rem + ${
|
|
125
|
+
min-height: calc(3.5rem + ${f.density.calc(-2)});
|
|
108
126
|
--_form-field-label-font-size: var(
|
|
109
127
|
--m3e-form-field-label-font-size,
|
|
110
|
-
${
|
|
128
|
+
${f.typescale.standard.body.small.fontSize}
|
|
111
129
|
);
|
|
112
130
|
--_form-field-label-line-height: var(
|
|
113
131
|
--m3e-form-field-label-line-height,
|
|
114
|
-
${
|
|
132
|
+
${f.typescale.standard.body.small.lineHeight}
|
|
115
133
|
);
|
|
116
134
|
}
|
|
117
135
|
.content {
|
|
@@ -134,7 +152,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
134
152
|
.prefix-text,
|
|
135
153
|
.suffix-text {
|
|
136
154
|
opacity: 1;
|
|
137
|
-
transition: opacity ${
|
|
155
|
+
transition: opacity ${f.motion.duration.extraLong1};
|
|
138
156
|
user-select: none;
|
|
139
157
|
flex: none;
|
|
140
158
|
}
|
|
@@ -152,15 +170,15 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
152
170
|
top: 0;
|
|
153
171
|
left: 0;
|
|
154
172
|
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, ${
|
|
173
|
+
font-size: var(--m3e-form-field-label-font-size, ${f.typescale.standard.body.small.fontSize});
|
|
174
|
+
font-weight: var(--m3e-form-field-label-font-weight, ${f.typescale.standard.body.small.fontWeight});
|
|
175
|
+
line-height: var(--m3e-form-field-label-line-height, ${f.typescale.standard.body.small.lineHeight});
|
|
176
|
+
letter-spacing: var(--m3e-form-field-label-tracking, ${f.typescale.standard.body.small.tracking});
|
|
159
177
|
color: var(--_form-field-label-color, inherit);
|
|
160
|
-
transition: ${
|
|
178
|
+
transition: ${s(`top ${f.motion.duration.short4}, \n font-size ${f.motion.duration.short4}, \n line-height ${f.motion.duration.short4}`)};
|
|
161
179
|
}
|
|
162
180
|
:host(.-with-select) .label {
|
|
163
|
-
margin-
|
|
181
|
+
margin-inline-end: 1.5rem;
|
|
164
182
|
}
|
|
165
183
|
::slotted([slot="label"]) {
|
|
166
184
|
white-space: nowrap;
|
|
@@ -171,12 +189,12 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
171
189
|
display: inline-flex;
|
|
172
190
|
width: 100%;
|
|
173
191
|
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, ${
|
|
192
|
+
font-size: var(--m3e-form-field-subscript-font-size, ${f.typescale.standard.body.small.fontSize});
|
|
193
|
+
font-weight: var(--m3e-form-field-subscript-font-weight, ${f.typescale.standard.body.small.fontWeight});
|
|
194
|
+
line-height: var(--m3e-form-field-subscript-line-height, ${f.typescale.standard.body.small.lineHeight});
|
|
195
|
+
letter-spacing: var(--m3e-form-field-subscript-tracking, ${f.typescale.standard.body.small.tracking});
|
|
196
|
+
min-height: var(--m3e-form-field-subscript-line-height, ${f.typescale.standard.body.small.lineHeight});
|
|
197
|
+
color: var(--m3e-form-field-subscript-color, ${f.color.onSurfaceVariant});
|
|
180
198
|
}
|
|
181
199
|
.error,
|
|
182
200
|
.hint {
|
|
@@ -189,7 +207,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
189
207
|
opacity: 0;
|
|
190
208
|
margin-top: 0px;
|
|
191
209
|
margin-bottom: 0.25rem;
|
|
192
|
-
transition: ${
|
|
210
|
+
transition: ${s(`opacity ${f.motion.duration.short4}, \n margin-top ${f.motion.duration.short4}, \n margin-bottom ${f.motion.duration.short4}`)};
|
|
193
211
|
}
|
|
194
212
|
:host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript,
|
|
195
213
|
:host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript {
|
|
@@ -220,8 +238,8 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
220
238
|
padding: unset;
|
|
221
239
|
}
|
|
222
240
|
::slotted(textarea) {
|
|
223
|
-
scrollbar-width: ${
|
|
224
|
-
scrollbar-color: ${
|
|
241
|
+
scrollbar-width: ${f.scrollbar.thinWidth};
|
|
242
|
+
scrollbar-color: ${f.scrollbar.color};
|
|
225
243
|
}
|
|
226
244
|
::slotted(m3e-select),
|
|
227
245
|
::slotted(m3e-input-chip-set) {
|
|
@@ -229,43 +247,29 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
229
247
|
min-width: 0;
|
|
230
248
|
}
|
|
231
249
|
:host([variant="outlined"]) ::slotted(m3e-input-chip-set) {
|
|
232
|
-
margin-block: calc(calc(3.5rem + ${
|
|
233
|
-
}
|
|
234
|
-
::slotted(:not([slot])::part(focus-ring)) {
|
|
235
|
-
display: none;
|
|
236
|
-
}
|
|
237
|
-
::slotted(input)::placeholder,
|
|
238
|
-
::slotted(textarea)::placeholder {
|
|
239
|
-
user-select: none;
|
|
240
|
-
color: currentColor;
|
|
241
|
-
transition: opacity ${p.motion.duration.extraLong1};
|
|
250
|
+
margin-block: calc(calc(3.5rem + ${f.density.calc(-2)}) / 4);
|
|
242
251
|
}
|
|
243
252
|
:host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
|
|
244
253
|
font-size: inherit;
|
|
245
254
|
}
|
|
246
|
-
|
|
247
|
-
:host([float-label="auto"]:not(.-float-label).-with-label) ::slotted(textarea)::placeholder,
|
|
255
|
+
|
|
248
256
|
:host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text,
|
|
249
257
|
:host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text {
|
|
250
258
|
opacity: 0;
|
|
251
259
|
transition: opacity 0s;
|
|
252
260
|
}
|
|
253
261
|
.prefix {
|
|
254
|
-
margin-
|
|
262
|
+
margin-inline-start: 1rem;
|
|
255
263
|
}
|
|
256
264
|
:host(.-with-prefix) .prefix {
|
|
257
|
-
margin-
|
|
258
|
-
margin-
|
|
259
|
-
}
|
|
260
|
-
.suffix {
|
|
261
|
-
margin-right: 1rem;
|
|
265
|
+
margin-inline-end: 1rem;
|
|
266
|
+
margin-inline-start: 0.75rem;
|
|
262
267
|
}
|
|
263
268
|
:host(.-with-suffix) .suffix {
|
|
264
|
-
margin-
|
|
265
|
-
margin-right: 0.75rem;
|
|
269
|
+
margin-inline-start: 0.25rem;
|
|
266
270
|
}
|
|
267
271
|
:host(.-with-suffix.-with-select) .suffix {
|
|
268
|
-
margin-
|
|
272
|
+
margin-inline-start: unset;
|
|
269
273
|
}
|
|
270
274
|
:host(.-with-select) .suffix-text {
|
|
271
275
|
display: none;
|
|
@@ -284,18 +288,18 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
284
288
|
}
|
|
285
289
|
:host([variant="outlined"]) .pseudo-label {
|
|
286
290
|
visibility: hidden;
|
|
287
|
-
margin-
|
|
291
|
+
margin-inline-end: 0.25rem;
|
|
288
292
|
font-size: var(--_form-field-label-font-size);
|
|
289
293
|
line-height: var(--_form-field-label-line-height);
|
|
290
294
|
letter-spacing: var(--_form-field-label-tracking);
|
|
291
295
|
max-width: 100%;
|
|
292
|
-
transition-property: max-width, margin-
|
|
296
|
+
transition-property: max-width, margin-inline-end;
|
|
293
297
|
transition-duration: 1ms;
|
|
294
298
|
}
|
|
295
299
|
:host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label {
|
|
296
300
|
max-width: 0;
|
|
297
|
-
margin-
|
|
298
|
-
transition-delay: ${
|
|
301
|
+
margin-inline-end: 0px;
|
|
302
|
+
transition-delay: ${f.motion.duration.short2};
|
|
299
303
|
}
|
|
300
304
|
:host([variant="outlined"]) .outline-start,
|
|
301
305
|
:host([variant="outlined"]) .outline-notch,
|
|
@@ -303,21 +307,18 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
303
307
|
box-sizing: border-box;
|
|
304
308
|
border-width: var(--_form-field-outline-size, 0.0625rem);
|
|
305
309
|
border-color: var(--_form-field-outline-color);
|
|
306
|
-
transition: border-color ${
|
|
310
|
+
transition: border-color ${f.motion.duration.short4};
|
|
307
311
|
}
|
|
308
312
|
:host([variant="outlined"]:not(.-with-label)) .outline-notch {
|
|
309
313
|
display: none;
|
|
310
314
|
}
|
|
311
|
-
:host([variant="outlined"].-with-suffix:not(.-with-select)) .outline-notch {
|
|
312
|
-
margin-right: -0.75rem;
|
|
313
|
-
}
|
|
314
315
|
:host([variant="outlined"]) .outline-start {
|
|
315
316
|
min-width: 0.75rem;
|
|
316
317
|
border-top-style: solid;
|
|
317
318
|
border-left-style: solid;
|
|
318
319
|
border-bottom-style: solid;
|
|
319
|
-
border-radius: var(--m3e-outlined-form-field-container-shape, ${
|
|
320
|
-
var(--m3e-outlined-form-field-container-shape, ${
|
|
320
|
+
border-radius: var(--m3e-outlined-form-field-container-shape, ${f.shape.corner.extraSmall}) 0 0
|
|
321
|
+
var(--m3e-outlined-form-field-container-shape, ${f.shape.corner.extraSmall});
|
|
321
322
|
}
|
|
322
323
|
:host([variant="outlined"]) .outline-notch {
|
|
323
324
|
border-bottom-style: solid;
|
|
@@ -328,8 +329,8 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
328
329
|
border-top-style: solid;
|
|
329
330
|
border-right-style: solid;
|
|
330
331
|
border-bottom-style: solid;
|
|
331
|
-
border-radius: 0 var(--m3e-outlined-form-field-container-shape, ${
|
|
332
|
-
var(--m3e-outlined-form-field-container-shape, ${
|
|
332
|
+
border-radius: 0 var(--m3e-outlined-form-field-container-shape, ${f.shape.corner.extraSmall})
|
|
333
|
+
var(--m3e-outlined-form-field-container-shape, ${f.shape.corner.extraSmall}) 0;
|
|
333
334
|
}
|
|
334
335
|
:host([variant="outlined"].-with-prefix) .outline-start {
|
|
335
336
|
min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem);
|
|
@@ -344,18 +345,18 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
344
345
|
width: calc(100% - 2rem);
|
|
345
346
|
}
|
|
346
347
|
:host([variant="outlined"]) .content {
|
|
347
|
-
min-height: calc(3.5rem + ${
|
|
348
|
+
min-height: calc(3.5rem + ${f.density.calc(-2)});
|
|
348
349
|
--_form-field-label-font-size: var(
|
|
349
350
|
--m3e-form-field-label-font-size,
|
|
350
|
-
${
|
|
351
|
+
${f.typescale.standard.body.small.fontSize}
|
|
351
352
|
);
|
|
352
353
|
}
|
|
353
354
|
:host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
|
|
354
355
|
margin-top: unset;
|
|
355
|
-
line-height: calc(3.5rem + ${
|
|
356
|
+
line-height: calc(3.5rem + ${f.density.calc(-2)});
|
|
356
357
|
--_form-field-label-font-size: var(
|
|
357
358
|
--m3e-form-field-label-font-size,
|
|
358
|
-
${
|
|
359
|
+
${f.typescale.standard.body.small.fontSize}
|
|
359
360
|
);
|
|
360
361
|
}
|
|
361
362
|
:host([variant="filled"]) .base {
|
|
@@ -374,7 +375,7 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
374
375
|
bottom: 0;
|
|
375
376
|
border-bottom-style: solid;
|
|
376
377
|
border-width: 0.0625rem;
|
|
377
|
-
border-radius: var(--m3e-form-field-container-shape, ${
|
|
378
|
+
border-radius: var(--m3e-form-field-container-shape, ${f.shape.corner.extraSmallTop});
|
|
378
379
|
border-color: var(--_form-field-outline-color);
|
|
379
380
|
background-color: var(--_form-field-container-color);
|
|
380
381
|
}
|
|
@@ -393,75 +394,75 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
393
394
|
right: 0;
|
|
394
395
|
bottom: 0;
|
|
395
396
|
background-color: var(--_form-field-hover-container-color);
|
|
396
|
-
transition: background-color ${
|
|
397
|
+
transition: background-color ${f.motion.duration.short4};
|
|
397
398
|
}
|
|
398
399
|
:host([variant="filled"]) .subscript {
|
|
399
400
|
margin-inline: 1rem;
|
|
400
401
|
width: calc(100% - 2rem);
|
|
401
402
|
}
|
|
402
403
|
:host([variant="filled"]) .content {
|
|
403
|
-
padding-top: calc(1.5rem + ${
|
|
404
|
+
padding-top: calc(1.5rem + ${f.density.calc(-2)});
|
|
404
405
|
margin-bottom: 0.5rem;
|
|
405
406
|
}
|
|
406
407
|
:host([variant="filled"]) .label {
|
|
407
|
-
top: calc(0.5rem + ${
|
|
408
|
+
top: calc(0.5rem + ${f.density.calc(-2)});
|
|
408
409
|
}
|
|
409
410
|
:host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
|
|
410
411
|
top: 0px;
|
|
411
|
-
line-height: calc(3.5rem + ${
|
|
412
|
+
line-height: calc(3.5rem + ${f.density.calc(-2)} - 0.0625rem);
|
|
412
413
|
--_form-field-label-font-size: var(
|
|
413
414
|
--m3e-form-field-label-font-size,
|
|
414
|
-
${
|
|
415
|
+
${f.typescale.standard.body.small.fontSize}
|
|
415
416
|
);
|
|
416
417
|
}
|
|
417
418
|
:host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover {
|
|
418
419
|
--_form-field-hover-container-color: color-mix(
|
|
419
420
|
in srgb,
|
|
420
|
-
var(--m3e-form-field-hover-container-color, ${
|
|
421
|
+
var(--m3e-form-field-hover-container-color, ${f.color.onSurface})
|
|
421
422
|
var(--m3e-form-field-hover-container-opacity, 8%),
|
|
422
423
|
transparent
|
|
423
424
|
);
|
|
424
425
|
}
|
|
425
426
|
:host(:not(.-disabled):not(.-invalid)) {
|
|
426
|
-
color: var(--m3e-form-field-color, ${
|
|
427
|
+
color: var(--m3e-form-field-color, ${f.color.onSurface});
|
|
427
428
|
}
|
|
428
429
|
:host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base {
|
|
429
|
-
--_form-field-outline-color: var(--m3e-form-field-outline-color, ${
|
|
430
|
+
--_form-field-outline-color: var(--m3e-form-field-outline-color, ${f.color.outline});
|
|
430
431
|
}
|
|
431
432
|
:host([variant="filled"]:not(.-disabled):not(.-invalid)) .base {
|
|
432
|
-
--_form-field-outline-color: var(--m3e-form-field-outline-color, ${
|
|
433
|
+
--_form-field-outline-color: var(--m3e-form-field-outline-color, ${f.color.onSurfaceVariant});
|
|
433
434
|
}
|
|
434
435
|
:host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base,
|
|
435
436
|
:host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base,
|
|
436
437
|
:host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base,
|
|
437
438
|
: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, ${
|
|
439
|
+
--_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${f.color.primary});
|
|
440
|
+
--_form-field-label-color: var(--m3e-form-field-focused-color, ${f.color.primary});
|
|
440
441
|
}
|
|
441
442
|
:host(:not(.-disabled)) .base {
|
|
442
443
|
--_form-field-container-color: var(
|
|
443
444
|
--m3e-form-field-container-color,
|
|
444
|
-
${
|
|
445
|
+
${f.color.surfaceContainerHighest}
|
|
445
446
|
);
|
|
446
447
|
}
|
|
447
448
|
: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, ${
|
|
449
|
+
--_form-field-label-color: var(--m3e-form-field-invalid-color, ${f.color.error});
|
|
450
|
+
--_form-field-outline-color: var(--m3e-form-field-invalid-color, ${f.color.error});
|
|
450
451
|
}
|
|
451
452
|
:host(:not(.-disabled).-invalid) .subscript {
|
|
452
|
-
color: var(--m3e-form-field-invalid-color, ${
|
|
453
|
+
color: var(--m3e-form-field-invalid-color, ${f.color.error});
|
|
453
454
|
}
|
|
454
455
|
:host(.-disabled) {
|
|
455
456
|
color: color-mix(
|
|
456
457
|
in srgb,
|
|
457
|
-
var(--m3e-form-field-disabled-color, ${
|
|
458
|
+
var(--m3e-form-field-disabled-color, ${f.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%),
|
|
458
459
|
transparent
|
|
459
460
|
);
|
|
460
461
|
}
|
|
461
462
|
:host(.-disabled) .base {
|
|
462
463
|
--_form-field-container-color: color-mix(
|
|
463
464
|
in srgb,
|
|
464
|
-
var(--m3e-form-field-disabled-container-color, ${
|
|
465
|
+
var(--m3e-form-field-disabled-container-color, ${f.color.onSurface})
|
|
465
466
|
var(--m3e-form-field-disabled-container-opacity, 4%),
|
|
466
467
|
transparent
|
|
467
468
|
);
|
|
@@ -494,11 +495,9 @@ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
|
|
|
494
495
|
.outline-start,
|
|
495
496
|
.outline-notch,
|
|
496
497
|
.outline-end,
|
|
497
|
-
.pseudo-label
|
|
498
|
-
::slotted(input)::placeholder,
|
|
499
|
-
::slotted(textarea)::placeholder {
|
|
498
|
+
.pseudo-label {
|
|
500
499
|
transition: none !important;
|
|
501
500
|
}
|
|
502
501
|
}
|
|
503
|
-
`,
|
|
502
|
+
`,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
503
|
//# sourceMappingURL=index.min.js.map
|