@m3e/form-field 1.0.6 → 1.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.
Files changed (5) hide show
  1. package/dist/index.js +671 -767
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +1 -450
  4. package/dist/index.min.js.map +1 -1
  5. package/package.json +2 -16
package/dist/index.js CHANGED
@@ -22,11 +22,7 @@ const KNOWN_FORM_FIELD_TAGS = ["m3e-input-chip-set", "m3e-select"];
22
22
  * @returns {value is FormFieldControl} A value indicating whether `value` is a `FormFieldControl`.
23
23
  */
24
24
  function isFormFieldControl(value) {
25
- return (value instanceof HTMLElement &&
26
- (value instanceof HTMLInputElement ||
27
- value instanceof HTMLTextAreaElement ||
28
- value instanceof HTMLSelectElement ||
29
- KNOWN_FORM_FIELD_TAGS.includes(value.tagName.toLowerCase())));
25
+ return value instanceof HTMLElement && (value instanceof HTMLInputElement || value instanceof HTMLTextAreaElement || value instanceof HTMLSelectElement || KNOWN_FORM_FIELD_TAGS.includes(value.tagName.toLowerCase()));
30
26
  }
31
27
  /**
32
28
  * Locates the first `FormFieldControl` in a given slot.
@@ -34,18 +30,20 @@ function isFormFieldControl(value) {
34
30
  * @returns {FormFieldControl | null} The `FormFieldControl` located in `slot`.
35
31
  */
36
32
  function findFormFieldControl(slot) {
37
- for (const element of slot.assignedElements({ flatten: true })) {
38
- if (isFormFieldControl(element)) {
39
- return element;
40
- }
41
- const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
42
- while (walker.nextNode()) {
43
- if (isFormFieldControl(walker.currentNode)) {
44
- return walker.currentNode;
45
- }
46
- }
33
+ for (const element of slot.assignedElements({
34
+ flatten: true
35
+ })) {
36
+ if (isFormFieldControl(element)) {
37
+ return element;
38
+ }
39
+ const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
40
+ while (walker.nextNode()) {
41
+ if (isFormFieldControl(walker.currentNode)) {
42
+ return walker.currentNode;
43
+ }
47
44
  }
48
- return null;
45
+ }
46
+ return null;
49
47
  }
50
48
 
51
49
  /******************************************************************************
@@ -61,33 +59,30 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
61
59
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
62
60
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
63
61
  PERFORMANCE OF THIS SOFTWARE.
64
- ***************************************************************************** */
65
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
66
-
67
-
68
- function __decorate(decorators, target, key, desc) {
69
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
70
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
71
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
72
- return c > 3 && r && Object.defineProperty(target, key, r), r;
73
- }
74
-
75
- function __classPrivateFieldGet(receiver, state, kind, f) {
76
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
77
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
78
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
79
- }
80
-
81
- function __classPrivateFieldSet(receiver, state, value, kind, f) {
82
- if (kind === "m") throw new TypeError("Private method is not writable");
83
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
84
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
85
- return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
86
- }
87
-
88
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
89
- var e = new Error(message);
90
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
62
+ ***************************************************************************** */
63
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
64
+
65
+ function __decorate(decorators, target, key, desc) {
66
+ var c = arguments.length,
67
+ r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
68
+ d;
69
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
70
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
71
+ }
72
+ function __classPrivateFieldGet(receiver, state, kind, f) {
73
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
74
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
75
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
76
+ }
77
+ function __classPrivateFieldSet(receiver, state, value, kind, f) {
78
+ if (kind === "m") throw new TypeError("Private method is not writable");
79
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
80
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
81
+ return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
82
+ }
83
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
84
+ var e = new Error(message);
85
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
91
86
  };
92
87
 
93
88
  /**
@@ -95,45 +90,408 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
95
90
  * Copyright 2017 Google LLC
96
91
  * SPDX-License-Identifier: BSD-3-Clause
97
92
  */
98
- const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
93
+ const t$1 = t => (e, o) => {
94
+ void 0 !== o ? o.addInitializer(() => {
95
+ customElements.define(t, e);
96
+ }) : customElements.define(t, e);
97
+ };
99
98
 
100
99
  /**
101
100
  * @license
102
101
  * Copyright 2019 Google LLC
103
102
  * SPDX-License-Identifier: BSD-3-Clause
104
103
  */
105
- const t=globalThis,e$3=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==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 s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$2("string"==typeof t?t:t+"",void 0,s),S=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
104
+ const t = globalThis,
105
+ e$3 = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
106
+ s = Symbol(),
107
+ o$2 = new WeakMap();
108
+ let n$2 = class n {
109
+ constructor(t, e, o) {
110
+ if (this._$cssResult$ = true, o !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
111
+ this.cssText = t, this.t = e;
112
+ }
113
+ get styleSheet() {
114
+ let t = this.o;
115
+ const s = this.t;
116
+ if (e$3 && void 0 === t) {
117
+ const e = void 0 !== s && 1 === s.length;
118
+ e && (t = o$2.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$2.set(s, t));
119
+ }
120
+ return t;
121
+ }
122
+ toString() {
123
+ return this.cssText;
124
+ }
125
+ };
126
+ const r$3 = t => new n$2("string" == typeof t ? t : t + "", void 0, s),
127
+ S = (s, o) => {
128
+ if (e$3) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
129
+ const o = document.createElement("style"),
130
+ n = t.litNonce;
131
+ void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
132
+ }
133
+ },
134
+ c$1 = e$3 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
135
+ let e = "";
136
+ for (const s of t.cssRules) e += s.cssText;
137
+ return r$3(e);
138
+ })(t) : t;
106
139
 
