diff --git a/Dockerfile b/Dockerfile index e4a6b323773930e448112d59910fab3cb9a78d66..cf82104f3d11b8a6390f292de6397bee620cba39 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,9 +1,10 @@ -# syntax=docker/dockerfile:1 -FROM python:3 -RUN ls /usr/src/ -RUN cd /usr/src/ -RUN ls +FROM python:3.9 + +WORKDIR /app + COPY requirements.txt ./ RUN pip install --no-cache-dir -r requirements.txt -CMD [ "python", "./api.py" ] \ No newline at end of file +COPY ./ /app + +CMD [ "python", "api.py" ] \ No newline at end of file diff --git a/api.py b/api.py new file mode 100644 index 0000000000000000000000000000000000000000..97e391989dde98b9a193f85e93a91a0bd44dc3a0 --- /dev/null +++ b/api.py @@ -0,0 +1,81 @@ +from pymongo import MongoClient +from pymongo.server_api import ServerApi +from flask import Flask, request, session, render_template +import jsonpickle + +app = Flask(__name__) + +URI = "mongodb+srv://Client:PY@database.s3xgmax.mongodb.net/?retryWrites=true&w=majority" + +# Create a new client and connect to the server +client = MongoClient(URI, server_api=ServerApi("1")) + + +def get(sad): + db = client["Auth"] + mycol = db["Data"] + myquery = {"email": sad} + mydoc = mycol.find(myquery) + + sentdata = "lolno" + for x in mydoc: + sentdata = x + lastdata = str(sentdata) # Key to check for in the BSON document + key_to_check = 'password' + print(lastdata) + # Check if the key exists in the BSON document + if key_to_check in sentdata: + print( + f"key exists with the value '{sentdata[key_to_check]}'.") + return jsonpickle.encode(lastdata) + return "0" + + +# Send a ping to confirm a successful connection +try: + client.admin.command("ping") + print("Pinged your deployment. You successfully connected to MongoDB!") + + @app.route("/") + def webindex(): + return render_template("index.html") + + @app.route('/session', methods=['GET', 'POST']) + def websession(): + if request.method == 'POST': + # Set session + session['username'] = 'trust' + session.permanent = True # Long-term validity, one month + return "done" + else: + return "
" \ + "
" \ + "
" + + @app.route('/add', methods=['GET', 'POST']) + def webadd(): + if request.method == 'POST': + db = client["Auth"] + mycol = db["Data"] + mydict = {"email": request.values['email'], + "password": request.values['password']} + mycol.insert_one(mydict) + return "done" + return "
" \ + "" \ + "
" \ + "
" + + @app.route('/get', methods=['GET', 'POST']) + def webget(): + if request.method == 'POST': + return get(request.values['email']) + return "
" \ + "
" \ + "
" + + if __name__ == "__main__": + app.run(debug=True) + +except Exception as e: + print(e) diff --git a/pyvenv.cfg b/pyvenv.cfg new file mode 100644 index 0000000000000000000000000000000000000000..5ca024bdb810dc88a72a7eff38b48396d80dcc3c --- /dev/null +++ b/pyvenv.cfg @@ -0,0 +1,5 @@ +home = /usr/local/bin +include-system-site-packages = false +version = 3.12.0 +executable = /usr/local/bin/python3.12 +command = /usr/local/bin/python -m venv /workspace/env diff --git a/static/.codesandbox/Dockerfile b/static/.codesandbox/Dockerfile new file mode 100644 index 0000000000000000000000000000000000000000..d4e8dce9bd4337c9b560c3297eb320b1c2413058 --- /dev/null +++ b/static/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:20-bullseye diff --git a/static/.codesandbox/icon.png b/static/.codesandbox/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..a600a657ce1767146fdefbd1d7534feb31f007b1 Binary files /dev/null and b/static/.codesandbox/icon.png differ diff --git a/static/.codesandbox/tasks.json b/static/.codesandbox/tasks.json new file mode 100644 index 0000000000000000000000000000000000000000..078756b349dc2ae10876b27e8e1382b311227ffe --- /dev/null +++ b/static/.codesandbox/tasks.json @@ -0,0 +1,29 @@ +{ + // These tasks will run in order when initializing your CodeSandbox project. + "setupTasks": [ + { + "name": "Install Dependencies", + "command": "yarn install" + } + ], + + // These tasks can be run from CodeSandbox. Running one will open a log in the app. + "tasks": { + "start": { + "name": "start", + "command": "rm bundle.js | npx rollup -p @rollup/plugin-node-resolve index.js -o bundle.js | npx http-server", + "runAtStart": true, + "preview": { + "port": 8081 + } + }, + "build": { + "name": "build", + "command": "rm bundle.js | npx rollup -p @rollup/plugin-node-resolve index.js -o bundle.js | npx http-server", + "runAtStart": false, + "preview": { + "port": 8080 + } + } + } +} diff --git a/static/.codesandbox/template.json b/static/.codesandbox/template.json new file mode 100644 index 0000000000000000000000000000000000000000..0c6ec3f151d1b37629feb8fc7fed60d2c213ea0d --- /dev/null +++ b/static/.codesandbox/template.json @@ -0,0 +1,10 @@ +{ + "title": "Node.js", + "description": "The official Node.js template by the CodeSandbox team", + "iconUrl": "https://github.com/codesandbox/sandbox-templates/blob/main/node/.codesandbox/icon.png?raw=true", + "tags": [ + "node", + "javascript" + ], + "published": true +} \ No newline at end of file diff --git a/static/.gitignore b/static/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..b512c09d476623ff4bf8d0d63c29b784925dbdf8 --- /dev/null +++ b/static/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/static/ProductSans-Black.woff2 b/static/ProductSans-Black.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..40e1fd6a54137a6783f9e14bcb17d759f797f75a Binary files /dev/null and b/static/ProductSans-Black.woff2 differ diff --git a/static/ProductSans-Bold.woff2 b/static/ProductSans-Bold.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..1a651b132db49bd9a37bd40d36e382be029818a6 Binary files /dev/null and b/static/ProductSans-Bold.woff2 differ diff --git a/static/ProductSans-Light.woff2 b/static/ProductSans-Light.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..eeb744f2b84be07c9e6b058bb22791ed47bccdec Binary files /dev/null and b/static/ProductSans-Light.woff2 differ diff --git a/static/ProductSans-Medium.woff2 b/static/ProductSans-Medium.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..217dc7386e1bed05fbb9eacca513c69f14e5a5c5 Binary files /dev/null and b/static/ProductSans-Medium.woff2 differ diff --git a/static/ProductSans-Regular.woff2 b/static/ProductSans-Regular.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..46ca661f5197a43ce85616a5ca3a6313fbd7e893 Binary files /dev/null and b/static/ProductSans-Regular.woff2 differ diff --git a/static/ProductSans-Thin.woff2 b/static/ProductSans-Thin.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..7f336f3789535cf34bb15a65fae93af61ab7ce90 Binary files /dev/null and b/static/ProductSans-Thin.woff2 differ diff --git a/static/README.md b/static/README.md new file mode 100644 index 0000000000000000000000000000000000000000..540b0499e81deac70d5a55187dcb3663d245a642 --- /dev/null +++ b/static/README.md @@ -0,0 +1,10 @@ +# Node.js template + +This is a Node.js project. + +Add your [configuration](https://codesandbox.io/docs/projects/learn/setting-up/tasks) to optimize it for [CodeSandbox](https://codesandbox.io/p/dashboard). + +## Resources + +- [CodeSandbox — Docs](https://codesandbox.io/docs/learn) +- [CodeSandbox — Discord](https://discord.gg/Ggarp3pX5H) diff --git a/static/bundle.js b/static/bundle.js new file mode 100644 index 0000000000000000000000000000000000000000..ed5eb742f500adb9046181b859202ebe9889fa22 --- /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); diff --git a/static/colors.module.css b/static/colors.module.css new file mode 100644 index 0000000000000000000000000000000000000000..dc2eb492634309dbc67c098e703b94d74d535b63 --- /dev/null +++ b/static/colors.module.css @@ -0,0 +1,294 @@ +.primary { + background-color: var(--md-sys-color-primary); +} +.primary-text { + color: var(--md-sys-color-primary); +} +.on-primary { + background-color: var(--md-sys-color-on-primary); +} +.on-primary-text { + color: var(--md-sys-color-on-primary); +} +.primary-container { + background-color: var(--md-sys-color-primary-container); +} +.primary-container-text { + color: var(--md-sys-color-primary-container); +} +.on-primary-container { + background-color: var(--md-sys-color-on-primary-container); +} +.on-primary-container-text { + color: var(--md-sys-color-on-primary-container); +} +.primary-fixed { + background-color: var(--md-sys-color-primary-fixed); +} +.primary-fixed-text { + color: var(--md-sys-color-primary-fixed); +} +.on-primary-fixed { + background-color: var(--md-sys-color-on-primary-fixed); +} +.on-primary-fixed-text { + color: var(--md-sys-color-on-primary-fixed); +} +.primary-fixed-dim { + background-color: var(--md-sys-color-primary-fixed-dim); +} +.primary-fixed-dim-text { + color: var(--md-sys-color-primary-fixed-dim); +} +.on-primary-fixed-variant { + background-color: var(--md-sys-color-on-primary-fixed-variant); +} +.on-primary-fixed-variant-text { + color: var(--md-sys-color-on-primary-fixed-variant); +} +.secondary { + background-color: var(--md-sys-color-secondary); +} +.secondary-text { + color: var(--md-sys-color-secondary); +} +.on-secondary { + background-color: var(--md-sys-color-on-secondary); +} +.on-secondary-text { + color: var(--md-sys-color-on-secondary); +} +.secondary-container { + background-color: var(--md-sys-color-secondary-container); +} +.secondary-container-text { + color: var(--md-sys-color-secondary-container); +} +.on-secondary-container { + background-color: var(--md-sys-color-on-secondary-container); +} +.on-secondary-container-text { + color: var(--md-sys-color-on-secondary-container); +} +.secondary-fixed { + background-color: var(--md-sys-color-secondary-fixed); +} +.secondary-fixed-text { + color: var(--md-sys-color-secondary-fixed); +} +.on-secondary-fixed { + background-color: var(--md-sys-color-on-secondary-fixed); +} +.on-secondary-fixed-text { + color: var(--md-sys-color-on-secondary-fixed); +} +.secondary-fixed-dim { + background-color: var(--md-sys-color-secondary-fixed-dim); +} +.secondary-fixed-dim-text { + color: var(--md-sys-color-secondary-fixed-dim); +} +.on-secondary-fixed-variant { + background-color: var(--md-sys-color-on-secondary-fixed-variant); +} +.on-secondary-fixed-variant-text { + color: var(--md-sys-color-on-secondary-fixed-variant); +} +.tertiary { + background-color: var(--md-sys-color-tertiary); +} +.tertiary-text { + color: var(--md-sys-color-tertiary); +} +.on-tertiary { + background-color: var(--md-sys-color-on-tertiary); +} +.on-tertiary-text { + color: var(--md-sys-color-on-tertiary); +} +.tertiary-container { + background-color: var(--md-sys-color-tertiary-container); +} +.tertiary-container-text { + color: var(--md-sys-color-tertiary-container); +} +.on-tertiary-container { + background-color: var(--md-sys-color-on-tertiary-container); +} +.on-tertiary-container-text { + color: var(--md-sys-color-on-tertiary-container); +} +.tertiary-fixed { + background-color: var(--md-sys-color-tertiary-fixed); +} +.tertiary-fixed-text { + color: var(--md-sys-color-tertiary-fixed); +} +.on-tertiary-fixed { + background-color: var(--md-sys-color-on-tertiary-fixed); +} +.on-tertiary-fixed-text { + color: var(--md-sys-color-on-tertiary-fixed); +} +.tertiary-fixed-dim { + background-color: var(--md-sys-color-tertiary-fixed-dim); +} +.tertiary-fixed-dim-text { + color: var(--md-sys-color-tertiary-fixed-dim); +} +.on-tertiary-fixed-variant { + background-color: var(--md-sys-color-on-tertiary-fixed-variant); +} +.on-tertiary-fixed-variant-text { + color: var(--md-sys-color-on-tertiary-fixed-variant); +} +.error { + background-color: var(--md-sys-color-error); +} +.error-text { + color: var(--md-sys-color-error); +} +.on-error { + background-color: var(--md-sys-color-on-error); +} +.on-error-text { + color: var(--md-sys-color-on-error); +} +.error-container { + background-color: var(--md-sys-color-error-container); +} +.error-container-text { + color: var(--md-sys-color-error-container); +} +.on-error-container { + background-color: var(--md-sys-color-on-error-container); +} +.on-error-container-text { + color: var(--md-sys-color-on-error-container); +} +.outline { + background-color: var(--md-sys-color-outline); +} +.outline-text { + color: var(--md-sys-color-outline); +} +.background { + background-color: var(--md-sys-color-background); +} +.background-text { + color: var(--md-sys-color-background); +} +.on-background { + background-color: var(--md-sys-color-on-background); +} +.on-background-text { + color: var(--md-sys-color-on-background); +} +.surface { + background-color: var(--md-sys-color-surface); +} +.surface-text { + color: var(--md-sys-color-surface); +} +.on-surface { + background-color: var(--md-sys-color-on-surface); +} +.on-surface-text { + color: var(--md-sys-color-on-surface); +} +.surface-variant { + background-color: var(--md-sys-color-surface-variant); +} +.surface-variant-text { + color: var(--md-sys-color-surface-variant); +} +.on-surface-variant { + background-color: var(--md-sys-color-on-surface-variant); +} +.on-surface-variant-text { + color: var(--md-sys-color-on-surface-variant); +} +.inverse-surface { + background-color: var(--md-sys-color-inverse-surface); +} +.inverse-surface-text { + color: var(--md-sys-color-inverse-surface); +} +.inverse-on-surface { + background-color: var(--md-sys-color-inverse-on-surface); +} +.inverse-on-surface-text { + color: var(--md-sys-color-inverse-on-surface); +} +.inverse-primary { + background-color: var(--md-sys-color-inverse-primary); +} +.inverse-primary-text { + color: var(--md-sys-color-inverse-primary); +} +.shadow { + background-color: var(--md-sys-color-shadow); +} +.shadow-text { + color: var(--md-sys-color-shadow); +} +.surface-tint { + background-color: var(--md-sys-color-surface-tint); +} +.surface-tint-text { + color: var(--md-sys-color-surface-tint); +} +.outline-variant { + background-color: var(--md-sys-color-outline-variant); +} +.outline-variant-text { + color: var(--md-sys-color-outline-variant); +} +.scrim { + background-color: var(--md-sys-color-scrim); +} +.scrim-text { + color: var(--md-sys-color-scrim); +} +.surface-container-highest { + background-color: var(--md-sys-color-surface-container-highest); +} +.surface-container-highest-text { + color: var(--md-sys-color-surface-container-highest); +} +.surface-container-high { + background-color: var(--md-sys-color-surface-container-high); +} +.surface-container-high-text { + color: var(--md-sys-color-surface-container-high); +} +.surface-container { + background-color: var(--md-sys-color-surface-container); +} +.surface-container-text { + color: var(--md-sys-color-surface-container); +} +.surface-container-low { + background-color: var(--md-sys-color-surface-container-low); +} +.surface-container-low-text { + color: var(--md-sys-color-surface-container-low); +} +.surface-container-lowest { + background-color: var(--md-sys-color-surface-container-lowest); +} +.surface-container-lowest-text { + color: var(--md-sys-color-surface-container-lowest); +} +.surface-bright { + background-color: var(--md-sys-color-surface-bright); +} +.surface-bright-text { + color: var(--md-sys-color-surface-bright); +} +.surface-dim { + background-color: var(--md-sys-color-surface-dim); +} +.surface-dim-text { + color: var(--md-sys-color-surface-dim); +} diff --git a/static/fonts.css b/static/fonts.css new file mode 100644 index 0000000000000000000000000000000000000000..29e5badbcc97dd34030f73614e064b6fbd8d4192 --- /dev/null +++ b/static/fonts.css @@ -0,0 +1,36 @@ +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Thin.woff2") format("woff2"); + font-weight: 100; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Black.woff2") format("woff2"); + font-weight: 900; + font-style: normal; +} diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000000000000000000000000000000000000..794667e46ec3eb4be1b3a7f2b727afd14d97a760 --- /dev/null +++ b/static/index.html @@ -0,0 +1,97 @@ + + + + + + MD3 + + +
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+
Don't have an account yet? Sign Up"
+
+ Reset + Submit +
+
+
+
+ + diff --git a/static/index.js b/static/index.js new file mode 100644 index 0000000000000000000000000000000000000000..81d00836394d24dec6fd489157dfba546104865a --- /dev/null +++ b/static/index.js @@ -0,0 +1,19 @@ +// index.js +import "@material/web/button/filled-button.js"; +import "@material/web/button/outlined-button.js"; +import "@material/web/checkbox/checkbox.js"; +import "@material/web/field/outlined-field.js"; +import "@material/web/button/outlined-button.js"; +import "@material/web/button/text-button.js"; +import "@material/web/icon/icon.js"; +import "@material/web/iconbutton/icon-button.js"; +import "@material/web/textfield/filled-text-field.js"; +import "@material/web/textfield/outlined-text-field.js"; +import '@material/web/iconbutton/icon-button.js'; +import '@material/web/textfield/filled-text-field.js'; +import '@material/web/radio/radio.js'; +import '@material/web/icon/icon.js'; +import '@material/web/button/filled-tonal-button.js'; +import '@material/web/button/filled-button.js'; +import '@material/web/button/text-button.js'; +import '@material/web/dialog/dialog.js'; diff --git a/static/login_FILL0_wght400_GRAD0_opsz24 (3).svg b/static/login_FILL0_wght400_GRAD0_opsz24 (3).svg new file mode 100644 index 0000000000000000000000000000000000000000..5a236f50f2de44b3aca313b3794a9a1f7072ba74 --- /dev/null +++ b/static/login_FILL0_wght400_GRAD0_opsz24 (3).svg @@ -0,0 +1 @@ +Sign in \ No newline at end of file diff --git a/static/login_FILL0_wght400_GRAD0_opsz24.svg b/static/login_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000000000000000000000000000000000000..49c0f547e94aec95af7ed2b90242346e590e56c3 --- /dev/null +++ b/static/login_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/package-lock.json b/static/package-lock.json new file mode 100644 index 0000000000000000000000000000000000000000..37dae5adb2b31afc13030cf1ee68fba741d48e53 --- /dev/null +++ b/static/package-lock.json @@ -0,0 +1,661 @@ +{ + "name": "nodejs-sandbox", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "nodejs-sandbox", + "version": "1.0.0", + "license": "MIT", + "dependencies": { + "@material/web": "^1.0.0", + "@rollup/plugin-node-resolve": "^15.2.1", + "rollup": "^3.29.4" + }, + "devDependencies": { + "nodemon": "^3.0.1" + } + }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz", + "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==" + }, + "node_modules/@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "node_modules/@material/web": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.0.tgz", + "integrity": "sha512-mNn2qzHvzJLty93NTtnkrSup+Wnte5yAtcZIx0N+WbIZPVlixA2v6wXkqHN1/SJVl0EV2tNT1qz4k0jfTQ+0lw==", + "dependencies": { + "lit": "^2.7.4 || ^3.0.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@rollup/plugin-node-resolve": { + "version": "15.2.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.1.tgz", + "integrity": "sha512-nsbUg588+GDSu8/NS8T4UAshO6xeaOfINNuXeVHcKV02LJtoRaM1SiOacClw4kws1SFiNhdLGxlbMY9ga/zs/w==", + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "@types/resolve": "1.20.2", + "deepmerge": "^4.2.2", + "is-builtin-module": "^3.2.1", + "is-module": "^1.0.0", + "resolve": "^1.22.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^2.78.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz", + "integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==", + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@types/estree": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz", + "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==" + }, + "node_modules/@types/resolve": { + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", + "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==" + }, + "node_modules/@types/trusted-types": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.4.tgz", + "integrity": "sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==" + }, + "node_modules/abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "dev": true, + "license": "ISC" + }, + "node_modules/anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true, + "license": "MIT" + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/builtin-modules": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", + "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==", + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true, + "license": "MIT" + }, + "node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.1" + } + }, + "node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/ignore-by-default": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz", + "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==", + "dev": true, + "license": "ISC" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-builtin-module": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz", + "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==", + "dependencies": { + "builtin-modules": "^3.3.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-core-module": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz", + "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==", + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-module": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", + "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==" + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, + "node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/nodemon": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.0.1.tgz", + "integrity": "sha512-g9AZ7HmkhQkqXkRc20w+ZfQ73cHLbE8hnPbtaFbFtCumZsjyMhKk9LajQ07U5Ux28lvFjZ5X7HvWR1xzU8jHVw==", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": "^3.5.2", + "debug": "^3.2.7", + "ignore-by-default": "^1.0.1", + "minimatch": "^3.1.2", + "pstree.remy": "^1.1.8", + "semver": "^7.5.3", + "simple-update-notifier": "^2.0.0", + "supports-color": "^5.5.0", + "touch": "^3.1.0", + "undefsafe": "^2.0.5" + }, + "bin": { + "nodemon": "bin/nodemon.js" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/nodemon" + } + }, + "node_modules/nopt": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==", + "dev": true, + "license": "MIT", + "dependencies": { + "abbrev": "1" + }, + "bin": { + "nopt": "bin/nopt.js" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pstree.remy": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz", + "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==", + "dev": true, + "license": "MIT" + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/resolve": { + "version": "1.22.6", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz", + "integrity": "sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==", + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/rollup": { + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "license": "ISC", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/simple-update-notifier": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz", + "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "semver": "^7.5.3" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/touch": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz", + "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==", + "dev": true, + "license": "ISC", + "dependencies": { + "nopt": "~1.0.10" + }, + "bin": { + "nodetouch": "bin/nodetouch.js" + } + }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, + "node_modules/undefsafe": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz", + "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==", + "dev": true, + "license": "MIT" + }, + "node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true, + "license": "ISC" + } + } +} diff --git a/static/package.json b/static/package.json new file mode 100644 index 0000000000000000000000000000000000000000..c882fbe0d975bd6f56730072fbc7dcb0332098dc --- /dev/null +++ b/static/package.json @@ -0,0 +1,28 @@ +{ + "name": "nodejs-sandbox", + "version": "1.0.0", + "description": "", + "main": "index.html", + "scripts": { + "start": "nodemon index.js" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/codesandbox-app/static-template.git" + }, + "keywords": [], + "author": "Ives van Hoorne", + "license": "MIT", + "bugs": { + "url": "https://github.com/codesandbox-app/static-template/issues" + }, + "homepage": "https://github.com/codesandbox-app/static-template#readme", + "devDependencies": { + "nodemon": "^3.0.1" + }, + "dependencies": { + "@material/web": "^1.0.0", + "@rollup/plugin-node-resolve": "^15.2.1", + "rollup": "^3.29.4" + } +} diff --git a/static/theme.css b/static/theme.css new file mode 100644 index 0000000000000000000000000000000000000000..4b954d1292bc21e1d769c24b337dbb953ff58bb8 --- /dev/null +++ b/static/theme.css @@ -0,0 +1,69 @@ +@import url(tokens.css); +@import url(colors.module.css); +@import url(typography.module.css); +@import url(theme.light.css) (prefers-color-scheme: light); +@import url(theme.dark.css) (prefers-color-scheme: dark); +.ipt { + text-align: left; + color: black; +} +body { + font-family: "Google Sans", sans-serif; +} +.svg-icon { + display: inline-flex; + align-self: center; +} +.svg-icon svg { + height: 1em; + width: 1em; +} +.svg-icon.svg-baseline svg { + top: 0.125em; + position: relative; +} +/*-----------------*/ +/*-----------------*/ +/*-----------------*/ +/*PROTOTYPE EXAMPLE*/ +body { + padding: 8px; + font-size: 16px; + font-family: arial; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0 0 16px 0; + padding: 0; + line-height: 1; + font-weight: normal; + position: relative; + color: black; +} +/*H Tag Sizing*/ +h1 { + font-size: 64px; +} +h2 { + font-size: 48px; +} +h3 { + font-size: 32px; +} +h4 { + font-size: 24px; +} +h5 { + font-size: 16px; +} +h6 { + font-size: 12px; +} +p { + margin-top: 0; + margin-bottom: 8px; +} diff --git a/static/theme.dark.css b/static/theme.dark.css new file mode 100644 index 0000000000000000000000000000000000000000..295522879dc626e7016f5f75daeaf820f56aceae --- /dev/null +++ b/static/theme.dark.css @@ -0,0 +1,51 @@ +:root { + --md-sys-color-primary: var(--md-sys-color-primary-dark); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); + --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-dark); + --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-dark); + --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-dark); + --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-dark); + --md-sys-color-secondary: var(--md-sys-color-secondary-dark); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); + --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-dark); + --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-dark); + --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-dark); + --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-dark); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); + --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-dark); + --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-dark); + --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-dark); + --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-dark); + --md-sys-color-error: var(--md-sys-color-error-dark); + --md-sys-color-on-error: var(--md-sys-color-on-error-dark); + --md-sys-color-error-container: var(--md-sys-color-error-container-dark); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); + --md-sys-color-outline: var(--md-sys-color-outline-dark); + --md-sys-color-background: var(--md-sys-color-background-dark); + --md-sys-color-on-background: var(--md-sys-color-on-background-dark); + --md-sys-color-surface: var(--md-sys-color-surface-dark); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); + --md-sys-color-shadow: var(--md-sys-color-shadow-dark); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark); + --md-sys-color-scrim: var(--md-sys-color-scrim-dark); + --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-dark); + --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-dark); + --md-sys-color-surface-container: var(--md-sys-color-surface-container-dark); + --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-dark); + --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-dark); + --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-dark); + --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-dark); +} diff --git a/static/theme.light.css b/static/theme.light.css new file mode 100644 index 0000000000000000000000000000000000000000..31821e93cfcdef1e543df332c9b914c35518fb8f --- /dev/null +++ b/static/theme.light.css @@ -0,0 +1,51 @@ +:root { + --md-sys-color-primary: var(--md-sys-color-primary-light); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); + --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-light); + --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-light); + --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-light); + --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-light); + --md-sys-color-secondary: var(--md-sys-color-secondary-light); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); + --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-light); + --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-light); + --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-light); + --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-light); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); + --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-light); + --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-light); + --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-light); + --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-light); + --md-sys-color-error: var(--md-sys-color-error-light); + --md-sys-color-on-error: var(--md-sys-color-on-error-light); + --md-sys-color-error-container: var(--md-sys-color-error-container-light); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); + --md-sys-color-outline: var(--md-sys-color-outline-light); + --md-sys-color-background: var(--md-sys-color-background-light); + --md-sys-color-on-background: var(--md-sys-color-on-background-light); + --md-sys-color-surface: var(--md-sys-color-surface-light); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); + --md-sys-color-shadow: var(--md-sys-color-shadow-light); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light); + --md-sys-color-scrim: var(--md-sys-color-scrim-light); + --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-light); + --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-light); + --md-sys-color-surface-container: var(--md-sys-color-surface-container-light); + --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-light); + --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-light); + --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-light); + --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-light); +} diff --git a/static/tokens.css b/static/tokens.css new file mode 100644 index 0000000000000000000000000000000000000000..9ac22b9bd6801c7e2c9ccce23a13ea6c498765bd --- /dev/null +++ b/static/tokens.css @@ -0,0 +1,333 @@ +:root { + --md-source: #9cb8fc; + /* primary */ + --md-ref-palette-primary0: #000000; + --md-ref-palette-primary5: #000f2f; + --md-ref-palette-primary10: #001944; + --md-ref-palette-primary20: #002d6d; + --md-ref-palette-primary25: #003783; + --md-ref-palette-primary30: #17438f; + --md-ref-palette-primary35: #27509b; + --md-ref-palette-primary40: #365ca8; + --md-ref-palette-primary50: #5175c3; + --md-ref-palette-primary60: #6b8fdf; + --md-ref-palette-primary70: #86aafc; + --md-ref-palette-primary80: #afc6ff; + --md-ref-palette-primary90: #d9e2ff; + --md-ref-palette-primary95: #edf0ff; + --md-ref-palette-primary98: #faf8ff; + --md-ref-palette-primary99: #fefbff; + --md-ref-palette-primary100: #ffffff; + /* secondary */ + --md-ref-palette-secondary0: #000000; + --md-ref-palette-secondary5: #000f31; + --md-ref-palette-secondary10: #001946; + --md-ref-palette-secondary20: #002c71; + --md-ref-palette-secondary25: #023686; + --md-ref-palette-secondary30: #184392; + --md-ref-palette-secondary35: #284f9f; + --md-ref-palette-secondary40: #375bab; + --md-ref-palette-secondary50: #5174c6; + --md-ref-palette-secondary60: #6c8ee2; + --md-ref-palette-secondary70: #87a9ff; + --md-ref-palette-secondary80: #b1c5ff; + --md-ref-palette-secondary90: #dae2ff; + --md-ref-palette-secondary95: #eef0ff; + --md-ref-palette-secondary98: #faf8ff; + --md-ref-palette-secondary99: #fefbff; + --md-ref-palette-secondary100: #ffffff; + /* tertiary */ + --md-ref-palette-tertiary0: #000000; + --md-ref-palette-tertiary5: #001129; + --md-ref-palette-tertiary10: #001b3b; + --md-ref-palette-tertiary20: #003060; + --md-ref-palette-tertiary25: #003b74; + --md-ref-palette-tertiary30: #004788; + --md-ref-palette-tertiary35: #0d5299; + --md-ref-palette-tertiary40: #235fa6; + --md-ref-palette-tertiary50: #4278c1; + --md-ref-palette-tertiary60: #5e92dd; + --md-ref-palette-tertiary70: #7aadfa; + --md-ref-palette-tertiary80: #a7c8ff; + --md-ref-palette-tertiary90: #d5e3ff; + --md-ref-palette-tertiary95: #ebf1ff; + --md-ref-palette-tertiary98: #f9f9ff; + --md-ref-palette-tertiary99: #fdfbff; + --md-ref-palette-tertiary100: #ffffff; + /* error */ + --md-ref-palette-error0: #000000; + --md-ref-palette-error5: #2d0001; + --md-ref-palette-error10: #410002; + --md-ref-palette-error20: #690005; + --md-ref-palette-error25: #7e0007; + --md-ref-palette-error30: #93000a; + --md-ref-palette-error35: #a80710; + --md-ref-palette-error40: #ba1a1a; + --md-ref-palette-error50: #de3730; + --md-ref-palette-error60: #ff5449; + --md-ref-palette-error70: #ff897d; + --md-ref-palette-error80: #ffb4ab; + --md-ref-palette-error90: #ffdad6; + --md-ref-palette-error95: #ffedea; + --md-ref-palette-error98: #fff8f7; + --md-ref-palette-error99: #fffbff; + --md-ref-palette-error100: #ffffff; + /* neutral */ + --md-ref-palette-neutral0: #000000; + --md-ref-palette-neutral5: #101114; + --md-ref-palette-neutral10: #1b1b1f; + --md-ref-palette-neutral20: #303034; + --md-ref-palette-neutral25: #3b3b3f; + --md-ref-palette-neutral30: #46464a; + --md-ref-palette-neutral35: #525256; + --md-ref-palette-neutral40: #5e5e62; + --md-ref-palette-neutral50: #77767a; + --md-ref-palette-neutral60: #919094; + --md-ref-palette-neutral70: #acaaaf; + --md-ref-palette-neutral80: #000000; + --md-ref-palette-neutral90: #e4e2e6; + --md-ref-palette-neutral95: #f2f0f4; + --md-ref-palette-neutral98: #fbf8fd; + --md-ref-palette-neutral99: #fefbff; + --md-ref-palette-neutral100: #ffffff; + /* neutral-variant */ + --md-ref-palette-neutral-variant0: #000000; + --md-ref-palette-neutral-variant5: #0e1118; + --md-ref-palette-neutral-variant10: #191b23; + --md-ref-palette-neutral-variant20: #2e3038; + --md-ref-palette-neutral-variant25: #393b43; + --md-ref-palette-neutral-variant30: #45464f; + --md-ref-palette-neutral-variant35: #50525a; + --md-ref-palette-neutral-variant40: #5c5e67; + --md-ref-palette-neutral-variant50: #757780; + --md-ref-palette-neutral-variant60: #8f909a; + --md-ref-palette-neutral-variant70: #aaabb4; + --md-ref-palette-neutral-variant80: #c5c6d0; + --md-ref-palette-neutral-variant90: #e1e2ec; + --md-ref-palette-neutral-variant95: #f0f0fa; + --md-ref-palette-neutral-variant98: #faf8ff; + --md-ref-palette-neutral-variant99: #fefbff; + --md-ref-palette-neutral-variant100: #ffffff; + /* light */ + --md-sys-color-primary-light: #365ca8; + --md-sys-color-on-primary-light: #ffffff; + --md-sys-color-primary-container-light: #d9e2ff; + --md-sys-color-on-primary-container-light: #001944; + --md-sys-color-primary-fixed-light: #d9e2ff; + --md-sys-color-on-primary-fixed-light: #001944; + --md-sys-color-primary-fixed-dim-light: #afc6ff; + --md-sys-color-on-primary-fixed-variant-light: #17438f; + --md-sys-color-secondary-light: #375bab; + --md-sys-color-on-secondary-light: #ffffff; + --md-sys-color-secondary-container-light: #dae2ff; + --md-sys-color-on-secondary-container-light: #001946; + --md-sys-color-secondary-fixed-light: #dae2ff; + --md-sys-color-on-secondary-fixed-light: #001946; + --md-sys-color-secondary-fixed-dim-light: #b1c5ff; + --md-sys-color-on-secondary-fixed-variant-light: #184392; + --md-sys-color-tertiary-light: #235fa6; + --md-sys-color-on-tertiary-light: #ffffff; + --md-sys-color-tertiary-container-light: #d5e3ff; + --md-sys-color-on-tertiary-container-light: #001b3b; + --md-sys-color-tertiary-fixed-light: #d5e3ff; + --md-sys-color-on-tertiary-fixed-light: #001b3b; + --md-sys-color-tertiary-fixed-dim-light: #a7c8ff; + --md-sys-color-on-tertiary-fixed-variant-light: #004788; + --md-sys-color-error-light: #ba1a1a; + --md-sys-color-on-error-light: #ffffff; + --md-sys-color-error-container-light: #ffdad6; + --md-sys-color-on-error-container-light: #410002; + --md-sys-color-outline-light: #757780; + --md-sys-color-background-light: #fefbff; + --md-sys-color-on-background-light: #1b1b1f; + --md-sys-color-surface-light: #fbf8fd; + --md-sys-color-on-surface-light: #1b1b1f; + --md-sys-color-surface-variant-light: #e1e2ec; + --md-sys-color-on-surface-variant-light: #45464f; + --md-sys-color-inverse-surface-light: #303034; + --md-sys-color-inverse-on-surface-light: #f2f0f4; + --md-sys-color-inverse-primary-light: #afc6ff; + --md-sys-color-shadow-light: #000000; + --md-sys-color-surface-tint-light: #365ca8; + --md-sys-color-outline-variant-light: #c5c6d0; + --md-sys-color-scrim-light: #000000; + --md-sys-color-surface-container-highest-light: #e4e2e6; + --md-sys-color-surface-container-high-light: #e9e7ec; + --md-sys-color-surface-container-light: #efedf1; + --md-sys-color-surface-container-low-light: #f5f3f7; + --md-sys-color-surface-container-lowest-light: #ffffff; + --md-sys-color-surface-bright-light: #fbf8fd; + --md-sys-color-surface-dim-light: #dbd9dd; + /* dark */ + --md-sys-color-primary-dark: #afc6ff; + --md-sys-color-on-primary-dark: #002d6d; + --md-sys-color-primary-container-dark: #17438f; + --md-sys-color-on-primary-container-dark: #d9e2ff; + --md-sys-color-primary-fixed-dark: #d9e2ff; + --md-sys-color-on-primary-fixed-dark: #001944; + --md-sys-color-primary-fixed-dim-dark: #afc6ff; + --md-sys-color-on-primary-fixed-variant-dark: #17438f; + --md-sys-color-secondary-dark: #b1c5ff; + --md-sys-color-on-secondary-dark: #002c71; + --md-sys-color-secondary-container-dark: #184392; + --md-sys-color-on-secondary-container-dark: #dae2ff; + --md-sys-color-secondary-fixed-dark: #dae2ff; + --md-sys-color-on-secondary-fixed-dark: #001946; + --md-sys-color-secondary-fixed-dim-dark: #b1c5ff; + --md-sys-color-on-secondary-fixed-variant-dark: #184392; + --md-sys-color-tertiary-dark: #a7c8ff; + --md-sys-color-on-tertiary-dark: #003060; + --md-sys-color-tertiary-container-dark: #004788; + --md-sys-color-on-tertiary-container-dark: #d5e3ff; + --md-sys-color-tertiary-fixed-dark: #d5e3ff; + --md-sys-color-on-tertiary-fixed-dark: #001b3b; + --md-sys-color-tertiary-fixed-dim-dark: #a7c8ff; + --md-sys-color-on-tertiary-fixed-variant-dark: #004788; + --md-sys-color-error-dark: #ffb4ab; + --md-sys-color-on-error-dark: #690005; + --md-sys-color-error-container-dark: #93000a; + --md-sys-color-on-error-container-dark: #ffdad6; + --md-sys-color-outline-dark: #8f909a; + --md-sys-color-background-dark: #1b1b1f; + --md-sys-color-on-background-dark: #e4e2e6; + --md-sys-color-surface-dark: #131316; + --md-sys-color-on-surface-dark: #c7c6ca; + --md-sys-color-surface-variant-dark: #45464f; + --md-sys-color-on-surface-variant-dark: #c5c6d0; + --md-sys-color-inverse-surface-dark: #e4e2e6; + --md-sys-color-inverse-on-surface-dark: #1b1b1f; + --md-sys-color-inverse-primary-dark: #365ca8; + --md-sys-color-shadow-dark: #000000; + --md-sys-color-surface-tint-dark: #afc6ff; + --md-sys-color-outline-variant-dark: #45464f; + --md-sys-color-scrim-dark: #000000; + --md-sys-color-surface-container-highest-dark: #343438; + --md-sys-color-surface-container-high-dark: #292a2d; + --md-sys-color-surface-container-dark: #1f1f23; + --md-sys-color-surface-container-low-dark: #1b1b1f; + --md-sys-color-surface-container-lowest-dark: #0d0e11; + --md-sys-color-surface-bright-dark: #39393c; + --md-sys-color-surface-dim-dark: #131316; + /* display - large */ + --md-sys-typescale-display-large-font-family-name: "Google Sans"; + --md-sys-typescale-display-large-font-family-style: Regular; + --md-sys-typescale-display-large-font-weight: 400px; + --md-sys-typescale-display-large-font-size: 57px; + --md-sys-typescale-display-large-line-height: 64px; + --md-sys-typescale-display-large-letter-spacing: -0.25px; + /* display - medium */ + --md-sys-typescale-display-medium-font-family-name: "Google Sans"; + --md-sys-typescale-display-medium-font-family-style: Regular; + --md-sys-typescale-display-medium-font-weight: 400px; + --md-sys-typescale-display-medium-font-size: 45px; + --md-sys-typescale-display-medium-line-height: 52px; + --md-sys-typescale-display-medium-letter-spacing: 0px; + /* display - small */ + --md-sys-typescale-display-small-font-family-name: "Google Sans"; + --md-sys-typescale-display-small-font-family-style: Regular; + --md-sys-typescale-display-small-font-weight: 400px; + --md-sys-typescale-display-small-font-size: 36px; + --md-sys-typescale-display-small-line-height: 44px; + --md-sys-typescale-display-small-letter-spacing: 0px; + /* headline - large */ + --md-sys-typescale-headline-large-font-family-name: "Google Sans"; + --md-sys-typescale-headline-large-font-family-style: Regular; + --md-sys-typescale-headline-large-font-weight: 400px; + --md-sys-typescale-headline-large-font-size: 32px; + --md-sys-typescale-headline-large-line-height: 40px; + --md-sys-typescale-headline-large-letter-spacing: 0px; + /* headline - medium */ + --md-sys-typescale-headline-medium-font-family-name: "Google Sans"; + --md-sys-typescale-headline-medium-font-family-style: Regular; + --md-sys-typescale-headline-medium-font-weight: 400px; + --md-sys-typescale-headline-medium-font-size: 28px; + --md-sys-typescale-headline-medium-line-height: 36px; + --md-sys-typescale-headline-medium-letter-spacing: 0px; + /* headline - small */ + --md-sys-typescale-headline-small-font-family-name: "Google Sans"; + --md-sys-typescale-headline-small-font-family-style: Regular; + --md-sys-typescale-headline-small-font-weight: 400px; + --md-sys-typescale-headline-small-font-size: 24px; + --md-sys-typescale-headline-small-line-height: 32px; + --md-sys-typescale-headline-small-letter-spacing: 0px; + /* body - large */ + --md-sys-typescale-body-large-font-family-name: "Google Sans"; + --md-sys-typescale-body-large-font-family-style: Regular; + --md-sys-typescale-body-large-font-weight: 400px; + --md-sys-typescale-body-large-font-size: 16px; + --md-sys-typescale-body-large-line-height: 24px; + --md-sys-typescale-body-large-letter-spacing: 0.5px; + /* body - medium */ + --md-sys-typescale-body-medium-font-family-name: "Google Sans"; + --md-sys-typescale-body-medium-font-family-style: Regular; + --md-sys-typescale-body-medium-font-weight: 400px; + --md-sys-typescale-body-medium-font-size: 14px; + --md-sys-typescale-body-medium-line-height: 20px; + --md-sys-typescale-body-medium-letter-spacing: 0.25px; + /* body - small */ + --md-sys-typescale-body-small-font-family-name: "Google Sans"; + --md-sys-typescale-body-small-font-family-style: Regular; + --md-sys-typescale-body-small-font-weight: 400px; + --md-sys-typescale-body-small-font-size: 12px; + --md-sys-typescale-body-small-line-height: 16px; + --md-sys-typescale-body-small-letter-spacing: 0.4px; + /* label - large */ + --md-sys-typescale-label-large-font-family-name: "Google Sans"; + --md-sys-typescale-label-large-font-family-style: Medium; + --md-sys-typescale-label-large-font-weight: 500px; + --md-sys-typescale-label-large-font-size: 14px; + --md-sys-typescale-label-large-line-height: 20px; + --md-sys-typescale-label-large-letter-spacing: 0.1px; + /* label - medium */ + --md-sys-typescale-label-medium-font-family-name: "Google Sans"; + --md-sys-typescale-label-medium-font-family-style: Medium; + --md-sys-typescale-label-medium-font-weight: 500px; + --md-sys-typescale-label-medium-font-size: 12px; + --md-sys-typescale-label-medium-line-height: 16px; + --md-sys-typescale-label-medium-letter-spacing: 0.5px; + /* label - small */ + --md-sys-typescale-label-small-font-family-name: "Google Sans"; + --md-sys-typescale-label-small-font-family-style: Medium; + --md-sys-typescale-label-small-font-weight: 500px; + --md-sys-typescale-label-small-font-size: 11px; + --md-sys-typescale-label-small-line-height: 16px; + --md-sys-typescale-label-small-letter-spacing: 0.5px; + /* title - large */ + --md-sys-typescale-title-large-font-family-name: "Google Sans"; + --md-sys-typescale-title-large-font-family-style: Regular; + --md-sys-typescale-title-large-font-weight: 400px; + --md-sys-typescale-title-large-font-size: 22px; + --md-sys-typescale-title-large-line-height: 28px; + --md-sys-typescale-title-large-letter-spacing: 0px; + /* title - medium */ + --md-sys-typescale-title-medium-font-family-name: "Google Sans"; + --md-sys-typescale-title-medium-font-family-style: Medium; + --md-sys-typescale-title-medium-font-weight: 500px; + --md-sys-typescale-title-medium-font-size: 16px; + --md-sys-typescale-title-medium-line-height: 24px; + --md-sys-typescale-title-medium-letter-spacing: 0.15px; + /* title - small */ + --md-sys-typescale-title-small-font-family-name: "Google Sans"; + --md-sys-typescale-title-small-font-family-style: Medium; + --md-sys-typescale-title-small-font-weight: 500px; + --md-sys-typescale-title-small-font-size: 14px; + --md-sys-typescale-title-small-line-height: 20px; + --md-sys-typescale-title-small-letter-spacing: 0.1px; +} + +body { + font-family: "Google Sans", sans-serif; +} +.container { + text-align: center; +} +.flex { + margin: auto; + display: flex; + align-items: center; + justify-content: center; + top: 50%; +} +input { + border-color: -internal-light-dark(rgb(0, 0, 0), rgb(0, 0, 0)); +} diff --git a/static/typography.module.css b/static/typography.module.css new file mode 100644 index 0000000000000000000000000000000000000000..5e2c82f94d55db25a42c9d71e2bc369fe66fbdd0 --- /dev/null +++ b/static/typography.module.css @@ -0,0 +1,150 @@ +.display-large{ + font-family: var(--md-sys-typescale-display-large-font-family-name); + font-style: var(--md-sys-typescale-display-large-font-family-style); + font-weight: var(--md-sys-typescale-display-large-font-weight); + font-size: var(--md-sys-typescale-display-large-font-size); + letter-spacing: var(--md-sys-typescale-display-large-tracking); + line-height: var(--md-sys-typescale-display-large-height); + text-transform: var(--md-sys-typescale-display-large-text-transform); + text-decoration: var(--md-sys-typescale-display-large-text-decoration); +} +.display-medium{ + font-family: var(--md-sys-typescale-display-medium-font-family-name); + font-style: var(--md-sys-typescale-display-medium-font-family-style); + font-weight: var(--md-sys-typescale-display-medium-font-weight); + font-size: var(--md-sys-typescale-display-medium-font-size); + letter-spacing: var(--md-sys-typescale-display-medium-tracking); + line-height: var(--md-sys-typescale-display-medium-height); + text-transform: var(--md-sys-typescale-display-medium-text-transform); + text-decoration: var(--md-sys-typescale-display-medium-text-decoration); +} +.display-small{ + font-family: var(--md-sys-typescale-display-small-font-family-name); + font-style: var(--md-sys-typescale-display-small-font-family-style); + font-weight: var(--md-sys-typescale-display-small-font-weight); + font-size: var(--md-sys-typescale-display-small-font-size); + letter-spacing: var(--md-sys-typescale-display-small-tracking); + line-height: var(--md-sys-typescale-display-small-height); + text-transform: var(--md-sys-typescale-display-small-text-transform); + text-decoration: var(--md-sys-typescale-display-small-text-decoration); +} +.headline-large{ + font-family: var(--md-sys-typescale-headline-large-font-family-name); + font-style: var(--md-sys-typescale-headline-large-font-family-style); + font-weight: var(--md-sys-typescale-headline-large-font-weight); + font-size: var(--md-sys-typescale-headline-large-font-size); + letter-spacing: var(--md-sys-typescale-headline-large-tracking); + line-height: var(--md-sys-typescale-headline-large-height); + text-transform: var(--md-sys-typescale-headline-large-text-transform); + text-decoration: var(--md-sys-typescale-headline-large-text-decoration); +} +.headline-medium{ + font-family: var(--md-sys-typescale-headline-medium-font-family-name); + font-style: var(--md-sys-typescale-headline-medium-font-family-style); + font-weight: var(--md-sys-typescale-headline-medium-font-weight); + font-size: var(--md-sys-typescale-headline-medium-font-size); + letter-spacing: var(--md-sys-typescale-headline-medium-tracking); + line-height: var(--md-sys-typescale-headline-medium-height); + text-transform: var(--md-sys-typescale-headline-medium-text-transform); + text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); +} +.headline-small{ + font-family: var(--md-sys-typescale-headline-small-font-family-name); + font-style: var(--md-sys-typescale-headline-small-font-family-style); + font-weight: var(--md-sys-typescale-headline-small-font-weight); + font-size: var(--md-sys-typescale-headline-small-font-size); + letter-spacing: var(--md-sys-typescale-headline-small-tracking); + line-height: var(--md-sys-typescale-headline-small-height); + text-transform: var(--md-sys-typescale-headline-small-text-transform); + text-decoration: var(--md-sys-typescale-headline-small-text-decoration); +} +.body-large{ + font-family: var(--md-sys-typescale-body-large-font-family-name); + font-style: var(--md-sys-typescale-body-large-font-family-style); + font-weight: var(--md-sys-typescale-body-large-font-weight); + font-size: var(--md-sys-typescale-body-large-font-size); + letter-spacing: var(--md-sys-typescale-body-large-tracking); + line-height: var(--md-sys-typescale-body-large-height); + text-transform: var(--md-sys-typescale-body-large-text-transform); + text-decoration: var(--md-sys-typescale-body-large-text-decoration); +} +.body-medium{ + font-family: var(--md-sys-typescale-body-medium-font-family-name); + font-style: var(--md-sys-typescale-body-medium-font-family-style); + font-weight: var(--md-sys-typescale-body-medium-font-weight); + font-size: var(--md-sys-typescale-body-medium-font-size); + letter-spacing: var(--md-sys-typescale-body-medium-tracking); + line-height: var(--md-sys-typescale-body-medium-height); + text-transform: var(--md-sys-typescale-body-medium-text-transform); + text-decoration: var(--md-sys-typescale-body-medium-text-decoration); +} +.body-small{ + font-family: var(--md-sys-typescale-body-small-font-family-name); + font-style: var(--md-sys-typescale-body-small-font-family-style); + font-weight: var(--md-sys-typescale-body-small-font-weight); + font-size: var(--md-sys-typescale-body-small-font-size); + letter-spacing: var(--md-sys-typescale-body-small-tracking); + line-height: var(--md-sys-typescale-body-small-height); + text-transform: var(--md-sys-typescale-body-small-text-transform); + text-decoration: var(--md-sys-typescale-body-small-text-decoration); +} +.label-large{ + font-family: var(--md-sys-typescale-label-large-font-family-name); + font-style: var(--md-sys-typescale-label-large-font-family-style); + font-weight: var(--md-sys-typescale-label-large-font-weight); + font-size: var(--md-sys-typescale-label-large-font-size); + letter-spacing: var(--md-sys-typescale-label-large-tracking); + line-height: var(--md-sys-typescale-label-large-height); + text-transform: var(--md-sys-typescale-label-large-text-transform); + text-decoration: var(--md-sys-typescale-label-large-text-decoration); +} +.label-medium{ + font-family: var(--md-sys-typescale-label-medium-font-family-name); + font-style: var(--md-sys-typescale-label-medium-font-family-style); + font-weight: var(--md-sys-typescale-label-medium-font-weight); + font-size: var(--md-sys-typescale-label-medium-font-size); + letter-spacing: var(--md-sys-typescale-label-medium-tracking); + line-height: var(--md-sys-typescale-label-medium-height); + text-transform: var(--md-sys-typescale-label-medium-text-transform); + text-decoration: var(--md-sys-typescale-label-medium-text-decoration); +} +.label-small{ + font-family: var(--md-sys-typescale-label-small-font-family-name); + font-style: var(--md-sys-typescale-label-small-font-family-style); + font-weight: var(--md-sys-typescale-label-small-font-weight); + font-size: var(--md-sys-typescale-label-small-font-size); + letter-spacing: var(--md-sys-typescale-label-small-tracking); + line-height: var(--md-sys-typescale-label-small-height); + text-transform: var(--md-sys-typescale-label-small-text-transform); + text-decoration: var(--md-sys-typescale-label-small-text-decoration); +} +.title-large{ + font-family: var(--md-sys-typescale-title-large-font-family-name); + font-style: var(--md-sys-typescale-title-large-font-family-style); + font-weight: var(--md-sys-typescale-title-large-font-weight); + font-size: var(--md-sys-typescale-title-large-font-size); + letter-spacing: var(--md-sys-typescale-title-large-tracking); + line-height: var(--md-sys-typescale-title-large-height); + text-transform: var(--md-sys-typescale-title-large-text-transform); + text-decoration: var(--md-sys-typescale-title-large-text-decoration); +} +.title-medium{ + font-family: var(--md-sys-typescale-title-medium-font-family-name); + font-style: var(--md-sys-typescale-title-medium-font-family-style); + font-weight: var(--md-sys-typescale-title-medium-font-weight); + font-size: var(--md-sys-typescale-title-medium-font-size); + letter-spacing: var(--md-sys-typescale-title-medium-tracking); + line-height: var(--md-sys-typescale-title-medium-height); + text-transform: var(--md-sys-typescale-title-medium-text-transform); + text-decoration: var(--md-sys-typescale-title-medium-text-decoration); +} +.title-small{ + font-family: var(--md-sys-typescale-title-small-font-family-name); + font-style: var(--md-sys-typescale-title-small-font-family-style); + font-weight: var(--md-sys-typescale-title-small-font-weight); + font-size: var(--md-sys-typescale-title-small-font-size); + letter-spacing: var(--md-sys-typescale-title-small-tracking); + line-height: var(--md-sys-typescale-title-small-height); + text-transform: var(--md-sys-typescale-title-small-text-transform); + text-decoration: var(--md-sys-typescale-title-small-text-decoration); +} diff --git a/static/yarn.lock b/static/yarn.lock new file mode 100644 index 0000000000000000000000000000000000000000..5bbb25c416289ba7879234a11085c8a1a174212c --- /dev/null +++ b/static/yarn.lock @@ -0,0 +1,383 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0": + version "1.1.1" + resolved "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz" + integrity sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ== + +"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.6.0": + version "1.6.3" + resolved "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz" + integrity sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.0.0" + +"@material/web@^1.0.0": + version "1.0.0" + resolved "https://registry.npmjs.org/@material/web/-/web-1.0.0.tgz" + integrity sha512-mNn2qzHvzJLty93NTtnkrSup+Wnte5yAtcZIx0N+WbIZPVlixA2v6wXkqHN1/SJVl0EV2tNT1qz4k0jfTQ+0lw== + dependencies: + lit "^2.7.4 || ^3.0.0" + tslib "^2.4.0" + +"@rollup/plugin-node-resolve@^15.2.1": + version "15.2.1" + resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.1.tgz" + integrity sha512-nsbUg588+GDSu8/NS8T4UAshO6xeaOfINNuXeVHcKV02LJtoRaM1SiOacClw4kws1SFiNhdLGxlbMY9ga/zs/w== + dependencies: + "@rollup/pluginutils" "^5.0.1" + "@types/resolve" "1.20.2" + deepmerge "^4.2.2" + is-builtin-module "^3.2.1" + is-module "^1.0.0" + resolve "^1.22.1" + +"@rollup/pluginutils@^5.0.1": + version "5.0.4" + resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz" + integrity sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g== + dependencies: + "@types/estree" "^1.0.0" + estree-walker "^2.0.2" + picomatch "^2.3.1" + +"@types/estree@^1.0.0": + version "1.0.2" + resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz" + integrity sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA== + +"@types/resolve@1.20.2": + version "1.20.2" + resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz" + integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q== + +"@types/trusted-types@^2.0.2": + version "2.0.4" + resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.4.tgz" + integrity sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ== + +abbrev@1: + version "1.1.1" + resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz" + integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q== + +anymatch@~3.1.2: + version "3.1.2" + resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz" + integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + +balanced-match@^1.0.0: + version "1.0.2" + resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz" + integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== + +binary-extensions@^2.0.0: + version "2.2.0" + resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz" + integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== + +brace-expansion@^1.1.7: + version "1.1.11" + resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz" + integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== + dependencies: + balanced-match "^1.0.0" + concat-map "0.0.1" + +braces@~3.0.2: + version "3.0.2" + resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz" + integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== + dependencies: + fill-range "^7.0.1" + +builtin-modules@^3.3.0: + version "3.3.0" + resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz" + integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw== + +chokidar@^3.5.2: + version "3.5.3" + resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz" + integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + +concat-map@0.0.1: + version "0.0.1" + resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz" + integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg== + +debug@^3.2.7: + version "3.2.7" + resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz" + integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ== + dependencies: + ms "^2.1.1" + +deepmerge@^4.2.2: + version "4.3.1" + resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz" + integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== + +estree-walker@^2.0.2: + version "2.0.2" + resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz" + integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== + +fill-range@^7.0.1: + version "7.0.1" + resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz" + integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== + dependencies: + to-regex-range "^5.0.1" + +function-bind@^1.1.1: + version "1.1.1" + resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz" + integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== + +glob-parent@~5.1.2: + version "5.1.2" + resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz" + integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== + dependencies: + is-glob "^4.0.1" + +has-flag@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz" + integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw== + +has@^1.0.3: + version "1.0.3" + resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz" + integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== + dependencies: + function-bind "^1.1.1" + +ignore-by-default@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz" + integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA== + +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + +is-builtin-module@^3.2.1: + version "3.2.1" + resolved "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz" + integrity sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A== + dependencies: + builtin-modules "^3.3.0" + +is-core-module@^2.13.0: + version "2.13.0" + resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz" + integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ== + dependencies: + has "^1.0.3" + +is-extglob@^2.1.1: + version "2.1.1" + resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz" + integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== + +is-glob@^4.0.1, is-glob@~4.0.1: + version "4.0.3" + resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz" + integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== + dependencies: + is-extglob "^2.1.1" + +is-module@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz" + integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g== + +is-number@^7.0.0: + version "7.0.0" + resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz" + integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== + +lit-element@^3.3.0: + version "3.3.3" + resolved "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz" + integrity sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.1.0" + "@lit/reactive-element" "^1.3.0" + lit-html "^2.8.0" + +lit-html@^2.8.0: + version "2.8.0" + resolved "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz" + integrity sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q== + dependencies: + "@types/trusted-types" "^2.0.2" + +"lit@^2.7.4 || ^3.0.0": + version "2.8.0" + resolved "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz" + integrity sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA== + dependencies: + "@lit/reactive-element" "^1.6.0" + lit-element "^3.3.0" + lit-html "^2.8.0" + +lru-cache@^6.0.0: + version "6.0.0" + resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz" + integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA== + dependencies: + yallist "^4.0.0" + +minimatch@^3.1.2: + version "3.1.2" + resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz" + integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== + dependencies: + brace-expansion "^1.1.7" + +ms@^2.1.1: + version "2.1.3" + resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz" + integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== + +nodemon@^3.0.1: + version "3.0.1" + resolved "https://registry.npmjs.org/nodemon/-/nodemon-3.0.1.tgz" + integrity sha512-g9AZ7HmkhQkqXkRc20w+ZfQ73cHLbE8hnPbtaFbFtCumZsjyMhKk9LajQ07U5Ux28lvFjZ5X7HvWR1xzU8jHVw== + dependencies: + chokidar "^3.5.2" + debug "^3.2.7" + ignore-by-default "^1.0.1" + minimatch "^3.1.2" + pstree.remy "^1.1.8" + semver "^7.5.3" + simple-update-notifier "^2.0.0" + supports-color "^5.5.0" + touch "^3.1.0" + undefsafe "^2.0.5" + +nopt@~1.0.10: + version "1.0.10" + resolved "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz" + integrity sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg== + dependencies: + abbrev "1" + +normalize-path@^3.0.0, normalize-path@~3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz" + integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== + +path-parse@^1.0.7: + version "1.0.7" + resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== + +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1: + version "2.3.1" + resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz" + integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== + +pstree.remy@^1.1.8: + version "1.1.8" + resolved "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz" + integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w== + +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + +resolve@^1.22.1: + version "1.22.6" + resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz" + integrity sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw== + dependencies: + is-core-module "^2.13.0" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + +rollup@^1.20.0||^2.0.0||^3.0.0, rollup@^2.78.0||^3.0.0, rollup@^3.29.4: + version "3.29.4" + resolved "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz" + integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw== + optionalDependencies: + fsevents "~2.3.2" + +semver@^7.5.3: + version "7.5.4" + resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz" + integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== + dependencies: + lru-cache "^6.0.0" + +simple-update-notifier@^2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz" + integrity sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w== + dependencies: + semver "^7.5.3" + +supports-color@^5.5.0: + version "5.5.0" + resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz" + integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== + dependencies: + has-flag "^3.0.0" + +supports-preserve-symlinks-flag@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz" + integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== + +to-regex-range@^5.0.1: + version "5.0.1" + resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz" + integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== + dependencies: + is-number "^7.0.0" + +touch@^3.1.0: + version "3.1.0" + resolved "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz" + integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA== + dependencies: + nopt "~1.0.10" + +tslib@^2.4.0: + version "2.6.2" + resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + +undefsafe@^2.0.5: + version "2.0.5" + resolved "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz" + integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA== + +yallist@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz" + integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== diff --git a/templates/.codesandbox/Dockerfile b/templates/.codesandbox/Dockerfile new file mode 100644 index 0000000000000000000000000000000000000000..d4e8dce9bd4337c9b560c3297eb320b1c2413058 --- /dev/null +++ b/templates/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:20-bullseye diff --git a/templates/.codesandbox/icon.png b/templates/.codesandbox/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..a600a657ce1767146fdefbd1d7534feb31f007b1 Binary files /dev/null and b/templates/.codesandbox/icon.png differ diff --git a/templates/.codesandbox/tasks.json b/templates/.codesandbox/tasks.json new file mode 100644 index 0000000000000000000000000000000000000000..078756b349dc2ae10876b27e8e1382b311227ffe --- /dev/null +++ b/templates/.codesandbox/tasks.json @@ -0,0 +1,29 @@ +{ + // These tasks will run in order when initializing your CodeSandbox project. + "setupTasks": [ + { + "name": "Install Dependencies", + "command": "yarn install" + } + ], + + // These tasks can be run from CodeSandbox. Running one will open a log in the app. + "tasks": { + "start": { + "name": "start", + "command": "rm bundle.js | npx rollup -p @rollup/plugin-node-resolve index.js -o bundle.js | npx http-server", + "runAtStart": true, + "preview": { + "port": 8081 + } + }, + "build": { + "name": "build", + "command": "rm bundle.js | npx rollup -p @rollup/plugin-node-resolve index.js -o bundle.js | npx http-server", + "runAtStart": false, + "preview": { + "port": 8080 + } + } + } +} diff --git a/templates/.codesandbox/template.json b/templates/.codesandbox/template.json new file mode 100644 index 0000000000000000000000000000000000000000..0c6ec3f151d1b37629feb8fc7fed60d2c213ea0d --- /dev/null +++ b/templates/.codesandbox/template.json @@ -0,0 +1,10 @@ +{ + "title": "Node.js", + "description": "The official Node.js template by the CodeSandbox team", + "iconUrl": "https://github.com/codesandbox/sandbox-templates/blob/main/node/.codesandbox/icon.png?raw=true", + "tags": [ + "node", + "javascript" + ], + "published": true +} \ No newline at end of file diff --git a/templates/ProductSans-Black.woff2 b/templates/ProductSans-Black.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..40e1fd6a54137a6783f9e14bcb17d759f797f75a Binary files /dev/null and b/templates/ProductSans-Black.woff2 differ diff --git a/templates/ProductSans-Bold.woff2 b/templates/ProductSans-Bold.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..1a651b132db49bd9a37bd40d36e382be029818a6 Binary files /dev/null and b/templates/ProductSans-Bold.woff2 differ diff --git a/templates/ProductSans-Light.woff2 b/templates/ProductSans-Light.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..eeb744f2b84be07c9e6b058bb22791ed47bccdec Binary files /dev/null and b/templates/ProductSans-Light.woff2 differ diff --git a/templates/ProductSans-Medium.woff2 b/templates/ProductSans-Medium.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..217dc7386e1bed05fbb9eacca513c69f14e5a5c5 Binary files /dev/null and b/templates/ProductSans-Medium.woff2 differ diff --git a/templates/ProductSans-Regular.woff2 b/templates/ProductSans-Regular.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..46ca661f5197a43ce85616a5ca3a6313fbd7e893 Binary files /dev/null and b/templates/ProductSans-Regular.woff2 differ diff --git a/templates/ProductSans-Thin.woff2 b/templates/ProductSans-Thin.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..7f336f3789535cf34bb15a65fae93af61ab7ce90 Binary files /dev/null and b/templates/ProductSans-Thin.woff2 differ diff --git a/templates/README.md b/templates/README.md new file mode 100644 index 0000000000000000000000000000000000000000..540b0499e81deac70d5a55187dcb3663d245a642 --- /dev/null +++ b/templates/README.md @@ -0,0 +1,10 @@ +# Node.js template + +This is a Node.js project. + +Add your [configuration](https://codesandbox.io/docs/projects/learn/setting-up/tasks) to optimize it for [CodeSandbox](https://codesandbox.io/p/dashboard). + +## Resources + +- [CodeSandbox — Docs](https://codesandbox.io/docs/learn) +- [CodeSandbox — Discord](https://discord.gg/Ggarp3pX5H) diff --git a/templates/bundle.js b/templates/bundle.js new file mode 100644 index 0000000000000000000000000000000000000000..ed5eb742f500adb9046181b859202ebe9889fa22 --- /dev/null +++ b/templates/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); diff --git a/templates/colors.module.css b/templates/colors.module.css new file mode 100644 index 0000000000000000000000000000000000000000..dc2eb492634309dbc67c098e703b94d74d535b63 --- /dev/null +++ b/templates/colors.module.css @@ -0,0 +1,294 @@ +.primary { + background-color: var(--md-sys-color-primary); +} +.primary-text { + color: var(--md-sys-color-primary); +} +.on-primary { + background-color: var(--md-sys-color-on-primary); +} +.on-primary-text { + color: var(--md-sys-color-on-primary); +} +.primary-container { + background-color: var(--md-sys-color-primary-container); +} +.primary-container-text { + color: var(--md-sys-color-primary-container); +} +.on-primary-container { + background-color: var(--md-sys-color-on-primary-container); +} +.on-primary-container-text { + color: var(--md-sys-color-on-primary-container); +} +.primary-fixed { + background-color: var(--md-sys-color-primary-fixed); +} +.primary-fixed-text { + color: var(--md-sys-color-primary-fixed); +} +.on-primary-fixed { + background-color: var(--md-sys-color-on-primary-fixed); +} +.on-primary-fixed-text { + color: var(--md-sys-color-on-primary-fixed); +} +.primary-fixed-dim { + background-color: var(--md-sys-color-primary-fixed-dim); +} +.primary-fixed-dim-text { + color: var(--md-sys-color-primary-fixed-dim); +} +.on-primary-fixed-variant { + background-color: var(--md-sys-color-on-primary-fixed-variant); +} +.on-primary-fixed-variant-text { + color: var(--md-sys-color-on-primary-fixed-variant); +} +.secondary { + background-color: var(--md-sys-color-secondary); +} +.secondary-text { + color: var(--md-sys-color-secondary); +} +.on-secondary { + background-color: var(--md-sys-color-on-secondary); +} +.on-secondary-text { + color: var(--md-sys-color-on-secondary); +} +.secondary-container { + background-color: var(--md-sys-color-secondary-container); +} +.secondary-container-text { + color: var(--md-sys-color-secondary-container); +} +.on-secondary-container { + background-color: var(--md-sys-color-on-secondary-container); +} +.on-secondary-container-text { + color: var(--md-sys-color-on-secondary-container); +} +.secondary-fixed { + background-color: var(--md-sys-color-secondary-fixed); +} +.secondary-fixed-text { + color: var(--md-sys-color-secondary-fixed); +} +.on-secondary-fixed { + background-color: var(--md-sys-color-on-secondary-fixed); +} +.on-secondary-fixed-text { + color: var(--md-sys-color-on-secondary-fixed); +} +.secondary-fixed-dim { + background-color: var(--md-sys-color-secondary-fixed-dim); +} +.secondary-fixed-dim-text { + color: var(--md-sys-color-secondary-fixed-dim); +} +.on-secondary-fixed-variant { + background-color: var(--md-sys-color-on-secondary-fixed-variant); +} +.on-secondary-fixed-variant-text { + color: var(--md-sys-color-on-secondary-fixed-variant); +} +.tertiary { + background-color: var(--md-sys-color-tertiary); +} +.tertiary-text { + color: var(--md-sys-color-tertiary); +} +.on-tertiary { + background-color: var(--md-sys-color-on-tertiary); +} +.on-tertiary-text { + color: var(--md-sys-color-on-tertiary); +} +.tertiary-container { + background-color: var(--md-sys-color-tertiary-container); +} +.tertiary-container-text { + color: var(--md-sys-color-tertiary-container); +} +.on-tertiary-container { + background-color: var(--md-sys-color-on-tertiary-container); +} +.on-tertiary-container-text { + color: var(--md-sys-color-on-tertiary-container); +} +.tertiary-fixed { + background-color: var(--md-sys-color-tertiary-fixed); +} +.tertiary-fixed-text { + color: var(--md-sys-color-tertiary-fixed); +} +.on-tertiary-fixed { + background-color: var(--md-sys-color-on-tertiary-fixed); +} +.on-tertiary-fixed-text { + color: var(--md-sys-color-on-tertiary-fixed); +} +.tertiary-fixed-dim { + background-color: var(--md-sys-color-tertiary-fixed-dim); +} +.tertiary-fixed-dim-text { + color: var(--md-sys-color-tertiary-fixed-dim); +} +.on-tertiary-fixed-variant { + background-color: var(--md-sys-color-on-tertiary-fixed-variant); +} +.on-tertiary-fixed-variant-text { + color: var(--md-sys-color-on-tertiary-fixed-variant); +} +.error { + background-color: var(--md-sys-color-error); +} +.error-text { + color: var(--md-sys-color-error); +} +.on-error { + background-color: var(--md-sys-color-on-error); +} +.on-error-text { + color: var(--md-sys-color-on-error); +} +.error-container { + background-color: var(--md-sys-color-error-container); +} +.error-container-text { + color: var(--md-sys-color-error-container); +} +.on-error-container { + background-color: var(--md-sys-color-on-error-container); +} +.on-error-container-text { + color: var(--md-sys-color-on-error-container); +} +.outline { + background-color: var(--md-sys-color-outline); +} +.outline-text { + color: var(--md-sys-color-outline); +} +.background { + background-color: var(--md-sys-color-background); +} +.background-text { + color: var(--md-sys-color-background); +} +.on-background { + background-color: var(--md-sys-color-on-background); +} +.on-background-text { + color: var(--md-sys-color-on-background); +} +.surface { + background-color: var(--md-sys-color-surface); +} +.surface-text { + color: var(--md-sys-color-surface); +} +.on-surface { + background-color: var(--md-sys-color-on-surface); +} +.on-surface-text { + color: var(--md-sys-color-on-surface); +} +.surface-variant { + background-color: var(--md-sys-color-surface-variant); +} +.surface-variant-text { + color: var(--md-sys-color-surface-variant); +} +.on-surface-variant { + background-color: var(--md-sys-color-on-surface-variant); +} +.on-surface-variant-text { + color: var(--md-sys-color-on-surface-variant); +} +.inverse-surface { + background-color: var(--md-sys-color-inverse-surface); +} +.inverse-surface-text { + color: var(--md-sys-color-inverse-surface); +} +.inverse-on-surface { + background-color: var(--md-sys-color-inverse-on-surface); +} +.inverse-on-surface-text { + color: var(--md-sys-color-inverse-on-surface); +} +.inverse-primary { + background-color: var(--md-sys-color-inverse-primary); +} +.inverse-primary-text { + color: var(--md-sys-color-inverse-primary); +} +.shadow { + background-color: var(--md-sys-color-shadow); +} +.shadow-text { + color: var(--md-sys-color-shadow); +} +.surface-tint { + background-color: var(--md-sys-color-surface-tint); +} +.surface-tint-text { + color: var(--md-sys-color-surface-tint); +} +.outline-variant { + background-color: var(--md-sys-color-outline-variant); +} +.outline-variant-text { + color: var(--md-sys-color-outline-variant); +} +.scrim { + background-color: var(--md-sys-color-scrim); +} +.scrim-text { + color: var(--md-sys-color-scrim); +} +.surface-container-highest { + background-color: var(--md-sys-color-surface-container-highest); +} +.surface-container-highest-text { + color: var(--md-sys-color-surface-container-highest); +} +.surface-container-high { + background-color: var(--md-sys-color-surface-container-high); +} +.surface-container-high-text { + color: var(--md-sys-color-surface-container-high); +} +.surface-container { + background-color: var(--md-sys-color-surface-container); +} +.surface-container-text { + color: var(--md-sys-color-surface-container); +} +.surface-container-low { + background-color: var(--md-sys-color-surface-container-low); +} +.surface-container-low-text { + color: var(--md-sys-color-surface-container-low); +} +.surface-container-lowest { + background-color: var(--md-sys-color-surface-container-lowest); +} +.surface-container-lowest-text { + color: var(--md-sys-color-surface-container-lowest); +} +.surface-bright { + background-color: var(--md-sys-color-surface-bright); +} +.surface-bright-text { + color: var(--md-sys-color-surface-bright); +} +.surface-dim { + background-color: var(--md-sys-color-surface-dim); +} +.surface-dim-text { + color: var(--md-sys-color-surface-dim); +} diff --git a/templates/fonts.css b/templates/fonts.css new file mode 100644 index 0000000000000000000000000000000000000000..29e5badbcc97dd34030f73614e064b6fbd8d4192 --- /dev/null +++ b/templates/fonts.css @@ -0,0 +1,36 @@ +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Thin.woff2") format("woff2"); + font-weight: 100; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Light.woff2") format("woff2"); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Regular.woff2") format("woff2"); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Medium.woff2") format("woff2"); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Bold.woff2") format("woff2"); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: "Google Sans"; + src: url("ProductSans-Black.woff2") format("woff2"); + font-weight: 900; + font-style: normal; +} diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000000000000000000000000000000000000..d6c5bc6b1c66511d7b4d2383bcb1c6d397db26e6 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,97 @@ + + + + + + MD3 + + +
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+
Don't have an account yet? Sign Up"
+
+ Reset + Submit +
+
+
+
+ + diff --git a/templates/index.js b/templates/index.js new file mode 100644 index 0000000000000000000000000000000000000000..81d00836394d24dec6fd489157dfba546104865a --- /dev/null +++ b/templates/index.js @@ -0,0 +1,19 @@ +// index.js +import "@material/web/button/filled-button.js"; +import "@material/web/button/outlined-button.js"; +import "@material/web/checkbox/checkbox.js"; +import "@material/web/field/outlined-field.js"; +import "@material/web/button/outlined-button.js"; +import "@material/web/button/text-button.js"; +import "@material/web/icon/icon.js"; +import "@material/web/iconbutton/icon-button.js"; +import "@material/web/textfield/filled-text-field.js"; +import "@material/web/textfield/outlined-text-field.js"; +import '@material/web/iconbutton/icon-button.js'; +import '@material/web/textfield/filled-text-field.js'; +import '@material/web/radio/radio.js'; +import '@material/web/icon/icon.js'; +import '@material/web/button/filled-tonal-button.js'; +import '@material/web/button/filled-button.js'; +import '@material/web/button/text-button.js'; +import '@material/web/dialog/dialog.js'; diff --git a/templates/login_FILL0_wght400_GRAD0_opsz24 (3).svg b/templates/login_FILL0_wght400_GRAD0_opsz24 (3).svg new file mode 100644 index 0000000000000000000000000000000000000000..5a236f50f2de44b3aca313b3794a9a1f7072ba74 --- /dev/null +++ b/templates/login_FILL0_wght400_GRAD0_opsz24 (3).svg @@ -0,0 +1 @@ +Sign in \ No newline at end of file diff --git a/templates/login_FILL0_wght400_GRAD0_opsz24.svg b/templates/login_FILL0_wght400_GRAD0_opsz24.svg new file mode 100644 index 0000000000000000000000000000000000000000..49c0f547e94aec95af7ed2b90242346e590e56c3 --- /dev/null +++ b/templates/login_FILL0_wght400_GRAD0_opsz24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/package-lock.json b/templates/package-lock.json new file mode 100644 index 0000000000000000000000000000000000000000..37dae5adb2b31afc13030cf1ee68fba741d48e53 --- /dev/null +++ b/templates/package-lock.json @@ -0,0 +1,661 @@ +{ + "name": "nodejs-sandbox", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "nodejs-sandbox", + "version": "1.0.0", + "license": "MIT", + "dependencies": { + "@material/web": "^1.0.0", + "@rollup/plugin-node-resolve": "^15.2.1", + "rollup": "^3.29.4" + }, + "devDependencies": { + "nodemon": "^3.0.1" + } + }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz", + "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==" + }, + "node_modules/@lit/reactive-element": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", + "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, + "node_modules/@material/web": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.0.tgz", + "integrity": "sha512-mNn2qzHvzJLty93NTtnkrSup+Wnte5yAtcZIx0N+WbIZPVlixA2v6wXkqHN1/SJVl0EV2tNT1qz4k0jfTQ+0lw==", + "dependencies": { + "lit": "^2.7.4 || ^3.0.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@rollup/plugin-node-resolve": { + "version": "15.2.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.1.tgz", + "integrity": "sha512-nsbUg588+GDSu8/NS8T4UAshO6xeaOfINNuXeVHcKV02LJtoRaM1SiOacClw4kws1SFiNhdLGxlbMY9ga/zs/w==", + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "@types/resolve": "1.20.2", + "deepmerge": "^4.2.2", + "is-builtin-module": "^3.2.1", + "is-module": "^1.0.0", + "resolve": "^1.22.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^2.78.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz", + "integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==", + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@types/estree": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz", + "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==" + }, + "node_modules/@types/resolve": { + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", + "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==" + }, + "node_modules/@types/trusted-types": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.4.tgz", + "integrity": "sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==" + }, + "node_modules/abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "dev": true, + "license": "ISC" + }, + "node_modules/anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true, + "license": "MIT" + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/builtin-modules": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", + "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==", + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true, + "license": "MIT" + }, + "node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.1" + } + }, + "node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/ignore-by-default": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz", + "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==", + "dev": true, + "license": "ISC" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-builtin-module": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz", + "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==", + "dependencies": { + "builtin-modules": "^3.3.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-core-module": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz", + "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==", + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-module": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", + "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==" + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/lit": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", + "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-element": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", + "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.0", + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.8.0" + } + }, + "node_modules/lit-html": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", + "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, + "node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/nodemon": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.0.1.tgz", + "integrity": "sha512-g9AZ7HmkhQkqXkRc20w+ZfQ73cHLbE8hnPbtaFbFtCumZsjyMhKk9LajQ07U5Ux28lvFjZ5X7HvWR1xzU8jHVw==", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": "^3.5.2", + "debug": "^3.2.7", + "ignore-by-default": "^1.0.1", + "minimatch": "^3.1.2", + "pstree.remy": "^1.1.8", + "semver": "^7.5.3", + "simple-update-notifier": "^2.0.0", + "supports-color": "^5.5.0", + "touch": "^3.1.0", + "undefsafe": "^2.0.5" + }, + "bin": { + "nodemon": "bin/nodemon.js" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/nodemon" + } + }, + "node_modules/nopt": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==", + "dev": true, + "license": "MIT", + "dependencies": { + "abbrev": "1" + }, + "bin": { + "nopt": "bin/nopt.js" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pstree.remy": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz", + "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==", + "dev": true, + "license": "MIT" + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/resolve": { + "version": "1.22.6", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz", + "integrity": "sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==", + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/rollup": { + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "license": "ISC", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/simple-update-notifier": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz", + "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "semver": "^7.5.3" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/touch": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz", + "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==", + "dev": true, + "license": "ISC", + "dependencies": { + "nopt": "~1.0.10" + }, + "bin": { + "nodetouch": "bin/nodetouch.js" + } + }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, + "node_modules/undefsafe": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz", + "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==", + "dev": true, + "license": "MIT" + }, + "node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true, + "license": "ISC" + } + } +} diff --git a/templates/package.json b/templates/package.json new file mode 100644 index 0000000000000000000000000000000000000000..c882fbe0d975bd6f56730072fbc7dcb0332098dc --- /dev/null +++ b/templates/package.json @@ -0,0 +1,28 @@ +{ + "name": "nodejs-sandbox", + "version": "1.0.0", + "description": "", + "main": "index.html", + "scripts": { + "start": "nodemon index.js" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/codesandbox-app/static-template.git" + }, + "keywords": [], + "author": "Ives van Hoorne", + "license": "MIT", + "bugs": { + "url": "https://github.com/codesandbox-app/static-template/issues" + }, + "homepage": "https://github.com/codesandbox-app/static-template#readme", + "devDependencies": { + "nodemon": "^3.0.1" + }, + "dependencies": { + "@material/web": "^1.0.0", + "@rollup/plugin-node-resolve": "^15.2.1", + "rollup": "^3.29.4" + } +} diff --git a/templates/theme.css b/templates/theme.css new file mode 100644 index 0000000000000000000000000000000000000000..4b954d1292bc21e1d769c24b337dbb953ff58bb8 --- /dev/null +++ b/templates/theme.css @@ -0,0 +1,69 @@ +@import url(tokens.css); +@import url(colors.module.css); +@import url(typography.module.css); +@import url(theme.light.css) (prefers-color-scheme: light); +@import url(theme.dark.css) (prefers-color-scheme: dark); +.ipt { + text-align: left; + color: black; +} +body { + font-family: "Google Sans", sans-serif; +} +.svg-icon { + display: inline-flex; + align-self: center; +} +.svg-icon svg { + height: 1em; + width: 1em; +} +.svg-icon.svg-baseline svg { + top: 0.125em; + position: relative; +} +/*-----------------*/ +/*-----------------*/ +/*-----------------*/ +/*PROTOTYPE EXAMPLE*/ +body { + padding: 8px; + font-size: 16px; + font-family: arial; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0 0 16px 0; + padding: 0; + line-height: 1; + font-weight: normal; + position: relative; + color: black; +} +/*H Tag Sizing*/ +h1 { + font-size: 64px; +} +h2 { + font-size: 48px; +} +h3 { + font-size: 32px; +} +h4 { + font-size: 24px; +} +h5 { + font-size: 16px; +} +h6 { + font-size: 12px; +} +p { + margin-top: 0; + margin-bottom: 8px; +} diff --git a/templates/theme.dark.css b/templates/theme.dark.css new file mode 100644 index 0000000000000000000000000000000000000000..295522879dc626e7016f5f75daeaf820f56aceae --- /dev/null +++ b/templates/theme.dark.css @@ -0,0 +1,51 @@ +:root { + --md-sys-color-primary: var(--md-sys-color-primary-dark); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); + --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-dark); + --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-dark); + --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-dark); + --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-dark); + --md-sys-color-secondary: var(--md-sys-color-secondary-dark); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); + --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-dark); + --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-dark); + --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-dark); + --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-dark); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); + --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-dark); + --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-dark); + --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-dark); + --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-dark); + --md-sys-color-error: var(--md-sys-color-error-dark); + --md-sys-color-on-error: var(--md-sys-color-on-error-dark); + --md-sys-color-error-container: var(--md-sys-color-error-container-dark); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); + --md-sys-color-outline: var(--md-sys-color-outline-dark); + --md-sys-color-background: var(--md-sys-color-background-dark); + --md-sys-color-on-background: var(--md-sys-color-on-background-dark); + --md-sys-color-surface: var(--md-sys-color-surface-dark); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); + --md-sys-color-shadow: var(--md-sys-color-shadow-dark); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark); + --md-sys-color-scrim: var(--md-sys-color-scrim-dark); + --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-dark); + --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-dark); + --md-sys-color-surface-container: var(--md-sys-color-surface-container-dark); + --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-dark); + --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-dark); + --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-dark); + --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-dark); +} diff --git a/templates/theme.light.css b/templates/theme.light.css new file mode 100644 index 0000000000000000000000000000000000000000..31821e93cfcdef1e543df332c9b914c35518fb8f --- /dev/null +++ b/templates/theme.light.css @@ -0,0 +1,51 @@ +:root { + --md-sys-color-primary: var(--md-sys-color-primary-light); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); + --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-light); + --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-light); + --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-light); + --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-light); + --md-sys-color-secondary: var(--md-sys-color-secondary-light); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); + --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-light); + --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-light); + --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-light); + --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-light); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); + --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-light); + --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-light); + --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-light); + --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-light); + --md-sys-color-error: var(--md-sys-color-error-light); + --md-sys-color-on-error: var(--md-sys-color-on-error-light); + --md-sys-color-error-container: var(--md-sys-color-error-container-light); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); + --md-sys-color-outline: var(--md-sys-color-outline-light); + --md-sys-color-background: var(--md-sys-color-background-light); + --md-sys-color-on-background: var(--md-sys-color-on-background-light); + --md-sys-color-surface: var(--md-sys-color-surface-light); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); + --md-sys-color-shadow: var(--md-sys-color-shadow-light); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light); + --md-sys-color-scrim: var(--md-sys-color-scrim-light); + --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-light); + --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-light); + --md-sys-color-surface-container: var(--md-sys-color-surface-container-light); + --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-light); + --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-light); + --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-light); + --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-light); +} diff --git a/templates/tokens.css b/templates/tokens.css new file mode 100644 index 0000000000000000000000000000000000000000..9ac22b9bd6801c7e2c9ccce23a13ea6c498765bd --- /dev/null +++ b/templates/tokens.css @@ -0,0 +1,333 @@ +:root { + --md-source: #9cb8fc; + /* primary */ + --md-ref-palette-primary0: #000000; + --md-ref-palette-primary5: #000f2f; + --md-ref-palette-primary10: #001944; + --md-ref-palette-primary20: #002d6d; + --md-ref-palette-primary25: #003783; + --md-ref-palette-primary30: #17438f; + --md-ref-palette-primary35: #27509b; + --md-ref-palette-primary40: #365ca8; + --md-ref-palette-primary50: #5175c3; + --md-ref-palette-primary60: #6b8fdf; + --md-ref-palette-primary70: #86aafc; + --md-ref-palette-primary80: #afc6ff; + --md-ref-palette-primary90: #d9e2ff; + --md-ref-palette-primary95: #edf0ff; + --md-ref-palette-primary98: #faf8ff; + --md-ref-palette-primary99: #fefbff; + --md-ref-palette-primary100: #ffffff; + /* secondary */ + --md-ref-palette-secondary0: #000000; + --md-ref-palette-secondary5: #000f31; + --md-ref-palette-secondary10: #001946; + --md-ref-palette-secondary20: #002c71; + --md-ref-palette-secondary25: #023686; + --md-ref-palette-secondary30: #184392; + --md-ref-palette-secondary35: #284f9f; + --md-ref-palette-secondary40: #375bab; + --md-ref-palette-secondary50: #5174c6; + --md-ref-palette-secondary60: #6c8ee2; + --md-ref-palette-secondary70: #87a9ff; + --md-ref-palette-secondary80: #b1c5ff; + --md-ref-palette-secondary90: #dae2ff; + --md-ref-palette-secondary95: #eef0ff; + --md-ref-palette-secondary98: #faf8ff; + --md-ref-palette-secondary99: #fefbff; + --md-ref-palette-secondary100: #ffffff; + /* tertiary */ + --md-ref-palette-tertiary0: #000000; + --md-ref-palette-tertiary5: #001129; + --md-ref-palette-tertiary10: #001b3b; + --md-ref-palette-tertiary20: #003060; + --md-ref-palette-tertiary25: #003b74; + --md-ref-palette-tertiary30: #004788; + --md-ref-palette-tertiary35: #0d5299; + --md-ref-palette-tertiary40: #235fa6; + --md-ref-palette-tertiary50: #4278c1; + --md-ref-palette-tertiary60: #5e92dd; + --md-ref-palette-tertiary70: #7aadfa; + --md-ref-palette-tertiary80: #a7c8ff; + --md-ref-palette-tertiary90: #d5e3ff; + --md-ref-palette-tertiary95: #ebf1ff; + --md-ref-palette-tertiary98: #f9f9ff; + --md-ref-palette-tertiary99: #fdfbff; + --md-ref-palette-tertiary100: #ffffff; + /* error */ + --md-ref-palette-error0: #000000; + --md-ref-palette-error5: #2d0001; + --md-ref-palette-error10: #410002; + --md-ref-palette-error20: #690005; + --md-ref-palette-error25: #7e0007; + --md-ref-palette-error30: #93000a; + --md-ref-palette-error35: #a80710; + --md-ref-palette-error40: #ba1a1a; + --md-ref-palette-error50: #de3730; + --md-ref-palette-error60: #ff5449; + --md-ref-palette-error70: #ff897d; + --md-ref-palette-error80: #ffb4ab; + --md-ref-palette-error90: #ffdad6; + --md-ref-palette-error95: #ffedea; + --md-ref-palette-error98: #fff8f7; + --md-ref-palette-error99: #fffbff; + --md-ref-palette-error100: #ffffff; + /* neutral */ + --md-ref-palette-neutral0: #000000; + --md-ref-palette-neutral5: #101114; + --md-ref-palette-neutral10: #1b1b1f; + --md-ref-palette-neutral20: #303034; + --md-ref-palette-neutral25: #3b3b3f; + --md-ref-palette-neutral30: #46464a; + --md-ref-palette-neutral35: #525256; + --md-ref-palette-neutral40: #5e5e62; + --md-ref-palette-neutral50: #77767a; + --md-ref-palette-neutral60: #919094; + --md-ref-palette-neutral70: #acaaaf; + --md-ref-palette-neutral80: #000000; + --md-ref-palette-neutral90: #e4e2e6; + --md-ref-palette-neutral95: #f2f0f4; + --md-ref-palette-neutral98: #fbf8fd; + --md-ref-palette-neutral99: #fefbff; + --md-ref-palette-neutral100: #ffffff; + /* neutral-variant */ + --md-ref-palette-neutral-variant0: #000000; + --md-ref-palette-neutral-variant5: #0e1118; + --md-ref-palette-neutral-variant10: #191b23; + --md-ref-palette-neutral-variant20: #2e3038; + --md-ref-palette-neutral-variant25: #393b43; + --md-ref-palette-neutral-variant30: #45464f; + --md-ref-palette-neutral-variant35: #50525a; + --md-ref-palette-neutral-variant40: #5c5e67; + --md-ref-palette-neutral-variant50: #757780; + --md-ref-palette-neutral-variant60: #8f909a; + --md-ref-palette-neutral-variant70: #aaabb4; + --md-ref-palette-neutral-variant80: #c5c6d0; + --md-ref-palette-neutral-variant90: #e1e2ec; + --md-ref-palette-neutral-variant95: #f0f0fa; + --md-ref-palette-neutral-variant98: #faf8ff; + --md-ref-palette-neutral-variant99: #fefbff; + --md-ref-palette-neutral-variant100: #ffffff; + /* light */ + --md-sys-color-primary-light: #365ca8; + --md-sys-color-on-primary-light: #ffffff; + --md-sys-color-primary-container-light: #d9e2ff; + --md-sys-color-on-primary-container-light: #001944; + --md-sys-color-primary-fixed-light: #d9e2ff; + --md-sys-color-on-primary-fixed-light: #001944; + --md-sys-color-primary-fixed-dim-light: #afc6ff; + --md-sys-color-on-primary-fixed-variant-light: #17438f; + --md-sys-color-secondary-light: #375bab; + --md-sys-color-on-secondary-light: #ffffff; + --md-sys-color-secondary-container-light: #dae2ff; + --md-sys-color-on-secondary-container-light: #001946; + --md-sys-color-secondary-fixed-light: #dae2ff; + --md-sys-color-on-secondary-fixed-light: #001946; + --md-sys-color-secondary-fixed-dim-light: #b1c5ff; + --md-sys-color-on-secondary-fixed-variant-light: #184392; + --md-sys-color-tertiary-light: #235fa6; + --md-sys-color-on-tertiary-light: #ffffff; + --md-sys-color-tertiary-container-light: #d5e3ff; + --md-sys-color-on-tertiary-container-light: #001b3b; + --md-sys-color-tertiary-fixed-light: #d5e3ff; + --md-sys-color-on-tertiary-fixed-light: #001b3b; + --md-sys-color-tertiary-fixed-dim-light: #a7c8ff; + --md-sys-color-on-tertiary-fixed-variant-light: #004788; + --md-sys-color-error-light: #ba1a1a; + --md-sys-color-on-error-light: #ffffff; + --md-sys-color-error-container-light: #ffdad6; + --md-sys-color-on-error-container-light: #410002; + --md-sys-color-outline-light: #757780; + --md-sys-color-background-light: #fefbff; + --md-sys-color-on-background-light: #1b1b1f; + --md-sys-color-surface-light: #fbf8fd; + --md-sys-color-on-surface-light: #1b1b1f; + --md-sys-color-surface-variant-light: #e1e2ec; + --md-sys-color-on-surface-variant-light: #45464f; + --md-sys-color-inverse-surface-light: #303034; + --md-sys-color-inverse-on-surface-light: #f2f0f4; + --md-sys-color-inverse-primary-light: #afc6ff; + --md-sys-color-shadow-light: #000000; + --md-sys-color-surface-tint-light: #365ca8; + --md-sys-color-outline-variant-light: #c5c6d0; + --md-sys-color-scrim-light: #000000; + --md-sys-color-surface-container-highest-light: #e4e2e6; + --md-sys-color-surface-container-high-light: #e9e7ec; + --md-sys-color-surface-container-light: #efedf1; + --md-sys-color-surface-container-low-light: #f5f3f7; + --md-sys-color-surface-container-lowest-light: #ffffff; + --md-sys-color-surface-bright-light: #fbf8fd; + --md-sys-color-surface-dim-light: #dbd9dd; + /* dark */ + --md-sys-color-primary-dark: #afc6ff; + --md-sys-color-on-primary-dark: #002d6d; + --md-sys-color-primary-container-dark: #17438f; + --md-sys-color-on-primary-container-dark: #d9e2ff; + --md-sys-color-primary-fixed-dark: #d9e2ff; + --md-sys-color-on-primary-fixed-dark: #001944; + --md-sys-color-primary-fixed-dim-dark: #afc6ff; + --md-sys-color-on-primary-fixed-variant-dark: #17438f; + --md-sys-color-secondary-dark: #b1c5ff; + --md-sys-color-on-secondary-dark: #002c71; + --md-sys-color-secondary-container-dark: #184392; + --md-sys-color-on-secondary-container-dark: #dae2ff; + --md-sys-color-secondary-fixed-dark: #dae2ff; + --md-sys-color-on-secondary-fixed-dark: #001946; + --md-sys-color-secondary-fixed-dim-dark: #b1c5ff; + --md-sys-color-on-secondary-fixed-variant-dark: #184392; + --md-sys-color-tertiary-dark: #a7c8ff; + --md-sys-color-on-tertiary-dark: #003060; + --md-sys-color-tertiary-container-dark: #004788; + --md-sys-color-on-tertiary-container-dark: #d5e3ff; + --md-sys-color-tertiary-fixed-dark: #d5e3ff; + --md-sys-color-on-tertiary-fixed-dark: #001b3b; + --md-sys-color-tertiary-fixed-dim-dark: #a7c8ff; + --md-sys-color-on-tertiary-fixed-variant-dark: #004788; + --md-sys-color-error-dark: #ffb4ab; + --md-sys-color-on-error-dark: #690005; + --md-sys-color-error-container-dark: #93000a; + --md-sys-color-on-error-container-dark: #ffdad6; + --md-sys-color-outline-dark: #8f909a; + --md-sys-color-background-dark: #1b1b1f; + --md-sys-color-on-background-dark: #e4e2e6; + --md-sys-color-surface-dark: #131316; + --md-sys-color-on-surface-dark: #c7c6ca; + --md-sys-color-surface-variant-dark: #45464f; + --md-sys-color-on-surface-variant-dark: #c5c6d0; + --md-sys-color-inverse-surface-dark: #e4e2e6; + --md-sys-color-inverse-on-surface-dark: #1b1b1f; + --md-sys-color-inverse-primary-dark: #365ca8; + --md-sys-color-shadow-dark: #000000; + --md-sys-color-surface-tint-dark: #afc6ff; + --md-sys-color-outline-variant-dark: #45464f; + --md-sys-color-scrim-dark: #000000; + --md-sys-color-surface-container-highest-dark: #343438; + --md-sys-color-surface-container-high-dark: #292a2d; + --md-sys-color-surface-container-dark: #1f1f23; + --md-sys-color-surface-container-low-dark: #1b1b1f; + --md-sys-color-surface-container-lowest-dark: #0d0e11; + --md-sys-color-surface-bright-dark: #39393c; + --md-sys-color-surface-dim-dark: #131316; + /* display - large */ + --md-sys-typescale-display-large-font-family-name: "Google Sans"; + --md-sys-typescale-display-large-font-family-style: Regular; + --md-sys-typescale-display-large-font-weight: 400px; + --md-sys-typescale-display-large-font-size: 57px; + --md-sys-typescale-display-large-line-height: 64px; + --md-sys-typescale-display-large-letter-spacing: -0.25px; + /* display - medium */ + --md-sys-typescale-display-medium-font-family-name: "Google Sans"; + --md-sys-typescale-display-medium-font-family-style: Regular; + --md-sys-typescale-display-medium-font-weight: 400px; + --md-sys-typescale-display-medium-font-size: 45px; + --md-sys-typescale-display-medium-line-height: 52px; + --md-sys-typescale-display-medium-letter-spacing: 0px; + /* display - small */ + --md-sys-typescale-display-small-font-family-name: "Google Sans"; + --md-sys-typescale-display-small-font-family-style: Regular; + --md-sys-typescale-display-small-font-weight: 400px; + --md-sys-typescale-display-small-font-size: 36px; + --md-sys-typescale-display-small-line-height: 44px; + --md-sys-typescale-display-small-letter-spacing: 0px; + /* headline - large */ + --md-sys-typescale-headline-large-font-family-name: "Google Sans"; + --md-sys-typescale-headline-large-font-family-style: Regular; + --md-sys-typescale-headline-large-font-weight: 400px; + --md-sys-typescale-headline-large-font-size: 32px; + --md-sys-typescale-headline-large-line-height: 40px; + --md-sys-typescale-headline-large-letter-spacing: 0px; + /* headline - medium */ + --md-sys-typescale-headline-medium-font-family-name: "Google Sans"; + --md-sys-typescale-headline-medium-font-family-style: Regular; + --md-sys-typescale-headline-medium-font-weight: 400px; + --md-sys-typescale-headline-medium-font-size: 28px; + --md-sys-typescale-headline-medium-line-height: 36px; + --md-sys-typescale-headline-medium-letter-spacing: 0px; + /* headline - small */ + --md-sys-typescale-headline-small-font-family-name: "Google Sans"; + --md-sys-typescale-headline-small-font-family-style: Regular; + --md-sys-typescale-headline-small-font-weight: 400px; + --md-sys-typescale-headline-small-font-size: 24px; + --md-sys-typescale-headline-small-line-height: 32px; + --md-sys-typescale-headline-small-letter-spacing: 0px; + /* body - large */ + --md-sys-typescale-body-large-font-family-name: "Google Sans"; + --md-sys-typescale-body-large-font-family-style: Regular; + --md-sys-typescale-body-large-font-weight: 400px; + --md-sys-typescale-body-large-font-size: 16px; + --md-sys-typescale-body-large-line-height: 24px; + --md-sys-typescale-body-large-letter-spacing: 0.5px; + /* body - medium */ + --md-sys-typescale-body-medium-font-family-name: "Google Sans"; + --md-sys-typescale-body-medium-font-family-style: Regular; + --md-sys-typescale-body-medium-font-weight: 400px; + --md-sys-typescale-body-medium-font-size: 14px; + --md-sys-typescale-body-medium-line-height: 20px; + --md-sys-typescale-body-medium-letter-spacing: 0.25px; + /* body - small */ + --md-sys-typescale-body-small-font-family-name: "Google Sans"; + --md-sys-typescale-body-small-font-family-style: Regular; + --md-sys-typescale-body-small-font-weight: 400px; + --md-sys-typescale-body-small-font-size: 12px; + --md-sys-typescale-body-small-line-height: 16px; + --md-sys-typescale-body-small-letter-spacing: 0.4px; + /* label - large */ + --md-sys-typescale-label-large-font-family-name: "Google Sans"; + --md-sys-typescale-label-large-font-family-style: Medium; + --md-sys-typescale-label-large-font-weight: 500px; + --md-sys-typescale-label-large-font-size: 14px; + --md-sys-typescale-label-large-line-height: 20px; + --md-sys-typescale-label-large-letter-spacing: 0.1px; + /* label - medium */ + --md-sys-typescale-label-medium-font-family-name: "Google Sans"; + --md-sys-typescale-label-medium-font-family-style: Medium; + --md-sys-typescale-label-medium-font-weight: 500px; + --md-sys-typescale-label-medium-font-size: 12px; + --md-sys-typescale-label-medium-line-height: 16px; + --md-sys-typescale-label-medium-letter-spacing: 0.5px; + /* label - small */ + --md-sys-typescale-label-small-font-family-name: "Google Sans"; + --md-sys-typescale-label-small-font-family-style: Medium; + --md-sys-typescale-label-small-font-weight: 500px; + --md-sys-typescale-label-small-font-size: 11px; + --md-sys-typescale-label-small-line-height: 16px; + --md-sys-typescale-label-small-letter-spacing: 0.5px; + /* title - large */ + --md-sys-typescale-title-large-font-family-name: "Google Sans"; + --md-sys-typescale-title-large-font-family-style: Regular; + --md-sys-typescale-title-large-font-weight: 400px; + --md-sys-typescale-title-large-font-size: 22px; + --md-sys-typescale-title-large-line-height: 28px; + --md-sys-typescale-title-large-letter-spacing: 0px; + /* title - medium */ + --md-sys-typescale-title-medium-font-family-name: "Google Sans"; + --md-sys-typescale-title-medium-font-family-style: Medium; + --md-sys-typescale-title-medium-font-weight: 500px; + --md-sys-typescale-title-medium-font-size: 16px; + --md-sys-typescale-title-medium-line-height: 24px; + --md-sys-typescale-title-medium-letter-spacing: 0.15px; + /* title - small */ + --md-sys-typescale-title-small-font-family-name: "Google Sans"; + --md-sys-typescale-title-small-font-family-style: Medium; + --md-sys-typescale-title-small-font-weight: 500px; + --md-sys-typescale-title-small-font-size: 14px; + --md-sys-typescale-title-small-line-height: 20px; + --md-sys-typescale-title-small-letter-spacing: 0.1px; +} + +body { + font-family: "Google Sans", sans-serif; +} +.container { + text-align: center; +} +.flex { + margin: auto; + display: flex; + align-items: center; + justify-content: center; + top: 50%; +} +input { + border-color: -internal-light-dark(rgb(0, 0, 0), rgb(0, 0, 0)); +} diff --git a/templates/typography.module.css b/templates/typography.module.css new file mode 100644 index 0000000000000000000000000000000000000000..5e2c82f94d55db25a42c9d71e2bc369fe66fbdd0 --- /dev/null +++ b/templates/typography.module.css @@ -0,0 +1,150 @@ +.display-large{ + font-family: var(--md-sys-typescale-display-large-font-family-name); + font-style: var(--md-sys-typescale-display-large-font-family-style); + font-weight: var(--md-sys-typescale-display-large-font-weight); + font-size: var(--md-sys-typescale-display-large-font-size); + letter-spacing: var(--md-sys-typescale-display-large-tracking); + line-height: var(--md-sys-typescale-display-large-height); + text-transform: var(--md-sys-typescale-display-large-text-transform); + text-decoration: var(--md-sys-typescale-display-large-text-decoration); +} +.display-medium{ + font-family: var(--md-sys-typescale-display-medium-font-family-name); + font-style: var(--md-sys-typescale-display-medium-font-family-style); + font-weight: var(--md-sys-typescale-display-medium-font-weight); + font-size: var(--md-sys-typescale-display-medium-font-size); + letter-spacing: var(--md-sys-typescale-display-medium-tracking); + line-height: var(--md-sys-typescale-display-medium-height); + text-transform: var(--md-sys-typescale-display-medium-text-transform); + text-decoration: var(--md-sys-typescale-display-medium-text-decoration); +} +.display-small{ + font-family: var(--md-sys-typescale-display-small-font-family-name); + font-style: var(--md-sys-typescale-display-small-font-family-style); + font-weight: var(--md-sys-typescale-display-small-font-weight); + font-size: var(--md-sys-typescale-display-small-font-size); + letter-spacing: var(--md-sys-typescale-display-small-tracking); + line-height: var(--md-sys-typescale-display-small-height); + text-transform: var(--md-sys-typescale-display-small-text-transform); + text-decoration: var(--md-sys-typescale-display-small-text-decoration); +} +.headline-large{ + font-family: var(--md-sys-typescale-headline-large-font-family-name); + font-style: var(--md-sys-typescale-headline-large-font-family-style); + font-weight: var(--md-sys-typescale-headline-large-font-weight); + font-size: var(--md-sys-typescale-headline-large-font-size); + letter-spacing: var(--md-sys-typescale-headline-large-tracking); + line-height: var(--md-sys-typescale-headline-large-height); + text-transform: var(--md-sys-typescale-headline-large-text-transform); + text-decoration: var(--md-sys-typescale-headline-large-text-decoration); +} +.headline-medium{ + font-family: var(--md-sys-typescale-headline-medium-font-family-name); + font-style: var(--md-sys-typescale-headline-medium-font-family-style); + font-weight: var(--md-sys-typescale-headline-medium-font-weight); + font-size: var(--md-sys-typescale-headline-medium-font-size); + letter-spacing: var(--md-sys-typescale-headline-medium-tracking); + line-height: var(--md-sys-typescale-headline-medium-height); + text-transform: var(--md-sys-typescale-headline-medium-text-transform); + text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); +} +.headline-small{ + font-family: var(--md-sys-typescale-headline-small-font-family-name); + font-style: var(--md-sys-typescale-headline-small-font-family-style); + font-weight: var(--md-sys-typescale-headline-small-font-weight); + font-size: var(--md-sys-typescale-headline-small-font-size); + letter-spacing: var(--md-sys-typescale-headline-small-tracking); + line-height: var(--md-sys-typescale-headline-small-height); + text-transform: var(--md-sys-typescale-headline-small-text-transform); + text-decoration: var(--md-sys-typescale-headline-small-text-decoration); +} +.body-large{ + font-family: var(--md-sys-typescale-body-large-font-family-name); + font-style: var(--md-sys-typescale-body-large-font-family-style); + font-weight: var(--md-sys-typescale-body-large-font-weight); + font-size: var(--md-sys-typescale-body-large-font-size); + letter-spacing: var(--md-sys-typescale-body-large-tracking); + line-height: var(--md-sys-typescale-body-large-height); + text-transform: var(--md-sys-typescale-body-large-text-transform); + text-decoration: var(--md-sys-typescale-body-large-text-decoration); +} +.body-medium{ + font-family: var(--md-sys-typescale-body-medium-font-family-name); + font-style: var(--md-sys-typescale-body-medium-font-family-style); + font-weight: var(--md-sys-typescale-body-medium-font-weight); + font-size: var(--md-sys-typescale-body-medium-font-size); + letter-spacing: var(--md-sys-typescale-body-medium-tracking); + line-height: var(--md-sys-typescale-body-medium-height); + text-transform: var(--md-sys-typescale-body-medium-text-transform); + text-decoration: var(--md-sys-typescale-body-medium-text-decoration); +} +.body-small{ + font-family: var(--md-sys-typescale-body-small-font-family-name); + font-style: var(--md-sys-typescale-body-small-font-family-style); + font-weight: var(--md-sys-typescale-body-small-font-weight); + font-size: var(--md-sys-typescale-body-small-font-size); + letter-spacing: var(--md-sys-typescale-body-small-tracking); + line-height: var(--md-sys-typescale-body-small-height); + text-transform: var(--md-sys-typescale-body-small-text-transform); + text-decoration: var(--md-sys-typescale-body-small-text-decoration); +} +.label-large{ + font-family: var(--md-sys-typescale-label-large-font-family-name); + font-style: var(--md-sys-typescale-label-large-font-family-style); + font-weight: var(--md-sys-typescale-label-large-font-weight); + font-size: var(--md-sys-typescale-label-large-font-size); + letter-spacing: var(--md-sys-typescale-label-large-tracking); + line-height: var(--md-sys-typescale-label-large-height); + text-transform: var(--md-sys-typescale-label-large-text-transform); + text-decoration: var(--md-sys-typescale-label-large-text-decoration); +} +.label-medium{ + font-family: var(--md-sys-typescale-label-medium-font-family-name); + font-style: var(--md-sys-typescale-label-medium-font-family-style); + font-weight: var(--md-sys-typescale-label-medium-font-weight); + font-size: var(--md-sys-typescale-label-medium-font-size); + letter-spacing: var(--md-sys-typescale-label-medium-tracking); + line-height: var(--md-sys-typescale-label-medium-height); + text-transform: var(--md-sys-typescale-label-medium-text-transform); + text-decoration: var(--md-sys-typescale-label-medium-text-decoration); +} +.label-small{ + font-family: var(--md-sys-typescale-label-small-font-family-name); + font-style: var(--md-sys-typescale-label-small-font-family-style); + font-weight: var(--md-sys-typescale-label-small-font-weight); + font-size: var(--md-sys-typescale-label-small-font-size); + letter-spacing: var(--md-sys-typescale-label-small-tracking); + line-height: var(--md-sys-typescale-label-small-height); + text-transform: var(--md-sys-typescale-label-small-text-transform); + text-decoration: var(--md-sys-typescale-label-small-text-decoration); +} +.title-large{ + font-family: var(--md-sys-typescale-title-large-font-family-name); + font-style: var(--md-sys-typescale-title-large-font-family-style); + font-weight: var(--md-sys-typescale-title-large-font-weight); + font-size: var(--md-sys-typescale-title-large-font-size); + letter-spacing: var(--md-sys-typescale-title-large-tracking); + line-height: var(--md-sys-typescale-title-large-height); + text-transform: var(--md-sys-typescale-title-large-text-transform); + text-decoration: var(--md-sys-typescale-title-large-text-decoration); +} +.title-medium{ + font-family: var(--md-sys-typescale-title-medium-font-family-name); + font-style: var(--md-sys-typescale-title-medium-font-family-style); + font-weight: var(--md-sys-typescale-title-medium-font-weight); + font-size: var(--md-sys-typescale-title-medium-font-size); + letter-spacing: var(--md-sys-typescale-title-medium-tracking); + line-height: var(--md-sys-typescale-title-medium-height); + text-transform: var(--md-sys-typescale-title-medium-text-transform); + text-decoration: var(--md-sys-typescale-title-medium-text-decoration); +} +.title-small{ + font-family: var(--md-sys-typescale-title-small-font-family-name); + font-style: var(--md-sys-typescale-title-small-font-family-style); + font-weight: var(--md-sys-typescale-title-small-font-weight); + font-size: var(--md-sys-typescale-title-small-font-size); + letter-spacing: var(--md-sys-typescale-title-small-tracking); + line-height: var(--md-sys-typescale-title-small-height); + text-transform: var(--md-sys-typescale-title-small-text-transform); + text-decoration: var(--md-sys-typescale-title-small-text-decoration); +} diff --git a/templates/yarn.lock b/templates/yarn.lock new file mode 100644 index 0000000000000000000000000000000000000000..5bbb25c416289ba7879234a11085c8a1a174212c --- /dev/null +++ b/templates/yarn.lock @@ -0,0 +1,383 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0": + version "1.1.1" + resolved "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz" + integrity sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ== + +"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.6.0": + version "1.6.3" + resolved "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz" + integrity sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.0.0" + +"@material/web@^1.0.0": + version "1.0.0" + resolved "https://registry.npmjs.org/@material/web/-/web-1.0.0.tgz" + integrity sha512-mNn2qzHvzJLty93NTtnkrSup+Wnte5yAtcZIx0N+WbIZPVlixA2v6wXkqHN1/SJVl0EV2tNT1qz4k0jfTQ+0lw== + dependencies: + lit "^2.7.4 || ^3.0.0" + tslib "^2.4.0" + +"@rollup/plugin-node-resolve@^15.2.1": + version "15.2.1" + resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.1.tgz" + integrity sha512-nsbUg588+GDSu8/NS8T4UAshO6xeaOfINNuXeVHcKV02LJtoRaM1SiOacClw4kws1SFiNhdLGxlbMY9ga/zs/w== + dependencies: + "@rollup/pluginutils" "^5.0.1" + "@types/resolve" "1.20.2" + deepmerge "^4.2.2" + is-builtin-module "^3.2.1" + is-module "^1.0.0" + resolve "^1.22.1" + +"@rollup/pluginutils@^5.0.1": + version "5.0.4" + resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz" + integrity sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g== + dependencies: + "@types/estree" "^1.0.0" + estree-walker "^2.0.2" + picomatch "^2.3.1" + +"@types/estree@^1.0.0": + version "1.0.2" + resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz" + integrity sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA== + +"@types/resolve@1.20.2": + version "1.20.2" + resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz" + integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q== + +"@types/trusted-types@^2.0.2": + version "2.0.4" + resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.4.tgz" + integrity sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ== + +abbrev@1: + version "1.1.1" + resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz" + integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q== + +anymatch@~3.1.2: + version "3.1.2" + resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz" + integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + +balanced-match@^1.0.0: + version "1.0.2" + resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz" + integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== + +binary-extensions@^2.0.0: + version "2.2.0" + resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz" + integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== + +brace-expansion@^1.1.7: + version "1.1.11" + resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz" + integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== + dependencies: + balanced-match "^1.0.0" + concat-map "0.0.1" + +braces@~3.0.2: + version "3.0.2" + resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz" + integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== + dependencies: + fill-range "^7.0.1" + +builtin-modules@^3.3.0: + version "3.3.0" + resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz" + integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw== + +chokidar@^3.5.2: + version "3.5.3" + resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz" + integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + +concat-map@0.0.1: + version "0.0.1" + resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz" + integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg== + +debug@^3.2.7: + version "3.2.7" + resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz" + integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ== + dependencies: + ms "^2.1.1" + +deepmerge@^4.2.2: + version "4.3.1" + resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz" + integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== + +estree-walker@^2.0.2: + version "2.0.2" + resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz" + integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== + +fill-range@^7.0.1: + version "7.0.1" + resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz" + integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== + dependencies: + to-regex-range "^5.0.1" + +function-bind@^1.1.1: + version "1.1.1" + resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz" + integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== + +glob-parent@~5.1.2: + version "5.1.2" + resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz" + integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== + dependencies: + is-glob "^4.0.1" + +has-flag@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz" + integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw== + +has@^1.0.3: + version "1.0.3" + resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz" + integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== + dependencies: + function-bind "^1.1.1" + +ignore-by-default@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz" + integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA== + +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + +is-builtin-module@^3.2.1: + version "3.2.1" + resolved "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz" + integrity sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A== + dependencies: + builtin-modules "^3.3.0" + +is-core-module@^2.13.0: + version "2.13.0" + resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz" + integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ== + dependencies: + has "^1.0.3" + +is-extglob@^2.1.1: + version "2.1.1" + resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz" + integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== + +is-glob@^4.0.1, is-glob@~4.0.1: + version "4.0.3" + resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz" + integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== + dependencies: + is-extglob "^2.1.1" + +is-module@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz" + integrity sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g== + +is-number@^7.0.0: + version "7.0.0" + resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz" + integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== + +lit-element@^3.3.0: + version "3.3.3" + resolved "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz" + integrity sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.1.0" + "@lit/reactive-element" "^1.3.0" + lit-html "^2.8.0" + +lit-html@^2.8.0: + version "2.8.0" + resolved "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz" + integrity sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q== + dependencies: + "@types/trusted-types" "^2.0.2" + +"lit@^2.7.4 || ^3.0.0": + version "2.8.0" + resolved "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz" + integrity sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA== + dependencies: + "@lit/reactive-element" "^1.6.0" + lit-element "^3.3.0" + lit-html "^2.8.0" + +lru-cache@^6.0.0: + version "6.0.0" + resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz" + integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA== + dependencies: + yallist "^4.0.0" + +minimatch@^3.1.2: + version "3.1.2" + resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz" + integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== + dependencies: + brace-expansion "^1.1.7" + +ms@^2.1.1: + version "2.1.3" + resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz" + integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== + +nodemon@^3.0.1: + version "3.0.1" + resolved "https://registry.npmjs.org/nodemon/-/nodemon-3.0.1.tgz" + integrity sha512-g9AZ7HmkhQkqXkRc20w+ZfQ73cHLbE8hnPbtaFbFtCumZsjyMhKk9LajQ07U5Ux28lvFjZ5X7HvWR1xzU8jHVw== + dependencies: + chokidar "^3.5.2" + debug "^3.2.7" + ignore-by-default "^1.0.1" + minimatch "^3.1.2" + pstree.remy "^1.1.8" + semver "^7.5.3" + simple-update-notifier "^2.0.0" + supports-color "^5.5.0" + touch "^3.1.0" + undefsafe "^2.0.5" + +nopt@~1.0.10: + version "1.0.10" + resolved "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz" + integrity sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg== + dependencies: + abbrev "1" + +normalize-path@^3.0.0, normalize-path@~3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz" + integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== + +path-parse@^1.0.7: + version "1.0.7" + resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== + +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1: + version "2.3.1" + resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz" + integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== + +pstree.remy@^1.1.8: + version "1.1.8" + resolved "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz" + integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w== + +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + +resolve@^1.22.1: + version "1.22.6" + resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz" + integrity sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw== + dependencies: + is-core-module "^2.13.0" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + +rollup@^1.20.0||^2.0.0||^3.0.0, rollup@^2.78.0||^3.0.0, rollup@^3.29.4: + version "3.29.4" + resolved "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz" + integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw== + optionalDependencies: + fsevents "~2.3.2" + +semver@^7.5.3: + version "7.5.4" + resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz" + integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== + dependencies: + lru-cache "^6.0.0" + +simple-update-notifier@^2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz" + integrity sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w== + dependencies: + semver "^7.5.3" + +supports-color@^5.5.0: + version "5.5.0" + resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz" + integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== + dependencies: + has-flag "^3.0.0" + +supports-preserve-symlinks-flag@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz" + integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== + +to-regex-range@^5.0.1: + version "5.0.1" + resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz" + integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== + dependencies: + is-number "^7.0.0" + +touch@^3.1.0: + version "3.1.0" + resolved "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz" + integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA== + dependencies: + nopt "~1.0.10" + +tslib@^2.4.0: + version "2.6.2" + resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + +undefsafe@^2.0.5: + version "2.0.5" + resolved "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz" + integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA== + +yallist@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz" + integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==