diff --git "a/static/bundle.js" "b/static/bundle.js" new file mode 100644--- /dev/null +++ "b/static/bundle.js" @@ -0,0 +1,4683 @@ +/****************************************************************************** +Copyright (c) Microsoft Corporation. + +Permission to use, copy, modify, and/or distribute this software for any +purpose with or without fee is hereby granted. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH +REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY +AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, +INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM +LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR +OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR +PERFORMANCE OF THIS SOFTWARE. +***************************************************************************** */ +/* global Reflect, Promise, SuppressedError, Symbol */ + + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + 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; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { + var e = new Error(message); + return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; +}; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const e$8=e=>n=>"function"==typeof n?((e,n)=>(customElements.define(e,n),n))(e,n):((e,n)=>{const{kind:t,elements:s}=n;return {kind:t,elements:s,finisher(n){customElements.define(e,n);}}})(e,n); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const i$6=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i);}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this));},finisher(n){n.createProperty(e.key,i);}},e$7=(i,e,n)=>{e.constructor.createProperty(n,i);};function n$7(n){return (t,o)=>void 0!==o?e$7(n,t,o):i$6(n,t)} + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function t$3(t){return n$7({...t,state:!0})} + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const o$6=({finisher:e,descriptor:t})=>(o,n)=>{var r;if(void 0===n){const n=null!==(r=o.originalKey)&&void 0!==r?r:o.key,i=null!=t?{kind:"method",placement:"prototype",key:n,descriptor:t(o.key)}:{...o,key:n};return null!=e&&(i.finisher=function(t){e(t,n);}),i}{const r=o.constructor;void 0!==t&&Object.defineProperty(o,n,t(n)),null==e||e(r,n);}}; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function i$5(i,n){return o$6({descriptor:o=>{const t={get(){var o,n;return null!==(n=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==n?n:null},enumerable:!0,configurable:!0};if(n){const n="symbol"==typeof o?Symbol():"__"+o;t.get=function(){var o,t;return void 0===this[n]&&(this[n]=null!==(t=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(i))&&void 0!==t?t:null),this[n]};}return t}})} + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */var n$6;const e$6=null!=(null===(n$6=window.HTMLSlotElement)||void 0===n$6?void 0:n$6.prototype.assignedElements)?(o,n)=>o.assignedElements(n):(o,n)=>o.assignedNodes(n).filter((o=>o.nodeType===Node.ELEMENT_NODE));function l$5(n){const{slot:l,selector:t}=null!=n?n:{};return o$6({descriptor:o=>({get(){var o;const r="slot"+(l?`[name=${l}]`:":not([name])"),i=null===(o=this.renderRoot)||void 0===o?void 0:o.querySelector(r),s=null!=i?e$6(i,n):[];return t?s.filter((o=>o.matches(t))):s},enumerable:!0,configurable:!0})})} + +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$2=window,e$5=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$5=Symbol(),n$5=new WeakMap;let o$5 = class o{constructor(t,e,n){if(this._$cssResult$=!0,n!==s$5)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$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=n$5.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&n$5.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new o$5("string"==typeof t?t:t+"",void 0,s$5),i$4=(t,...e)=>{const n=1===t.length?t[0]:e.reduce(((e,s,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[n+1]),t[0]);return new o$5(n,t,s$5)},S$1=(s,n)=>{e$5?s.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((e=>{const n=document.createElement("style"),o=t$2.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=e.cssText,s.appendChild(n);}));},c$1=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */var s$4;const e$4=window,r$1=e$4.trustedTypes,h$1=r$1?r$1.emptyScript:"",o$4=e$4.reactiveElementPolyfillSupport,n$4={toAttribute(t,i){switch(i){case Boolean:t=t?h$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},a$3=(t,i)=>i!==t&&(i==i||t==t),l$4={attribute:!0,type:String,converter:n$4,reflect:!1,hasChanged:a$3},d$1="finalized";let u$1 = class u extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu();}static addInitializer(t){var i;this.finalize(),(null!==(i=this.h)&&void 0!==i?i:this.h=[]).push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e));})),t}static createProperty(t,i=l$4){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$4}static finalize(){if(this.hasOwnProperty(d$1))return !1;this[d$1]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(c$1(i));}else void 0!==i&&s.push(c$1(i));return s}static _$Ep(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}_$Eu(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1);}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return S$1(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$EO(t,i,s=l$4){var e;const r=this.constructor._$Ep(t,s);if(void 0!==r&&!0===s.reflect){const h=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:n$4).toAttribute(i,s.type);this._$El=t,null==h?this.removeAttribute(r):this.setAttribute(r,h),this._$El=null;}}_$AK(t,i){var s;const e=this.constructor,r=e._$Ev.get(t);if(void 0!==r&&this._$El!==r){const t=e.getPropertyOptions(r),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:n$4;this._$El=r,this[r]=h.fromAttribute(i,t.type),this._$El=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||a$3)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej());}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek();}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek();}updated(t){}firstUpdated(t){}};u$1[d$1]=!0,u$1.elementProperties=new Map,u$1.elementStyles=[],u$1.shadowRootOptions={mode:"open"},null==o$4||o$4({ReactiveElement:u$1}),(null!==(s$4=e$4.reactiveElementVersions)&&void 0!==s$4?s$4:e$4.reactiveElementVersions=[]).push("1.6.3"); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +var t$1;const i$3=window,s$3=i$3.trustedTypes,e$3=s$3?s$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,o$3="$lit$",n$3=`lit$${(Math.random()+"").slice(9)}$`,l$3="?"+n$3,h=`<${l$3}>`,r=document,u=()=>r.createComment(""),d=t=>null===t||"object"!=typeof t&&"function"!=typeof t,c=Array.isArray,v=t=>c(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),a$2="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${a$2}(?:([^\\s"'>=/]+)(${a$2}*=${a$2}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,w=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=w(1),T=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),E=new WeakMap,C=r.createTreeWalker(r,129,null,!1);function P(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$3?e$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,e=[];let l,r=2===i?"":"",u=f;for(let i=0;i"===c[0]?(u=null!=l?l:f,v=-1):void 0===c[1]?v=-2:(v=u.lastIndex-c[2].length,d=c[1],u=void 0===c[3]?p:'"'===c[3]?$:g):u===$||u===g?u=p:u===_||u===m?u=f:(u=p,l=void 0);const w=u===p&&t[i+1].startsWith("/>")?" ":"";r+=u===f?s+h:v>=0?(e.push(d),s.slice(0,v)+o$3+s.slice(v)+n$3+w):s+n$3+(-2===v?(e.push(void 0),i):w);}return [P(t,r+(t[s]||"")+(2===i?"":"")),e]};class N{constructor({strings:t,_$litType$:i},e){let h;this.parts=[];let r=0,d=0;const c=t.length-1,v=this.parts,[a,f]=V(t,i);if(this.el=N.createElement(a,e),C.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(h=C.nextNode())&&v.length0){h.textContent=s$3?s$3.emptyScript:"";for(let s=0;s2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=S(this,t,i,0),n=!d(t)||t!==this._$AH&&t!==T,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new R(i.insertBefore(u(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l}; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */var l$2,o$2;let s$2 = class s extends u$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return T}};s$2.finalized=!0,s$2._$litElement$=!0,null===(l$2=globalThis.litElementHydrateSupport)||void 0===l$2||l$2.call(globalThis,{LitElement:s$2});const n$2=globalThis.litElementPolyfillSupport;null==n$2||n$2({LitElement:s$2});(null!==(o$2=globalThis.litElementVersions)&&void 0!==o$2?o$2:globalThis.litElementVersions=[]).push("3.3.3"); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A component for elevation. + */ +class Elevation extends s$2 { + connectedCallback() { + super.connectedCallback(); + // Needed for VoiceOver, which will create a "group" if the element is a + // sibling to other content. + this.setAttribute('aria-hidden', 'true'); + } + render() { + return x ``; + } +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$o = i$4 `:host{--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));display:flex;pointer-events:none}:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}.shadow::before,.shadow::after{content:"";transition-property:box-shadow,opacity}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);opacity:.15}/*# sourceMappingURL=elevation-styles.css.map */ +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * The `` custom element with default styles. + * + * Elevation is the relative distance between two surfaces along the z-axis. + */ +let MdElevation = class MdElevation extends Elevation { +}; +MdElevation.styles = [styles$o]; +MdElevation = __decorate([ + e$8('md-elevation') +], MdElevation); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A key to retrieve an `Attachable` element's `AttachableController` from a + * global `MutationObserver`. + */ +const ATTACHABLE_CONTROLLER = Symbol('attachableController'); +let FOR_ATTRIBUTE_OBSERVER; +{ + /** + * A global `MutationObserver` that reacts to `for` attribute changes on + * `Attachable` elements. If the `for` attribute changes, the controller will + * re-attach to the new referenced element. + */ + FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => { + for (const record of records) { + // When a control's `for` attribute changes, inform its + // `AttachableController` to update to a new control. + record.target[ATTACHABLE_CONTROLLER] + ?.hostConnected(); + } + }); +} +/** + * A controller that provides an implementation for `Attachable` elements. + * + * @example + * ```ts + * class MyElement extends LitElement implements Attachable { + * get control() { return this.attachableController.control; } + * + * private readonly attachableController = new AttachableController( + * this, + * (previousControl, newControl) => { + * previousControl?.removeEventListener('click', this.handleClick); + * newControl?.addEventListener('click', this.handleClick); + * } + * ); + * + * // Implement remaining `Attachable` properties/methods that call the + * // controller's properties/methods. + * } + * ``` + */ +class AttachableController { + get htmlFor() { + return this.host.getAttribute('for'); + } + set htmlFor(htmlFor) { + if (htmlFor === null) { + this.host.removeAttribute('for'); + } + else { + this.host.setAttribute('for', htmlFor); + } + } + get control() { + if (this.host.hasAttribute('for')) { + if (!this.htmlFor || !this.host.isConnected) { + return null; + } + return this.host.getRootNode() + .querySelector(`#${this.htmlFor}`); + } + return this.currentControl || this.host.parentElement; + } + set control(control) { + if (control) { + this.attach(control); + } + else { + this.detach(); + } + } + /** + * Creates a new controller for an `Attachable` element. + * + * @param host The `Attachable` element. + * @param onControlChange A callback with two parameters for the previous and + * next control. An `Attachable` element may perform setup or teardown + * logic whenever the control changes. + */ + constructor(host, onControlChange) { + this.host = host; + this.onControlChange = onControlChange; + this.currentControl = null; + host.addController(this); + host[ATTACHABLE_CONTROLLER] = this; + FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ['for'] }); + } + attach(control) { + if (control === this.currentControl) { + return; + } + this.setCurrentControl(control); + // When imperatively attaching, remove the `for` attribute so + // that the attached control is used instead of a referenced one. + this.host.removeAttribute('for'); + } + detach() { + this.setCurrentControl(null); + // When imperatively detaching, add an empty `for=""` attribute. This will + // ensure the control is `null` rather than the `parentElement`. + this.host.setAttribute('for', ''); + } + /** @private */ + hostConnected() { + this.setCurrentControl(this.control); + } + /** @private */ + hostDisconnected() { + this.setCurrentControl(null); + } + setCurrentControl(control) { + this.onControlChange(this.currentControl, control); + this.currentControl = control; + } +} + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Events that the focus ring listens to. + * + * @fires visibility-changed Fired whenever `visible` changes. + */ +const EVENTS$1 = ['focusin', 'focusout', 'pointerdown']; +/** + * A focus ring component. + */ +class FocusRing extends s$2 { + constructor() { + super(...arguments); + /** + * Makes the focus ring visible. + */ + this.visible = false; + /** + * Makes the focus ring animate inwards instead of outwards. + */ + this.inward = false; + this.attachableController = new AttachableController(this, this.onControlChange.bind(this)); + } + get htmlFor() { + return this.attachableController.htmlFor; + } + set htmlFor(htmlFor) { + this.attachableController.htmlFor = htmlFor; + } + get control() { + return this.attachableController.control; + } + set control(control) { + this.attachableController.control = control; + } + attach(control) { + this.attachableController.attach(control); + } + detach() { + this.attachableController.detach(); + } + connectedCallback() { + super.connectedCallback(); + // Needed for VoiceOver, which will create a "group" if the element is a + // sibling to other content. + this.setAttribute('aria-hidden', 'true'); + } + /** @private */ + handleEvent(event) { + if (event[HANDLED_BY_FOCUS_RING]) { + // This ensures the focus ring does not activate when multiple focus rings + // are used within a single component. + return; + } + switch (event.type) { + default: + return; + case 'focusin': + this.visible = this.control?.matches(':focus-visible') ?? false; + break; + case 'focusout': + case 'pointerdown': + this.visible = false; + break; + } + event[HANDLED_BY_FOCUS_RING] = true; + } + onControlChange(prev, next) { + for (const event of EVENTS$1) { + prev?.removeEventListener(event, this); + next?.addEventListener(event, this); + } + } + update(changed) { + if (changed.has('visible')) { + // This logic can be removed once the `:has` selector has been introduced + // to Firefox. This is necessary to allow correct submenu styles. + this.dispatchEvent(new Event('visibility-changed')); + } + super.update(changed); + } +} +__decorate([ + n$7({ type: Boolean, reflect: true }) +], FocusRing.prototype, "visible", void 0); +__decorate([ + n$7({ type: Boolean, reflect: true }) +], FocusRing.prototype, "inward", void 0); +const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing'); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$n = i$4 `:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}/*# sourceMappingURL=focus-ring-styles.css.map */ +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/267336424): add docs + * + * @final + * @suppress {visibility} + */ +let MdFocusRing = class MdFocusRing extends FocusRing { +}; +MdFocusRing.styles = [styles$n]; +MdFocusRing = __decorate([ + e$8('md-focus-ring') +], MdFocusRing); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$2=t=>(...e)=>({_$litDirective$:t,values:e});let i$2 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const o$1=e$2(class extends i$2{constructor(t$1){var i;if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||(null===(i=t$1.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(i,[s]){var r,o;if(void 0===this.it){this.it=new Set,void 0!==i.strings&&(this.nt=new Set(i.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in s)s[t]&&!(null===(r=this.nt)||void 0===r?void 0:r.has(t))&&this.it.add(t);return this.render(s)}const e=i.element.classList;this.it.forEach((t=>{t in s||(e.remove(t),this.it.delete(t));}));for(const t in s){const i=!!s[t];i===this.it.has(t)||(null===(o=this.nt)||void 0===o?void 0:o.has(t))||(i?(e.add(t),this.it.add(t)):(e.remove(t),this.it.delete(t)));}return T}}); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Easing functions to use for web animations. + * + * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy. + * + * TODO(b/241113345): replace with tokens + */ +const EASING = { + STANDARD: 'cubic-bezier(0.2, 0, 0, 1)', + STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)', + STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)', + EMPHASIZED: 'cubic-bezier(.3,0,0,1)', + EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)', + EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)', +}; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const PRESS_GROW_MS = 450; +const MINIMUM_PRESS_MS = 225; +const INITIAL_ORIGIN_SCALE = 0.2; +const PADDING = 10; +const SOFT_EDGE_MINIMUM_SIZE = 75; +const SOFT_EDGE_CONTAINER_RATIO = 0.35; +const PRESS_PSEUDO = '::after'; +const ANIMATION_FILL = 'forwards'; +/** + * Interaction states for the ripple. + * + * On Touch: + * - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE` + * - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE` + * + * On Mouse or Pen: + * - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE` + */ +var State; +(function (State) { + /** + * Initial state of the control, no touch in progress. + * + * Transitions: + * - on touch down: transition to `TOUCH_DELAY`. + * - on mouse down: transition to `WAITING_FOR_CLICK`. + */ + State[State["INACTIVE"] = 0] = "INACTIVE"; + /** + * Touch down has been received, waiting to determine if it's a swipe or + * scroll. + * + * Transitions: + * - on touch up: begin press; transition to `WAITING_FOR_CLICK`. + * - on cancel: transition to `INACTIVE`. + * - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`. + */ + State[State["TOUCH_DELAY"] = 1] = "TOUCH_DELAY"; + /** + * A touch has been deemed to be a press + * + * Transitions: + * - on up: transition to `WAITING_FOR_CLICK`. + */ + State[State["HOLDING"] = 2] = "HOLDING"; + /** + * The user touch has finished, transition into rest state. + * + * Transitions: + * - on click end press; transition to `INACTIVE`. + */ + State[State["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK"; +})(State || (State = {})); +/** + * Events that the ripple listens to. + */ +const EVENTS = [ + 'click', 'contextmenu', 'pointercancel', 'pointerdown', 'pointerenter', + 'pointerleave', 'pointerup' +]; +/** + * Delay reacting to touch so that we do not show the ripple for a swipe or + * scroll interaction. + */ +const TOUCH_DELAY_MS = 150; +/** + * A ripple component. + */ +class Ripple extends s$2 { + constructor() { + super(...arguments); + /** + * Disables the ripple. + */ + this.disabled = false; + this.hovered = false; + this.pressed = false; + this.rippleSize = ''; + this.rippleScale = ''; + this.initialSize = 0; + this.state = State.INACTIVE; + this.checkBoundsAfterContextMenu = false; + this.attachableController = new AttachableController(this, this.onControlChange.bind(this)); + } + get htmlFor() { + return this.attachableController.htmlFor; + } + set htmlFor(htmlFor) { + this.attachableController.htmlFor = htmlFor; + } + get control() { + return this.attachableController.control; + } + set control(control) { + this.attachableController.control = control; + } + attach(control) { + this.attachableController.attach(control); + } + detach() { + this.attachableController.detach(); + } + connectedCallback() { + super.connectedCallback(); + // Needed for VoiceOver, which will create a "group" if the element is a + // sibling to other content. + this.setAttribute('aria-hidden', 'true'); + } + render() { + const classes = { + 'hovered': this.hovered, + 'pressed': this.pressed, + }; + return x `
`; + } + update(changedProps) { + if (changedProps.has('disabled') && this.disabled) { + this.hovered = false; + this.pressed = false; + } + super.update(changedProps); + } + /** + * TODO(b/269799771): make private + * @private only public for slider + */ + handlePointerenter(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + this.hovered = true; + } + /** + * TODO(b/269799771): make private + * @private only public for slider + */ + handlePointerleave(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + this.hovered = false; + // release a held mouse or pen press that moves outside the element + if (this.state !== State.INACTIVE) { + this.endPressAnimation(); + } + } + handlePointerup(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + if (this.state === State.HOLDING) { + this.state = State.WAITING_FOR_CLICK; + return; + } + if (this.state === State.TOUCH_DELAY) { + this.state = State.WAITING_FOR_CLICK; + this.startPressAnimation(this.rippleStartEvent); + return; + } + } + async handlePointerdown(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + this.rippleStartEvent = event; + if (!this.isTouch(event)) { + this.state = State.WAITING_FOR_CLICK; + this.startPressAnimation(event); + return; + } + // after a longpress contextmenu event, an extra `pointerdown` can be + // dispatched to the pressed element. Check that the down is within + // bounds of the element in this case. + if (this.checkBoundsAfterContextMenu && !this.inBounds(event)) { + return; + } + this.checkBoundsAfterContextMenu = false; + // Wait for a hold after touch delay + this.state = State.TOUCH_DELAY; + await new Promise(resolve => { + setTimeout(resolve, TOUCH_DELAY_MS); + }); + if (this.state !== State.TOUCH_DELAY) { + return; + } + this.state = State.HOLDING; + this.startPressAnimation(event); + } + handleClick() { + // Click is a MouseEvent in Firefox and Safari, so we cannot use + // `shouldReactToEvent` + if (this.disabled) { + return; + } + if (this.state === State.WAITING_FOR_CLICK) { + this.endPressAnimation(); + return; + } + if (this.state === State.INACTIVE) { + // keyboard synthesized click event + this.startPressAnimation(); + this.endPressAnimation(); + } + } + handlePointercancel(event) { + if (!this.shouldReactToEvent(event)) { + return; + } + this.endPressAnimation(); + } + handleContextmenu() { + if (this.disabled) { + return; + } + this.checkBoundsAfterContextMenu = true; + this.endPressAnimation(); + } + determineRippleSize() { + const { height, width } = this.getBoundingClientRect(); + const maxDim = Math.max(height, width); + const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE); + const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE); + const hypotenuse = Math.sqrt(width ** 2 + height ** 2); + const maxRadius = hypotenuse + PADDING; + this.initialSize = initialSize; + this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`; + this.rippleSize = `${initialSize}px`; + } + getNormalizedPointerEventCoords(pointerEvent) { + const { scrollX, scrollY } = window; + const { left, top } = this.getBoundingClientRect(); + const documentX = scrollX + left; + const documentY = scrollY + top; + const { pageX, pageY } = pointerEvent; + return { x: pageX - documentX, y: pageY - documentY }; + } + getTranslationCoordinates(positionEvent) { + const { height, width } = this.getBoundingClientRect(); + // end in the center + const endPoint = { + x: (width - this.initialSize) / 2, + y: (height - this.initialSize) / 2, + }; + let startPoint; + if (positionEvent instanceof PointerEvent) { + startPoint = this.getNormalizedPointerEventCoords(positionEvent); + } + else { + startPoint = { + x: width / 2, + y: height / 2, + }; + } + // center around start point + startPoint = { + x: startPoint.x - (this.initialSize / 2), + y: startPoint.y - (this.initialSize / 2), + }; + return { startPoint, endPoint }; + } + startPressAnimation(positionEvent) { + if (!this.mdRoot) { + return; + } + this.pressed = true; + this.growAnimation?.cancel(); + this.determineRippleSize(); + const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent); + const translateStart = `${startPoint.x}px, ${startPoint.y}px`; + const translateEnd = `${endPoint.x}px, ${endPoint.y}px`; + this.growAnimation = this.mdRoot.animate({ + top: [0, 0], + left: [0, 0], + height: [this.rippleSize, this.rippleSize], + width: [this.rippleSize, this.rippleSize], + transform: [ + `translate(${translateStart}) scale(1)`, + `translate(${translateEnd}) scale(${this.rippleScale})` + ], + }, { + pseudoElement: PRESS_PSEUDO, + duration: PRESS_GROW_MS, + easing: EASING.STANDARD, + fill: ANIMATION_FILL + }); + } + async endPressAnimation() { + this.state = State.INACTIVE; + const animation = this.growAnimation; + const pressAnimationPlayState = animation?.currentTime ?? Infinity; + // TODO: go/ts51upgrade - Auto-added to unblock TS5.1 migration. + // TS2365: Operator '>=' cannot be applied to types 'CSSNumberish' and + // 'number'. + // @ts-ignore + if (pressAnimationPlayState >= MINIMUM_PRESS_MS) { + this.pressed = false; + return; + } + await new Promise(resolve => { + // TODO: go/ts51upgrade - Auto-added to unblock TS5.1 migration. + // TS2363: The right-hand side of an arithmetic operation must be of + // type 'any', 'number', 'bigint' or an enum type. + // @ts-ignore + setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState); + }); + if (this.growAnimation !== animation) { + // A new press animation was started. The old animation was canceled and + // should not finish the pressed state. + return; + } + this.pressed = false; + } + /** + * Returns `true` if + * - the ripple element is enabled + * - the pointer is primary for the input type + * - the pointer is the pointer that started the interaction, or will start + * the interaction + * - the pointer is a touch, or the pointer state has the primary button + * held, or the pointer is hovering + */ + shouldReactToEvent(event) { + if (this.disabled || !event.isPrimary) { + return false; + } + if (this.rippleStartEvent && + this.rippleStartEvent.pointerId !== event.pointerId) { + return false; + } + if (event.type === 'pointerenter' || event.type === 'pointerleave') { + return !this.isTouch(event); + } + const isPrimaryButton = event.buttons === 1; + return this.isTouch(event) || isPrimaryButton; + } + /** + * Check if the event is within the bounds of the element. + * + * This is only needed for the "stuck" contextmenu longpress on Chrome. + */ + inBounds({ x, y }) { + const { top, left, bottom, right } = this.getBoundingClientRect(); + return x >= left && x <= right && y >= top && y <= bottom; + } + isTouch({ pointerType }) { + return pointerType === 'touch'; + } + /** @private */ + async handleEvent(event) { + switch (event.type) { + case 'click': + this.handleClick(); + break; + case 'contextmenu': + this.handleContextmenu(); + break; + case 'pointercancel': + this.handlePointercancel(event); + break; + case 'pointerdown': + await this.handlePointerdown(event); + break; + case 'pointerenter': + this.handlePointerenter(event); + break; + case 'pointerleave': + this.handlePointerleave(event); + break; + case 'pointerup': + this.handlePointerup(event); + break; + } + } + onControlChange(prev, next) { + for (const event of EVENTS) { + prev?.removeEventListener(event, this); + next?.addEventListener(event, this); + } + } +} +__decorate([ + n$7({ type: Boolean, reflect: true }) +], Ripple.prototype, "disabled", void 0); +__decorate([ + t$3() +], Ripple.prototype, "hovered", void 0); +__decorate([ + t$3() +], Ripple.prototype, "pressed", void 0); +__decorate([ + i$5('.surface') +], Ripple.prototype, "mdRoot", void 0); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$m = i$4 `:host{--_hover-color: var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-opacity: var(--md-ripple-hover-opacity, 0.08);--_pressed-color: var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-opacity: var(--md-ripple-pressed-opacity, 0.12);display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--_hover-color);inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--_pressed-color) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.pressed::after{opacity:var(--_pressed-opacity);transition-duration:105ms}/*# sourceMappingURL=ripple-styles.css.map */ +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Ripples, also known as state layers, are visual indicators used to + * communicate the status of a component or interactive element. + * + * @description A state layer is a semi-transparent covering on an element that + * indicates its state. State layers provide a systematic approach to + * visualizing states by using opacity. A layer can be applied to an entire + * element or in a circular shape and only one state layer can be applied at a + * given time. + * + * @final + * @suppress {visibility} + */ +let MdRipple = class MdRipple extends Ripple { +}; +MdRipple.styles = [styles$m]; +MdRipple = __decorate([ + e$8('md-ripple') +], MdRipple); + +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const e$1=Symbol.for(""),l$1=t=>{if((null==t?void 0:t.r)===e$1)return null==t?void 0:t._$litStatic$},i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,l)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[l+1]),t[0]),r:e$1}),s$1=new Map,a$1=t=>(r,...e)=>{const o=e.length;let i,a;const n=[],u=[];let c,$=0,f=!1;for(;$ { + host.addController({ + hostConnected() { + if (host.hasAttribute('tabindex')) { + return; + } + host.tabIndex = 0; + } + }); + }); + } + if ('role' in Element.prototype) { + return; + } + // Polyfill reflective aria properties for Firefox + for (const ariaProperty of ARIA_PROPERTIES) { + ctor.createProperty(ariaProperty, { + attribute: ariaPropertyToAttribute(ariaProperty), + reflect: true, + }); + } + ctor.createProperty('role', { reflect: true }); +} +/** + * Polyfills an element and its `ElementInternals` to support `ARIAMixin` + * properties on internals. This is needed for Firefox. + * + * `setupHostAria()` must be called for the element class. + * + * @example + * class XButton extends LitElement { + * static { + * setupHostAria(XButton); + * } + * + * private internals = + * polyfillElementInternalsAria(this, this.attachInternals()); + * + * constructor() { + * super(); + * this.internals.role = 'button'; + * } + * } + */ +function polyfillElementInternalsAria(host, internals) { + if (checkIfElementInternalsSupportsAria(internals)) { + return internals; + } + if (!('role' in host)) { + throw new Error('Missing setupHostAria()'); + } + let firstConnectedCallbacks = []; + let hasBeenConnected = false; + // Add support for Firefox, which has not yet implement ElementInternals aria + for (const ariaProperty of ARIA_PROPERTIES) { + let internalAriaValue = null; + Object.defineProperty(internals, ariaProperty, { + enumerable: true, + configurable: true, + get() { + return internalAriaValue; + }, + set(value) { + const setValue = () => { + internalAriaValue = value; + if (!hasBeenConnected) { + firstConnectedCallbacks.push({ property: ariaProperty, callback: setValue }); + return; + } + // Dynamic lookup rather than hardcoding all properties. + // tslint:disable-next-line:no-dict-access-on-struct-type + host[ariaProperty] = value; + }; + setValue(); + }, + }); + } + let internalRoleValue = null; + Object.defineProperty(internals, 'role', { + enumerable: true, + configurable: true, + get() { + return internalRoleValue; + }, + set(value) { + const setRole = () => { + internalRoleValue = value; + if (!hasBeenConnected) { + firstConnectedCallbacks.push({ + property: 'role', + callback: setRole, + }); + return; + } + if (value === null) { + host.removeAttribute('role'); + } + else { + host.setAttribute('role', value); + } + }; + setRole(); + }, + }); + host.addController({ + hostConnected() { + if (hasBeenConnected) { + return; + } + hasBeenConnected = true; + const propertiesSetByUser = new Set(); + // See which properties were set by the user on host before we apply + // internals values as attributes to host. Needs to be done in another + // for loop because the callbacks set these attributes on host. + for (const { property } of firstConnectedCallbacks) { + const wasSetByUser = host.getAttribute(ariaPropertyToAttribute(property)) !== null || + // Dynamic lookup rather than hardcoding all properties. + // tslint:disable-next-line:no-dict-access-on-struct-type + host[property] !== undefined; + if (wasSetByUser) { + propertiesSetByUser.add(property); + } + } + for (const { property, callback } of firstConnectedCallbacks) { + // If the user has set the attribute or property, do not override the + // user's value + if (propertiesSetByUser.has(property)) { + continue; + } + callback(); + } + // Remove strong callback references + firstConnectedCallbacks = []; + } + }); + return internals; +} +// Separate function so that typescript doesn't complain about internals being +// "never". +function checkIfElementInternalsSupportsAria(internals) { + return 'role' in internals; +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Sets up a `ReactiveElement` constructor to enable updates when delegating + * aria attributes. Elements may bind `this.aria*` properties to `aria-*` + * attributes in their render functions. + * + * This function will: + * - Call `requestUpdate()` when an aria attribute changes. + * - Add `role="presentation"` to the host. + * + * NOTE: The following features are not currently supported: + * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`) + * - Delegating the `role` attribute + * + * @example + * class XButton extends LitElement { + * static { + * requestUpdateOnAriaChange(XButton); + * } + * + * protected override render() { + * return html` + * + * `; + * } + * } + * + * @param ctor The `ReactiveElement` constructor to patch. + */ +function requestUpdateOnAriaChange(ctor) { + for (const ariaProperty of ARIA_PROPERTIES) { + ctor.createProperty(ariaProperty, { + attribute: ariaPropertyToAttribute(ariaProperty), + reflect: true, + }); + } + ctor.addInitializer(element => { + const controller = { + hostConnected() { + element.setAttribute('role', 'presentation'); + } + }; + element.addController(controller); + }); +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A unique symbol used for protected access to an instance's + * `ElementInternals`. + * + * @example + * ```ts + * class MyElement extends LitElement { + * static formAssociated = true; + * + * [internals] = this.attachInternals(); + * } + * + * function getForm(element: MyElement) { + * return element[internals].form; + * } + * ``` + */ +const internals = Symbol('internals'); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Re-dispatches an event from the provided element. + * + * This function is useful for forwarding non-composed events, such as `change` + * events. + * + * @example + * class MyInput extends LitElement { + * render() { + * return html``; + * } + * + * protected redispatchEvent(event: Event) { + * redispatchEvent(this, event); + * } + * } + * + * @param element The element to dispatch the event from. + * @param event The event to re-dispatch. + * @return Whether or not the event was dispatched (if cancelable). + */ +function redispatchEvent(element, event) { + // For bubbling events in SSR light DOM (or composed), stop their propagation + // and dispatch the copy. + if (event.bubbles && (!element.shadowRoot || event.composed)) { + event.stopPropagation(); + } + const copy = Reflect.construct(event.constructor, [event.type, event]); + const dispatched = element.dispatchEvent(copy); + if (!dispatched) { + event.preventDefault(); + } + return dispatched; +} +/** + * Dispatches a click event to the given element that triggers a native action, + * but is not composed and therefore is not seen outside the element. + * + * This is useful for responding to an external click event on the host element + * that should trigger an internal action like a button click. + * + * Note, a helper is provided because setting this up correctly is a bit tricky. + * In particular, calling `click` on an element creates a composed event, which + * is not desirable, and a manually dispatched event must specifically be a + * `MouseEvent` to trigger a native action. + * + * @example + * hostClickListener = (event: MouseEvent) { + * if (isActivationClick(event)) { + * this.dispatchActivationClick(this.buttonElement); + * } + * } + * + */ +function dispatchActivationClick(element) { + const event = new MouseEvent('click', { bubbles: true }); + element.dispatchEvent(event); + return event; +} +/** + * Returns true if the click event should trigger an activation behavior. The + * behavior is defined by the element and is whatever it should do when + * clicked. + * + * Typically when an element needs to handle a click, the click is generated + * from within the element and an event listener within the element implements + * the needed behavior; however, it's possible to fire a click directly + * at the element that the element should handle. This method helps + * distinguish these "external" clicks. + * + * An "external" click can be triggered in a number of ways: via a click + * on an associated label for a form associated element, calling + * `element.click()`, or calling + * `element.dispatchEvent(new MouseEvent('click', ...))`. + * + * Also works around Firefox issue + * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching + * events for a microtask after called. + * + * @example + * hostClickListener = (event: MouseEvent) { + * if (isActivationClick(event)) { + * this.dispatchActivationClick(this.buttonElement); + * } + * } + * + */ +function isActivationClick(event) { + // Event must start at the event target. + if (event.currentTarget !== event.target) { + return false; + } + // Event must not be retargeted from shadowRoot. + if (event.composedPath()[0] !== event.target) { + return false; + } + // Target must not be disabled; this should only occur for a synthetically + // dispatched click. + if (event.target.disabled) { + return false; + } + // This is an activation if the event should not be squelched. + return !squelchEvent(event); +} +// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576) +// Remove when Firefox bug is addressed. +function squelchEvent(event) { + const squelched = isSquelchingEvents; + if (squelched) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + squelchEventsForMicrotask(); + return squelched; +} +// Ignore events for one microtask only. +let isSquelchingEvents = false; +async function squelchEventsForMicrotask() { + isSquelchingEvents = true; + // Need to pause for just one microtask. + // tslint:disable-next-line + await null; + isSquelchingEvents = false; +} + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Sets up an element's constructor to enable form submission. The element + * instance should be form associated and have a `type` property. + * + * A click listener is added to each element instance. If the click is not + * default prevented, it will submit the element's form, if any. + * + * @example + * ```ts + * class MyElement extends LitElement { + * static { + * setupFormSubmitter(MyElement); + * } + * + * static formAssociated = true; + * + * type: FormSubmitterType = 'submit'; + * + * [internals] = this.attachInternals(); + * } + * ``` + * + * @param ctor The form submitter element's constructor. + */ +function setupFormSubmitter(ctor) { + ctor.addInitializer(instance => { + const submitter = instance; + submitter.addEventListener('click', async (event) => { + const { type, [internals]: elementInternals } = submitter; + const { form } = elementInternals; + if (!form || type === 'button') { + return; + } + // Wait a microtask for event bubbling to complete. + await new Promise(resolve => { + resolve(); + }); + if (event.defaultPrevented) { + return; + } + if (type === 'reset') { + form.reset(); + return; + } + // form.requestSubmit(submitter) does not work with form associated custom + // elements. This patches the dispatched submit event to add the correct + // `submitter`. + // See https://github.com/WICG/webcomponents/issues/814 + form.addEventListener('submit', submitEvent => { + Object.defineProperty(submitEvent, 'submitter', { + configurable: true, + enumerable: true, + get: () => submitter, + }); + }, { capture: true, once: true }); + elementInternals.setFormValue(submitter.value); + form.requestSubmit(); + }); + }); +} + +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +var _a$2; +/** + * A button component. + */ +class Button extends s$2 { + get name() { + return this.getAttribute('name') ?? ''; + } + set name(name) { + this.setAttribute('name', name); + } + /** + * The associated form element with which this element's value will submit. + */ + get form() { + return this[internals].form; + } + constructor() { + super(); + /** + * Whether or not the button is disabled. + */ + this.disabled = false; + /** + * The URL that the link button points to. + */ + this.href = ''; + /** + * Where to display the linked `href` URL for a link button. Common options + * include `_blank` to open in a new tab. + */ + this.target = ''; + /** + * Whether to render the icon at the inline end of the label rather than the + * inline start. + * + * _Note:_ Link buttons cannot have trailing icons. + */ + this.trailingIcon = false; + /** + * Whether to display the icon or not. + */ + this.hasIcon = false; + this.type = 'submit'; + this.value = ''; + /** @private */ + this[_a$2] = this /* needed for closure */.attachInternals(); + this.handleActivationClick = (event) => { + if (!isActivationClick((event)) || !this.buttonElement) { + return; + } + this.focus(); + dispatchActivationClick(this.buttonElement); + }; + { + this.addEventListener('click', this.handleActivationClick); + } + } + focus() { + this.buttonElement?.focus(); + } + blur() { + this.buttonElement?.blur(); + } + render() { + // Link buttons may not be disabled + const isDisabled = this.disabled && !this.href; + const button = this.href ? i$1 `a` : i$1 `button`; + // Needed for closure conformance + const { ariaLabel, ariaHasPopup, ariaExpanded } = this; + return n$1 ` + <${button} + class="button ${o$1(this.getRenderClasses())}" + ?disabled=${isDisabled} + aria-label="${ariaLabel || A}" + aria-haspopup="${ariaHasPopup || A}" + aria-expanded="${ariaExpanded || A}" + href=${this.href || A} + target=${this.target || A} + >${this.renderContent()}`; + } + getRenderClasses() { + return { + 'button--icon-leading': !this.trailingIcon && this.hasIcon, + 'button--icon-trailing': this.trailingIcon && this.hasIcon, + }; + } + renderContent() { + // Link buttons may not be disabled + const isDisabled = this.disabled && !this.href; + const icon = x ``; + return x ` + ${this.renderElevation?.()} + ${this.renderOutline?.()} + + + + ${this.trailingIcon ? A : icon} + + ${this.trailingIcon ? icon : A} + `; + } + handleSlotChange() { + this.hasIcon = this.assignedIcons.length > 0; + } +} +_a$2 = internals; +(() => { + requestUpdateOnAriaChange(Button); + setupFormSubmitter(Button); +})(); +/** @nocollapse */ +Button.formAssociated = true; +/** @nocollapse */ +Button.shadowRootOptions = { mode: 'open', delegatesFocus: true }; +__decorate([ + n$7({ type: Boolean, reflect: true }) +], Button.prototype, "disabled", void 0); +__decorate([ + n$7() +], Button.prototype, "href", void 0); +__decorate([ + n$7() +], Button.prototype, "target", void 0); +__decorate([ + n$7({ type: Boolean, attribute: 'trailing-icon' }) +], Button.prototype, "trailingIcon", void 0); +__decorate([ + n$7({ type: Boolean, attribute: 'has-icon' }) +], Button.prototype, "hasIcon", void 0); +__decorate([ + n$7() +], Button.prototype, "type", void 0); +__decorate([ + n$7() +], Button.prototype, "value", void 0); +__decorate([ + i$5('.button') +], Button.prototype, "buttonElement", void 0); +__decorate([ + l$5({ slot: 'icon', flatten: true }) +], Button.prototype, "assignedIcons", void 0); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A filled button component. + */ +class FilledButton extends Button { + renderElevation() { + return x ``; + } +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$l = i$4 `:host{--_container-color: var(--md-filled-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-elevation: var(--md-filled-button-container-elevation, 0);--_container-height: var(--md-filled-button-container-height, 40px);--_container-shadow-color: var(--md-filled-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-button-container-shape, 9999px);--_disabled-container-color: var(--md-filled-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-button-focus-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-container-elevation: var(--md-filled-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-button-hover-label-text-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-button-label-text-color, var(--md-sys-color-on-primary, #fff));--_label-text-font: var(--md-filled-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filled-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-button-pressed-label-text-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-filled-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-color: var(--md-filled-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_leading-space: var(--md-filled-button-leading-space, 24px);--_trailing-space: var(--md-filled-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-button-with-trailing-icon-trailing-space, 16px);--_container-shape-start-start: var( --md-filled-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filled-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filled-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filled-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=filled-styles.css.map */ +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$k = i$4 `md-elevation{transition-duration:280ms}.button:disabled md-elevation{transition:none}.button{--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}.button:focus{--md-elevation-level: var(--_focus-container-elevation)}.button:hover{--md-elevation-level: var(--_hover-container-elevation)}.button:active{--md-elevation-level: var(--_pressed-container-elevation)}.button:disabled{--md-elevation-level: var(--_disabled-container-elevation)}/*# sourceMappingURL=shared-elevation-styles.css.map */ +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$j = i$4 `:host{display:inline-flex;height:var(--_container-height);outline:none;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){cursor:default;pointer-events:none}.button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:64px;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;inline-size:100%;position:relative;z-index:0;height:100%;font:inherit;color:var(--_label-text-color);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);gap:8px}.button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute}.button::-moz-focus-inner{padding:0;border:0}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:focus{color:var(--_focus-label-text-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:disabled .button__label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media(forced-colors: active){.button::before{content:"";box-sizing:border-box;border:1px solid CanvasText;border-radius:inherit;inset:0;pointer-events:none;position:absolute}.button:disabled{--_disabled-icon-opacity: 1;--_disabled-container-opacity: 1;--_disabled-label-text-opacity: 1}}.button,.button__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button::after,.button::before,md-elevation,.button__ripple{z-index:-1}.button--icon-leading{padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}.button--icon-trailing{padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.link-button-wrapper{inline-size:100%}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size)}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}.button:disabled ::slotted([slot=icon]){color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}:host([touch-target=none]) .touch{display:none}/*# sourceMappingURL=shared-styles.css.map */ +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Buttons help people take action, such as sending an email, sharing a + * document, or liking a comment. + * + * @description + * __Emphasis:__ High emphasis – For the primary, most important, or most common + * action on a screen + * + * __Rationale:__ The filled button’s contrasting surface color makes it the + * most prominent button after the FAB. It’s used for final or unblocking + * actions in a flow. + * + * __Example usages:__ + * - Save + * - Confirm + * - Done + * + * @final + * @suppress {visibility} + */ +let MdFilledButton = class MdFilledButton extends FilledButton { +}; +MdFilledButton.styles = [styles$j, styles$k, styles$l]; +MdFilledButton = __decorate([ + e$8('md-filled-button') +], MdFilledButton); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * An outlined button component. + */ +class OutlinedButton extends Button { + renderOutline() { + return x ``; + } +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$i = i$4 `:host{--_container-height: var(--md-outlined-button-container-height, 40px);--_container-shape: var(--md-outlined-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-outlined-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-button-disabled-label-text-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-button-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-outlined-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-outlined-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-outlined-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-outlined-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-outlined-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-outlined-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-button-outline-width, 1px);--_pressed-label-text-color: var(--md-outlined-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-outline-color: var(--md-outlined-button-pressed-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-color: var(--md-outlined-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-outlined-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-outlined-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-outlined-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-outlined-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-outlined-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-outlined-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-outlined-button-icon-size, 18px);--_pressed-icon-color: var(--md-outlined-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-outlined-button-leading-space, 24px);--_trailing-space: var(--md-outlined-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-outlined-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-outlined-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-outlined-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-outlined-button-with-trailing-icon-trailing-space, 16px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-outlined-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-button-container-shape-end-start, var(--_container-shape) )}.button__outline{inset:0;border-style:solid;position:absolute;box-sizing:border-box;border-color:var(--_outline-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button:active .button__outline{border-color:var(--_pressed-outline-color)}.button:disabled .button__outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}@media(forced-colors: active){.button:disabled .button__outline{opacity:1}}.button__outline,.button__ripple{border-width:var(--_outline-width)}.button__ripple{inline-size:calc(100% - 2*var(--_outline-width));block-size:calc(100% - 2*var(--_outline-width));border-style:solid;border-color:rgba(0,0,0,0)}/*# sourceMappingURL=outlined-styles.css.map */ +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Buttons help people take action, such as sending an email, sharing a + * document, or liking a comment. + * + * @description + * __Emphasis:__ Medium emphasis – For important actions that don’t distract + * from other onscreen elements. + * + * __Rationale:__ Use an outlined button for actions that need attention but + * aren’t the primary action, such as “See all” or “Add to cart.” This is also + * the button to use for giving someone the opportunity to change their mind or + * escape a flow. + * + * __Example usages:__ + * - Reply + * - View all + * - Add to cart + * - Take out of trash + * + * @final + * @suppress {visibility} + */ +let MdOutlinedButton = class MdOutlinedButton extends OutlinedButton { +}; +MdOutlinedButton.styles = [styles$j, styles$i]; +MdOutlinedButton = __decorate([ + e$8('md-outlined-button') +], MdOutlinedButton); + +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A checkbox component. + */ +class Checkbox extends s$2 { + /** + * The HTML name to use in form submission. + */ + get name() { + return this.getAttribute('name') ?? ''; + } + set name(name) { + this.setAttribute('name', name); + } + /** + * The associated form element with which this element's value will submit. + */ + get form() { + return this.internals.form; + } + /** + * The labels this element is associated with. + */ + get labels() { + return this.internals.labels; + } + /** + * Returns a ValidityState object that represents the validity states of the + * checkbox. + * + * Note that checkboxes will only set `valueMissing` if `required` and not + * checked. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation + */ + get validity() { + this.syncValidity(); + return this.internals.validity; + } + /** + * Returns the native validation error message. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process + */ + get validationMessage() { + this.syncValidity(); + return this.internals.validationMessage; + } + /** + * Returns whether an element will successfully validate based on forms + * validation rules and constraints. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process + */ + get willValidate() { + this.syncValidity(); + return this.internals.willValidate; + } + constructor() { + super(); + /** + * Whether or not the checkbox is selected. + */ + this.checked = false; + /** + * Whether or not the checkbox is disabled. + */ + this.disabled = false; + /** + * Whether or not the checkbox is indeterminate. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes + */ + this.indeterminate = false; + /** + * When true, require the checkbox to be selected when participating in + * form submission. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation + */ + this.required = false; + /** + * The value of the checkbox that is submitted with a form when selected. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value + */ + this.value = 'on'; + this.prevChecked = false; + this.prevDisabled = false; + this.prevIndeterminate = false; + // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432 + // Replace with this.internals.validity.customError when resolved. + this.hasCustomValidityError = false; + this.internals = this /* needed for closure */.attachInternals(); + { + this.addEventListener('click', (event) => { + if (!isActivationClick(event)) { + return; + } + this.focus(); + dispatchActivationClick(this.input); + }); + } + } + /** + * Checks the checkbox's native validation and returns whether or not the + * element is valid. + * + * If invalid, this method will dispatch the `invalid` event. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity + * + * @return true if the checkbox is valid, or false if not. + */ + checkValidity() { + this.syncValidity(); + return this.internals.checkValidity(); + } + /** + * Checks the checkbox's native validation and returns whether or not the + * element is valid. + * + * If invalid, this method will dispatch the `invalid` event. + * + * The `validationMessage` is reported to the user by the browser. Use + * `setCustomValidity()` to customize the `validationMessage`. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity + * + * @return true if the checkbox is valid, or false if not. + */ + reportValidity() { + this.syncValidity(); + return this.internals.reportValidity(); + } + /** + * Sets the checkbox's native validation error message. This is used to + * customize `validationMessage`. + * + * When the error is not an empty string, the checkbox is considered invalid + * and `validity.customError` will be true. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity + * + * @param error The error message to display. + */ + setCustomValidity(error) { + this.hasCustomValidityError = !!error; + this.internals.setValidity({ customError: !!error }, error, this.getInput()); + } + update(changed) { + if (changed.has('checked') || changed.has('disabled') || + changed.has('indeterminate')) { + this.prevChecked = changed.get('checked') ?? this.checked; + this.prevDisabled = changed.get('disabled') ?? this.disabled; + this.prevIndeterminate = + changed.get('indeterminate') ?? this.indeterminate; + } + const shouldAddFormValue = this.checked && !this.indeterminate; + const state = String(this.checked); + this.internals.setFormValue(shouldAddFormValue ? this.value : null, state); + super.update(changed); + } + render() { + const prevNone = !this.prevChecked && !this.prevIndeterminate; + const prevChecked = this.prevChecked && !this.prevIndeterminate; + const prevIndeterminate = this.prevIndeterminate; + const isChecked = this.checked && !this.indeterminate; + const isIndeterminate = this.indeterminate; + const containerClasses = o$1({ + 'disabled': this.disabled, + 'selected': isChecked || isIndeterminate, + 'unselected': !isChecked && !isIndeterminate, + 'checked': isChecked, + 'indeterminate': isIndeterminate, + 'prev-unselected': prevNone, + 'prev-checked': prevChecked, + 'prev-indeterminate': prevIndeterminate, + 'prev-disabled': this.prevDisabled, + }); + // Needed for closure conformance + const { ariaLabel, ariaInvalid } = this; + // Note: needs to be rendered before the for + // form.reportValidity() to work in Chrome. + return x ` +
+ + +
+
+ + + +
+ `; + } + updated() { + // Sync validity when properties change, since validation properties may + // have changed. + this.syncValidity(); + } + handleChange(event) { + const target = event.target; + this.checked = target.checked; + this.indeterminate = target.indeterminate; + redispatchEvent(this, event); + } + syncValidity() { + // Sync the internal 's validity and the host's ElementInternals + // validity. We do this to re-use native `` validation messages. + const input = this.getInput(); + if (this.hasCustomValidityError) { + input.setCustomValidity(this.internals.validationMessage); + } + else { + input.setCustomValidity(''); + } + this.internals.setValidity(input.validity, input.validationMessage, this.getInput()); + } + getInput() { + if (!this.input) { + // If the input is not yet defined, synchronously render. + this.connectedCallback(); + this.performUpdate(); + } + if (this.isUpdatePending) { + // If there are pending updates, synchronously perform them. This ensures + // that constraint validation properties (like `required`) are synced + // before interacting with input APIs that depend on them. + this.scheduleUpdate(); + } + return this.input; + } + /** @private */ + formResetCallback() { + // The checked property does not reflect, so the original attribute set by + // the user is used to determine the default value. + this.checked = this.hasAttribute('checked'); + } + /** @private */ + formStateRestoreCallback(state) { + this.checked = state === 'true'; + } +} +(() => { + requestUpdateOnAriaChange(Checkbox); +})(); +/** @nocollapse */ +Checkbox.shadowRootOptions = { + ...s$2.shadowRootOptions, + delegatesFocus: true +}; +/** @nocollapse */ +Checkbox.formAssociated = true; +__decorate([ + n$7({ type: Boolean }) +], Checkbox.prototype, "checked", void 0); +__decorate([ + n$7({ type: Boolean, reflect: true }) +], Checkbox.prototype, "disabled", void 0); +__decorate([ + n$7({ type: Boolean }) +], Checkbox.prototype, "indeterminate", void 0); +__decorate([ + n$7({ type: Boolean }) +], Checkbox.prototype, "required", void 0); +__decorate([ + n$7() +], Checkbox.prototype, "value", void 0); +__decorate([ + t$3() +], Checkbox.prototype, "prevChecked", void 0); +__decorate([ + t$3() +], Checkbox.prototype, "prevDisabled", void 0); +__decorate([ + t$3() +], Checkbox.prototype, "prevIndeterminate", void 0); +__decorate([ + i$5('input') +], Checkbox.prototype, "input", void 0); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$h = i$4 `:host{--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-size: var(--md-checkbox-container-size, 18px);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_disabled-container-opacity: var(--md-checkbox-disabled-container-opacity, 0.38);--_disabled-outline-color: var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-width: var(--md-checkbox-disabled-outline-width, 2px);--_focus-outline-color: var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-outline-width: var(--md-checkbox-focus-outline-width, 2px);--_hover-outline-color: var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-checkbox-hover-outline-width, 2px);--_hover-state-layer-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--_outline-color: var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-width: var(--md-checkbox-outline-width, 2px);--_pressed-outline-color: var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-outline-width: var(--md-checkbox-pressed-outline-width, 2px);--_pressed-state-layer-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: var( --md-checkbox-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-checkbox-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-checkbox-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-checkbox-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:inline-flex;height:var(--_container-size);position:relative;vertical-align:top;width:var(--_container-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--_outline-color);border-style:solid;border-width:var(--_outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--_hover-outline-color);border-width:var(--_hover-outline-width)}:where(:hover) .background{background:var(--_selected-hover-container-color)}:where(:hover) .icon{fill:var(--_selected-hover-icon-color)}:where(:focus-within) .outline{border-color:var(--_focus-outline-color);border-width:var(--_focus-outline-width)}:where(:focus-within) .background{background:var(--_selected-focus-container-color)}:where(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:where(:active) .outline{border-color:var(--_pressed-outline-color);border-width:var(--_pressed-outline-width)}:where(:active) .background{background:var(--_selected-pressed-container-color)}:where(:active) .icon{fill:var(--_selected-pressed-icon-color)}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);border-width:var(--_disabled-outline-width);opacity:var(--_disabled-container-opacity)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:where(.disabled) .icon{fill:var(--_selected-disabled-icon-color)}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */ +`; + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Checkboxes allow users to select one or more items from a set. + * Checkboxes can turn an option on or off. + * + * @description + * Use checkboxes to: + * - Select one or more options from a list + * - Present a list containing sub-selections + * - Turn an item on or off in a desktop environment + * + * @final + * @suppress {visibility} + */ +let MdCheckbox = class MdCheckbox extends Checkbox { +}; +MdCheckbox.styles = [styles$h]; +MdCheckbox = __decorate([ + e$8('md-checkbox') +], MdCheckbox); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A field component. + */ +class Field extends s$2 { + constructor() { + super(...arguments); + this.disabled = false; + this.error = false; + this.focused = false; + this.label = ''; + this.populated = false; + this.required = false; + this.resizable = false; + this.supportingText = ''; + this.errorText = ''; + this.count = -1; + this.max = -1; + /** + * Whether or not the field has leading content. + */ + this.hasStart = false; + /** + * Whether or not the field has trailing content. + */ + this.hasEnd = false; + this.isAnimating = false; + /** + * When set to true, the error text's `role="alert"` will be removed, then + * re-added after an animation frame. This will re-announce an error message + * to screen readers. + */ + this.refreshErrorAlert = false; + this.disableTransitions = false; + } + get counterText() { + if (this.count < 0 || this.max < 0) { + return ''; + } + return `${this.count} / ${this.max}`; + } + get supportingOrErrorText() { + return this.error && this.errorText ? this.errorText : this.supportingText; + } + /** + * Re-announces the field's error supporting text to screen readers. + * + * Error text announces to screen readers anytime it is visible and changes. + * Use the method to re-announce the message when the text has not changed, + * but announcement is still needed (such as for `reportValidity()`). + */ + reannounceError() { + this.refreshErrorAlert = true; + } + update(props) { + // Client-side property updates + const isDisabledChanging = props.has('disabled') && props.get('disabled') !== undefined; + if (isDisabledChanging) { + this.disableTransitions = true; + } + // When disabling, remove focus styles if focused. + if (this.disabled && this.focused) { + props.set('focused', true); + this.focused = false; + } + // Animate if focused or populated change. + this.animateLabelIfNeeded({ + wasFocused: props.get('focused'), + wasPopulated: props.get('populated') + }); + super.update(props); + } + render() { + const floatingLabel = this.renderLabel(/*isFloating*/ true); + const restingLabel = this.renderLabel(/*isFloating*/ false); + const outline = this.renderOutline?.(floatingLabel); + const classes = { + 'disabled': this.disabled, + 'disable-transitions': this.disableTransitions, + 'error': this.error && !this.disabled, + 'focused': this.focused, + 'with-start': this.hasStart, + 'with-end': this.hasEnd, + 'populated': this.populated, + 'resizable': this.resizable, + 'required': this.required, + 'no-label': !this.label, + }; + return x ` +
+
+ ${this.renderBackground?.()} + ${this.renderIndicator?.()} + ${outline} +
+
+ +
+
+
+ ${restingLabel} + ${outline ? A : floatingLabel} +
+
+ +
+
+
+ +
+
+
+ ${this.renderSupportingText()} +
+ `; + } + updated(changed) { + if (changed.has('supportingText') || changed.has('errorText') || + changed.has('count') || changed.has('max')) { + this.updateSlottedAriaDescribedBy(); + } + if (this.refreshErrorAlert) { + // The past render cycle removed the role="alert" from the error message. + // Re-add it after an animation frame to re-announce the error. + requestAnimationFrame(() => { + this.refreshErrorAlert = false; + }); + } + if (this.disableTransitions) { + requestAnimationFrame(() => { + this.disableTransitions = false; + }); + } + } + renderSupportingText() { + const { supportingOrErrorText, counterText } = this; + if (!supportingOrErrorText && !counterText) { + return A; + } + // Always render the supporting text span so that our `space-around` + // container puts the counter at the end. + const start = x `${supportingOrErrorText}`; + // Conditionally render counter so we don't render the extra `gap`. + // TODO(b/244473435): add aria-label and announcements + const end = counterText ? + x `${counterText}` : + A; + // Announce if there is an error and error text visible. + // If refreshErrorAlert is true, do not announce. This will remove the + // role="alert" attribute. Another render cycle will happen after an + // animation frame to re-add the role. + const shouldErrorAnnounce = this.error && this.errorText && !this.refreshErrorAlert; + const role = shouldErrorAnnounce ? 'alert' : A; + return x ` +
${start}${end}
+ + `; + } + updateSlottedAriaDescribedBy() { + for (const element of this.slottedAriaDescribedBy) { + D(x `${this.supportingOrErrorText} ${this.counterText}`, element); + element.setAttribute('hidden', ''); + } + } + renderLabel(isFloating) { + if (!this.label) { + return A; + } + let visible; + if (isFloating) { + // Floating label is visible when focused/populated or when animating. + visible = this.focused || this.populated || this.isAnimating; + } + else { + // Resting label is visible when unfocused. It is never visible while + // animating. + visible = !this.focused && !this.populated && !this.isAnimating; + } + const classes = { + 'hidden': !visible, + 'floating': isFloating, + 'resting': !isFloating, + }; + // Add '*' if a label is present and the field is required + const labelText = `${this.label}${this.required ? '*' : ''}`; + return x ` + ${labelText} + `; + } + animateLabelIfNeeded({ wasFocused, wasPopulated }) { + if (!this.label) { + return; + } + wasFocused ?? (wasFocused = this.focused); + wasPopulated ?? (wasPopulated = this.populated); + const wasFloating = wasFocused || wasPopulated; + const shouldBeFloating = this.focused || this.populated; + if (wasFloating === shouldBeFloating) { + return; + } + this.isAnimating = true; + this.labelAnimation?.cancel(); + // Only one label is visible at a time for clearer text rendering. + // The floating label is visible and used during animation. At the end of + // the animation, it will either remain visible (if floating) or hide and + // the resting label will be shown. + // + // We don't use forward filling because if the dimensions of the text field + // change (leading icon removed, density changes, etc), then the animation + // will be inaccurate. + // + // Re-calculating the animation each time will prevent any visual glitches + // from appearing. + // TODO(b/241113345): use animation tokens + this.labelAnimation = this.floatingLabelEl?.animate(this.getLabelKeyframes(), { duration: 150, easing: EASING.STANDARD }); + this.labelAnimation?.addEventListener('finish', () => { + // At the end of the animation, update the visible label. + this.isAnimating = false; + }); + } + getLabelKeyframes() { + const { floatingLabelEl, restingLabelEl } = this; + if (!floatingLabelEl || !restingLabelEl) { + return []; + } + const { x: floatingX, y: floatingY, height: floatingHeight } = floatingLabelEl.getBoundingClientRect(); + const { x: restingX, y: restingY, height: restingHeight } = restingLabelEl.getBoundingClientRect(); + const floatingScrollWidth = floatingLabelEl.scrollWidth; + const restingScrollWidth = restingLabelEl.scrollWidth; + // Scale by width ratio instead of font size since letter-spacing will scale + // incorrectly. Using the width we can better approximate the adjusted + // scale and compensate for tracking and overflow. + // (use scrollWidth instead of width to account for clipped labels) + const scale = restingScrollWidth / floatingScrollWidth; + const xDelta = restingX - floatingX; + // The line-height of the resting and floating label are different. When + // we move the floating label down to the resting label's position, it won't + // exactly match because of this. We need to adjust by half of what the + // final scaled floating label's height will be. + const yDelta = restingY - floatingY + + Math.round((restingHeight - floatingHeight * scale) / 2); + // Create the two transforms: floating to resting (using the calculations + // above), and resting to floating (re-setting the transform to initial + // values). + const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`; + const floatTransform = `translateX(0) translateY(0) scale(1)`; + // Constrain the floating labels width to a scaled percentage of the + // resting label's width. This will prevent long clipped labels from + // overflowing the container. + const restingClientWidth = restingLabelEl.clientWidth; + const isRestingClipped = restingScrollWidth > restingClientWidth; + const width = isRestingClipped ? `${restingClientWidth / scale}px` : ''; + if (this.focused || this.populated) { + return [ + { transform: restTransform, width }, { transform: floatTransform, width } + ]; + } + return [ + { transform: floatTransform, width }, { transform: restTransform, width } + ]; + } + getSurfacePositionClientRect() { + return this.containerEl.getBoundingClientRect(); + } +} +__decorate([ + n$7({ type: Boolean }) +], Field.prototype, "disabled", void 0); +__decorate([ + n$7({ type: Boolean }) +], Field.prototype, "error", void 0); +__decorate([ + n$7({ type: Boolean }) +], Field.prototype, "focused", void 0); +__decorate([ + n$7() +], Field.prototype, "label", void 0); +__decorate([ + n$7({ type: Boolean }) +], Field.prototype, "populated", void 0); +__decorate([ + n$7({ type: Boolean }) +], Field.prototype, "required", void 0); +__decorate([ + n$7({ type: Boolean }) +], Field.prototype, "resizable", void 0); +__decorate([ + n$7({ attribute: 'supporting-text' }) +], Field.prototype, "supportingText", void 0); +__decorate([ + n$7({ attribute: 'error-text' }) +], Field.prototype, "errorText", void 0); +__decorate([ + n$7({ type: Number }) +], Field.prototype, "count", void 0); +__decorate([ + n$7({ type: Number }) +], Field.prototype, "max", void 0); +__decorate([ + n$7({ type: Boolean, attribute: 'has-start' }) +], Field.prototype, "hasStart", void 0); +__decorate([ + n$7({ type: Boolean, attribute: 'has-end' }) +], Field.prototype, "hasEnd", void 0); +__decorate([ + l$5({ slot: 'aria-describedby' }) +], Field.prototype, "slottedAriaDescribedBy", void 0); +__decorate([ + t$3() +], Field.prototype, "isAnimating", void 0); +__decorate([ + t$3() +], Field.prototype, "refreshErrorAlert", void 0); +__decorate([ + t$3() +], Field.prototype, "disableTransitions", void 0); +__decorate([ + i$5('.label.floating') +], Field.prototype, "floatingLabelEl", void 0); +__decorate([ + i$5('.label.resting') +], Field.prototype, "restingLabelEl", void 0); +__decorate([ + i$5('.container') +], Field.prototype, "containerEl", void 0); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * An outlined field component. + */ +class OutlinedField extends Field { + renderOutline(floatingLabel) { + return x ` +
+
+
+
+
+
${floatingLabel}
+
+
+
+ `; + } +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$g = i$4 `:host{--_bottom-space: var(--md-outlined-field-bottom-space, 16px);--_container-shape: var(--md-outlined-field-container-shape, 4px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1d1b20));--_content-font: var(--md-outlined-field-content-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_content-line-height: var(--md-outlined-field-content-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_content-size: var(--md-outlined-field-content-size, var(--md-sys-typescale-body-large-size, 1rem));--_content-weight: var(--md-outlined-field-content-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-content-color: var(--md-outlined-field-disabled-leading-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-content-opacity: var(--md-outlined-field-disabled-leading-content-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-content-color: var(--md-outlined-field-disabled-trailing-content-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-content-opacity: var(--md-outlined-field-disabled-trailing-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-content-color: var(--md-outlined-field-error-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-content-color: var(--md-outlined-field-error-focus-trailing-content-color, var(--md-sys-color-error, #b3261e));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-content-color: var(--md-outlined-field-error-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-content-color: var(--md-outlined-field-error-hover-trailing-content-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-content-color: var(--md-outlined-field-error-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-content-color: var(--md-outlined-field-error-trailing-content-color, var(--md-sys-color-error, #b3261e));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-content-color: var(--md-outlined-field-focus-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-content-color: var(--md-outlined-field-focus-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-content-color: var(--md-outlined-field-hover-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-content-color: var(--md-outlined-field-hover-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-content-color: var(--md-outlined-field-leading-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-space: var(--md-outlined-field-leading-space, 16px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-leading-space: var(--md-outlined-field-supporting-text-leading-space, 16px);--_supporting-text-line-height: var(--md-outlined-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-top-space: var(--md-outlined-field-supporting-text-top-space, 4px);--_supporting-text-trailing-space: var(--md-outlined-field-supporting-text-trailing-space, 16px);--_supporting-text-weight: var(--md-outlined-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_top-space: var(--md-outlined-field-top-space, 16px);--_trailing-content-color: var(--md-outlined-field-trailing-content-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-space: var(--md-outlined-field-trailing-space, 16px);--_container-shape-start-start: var( --md-outlined-field-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-field-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-field-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-field-container-shape-end-start, var(--_container-shape) )}.outline{border-color:var(--_outline-color);border-radius:inherit;color:var(--_outline-color);display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.outline-start::before,.outline-start::after,.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after,.outline-end::before,.outline-end::after{border:inherit;content:"";inset:0;position:absolute}.outline-start,.outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.outline-start::before,.outline-start::after,.outline-end::before,.outline-end::after{border-bottom-style:solid;border-top-style:solid}.outline-start::after,.outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-start::after,.focused .outline-end::after{opacity:1}.outline-start::before,.outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.outline-end::before,.outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - var(--_leading-space) - var(--_trailing-space));padding:0 var(--_outline-label-padding);position:relative}.no-label .outline-notch{display:none}.outline-panel-inactive,.outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.outline-panel-inactive::before,.outline-panel-inactive::after,.outline-panel-active::before,.outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.2, 0, 0, 1)}.outline-panel-inactive::before,.outline-panel-active::before{right:50%;transform-origin:top left}.outline-panel-inactive::after,.outline-panel-active::after{left:50%;transform-origin:top right}.populated .outline-panel-inactive::before,.populated .outline-panel-inactive::after,.populated .outline-panel-active::before,.populated .outline-panel-active::after,.focused .outline-panel-inactive::before,.focused .outline-panel-inactive::after,.focused .outline-panel-active::before,.focused .outline-panel-active::after{transform:scaleX(0)}.outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.2, 0, 0, 1)}.focused .outline-panel-active{opacity:1}.outline-label{display:flex;max-width:100%;transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.outline-start,.field:not(.with-start) .content ::slotted(*){padding-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-start) .label-wrapper{margin-inline-start:max(var(--_leading-space),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.field:not(.with-end) .content ::slotted(*){padding-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.field:not(.with-end) .label-wrapper{margin-inline-end:max(var(--_trailing-space),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.outline-start::before,.outline-end::before,.outline-panel-inactive,.outline-panel-inactive::before,.outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .outline-start::before,:hover .outline-end::before,:hover .outline-panel-inactive,:hover .outline-panel-inactive::before,:hover .outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.focused .outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.outline-start::after,.outline-end::after,.outline-panel-active,.outline-panel-active::before,.outline-panel-active::after{border-width:var(--_focus-outline-width)}.disabled .outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.disabled .outline-start,.disabled .outline-end,.disabled .outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.disabled .outline-start::before,.disabled .outline-end::before,.disabled .outline-panel-inactive,.disabled .outline-panel-inactive::before,.disabled .outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.error .outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.error:hover .outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.error.focused .outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}.resizable .container{bottom:var(--_focus-outline-width);inset-inline-end:var(--_focus-outline-width);clip-path:inset(var(--_focus-outline-width) 0 0 var(--_focus-outline-width))}.resizable .container>*{top:var(--_focus-outline-width);inset-inline-start:var(--_focus-outline-width)}:host-context([dir=rtl]) .resizable .container,:host([dir=rtl]) .resizable .container{clip-path:inset(var(--_focus-outline-width) var(--_focus-outline-width) 0 0)}.resizable .container:dir(rtl){clip-path:inset(var(--_focus-outline-width) var(--_focus-outline-width) 0 0)}/*# sourceMappingURL=outlined-styles.css.map */ +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$f = i$4 `:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start,.with-end .end{min-width:48px}.with-start .start{margin-inline-end:4px}.with-end .end{margin-inline-start:4px}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;white-space:pre-wrap}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}/*# sourceMappingURL=shared-styles.css.map */ +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/228525797): add docs + * @final + * @suppress {visibility} + */ +let MdOutlinedField = class MdOutlinedField extends OutlinedField { +}; +MdOutlinedField.styles = [styles$f, styles$g]; +MdOutlinedField = __decorate([ + e$8('md-outlined-field') +], MdOutlinedField); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A text button component. + */ +class TextButton extends Button { +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$e = i$4 `:host{--_container-height: var(--md-text-button-container-height, 40px);--_container-shape: var(--md-text-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-text-button-disabled-label-text-opacity, 0.38);--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-text-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-text-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-text-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-text-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-text-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-text-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-text-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-text-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-text-button-icon-size, 18px);--_pressed-icon-color: var(--md-text-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-text-button-leading-space, 12px);--_trailing-space: var(--md-text-button-trailing-space, 12px);--_with-leading-icon-leading-space: var(--md-text-button-with-leading-icon-leading-space, 12px);--_with-leading-icon-trailing-space: var(--md-text-button-with-leading-icon-trailing-space, 16px);--_with-trailing-icon-leading-space: var(--md-text-button-with-trailing-icon-leading-space, 16px);--_with-trailing-icon-trailing-space: var(--md-text-button-with-trailing-icon-trailing-space, 12px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-text-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-text-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-text-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-text-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=text-styles.css.map */ +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Buttons help people take action, such as sending an email, sharing a + * document, or liking a comment. + * + * @description + * __Emphasis:__ Low emphasis – For optional or supplementary actions with the + * least amount of prominence + * + * __Rationale:__ Text buttons have less visual prominence, so should be used + * for low emphasis actions, such as an alternative option. + * + * __Example usages:__ + * - Learn more + * - View all + * - Change account + * - Turn on + * + * @final + * @suppress {visibility} + */ +let MdTextButton = class MdTextButton extends TextButton { +}; +MdTextButton.styles = [styles$j, styles$e]; +MdTextButton = __decorate([ + e$8('md-text-button') +], MdTextButton); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/265336902): add docs + */ +class Icon extends s$2 { + render() { + return x ``; + } + connectedCallback() { + super.connectedCallback(); + const ariaHidden = this.getAttribute('aria-hidden'); + if (ariaHidden === 'false') { + // Allow the user to set `aria-hidden="false"` to create an icon that is + // announced by screenreaders. + this.removeAttribute('aria-hidden'); + return; + } + // Needed for VoiceOver, which will create a "group" if the element is a + // sibling to other content. + this.setAttribute('aria-hidden', 'true'); + } +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$d = i$4 `:host{font-size:24px;width:24px;height:24px;color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%}/*# sourceMappingURL=icon-styles.css.map */ +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @final + * @suppress {visibility} + */ +let MdIcon = class MdIcon extends Icon { +}; +/** @nocollapse */ +MdIcon.styles = [styles$d]; +MdIcon = __decorate([ + e$8('md-icon') +], MdIcon); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * Returns `true` if the given element is in a right-to-left direction. + * + * @param el Element to determine direction from + * @param shouldCheck Optional. If `false`, return `false` without checking + * direction. Determining the direction of `el` is somewhat expensive, so + * this parameter can be used as a conditional guard. Defaults to `true`. + */ +function isRtl(el, shouldCheck = true) { + return shouldCheck && + getComputedStyle(el).getPropertyValue('direction').trim() === 'rtl'; +} + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +var _a$1; +// tslint:disable-next-line:enforce-comments-on-exported-symbols +class IconButton extends s$2 { + constructor() { + super(...arguments); + /** + * Disables the icon button and makes it non-interactive. + */ + this.disabled = false; + /** + * Flips the icon if it is in an RTL context at startup. + */ + this.flipIconInRtl = false; + /** + * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. + */ + this.href = ''; + /** + * Sets the underlying `HTMLAnchorElement`'s `target` attribute. + */ + this.target = ''; + /** + * The `aria-label` of the button when the button is toggleable and selected. + */ + this.ariaLabelSelected = ''; + /** + * When true, the button will toggle between selected and unselected + * states + */ + this.toggle = false; + /** + * Sets the selected state. When false, displays the default icon. When true, + * displays the selected icon, or the default icon If no `slot="selected"` + * icon is provided. + */ + this.selected = false; + this.type = 'submit'; + this.value = ''; + this.flipIcon = isRtl(this, this.flipIconInRtl); + /** @private */ + this[_a$1] = this /* needed for closure */.attachInternals(); + } + get name() { + return this.getAttribute('name') ?? ''; + } + set name(name) { + this.setAttribute('name', name); + } + /** + * The associated form element with which this element's value will submit. + */ + get form() { + return this[internals].form; + } + /** + * The labels this element is associated with. + */ + get labels() { + return this[internals].labels; + } + /** + * Link buttons cannot be disabled. + */ + willUpdate() { + if (this.href) { + this.disabled = false; + } + } + render() { + const tag = this.href ? i$1 `div` : i$1 `button`; + // Needed for closure conformance + const { ariaLabel, ariaHasPopup, ariaExpanded } = this; + const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected; + const ariaPressedValue = !this.toggle ? A : this.selected; + let ariaLabelValue = A; + if (!this.href) { + ariaLabelValue = (hasToggledAriaLabel && this.selected) ? + this.ariaLabelSelected : + ariaLabel; + } + return n$1 `<${tag} + class="icon-button ${o$1(this.getRenderClasses())}" + id="button" + aria-label="${ariaLabelValue || A}" + aria-haspopup="${!this.href && ariaHasPopup || A}" + aria-expanded="${!this.href && ariaExpanded || A}" + aria-pressed="${ariaPressedValue}" + ?disabled="${!this.href && this.disabled}" + @click="${this.handleClick}"> + ${this.renderFocusRing()} + ${this.renderRipple()} + ${!this.selected ? this.renderIcon() : A} + ${this.selected ? this.renderSelectedIcon() : A} + ${this.renderTouchTarget()} + ${this.href && this.renderLink()} + `; + } + renderLink() { + // Needed for closure conformance + const { ariaLabel } = this; + return x ` + + `; + } + getRenderClasses() { + return { + 'flip-icon': this.flipIcon, + 'selected': this.toggle && this.selected, + }; + } + renderIcon() { + return x ``; + } + renderSelectedIcon() { + // Use default slot as fallback to not require specifying multiple icons + return x ``; + } + renderTouchTarget() { + return x ``; + } + renderFocusRing() { + return x ``; + } + renderRipple() { + return x ``; + } + connectedCallback() { + this.flipIcon = isRtl(this, this.flipIconInRtl); + super.connectedCallback(); + } + async handleClick(event) { + // Allow the event to propagate + await 0; + if (!this.toggle || this.disabled || event.defaultPrevented) { + return; + } + this.selected = !this.selected; + this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true })); + // Bubbles but does not compose to mimic native browser & properties + this.inputMode = ''; + /** + * Defines the greatest value in the range of permitted values. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max + */ + this.max = ''; + /** + * The maximum number of characters a user can enter into the text field. Set + * to -1 for none. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength + */ + this.maxLength = -1; + /** + * Defines the most negative value in the range of permitted values. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min + */ + this.min = ''; + /** + * The minimum number of characters a user can enter into the text field. Set + * to -1 for none. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength + */ + this.minLength = -1; + /** + * A regular expression that the text field's value must match to pass + * constraint validation. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern + */ + this.pattern = ''; + this.placeholder = ''; + /** + * Indicates whether or not a user should be able to edit the text field's + * value. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly + */ + this.readOnly = false; + /** + * Returns or sets the element's step attribute, which works with min and max + * to limit the increments at which a numeric or date-time value can be set. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step + */ + this.step = ''; + /** + * The `` type to use, defaults to "text". The type greatly changes how + * the text field behaves. + * + * Text fields support a limited number of `` types: + * + * - text + * - textarea + * - email + * - number + * - password + * - search + * - tel + * - url + * + * See + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types + * for more details on each input type. + */ + this.type = 'text'; + /** + * Describes what, if any, type of autocomplete functionality the input + * should provide. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete + */ + this.autocomplete = ''; + /** + * Returns true when the text field has been interacted with. Native + * validation errors only display in response to user interactions. + */ + this.dirty = false; + this.focused = false; + /** + * Whether or not a native error has been reported via `reportValidity()`. + */ + this.nativeError = false; + /** + * The validation message displayed from a native error via + * `reportValidity()`. + */ + this.nativeErrorText = ''; + // Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432 + // Replace with this.internals.validity.customError when resolved. + this.hasCustomValidityError = false; + this.internals = this /* needed for closure */.attachInternals(); + } + /** + * The associated form element with which this element's value will submit. + */ + get form() { + return this.internals.form; + } + /** + * The labels this element is associated with. + */ + get labels() { + return this.internals.labels; + } + /** + * The HTML name to use in form submission. + */ + get name() { + return this.getAttribute('name') ?? ''; + } + set name(name) { + this.setAttribute('name', name); + } + /** + * Gets or sets the direction in which selection occurred. + */ + get selectionDirection() { + return this.getInputOrTextarea().selectionDirection; + } + set selectionDirection(value) { + this.getInputOrTextarea().selectionDirection = value; + } + /** + * Gets or sets the end position or offset of a text selection. + */ + get selectionEnd() { + return this.getInputOrTextarea().selectionEnd; + } + set selectionEnd(value) { + this.getInputOrTextarea().selectionEnd = value; + } + /** + * Gets or sets the starting position or offset of a text selection. + */ + get selectionStart() { + return this.getInputOrTextarea().selectionStart; + } + set selectionStart(value) { + this.getInputOrTextarea().selectionStart = value; + } + /** + * Returns the text field's validation error message. + * + * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation + */ + get validationMessage() { + this.syncValidity(); + return this.internals.validationMessage; + } + /** + * Returns a `ValidityState` object that represents the validity states of the + * text field. + * + * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState + */ + get validity() { + this.syncValidity(); + return this.internals.validity; + } + /** + * The text field's value as a number. + */ + get valueAsNumber() { + const input = this.getInput(); + if (!input) { + return NaN; + } + return input.valueAsNumber; + } + set valueAsNumber(value) { + const input = this.getInput(); + if (!input) { + return; + } + input.valueAsNumber = value; + this.value = input.value; + } + /** + * The text field's value as a Date. + */ + get valueAsDate() { + const input = this.getInput(); + if (!input) { + return null; + } + return input.valueAsDate; + } + set valueAsDate(value) { + const input = this.getInput(); + if (!input) { + return; + } + input.valueAsDate = value; + this.value = input.value; + } + /** + * Returns whether an element will successfully validate based on forms + * validation rules and constraints. + * + * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate + */ + get willValidate() { + this.syncValidity(); + return this.internals.willValidate; + } + get hasError() { + return this.error || this.nativeError; + } + /** + * Checks the text field's native validation and returns whether or not the + * element is valid. + * + * If invalid, this method will dispatch the `invalid` event. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity + * + * @return true if the text field is valid, or false if not. + */ + checkValidity() { + this.syncValidity(); + return this.internals.checkValidity(); + } + /** + * Checks the text field's native validation and returns whether or not the + * element is valid. + * + * If invalid, this method will dispatch the `invalid` event. + * + * This method will display or clear an error text message equal to the text + * field's `validationMessage`, unless the invalid event is canceled. + * + * Use `setCustomValidity()` to customize the `validationMessage`. + * + * This method can also be used to re-announce error messages to screen + * readers. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity + * + * @return true if the text field is valid, or false if not. + */ + reportValidity() { + let invalidEvent; + this.addEventListener('invalid', event => { + invalidEvent = event; + }, { once: true }); + const valid = this.checkValidity(); + if (invalidEvent?.defaultPrevented) { + return valid; + } + const prevMessage = this.getErrorText(); + this.nativeError = !valid; + this.nativeErrorText = this.validationMessage; + if (prevMessage === this.getErrorText()) { + this.field?.reannounceError(); + } + return valid; + } + /** + * Selects all the text in the text field. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select + */ + select() { + this.getInputOrTextarea().select(); + } + /** + * Sets a custom validation error message for the text field. Use this for + * custom error message. + * + * When the error is not an empty string, the text field is considered invalid + * and `validity.customError` will be true. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity + * + * @param error The error message to display. + */ + setCustomValidity(error) { + this.hasCustomValidityError = !!error; + this.internals.setValidity({ customError: !!error }, error, this.getInputOrTextarea()); + } + setRangeText(...args) { + // Calling setRangeText with 1 vs 3-4 arguments has different behavior. + // Use spread syntax and type casting to ensure correct usage. + this.getInputOrTextarea().setRangeText(...args); + this.value = this.getInputOrTextarea().value; + } + /** + * Sets the start and end positions of a selection in the text field. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange + * + * @param start The offset into the text field for the start of the selection. + * @param end The offset into the text field for the end of the selection. + * @param direction The direction in which the selection is performed. + */ + setSelectionRange(start, end, direction) { + this.getInputOrTextarea().setSelectionRange(start, end, direction); + } + /** + * Decrements the value of a numeric type text field by `step` or `n` `step` + * number of times. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown + * + * @param stepDecrement The number of steps to decrement, defaults to 1. + */ + stepDown(stepDecrement) { + const input = this.getInput(); + if (!input) { + return; + } + input.stepDown(stepDecrement); + this.value = input.value; + } + /** + * Increments the value of a numeric type text field by `step` or `n` `step` + * number of times. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp + * + * @param stepIncrement The number of steps to increment, defaults to 1. + */ + stepUp(stepIncrement) { + const input = this.getInput(); + if (!input) { + return; + } + input.stepUp(stepIncrement); + this.value = input.value; + } + /** + * Reset the text field to its default value. + */ + reset() { + this.dirty = false; + this.value = this.getAttribute('value') ?? ''; + this.nativeError = false; + this.nativeErrorText = ''; + } + attributeChangedCallback(attribute, newValue, oldValue) { + if (attribute === 'value' && this.dirty) { + // After user input, changing the value attribute no longer updates the + // text field's value (until reset). This matches native behavior. + return; + } + super.attributeChangedCallback(attribute, newValue, oldValue); + } + render() { + const classes = { + 'disabled': this.disabled, + 'error': !this.disabled && this.hasError, + 'textarea': this.type === 'textarea', + }; + return x ` + + ${this.renderField()} + + `; + } + updated(changedProperties) { + // Keep changedProperties arg so that subclasses may call it + // If a property such as `type` changes and causes the internal + // value to change without dispatching an event, re-sync it. + const value = this.getInputOrTextarea().value; + if (this.value !== value) { + // Note this is typically inefficient in updated() since it schedules + // another update. However, it is needed for the to fully render + // before checking its value. + this.value = value; + } + this.internals.setFormValue(value); + // Sync validity when properties change, since validation properties may + // have changed. + this.syncValidity(); + } + renderField() { + return n$1 `<${this.fieldTag} + class="field" + count=${this.value.length} + ?disabled=${this.disabled} + ?error=${this.hasError} + error-text=${this.getErrorText()} + ?focused=${this.focused} + ?has-end=${this.hasTrailingIcon} + ?has-start=${this.hasLeadingIcon} + label=${this.label} + max=${this.maxLength} + ?populated=${!!this.value} + ?required=${this.required} + ?resizable=${this.type === 'textarea'} + supporting-text=${this.supportingText} + > + ${this.renderLeadingIcon()} + ${this.renderInputOrTextarea()} + ${this.renderTrailingIcon()} +
+ `; + } + renderLeadingIcon() { + return x ` + + + + `; + } + renderTrailingIcon() { + return x ` + + + + `; + } + renderInputOrTextarea() { + const style = { direction: this.textDirection }; + const ariaLabel = this.ariaLabel || this.label || A; + // lit-anaylzer `autocomplete` types are too strict + // tslint:disable-next-line:no-any + const autocomplete = this.autocomplete; + if (this.type === 'textarea') { + return x ` + + `; + } + const prefix = this.renderPrefix(); + const suffix = this.renderSuffix(); + // TODO(b/243805848): remove `as unknown as number` and `as any` once lit + // analyzer is fixed + // tslint:disable-next-line:no-any + const inputMode = this.inputMode; + return x ` +
+ ${prefix} + -1 ? this.maxLength : A} + min=${(this.min || A)} + minlength=${this.minLength > -1 ? this.minLength : A} + pattern=${this.pattern || A} + placeholder=${this.placeholder || A} + ?readonly=${this.readOnly} + ?required=${this.required} + step=${(this.step || A)} + type=${this.type} + .value=${l(this.value)} + @change=${this.redispatchEvent} + @focusin=${this.handleFocusin} + @focusout=${this.handleFocusout} + @input=${this.handleInput} + @select=${this.redispatchEvent} + > + ${suffix} +
+ `; + } + renderPrefix() { + return this.renderAffix(this.prefixText, /* isSuffix */ false); + } + renderSuffix() { + return this.renderAffix(this.suffixText, /* isSuffix */ true); + } + renderAffix(text, isSuffix) { + if (!text) { + return A; + } + const classes = { + 'suffix': isSuffix, + 'prefix': !isSuffix, + }; + return x `${text}`; + } + getErrorText() { + return this.error ? this.errorText : this.nativeErrorText; + } + handleFocusin() { + this.focused = true; + } + handleFocusout() { + this.focused = false; + } + handleInput(event) { + this.dirty = true; + this.value = event.target.value; + // Sync validity so that clients can check validity on input. + this.syncValidity(); + } + handleChange(event) { + // Sync validity so that clients can check validity on change. + this.syncValidity(); + this.redispatchEvent(event); + } + redispatchEvent(event) { + redispatchEvent(this, event); + } + getInputOrTextarea() { + if (!this.inputOrTextarea) { + // If the input is not yet defined, synchronously render. + // e.g. + // const textField = document.createElement('md-outlined-text-field'); + // document.body.appendChild(textField); + // textField.focus(); // synchronously render + this.connectedCallback(); + this.scheduleUpdate(); + } + if (this.isUpdatePending) { + // If there are pending updates, synchronously perform them. This ensures + // that constraint validation properties (like `required`) are synced + // before interacting with input APIs that depend on them. + this.scheduleUpdate(); + } + return this.inputOrTextarea; + } + getInput() { + if (this.type === 'textarea') { + return null; + } + return this.getInputOrTextarea(); + } + syncValidity() { + // Sync the internal 's validity and the host's ElementInternals + // validity. We do this to re-use native `` validation messages. + const input = this.getInputOrTextarea(); + if (this.hasCustomValidityError) { + input.setCustomValidity(this.internals.validationMessage); + } + else { + input.setCustomValidity(''); + } + this.internals.setValidity(input.validity, input.validationMessage, this.getInputOrTextarea()); + } + handleIconChange() { + this.hasLeadingIcon = this.leadingIcons.length > 0; + this.hasTrailingIcon = this.trailingIcons.length > 0; + } + /** @private */ + formResetCallback() { + this.reset(); + } + /** @private */ + formStateRestoreCallback(state) { + this.value = state; + } +} +(() => { + requestUpdateOnAriaChange(TextField); +})(); +/** @nocollapse */ +TextField.shadowRootOptions = { ...s$2.shadowRootOptions, delegatesFocus: true }; +/** @nocollapse */ +TextField.formAssociated = true; +__decorate([ + n$7({ type: Boolean, reflect: true }) +], TextField.prototype, "disabled", void 0); +__decorate([ + n$7({ type: Boolean, reflect: true }) +], TextField.prototype, "error", void 0); +__decorate([ + n$7({ attribute: 'error-text' }) +], TextField.prototype, "errorText", void 0); +__decorate([ + n$7() +], TextField.prototype, "label", void 0); +__decorate([ + n$7({ type: Boolean, reflect: true }) +], TextField.prototype, "required", void 0); +__decorate([ + n$7() +], TextField.prototype, "value", void 0); +__decorate([ + n$7({ attribute: 'prefix-text' }) +], TextField.prototype, "prefixText", void 0); +__decorate([ + n$7({ attribute: 'suffix-text' }) +], TextField.prototype, "suffixText", void 0); +__decorate([ + n$7({ type: Boolean, attribute: 'has-leading-icon' }) +], TextField.prototype, "hasLeadingIcon", void 0); +__decorate([ + n$7({ type: Boolean, attribute: 'has-trailing-icon' }) +], TextField.prototype, "hasTrailingIcon", void 0); +__decorate([ + n$7({ attribute: 'supporting-text' }) +], TextField.prototype, "supportingText", void 0); +__decorate([ + n$7({ attribute: 'text-direction' }) +], TextField.prototype, "textDirection", void 0); +__decorate([ + n$7({ type: Number }) +], TextField.prototype, "rows", void 0); +__decorate([ + n$7({ reflect: true }) +], TextField.prototype, "inputMode", void 0); +__decorate([ + n$7() +], TextField.prototype, "max", void 0); +__decorate([ + n$7({ type: Number }) +], TextField.prototype, "maxLength", void 0); +__decorate([ + n$7() +], TextField.prototype, "min", void 0); +__decorate([ + n$7({ type: Number }) +], TextField.prototype, "minLength", void 0); +__decorate([ + n$7() +], TextField.prototype, "pattern", void 0); +__decorate([ + n$7({ reflect: true, converter: stringConverter }) +], TextField.prototype, "placeholder", void 0); +__decorate([ + n$7({ type: Boolean, reflect: true }) +], TextField.prototype, "readOnly", void 0); +__decorate([ + n$7() +], TextField.prototype, "step", void 0); +__decorate([ + n$7({ reflect: true }) +], TextField.prototype, "type", void 0); +__decorate([ + n$7({ reflect: true }) +], TextField.prototype, "autocomplete", void 0); +__decorate([ + t$3() +], TextField.prototype, "dirty", void 0); +__decorate([ + t$3() +], TextField.prototype, "focused", void 0); +__decorate([ + t$3() +], TextField.prototype, "nativeError", void 0); +__decorate([ + t$3() +], TextField.prototype, "nativeErrorText", void 0); +__decorate([ + i$5('.input') +], TextField.prototype, "inputOrTextarea", void 0); +__decorate([ + i$5('.field') +], TextField.prototype, "field", void 0); +__decorate([ + l$5({ slot: 'leading-icon' }) +], TextField.prototype, "leadingIcons", void 0); +__decorate([ + l$5({ slot: 'trailing-icon' }) +], TextField.prototype, "trailingIcons", void 0); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A filled text field component. + */ +class FilledTextField extends TextField { + constructor() { + super(...arguments); + this.fieldTag = i$1 `md-filled-field`; + } +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$7 = i$4 `:host{display:inline-flex;outline:none;resize:both;-webkit-tap-highlight-color:rgba(0,0,0,0)}.text-field,.field{width:100%}.text-field{display:inline-flex}.field{cursor:text}.disabled .field{cursor:default}.text-field,.textarea .field{resize:inherit}.icon{color:currentColor;display:flex;fill:currentColor}.icon ::slotted(*){display:flex}[hasstart] .icon.leading{font-size:var(--_leading-icon-size);height:var(--_leading-icon-size);width:var(--_leading-icon-size)}[hasend] .icon.trailing{font-size:var(--_trailing-icon-size);height:var(--_trailing-icon-size);width:var(--_trailing-icon-size)}.input-wrapper{display:flex}.input-wrapper>*{all:inherit;padding:0}.input{caret-color:var(--_caret-color);overflow-x:hidden;text-align:inherit}.input::placeholder{color:currentColor;opacity:1}.input::-webkit-calendar-picker-indicator{display:none}.input::-webkit-search-decoration,.input::-webkit-search-cancel-button{display:none}@media(forced-colors: active){.input{background-color:Field}}:focus-within .input{caret-color:var(--_focus-caret-color)}.error:focus-within .input{caret-color:var(--_error-focus-caret-color)}.text-field:not(.disabled) .prefix{color:var(--_input-text-prefix-color)}.text-field:not(.disabled) .suffix{color:var(--_input-text-suffix-color)}.text-field:not(.disabled) .input::placeholder{color:var(--_input-text-placeholder-color)}.prefix,.suffix{text-wrap:nowrap;width:min-content}.prefix{padding-inline-end:var(--_input-text-prefix-trailing-space)}.suffix{padding-inline-start:var(--_input-text-suffix-leading-space)}/*# sourceMappingURL=shared-styles.css.map */ +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/228525797): Add docs + * @final + * @suppress {visibility} + */ +let MdFilledTextField = class MdFilledTextField extends FilledTextField { + constructor() { + super(...arguments); + this.fieldTag = i$1 `md-filled-field`; + } +}; +MdFilledTextField.styles = [styles$7, styles$8, styles$9]; +MdFilledTextField = __decorate([ + e$8('md-filled-text-field') +], MdFilledTextField); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$6 = i$4 `@media(forced-colors: active){:host{--md-outlined-text-field-disabled-input-text-color: GrayText;--md-outlined-text-field-disabled-input-text-opacity: 1;--md-outlined-text-field-disabled-label-text-color: GrayText;--md-outlined-text-field-disabled-label-text-opacity: 1;--md-outlined-text-field-disabled-leading-icon-color: GrayText;--md-outlined-text-field-disabled-leading-icon-opacity: 1;--md-outlined-text-field-disabled-outline-color: GrayText;--md-outlined-text-field-disabled-outline-opacity: 1;--md-outlined-text-field-disabled-supporting-text-color: GrayText;--md-outlined-text-field-disabled-supporting-text-opacity: 1;--md-outlined-text-field-disabled-trailing-icon-color: GrayText;--md-outlined-text-field-disabled-trailing-icon-opacity: 1}}/*# sourceMappingURL=outlined-forced-colors-styles.css.map */ +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$5 = i$4 `:host{--_leading-space: var(--md-outlined-text-field-leading-space, 16px);--_trailing-space: var(--md-outlined-text-field-trailing-space, 16px);--_top-space: var(--md-outlined-text-field-top-space, 16px);--_bottom-space: var(--md-outlined-text-field-bottom-space, 16px);--_input-text-prefix-trailing-space: var(--md-outlined-text-field-input-text-prefix-trailing-space, 2px);--_input-text-suffix-leading-space: var(--md-outlined-text-field-input-text-suffix-leading-space, 2px);--_focus-caret-color: var(--md-outlined-text-field-focus-caret-color, var(--md-sys-color-primary, #6750a4));--_caret-color: var(--md-outlined-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-shape: var(--md-outlined-text-field-container-shape, 4px);--_disabled-input-text-color: var(--md-outlined-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-input-text-opacity: var(--md-outlined-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-outlined-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-text-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-text-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-text-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-outlined-text-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-caret-color: var(--md-outlined-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-outlined-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-text-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-input-text-color: var(--md-outlined-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-text-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-outlined-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-label-text-color: var(--md-outlined-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-text-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-input-text-color: var(--md-outlined-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-text-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-text-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-input-text-color: var(--md-outlined-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-color: var(--md-outlined-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-text-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-text-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-outlined-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_input-text-font: var(--md-outlined-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_input-text-line-height: var(--md-outlined-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_input-text-placeholder-color: var(--md-outlined-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-outlined-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-outlined-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_input-text-suffix-color: var(--md-outlined-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-weight: var(--md-outlined-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_label-text-color: var(--md-outlined-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-outlined-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-icon-color: var(--md-outlined-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-text-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-text-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-text-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-outlined-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-weight: var(--md-outlined-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_trailing-icon-color: var(--md-outlined-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-text-field-trailing-icon-size, 24px);--_container-shape-start-start: var( --md-outlined-text-field-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-outlined-text-field-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-outlined-text-field-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-outlined-text-field-container-shape-end-start, var(--_container-shape) );--md-outlined-field-bottom-space: var(--_bottom-space);--md-outlined-field-container-shape-end-end: var(--_container-shape-end-end);--md-outlined-field-container-shape-end-start: var(--_container-shape-end-start);--md-outlined-field-container-shape-start-end: var(--_container-shape-start-end);--md-outlined-field-container-shape-start-start: var(--_container-shape-start-start);--md-outlined-field-content-color: var(--_input-text-color);--md-outlined-field-content-font: var(--_input-text-font);--md-outlined-field-content-line-height: var(--_input-text-line-height);--md-outlined-field-content-size: var(--_input-text-size);--md-outlined-field-content-weight: var(--_input-text-weight);--md-outlined-field-disabled-content-color: var(--_disabled-input-text-color);--md-outlined-field-disabled-content-opacity: var(--_disabled-input-text-opacity);--md-outlined-field-disabled-label-text-color: var(--_disabled-label-text-color);--md-outlined-field-disabled-label-text-opacity: var(--_disabled-label-text-opacity);--md-outlined-field-disabled-leading-content-color: var(--_disabled-leading-icon-color);--md-outlined-field-disabled-leading-content-opacity: var(--_disabled-leading-icon-opacity);--md-outlined-field-disabled-outline-color: var(--_disabled-outline-color);--md-outlined-field-disabled-outline-opacity: var(--_disabled-outline-opacity);--md-outlined-field-disabled-outline-width: var(--_disabled-outline-width);--md-outlined-field-disabled-supporting-text-color: var(--_disabled-supporting-text-color);--md-outlined-field-disabled-supporting-text-opacity: var(--_disabled-supporting-text-opacity);--md-outlined-field-disabled-trailing-content-color: var(--_disabled-trailing-icon-color);--md-outlined-field-disabled-trailing-content-opacity: var(--_disabled-trailing-icon-opacity);--md-outlined-field-error-content-color: var(--_error-input-text-color);--md-outlined-field-error-focus-content-color: var(--_error-focus-input-text-color);--md-outlined-field-error-focus-label-text-color: var(--_error-focus-label-text-color);--md-outlined-field-error-focus-leading-content-color: var(--_error-focus-leading-icon-color);--md-outlined-field-error-focus-outline-color: var(--_error-focus-outline-color);--md-outlined-field-error-focus-supporting-text-color: var(--_error-focus-supporting-text-color);--md-outlined-field-error-focus-trailing-content-color: var(--_error-focus-trailing-icon-color);--md-outlined-field-error-hover-content-color: var(--_error-hover-input-text-color);--md-outlined-field-error-hover-label-text-color: var(--_error-hover-label-text-color);--md-outlined-field-error-hover-leading-content-color: var(--_error-hover-leading-icon-color);--md-outlined-field-error-hover-outline-color: var(--_error-hover-outline-color);--md-outlined-field-error-hover-supporting-text-color: var(--_error-hover-supporting-text-color);--md-outlined-field-error-hover-trailing-content-color: var(--_error-hover-trailing-icon-color);--md-outlined-field-error-label-text-color: var(--_error-label-text-color);--md-outlined-field-error-leading-content-color: var(--_error-leading-icon-color);--md-outlined-field-error-outline-color: var(--_error-outline-color);--md-outlined-field-error-supporting-text-color: var(--_error-supporting-text-color);--md-outlined-field-error-trailing-content-color: var(--_error-trailing-icon-color);--md-outlined-field-focus-content-color: var(--_focus-input-text-color);--md-outlined-field-focus-label-text-color: var(--_focus-label-text-color);--md-outlined-field-focus-leading-content-color: var(--_focus-leading-icon-color);--md-outlined-field-focus-outline-color: var(--_focus-outline-color);--md-outlined-field-focus-outline-width: var(--_focus-outline-width);--md-outlined-field-focus-supporting-text-color: var(--_focus-supporting-text-color);--md-outlined-field-focus-trailing-content-color: var(--_focus-trailing-icon-color);--md-outlined-field-hover-content-color: var(--_hover-input-text-color);--md-outlined-field-hover-label-text-color: var(--_hover-label-text-color);--md-outlined-field-hover-leading-content-color: var(--_hover-leading-icon-color);--md-outlined-field-hover-outline-color: var(--_hover-outline-color);--md-outlined-field-hover-outline-width: var(--_hover-outline-width);--md-outlined-field-hover-supporting-text-color: var(--_hover-supporting-text-color);--md-outlined-field-hover-trailing-content-color: var(--_hover-trailing-icon-color);--md-outlined-field-label-text-color: var(--_label-text-color);--md-outlined-field-label-text-font: var(--_label-text-font);--md-outlined-field-label-text-line-height: var(--_label-text-line-height);--md-outlined-field-label-text-populated-line-height: var(--_label-text-populated-line-height);--md-outlined-field-label-text-populated-size: var(--_label-text-populated-size);--md-outlined-field-label-text-size: var(--_label-text-size);--md-outlined-field-label-text-weight: var(--_label-text-weight);--md-outlined-field-leading-content-color: var(--_leading-icon-color);--md-outlined-field-leading-space: var(--_leading-space);--md-outlined-field-outline-color: var(--_outline-color);--md-outlined-field-outline-width: var(--_outline-width);--md-outlined-field-supporting-text-color: var(--_supporting-text-color);--md-outlined-field-supporting-text-font: var(--_supporting-text-font);--md-outlined-field-supporting-text-line-height: var(--_supporting-text-line-height);--md-outlined-field-supporting-text-size: var(--_supporting-text-size);--md-outlined-field-supporting-text-weight: var(--_supporting-text-weight);--md-outlined-field-top-space: var(--_top-space);--md-outlined-field-trailing-content-color: var(--_trailing-icon-color);--md-outlined-field-trailing-space: var(--_trailing-space)}/*# sourceMappingURL=outlined-styles.css.map */ +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * An outlined text field component + */ +class OutlinedTextField extends TextField { + constructor() { + super(...arguments); + this.fieldTag = i$1 `md-outlined-field`; + } +} + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * TODO(b/228525797): Add docs + * @final + * @suppress {visibility} + */ +let MdOutlinedTextField = class MdOutlinedTextField extends OutlinedTextField { + constructor() { + super(...arguments); + this.fieldTag = i$1 `md-outlined-field`; + } +}; +MdOutlinedTextField.styles = [styles$7, styles$5, styles$6]; +MdOutlinedTextField = __decorate([ + e$8('md-outlined-text-field') +], MdOutlinedTextField); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$4 = i$4 `@media(forced-colors: active){:host{--md-radio-disabled-selected-icon-color: GrayText;--md-radio-disabled-selected-icon-opacity: 1;--md-radio-disabled-unselected-icon-color: GrayText;--md-radio-disabled-unselected-icon-opacity: 1;--md-radio-selected-icon-color: CanvasText;--md-radio-selected-hover-icon-color: CanvasText;--md-radio-selected-focus-icon-color: CanvasText;--md-radio-selected-pressed-icon-color: CanvasText;--md-radio-icon-color: CanvasText;--md-radio-hover-icon-color: CanvasText;--md-radio-focus-icon-color: CanvasText;--md-radio-pressed-icon-color: CanvasText}}/*# sourceMappingURL=forced-colors-styles.css.map */ +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A `ReactiveController` that provides root node-scoped single selection for + * elements, similar to native `` selection. + * + * To use, elements should add the controller and call + * `selectionController.handleCheckedChange()` in a getter/setter. This must + * be synchronous to match native behavior. + * + * @example + * const CHECKED = Symbol('checked'); + * + * class MyToggle extends LitElement { + * get checked() { return this[CHECKED]; } + * set checked(checked: boolean) { + * const oldValue = this.checked; + * if (oldValue === checked) { + * return; + * } + * + * this[CHECKED] = checked; + * this.selectionController.handleCheckedChange(); + * this.requestUpdate('checked', oldValue); + * } + * + * [CHECKED] = false; + * + * private selectionController = new SingleSelectionController(this); + * + * constructor() { + * super(); + * this.addController(this.selectionController); + * } + * } + */ +class SingleSelectionController { + constructor(host) { + this.host = host; + this.focused = false; + this.root = null; + this.handleFocusIn = () => { + this.focused = true; + this.updateTabIndices(); + }; + this.handleFocusOut = () => { + this.focused = false; + this.updateTabIndices(); + }; + /** + * Handles arrow key events from the host. Using the arrow keys will + * select and check the next or previous sibling with the host's + * `name` attribute. + */ + this.handleKeyDown = (event) => { + const isDown = event.key === 'ArrowDown'; + const isUp = event.key === 'ArrowUp'; + const isLeft = event.key === 'ArrowLeft'; + const isRight = event.key === 'ArrowRight'; + // Ignore non-arrow keys + if (!isLeft && !isRight && !isDown && !isUp) { + return; + } + // Don't try to select another sibling if there aren't any. + const siblings = this.getNamedSiblings(); + if (!siblings.length) { + return; + } + // Prevent default interactions on the element for arrow keys, + // since this controller will introduce new behavior. + event.preventDefault(); + // Check if moving forwards or backwards + const isRtl = getComputedStyle(this.host).direction === 'rtl'; + const forwards = isRtl ? isLeft || isDown : isRight || isDown; + const hostIndex = siblings.indexOf(this.host); + let nextIndex = forwards ? hostIndex + 1 : hostIndex - 1; + // Search for the next sibling that is not disabled to select. + // If we return to the host index, there is nothing to select. + while (nextIndex !== hostIndex) { + if (nextIndex >= siblings.length) { + // Return to start if moving past the last item. + nextIndex = 0; + } + else if (nextIndex < 0) { + // Go to end if moving before the first item. + nextIndex = siblings.length - 1; + } + // Check if the next sibling is disabled. If so, + // move the index and continue searching. + const nextSibling = siblings[nextIndex]; + if (nextSibling.hasAttribute('disabled')) { + if (forwards) { + nextIndex++; + } + else { + nextIndex--; + } + continue; + } + // Uncheck and remove focusability from other siblings. + for (const sibling of siblings) { + if (sibling !== nextSibling) { + sibling.checked = false; + sibling.tabIndex = -1; + sibling.blur(); + } + } + // The next sibling should be checked, focused and dispatch a change event + nextSibling.checked = true; + nextSibling.tabIndex = 0; + nextSibling.focus(); + // Fire a change event since the change is triggered by a user action. + // This matches native behavior. + nextSibling.dispatchEvent(new Event('change', { bubbles: true })); + break; + } + }; + } + hostConnected() { + this.root = this.host.getRootNode(); + this.host.addEventListener('keydown', this.handleKeyDown); + this.host.addEventListener('focusin', this.handleFocusIn); + this.host.addEventListener('focusout', this.handleFocusOut); + if (this.host.checked) { + // Uncheck other siblings when attached if already checked. This mimics + // native behavior. + this.uncheckSiblings(); + } + // Update for the newly added host. + this.updateTabIndices(); + } + hostDisconnected() { + this.host.removeEventListener('keydown', this.handleKeyDown); + this.host.removeEventListener('focusin', this.handleFocusIn); + this.host.removeEventListener('focusout', this.handleFocusOut); + // Update for siblings that are still connected. + this.updateTabIndices(); + this.root = null; + } + /** + * Should be called whenever the host's `checked` property changes + * synchronously. + */ + handleCheckedChange() { + if (!this.host.checked) { + return; + } + this.uncheckSiblings(); + this.updateTabIndices(); + } + uncheckSiblings() { + for (const sibling of this.getNamedSiblings()) { + if (sibling !== this.host) { + sibling.checked = false; + } + } + } + /** + * Updates the `tabindex` of the host and its siblings. + */ + updateTabIndices() { + // There are three tabindex states for a group of elements: + // 1. If any are checked, that element is focusable. + const siblings = this.getNamedSiblings(); + const checkedSibling = siblings.find(sibling => sibling.checked); + // 2. If an element is focused, the others are no longer focusable. + if (checkedSibling || this.focused) { + const focusable = checkedSibling || this.host; + focusable.tabIndex = 0; + for (const sibling of siblings) { + if (sibling !== focusable) { + sibling.tabIndex = -1; + } + } + return; + } + // 3. If none are checked or focused, all are focusable. + for (const sibling of siblings) { + sibling.tabIndex = 0; + } + } + /** + * Retrieves all siblings in the host element's root with the same `name` + * attribute. + */ + getNamedSiblings() { + const name = this.host.getAttribute('name'); + if (!name || !this.root) { + return []; + } + return Array.from(this.root.querySelectorAll(`[name="${name}"]`)); + } +} + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +var _a; +const CHECKED = Symbol('checked'); +let maskId = 0; +/** + * A radio component. + */ +class Radio extends s$2 { + /** + * Whether or not the radio is selected. + */ + get checked() { + return this[CHECKED]; + } + set checked(checked) { + const wasChecked = this.checked; + if (wasChecked === checked) { + return; + } + this[CHECKED] = checked; + const state = String(checked); + this.internals.setFormValue(this.checked ? this.value : null, state); + this.requestUpdate('checked', wasChecked); + this.selectionController.handleCheckedChange(); + } + /** + * The HTML name to use in form submission. + */ + get name() { + return this.getAttribute('name') ?? ''; + } + set name(name) { + this.setAttribute('name', name); + } + /** + * The associated form element with which this element's value will submit. + */ + get form() { + return this.internals.form; + } + /** + * The labels this element is associated with. + */ + get labels() { + return this.internals.labels; + } + constructor() { + super(); + // Unique maskId is required because of a Safari bug that fail to persist + // reference to the mask. This should be removed once the bug is fixed. + this.maskId = `cutout${++maskId}`; + this[_a] = false; + /** + * Whether or not the radio is disabled. + */ + this.disabled = false; + /** + * The element value to use in form submission when checked. + */ + this.value = 'on'; + this.selectionController = new SingleSelectionController(this); + this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals()); + this.addController(this.selectionController); + { + this.internals.role = 'radio'; + this.addEventListener('click', this.handleClick.bind(this)); + this.addEventListener('keydown', this.handleKeydown.bind(this)); + } + } + render() { + const classes = { checked: this.checked }; + return x ` + + `; + } + updated() { + this.internals.ariaChecked = String(this.checked); + } + async handleClick(event) { + if (this.disabled) { + return; + } + // allow event to propagate to user code after a microtask. + await 0; + if (event.defaultPrevented) { + return; + } + if (isActivationClick(event)) { + this.focus(); + } + // Per spec, clicking on a radio input always selects it. + this.checked = true; + this.dispatchEvent(new Event('change', { bubbles: true })); + this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true })); + } + async handleKeydown(event) { + // allow event to propagate to user code after a microtask. + await 0; + if (event.key !== ' ' || event.defaultPrevented) { + return; + } + this.click(); + } + /** @private */ + formResetCallback() { + // The checked property does not reflect, so the original attribute set by + // the user is used to determine the default value. + this.checked = this.hasAttribute('checked'); + } + /** @private */ + formStateRestoreCallback(state) { + this.checked = state === 'true'; + } +} +_a = CHECKED; +(() => { + setupHostAria(Radio); +})(); +/** @nocollapse */ +Radio.formAssociated = true; +__decorate([ + n$7({ type: Boolean }) +], Radio.prototype, "checked", null); +__decorate([ + n$7({ type: Boolean, reflect: true }) +], Radio.prototype, "disabled", void 0); +__decorate([ + n$7() +], Radio.prototype, "value", void 0); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$3 = i$4 `:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_focus-icon-color: var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex;height:var(--_icon-size);outline:none;position:relative;vertical-align:top;width:var(--_icon-size);-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_icon-size))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}input{appearance:none;height:48px;margin:0;position:absolute;width:48px}:host([touch-target=none]) input{width:100%;height:100%}md-ripple{border-radius:50%;height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.icon{fill:var(--_icon-color);inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--_selected-icon-color)}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_hover-icon-color)}:host(:focus-within) .icon{fill:var(--_focus-icon-color)}:host(:active) .icon{fill:var(--_pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}/*# sourceMappingURL=radio-styles.css.map */ +`; + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Radio buttons allow users to select one option from a set. + * + * @description + * Radio buttons are the recommended way to allow users to make a single + * selection from a list of options. + * + * Only one radio button can be selected at a time. + * + * Use radio buttons to: + * - Select a single option from a set + * - Expose all available options + * + * @final + * @suppress {visibility} + */ +let MdRadio = class MdRadio extends Radio { +}; +MdRadio.styles = [styles$3, styles$4]; +MdRadio = __decorate([ + e$8('md-radio') +], MdRadio); + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A filled tonal button component. + */ +class FilledTonalButton extends Button { + renderElevation() { + return x ``; + } +} + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$2 = i$4 `:host{--_container-color: var(--md-filled-tonal-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-elevation: var(--md-filled-tonal-button-container-elevation, 0);--_container-height: var(--md-filled-tonal-button-container-height, 40px);--_container-shadow-color: var(--md-filled-tonal-button-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-tonal-button-container-shape, 9999px);--_disabled-container-color: var(--md-filled-tonal-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-elevation: var(--md-filled-tonal-button-disabled-container-elevation, 0);--_disabled-container-opacity: var(--md-filled-tonal-button-disabled-container-opacity, 0.12);--_disabled-label-text-color: var(--md-filled-tonal-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-tonal-button-disabled-label-text-opacity, 0.38);--_focus-container-elevation: var(--md-filled-tonal-button-focus-container-elevation, 0);--_focus-label-text-color: var(--md-filled-tonal-button-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-container-elevation: var(--md-filled-tonal-button-hover-container-elevation, 1);--_hover-label-text-color: var(--md-filled-tonal-button-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filled-tonal-button-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_label-text-font: var(--md-filled-tonal-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filled-tonal-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filled-tonal-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filled-tonal-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-container-elevation: var(--md-filled-tonal-button-pressed-container-elevation, 0);--_pressed-label-text-color: var(--md-filled-tonal-button-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-color: var(--md-filled-tonal-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-button-icon-size, 18px);--_pressed-icon-color: var(--md-filled-tonal-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_leading-space: var(--md-filled-tonal-button-leading-space, 24px);--_trailing-space: var(--md-filled-tonal-button-trailing-space, 24px);--_with-leading-icon-leading-space: var(--md-filled-tonal-button-with-leading-icon-leading-space, 16px);--_with-leading-icon-trailing-space: var(--md-filled-tonal-button-with-leading-icon-trailing-space, 24px);--_with-trailing-icon-leading-space: var(--md-filled-tonal-button-with-trailing-icon-leading-space, 24px);--_with-trailing-icon-trailing-space: var(--md-filled-tonal-button-with-trailing-icon-trailing-space, 16px);--_container-shape-start-start: var( --md-filled-tonal-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-filled-tonal-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-filled-tonal-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-filled-tonal-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=filled-tonal-styles.css.map */ +`; + +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Buttons help people take action, such as sending an email, sharing a + * document, or liking a comment. + * + * @description + * __Emphasis:__ Medium emphasis – For important actions that don’t distract + * from other onscreen elements. + * + * __Rationale:__ Filled tonal buttons have a lighter background color and + * darker label color, making them less visually prominent than a regular, + * filled button. They’re still used for final or unblocking actions in a flow, + * but do so with less emphasis. + * + * __Example usages:__ + * - Save + * - Confirm + * - Done + * + * @final + * @suppress {visibility} + */ +let MdFilledTonalButton = class MdFilledTonalButton extends FilledTonalButton { +}; +MdFilledTonalButton.styles = [styles$j, styles$k, styles$2]; +MdFilledTonalButton = __decorate([ + e$8('md-filled-tonal-button') +], MdFilledTonalButton); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A divider component. + */ +class Divider extends s$2 { + constructor() { + super(...arguments); + /** + * Indents the divider with equal padding on both sides. + */ + this.inset = false; + /** + * Indents the divider with padding on the leading side. + */ + this.insetStart = false; + /** + * Indents the divider with padding on the trailing side. + */ + this.insetEnd = false; + } +} +__decorate([ + n$7({ type: Boolean, reflect: true }) +], Divider.prototype, "inset", void 0); +__decorate([ + n$7({ type: Boolean, reflect: true, attribute: 'inset-start' }) +], Divider.prototype, "insetStart", void 0); +__decorate([ + n$7({ type: Boolean, reflect: true, attribute: 'inset-end' }) +], Divider.prototype, "insetEnd", void 0); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles$1 = i$4 `:host{--_color: var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));--_thickness: var(--md-divider-thickness, 1px);box-sizing:border-box;color:var(--_color);display:flex;height:var(--_thickness);width:100%}:host([inset]),:host([inset-start]){padding-inline-start:16px}:host([inset]),:host([inset-end]){padding-inline-end:16px}:host::before{background:currentColor;content:"";height:100%;width:100%}@media(forced-colors: active){:host::before{background:CanvasText}}/*# sourceMappingURL=divider-styles.css.map */ +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary A divider is a thin line that groups content in lists and + * containers. + * + * @description Dividers can reinforce tapability, such as when used to separate + * list items or define tappable regions in an accordion. + * + * @final + * @suppress {visibility} + */ +let MdDivider = class MdDivider extends Divider { +}; +MdDivider.styles = [styles$1]; +MdDivider = __decorate([ + e$8('md-divider') +], MdDivider); + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * The default dialog open animation. + */ +const DIALOG_DEFAULT_OPEN_ANIMATION = { + dialog: [ + [ + // Dialog slide down + [{ 'transform': 'translateY(-50px)' }, { 'transform': 'translateY(0)' }], + { duration: 500, easing: EASING.EMPHASIZED } + ], + ], + scrim: [ + [ + // Scrim fade in + [{ 'opacity': 0 }, { 'opacity': 0.32 }], { duration: 500, easing: 'linear' } + ], + ], + container: [ + [ + // Container fade in + [{ 'opacity': 0 }, { 'opacity': 1 }], + { duration: 50, easing: 'linear', pseudoElement: '::before' } + ], + [ + // Container grow + // Note: current spec says to grow from 0dp->100% and shrink from + // 100%->35%. We change this to 35%->100% to simplify the animation that + // is supposed to clip content as it grows. From 0dp it's possible to see + // text/actions appear before the container has fully grown. + [{ 'height': '35%' }, { 'height': '100%' }], + { duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before' }, + ], + ], + headline: [ + [ + // Headline fade in + [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }], + { duration: 250, easing: 'linear', fill: 'forwards' } + ], + ], + content: [ + [ + // Content fade in + [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.2 }, { 'opacity': 1 }], + { duration: 250, easing: 'linear', fill: 'forwards' } + ], + ], + actions: [ + [ + // Actions fade in + [{ 'opacity': 0 }, { 'opacity': 0, offset: 0.5 }, { 'opacity': 1 }], + { duration: 300, easing: 'linear', fill: 'forwards' } + ], + ], +}; +/** + * The default dialog close animation. + */ +const DIALOG_DEFAULT_CLOSE_ANIMATION = { + dialog: [ + [ + // Dialog slide up + [{ 'transform': 'translateY(0)' }, { 'transform': 'translateY(-50px)' }], + { duration: 150, easing: EASING.EMPHASIZED_ACCELERATE } + ], + ], + scrim: [ + [ + // Scrim fade out + [{ 'opacity': 0.32 }, { 'opacity': 0 }], { duration: 150, easing: 'linear' } + ], + ], + container: [ + [ + // Container shrink + [{ 'height': '100%' }, { 'height': '35%' }], + { + duration: 150, + easing: EASING.EMPHASIZED_ACCELERATE, + pseudoElement: '::before', + }, + ], + [ + // Container fade out + [{ 'opacity': '1' }, { 'opacity': '0' }], + { delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before' }, + ] + ], + headline: [ + [ + // Headline fade out + [{ 'opacity': 1 }, { 'opacity': 0 }], + { duration: 100, easing: 'linear', fill: 'forwards' } + ], + ], + content: [ + [ + // Content fade out + [{ 'opacity': 1 }, { 'opacity': 0 }], + { duration: 100, easing: 'linear', fill: 'forwards' } + ], + ], + actions: [ + [ + // Actions fade out + [{ 'opacity': 1 }, { 'opacity': 0 }], + { duration: 100, easing: 'linear', fill: 'forwards' } + ], + ], +}; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * A dialog component. + * + * @fires open Dispatched when the dialog is opening before any animations. + * @fires opened Dispatched when the dialog has opened after any animations. + * @fires close Dispatched when the dialog is closing before any animations. + * @fires closed Dispatched when the dialog has closed after any animations. + * @fires cancel Dispatched when the dialog has been canceled by clicking on the + * scrim or pressing Escape. + */ +class Dialog extends s$2 { + /** + * Opens the dialog when set to `true` and closes it when set to `false`. + */ + get open() { + return this.isOpen; + } + set open(open) { + if (open === this.isOpen) { + return; + } + this.isOpen = open; + if (open) { + this.setAttribute('open', ''); + this.show(); + } + else { + this.removeAttribute('open'); + this.close(); + } + } + constructor() { + super(); + /** + * Gets or sets the dialog's return value, usually to indicate which button + * a user pressed to close it. + * + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue + */ + this.returnValue = ''; + /** + * Gets the opening animation for a dialog. Set to a new function to customize + * the animation. + */ + this.getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION; + /** + * Gets the closing animation for a dialog. Set to a new function to customize + * the animation. + */ + this.getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION; + this.isOpen = false; + this.isOpening = false; + this.isConnectedPromise = this.getIsConnectedPromise(); + this.isAtScrollTop = false; + this.isAtScrollBottom = false; + this.nextClickIsFromContent = false; + // Dialogs should not be SSR'd while open, so we can just use runtime checks. + this.hasHeadline = false; + this.hasActions = false; + this.hasIcon = false; + { + this.addEventListener('submit', this.handleSubmit); + } + } + /** + * Opens the dialog and fires a cancelable `open` event. After a dialog's + * animation, an `opened` event is fired. + * + * Add an `autocomplete` attribute to a child of the dialog that should + * receive focus after opening. + * + * @return A Promise that resolves after the animation is finished and the + * `opened` event was fired. + */ + async show() { + this.isOpening = true; + // Dialogs can be opened before being attached to the DOM, so we need to + // wait until we're connected before calling `showModal()`. + await this.isConnectedPromise; + await this.updateComplete; + const dialog = this.dialog; + // Check if already opened or if `dialog.close()` was called while awaiting. + if (dialog.open || !this.isOpening) { + this.isOpening = false; + return; + } + const preventOpen = !this.dispatchEvent(new Event('open', { cancelable: true })); + if (preventOpen) { + this.open = false; + return; + } + // All Material dialogs are modal. + dialog.showModal(); + this.open = true; + // Reset scroll position if re-opening a dialog with the same content. + if (this.scroller) { + this.scroller.scrollTop = 0; + } + // Native modal dialogs ignore autofocus and instead force focus to the + // first focusable child. Override this behavior if there is a child with + // an autofocus attribute. + this.querySelector('[autofocus]')?.focus(); + await this.animateDialog(this.getOpenAnimation()); + this.dispatchEvent(new Event('opened')); + this.isOpening = false; + } + /** + * Closes the dialog and fires a cancelable `close` event. After a dialog's + * animation, a `closed` event is fired. + * + * @param returnValue A return value usually indicating which button was used + * to close a dialog. If a dialog is canceled by clicking the scrim or + * pressing Escape, it will not change the return value after closing. + * @return A Promise that resolves after the animation is finished and the + * `closed` event was fired. + */ + async close(returnValue = this.returnValue) { + this.isOpening = false; + if (!this.isConnected) { + // Disconnected dialogs do not fire close events or animate. + this.open = false; + return; + } + await this.updateComplete; + const dialog = this.dialog; + // Check if already closed or if `dialog.show()` was called while awaiting. + if (!dialog.open || this.isOpening) { + this.open = false; + return; + } + const prevReturnValue = this.returnValue; + this.returnValue = returnValue; + const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true })); + if (preventClose) { + this.returnValue = prevReturnValue; + return; + } + await this.animateDialog(this.getCloseAnimation()); + dialog.close(returnValue); + this.open = false; + this.dispatchEvent(new Event('closed')); + } + connectedCallback() { + super.connectedCallback(); + this.isConnectedPromiseResolve(); + } + disconnectedCallback() { + super.disconnectedCallback(); + this.isConnectedPromise = this.getIsConnectedPromise(); + } + render() { + const scrollable = this.open && !(this.isAtScrollTop && this.isAtScrollBottom); + const classes = { + 'has-headline': this.hasHeadline, + 'has-actions': this.hasActions, + 'has-icon': this.hasIcon, + 'scrollable': scrollable, + 'show-top-divider': scrollable && !this.isAtScrollTop, + 'show-bottom-divider': scrollable && !this.isAtScrollBottom, + }; + const { ariaLabel } = this; + return x ` +
+ +
+
+ +

+ +

+ +
+
+
+
+ +
+
+
+
+ + +
+
+ + `; + } + firstUpdated() { + this.intersectionObserver = new IntersectionObserver(entries => { + for (const entry of entries) { + this.handleAnchorIntersection(entry); + } + }, { root: this.scroller }); + this.intersectionObserver.observe(this.topAnchor); + this.intersectionObserver.observe(this.bottomAnchor); + } + handleDialogClick() { + if (this.nextClickIsFromContent) { + // Avoid doing a layout calculation below if we know the click came from + // content. + this.nextClickIsFromContent = false; + return; + } + // Click originated on the backdrop. Native ``s will not cancel, + // but Material dialogs do. + const preventDefault = !this.dispatchEvent(new Event('cancel', { cancelable: true })); + if (preventDefault) { + return; + } + this.close(); + } + handleContentClick() { + this.nextClickIsFromContent = true; + } + handleSubmit(event) { + const form = event.target; + const { submitter } = event; + if (form.method !== 'dialog' || !submitter) { + return; + } + // Close reason is the submitter's value attribute, or the dialog's + // `returnValue` if there is no attribute. + this.close(submitter.getAttribute('value') ?? this.returnValue); + } + handleCancel(event) { + if (event.target !== this.dialog) { + // Ignore any cancel events dispatched by content. + return; + } + const preventDefault = !redispatchEvent(this, event); + // We always prevent default on the original dialog event since we'll + // animate closing it before it actually closes. + event.preventDefault(); + if (preventDefault) { + return; + } + this.close(); + } + async animateDialog(animation) { + const { dialog, scrim, container, headline, content, actions } = this; + if (!dialog || !scrim || !container || !headline || !content || !actions) { + return; + } + const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate } = animation; + const elementAndAnimation = [ + [dialog, dialogAnimate ?? []], [scrim, scrimAnimate ?? []], + [container, containerAnimate ?? []], [headline, headlineAnimate ?? []], + [content, contentAnimate ?? []], [actions, actionsAnimate ?? []] + ]; + const animations = []; + for (const [element, animation] of elementAndAnimation) { + for (const animateArgs of animation) { + animations.push(element.animate(...animateArgs)); + } + } + await Promise.all(animations.map(animation => animation.finished)); + } + handleHeadlineChange(event) { + const slot = event.target; + this.hasHeadline = slot.assignedElements().length > 0; + } + handleActionsChange(event) { + const slot = event.target; + this.hasActions = slot.assignedElements().length > 0; + } + handleIconChange(event) { + const slot = event.target; + this.hasIcon = slot.assignedElements().length > 0; + } + handleAnchorIntersection(entry) { + const { target, isIntersecting } = entry; + if (target === this.topAnchor) { + this.isAtScrollTop = isIntersecting; + } + if (target === this.bottomAnchor) { + this.isAtScrollBottom = isIntersecting; + } + } + getIsConnectedPromise() { + return new Promise(resolve => { + this.isConnectedPromiseResolve = resolve; + }); + } +} +(() => { + requestUpdateOnAriaChange(Dialog); +})(); +/** @nocollapse */ +Dialog.shadowRootOptions = { + ...s$2.shadowRootOptions, + delegatesFocus: true +}; +__decorate([ + n$7({ type: Boolean }) +], Dialog.prototype, "open", null); +__decorate([ + n$7({ attribute: false }) +], Dialog.prototype, "returnValue", void 0); +__decorate([ + n$7() +], Dialog.prototype, "type", void 0); +__decorate([ + i$5('dialog') +], Dialog.prototype, "dialog", void 0); +__decorate([ + i$5('.scrim') +], Dialog.prototype, "scrim", void 0); +__decorate([ + i$5('.container') +], Dialog.prototype, "container", void 0); +__decorate([ + i$5('.headline') +], Dialog.prototype, "headline", void 0); +__decorate([ + i$5('.content') +], Dialog.prototype, "content", void 0); +__decorate([ + i$5('.actions') +], Dialog.prototype, "actions", void 0); +__decorate([ + t$3() +], Dialog.prototype, "isAtScrollTop", void 0); +__decorate([ + t$3() +], Dialog.prototype, "isAtScrollBottom", void 0); +__decorate([ + i$5('.scroller') +], Dialog.prototype, "scroller", void 0); +__decorate([ + i$5('.top.anchor') +], Dialog.prototype, "topAnchor", void 0); +__decorate([ + i$5('.bottom.anchor') +], Dialog.prototype, "bottomAnchor", void 0); +__decorate([ + t$3() +], Dialog.prototype, "hasHeadline", void 0); +__decorate([ + t$3() +], Dialog.prototype, "hasActions", void 0); +__decorate([ + t$3() +], Dialog.prototype, "hasIcon", void 0); + +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +const styles = i$4 `:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);padding-top:24px;height:var(--_icon-size);width:var(--_icon-size)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--_supporting-text-color);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}/*# sourceMappingURL=dialog-styles.css.map */ +`; + +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ +/** + * @summary Dialogs can require an action, communicate information, or help + * users accomplish a task. There are two types of dialogs: basic and + * full-screen. + * + * @description + * A dialog is a modal window that appears in front of app content to provide + * critical information or ask for a decision. Dialogs disable all app + * functionality when they appear, and remain on screen until confirmed, + * dismissed, or a required action has been taken. + * + * Dialogs are purposefully interruptive, so they should be used sparingly. + * A less disruptive alternative is to use a menu, which provides options + * without interrupting a user’s experience. + * + * On mobile devices only, complex dialogs should be displayed fullscreen. + * + * __Example usages:__ + * - Common use cases for basic dialogs include alerts, quick selection, and + * confirmation. + * - More complex dialogs may contain actions that require a series of tasks + * to complete. One example is creating a calendar entry with the event title, + * date, location, and time. + */ +let MdDialog = class MdDialog extends Dialog { +}; +MdDialog.styles = [styles]; +MdDialog = __decorate([ + e$8('md-dialog') +], MdDialog);