107
140
  /**
108
141
  * @license
109
142
  * Copyright 2017 Google LLC
110
143
  * SPDX-License-Identifier: BSD-3-Clause
111
- */const{is:i,defineProperty:e$2,getOwnPropertyDescriptor:h,getOwnPropertyNames:r$2,getOwnPropertySymbols:o$1,getPrototypeOf:n$1}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){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}},f=(t,s)=>!i(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y 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,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$2(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r$2(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,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,s=this.constructor.elementProperties;for(const i of s.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 S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;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,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
144
+ */
145
+ const {
146
+ is: i,
147
+ defineProperty: e$2,
148
+ getOwnPropertyDescriptor: h,
149
+ getOwnPropertyNames: r$2,
150
+ getOwnPropertySymbols: o$1,
151
+ getPrototypeOf: n$1
152
+ } = Object,
153
+ a = globalThis,
154
+ c = a.trustedTypes,
155
+ l = c ? c.emptyScript : "",
156
+ p = a.reactiveElementPolyfillSupport,
157
+ d = (t, s) => t,
158
+ u = {
159
+ toAttribute(t, s) {
160
+ switch (s) {
161
+ case Boolean:
162
+ t = t ? l : null;
163
+ break;
164
+ case Object:
165
+ case Array:
166
+ t = null == t ? t : JSON.stringify(t);
167
+ }
168
+ return t;
169
+ },
170
+ fromAttribute(t, s) {
171
+ let i = t;
172
+ switch (s) {
173
+ case Boolean:
174
+ i = null !== t;
175
+ break;
176
+ case Number:
177
+ i = null === t ? null : Number(t);
178
+ break;
179
+ case Object:
180
+ case Array:
181
+ try {
182
+ i = JSON.parse(t);
183
+ } catch (t) {
184
+ i = null;
185
+ }
186
+ }
187
+ return i;
188
+ }
189
+ },
190
+ f = (t, s) => !i(t, s),
191
+ b = {
192
+ attribute: true,
193
+ type: String,
194
+ converter: u,
195
+ reflect: false,
196
+ useDefault: false,
197
+ hasChanged: f
198
+ };
199
+ Symbol.metadata ??= Symbol("metadata"), a.litPropertyMetadata ??= new WeakMap();
200
+ class y extends HTMLElement {
201
+ static addInitializer(t) {
202
+ this._$Ei(), (this.l ??= []).push(t);
203
+ }
204
+ static get observedAttributes() {
205
+ return this.finalize(), this._$Eh && [...this._$Eh.keys()];
206
+ }
207
+ static createProperty(t, s = b) {
208
+ if (s.state && (s.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = true), this.elementProperties.set(t, s), !s.noAccessor) {
209
+ const i = Symbol(),
210
+ h = this.getPropertyDescriptor(t, i, s);
211
+ void 0 !== h && e$2(this.prototype, t, h);
212
+ }
213
+ }
214
+ static getPropertyDescriptor(t, s, i) {
215
+ const {
216
+ get: e,
217
+ set: r
218
+ } = h(this.prototype, t) ?? {
219
+ get() {
220
+ return this[s];
221
+ },
222
+ set(t) {
223
+ this[s] = t;
224
+ }
225
+ };
226
+ return {
227
+ get: e,
228
+ set(s) {
229
+ const h = e?.call(this);
230
+ r?.call(this, s), this.requestUpdate(t, h, i);
231
+ },
232
+ configurable: true,
233
+ enumerable: true
234
+ };
235
+ }
236
+ static getPropertyOptions(t) {
237
+ return this.elementProperties.get(t) ?? b;
238
+ }
239
+ static _$Ei() {
240
+ if (this.hasOwnProperty(d("elementProperties"))) return;
241
+ const t = n$1(this);
242
+ t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
243
+ }
244
+ static finalize() {
245
+ if (this.hasOwnProperty(d("finalized"))) return;
246
+ if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
247
+ const t = this.properties,
248
+ s = [...r$2(t), ...o$1(t)];
249
+ for (const i of s) this.createProperty(i, t[i]);
250
+ }
251
+ const t = this[Symbol.metadata];
252
+ if (null !== t) {
253
+ const s = litPropertyMetadata.get(t);
254
+ if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
255
+ }
256
+ this._$Eh = new Map();
257
+ for (const [t, s] of this.elementProperties) {
258
+ const i = this._$Eu(t, s);
259
+ void 0 !== i && this._$Eh.set(i, t);
260
+ }
261
+ this.elementStyles = this.finalizeStyles(this.styles);
262
+ }
263
+ static finalizeStyles(s) {
264
+ const i = [];
265
+ if (Array.isArray(s)) {
266
+ const e = new Set(s.flat(1 / 0).reverse());
267
+ for (const s of e) i.unshift(c$1(s));
268
+ } else void 0 !== s && i.push(c$1(s));
269
+ return i;
270
+ }
271
+ static _$Eu(t, s) {
272
+ const i = s.attribute;
273
+ return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
274
+ }
275
+ constructor() {
276
+ super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
277
+ }
278
+ _$Ev() {
279
+ this._$ES = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
280
+ }
281
+ addController(t) {
282
+ (this._$EO ??= new Set()).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
283
+ }
284
+ removeController(t) {
285
+ this._$EO?.delete(t);
286
+ }
287
+ _$E_() {
288
+ const t = new Map(),
289
+ s = this.constructor.elementProperties;
290
+ for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
291
+ t.size > 0 && (this._$Ep = t);
292
+ }
293
+ createRenderRoot() {
294
+ const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
295
+ return S(t, this.constructor.elementStyles), t;
296
+ }
297
+ connectedCallback() {
298
+ this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach(t => t.hostConnected?.());
299
+ }
300
+ enableUpdating(t) {}
301
+ disconnectedCallback() {
302
+ this._$EO?.forEach(t => t.hostDisconnected?.());
303
+ }
304
+ attributeChangedCallback(t, s, i) {
305
+ this._$AK(t, i);
306
+ }
307
+ _$ET(t, s) {
308
+ const i = this.constructor.elementProperties.get(t),
309
+ e = this.constructor._$Eu(t, i);
310
+ if (void 0 !== e && true === i.reflect) {
311
+ const h = (void 0 !== i.converter?.toAttribute ? i.converter : u).toAttribute(s, i.type);
312
+ this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
313
+ }
314
+ }
315
+ _$AK(t, s) {
316
+ const i = this.constructor,
317
+ e = i._$Eh.get(t);
318
+ if (void 0 !== e && this._$Em !== e) {
319
+ const t = i.getPropertyOptions(e),
320
+ h = "function" == typeof t.converter ? {
321
+ fromAttribute: t.converter
322
+ } : void 0 !== t.converter?.fromAttribute ? t.converter : u;
323
+ this._$Em = e;
324
+ const r = h.fromAttribute(s, t.type);
325
+ this[e] = r ?? this._$Ej?.get(e) ?? r, this._$Em = null;
326
+ }
327
+ }
328
+ requestUpdate(t, s, i) {
329
+ if (void 0 !== t) {
330
+ const e = this.constructor,
331
+ h = this[t];
332
+ if (i ??= e.getPropertyOptions(t), !((i.hasChanged ?? f)(h, s) || i.useDefault && i.reflect && h === this._$Ej?.get(t) && !this.hasAttribute(e._$Eu(t, i)))) return;
333
+ this.C(t, s, i);
334
+ }
335
+ false === this.isUpdatePending && (this._$ES = this._$EP());
336
+ }
337
+ C(t, s, {
338
+ useDefault: i,
339
+ reflect: e,
340
+ wrapped: h
341
+ }, r) {
342
+ i && !(this._$Ej ??= new Map()).has(t) && (this._$Ej.set(t, r ?? s ?? this[t]), true !== h || void 0 !== r) || (this._$AL.has(t) || (this.hasUpdated || i || (s = void 0), this._$AL.set(t, s)), true === e && this._$Em !== t && (this._$Eq ??= new Set()).add(t));
343
+ }
344
+ async _$EP() {
345
+ this.isUpdatePending = true;
346
+ try {
347
+ await this._$ES;
348
+ } catch (t) {
349
+ Promise.reject(t);
350
+ }
351
+ const t = this.scheduleUpdate();
352
+ return null != t && (await t), !this.isUpdatePending;
353
+ }
354
+ scheduleUpdate() {
355
+ return this.performUpdate();
356
+ }
357
+ performUpdate() {
358
+ if (!this.isUpdatePending) return;
359
+ if (!this.hasUpdated) {
360
+ if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
361
+ for (const [t, s] of this._$Ep) this[t] = s;
362
+ this._$Ep = void 0;
363
+ }
364
+ const t = this.constructor.elementProperties;
365
+ if (t.size > 0) for (const [s, i] of t) {
366
+ const {
367
+ wrapped: t
368
+ } = i,
369
+ e = this[s];
370
+ true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
371
+ }
372
+ }
373
+ let t = false;
374
+ const s = this._$AL;
375
+ try {
376
+ t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$EM();
377
+ } catch (s) {
378
+ throw t = false, this._$EM(), s;
379
+ }
380
+ t && this._$AE(s);
381
+ }
382
+ willUpdate(t) {}
383
+ _$AE(t) {
384
+ this._$EO?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
385
+ }
386
+ _$EM() {
387
+ this._$AL = new Map(), this.isUpdatePending = false;
388
+ }
389
+ get updateComplete() {
390
+ return this.getUpdateComplete();
391
+ }
392
+ getUpdateComplete() {
393
+ return this._$ES;
394
+ }
395
+ shouldUpdate(t) {
396
+ return true;
397
+ }
398
+ update(t) {
399
+ this._$Eq &&= this._$Eq.forEach(t => this._$ET(t, this[t])), this._$EM();
400
+ }
401
+ updated(t) {}
402
+ firstUpdated(t) {}
403
+ }
404
+ y.elementStyles = [], y.shadowRootOptions = {
405
+ mode: "open"
406
+ }, y[d("elementProperties")] = new Map(), y[d("finalized")] = new Map(), p?.({
407
+ ReactiveElement: y
408
+ }), (a.reactiveElementVersions ??= []).push("2.1.1");
112
409
 
113
410
  /**
114
411
  * @license
115
412
  * Copyright 2017 Google LLC
116
413
  * SPDX-License-Identifier: BSD-3-Clause
117
- */const o={attribute:true,type:String,converter:u,reflect:false,hasChanged:f},r$1=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r$1(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
414
+ */
415
+ const o = {
416
+ attribute: true,
417
+ type: String,
418
+ converter: u,
419
+ reflect: false,
420
+ hasChanged: f
421
+ },
422
+ r$1 = (t = o, e, r) => {
423
+ const {
424
+ kind: n,
425
+ metadata: i
426
+ } = r;
427
+ let s = globalThis.litPropertyMetadata.get(i);
428
+ if (void 0 === s && globalThis.litPropertyMetadata.set(i, s = new Map()), "setter" === n && ((t = Object.create(t)).wrapped = true), s.set(r.name, t), "accessor" === n) {
429
+ const {
430
+ name: o
431
+ } = r;
432
+ return {
433
+ set(r) {
434
+ const n = e.get.call(this);
435
+ e.set.call(this, r), this.requestUpdate(o, n, t);
436
+ },
437
+ init(e) {
438
+ return void 0 !== e && this.C(o, void 0, t, e), e;
439
+ }
440
+ };
441
+ }
442
+ if ("setter" === n) {
443
+ const {
444
+ name: o
445
+ } = r;
446
+ return function (r) {
447
+ const n = this[o];
448
+ e.call(this, r), this.requestUpdate(o, n, t);
449
+ };
450
+ }
451
+ throw Error("Unsupported decorator location: " + n);
452
+ };
453
+ function n(t) {
454
+ return (e, o) => "object" == typeof o ? r$1(t, e, o) : ((t, e, o) => {
455
+ const r = e.hasOwnProperty(o);
456
+ return e.constructor.createProperty(o, t), r ? Object.getOwnPropertyDescriptor(e, o) : void 0;
457
+ })(t, e, o);
458
+ }
118
459
 
119
460
  /**
120
461
  * @license
121
462
  * Copyright 2017 Google LLC
122
463
  * SPDX-License-Identifier: BSD-3-Clause
123
- */function r(r){return n({...r,state:true,attribute:false})}
464
+ */
465
+ function r(r) {
466
+ return n({
467
+ ...r,
468
+ state: true,
469
+ attribute: false
470
+ });
471
+ }
124
472
 
125
473
  /**
126
474
  * @license
127
475
  * Copyright 2017 Google LLC
128
476
  * SPDX-License-Identifier: BSD-3-Clause
129
477
  */
130
- const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
478
+ const e$1 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
131
479
 
132
480
  /**
133
481
  * @license
134
482
  * Copyright 2017 Google LLC
135
483
  * SPDX-License-Identifier: BSD-3-Clause
136
- */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
484
+ */
485
+ function e(e, r) {
486
+ return (n, s, i) => {
487
+ const o = t => t.renderRoot?.querySelector(e) ?? null;
488
+ return e$1(n, s, {
489
+ get() {
490
+ return o(this);
491
+ }
492
+ });
493
+ };
494
+ }
137
495
 
138
496
  /**
139
497
  * Adapted from Angular Material Form Field
@@ -216,186 +574,169 @@ var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldE
216
574
  * @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.
217
575
  */
218
576
  let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals(LitElement) {
219
- constructor() {
220
- super();
221
- _M3eFormFieldElement_instances.add(this);
222
- /** @private */ _M3eFormFieldElement_control.set(this, null);
223
- /** @private */ _M3eFormFieldElement_formResetHandler.set(this, () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleFormReset).call(this));
224
- /** @private */ _M3eFormFieldElement_controlInvalidHandler.set(this, () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleControlInvalid).call(this));
225
- /** @private */
226
- _M3eFormFieldElement_controlMutationController.set(this, new MutationController(this, {
227
- target: null,
228
- config: { attributeFilter: ["disabled", "readonly", "required"] },
229
- callback: () => this.notifyControlStateChange(),
230
- }));
231
- /** @private */
232
- _M3eFormFieldElement_resizeController.set(this, new ResizeController(this, {
233
- target: null,
234
- callback: () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handlePrefixResize).call(this),
235
- }));
236
- /** @private */
237
- _M3eFormFieldElement_focusController.set(this, new FocusController(this, {
238
- target: null,
239
- callback: (focused) => {
240
- focused = focused && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true);
241
- this.classList.toggle("-no-animate", false);
242
- __classPrivateFieldSet(this, _M3eFormFieldElement_focused, focused, "f");
243
- if (focused) {
244
- this.classList.toggle("-float-label", true);
245
- }
246
- else {
247
- this._invalid = !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.checkValidity?.() ?? true);
248
- this.notifyControlStateChange();
249
- }
250
- },
251
- }));
252
- /** @private */
253
- _M3eFormFieldElement_hintMutationController.set(this, new MutationController(this, {
254
- target: null,
255
- config: { childList: true, subtree: true },
256
- callback: () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleHintChange).call(this),
257
- }));
258
- /** @private */
259
- _M3eFormFieldElement_errorMutationController.set(this, new MutationController(this, {
260
- target: null,
261
- config: { childList: true, subtree: true },
262
- callback: () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleErrorChange).call(this),
263
- }));
264
- /** @private */ _M3eFormFieldElement_focused.set(this, false);
265
- /** @private */ this._pseudoLabel = "";
266
- /** @private */ this._required = false;
267
- /** @private */ this._invalid = false;
268
- /** @private */ this._validationMessage = "";
269
- /** @private */ _M3eFormFieldElement_hintText.set(this, "");
270
- /** @private */ _M3eFormFieldElement_errorText.set(this, "");
271
- /**
272
- * The appearance variant of the field.
273
- * @default "outlined"
274
- */
275
- this.variant = "outlined";
276
- /**
277
- * Whether the required marker should be hidden.
278
- * @default false
279
- */
280
- this.hideRequiredMarker = false;
281
- /**
282
- * Whether subscript content is hidden.
283
- * @default "auto"
284
- */
285
- this.hideSubscript = "auto";
286
- /**
287
- * Specifies whether the label should float always or only when necessary.
288
- * @default "auto"
289
- */
290
- this.floatLabel = "auto";
291
- new HoverController(this, { callback: () => this.classList.toggle("-no-animate", false) });
292
- new PressedController(this, {
293
- callback: (pressed) => this.classList.toggle("-pressed", pressed && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true)),
294
- });
295
- }
296
- /** A reference to the element used to anchor dropdown menus. */
297
- get menuAnchor() {
298
- return this._base;
299
- }
300
- /** A reference to the hosted form field control. */
301
- get control() {
302
- return __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f");
303
- }
577
+ constructor() {
578
+ super();
579
+ _M3eFormFieldElement_instances.add(this);
580
+ /** @private */
581
+ _M3eFormFieldElement_control.set(this, null);
582
+ /** @private */
583
+ _M3eFormFieldElement_formResetHandler.set(this, () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleFormReset).call(this));
584
+ /** @private */
585
+ _M3eFormFieldElement_controlInvalidHandler.set(this, () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleControlInvalid).call(this));
586
+ /** @private */
587
+ _M3eFormFieldElement_controlMutationController.set(this, new MutationController(this, {
588
+ target: null,
589
+ config: {
590
+ attributeFilter: ["disabled", "readonly", "required"]
591
+ },
592
+ callback: () => this.notifyControlStateChange()
593
+ }));
594
+ /** @private */
595
+ _M3eFormFieldElement_resizeController.set(this, new ResizeController(this, {
596
+ target: null,
597
+ callback: () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handlePrefixResize).call(this)
598
+ }));
599
+ /** @private */
600
+ _M3eFormFieldElement_focusController.set(this, new FocusController(this, {
601
+ target: null,
602
+ callback: focused => {
603
+ focused = focused && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true);
604
+ this.classList.toggle("-no-animate", false);
605
+ __classPrivateFieldSet(this, _M3eFormFieldElement_focused, focused, "f");
606
+ if (focused) {
607
+ this.classList.toggle("-float-label", true);
608
+ } else {
609
+ this._invalid = !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.checkValidity?.() ?? true);
610
+ this.notifyControlStateChange();
611
+ }
612
+ }
613
+ }));
614
+ /** @private */
615
+ _M3eFormFieldElement_hintMutationController.set(this, new MutationController(this, {
616
+ target: null,
617
+ config: {
618
+ childList: true,
619
+ subtree: true
620
+ },
621
+ callback: () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleHintChange).call(this)
622
+ }));
623
+ /** @private */
624
+ _M3eFormFieldElement_errorMutationController.set(this, new MutationController(this, {
625
+ target: null,
626
+ config: {
627
+ childList: true,
628
+ subtree: true
629
+ },
630
+ callback: () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleErrorChange).call(this)
631
+ }));
632
+ /** @private */
633
+ _M3eFormFieldElement_focused.set(this, false);
634
+ /** @private */
635
+ this._pseudoLabel = "";
636
+ /** @private */
637
+ this._required = false;
638
+ /** @private */
639
+ this._invalid = false;
640
+ /** @private */
641
+ this._validationMessage = "";
642
+ /** @private */
643
+ _M3eFormFieldElement_hintText.set(this, "");
644
+ /** @private */
645
+ _M3eFormFieldElement_errorText.set(this, "");
304
646
  /**
305
- * Notifies the form field that the state of the hosted `control` has changed.
306
- * @param {boolean} [checkValidity=false] Whether to check validity.
647
+ * The appearance variant of the field.
648
+ * @default "outlined"
307
649
  */
308
- notifyControlStateChange(checkValidity = false) {
309
- this._required = __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.required === true;
310
- this.classList.toggle("-required", this._required);
311
- this.classList.toggle("-disabled", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled === true);
312
- this.classList.toggle("-readonly", isReadOnlyMixin(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) && __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").readOnly === true);
313
- if (this.floatLabel === "auto") {
314
- this.classList.toggle("-float-label", __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "a", _M3eFormFieldElement_shouldFloatLabel_get) || __classPrivateFieldGet(this, _M3eFormFieldElement_focused, "f"));
315
- }
316
- if (checkValidity) {
317
- this._invalid = !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.checkValidity?.() ?? true);
318
- }
319
- this.classList.toggle("-invalid", this._invalid);
320
- this._validationMessage = __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.validationMessage ?? "";
321
- if (!this.isUpdatePending) {
322
- this.performUpdate();
323
- }
324
- }
325
- /** @inheritdoc */
326
- connectedCallback() {
327
- super.connectedCallback();
328
- // Label animations are disabled on initial paint.
329
- this.classList.toggle("-no-animate", true);
650
+ this.variant = "outlined";
651
+ /**
652
+ * Whether the required marker should be hidden.
653
+ * @default false
654
+ */
655
+ this.hideRequiredMarker = false;
656
+ /**
657
+ * Whether subscript content is hidden.
658
+ * @default "auto"
659
+ */
660
+ this.hideSubscript = "auto";
661
+ /**
662
+ * Specifies whether the label should float always or only when necessary.
663
+ * @default "auto"
664
+ */
665
+ this.floatLabel = "auto";
666
+ new HoverController(this, {
667
+ callback: () => this.classList.toggle("-no-animate", false)
668
+ });
669
+ new PressedController(this, {
670
+ callback: pressed => this.classList.toggle("-pressed", pressed && !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled ?? true))
671
+ });
672
+ }
673
+ /** A reference to the element used to anchor dropdown menus. */
674
+ get menuAnchor() {
675
+ return this._base;
676
+ }
677
+ /** A reference to the hosted form field control. */
678
+ get control() {
679
+ return __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f");
680
+ }
681
+ /**
682
+ * Notifies the form field that the state of the hosted `control` has changed.
683
+ * @param {boolean} [checkValidity=false] Whether to check validity.
684
+ */
685
+ notifyControlStateChange(checkValidity = false) {
686
+ this._required = __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.required === true;
687
+ this.classList.toggle("-required", this._required);
688
+ this.classList.toggle("-disabled", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.disabled === true);
689
+ this.classList.toggle("-readonly", isReadOnlyMixin(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) && __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").readOnly === true);
690
+ if (this.floatLabel === "auto") {
691
+ this.classList.toggle("-float-label", __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "a", _M3eFormFieldElement_shouldFloatLabel_get) || __classPrivateFieldGet(this, _M3eFormFieldElement_focused, "f"));
330
692
  }
331
- /** @inheritdoc */
332
- disconnectedCallback() {
333
- super.disconnectedCallback();
334
- __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_changeControl).call(this, null);
693
+ if (checkValidity) {
694
+ this._invalid = !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.checkValidity?.() ?? true);
335
695
  }
336
- /** @private */
337
- firstUpdated(_changedProperties) {
338
- super.firstUpdated(_changedProperties);
339
- __classPrivateFieldGet(this, _M3eFormFieldElement_focusController, "f").observe(this._base);
340
- __classPrivateFieldGet(this, _M3eFormFieldElement_hintMutationController, "f").observe(this._hint);
341
- __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleHintChange).call(this);
342
- __classPrivateFieldGet(this, _M3eFormFieldElement_errorMutationController, "f").observe(this._error);
343
- __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleErrorChange).call(this);
696
+ this.classList.toggle("-invalid", this._invalid);
697
+ this._validationMessage = __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.validationMessage ?? "";
698
+ if (!this.isUpdatePending) {
699
+ this.performUpdate();
344
700
  }
345
- /** @inheritdoc */
346
- update(changedProperties) {
347
- super.update(changedProperties);
348
- if (changedProperties.has("_invalid") && __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) {
349
- __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").ariaInvalid = this._invalid ? "true" : null;
350
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f")) {
351
- if (this._invalid) {
352
- M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
353
- }
354
- else {
355
- M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
356
- }
357
- }
701
+ }
702
+ /** @inheritdoc */
703
+ connectedCallback() {
704
+ super.connectedCallback();
705
+ // Label animations are disabled on initial paint.
706
+ this.classList.toggle("-no-animate", true);
707
+ }
708
+ /** @inheritdoc */
709
+ disconnectedCallback() {
710
+ super.disconnectedCallback();
711
+ __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_changeControl).call(this, null);
712
+ }
713
+ /** @private */
714
+ firstUpdated(_changedProperties) {
715
+ super.firstUpdated(_changedProperties);
716
+ __classPrivateFieldGet(this, _M3eFormFieldElement_focusController, "f").observe(this._base);
717
+ __classPrivateFieldGet(this, _M3eFormFieldElement_hintMutationController, "f").observe(this._hint);
718
+ __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleHintChange).call(this);
719
+ __classPrivateFieldGet(this, _M3eFormFieldElement_errorMutationController, "f").observe(this._error);
720
+ __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleErrorChange).call(this);
721
+ }
722
+ /** @inheritdoc */
723
+ update(changedProperties) {
724
+ super.update(changedProperties);
725
+ if (changedProperties.has("_invalid") && __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) {
726
+ __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").ariaInvalid = this._invalid ? "true" : null;
727
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f")) {
728
+ if (this._invalid) {
729
+ M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
730
+ } else {
731
+ M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
358
732
  }
733
+ }
359
734
  }
360
- /** @inheritdoc */
361
- render() {
362
- return html `<div class="base" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleContainerClick)}">
363
- ${this.variant === "outlined"
364
- ? html `<div class="outline" aria-hidden="true">
365
- <div class="outline-start"></div>
366
- <div class="outline-notch">
367
- <div class="pseudo-label">
368
- ${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html `&nbsp;*` : nothing}
369
- </div>
370
- </div>
371
- <div class="outline-end"></div>
372
- </div>`
373
- : nothing}
374
- <div class="prefix">
375
- <slot name="prefix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handlePrefixSlotChange)}"></slot>
376
- </div>
377
- <div class="content">
378
- <span class="prefix-text"><slot name="prefix-text"></slot></span>
379
- <span class="input">
380
- <slot @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSlotChange)}" @change="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleControlChange)}"></slot>
381
- </span>
382
- <span class="suffix-text"><slot name="suffix-text"></slot></span>
383
- <span class="label">
384
- <slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleLabelSlotChange)}"></slot>
385
- ${!this.hideRequiredMarker && this._required
386
- ? html `<span class="required-marker" aria-hidden="true">&nbsp;*</span>`
387
- : nothing}
388
- </span>
389
- </div>
390
- <div class="suffix" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}">
391
- <slot name="suffix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSuffixSlotChange)}"></slot>
392
- </div>
393
- </div>
394
- <span class="subscript" aria-hidden="true">
395
- <span class="error"><slot name="error">${this._validationMessage}</slot></span>
396
- <span class="hint"><slot name="hint"></slot></span>
397
- </span>`;
398
- }
735
+ }
736
+ /** @inheritdoc */
737
+ render() {
738
+ return html`<div class="base" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleContainerClick)}">${this.variant === "outlined" ? html`<div class="outline" aria-hidden="true"><div class="outline-start"></div><div class="outline-notch"><div class="pseudo-label">${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}</div></div><div class="outline-end"></div></div>` : nothing}<div class="prefix"><slot name="prefix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handlePrefixSlotChange)}"></slot></div><div class="content"><span class="prefix-text"><slot name="prefix-text"></slot></span><span class="input"><slot @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSlotChange)}" @change="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleControlChange)}"></slot></span><span class="suffix-text"><slot name="suffix-text"></slot></span><span class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleLabelSlotChange)}"></slot>${!this.hideRequiredMarker && this._required ? html`<span class="required-marker" aria-hidden="true">&nbsp;*</span>` : nothing}</span></div><div class="suffix" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}"><slot name="suffix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSuffixSlotChange)}"></slot></div></div><span class="subscript" aria-hidden="true"><span class="error"><slot name="error">${this._validationMessage}</slot></span><span class="hint"><slot name="hint"></slot></span></span>`;
739
+ }
399
740
  };
400
741
  _M3eFormFieldElement_control = new WeakMap();
401
742
  _M3eFormFieldElement_formResetHandler = new WeakMap();
@@ -410,584 +751,147 @@ _M3eFormFieldElement_hintText = new WeakMap();
410
751
  _M3eFormFieldElement_errorText = new WeakMap();
411
752
  _M3eFormFieldElement_instances = new WeakSet();
412
753
  _M3eFormFieldElement_shouldFloatLabel_get = function _M3eFormFieldElement_shouldFloatLabel_get() {
413
- return __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.shouldLabelFloat !== undefined
414
- ? __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").shouldLabelFloat === true
415
- : typeof __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.value == "string" && __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").value.length > 0;
754
+ return __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.shouldLabelFloat !== undefined ? __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").shouldLabelFloat === true : typeof __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.value == "string" && __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").value.length > 0;
416
755
  };
417
756
  _M3eFormFieldElement_stopPropagation = function _M3eFormFieldElement_stopPropagation(e) {
418
- e.stopImmediatePropagation();
419
- e.stopPropagation();
757
+ e.stopImmediatePropagation();
758
+ e.stopPropagation();
420
759
  };
421
760
  _M3eFormFieldElement_handleLabelSlotChange = function _M3eFormFieldElement_handleLabelSlotChange(e) {
422
- const assignedElements = e.target.assignedElements({ flatten: true });
423
- this.classList.toggle("-with-label", assignedElements.length > 0);
424
- this._pseudoLabel = assignedElements[0]?.textContent ?? "";
761
+ const assignedElements = e.target.assignedElements({
762
+ flatten: true
763
+ });
764
+ this.classList.toggle("-with-label", assignedElements.length > 0);
765
+ this._pseudoLabel = assignedElements[0]?.textContent ?? "";
425
766
  };
426
767
  _M3eFormFieldElement_handlePrefixSlotChange = function _M3eFormFieldElement_handlePrefixSlotChange(e) {
427
- this.classList.toggle("-with-prefix", hasAssignedNodes(e.target));
428
- __classPrivateFieldGet(this, _M3eFormFieldElement_resizeController, "f").observe(this._prefix);
768
+ this.classList.toggle("-with-prefix", hasAssignedNodes(e.target));
769
+ __classPrivateFieldGet(this, _M3eFormFieldElement_resizeController, "f").observe(this._prefix);
429
770
  };
430
771
  _M3eFormFieldElement_handleSuffixSlotChange = function _M3eFormFieldElement_handleSuffixSlotChange(e) {
431
- this.classList.toggle("-with-suffix", hasAssignedNodes(e.target));
772
+ this.classList.toggle("-with-suffix", hasAssignedNodes(e.target));
432
773
  };
433
774
  _M3eFormFieldElement_handlePrefixResize = function _M3eFormFieldElement_handlePrefixResize() {
434
- if (this.variant === "outlined") {
435
- this._base.style.setProperty("--_prefix-width", `${this._prefix.clientWidth}px`);
436
- }
775
+ if (this.variant === "outlined") {
776
+ this._base.style.setProperty("--_prefix-width", `${this._prefix.clientWidth}px`);
777
+ }
437
778
  };
438
779
  _M3eFormFieldElement_handleSlotChange = function _M3eFormFieldElement_handleSlotChange(e) {
439
- __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_changeControl).call(this, findFormFieldControl(e.target));
780
+ __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_changeControl).call(this, findFormFieldControl(e.target));
440
781
  };
441
782
  _M3eFormFieldElement_handleContainerClick = function _M3eFormFieldElement_handleContainerClick(e) {
442
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && !__classPrivateFieldGet(this, _M3eFormFieldElement_focused, "f") && !__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").disabled) {
443
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").onContainerClick) {
444
- __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").onContainerClick(e);
445
- }
446
- else {
447
- __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").focus();
448
- }
783
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && !__classPrivateFieldGet(this, _M3eFormFieldElement_focused, "f") && !__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").disabled) {
784
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").onContainerClick) {
785
+ __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").onContainerClick(e);
786
+ } else {
787
+ __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").focus();
449
788
  }
789
+ }
450
790
  };
451
791
  _M3eFormFieldElement_handleControlInvalid = function _M3eFormFieldElement_handleControlInvalid() {
452
- this._invalid = true;
453
- this.notifyControlStateChange();
792
+ this._invalid = true;
793
+ this.notifyControlStateChange();
454
794
  };
455
795
  _M3eFormFieldElement_handleControlChange = function _M3eFormFieldElement_handleControlChange() {
456
- this._invalid = !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.checkValidity?.() ?? true);
457
- this.notifyControlStateChange();
796
+ this._invalid = !(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.checkValidity?.() ?? true);
797
+ this.notifyControlStateChange();
458
798
  };
459
799
  _M3eFormFieldElement_handleFormReset = function _M3eFormFieldElement_handleFormReset() {
460
- this._invalid = false;
461
- setTimeout(() => this.notifyControlStateChange());
800
+ this._invalid = false;
801
+ setTimeout(() => this.notifyControlStateChange());
462
802
  };
463
803
  _M3eFormFieldElement_changeControl = function _M3eFormFieldElement_changeControl(control) {
464
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") === control)
465
- return;
466
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) {
467
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f")) {
468
- M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"));
469
- }
470
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f")) {
471
- M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
472
- }
473
- __classPrivateFieldGet(this, _M3eFormFieldElement_controlMutationController, "f").unobserve(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"));
474
- __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").removeEventListener("invalid", __classPrivateFieldGet(this, _M3eFormFieldElement_controlInvalidHandler, "f"));
475
- __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").form?.removeEventListener("reset", __classPrivateFieldGet(this, _M3eFormFieldElement_formResetHandler, "f"));
476
- }
477
- __classPrivateFieldSet(this, _M3eFormFieldElement_control, control, "f");
478
- if (["INPUT", "TEXTAREA"].includes(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.tagName ?? "")) {
479
- this._base.style.setProperty("--_form-field-cursor", "text");
804
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") === control) return;
805
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) {
806
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f")) {
807
+ M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"));
480
808
  }
481
- else {
482
- this._base.style.removeProperty("--_form-field-cursor");
809
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f")) {
810
+ M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
483
811
  }
484
- this.classList.toggle("-with-select", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.tagName === "M3E-SELECT");
485
- if (this.classList.contains("-with-select")) {
486
- this._base.style.setProperty("--_form-field-cursor", "pointer");
487
- }
488
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) {
489
- __classPrivateFieldGet(this, _M3eFormFieldElement_controlMutationController, "f").observe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"));
490
- __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").addEventListener("invalid", __classPrivateFieldGet(this, _M3eFormFieldElement_controlInvalidHandler, "f"));
491
- __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").form?.addEventListener("reset", __classPrivateFieldGet(this, _M3eFormFieldElement_formResetHandler, "f"));
492
- __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").removeAttribute("aria-invalid");
493
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f")) {
494
- M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"));
495
- }
496
- this.notifyControlStateChange();
812
+ __classPrivateFieldGet(this, _M3eFormFieldElement_controlMutationController, "f").unobserve(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"));
813
+ __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").removeEventListener("invalid", __classPrivateFieldGet(this, _M3eFormFieldElement_controlInvalidHandler, "f"));
814
+ __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").form?.removeEventListener("reset", __classPrivateFieldGet(this, _M3eFormFieldElement_formResetHandler, "f"));
815
+ }
816
+ __classPrivateFieldSet(this, _M3eFormFieldElement_control, control, "f");
817
+ if (["INPUT", "TEXTAREA"].includes(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.tagName ?? "")) {
818
+ this._base.style.setProperty("--_form-field-cursor", "text");
819
+ } else {
820
+ this._base.style.removeProperty("--_form-field-cursor");
821
+ }
822
+ this.classList.toggle("-with-select", __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.tagName === "M3E-SELECT");
823
+ if (this.classList.contains("-with-select")) {
824
+ this._base.style.setProperty("--_form-field-cursor", "pointer");
825
+ }
826
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")) {
827
+ __classPrivateFieldGet(this, _M3eFormFieldElement_controlMutationController, "f").observe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"));
828
+ __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").addEventListener("invalid", __classPrivateFieldGet(this, _M3eFormFieldElement_controlInvalidHandler, "f"));
829
+ __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").form?.addEventListener("reset", __classPrivateFieldGet(this, _M3eFormFieldElement_formResetHandler, "f"));
830
+ __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").removeAttribute("aria-invalid");
831
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f")) {
832
+ M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"));
497
833
  }
834
+ this.notifyControlStateChange();
835
+ }
498
836
  };
499
837
  _M3eFormFieldElement_handleHintChange = function _M3eFormFieldElement_handleHintChange() {
500
- const hintText = getTextContent(this._hint, true);
501
- if (hintText === __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"))
502
- return;
503
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f")) {
504
- M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"));
505
- }
506
- __classPrivateFieldSet(this, _M3eFormFieldElement_hintText, hintText, "f");
507
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f")) {
508
- M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"));
509
- }
838
+ const hintText = getTextContent(this._hint, true);
839
+ if (hintText === __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f")) return;
840
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f")) {
841
+ M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"));
842
+ }
843
+ __classPrivateFieldSet(this, _M3eFormFieldElement_hintText, hintText, "f");
844
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f")) {
845
+ M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"));
846
+ }
510
847
  };
511
848
  _M3eFormFieldElement_handleErrorChange = function _M3eFormFieldElement_handleErrorChange() {
512
- const errorText = getTextContent(this._error, true);
513
- if (errorText === __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"))
514
- return;
515
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f")) {
516
- M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
517
- }
518
- __classPrivateFieldSet(this, _M3eFormFieldElement_errorText, errorText, "f");
519
- if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f") && this._invalid) {
520
- M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
521
- }
849
+ const errorText = getTextContent(this._error, true);
850
+ if (errorText === __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f")) return;
851
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f")) {
852
+ M3eAriaDescriber.removeDescription(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
853
+ }
854
+ __classPrivateFieldSet(this, _M3eFormFieldElement_errorText, errorText, "f");
855
+ if (__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f") && __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f") && this._invalid) {
856
+ M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_errorText, "f"));
857
+ }
522
858
  };
523
859
  (() => {
524
- const lightDomStyle = new CSSStyleSheet();
525
- lightDomStyle.replaceSync(css `
526
- m3e-form-field input::placeholder,
527
- m3e-form-field textarea::placeholder {
528
- user-select: none;
529
- color: currentColor;
530
- transition: opacity ${DesignToken.motion.duration.extraLong1};
531
- }
532
- m3e-form-field[float-label="auto"]:not(.-float-label).-with-label input::placeholder,
533
- m3e-form-field[float-label="auto"]:not(.-float-label).-with-label textarea::placeholder {
534
- opacity: 0;
535
- transition: opacity 0s;
536
- }
537
- @media (prefers-reduced-motion) {
538
- m3e-form-field input::placeholder,
539
- m3e-form-field textarea::placeholder {
540
- transition: none !important;
541
- }
542
- }
543
- `.toString());
544
- document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
860
+ const lightDomStyle = new CSSStyleSheet();
861
+ lightDomStyle.replaceSync(css`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${DesignToken.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(.-float-label).-with-label input::placeholder, m3e-form-field[float-label="auto"]:not(.-float-label).-with-label textarea::placeholder { opacity: 0; transition: opacity 0s; } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`.toString());
862
+ document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
545
863
  })();
546
864
  /** The styles of the element. */
547
- M3eFormFieldElement.styles = css `
548
- :host {
549
- display: inline-flex;
550
- flex-direction: column;
551
- vertical-align: middle;
552
- font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});
553
- font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});
554
- line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});
555
- letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});
556
- width: var(--m3e-form-field-width, 14.5rem);
557
- color: var(--_form-field-color);
558
- }
559
- :host(:not(.-disabled)) .base {
560
- cursor: var(--_form-field-cursor);
561
- }
562
- .base {
563
- display: flex;
564
- align-items: center;
565
- position: relative;
566
- min-height: calc(3.5rem + ${DesignToken.density.calc(-2)});
567
- --_form-field-label-font-size: var(
568
- --m3e-form-field-label-font-size,
569
- ${DesignToken.typescale.standard.body.small.fontSize}
570
- );
571
- --_form-field-label-line-height: var(
572
- --m3e-form-field-label-line-height,
573
- ${DesignToken.typescale.standard.body.small.lineHeight}
574
- );
575
- }
576
- .content {
577
- display: flex;
578
- align-items: center;
579
- position: relative;
580
- flex: 1 1 auto;
581
- min-width: 0;
582
- min-height: var(--m3e-form-field-icon-size, 1.5rem);
583
- }
584
- .prefix,
585
- .suffix {
586
- display: flex;
587
- align-items: center;
588
- position: relative;
589
- user-select: none;
590
- flex: none;
591
- font-size: var(--m3e-form-field-icon-size, 1.5rem);
592
- }
593
- .prefix-text,
594
- .suffix-text {
595
- opacity: 1;
596
- transition: opacity ${DesignToken.motion.duration.extraLong1};
597
- user-select: none;
598
- flex: none;
599
- }
600
- .input {
601
- display: inline-flex;
602
- flex-wrap: wrap;
603
- flex: 1 1 auto;
604
- min-width: 0;
605
- }
606
- .label {
607
- display: flex;
608
- position: absolute;
609
- pointer-events: none;
610
- user-select: none;
611
- top: 0;
612
- left: 0;
613
- right: 0;
614
- font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize});
615
- font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});
616
- line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});
617
- letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking});
618
- color: var(--_form-field-label-color, inherit);
619
- transition: ${unsafeCSS(`top ${DesignToken.motion.duration.short4},
620
- font-size ${DesignToken.motion.duration.short4},
621
- line-height ${DesignToken.motion.duration.short4}`)};
622
- }
623
- :host(.-with-select) .label {
624
- margin-inline-end: 1.5rem;
625
- }
626
- ::slotted([slot="label"]) {
627
- white-space: nowrap;
628
- overflow: hidden;
629
- text-overflow: ellipsis;
630
- }
631
- .subscript {
632
- display: inline-flex;
633
- width: 100%;
634
- margin-top: 0.25rem;
635
- font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize});
636
- font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});
637
- line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});
638
- letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking});
639
- min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});
640
- color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant});
641
- }
642
- .error,
643
- .hint {
644
- flex: 1 1 auto;
645
- }
646
- :host([hide-subscript="always"]) .subscript {
647
- display: none;
648
- }
649
- :host([hide-subscript="auto"]:not(.-invalid)) .subscript {
650
- opacity: 0;
651
- margin-top: 0px;
652
- margin-bottom: 0.25rem;
653
- transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short4},
654
- margin-top ${DesignToken.motion.duration.short4},
655
- margin-bottom ${DesignToken.motion.duration.short4}`)};
656
- }
657
- :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript,
658
- :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript {
659
- opacity: 1;
660
- margin-top: 0.25rem;
661
- margin-bottom: 0;
662
- }
663
- :host(.-invalid) .hint {
664
- display: none;
665
- }
666
- :host(:not(.-invalid)) .error {
667
- display: none;
668
- }
669
- ::slotted(input),
670
- ::slotted(textarea),
671
- ::slotted(select) {
672
- outline: unset;
673
- border: unset;
674
- background-color: transparent;
675
- box-shadow: none;
676
- font-family: inherit;
677
- font-size: inherit;
678
- line-height: initial;
679
- letter-spacing: inherit;
680
- color: var(--_form-field-input-color, inherit);
681
- flex: 1 1 auto;
682
- min-width: 0;
683
- padding: unset;
684
- }
685
- ::slotted(textarea) {
686
- scrollbar-width: ${DesignToken.scrollbar.thinWidth};
687
- scrollbar-color: ${DesignToken.scrollbar.color};
688
- }
689
- ::slotted(m3e-select),
690
- ::slotted(m3e-input-chip-set) {
691
- flex: 1 1 auto;
692
- min-width: 0;
693
- }
694
- :host([variant="outlined"]) ::slotted(m3e-input-chip-set) {
695
- margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-2)}) / 4);
696
- }
697
- :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
698
- font-size: inherit;
699
- }
700
-
701
- :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text,
702
- :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text {
703
- opacity: 0;
704
- transition: opacity 0s;
705
- }
706
- .prefix {
707
- margin-inline-start: 1rem;
708
- }
709
- :host(.-with-prefix) .prefix {
710
- margin-inline-end: 1rem;
711
- margin-inline-start: 0.75rem;
712
- }
713
- .suffix {
714
- margin-inline-end: 1rem;
715
- }
716
- :host(.-with-suffix) .suffix {
717
- margin-inline-start: 0.25rem;
718
- margin-inline-end: unset;
719
- }
720
- :host(.-with-suffix.-with-select) .suffix {
721
- margin-inline-start: unset;
722
- }
723
- :host(.-with-select) .suffix-text {
724
- display: none;
725
- }
726
- :host([variant="outlined"]) .label {
727
- margin-top: calc(0px - var(--_form-field-label-line-height) / 2);
728
- }
729
- :host([variant="outlined"]) .outline {
730
- position: absolute;
731
- display: flex;
732
- pointer-events: none;
733
- left: 0;
734
- top: 0;
735
- bottom: 0;
736
- right: 0;
737
- }
738
- :host([variant="outlined"]) .pseudo-label {
739
- visibility: hidden;
740
- margin-inline-end: 0.25rem;
741
- font-size: var(--_form-field-label-font-size);
742
- line-height: var(--_form-field-label-line-height);
743
- letter-spacing: var(--_form-field-label-tracking);
744
- max-width: 100%;
745
- transition-property: max-width, margin-inline-end;
746
- transition-duration: 1ms;
747
- }
748
- :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label {
749
- max-width: 0;
750
- margin-inline-end: 0px;
751
- transition-delay: ${DesignToken.motion.duration.short2};
752
- }
753
- :host([variant="outlined"]) .outline-start,
754
- :host([variant="outlined"]) .outline-notch,
755
- :host([variant="outlined"]) .outline-end {
756
- box-sizing: border-box;
757
- border-width: var(--_form-field-outline-size, 0.0625rem);
758
- border-color: var(--_form-field-outline-color);
759
- transition: border-color ${DesignToken.motion.duration.short4};
760
- }
761
- :host([variant="outlined"]:not(.-with-label)) .outline-notch {
762
- display: none;
763
- }
764
- :host([variant="outlined"]) .outline-start {
765
- min-width: 0.75rem;
766
- border-top-style: solid;
767
- border-left-style: solid;
768
- border-bottom-style: solid;
769
- border-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}) 0 0
770
- var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});
771
- }
772
- :host([variant="outlined"]) .outline-notch {
773
- border-bottom-style: solid;
774
- }
775
- :host([variant="outlined"]) .outline-end {
776
- flex-grow: 1;
777
- min-width: 1rem;
778
- border-top-style: solid;
779
- border-right-style: solid;
780
- border-bottom-style: solid;
781
- border-radius: 0 var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall})
782
- var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}) 0;
783
- }
784
- :host([variant="outlined"].-with-prefix) .outline-start {
785
- min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem);
786
- }
787
- :host([variant="outlined"]:not(.-disabled)) .base:hover .outline,
788
- :host([variant="outlined"]:not(.-disabled):focus-within) .outline,
789
- :host([variant="outlined"]:not(.-disabled).-pressed) .outline {
790
- --_form-field-outline-size: 0.125rem;
791
- }
792
- :host([variant="outlined"]) .subscript {
793
- margin-inline: 1rem;
794
- width: calc(100% - 2rem);
795
- }
796
- :host([variant="outlined"]) .content {
797
- min-height: calc(3.5rem + ${DesignToken.density.calc(-2)});
798
- --_form-field-label-font-size: var(
799
- --m3e-form-field-label-font-size,
800
- ${DesignToken.typescale.standard.body.small.fontSize}
801
- );
802
- }
803
- :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
804
- margin-top: unset;
805
- line-height: calc(3.5rem + ${DesignToken.density.calc(-2)});
806
- --_form-field-label-font-size: var(
807
- --m3e-form-field-label-font-size,
808
- ${DesignToken.typescale.standard.body.small.fontSize}
809
- );
810
- }
811
- :host([variant="filled"]) .base {
812
- --_select-arrow-margin-top: calc(
813
- 0px - calc(1rem / max(calc(0 - calc(var(--m3e-density-scale, 0) + var(--m3e-density-scale, 0))), 1))
814
- );
815
- }
816
- :host([variant="filled"]) .base::before {
817
- content: "";
818
- box-sizing: border-box;
819
- position: absolute;
820
- pointer-events: none;
821
- top: 0;
822
- left: 0;
823
- right: 0;
824
- bottom: 0;
825
- border-bottom-style: solid;
826
- border-width: 0.0625rem;
827
- border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop});
828
- border-color: var(--_form-field-outline-color);
829
- background-color: var(--_form-field-container-color);
830
- }
831
- :host([variant="filled"]:not(.-disabled)) .base:hover::before,
832
- :host([variant="filled"]:not(.-disabled):focus-within) .base::before,
833
- :host([variant="filled"]:not(.-disabled).-pressed) .base::before {
834
- border-width: 0.1875rem;
835
- }
836
- :host([variant="filled"]) .base::after {
837
- content: "";
838
- box-sizing: border-box;
839
- position: absolute;
840
- pointer-events: none;
841
- top: 0;
842
- left: 0;
843
- right: 0;
844
- bottom: 0;
845
- background-color: var(--_form-field-hover-container-color);
846
- transition: background-color ${DesignToken.motion.duration.short4};
847
- }
848
- :host([variant="filled"]) .subscript {
849
- margin-inline: 1rem;
850
- width: calc(100% - 2rem);
851
- }
852
- :host([variant="filled"]) .content {
853
- padding-top: calc(1.5rem + ${DesignToken.density.calc(-2)});
854
- margin-bottom: 0.5rem;
855
- }
856
- :host([variant="filled"]) .label {
857
- top: calc(0.5rem + ${DesignToken.density.calc(-2)});
858
- }
859
- :host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label {
860
- top: 0px;
861
- line-height: calc(3.5rem + ${DesignToken.density.calc(-2)} - 0.0625rem);
862
- --_form-field-label-font-size: var(
863
- --m3e-form-field-label-font-size,
864
- ${DesignToken.typescale.standard.body.small.fontSize}
865
- );
866
- }
867
- :host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover {
868
- --_form-field-hover-container-color: color-mix(
869
- in srgb,
870
- var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface})
871
- var(--m3e-form-field-hover-container-opacity, 8%),
872
- transparent
873
- );
874
- }
875
- :host(:not(.-disabled):not(.-invalid)) {
876
- color: var(--m3e-form-field-color, ${DesignToken.color.onSurface});
877
- }
878
- :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base {
879
- --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline});
880
- }
881
- :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base {
882
- --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant});
883
- }
884
- :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base,
885
- :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base,
886
- :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base,
887
- :host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base {
888
- --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary});
889
- --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary});
890
- }
891
- :host(:not(.-disabled)) .base {
892
- --_form-field-container-color: var(
893
- --m3e-form-field-container-color,
894
- ${DesignToken.color.surfaceContainerHighest}
895
- );
896
- }
897
- :host(:not(.-disabled).-invalid) .base {
898
- --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});
899
- --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});
900
- }
901
- :host(:not(.-disabled).-invalid) .subscript {
902
- color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});
903
- }
904
- :host(.-disabled) {
905
- color: color-mix(
906
- in srgb,
907
- var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%),
908
- transparent
909
- );
910
- }
911
- :host(.-disabled) .base {
912
- --_form-field-container-color: color-mix(
913
- in srgb,
914
- var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface})
915
- var(--m3e-form-field-disabled-container-opacity, 4%),
916
- transparent
917
- );
918
- }
919
- :host(.-no-animate) *,
920
- :host(.-no-animate) *::before,
921
- :host(.-no-animate) *::after {
922
- transition: none !important;
923
- }
924
- @media (forced-colors: active) {
925
- :host([variant="filled"]) .base::after {
926
- transition: none;
927
- }
928
- :host {
929
- --_form-field-outline-color: CanvasText;
930
- }
931
- :host(.-disabled) {
932
- --_form-field-input-color: GrayText;
933
- --_form-field-color: GrayText;
934
- --_form-field-label-color: GrayText;
935
- --_form-field-outline-color: GrayText;
936
- }
937
- }
938
- @media (prefers-reduced-motion) {
939
- .base::before,
940
- .prefix-text,
941
- .suffix-text,
942
- .label,
943
- .subscript,
944
- .outline-start,
945
- .outline-notch,
946
- .outline-end,
947
- .pseudo-label {
948
- transition: none !important;
949
- }
950
- }
951
- `;
952
- __decorate([
953
- e(".base")
954
- ], M3eFormFieldElement.prototype, "_base", void 0);
955
- __decorate([
956
- e(".prefix")
957
- ], M3eFormFieldElement.prototype, "_prefix", void 0);
958
- __decorate([
959
- e(".error")
960
- ], M3eFormFieldElement.prototype, "_error", void 0);
961
- __decorate([
962
- e(".hint")
963
- ], M3eFormFieldElement.prototype, "_hint", void 0);
964
- __decorate([
965
- r()
966
- ], M3eFormFieldElement.prototype, "_pseudoLabel", void 0);
967
- __decorate([
968
- r()
969
- ], M3eFormFieldElement.prototype, "_required", void 0);
970
- __decorate([
971
- r()
972
- ], M3eFormFieldElement.prototype, "_invalid", void 0);
973
- __decorate([
974
- r()
975
- ], M3eFormFieldElement.prototype, "_validationMessage", void 0);
976
- __decorate([
977
- n({ reflect: true })
978
- ], M3eFormFieldElement.prototype, "variant", void 0);
979
- __decorate([
980
- n({ attribute: "hide-required-marker", type: Boolean, reflect: true })
981
- ], M3eFormFieldElement.prototype, "hideRequiredMarker", void 0);
982
- __decorate([
983
- n({ attribute: "hide-subscript", reflect: true })
984
- ], M3eFormFieldElement.prototype, "hideSubscript", void 0);
985
- __decorate([
986
- n({ attribute: "float-label", reflect: true })
987
- ], M3eFormFieldElement.prototype, "floatLabel", void 0);
988
- M3eFormFieldElement = __decorate([
989
- t$1("m3e-form-field")
990
- ], M3eFormFieldElement);
865
+ M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(.-disabled)) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${DesignToken.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${unsafeCSS(`top ${DesignToken.motion.duration.short4},
866
+ font-size ${DesignToken.motion.duration.short4},
867
+ line-height ${DesignToken.motion.duration.short4}`)}; } :host(.-with-select) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(.-invalid)) .subscript { opacity: 0; margin-top: 0px; margin-bottom: 0.25rem; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short4},
868
+ margin-top ${DesignToken.motion.duration.short4},
869
+ margin-bottom ${DesignToken.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-invalid)) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([variant="outlined"]) ::slotted(m3e-input-chip-set) { margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-2)}) / 4); } :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label { font-size: inherit; } :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text, :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(.-with-prefix) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(.-with-suffix) .suffix { margin-inline-start: 0.25rem; margin-inline-end: unset; } :host(.-with-suffix.-with-select) .suffix { margin-inline-start: unset; } :host(.-with-select) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.25rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 0.0625rem); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken.motion.duration.short4}; } :host([variant="outlined"]:not(.-with-label)) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"].-with-prefix) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(.-disabled)) .base:hover .outline, :host([variant="outlined"]:not(.-disabled):focus-within) .outline, :host([variant="outlined"]:not(.-disabled).-pressed) .outline { --_form-field-outline-size: 0.125rem; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 0.0625rem; border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(.-disabled)) .base:hover::before, :host([variant="filled"]:not(.-disabled):focus-within) .base::before, :host([variant="filled"]:not(.-disabled).-pressed) .base::before { border-width: 0.1875rem; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken.density.calc(-2)}); } :host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(.-disabled):not(.-invalid)) { color: var(--m3e-form-field-color, ${DesignToken.color.onSurface}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline}); } :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary}); } :host(:not(.-disabled)) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken.color.surfaceContainerHighest} ); } :host(:not(.-disabled).-invalid) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:not(.-disabled).-invalid) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(.-disabled) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(.-disabled) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(.-no-animate) *, :host(.-no-animate) *::before, :host(.-no-animate) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(.-disabled) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
870
+ __decorate([e(".base")], M3eFormFieldElement.prototype, "_base", void 0);
871
+ __decorate([e(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
872
+ __decorate([e(".error")], M3eFormFieldElement.prototype, "_error", void 0);
873
+ __decorate([e(".hint")], M3eFormFieldElement.prototype, "_hint", void 0);
874
+ __decorate([r()], M3eFormFieldElement.prototype, "_pseudoLabel", void 0);
875
+ __decorate([r()], M3eFormFieldElement.prototype, "_required", void 0);
876
+ __decorate([r()], M3eFormFieldElement.prototype, "_invalid", void 0);
877
+ __decorate([r()], M3eFormFieldElement.prototype, "_validationMessage", void 0);
878
+ __decorate([n({
879
+ reflect: true
880
+ })], M3eFormFieldElement.prototype, "variant", void 0);
881
+ __decorate([n({
882
+ attribute: "hide-required-marker",
883
+ type: Boolean,
884
+ reflect: true
885
+ })], M3eFormFieldElement.prototype, "hideRequiredMarker", void 0);
886
+ __decorate([n({
887
+ attribute: "hide-subscript",
888
+ reflect: true
889
+ })], M3eFormFieldElement.prototype, "hideSubscript", void 0);
890
+ __decorate([n({
891
+ attribute: "float-label",
892
+ reflect: true
893
+ })], M3eFormFieldElement.prototype, "floatLabel", void 0);
894
+ M3eFormFieldElement = __decorate([t$1("m3e-form-field")], M3eFormFieldElement);
991
895
 
992
896
  export { M3eFormFieldElement, findFormFieldControl, isFormFieldControl };
993
897
  //# sourceMappingURL=index.js.map