From 1444c945deaa01bf6f116f837dbbd79f3afa12ed Mon Sep 17 00:00:00 2001 From: Tasia Date: Thu, 22 Feb 2024 23:18:12 +0100 Subject: [PATCH 1/7] feat: Create the user settings app --- apps/user_settings.json | 4 + apps/user_settings/app.js | 24 +++++ apps/user_settings/body.html | 130 ++++++++++++++++++++++++++++ apps/user_settings/script.js | 3 + apps/user_settings/style.css | 1 + apps/user_settings/tildefriends.css | 114 ++++++++++++++++++++++++ 6 files changed, 276 insertions(+) create mode 100644 apps/user_settings.json create mode 100644 apps/user_settings/app.js create mode 100644 apps/user_settings/body.html create mode 100644 apps/user_settings/script.js create mode 100644 apps/user_settings/style.css create mode 100644 apps/user_settings/tildefriends.css diff --git a/apps/user_settings.json b/apps/user_settings.json new file mode 100644 index 00000000..94b06629 --- /dev/null +++ b/apps/user_settings.json @@ -0,0 +1,4 @@ +{ + "type": "tildefriends-app", + "emoji": "⚙️" +} \ No newline at end of file diff --git a/apps/user_settings/app.js b/apps/user_settings/app.js new file mode 100644 index 00000000..e01f0e36 --- /dev/null +++ b/apps/user_settings/app.js @@ -0,0 +1,24 @@ +async function main() { + // Get body.html + const body = utf8Decode(await getFile("body.html")); + + // Build the document + const document = ` + + + + + + + + + + ${body} + + `; + + // Send it to the browser + app.setDocument(document); +} + +main(); diff --git a/apps/user_settings/body.html b/apps/user_settings/body.html new file mode 100644 index 00000000..b0a7dc8a --- /dev/null +++ b/apps/user_settings/body.html @@ -0,0 +1,130 @@ +

h1

+

h2

+

h3

+ +Notice: this example app fetches an image and an audio file from a third-party website. +Those will not work offline. This is a link. + +
+
+ + + + + + + +
+
+ + +x = 5; +y = 6; +z = x + y; + + +
+
+ + + +
+ +Italian Trulli + + +
+ Hello +
+ Hello +
+ Hello +
+ Hello +
+
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim leo a urna gravida, vel pulvinar magna blandit. Cras eleifend, elit ac faucibus gravida, justo mauris ornare nisi, eget ultrices lorem tortor vitae purus. Quisque et dui arcu. Nam semper, mauris id molestie imperdiet, risus nunc dignissim dolor, nec cursus elit mi sit amet dui. Nulla aliquam id mauris sed posuere. Nam mollis velit luctus accumsan aliquam. In tempor, felis id finibus tincidunt, erat nulla vehicula orci, a venenatis mauris nunc et diam. Aliquam lorem sem, iaculis ut mollis in, feugiat a mauris. Nam laoreet vestibulum leo a aliquet. Nam sit amet neque erat.

+ +

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor, sem ac pretium accumsan, dui sapien placerat ligula, ut maximus lacus eros sed tortor. Vivamus finibus facilisis felis, quis dictum felis vestibulum nec. Mauris eu facilisis est, nec tempor sem. Quisque ac ultricies tortor. Morbi et ante at dolor accumsan molestie. Curabitur facilisis condimentum lorem a luctus. Quisque lectus risus, vestibulum non malesuada quis, porta sed urna. Sed elementum magna in velit sagittis, vel fringilla ipsum pulvinar. Morbi nec lectus egestas, laoreet erat fringilla, tristique quam.

+ +

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu mattis ante. Donec venenatis pretium ornare. Nulla vel purus cursus, molestie velit a, vehicula mi. Phasellus ac eleifend sapien, in euismod mauris. Donec quis nisi sodales, accumsan mi sed, malesuada purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent venenatis enim et nisi interdum, nec sodales diam suscipit. Etiam nisl neque, dapibus id felis eget, laoreet posuere eros. Donec arcu neque, aliquam vel fringilla ut, laoreet in velit. Ut tincidunt rutrum eros vel fringilla. Sed at eleifend sem. Pellentesque ut leo in ligula accumsan dignissim quis at justo. Donec luctus felis sed lacus pharetra aliquam. Nam volutpat quis tellus eget lobortis. Proin ultrices ante vitae quam efficitur accumsan.

+ +

Here is a quote from WWF's website:

+ +
+For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly
+ +

An Unordered HTML List

+ + + +

An Ordered HTML List

+ +
    +
  1. Coffee
    2. +
  2. Tea
    3. +
  3. Milk
    4. +
+ + + +
+
+ + + + +
+
+ + \ No newline at end of file diff --git a/apps/user_settings/script.js b/apps/user_settings/script.js new file mode 100644 index 00000000..93968b41 --- /dev/null +++ b/apps/user_settings/script.js @@ -0,0 +1,3 @@ +function hello() { + alert("Hello !"); +} \ No newline at end of file diff --git a/apps/user_settings/style.css b/apps/user_settings/style.css new file mode 100644 index 00000000..c84ecefc --- /dev/null +++ b/apps/user_settings/style.css @@ -0,0 +1 @@ +/* */ \ No newline at end of file diff --git a/apps/user_settings/tildefriends.css b/apps/user_settings/tildefriends.css new file mode 100644 index 00000000..01c0e50e --- /dev/null +++ b/apps/user_settings/tildefriends.css @@ -0,0 +1,114 @@ +/* + * Tilde Friends core stylesheet + * This is a prototype; things may change based on feedback. + * + * This Software is an external library that is part of + * Tilde Friends and is shared under the MIT license. + * + * Inject this file in your app at tildefriends.css + * and use this tag to import it: + * + * + * Revision 0 / 2024 M02 19 + */ + +body { + color: white; + font-family: sans-serif; +} + +button, +.button, +input[type=button], +input[type=submit], +input[type=dropdown] { + border: none; + border-radius: 8px; + padding: 8px 12px; + text-align: center; + text-decoration: none; + display: inline-block; + margin: 4px; + + &.red { + background-color: #bd1e24; + color: white; + } + + &.green { + background-color: #18922d; + color: white; + } + + &.blue { + background-color: #0067a7; + color: white; + } + + &.yellow { + background-color: #ee9600; + color: black; + } + + &:hover { + filter: brightness(0.75); + } +} + +a:link { + color: #268bd2; +} + +a:visited { + color: #6c71c4; +} + +a:hover { + color: #859900; +} + +a:active { + color: #2aa198; +} + +table { + border-collapse: collapse; + width: 100%; +} + +td, th { + border: 1px solid #ffffff40; + text-align: left; + padding: 8px; +} + +tr:nth-child(even) { + background-color: #ffffff20; +} + +.flex { + display: flex; +} + +.flex-column { + display: flex; + flex-direction: column; +} + +.flex-row { + display: flex; + flex-direction: row; +} + +.inline-flex-row { + display: inline-flex; + flex-direction: row; +} + +.box { + background-color: #00000020; + border: 1px solid grey; + border-radius: 8px; + padding: 16px; + margin: 4px; +} -- 2.39.5 From f9e95e57337cc09c13a687c4a9b8792e9d1c23d1 Mon Sep 17 00:00:00 2001 From: Tasia Date: Thu, 22 Feb 2024 23:28:15 +0100 Subject: [PATCH 2/7] test --- apps/user_settings/body.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/user_settings/body.html b/apps/user_settings/body.html index b0a7dc8a..739576ed 100644 --- a/apps/user_settings/body.html +++ b/apps/user_settings/body.html @@ -1,6 +1,6 @@

h1

h2

-

h3

+

hxc3

Notice: this example app fetches an image and an audio file from a third-party website. Those will not work offline. This is a link. -- 2.39.5 From 88ee0aa6f0c21356101a2b26508f0ada47d23990 Mon Sep 17 00:00:00 2001 From: Tasia Iso Date: Thu, 21 Mar 2024 19:25:07 +0100 Subject: [PATCH 3/7] feat(user_settings): finish ui, add ability to export and create identities, add tildefriends.css to the /static/ folder --- apps/user_settings/app.js | 30 +++- apps/user_settings/body.html | 136 ++---------------- apps/user_settings/lit-all.min.js | 120 ++++++++++++++++ apps/user_settings/lit-all.min.js.map | 1 + apps/user_settings/script.js | 4 +- apps/user_settings/tf-delete-account-btn.js | 36 +++++ apps/user_settings/tf-identity-manager.js | 61 ++++++++ apps/user_settings/tf-password-form.js | 68 +++++++++ apps/user_settings/tf-theme-picker.js | 40 ++++++ .../tildefriends-v1.css | 7 +- src/httpd.js.c | 1 + 11 files changed, 370 insertions(+), 134 deletions(-) create mode 100644 apps/user_settings/lit-all.min.js create mode 100644 apps/user_settings/lit-all.min.js.map create mode 100644 apps/user_settings/tf-delete-account-btn.js create mode 100644 apps/user_settings/tf-identity-manager.js create mode 100644 apps/user_settings/tf-password-form.js create mode 100644 apps/user_settings/tf-theme-picker.js rename apps/user_settings/tildefriends.css => core/tildefriends-v1.css (89%) diff --git a/apps/user_settings/app.js b/apps/user_settings/app.js index e01f0e36..dbfbfbc0 100644 --- a/apps/user_settings/app.js +++ b/apps/user_settings/app.js @@ -1,18 +1,40 @@ +import * as tfrpc from '/tfrpc.js'; + +tfrpc.register(async function getIdentities() { + return ssb.getIdentities(); +}); +tfrpc.register(async function getPrivateKey(id) { + return bip39Words(await ssb.getPrivateKey(id)); +}); +tfrpc.register(async function getThemes() { + // TODO + return ['solarized', 'gruvbox', 'light']; +}); +tfrpc.register(async function setTheme() { + // TODO + console.warn("setTheme called - not implemented") + return null; +}); + async function main() { // Get body.html - const body = utf8Decode(await getFile("body.html")); + const body = utf8Decode(await getFile('body.html')); // Build the document const document = ` - + - + + + + + - + ${body} `; diff --git a/apps/user_settings/body.html b/apps/user_settings/body.html index 739576ed..b55c3e8a 100644 --- a/apps/user_settings/body.html +++ b/apps/user_settings/body.html @@ -1,130 +1,20 @@ -

h1

-

h2

-

hxc3

+

Your settings

-Notice: this example app fetches an image and an audio file from a third-party website. -Those will not work offline. This is a link. +
+

Appearance

-
-
- - - - - - - -
-
- - -x = 5; -y = 6; -z = x + y; - - -
-
- - - -
- -Italian Trulli - - -
- Hello -
- Hello -
- Hello -
- Hello -
-
-
+
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim leo a urna gravida, vel pulvinar magna blandit. Cras eleifend, elit ac faucibus gravida, justo mauris ornare nisi, eget ultrices lorem tortor vitae purus. Quisque et dui arcu. Nam semper, mauris id molestie imperdiet, risus nunc dignissim dolor, nec cursus elit mi sit amet dui. Nulla aliquam id mauris sed posuere. Nam mollis velit luctus accumsan aliquam. In tempor, felis id finibus tincidunt, erat nulla vehicula orci, a venenatis mauris nunc et diam. Aliquam lorem sem, iaculis ut mollis in, feugiat a mauris. Nam laoreet vestibulum leo a aliquet. Nam sit amet neque erat.

+
+

Danger Zone

-

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor, sem ac pretium accumsan, dui sapien placerat ligula, ut maximus lacus eros sed tortor. Vivamus finibus facilisis felis, quis dictum felis vestibulum nec. Mauris eu facilisis est, nec tempor sem. Quisque ac ultricies tortor. Morbi et ante at dolor accumsan molestie. Curabitur facilisis condimentum lorem a luctus. Quisque lectus risus, vestibulum non malesuada quis, porta sed urna. Sed elementum magna in velit sagittis, vel fringilla ipsum pulvinar. Morbi nec lectus egestas, laoreet erat fringilla, tristique quam.

+

Change my password

+ -

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu mattis ante. Donec venenatis pretium ornare. Nulla vel purus cursus, molestie velit a, vehicula mi. Phasellus ac eleifend sapien, in euismod mauris. Donec quis nisi sodales, accumsan mi sed, malesuada purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent venenatis enim et nisi interdum, nec sodales diam suscipit. Etiam nisl neque, dapibus id felis eget, laoreet posuere eros. Donec arcu neque, aliquam vel fringilla ut, laoreet in velit. Ut tincidunt rutrum eros vel fringilla. Sed at eleifend sem. Pellentesque ut leo in ligula accumsan dignissim quis at justo. Donec luctus felis sed lacus pharetra aliquam. Nam volutpat quis tellus eget lobortis. Proin ultrices ante vitae quam efficitur accumsan.

+

Manage your identities

+ -

Here is a quote from WWF's website:

- -
-For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly
- -

An Unordered HTML List

- -
    -
  • Coffee
    • -
  • Tea
    • -
  • Milk
    • -
- -

An Ordered HTML List

- -
    -
  1. Coffee
    2. -
  2. Tea
    3. -
  3. Milk
    4. -
- - - -
-
- - - - -
-
- - \ No newline at end of file +

Delete your account

+ +
diff --git a/apps/user_settings/lit-all.min.js b/apps/user_settings/lit-all.min.js new file mode 100644 index 00000000..871d24fb --- /dev/null +++ b/apps/user_settings/lit-all.min.js @@ -0,0 +1,120 @@ +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t=globalThis,s=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),e=new WeakMap;class n{constructor(t,s,e){if(this._$cssResult$=!0,e!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=s}get styleSheet(){let t=this.i;const i=this.t;if(s&&void 0===t){const s=void 0!==i&&1===i.length;s&&(t=e.get(i)),void 0===t&&((this.i=t=new CSSStyleSheet).replaceSync(this.cssText),s&&e.set(i,t))}return t}toString(){return this.cssText}}const r=t=>new n("string"==typeof t?t:t+"",void 0,i),o=(t,...s)=>{const e=1===t.length?t[0]:s.reduce(((s,i,e)=>s+(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.")})(i)+t[e+1]),t[0]);return new n(e,t,i)},h=(i,e)=>{if(s)i.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const s of e){const e=document.createElement("style"),n=t.litNonce;void 0!==n&&e.setAttribute("nonce",n),e.textContent=s.cssText,i.appendChild(e)}},c=s?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let s="";for(const i of t.cssRules)s+=i.cssText;return r(s)})(t):t +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */,{is:l,defineProperty:a,getOwnPropertyDescriptor:u,getOwnPropertyNames:d,getOwnPropertySymbols:f,getPrototypeOf:p}=Object,v=globalThis,y=v.trustedTypes,m=y?y.emptyScript:"",b=v.reactiveElementPolyfillSupport,g=(t,s)=>t,w={toAttribute(t,s){switch(s){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},_=(t,s)=>!l(t,s),S={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:_};Symbol.metadata??=Symbol("metadata"),v.litPropertyMetadata??=new WeakMap;class $ extends HTMLElement{static addInitializer(t){this.o(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this.u&&[...this.u.keys()]}static createProperty(t,s=S){if(s.state&&(s.attribute=!1),this.o(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),e=this.getPropertyDescriptor(t,i,s);void 0!==e&&a(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){const{get:e,set:n}=u(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get(){return e?.call(this)},set(s){const r=e?.call(this);n.call(this,s),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??S}static o(){if(this.hasOwnProperty(g("elementProperties")))return;const t=p(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(g("finalized")))return;if(this.finalized=!0,this.o(),this.hasOwnProperty(g("properties"))){const t=this.properties,s=[...d(t),...f(t)];for(const i of s)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i)}this.u=new Map;for(const[t,s]of this.elementProperties){const i=this.p(t,s);void 0!==i&&this.u.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const s=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)s.unshift(c(t))}else void 0!==t&&s.push(c(t));return s}static p(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this.v=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.m=null,this._()}_(){this.S=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this.$(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this.P??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this.P?.delete(t)}$(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this.v=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return h(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.P?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this.P?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}C(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor.p(t,i);if(void 0!==e&&!0===i.reflect){const n=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(s,i.type);this.m=t,null==n?this.removeAttribute(e):this.setAttribute(e,n),this.m=null}}_$AK(t,s){const i=this.constructor,e=i.u.get(t);if(void 0!==e&&this.m!==e){const t=i.getPropertyOptions(e),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this.m=e,this[e]=n.fromAttribute(s,t.type),this.m=null}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??_)(this[t],s))return;this.T(t,s,i)}!1===this.isUpdatePending&&(this.S=this.A())}T(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this.m!==t&&(this.M??=new Set).add(t)}async A(){this.isUpdatePending=!0;try{await this.S}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this.v){for(const[t,s]of this.v)this[t]=s;this.v=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.T(s,this[s],i)}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this.P?.forEach((t=>t.hostUpdate?.())),this.update(s)):this.k()}catch(s){throw t=!1,this.k(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this.P?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}k(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.S}shouldUpdate(t){return!0}update(t){this.M&&=this.M.forEach((t=>this.C(t,this[t]))),this.k()}updated(t){}firstUpdated(t){}}$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[g("elementProperties")]=new Map,$[g("finalized")]=new Map,b?.({ReactiveElement:$}),(v.reactiveElementVersions??=[]).push("2.0.4"); +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const T=globalThis,x=T.trustedTypes,E=x?x.createPolicy("lit-html",{createHTML:t=>t}):void 0,C="$lit$",P=`lit$${(Math.random()+"").slice(9)}$`,A="?"+P,k=`<${A}>`,M=document,U=()=>M.createComment(""),V=t=>null===t||"object"!=typeof t&&"function"!=typeof t,O=Array.isArray,R=t=>O(t)||"function"==typeof t?.[Symbol.iterator],N="[ \t\n\f\r]",z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,L=/-->/g,j=/>/g,H=RegExp(`>|${N}(?:([^\\s"'>=/]+)(${N}*=${N}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),I=/'/g,D=/"/g,B=/^(?:script|style|textarea|title)$/i,W=t=>(s,...i)=>({_$litType$:t,strings:s,values:i}),Z=W(1),q=W(2),F=Symbol.for("lit-noChange"),G=Symbol.for("lit-nothing"),J=new WeakMap,K=M.createTreeWalker(M,129);function Y(t,s){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(s):s}const Q=(t,s)=>{const i=t.length-1,e=[];let n,r=2===s?"":"",o=z;for(let s=0;s"===c[0]?(o=n??z,l=-1):void 0===c[1]?l=-2:(l=o.lastIndex-c[2].length,h=c[1],o=void 0===c[3]?H:'"'===c[3]?D:I):o===D||o===I?o=H:o===L||o===j?o=z:(o=H,n=void 0);const u=o===H&&t[s+1].startsWith("/>")?" ":"";r+=o===z?i+k:l>=0?(e.push(h),i.slice(0,l)+C+i.slice(l)+P+u):i+P+(-2===l?s:u)}return[Y(t,r+(t[i]||"")+(2===s?"":"")),e]};class X{constructor({strings:t,_$litType$:s},i){let e;this.parts=[];let n=0,r=0;const o=t.length-1,h=this.parts,[c,l]=Q(t,s);if(this.el=X.createElement(c,i),K.currentNode=this.el.content,2===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(e=K.nextNode())&&h.length0){e.textContent=x?x.emptyScript:"";for(let i=0;i2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=G}_$AI(t,s=this,i,e){const n=this.strings;let r=!1;if(void 0===n)t=tt(this,t,s,0),r=!V(t)||t!==this._$AH&&t!==F,r&&(this._$AH=t);else{const e=t;let o,h;for(t=n[0],o=0;o{const e=i?.renderBefore??s;let n=e._$litPart$;if(void 0===n){const t=i?.renderBefore??null;e._$litPart$=n=new it(s.insertBefore(U(),t),t,void 0,i??{})}return n._$AI(t),n}; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class ut extends ${constructor(){super(...arguments),this.renderOptions={host:this},this.ht=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.ht=at(s,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.ht?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.ht?.setConnected(!1)}render(){return F}}ut._$litElement$=!0,ut[("finalized","finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:ut});const dt=globalThis.litElementPolyfillSupport;dt?.({LitElement:ut});const ft={_$AK:(t,s,i)=>{t._$AK(s,i)},_$AL:t=>t._$AL};(globalThis.litElementVersions??=[]).push("4.0.4"); +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const pt=!1,{Y:vt}=ct,yt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,mt={HTML:1,SVG:2},bt=(t,s)=>void 0===s?void 0!==t?._$litType$:t?._$litType$===s,gt=t=>null!=t?._$litType$?.h,wt=t=>void 0!==t?._$litDirective$,_t=t=>t?._$litDirective$,St=t=>void 0===t.strings,$t=()=>document.createComment(""),Tt=(t,s,i)=>{const e=t._$AA.parentNode,n=void 0===s?t._$AB:s._$AA;if(void 0===i){const s=e.insertBefore($t(),n),r=e.insertBefore($t(),n);i=new vt(s,r,t,t.options)}else{const s=i._$AB.nextSibling,r=i._$AM,o=r!==t;if(o){let s;i._$AQ?.(t),i._$AM=t,void 0!==i._$AP&&(s=t._$AU)!==r._$AU&&i._$AP(s)}if(s!==n||o){let t=i._$AA;for(;t!==s;){const s=t.nextSibling;e.insertBefore(t,n),t=s}}}return i},xt=(t,s,i=t)=>(t._$AI(s,i),t),Et={},Ct=(t,s=Et)=>t._$AH=s,Pt=t=>t._$AH,At=t=>{t._$AP?.(!1,!0);let s=t._$AA;const i=t._$AB.nextSibling;for(;s!==i;){const t=s.nextSibling;s.remove(),s=t}},kt=t=>{t._$AR()},Mt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Ut=t=>(...s)=>({_$litDirective$:t,values:s});class Vt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,s,i){this.nt=t,this._$AM=s,this.rt=i}_$AS(t,s){return this.update(t,s)}update(t,s){return this.render(...s)}} +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const Ot=(t,s)=>{const i=t._$AN;if(void 0===i)return!1;for(const t of i)t._$AO?.(s,!1),Ot(t,s);return!0},Rt=t=>{let s,i;do{if(void 0===(s=t._$AM))break;i=s._$AN,i.delete(t),t=s}while(0===i?.size)},Nt=t=>{for(let s;s=t._$AM;t=s){let i=s._$AN;if(void 0===i)s._$AN=i=new Set;else if(i.has(t))break;i.add(t),jt(s)}};function zt(t){void 0!==this._$AN?(Rt(this),this._$AM=t,Nt(this)):this._$AM=t}function Lt(t,s=!1,i=0){const e=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(s)if(Array.isArray(e))for(let t=i;t{2==t.type&&(t._$AP??=Lt,t._$AQ??=zt)};class Ht extends Vt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,s,i){super._$AT(t,s,i),Nt(this),this.isConnected=t._$AU}_$AO(t,s=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),s&&(Ot(this,t),Rt(this))}setValue(t){if(St(this.nt))this.nt._$AI(t,this);else{const s=[...this.nt._$AH];s[this.rt]=t,this.nt._$AI(s,this,0)}}disconnected(){}reconnected(){}} +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class It{constructor(t){this.ct=t}disconnect(){this.ct=void 0}reconnect(t){this.ct=t}deref(){return this.ct}}class Dt{constructor(){this.lt=void 0,this.ut=void 0}get(){return this.lt}pause(){this.lt??=new Promise((t=>this.ut=t))}resume(){this.ut?.(),this.lt=this.ut=void 0}} +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class Bt extends Ht{constructor(){super(...arguments),this.dt=new It(this),this.ft=new Dt}render(t,s){return F}update(t,[s,i]){if(this.isConnected||this.disconnected(),s===this.vt)return F;this.vt=s;let e=0;const{dt:n,ft:r}=this;return(async(t,s)=>{for await(const i of t)if(!1===await s(i))return})(s,(async t=>{for(;r.get();)await r.get();const o=n.deref();if(void 0!==o){if(o.vt!==s)return!1;void 0!==i&&(t=i(t,e)),o.commitValue(t,e),e++}return!0})),F}commitValue(t,s){this.setValue(t)}disconnected(){this.dt.disconnect(),this.ft.pause()}reconnected(){this.dt.reconnect(this),this.ft.resume()}}const Wt=Ut(Bt),Zt=Ut( +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +class extends Bt{constructor(t){if(super(t),2!==t.type)throw Error("asyncAppend can only be used in child expressions")}update(t,s){return this.ht=t,super.update(t,s)}commitValue(t,s){0===s&&kt(this.ht);const i=Tt(this.ht);xt(i,t)}}),qt=t=>gt(t)?t._$litType$.h:t.strings,Ft=Ut(class extends Vt{constructor(t){super(t),this.yt=new WeakMap}render(t){return[t]}update(t,[s]){const i=bt(this.bt)?qt(this.bt):null,e=bt(s)?qt(s):null;if(null!==i&&(null===e||i!==e)){const s=Pt(t).pop();let e=this.yt.get(i);if(void 0===e){const t=document.createDocumentFragment();e=at(G,t),e.setConnected(!1),this.yt.set(i,e)}Ct(e,[s]),Tt(e,void 0,s)}if(null!==e){if(null===i||i!==e){const s=this.yt.get(e);if(void 0!==s){const i=Pt(s).pop();kt(t),Tt(t,void 0,i),Ct(t,[i])}}this.bt=s}else this.bt=void 0;return this.render(s)}}),Gt=(t,s,i)=>{for(const i of s)if(i[0]===t)return(0,i[1])();return i?.()},Jt=Ut( +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +class extends Vt{constructor(t){if(super(t),1!==t.type||"class"!==t.name||t.strings?.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((s=>t[s])).join(" ")+" "}update(t,[s]){if(void 0===this.gt){this.gt=new Set,void 0!==t.strings&&(this.wt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in s)s[t]&&!this.wt?.has(t)&&this.gt.add(t);return this.render(s)}const i=t.element.classList;for(const t of this.gt)t in s||(i.remove(t),this.gt.delete(t));for(const t in s){const e=!!s[t];e===this.gt.has(t)||this.wt?.has(t)||(e?(i.add(t),this.gt.add(t)):(i.remove(t),this.gt.delete(t)))}return F}}),Kt={},Yt=Ut(class extends Vt{constructor(){super(...arguments),this._t=Kt}render(t,s){return s()}update(t,[s,i]){if(Array.isArray(s)){if(Array.isArray(this._t)&&this._t.length===s.length&&s.every(((t,s)=>t===this._t[s])))return F}else if(this._t===s)return F;return this._t=Array.isArray(s)?Array.from(s):s,this.render(s,i)}}),Qt=t=>t??G +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */;function*Xt(t,s){const i="function"==typeof s;if(void 0!==t){let e=-1;for(const n of t)e>-1&&(yield i?s(e):s),e++,yield n}} +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const ts=Ut(class extends Vt{constructor(){super(...arguments),this.key=G}render(t,s){return this.key=t,s}update(t,[s,i]){return s!==this.key&&(Ct(t),this.key=s),i}}),ss=Ut( +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +class extends Vt{constructor(t){if(super(t),3!==t.type&&1!==t.type&&4!==t.type)throw Error("The `live` directive is not allowed on child or event bindings");if(!St(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[s]){if(s===F||s===G)return s;const i=t.element,e=t.name;if(3===t.type){if(s===i[e])return F}else if(4===t.type){if(!!s===i.hasAttribute(e))return F}else if(1===t.type&&i.getAttribute(e)===s+"")return F;return Ct(t),s}}); +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +function*is(t,s){if(void 0!==t){let i=0;for(const e of t)yield s(e,i++)}} +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function*es(t,s,i=1){const e=void 0===s?0:t;s??=t;for(let t=e;i>0?tnew rs;class rs{}const os=new WeakMap,hs=Ut(class extends Ht{render(t){return G}update(t,[s]){const i=s!==this.ct;return i&&void 0!==this.ct&&this.St(void 0),(i||this.$t!==this.Tt)&&(this.ct=s,this.xt=t.options?.host,this.St(this.Tt=t.element)),G}St(t){if("function"==typeof this.ct){const s=this.xt??globalThis;let i=os.get(s);void 0===i&&(i=new WeakMap,os.set(s,i)),void 0!==i.get(this.ct)&&this.ct.call(this.xt,void 0),i.set(this.ct,t),void 0!==t&&this.ct.call(this.xt,t)}else this.ct.value=t}get $t(){return"function"==typeof this.ct?os.get(this.xt??globalThis)?.get(this.ct):this.ct?.value}disconnected(){this.$t===this.Tt&&this.St(void 0)}reconnected(){this.St(this.Tt)}}),cs=(t,s,i)=>{const e=new Map;for(let n=s;n<=i;n++)e.set(t[n],n);return e},ls=Ut(class extends Vt{constructor(t){if(super(t),2!==t.type)throw Error("repeat() can only be used in text expressions")}Et(t,s,i){let e;void 0===i?i=s:void 0!==s&&(e=s);const n=[],r=[];let o=0;for(const s of t)n[o]=e?e(s,o):o,r[o]=i(s,o),o++;return{values:r,keys:n}}render(t,s,i){return this.Et(t,s,i).values}update(t,[s,i,e]){const n=Pt(t),{values:r,keys:o}=this.Et(s,i,e);if(!Array.isArray(n))return this.Ct=o,r;const h=this.Ct??=[],c=[];let l,a,u=0,d=n.length-1,f=0,p=r.length-1;for(;u<=d&&f<=p;)if(null===n[u])u++;else if(null===n[d])d--;else if(h[u]===o[f])c[f]=xt(n[u],r[f]),u++,f++;else if(h[d]===o[p])c[p]=xt(n[d],r[p]),d--,p--;else if(h[u]===o[p])c[p]=xt(n[u],r[p]),Tt(t,c[p+1],n[u]),u++,p--;else if(h[d]===o[f])c[f]=xt(n[d],r[f]),Tt(t,n[u],n[d]),d--,f++;else if(void 0===l&&(l=cs(o,f,p),a=cs(h,u,d)),l.has(h[u]))if(l.has(h[d])){const s=a.get(o[f]),i=void 0!==s?n[s]:null;if(null===i){const s=Tt(t,n[u]);xt(s,r[f]),c[f]=s}else c[f]=xt(i,r[f]),Tt(t,n[u],i),n[s]=null;f++}else At(n[d]),d--;else At(n[u]),u++;for(;f<=p;){const s=Tt(t,c[p+1]);xt(s,r[f]),c[f++]=s}for(;u<=d;){const t=n[u++];null!==t&&At(t)}return this.Ct=o,Ct(t,c),F}}),as="important",us=" !"+as,ds=Ut(class extends Vt{constructor(t){if(super(t),1!==t.type||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((s,i)=>{const e=t[i];return null==e?s:s+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`}),"")}update(t,[s]){const{style:i}=t.element;if(void 0===this.Pt)return this.Pt=new Set(Object.keys(s)),this.render(s);for(const t of this.Pt)null==s[t]&&(this.Pt.delete(t),t.includes("-")?i.removeProperty(t):i[t]=null);for(const t in s){const e=s[t];if(null!=e){this.Pt.add(t);const s="string"==typeof e&&e.endsWith(us);t.includes("-")||s?i.setProperty(t,s?e.slice(0,-11):e,s?as:""):i[t]=e}}return F}}),fs=Ut( +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +class extends Vt{constructor(t){if(super(t),2!==t.type)throw Error("templateContent can only be used in child bindings")}render(t){return this.At===t?F:(this.At=t,document.importNode(t.content,!0))}});class ps extends Vt{constructor(t){if(super(t),this.bt=G,2!==t.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===G||null==t)return this.kt=void 0,this.bt=t;if(t===F)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.bt)return this.kt;this.bt=t;const s=[t];return s.raw=s,this.kt={_$litType$:this.constructor.resultType,strings:s,values:[]}}}ps.directiveName="unsafeHTML",ps.resultType=1;const vs=Ut(ps); +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class ys extends ps{}ys.directiveName="unsafeSVG",ys.resultType=2;const ms=Ut(ys),bs=t=>!yt(t)&&"function"==typeof t.then,gs=1073741823; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class ws extends Ht{constructor(){super(...arguments),this.Mt=gs,this.Ut=[],this.dt=new It(this),this.ft=new Dt}render(...t){return t.find((t=>!bs(t)))??F}update(t,s){const i=this.Ut;let e=i.length;this.Ut=s;const n=this.dt,r=this.ft;this.isConnected||this.disconnected();for(let t=0;tthis.Mt);t++){const o=s[t];if(!bs(o))return this.Mt=t,o;t{for(;r.get();)await r.get();const s=n.deref();if(void 0!==s){const i=s.Ut.indexOf(o);i>-1&&i{if(t?.r===$s)return t?._$litStatic$},xs=t=>({_$litStatic$:t,r:$s}),Es=(t,...s)=>({_$litStatic$:s.reduce(((s,i,e)=>s+(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.`)})(i)+t[e+1]),t[0]),r:$s}),Cs=new Map,Ps=t=>(s,...i)=>{const e=i.length;let n,r;const o=[],h=[];let c,l=0,a=!1;for(;l;\n\n/**\n * A single CSSResult, CSSStyleSheet, or an array or nested arrays of those.\n */\nexport type CSSResultGroup = CSSResultOrNative | CSSResultArray;\n\nconst constructionToken = Symbol();\n\nconst cssTagCache = new WeakMap();\n\n/**\n * A container for a string of CSS text, that may be used to create a CSSStyleSheet.\n *\n * CSSResult is the return value of `css`-tagged template literals and\n * `unsafeCSS()`. In order to ensure that CSSResults are only created via the\n * `css` tag and `unsafeCSS()`, CSSResult cannot be constructed directly.\n */\nexport class CSSResult {\n // This property needs to remain unminified.\n ['_$cssResult$'] = true;\n readonly cssText: string;\n private _styleSheet?: CSSStyleSheet;\n private _strings: TemplateStringsArray | undefined;\n\n private constructor(\n cssText: string,\n strings: TemplateStringsArray | undefined,\n safeToken: symbol\n ) {\n if (safeToken !== constructionToken) {\n throw new Error(\n 'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'\n );\n }\n this.cssText = cssText;\n this._strings = strings;\n }\n\n // This is a getter so that it's lazy. In practice, this means stylesheets\n // are not created until the first element instance is made.\n get styleSheet(): CSSStyleSheet | undefined {\n // If `supportsAdoptingStyleSheets` is true then we assume CSSStyleSheet is\n // constructable.\n let styleSheet = this._styleSheet;\n const strings = this._strings;\n if (supportsAdoptingStyleSheets && styleSheet === undefined) {\n const cacheable = strings !== undefined && strings.length === 1;\n if (cacheable) {\n styleSheet = cssTagCache.get(strings);\n }\n if (styleSheet === undefined) {\n (this._styleSheet = styleSheet = new CSSStyleSheet()).replaceSync(\n this.cssText\n );\n if (cacheable) {\n cssTagCache.set(strings, styleSheet);\n }\n }\n }\n return styleSheet;\n }\n\n toString(): string {\n return this.cssText;\n }\n}\n\ntype ConstructableCSSResult = CSSResult & {\n new (\n cssText: string,\n strings: TemplateStringsArray | undefined,\n safeToken: symbol\n ): CSSResult;\n};\n\nconst textFromCSSResult = (value: CSSResultGroup | number) => {\n // This property needs to remain unminified.\n if ((value as CSSResult)['_$cssResult$'] === true) {\n return (value as CSSResult).cssText;\n } else if (typeof value === 'number') {\n return value;\n } else {\n throw new Error(\n `Value passed to 'css' function must be a 'css' function result: ` +\n `${value}. Use 'unsafeCSS' to pass non-literal values, but take care ` +\n `to ensure page security.`\n );\n }\n};\n\n/**\n * Wrap a value for interpolation in a {@linkcode css} tagged template literal.\n *\n * This is unsafe because untrusted CSS text can be used to phone home\n * or exfiltrate data to an attacker controlled site. Take care to only use\n * this with trusted input.\n */\nexport const unsafeCSS = (value: unknown) =>\n new (CSSResult as ConstructableCSSResult)(\n typeof value === 'string' ? value : String(value),\n undefined,\n constructionToken\n );\n\n/**\n * A template literal tag which can be used with LitElement's\n * {@linkcode LitElement.styles} property to set element styles.\n *\n * For security reasons, only literal string values and number may be used in\n * embedded expressions. To incorporate non-literal values {@linkcode unsafeCSS}\n * may be used inside an expression.\n */\nexport const css = (\n strings: TemplateStringsArray,\n ...values: (CSSResultGroup | number)[]\n): CSSResult => {\n const cssText =\n strings.length === 1\n ? strings[0]\n : values.reduce(\n (acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1],\n strings[0]\n );\n return new (CSSResult as ConstructableCSSResult)(\n cssText,\n strings,\n constructionToken\n );\n};\n\n/**\n * Applies the given styles to a `shadowRoot`. When Shadow DOM is\n * available but `adoptedStyleSheets` is not, styles are appended to the\n * `shadowRoot` to [mimic spec behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).\n * Note, when shimming is used, any styles that are subsequently placed into\n * the shadowRoot should be placed *before* any shimmed adopted styles. This\n * will match spec behavior that gives adopted sheets precedence over styles in\n * shadowRoot.\n */\nexport const adoptStyles = (\n renderRoot: ShadowRoot,\n styles: Array\n) => {\n if (supportsAdoptingStyleSheets) {\n (renderRoot as ShadowRoot).adoptedStyleSheets = styles.map((s) =>\n s instanceof CSSStyleSheet ? s : s.styleSheet!\n );\n } else {\n for (const s of styles) {\n const style = document.createElement('style');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const nonce = (global as any)['litNonce'];\n if (nonce !== undefined) {\n style.setAttribute('nonce', nonce);\n }\n style.textContent = (s as CSSResult).cssText;\n renderRoot.appendChild(style);\n }\n }\n};\n\nconst cssResultFromStyleSheet = (sheet: CSSStyleSheet) => {\n let cssText = '';\n for (const rule of sheet.cssRules) {\n cssText += rule.cssText;\n }\n return unsafeCSS(cssText);\n};\n\nexport const getCompatibleStyle =\n supportsAdoptingStyleSheets ||\n (NODE_MODE && global.CSSStyleSheet === undefined)\n ? (s: CSSResultOrNative) => s\n : (s: CSSResultOrNative) =>\n s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Use this module if you want to create your own base class extending\n * {@link ReactiveElement}.\n * @packageDocumentation\n */\n\nimport {\n getCompatibleStyle,\n adoptStyles,\n CSSResultGroup,\n CSSResultOrNative,\n} from './css-tag.js';\nimport type {\n ReactiveController,\n ReactiveControllerHost,\n} from './reactive-controller.js';\n\n// In the Node build, this import will be injected by Rollup:\n// import {HTMLElement, customElements} from '@lit-labs/ssr-dom-shim';\n\nexport * from './css-tag.js';\nexport type {\n ReactiveController,\n ReactiveControllerHost,\n} from './reactive-controller.js';\n\n/**\n * Removes the `readonly` modifier from properties in the union K.\n *\n * This is a safer way to cast a value to a type with a mutable version of a\n * readonly field, than casting to an interface with the field re-declared\n * because it preserves the type of all the fields and warns on typos.\n */\ntype Mutable = Omit & {\n -readonly [P in keyof Pick]: P extends K ? T[P] : never;\n};\n\n// TODO (justinfagnani): Add `hasOwn` here when we ship ES2022\nconst {\n is,\n defineProperty,\n getOwnPropertyDescriptor,\n getOwnPropertyNames,\n getOwnPropertySymbols,\n getPrototypeOf,\n} = Object;\n\nconst NODE_MODE = false;\n\n// Lets a minifier replace globalThis references with a minified name\nconst global = globalThis;\n\nif (NODE_MODE) {\n global.customElements ??= customElements;\n}\n\nconst DEV_MODE = true;\n\nlet issueWarning: (code: string, warning: string) => void;\n\nconst trustedTypes = (global as unknown as {trustedTypes?: {emptyScript: ''}})\n .trustedTypes;\n\n// Temporary workaround for https://crbug.com/993268\n// Currently, any attribute starting with \"on\" is considered to be a\n// TrustedScript source. Such boolean attributes must be set to the equivalent\n// trusted emptyScript value.\nconst emptyStringForBooleanAttribute = trustedTypes\n ? (trustedTypes.emptyScript as unknown as '')\n : '';\n\nconst polyfillSupport = DEV_MODE\n ? global.reactiveElementPolyfillSupportDevMode\n : global.reactiveElementPolyfillSupport;\n\nif (DEV_MODE) {\n // Ensure warnings are issued only 1x, even if multiple versions of Lit\n // are loaded.\n const issuedWarnings: Set = (global.litIssuedWarnings ??=\n new Set());\n\n // Issue a warning, if we haven't already.\n issueWarning = (code: string, warning: string) => {\n warning += ` See https://lit.dev/msg/${code} for more information.`;\n if (!issuedWarnings.has(warning)) {\n console.warn(warning);\n issuedWarnings.add(warning);\n }\n };\n\n issueWarning(\n 'dev-mode',\n `Lit is in dev mode. Not recommended for production!`\n );\n\n // Issue polyfill support warning.\n if (global.ShadyDOM?.inUse && polyfillSupport === undefined) {\n issueWarning(\n 'polyfill-support-missing',\n `Shadow DOM is being polyfilled via \\`ShadyDOM\\` but ` +\n `the \\`polyfill-support\\` module has not been loaded.`\n );\n }\n}\n\n/**\n * Contains types that are part of the unstable debug API.\n *\n * Everything in this API is not stable and may change or be removed in the future,\n * even on patch releases.\n */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport namespace ReactiveUnstable {\n /**\n * When Lit is running in dev mode and `window.emitLitDebugLogEvents` is true,\n * we will emit 'lit-debug' events to window, with live details about the update and render\n * lifecycle. These can be useful for writing debug tooling and visualizations.\n *\n * Please be aware that running with window.emitLitDebugLogEvents has performance overhead,\n * making certain operations that are normally very cheap (like a no-op render) much slower,\n * because we must copy data and dispatch events.\n */\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace DebugLog {\n export type Entry = Update;\n export interface Update {\n kind: 'update';\n }\n }\n}\n\ninterface DebugLoggingWindow {\n // Even in dev mode, we generally don't want to emit these events, as that's\n // another level of cost, so only emit them when DEV_MODE is true _and_ when\n // window.emitLitDebugEvents is true.\n emitLitDebugLogEvents?: boolean;\n}\n\n/**\n * Useful for visualizing and logging insights into what the Lit template system is doing.\n *\n * Compiled out of prod mode builds.\n */\nconst debugLogEvent = DEV_MODE\n ? (event: ReactiveUnstable.DebugLog.Entry) => {\n const shouldEmit = (global as unknown as DebugLoggingWindow)\n .emitLitDebugLogEvents;\n if (!shouldEmit) {\n return;\n }\n global.dispatchEvent(\n new CustomEvent('lit-debug', {\n detail: event,\n })\n );\n }\n : undefined;\n\n/*\n * When using Closure Compiler, JSCompiler_renameProperty(property, object) is\n * replaced at compile time by the munged name for object[property]. We cannot\n * alias this function, so we have to use a small shim that has the same\n * behavior when not compiling.\n */\n/*@__INLINE__*/\nconst JSCompiler_renameProperty =

(\n prop: P,\n _obj: unknown\n): P => prop;\n\n/**\n * Converts property values to and from attribute values.\n */\nexport interface ComplexAttributeConverter {\n /**\n * Called to convert an attribute value to a property\n * value.\n */\n fromAttribute?(value: string | null, type?: TypeHint): Type;\n\n /**\n * Called to convert a property value to an attribute\n * value.\n *\n * It returns unknown instead of string, to be compatible with\n * https://github.com/WICG/trusted-types (and similar efforts).\n */\n toAttribute?(value: Type, type?: TypeHint): unknown;\n}\n\ntype AttributeConverter =\n | ComplexAttributeConverter\n | ((value: string | null, type?: TypeHint) => Type);\n\n/**\n * Defines options for a property accessor.\n */\nexport interface PropertyDeclaration {\n /**\n * When set to `true`, indicates the property is internal private state. The\n * property should not be set by users. When using TypeScript, this property\n * should be marked as `private` or `protected`, and it is also a common\n * practice to use a leading `_` in the name. The property is not added to\n * `observedAttributes`.\n */\n readonly state?: boolean;\n\n /**\n * Indicates how and whether the property becomes an observed attribute.\n * If the value is `false`, the property is not added to `observedAttributes`.\n * If true or absent, the lowercased property name is observed (e.g. `fooBar`\n * becomes `foobar`). If a string, the string value is observed (e.g\n * `attribute: 'foo-bar'`).\n */\n readonly attribute?: boolean | string;\n\n /**\n * Indicates the type of the property. This is used only as a hint for the\n * `converter` to determine how to convert the attribute\n * to/from a property.\n */\n readonly type?: TypeHint;\n\n /**\n * Indicates how to convert the attribute to/from a property. If this value\n * is a function, it is used to convert the attribute value a the property\n * value. If it's an object, it can have keys for `fromAttribute` and\n * `toAttribute`. If no `toAttribute` function is provided and\n * `reflect` is set to `true`, the property value is set directly to the\n * attribute. A default `converter` is used if none is provided; it supports\n * `Boolean`, `String`, `Number`, `Object`, and `Array`. Note,\n * when a property changes and the converter is used to update the attribute,\n * the property is never updated again as a result of the attribute changing,\n * and vice versa.\n */\n readonly converter?: AttributeConverter;\n\n /**\n * Indicates if the property should reflect to an attribute.\n * If `true`, when the property is set, the attribute is set using the\n * attribute name determined according to the rules for the `attribute`\n * property option and the value of the property converted using the rules\n * from the `converter` property option.\n */\n readonly reflect?: boolean;\n\n /**\n * A function that indicates if a property should be considered changed when\n * it is set. The function should take the `newValue` and `oldValue` and\n * return `true` if an update should be requested.\n */\n hasChanged?(value: Type, oldValue: Type): boolean;\n\n /**\n * Indicates whether an accessor will be created for this property. By\n * default, an accessor will be generated for this property that requests an\n * update when set. If this flag is `true`, no accessor will be created, and\n * it will be the user's responsibility to call\n * `this.requestUpdate(propertyName, oldValue)` to request an update when\n * the property changes.\n */\n readonly noAccessor?: boolean;\n\n /**\n * Whether this property is wrapping accessors. This is set by `@property`\n * to control the initial value change and reflection logic.\n *\n * @internal\n */\n wrapped?: boolean;\n}\n\n/**\n * Map of properties to PropertyDeclaration options. For each property an\n * accessor is made, and the property is processed according to the\n * PropertyDeclaration options.\n */\nexport interface PropertyDeclarations {\n readonly [key: string]: PropertyDeclaration;\n}\n\ntype PropertyDeclarationMap = Map;\n\ntype AttributeMap = Map;\n\n/**\n * A Map of property keys to values.\n *\n * Takes an optional type parameter T, which when specified as a non-any,\n * non-unknown type, will make the Map more strongly-typed, associating the map\n * keys with their corresponding value type on T.\n *\n * Use `PropertyValues` when overriding ReactiveElement.update() and\n * other lifecycle methods in order to get stronger type-checking on keys\n * and values.\n */\n// This type is conditional so that if the parameter T is not specified, or\n// is `any`, the type will include `Map`. Since T is not\n// given in the uses of PropertyValues in this file, all uses here fallback to\n// meaning `Map`, but if a developer uses\n// `PropertyValues` (or any other value for T) they will get a\n// strongly-typed Map type.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type PropertyValues = T extends object\n ? PropertyValueMap\n : Map;\n\n/**\n * Do not use, instead prefer {@linkcode PropertyValues}.\n */\n// This type must be exported such that JavaScript generated by the Google\n// Closure Compiler can import a type reference.\nexport interface PropertyValueMap extends Map {\n get(k: K): T[K] | undefined;\n set(key: K, value: T[K]): this;\n has(k: K): boolean;\n delete(k: K): boolean;\n}\n\nexport const defaultConverter: ComplexAttributeConverter = {\n toAttribute(value: unknown, type?: unknown): unknown {\n switch (type) {\n case Boolean:\n value = value ? emptyStringForBooleanAttribute : null;\n break;\n case Object:\n case Array:\n // if the value is `null` or `undefined` pass this through\n // to allow removing/no change behavior.\n value = value == null ? value : JSON.stringify(value);\n break;\n }\n return value;\n },\n\n fromAttribute(value: string | null, type?: unknown) {\n let fromValue: unknown = value;\n switch (type) {\n case Boolean:\n fromValue = value !== null;\n break;\n case Number:\n fromValue = value === null ? null : Number(value);\n break;\n case Object:\n case Array:\n // Do *not* generate exception when invalid JSON is set as elements\n // don't normally complain on being mis-configured.\n // TODO(sorvell): Do generate exception in *dev mode*.\n try {\n // Assert to adhere to Bazel's \"must type assert JSON parse\" rule.\n fromValue = JSON.parse(value!) as unknown;\n } catch (e) {\n fromValue = null;\n }\n break;\n }\n return fromValue;\n },\n};\n\nexport interface HasChanged {\n (value: unknown, old: unknown): boolean;\n}\n\n/**\n * Change function that returns true if `value` is different from `oldValue`.\n * This method is used as the default for a property's `hasChanged` function.\n */\nexport const notEqual: HasChanged = (value: unknown, old: unknown): boolean =>\n !is(value, old);\n\nconst defaultPropertyDeclaration: PropertyDeclaration = {\n attribute: true,\n type: String,\n converter: defaultConverter,\n reflect: false,\n hasChanged: notEqual,\n};\n\n/**\n * A string representing one of the supported dev mode warning categories.\n */\nexport type WarningKind =\n | 'change-in-update'\n | 'migration'\n | 'async-perform-update';\n\nexport type Initializer = (element: ReactiveElement) => void;\n\n// Temporary, until google3 is on TypeScript 5.2\ndeclare global {\n interface SymbolConstructor {\n readonly metadata: unique symbol;\n }\n}\n\n// Ensure metadata is enabled. TypeScript does not polyfill\n// Symbol.metadata, so we must ensure that it exists.\n(Symbol as {metadata: symbol}).metadata ??= Symbol('metadata');\n\ndeclare global {\n // This is public global API, do not change!\n // eslint-disable-next-line no-var\n var litPropertyMetadata: WeakMap<\n object,\n Map\n >;\n}\n\n// Map from a class's metadata object to property options\n// Note that we must use nullish-coalescing assignment so that we only use one\n// map even if we load multiple version of this module.\nglobal.litPropertyMetadata ??= new WeakMap<\n object,\n Map\n>();\n\n/**\n * Base element class which manages element properties and attributes. When\n * properties change, the `update` method is asynchronously called. This method\n * should be supplied by subclasses to render updates as desired.\n * @noInheritDoc\n */\nexport abstract class ReactiveElement\n // In the Node build, this `extends` clause will be substituted with\n // `(globalThis.HTMLElement ?? HTMLElement)`.\n //\n // This way, we will first prefer any global `HTMLElement` polyfill that the\n // user has assigned, and then fall back to the `HTMLElement` shim which has\n // been imported (see note at the top of this file about how this import is\n // generated by Rollup). Note that the `HTMLElement` variable has been\n // shadowed by this import, so it no longer refers to the global.\n extends HTMLElement\n implements ReactiveControllerHost\n{\n // Note: these are patched in only in DEV_MODE.\n /**\n * Read or set all the enabled warning categories for this class.\n *\n * This property is only used in development builds.\n *\n * @nocollapse\n * @category dev-mode\n */\n static enabledWarnings?: WarningKind[];\n\n /**\n * Enable the given warning category for this class.\n *\n * This method only exists in development builds, so it should be accessed\n * with a guard like:\n *\n * ```ts\n * // Enable for all ReactiveElement subclasses\n * ReactiveElement.enableWarning?.('migration');\n *\n * // Enable for only MyElement and subclasses\n * MyElement.enableWarning?.('migration');\n * ```\n *\n * @nocollapse\n * @category dev-mode\n */\n static enableWarning?: (warningKind: WarningKind) => void;\n\n /**\n * Disable the given warning category for this class.\n *\n * This method only exists in development builds, so it should be accessed\n * with a guard like:\n *\n * ```ts\n * // Disable for all ReactiveElement subclasses\n * ReactiveElement.disableWarning?.('migration');\n *\n * // Disable for only MyElement and subclasses\n * MyElement.disableWarning?.('migration');\n * ```\n *\n * @nocollapse\n * @category dev-mode\n */\n static disableWarning?: (warningKind: WarningKind) => void;\n\n /**\n * Adds an initializer function to the class that is called during instance\n * construction.\n *\n * This is useful for code that runs against a `ReactiveElement`\n * subclass, such as a decorator, that needs to do work for each\n * instance, such as setting up a `ReactiveController`.\n *\n * ```ts\n * const myDecorator = (target: typeof ReactiveElement, key: string) => {\n * target.addInitializer((instance: ReactiveElement) => {\n * // This is run during construction of the element\n * new MyController(instance);\n * });\n * }\n * ```\n *\n * Decorating a field will then cause each instance to run an initializer\n * that adds a controller:\n *\n * ```ts\n * class MyElement extends LitElement {\n * @myDecorator foo;\n * }\n * ```\n *\n * Initializers are stored per-constructor. Adding an initializer to a\n * subclass does not add it to a superclass. Since initializers are run in\n * constructors, initializers will run in order of the class hierarchy,\n * starting with superclasses and progressing to the instance's class.\n *\n * @nocollapse\n */\n static addInitializer(initializer: Initializer) {\n this.__prepare();\n (this._initializers ??= []).push(initializer);\n }\n\n static _initializers?: Initializer[];\n\n /*\n * Due to closure compiler ES6 compilation bugs, @nocollapse is required on\n * all static methods and properties with initializers. Reference:\n * - https://github.com/google/closure-compiler/issues/1776\n */\n\n /**\n * Maps attribute names to properties; for example `foobar` attribute to\n * `fooBar` property. Created lazily on user subclasses when finalizing the\n * class.\n * @nocollapse\n */\n private static __attributeToPropertyMap: AttributeMap;\n\n /**\n * Marks class as having been finalized, which includes creating properties\n * from `static properties`, but does *not* include all properties created\n * from decorators.\n * @nocollapse\n */\n protected static finalized: true | undefined;\n\n /**\n * Memoized list of all element properties, including any superclass\n * properties. Created lazily on user subclasses when finalizing the class.\n *\n * @nocollapse\n * @category properties\n */\n static elementProperties: PropertyDeclarationMap;\n\n /**\n * User-supplied object that maps property names to `PropertyDeclaration`\n * objects containing options for configuring reactive properties. When\n * a reactive property is set the element will update and render.\n *\n * By default properties are public fields, and as such, they should be\n * considered as primarily settable by element users, either via attribute or\n * the property itself.\n *\n * Generally, properties that are changed by the element should be private or\n * protected fields and should use the `state: true` option. Properties\n * marked as `state` do not reflect from the corresponding attribute\n *\n * However, sometimes element code does need to set a public property. This\n * should typically only be done in response to user interaction, and an event\n * should be fired informing the user; for example, a checkbox sets its\n * `checked` property when clicked and fires a `changed` event. Mutating\n * public properties should typically not be done for non-primitive (object or\n * array) properties. In other cases when an element needs to manage state, a\n * private property set with the `state: true` option should be used. When\n * needed, state properties can be initialized via public properties to\n * facilitate complex interactions.\n * @nocollapse\n * @category properties\n */\n static properties: PropertyDeclarations;\n\n /**\n * Memoized list of all element styles.\n * Created lazily on user subclasses when finalizing the class.\n * @nocollapse\n * @category styles\n */\n static elementStyles: Array = [];\n\n /**\n * Array of styles to apply to the element. The styles should be defined\n * using the {@linkcode css} tag function, via constructible stylesheets, or\n * imported from native CSS module scripts.\n *\n * Note on Content Security Policy:\n *\n * Element styles are implemented with ` + +

Create a new identity

+ + +

Import an SSB Identity from 12 BIP39 English Words

+ + + +

Warning !

+ Anybody that has access to your private key can gain total access over your account. +

+ Tilde Friends' contributors will never ask you for your private key ! + +
    + ${this.ids.map( + (id) => + html` +
  • + + + ${id} +
    • ` + )} +
`; + } +} + +customElements.define('tf-identity-manager', TfIdentityManagerElement); \ No newline at end of file diff --git a/apps/user_settings/tf-password-form.js b/apps/user_settings/tf-password-form.js new file mode 100644 index 00000000..7615b194 --- /dev/null +++ b/apps/user_settings/tf-password-form.js @@ -0,0 +1,68 @@ +import {LitElement, html} from './lit-all.min.js'; +import * as tfrpc from '/static/tfrpc.js'; + +class TfPasswordFormElement extends LitElement { + static get properties() { + return { + //selected: {type: String}, + }; + } + + constructor() { + super(); + } + + /** + * Checks a password against different requirements + * @param {string} password the password to validate + * @returns + */ + validatePassword(password) { + // TODO(tasiaiso) + return true; + } + + submitPassword() { + const currentPwd = this.shadowRoot.getElementById('current').value; + const newPwd = this.shadowRoot.getElementById('new').value; + const repeatPwd = this.shadowRoot.getElementById('Repeat').value; + + if (!(newPwd === repeatPwd)) { + return; + } + + // TODO + // tfrpc.changePassword() + } + + render() { + return html` + + + + +
+ + + + + + + + +
+ + + + `; + } +} + +customElements.define('tf-password-form', TfPasswordFormElement); \ No newline at end of file diff --git a/apps/user_settings/tf-theme-picker.js b/apps/user_settings/tf-theme-picker.js new file mode 100644 index 00000000..3aac1671 --- /dev/null +++ b/apps/user_settings/tf-theme-picker.js @@ -0,0 +1,40 @@ +import {LitElement, html} from './lit-all.min.js'; +import * as tfrpc from '/static/tfrpc.js'; + +class TfThemePickerElement extends LitElement { + static get properties() { + return { + selected: {type: String}, + themes: {type: Array}, + }; + } + + constructor() { + super(); + this.load(); + } + + async load() { + this.themes = await tfrpc.rpc.getThemes(); + } + + changed(event) { + this.selected = event.srcElement.value; + console.log('selected theme', this.selected); + // TODO + } + + render() { + return html` + + + + + + `; + } +} + +customElements.define('tf-theme-picker', TfThemePickerElement); diff --git a/apps/user_settings/tildefriends.css b/core/tildefriends-v1.css similarity index 89% rename from apps/user_settings/tildefriends.css rename to core/tildefriends-v1.css index 01c0e50e..4074a577 100644 --- a/apps/user_settings/tildefriends.css +++ b/core/tildefriends-v1.css @@ -1,15 +1,14 @@ /* * Tilde Friends core stylesheet - * This is a prototype; things may change based on feedback. * * This Software is an external library that is part of * Tilde Friends and is shared under the MIT license. * * Inject this file in your app at tildefriends.css * and use this tag to import it: - * + * * - * Revision 0 / 2024 M02 19 + * v1.0.0 / 2024 M03 21 */ body { @@ -21,7 +20,7 @@ button, .button, input[type=button], input[type=submit], -input[type=dropdown] { +select { border: none; border-radius: 8px; padding: 8px 12px; diff --git a/src/httpd.js.c b/src/httpd.js.c index c11204d8..3e978f73 100644 --- a/src/httpd.js.c +++ b/src/httpd.js.c @@ -644,6 +644,7 @@ static void _httpd_endpoint_static(tf_http_request_t* request) "style.css", "tfrpc.js", "w3.css", + "tildefriends-v1.css" }; const char* k_map[][2] = { -- 2.39.5 From 4992ff3a2dfb19992a48e0cc837f8583e04b15c6 Mon Sep 17 00:00:00 2001 From: Tasia Iso Date: Thu, 21 Mar 2024 19:25:07 +0100 Subject: [PATCH 4/7] feat(user_settings): finish ui, add ability to export and create identities, add tildefriends.css to the /static/ folder --- apps/user_settings/app.js | 36 ++++- apps/user_settings/body.html | 138 ++---------------- apps/user_settings/lit-all.min.js | 120 +++++++++++++++ apps/user_settings/lit-all.min.js.map | 1 + apps/user_settings/script.js | 4 +- apps/user_settings/tf-delete-account-btn.js | 36 +++++ apps/user_settings/tf-identity-manager.js | 71 +++++++++ apps/user_settings/tf-password-form.js | 68 +++++++++ apps/user_settings/tf-theme-picker.js | 40 +++++ .../tildefriends-v1.css | 7 +- src/httpd.js.c | 1 + 11 files changed, 386 insertions(+), 136 deletions(-) create mode 100644 apps/user_settings/lit-all.min.js create mode 100644 apps/user_settings/lit-all.min.js.map create mode 100644 apps/user_settings/tf-delete-account-btn.js create mode 100644 apps/user_settings/tf-identity-manager.js create mode 100644 apps/user_settings/tf-password-form.js create mode 100644 apps/user_settings/tf-theme-picker.js rename apps/user_settings/tildefriends.css => core/tildefriends-v1.css (89%) diff --git a/apps/user_settings/app.js b/apps/user_settings/app.js index e01f0e36..7abde16b 100644 --- a/apps/user_settings/app.js +++ b/apps/user_settings/app.js @@ -1,18 +1,44 @@ +import * as tfrpc from '/tfrpc.js'; + +tfrpc.register(async function getIdentities() { + return ssb.getIdentities(); +}); +tfrpc.register(async function createID(id) { + return await ssb.createIdentity(); +}); +tfrpc.register(async function getPrivateKey(id) { + return bip39Words(await ssb.getPrivateKey(id)); +}); +tfrpc.register(async function getThemes() { + // TODO + return ['solarized', 'gruvbox', 'light']; +}); +tfrpc.register(async function setTheme() { + // TODO + console.warn("setTheme called - not implemented") + return null; +}); +tfrpc.register(async function reload() { + await main(); +}); + async function main() { // Get body.html - const body = utf8Decode(await getFile("body.html")); + const body = utf8Decode(await getFile('body.html')); // Build the document const document = ` - - - + + + + + - + ${body} `; diff --git a/apps/user_settings/body.html b/apps/user_settings/body.html index 739576ed..f4baefe3 100644 --- a/apps/user_settings/body.html +++ b/apps/user_settings/body.html @@ -1,130 +1,20 @@ -

h1

-

h2

-

hxc3

+

Your settings

-Notice: this example app fetches an image and an audio file from a third-party website. -Those will not work offline. This is a link. +
+

Appearance

-
-
- - - - - - - -
-
- - -x = 5; -y = 6; -z = x + y; - - -
-
- - - -
- -Italian Trulli - - -
- Hello -
- Hello -
- Hello -
- Hello -
-
-
+
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim leo a urna gravida, vel pulvinar magna blandit. Cras eleifend, elit ac faucibus gravida, justo mauris ornare nisi, eget ultrices lorem tortor vitae purus. Quisque et dui arcu. Nam semper, mauris id molestie imperdiet, risus nunc dignissim dolor, nec cursus elit mi sit amet dui. Nulla aliquam id mauris sed posuere. Nam mollis velit luctus accumsan aliquam. In tempor, felis id finibus tincidunt, erat nulla vehicula orci, a venenatis mauris nunc et diam. Aliquam lorem sem, iaculis ut mollis in, feugiat a mauris. Nam laoreet vestibulum leo a aliquet. Nam sit amet neque erat.

+
+

Danger Zone

-

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor, sem ac pretium accumsan, dui sapien placerat ligula, ut maximus lacus eros sed tortor. Vivamus finibus facilisis felis, quis dictum felis vestibulum nec. Mauris eu facilisis est, nec tempor sem. Quisque ac ultricies tortor. Morbi et ante at dolor accumsan molestie. Curabitur facilisis condimentum lorem a luctus. Quisque lectus risus, vestibulum non malesuada quis, porta sed urna. Sed elementum magna in velit sagittis, vel fringilla ipsum pulvinar. Morbi nec lectus egestas, laoreet erat fringilla, tristique quam.

+

Manage your identities

+ + +

Change my password

+ -

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu mattis ante. Donec venenatis pretium ornare. Nulla vel purus cursus, molestie velit a, vehicula mi. Phasellus ac eleifend sapien, in euismod mauris. Donec quis nisi sodales, accumsan mi sed, malesuada purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent venenatis enim et nisi interdum, nec sodales diam suscipit. Etiam nisl neque, dapibus id felis eget, laoreet posuere eros. Donec arcu neque, aliquam vel fringilla ut, laoreet in velit. Ut tincidunt rutrum eros vel fringilla. Sed at eleifend sem. Pellentesque ut leo in ligula accumsan dignissim quis at justo. Donec luctus felis sed lacus pharetra aliquam. Nam volutpat quis tellus eget lobortis. Proin ultrices ante vitae quam efficitur accumsan.

- -

Here is a quote from WWF's website:

- -
-For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly
- -

An Unordered HTML List

- -
    -
  • Coffee
    • -
  • Tea
    • -
  • Milk
    • -
- -

An Ordered HTML List

- -
    -
  1. Coffee
    2. -
  2. Tea
    3. -
  3. Milk
    4. -
- - - -
-
- - - - -
-
- - \ No newline at end of file +

Delete your account

+ +
diff --git a/apps/user_settings/lit-all.min.js b/apps/user_settings/lit-all.min.js new file mode 100644 index 00000000..871d24fb --- /dev/null +++ b/apps/user_settings/lit-all.min.js @@ -0,0 +1,120 @@ +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t=globalThis,s=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),e=new WeakMap;class n{constructor(t,s,e){if(this._$cssResult$=!0,e!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=s}get styleSheet(){let t=this.i;const i=this.t;if(s&&void 0===t){const s=void 0!==i&&1===i.length;s&&(t=e.get(i)),void 0===t&&((this.i=t=new CSSStyleSheet).replaceSync(this.cssText),s&&e.set(i,t))}return t}toString(){return this.cssText}}const r=t=>new n("string"==typeof t?t:t+"",void 0,i),o=(t,...s)=>{const e=1===t.length?t[0]:s.reduce(((s,i,e)=>s+(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.")})(i)+t[e+1]),t[0]);return new n(e,t,i)},h=(i,e)=>{if(s)i.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const s of e){const e=document.createElement("style"),n=t.litNonce;void 0!==n&&e.setAttribute("nonce",n),e.textContent=s.cssText,i.appendChild(e)}},c=s?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let s="";for(const i of t.cssRules)s+=i.cssText;return r(s)})(t):t +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */,{is:l,defineProperty:a,getOwnPropertyDescriptor:u,getOwnPropertyNames:d,getOwnPropertySymbols:f,getPrototypeOf:p}=Object,v=globalThis,y=v.trustedTypes,m=y?y.emptyScript:"",b=v.reactiveElementPolyfillSupport,g=(t,s)=>t,w={toAttribute(t,s){switch(s){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},_=(t,s)=>!l(t,s),S={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:_};Symbol.metadata??=Symbol("metadata"),v.litPropertyMetadata??=new WeakMap;class $ extends HTMLElement{static addInitializer(t){this.o(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this.u&&[...this.u.keys()]}static createProperty(t,s=S){if(s.state&&(s.attribute=!1),this.o(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),e=this.getPropertyDescriptor(t,i,s);void 0!==e&&a(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){const{get:e,set:n}=u(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get(){return e?.call(this)},set(s){const r=e?.call(this);n.call(this,s),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??S}static o(){if(this.hasOwnProperty(g("elementProperties")))return;const t=p(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(g("finalized")))return;if(this.finalized=!0,this.o(),this.hasOwnProperty(g("properties"))){const t=this.properties,s=[...d(t),...f(t)];for(const i of s)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i)}this.u=new Map;for(const[t,s]of this.elementProperties){const i=this.p(t,s);void 0!==i&&this.u.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const s=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)s.unshift(c(t))}else void 0!==t&&s.push(c(t));return s}static p(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this.v=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.m=null,this._()}_(){this.S=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this.$(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this.P??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this.P?.delete(t)}$(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this.v=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return h(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.P?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this.P?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}C(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor.p(t,i);if(void 0!==e&&!0===i.reflect){const n=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(s,i.type);this.m=t,null==n?this.removeAttribute(e):this.setAttribute(e,n),this.m=null}}_$AK(t,s){const i=this.constructor,e=i.u.get(t);if(void 0!==e&&this.m!==e){const t=i.getPropertyOptions(e),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this.m=e,this[e]=n.fromAttribute(s,t.type),this.m=null}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??_)(this[t],s))return;this.T(t,s,i)}!1===this.isUpdatePending&&(this.S=this.A())}T(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this.m!==t&&(this.M??=new Set).add(t)}async A(){this.isUpdatePending=!0;try{await this.S}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this.v){for(const[t,s]of this.v)this[t]=s;this.v=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.T(s,this[s],i)}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this.P?.forEach((t=>t.hostUpdate?.())),this.update(s)):this.k()}catch(s){throw t=!1,this.k(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this.P?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}k(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.S}shouldUpdate(t){return!0}update(t){this.M&&=this.M.forEach((t=>this.C(t,this[t]))),this.k()}updated(t){}firstUpdated(t){}}$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[g("elementProperties")]=new Map,$[g("finalized")]=new Map,b?.({ReactiveElement:$}),(v.reactiveElementVersions??=[]).push("2.0.4"); +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const T=globalThis,x=T.trustedTypes,E=x?x.createPolicy("lit-html",{createHTML:t=>t}):void 0,C="$lit$",P=`lit$${(Math.random()+"").slice(9)}$`,A="?"+P,k=`<${A}>`,M=document,U=()=>M.createComment(""),V=t=>null===t||"object"!=typeof t&&"function"!=typeof t,O=Array.isArray,R=t=>O(t)||"function"==typeof t?.[Symbol.iterator],N="[ \t\n\f\r]",z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,L=/-->/g,j=/>/g,H=RegExp(`>|${N}(?:([^\\s"'>=/]+)(${N}*=${N}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),I=/'/g,D=/"/g,B=/^(?:script|style|textarea|title)$/i,W=t=>(s,...i)=>({_$litType$:t,strings:s,values:i}),Z=W(1),q=W(2),F=Symbol.for("lit-noChange"),G=Symbol.for("lit-nothing"),J=new WeakMap,K=M.createTreeWalker(M,129);function Y(t,s){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(s):s}const Q=(t,s)=>{const i=t.length-1,e=[];let n,r=2===s?"":"",o=z;for(let s=0;s"===c[0]?(o=n??z,l=-1):void 0===c[1]?l=-2:(l=o.lastIndex-c[2].length,h=c[1],o=void 0===c[3]?H:'"'===c[3]?D:I):o===D||o===I?o=H:o===L||o===j?o=z:(o=H,n=void 0);const u=o===H&&t[s+1].startsWith("/>")?" ":"";r+=o===z?i+k:l>=0?(e.push(h),i.slice(0,l)+C+i.slice(l)+P+u):i+P+(-2===l?s:u)}return[Y(t,r+(t[i]||"")+(2===s?"":"")),e]};class X{constructor({strings:t,_$litType$:s},i){let e;this.parts=[];let n=0,r=0;const o=t.length-1,h=this.parts,[c,l]=Q(t,s);if(this.el=X.createElement(c,i),K.currentNode=this.el.content,2===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(e=K.nextNode())&&h.length0){e.textContent=x?x.emptyScript:"";for(let i=0;i2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=G}_$AI(t,s=this,i,e){const n=this.strings;let r=!1;if(void 0===n)t=tt(this,t,s,0),r=!V(t)||t!==this._$AH&&t!==F,r&&(this._$AH=t);else{const e=t;let o,h;for(t=n[0],o=0;o{const e=i?.renderBefore??s;let n=e._$litPart$;if(void 0===n){const t=i?.renderBefore??null;e._$litPart$=n=new it(s.insertBefore(U(),t),t,void 0,i??{})}return n._$AI(t),n}; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class ut extends ${constructor(){super(...arguments),this.renderOptions={host:this},this.ht=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.ht=at(s,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.ht?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.ht?.setConnected(!1)}render(){return F}}ut._$litElement$=!0,ut[("finalized","finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:ut});const dt=globalThis.litElementPolyfillSupport;dt?.({LitElement:ut});const ft={_$AK:(t,s,i)=>{t._$AK(s,i)},_$AL:t=>t._$AL};(globalThis.litElementVersions??=[]).push("4.0.4"); +/** + * @license + * Copyright 2022 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const pt=!1,{Y:vt}=ct,yt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,mt={HTML:1,SVG:2},bt=(t,s)=>void 0===s?void 0!==t?._$litType$:t?._$litType$===s,gt=t=>null!=t?._$litType$?.h,wt=t=>void 0!==t?._$litDirective$,_t=t=>t?._$litDirective$,St=t=>void 0===t.strings,$t=()=>document.createComment(""),Tt=(t,s,i)=>{const e=t._$AA.parentNode,n=void 0===s?t._$AB:s._$AA;if(void 0===i){const s=e.insertBefore($t(),n),r=e.insertBefore($t(),n);i=new vt(s,r,t,t.options)}else{const s=i._$AB.nextSibling,r=i._$AM,o=r!==t;if(o){let s;i._$AQ?.(t),i._$AM=t,void 0!==i._$AP&&(s=t._$AU)!==r._$AU&&i._$AP(s)}if(s!==n||o){let t=i._$AA;for(;t!==s;){const s=t.nextSibling;e.insertBefore(t,n),t=s}}}return i},xt=(t,s,i=t)=>(t._$AI(s,i),t),Et={},Ct=(t,s=Et)=>t._$AH=s,Pt=t=>t._$AH,At=t=>{t._$AP?.(!1,!0);let s=t._$AA;const i=t._$AB.nextSibling;for(;s!==i;){const t=s.nextSibling;s.remove(),s=t}},kt=t=>{t._$AR()},Mt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Ut=t=>(...s)=>({_$litDirective$:t,values:s});class Vt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,s,i){this.nt=t,this._$AM=s,this.rt=i}_$AS(t,s){return this.update(t,s)}update(t,s){return this.render(...s)}} +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const Ot=(t,s)=>{const i=t._$AN;if(void 0===i)return!1;for(const t of i)t._$AO?.(s,!1),Ot(t,s);return!0},Rt=t=>{let s,i;do{if(void 0===(s=t._$AM))break;i=s._$AN,i.delete(t),t=s}while(0===i?.size)},Nt=t=>{for(let s;s=t._$AM;t=s){let i=s._$AN;if(void 0===i)s._$AN=i=new Set;else if(i.has(t))break;i.add(t),jt(s)}};function zt(t){void 0!==this._$AN?(Rt(this),this._$AM=t,Nt(this)):this._$AM=t}function Lt(t,s=!1,i=0){const e=this._$AH,n=this._$AN;if(void 0!==n&&0!==n.size)if(s)if(Array.isArray(e))for(let t=i;t{2==t.type&&(t._$AP??=Lt,t._$AQ??=zt)};class Ht extends Vt{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,s,i){super._$AT(t,s,i),Nt(this),this.isConnected=t._$AU}_$AO(t,s=!0){t!==this.isConnected&&(this.isConnected=t,t?this.reconnected?.():this.disconnected?.()),s&&(Ot(this,t),Rt(this))}setValue(t){if(St(this.nt))this.nt._$AI(t,this);else{const s=[...this.nt._$AH];s[this.rt]=t,this.nt._$AI(s,this,0)}}disconnected(){}reconnected(){}} +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class It{constructor(t){this.ct=t}disconnect(){this.ct=void 0}reconnect(t){this.ct=t}deref(){return this.ct}}class Dt{constructor(){this.lt=void 0,this.ut=void 0}get(){return this.lt}pause(){this.lt??=new Promise((t=>this.ut=t))}resume(){this.ut?.(),this.lt=this.ut=void 0}} +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class Bt extends Ht{constructor(){super(...arguments),this.dt=new It(this),this.ft=new Dt}render(t,s){return F}update(t,[s,i]){if(this.isConnected||this.disconnected(),s===this.vt)return F;this.vt=s;let e=0;const{dt:n,ft:r}=this;return(async(t,s)=>{for await(const i of t)if(!1===await s(i))return})(s,(async t=>{for(;r.get();)await r.get();const o=n.deref();if(void 0!==o){if(o.vt!==s)return!1;void 0!==i&&(t=i(t,e)),o.commitValue(t,e),e++}return!0})),F}commitValue(t,s){this.setValue(t)}disconnected(){this.dt.disconnect(),this.ft.pause()}reconnected(){this.dt.reconnect(this),this.ft.resume()}}const Wt=Ut(Bt),Zt=Ut( +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +class extends Bt{constructor(t){if(super(t),2!==t.type)throw Error("asyncAppend can only be used in child expressions")}update(t,s){return this.ht=t,super.update(t,s)}commitValue(t,s){0===s&&kt(this.ht);const i=Tt(this.ht);xt(i,t)}}),qt=t=>gt(t)?t._$litType$.h:t.strings,Ft=Ut(class extends Vt{constructor(t){super(t),this.yt=new WeakMap}render(t){return[t]}update(t,[s]){const i=bt(this.bt)?qt(this.bt):null,e=bt(s)?qt(s):null;if(null!==i&&(null===e||i!==e)){const s=Pt(t).pop();let e=this.yt.get(i);if(void 0===e){const t=document.createDocumentFragment();e=at(G,t),e.setConnected(!1),this.yt.set(i,e)}Ct(e,[s]),Tt(e,void 0,s)}if(null!==e){if(null===i||i!==e){const s=this.yt.get(e);if(void 0!==s){const i=Pt(s).pop();kt(t),Tt(t,void 0,i),Ct(t,[i])}}this.bt=s}else this.bt=void 0;return this.render(s)}}),Gt=(t,s,i)=>{for(const i of s)if(i[0]===t)return(0,i[1])();return i?.()},Jt=Ut( +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +class extends Vt{constructor(t){if(super(t),1!==t.type||"class"!==t.name||t.strings?.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((s=>t[s])).join(" ")+" "}update(t,[s]){if(void 0===this.gt){this.gt=new Set,void 0!==t.strings&&(this.wt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in s)s[t]&&!this.wt?.has(t)&&this.gt.add(t);return this.render(s)}const i=t.element.classList;for(const t of this.gt)t in s||(i.remove(t),this.gt.delete(t));for(const t in s){const e=!!s[t];e===this.gt.has(t)||this.wt?.has(t)||(e?(i.add(t),this.gt.add(t)):(i.remove(t),this.gt.delete(t)))}return F}}),Kt={},Yt=Ut(class extends Vt{constructor(){super(...arguments),this._t=Kt}render(t,s){return s()}update(t,[s,i]){if(Array.isArray(s)){if(Array.isArray(this._t)&&this._t.length===s.length&&s.every(((t,s)=>t===this._t[s])))return F}else if(this._t===s)return F;return this._t=Array.isArray(s)?Array.from(s):s,this.render(s,i)}}),Qt=t=>t??G +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */;function*Xt(t,s){const i="function"==typeof s;if(void 0!==t){let e=-1;for(const n of t)e>-1&&(yield i?s(e):s),e++,yield n}} +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const ts=Ut(class extends Vt{constructor(){super(...arguments),this.key=G}render(t,s){return this.key=t,s}update(t,[s,i]){return s!==this.key&&(Ct(t),this.key=s),i}}),ss=Ut( +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +class extends Vt{constructor(t){if(super(t),3!==t.type&&1!==t.type&&4!==t.type)throw Error("The `live` directive is not allowed on child or event bindings");if(!St(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[s]){if(s===F||s===G)return s;const i=t.element,e=t.name;if(3===t.type){if(s===i[e])return F}else if(4===t.type){if(!!s===i.hasAttribute(e))return F}else if(1===t.type&&i.getAttribute(e)===s+"")return F;return Ct(t),s}}); +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +function*is(t,s){if(void 0!==t){let i=0;for(const e of t)yield s(e,i++)}} +/** + * @license + * Copyright 2021 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */function*es(t,s,i=1){const e=void 0===s?0:t;s??=t;for(let t=e;i>0?tnew rs;class rs{}const os=new WeakMap,hs=Ut(class extends Ht{render(t){return G}update(t,[s]){const i=s!==this.ct;return i&&void 0!==this.ct&&this.St(void 0),(i||this.$t!==this.Tt)&&(this.ct=s,this.xt=t.options?.host,this.St(this.Tt=t.element)),G}St(t){if("function"==typeof this.ct){const s=this.xt??globalThis;let i=os.get(s);void 0===i&&(i=new WeakMap,os.set(s,i)),void 0!==i.get(this.ct)&&this.ct.call(this.xt,void 0),i.set(this.ct,t),void 0!==t&&this.ct.call(this.xt,t)}else this.ct.value=t}get $t(){return"function"==typeof this.ct?os.get(this.xt??globalThis)?.get(this.ct):this.ct?.value}disconnected(){this.$t===this.Tt&&this.St(void 0)}reconnected(){this.St(this.Tt)}}),cs=(t,s,i)=>{const e=new Map;for(let n=s;n<=i;n++)e.set(t[n],n);return e},ls=Ut(class extends Vt{constructor(t){if(super(t),2!==t.type)throw Error("repeat() can only be used in text expressions")}Et(t,s,i){let e;void 0===i?i=s:void 0!==s&&(e=s);const n=[],r=[];let o=0;for(const s of t)n[o]=e?e(s,o):o,r[o]=i(s,o),o++;return{values:r,keys:n}}render(t,s,i){return this.Et(t,s,i).values}update(t,[s,i,e]){const n=Pt(t),{values:r,keys:o}=this.Et(s,i,e);if(!Array.isArray(n))return this.Ct=o,r;const h=this.Ct??=[],c=[];let l,a,u=0,d=n.length-1,f=0,p=r.length-1;for(;u<=d&&f<=p;)if(null===n[u])u++;else if(null===n[d])d--;else if(h[u]===o[f])c[f]=xt(n[u],r[f]),u++,f++;else if(h[d]===o[p])c[p]=xt(n[d],r[p]),d--,p--;else if(h[u]===o[p])c[p]=xt(n[u],r[p]),Tt(t,c[p+1],n[u]),u++,p--;else if(h[d]===o[f])c[f]=xt(n[d],r[f]),Tt(t,n[u],n[d]),d--,f++;else if(void 0===l&&(l=cs(o,f,p),a=cs(h,u,d)),l.has(h[u]))if(l.has(h[d])){const s=a.get(o[f]),i=void 0!==s?n[s]:null;if(null===i){const s=Tt(t,n[u]);xt(s,r[f]),c[f]=s}else c[f]=xt(i,r[f]),Tt(t,n[u],i),n[s]=null;f++}else At(n[d]),d--;else At(n[u]),u++;for(;f<=p;){const s=Tt(t,c[p+1]);xt(s,r[f]),c[f++]=s}for(;u<=d;){const t=n[u++];null!==t&&At(t)}return this.Ct=o,Ct(t,c),F}}),as="important",us=" !"+as,ds=Ut(class extends Vt{constructor(t){if(super(t),1!==t.type||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((s,i)=>{const e=t[i];return null==e?s:s+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`}),"")}update(t,[s]){const{style:i}=t.element;if(void 0===this.Pt)return this.Pt=new Set(Object.keys(s)),this.render(s);for(const t of this.Pt)null==s[t]&&(this.Pt.delete(t),t.includes("-")?i.removeProperty(t):i[t]=null);for(const t in s){const e=s[t];if(null!=e){this.Pt.add(t);const s="string"==typeof e&&e.endsWith(us);t.includes("-")||s?i.setProperty(t,s?e.slice(0,-11):e,s?as:""):i[t]=e}}return F}}),fs=Ut( +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +class extends Vt{constructor(t){if(super(t),2!==t.type)throw Error("templateContent can only be used in child bindings")}render(t){return this.At===t?F:(this.At=t,document.importNode(t.content,!0))}});class ps extends Vt{constructor(t){if(super(t),this.bt=G,2!==t.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===G||null==t)return this.kt=void 0,this.bt=t;if(t===F)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.bt)return this.kt;this.bt=t;const s=[t];return s.raw=s,this.kt={_$litType$:this.constructor.resultType,strings:s,values:[]}}}ps.directiveName="unsafeHTML",ps.resultType=1;const vs=Ut(ps); +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class ys extends ps{}ys.directiveName="unsafeSVG",ys.resultType=2;const ms=Ut(ys),bs=t=>!yt(t)&&"function"==typeof t.then,gs=1073741823; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class ws extends Ht{constructor(){super(...arguments),this.Mt=gs,this.Ut=[],this.dt=new It(this),this.ft=new Dt}render(...t){return t.find((t=>!bs(t)))??F}update(t,s){const i=this.Ut;let e=i.length;this.Ut=s;const n=this.dt,r=this.ft;this.isConnected||this.disconnected();for(let t=0;tthis.Mt);t++){const o=s[t];if(!bs(o))return this.Mt=t,o;t{for(;r.get();)await r.get();const s=n.deref();if(void 0!==s){const i=s.Ut.indexOf(o);i>-1&&i{if(t?.r===$s)return t?._$litStatic$},xs=t=>({_$litStatic$:t,r:$s}),Es=(t,...s)=>({_$litStatic$:s.reduce(((s,i,e)=>s+(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.`)})(i)+t[e+1]),t[0]),r:$s}),Cs=new Map,Ps=t=>(s,...i)=>{const e=i.length;let n,r;const o=[],h=[];let c,l=0,a=!1;for(;l;\n\n/**\n * A single CSSResult, CSSStyleSheet, or an array or nested arrays of those.\n */\nexport type CSSResultGroup = CSSResultOrNative | CSSResultArray;\n\nconst constructionToken = Symbol();\n\nconst cssTagCache = new WeakMap();\n\n/**\n * A container for a string of CSS text, that may be used to create a CSSStyleSheet.\n *\n * CSSResult is the return value of `css`-tagged template literals and\n * `unsafeCSS()`. In order to ensure that CSSResults are only created via the\n * `css` tag and `unsafeCSS()`, CSSResult cannot be constructed directly.\n */\nexport class CSSResult {\n // This property needs to remain unminified.\n ['_$cssResult$'] = true;\n readonly cssText: string;\n private _styleSheet?: CSSStyleSheet;\n private _strings: TemplateStringsArray | undefined;\n\n private constructor(\n cssText: string,\n strings: TemplateStringsArray | undefined,\n safeToken: symbol\n ) {\n if (safeToken !== constructionToken) {\n throw new Error(\n 'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'\n );\n }\n this.cssText = cssText;\n this._strings = strings;\n }\n\n // This is a getter so that it's lazy. In practice, this means stylesheets\n // are not created until the first element instance is made.\n get styleSheet(): CSSStyleSheet | undefined {\n // If `supportsAdoptingStyleSheets` is true then we assume CSSStyleSheet is\n // constructable.\n let styleSheet = this._styleSheet;\n const strings = this._strings;\n if (supportsAdoptingStyleSheets && styleSheet === undefined) {\n const cacheable = strings !== undefined && strings.length === 1;\n if (cacheable) {\n styleSheet = cssTagCache.get(strings);\n }\n if (styleSheet === undefined) {\n (this._styleSheet = styleSheet = new CSSStyleSheet()).replaceSync(\n this.cssText\n );\n if (cacheable) {\n cssTagCache.set(strings, styleSheet);\n }\n }\n }\n return styleSheet;\n }\n\n toString(): string {\n return this.cssText;\n }\n}\n\ntype ConstructableCSSResult = CSSResult & {\n new (\n cssText: string,\n strings: TemplateStringsArray | undefined,\n safeToken: symbol\n ): CSSResult;\n};\n\nconst textFromCSSResult = (value: CSSResultGroup | number) => {\n // This property needs to remain unminified.\n if ((value as CSSResult)['_$cssResult$'] === true) {\n return (value as CSSResult).cssText;\n } else if (typeof value === 'number') {\n return value;\n } else {\n throw new Error(\n `Value passed to 'css' function must be a 'css' function result: ` +\n `${value}. Use 'unsafeCSS' to pass non-literal values, but take care ` +\n `to ensure page security.`\n );\n }\n};\n\n/**\n * Wrap a value for interpolation in a {@linkcode css} tagged template literal.\n *\n * This is unsafe because untrusted CSS text can be used to phone home\n * or exfiltrate data to an attacker controlled site. Take care to only use\n * this with trusted input.\n */\nexport const unsafeCSS = (value: unknown) =>\n new (CSSResult as ConstructableCSSResult)(\n typeof value === 'string' ? value : String(value),\n undefined,\n constructionToken\n );\n\n/**\n * A template literal tag which can be used with LitElement's\n * {@linkcode LitElement.styles} property to set element styles.\n *\n * For security reasons, only literal string values and number may be used in\n * embedded expressions. To incorporate non-literal values {@linkcode unsafeCSS}\n * may be used inside an expression.\n */\nexport const css = (\n strings: TemplateStringsArray,\n ...values: (CSSResultGroup | number)[]\n): CSSResult => {\n const cssText =\n strings.length === 1\n ? strings[0]\n : values.reduce(\n (acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1],\n strings[0]\n );\n return new (CSSResult as ConstructableCSSResult)(\n cssText,\n strings,\n constructionToken\n );\n};\n\n/**\n * Applies the given styles to a `shadowRoot`. When Shadow DOM is\n * available but `adoptedStyleSheets` is not, styles are appended to the\n * `shadowRoot` to [mimic spec behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).\n * Note, when shimming is used, any styles that are subsequently placed into\n * the shadowRoot should be placed *before* any shimmed adopted styles. This\n * will match spec behavior that gives adopted sheets precedence over styles in\n * shadowRoot.\n */\nexport const adoptStyles = (\n renderRoot: ShadowRoot,\n styles: Array\n) => {\n if (supportsAdoptingStyleSheets) {\n (renderRoot as ShadowRoot).adoptedStyleSheets = styles.map((s) =>\n s instanceof CSSStyleSheet ? s : s.styleSheet!\n );\n } else {\n for (const s of styles) {\n const style = document.createElement('style');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const nonce = (global as any)['litNonce'];\n if (nonce !== undefined) {\n style.setAttribute('nonce', nonce);\n }\n style.textContent = (s as CSSResult).cssText;\n renderRoot.appendChild(style);\n }\n }\n};\n\nconst cssResultFromStyleSheet = (sheet: CSSStyleSheet) => {\n let cssText = '';\n for (const rule of sheet.cssRules) {\n cssText += rule.cssText;\n }\n return unsafeCSS(cssText);\n};\n\nexport const getCompatibleStyle =\n supportsAdoptingStyleSheets ||\n (NODE_MODE && global.CSSStyleSheet === undefined)\n ? (s: CSSResultOrNative) => s\n : (s: CSSResultOrNative) =>\n s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;\n","/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\n/**\n * Use this module if you want to create your own base class extending\n * {@link ReactiveElement}.\n * @packageDocumentation\n */\n\nimport {\n getCompatibleStyle,\n adoptStyles,\n CSSResultGroup,\n CSSResultOrNative,\n} from './css-tag.js';\nimport type {\n ReactiveController,\n ReactiveControllerHost,\n} from './reactive-controller.js';\n\n// In the Node build, this import will be injected by Rollup:\n// import {HTMLElement, customElements} from '@lit-labs/ssr-dom-shim';\n\nexport * from './css-tag.js';\nexport type {\n ReactiveController,\n ReactiveControllerHost,\n} from './reactive-controller.js';\n\n/**\n * Removes the `readonly` modifier from properties in the union K.\n *\n * This is a safer way to cast a value to a type with a mutable version of a\n * readonly field, than casting to an interface with the field re-declared\n * because it preserves the type of all the fields and warns on typos.\n */\ntype Mutable = Omit & {\n -readonly [P in keyof Pick]: P extends K ? T[P] : never;\n};\n\n// TODO (justinfagnani): Add `hasOwn` here when we ship ES2022\nconst {\n is,\n defineProperty,\n getOwnPropertyDescriptor,\n getOwnPropertyNames,\n getOwnPropertySymbols,\n getPrototypeOf,\n} = Object;\n\nconst NODE_MODE = false;\n\n// Lets a minifier replace globalThis references with a minified name\nconst global = globalThis;\n\nif (NODE_MODE) {\n global.customElements ??= customElements;\n}\n\nconst DEV_MODE = true;\n\nlet issueWarning: (code: string, warning: string) => void;\n\nconst trustedTypes = (global as unknown as {trustedTypes?: {emptyScript: ''}})\n .trustedTypes;\n\n// Temporary workaround for https://crbug.com/993268\n// Currently, any attribute starting with \"on\" is considered to be a\n// TrustedScript source. Such boolean attributes must be set to the equivalent\n// trusted emptyScript value.\nconst emptyStringForBooleanAttribute = trustedTypes\n ? (trustedTypes.emptyScript as unknown as '')\n : '';\n\nconst polyfillSupport = DEV_MODE\n ? global.reactiveElementPolyfillSupportDevMode\n : global.reactiveElementPolyfillSupport;\n\nif (DEV_MODE) {\n // Ensure warnings are issued only 1x, even if multiple versions of Lit\n // are loaded.\n const issuedWarnings: Set = (global.litIssuedWarnings ??=\n new Set());\n\n // Issue a warning, if we haven't already.\n issueWarning = (code: string, warning: string) => {\n warning += ` See https://lit.dev/msg/${code} for more information.`;\n if (!issuedWarnings.has(warning)) {\n console.warn(warning);\n issuedWarnings.add(warning);\n }\n };\n\n issueWarning(\n 'dev-mode',\n `Lit is in dev mode. Not recommended for production!`\n );\n\n // Issue polyfill support warning.\n if (global.ShadyDOM?.inUse && polyfillSupport === undefined) {\n issueWarning(\n 'polyfill-support-missing',\n `Shadow DOM is being polyfilled via \\`ShadyDOM\\` but ` +\n `the \\`polyfill-support\\` module has not been loaded.`\n );\n }\n}\n\n/**\n * Contains types that are part of the unstable debug API.\n *\n * Everything in this API is not stable and may change or be removed in the future,\n * even on patch releases.\n */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport namespace ReactiveUnstable {\n /**\n * When Lit is running in dev mode and `window.emitLitDebugLogEvents` is true,\n * we will emit 'lit-debug' events to window, with live details about the update and render\n * lifecycle. These can be useful for writing debug tooling and visualizations.\n *\n * Please be aware that running with window.emitLitDebugLogEvents has performance overhead,\n * making certain operations that are normally very cheap (like a no-op render) much slower,\n * because we must copy data and dispatch events.\n */\n // eslint-disable-next-line @typescript-eslint/no-namespace\n export namespace DebugLog {\n export type Entry = Update;\n export interface Update {\n kind: 'update';\n }\n }\n}\n\ninterface DebugLoggingWindow {\n // Even in dev mode, we generally don't want to emit these events, as that's\n // another level of cost, so only emit them when DEV_MODE is true _and_ when\n // window.emitLitDebugEvents is true.\n emitLitDebugLogEvents?: boolean;\n}\n\n/**\n * Useful for visualizing and logging insights into what the Lit template system is doing.\n *\n * Compiled out of prod mode builds.\n */\nconst debugLogEvent = DEV_MODE\n ? (event: ReactiveUnstable.DebugLog.Entry) => {\n const shouldEmit = (global as unknown as DebugLoggingWindow)\n .emitLitDebugLogEvents;\n if (!shouldEmit) {\n return;\n }\n global.dispatchEvent(\n new CustomEvent('lit-debug', {\n detail: event,\n })\n );\n }\n : undefined;\n\n/*\n * When using Closure Compiler, JSCompiler_renameProperty(property, object) is\n * replaced at compile time by the munged name for object[property]. We cannot\n * alias this function, so we have to use a small shim that has the same\n * behavior when not compiling.\n */\n/*@__INLINE__*/\nconst JSCompiler_renameProperty =

(\n prop: P,\n _obj: unknown\n): P => prop;\n\n/**\n * Converts property values to and from attribute values.\n */\nexport interface ComplexAttributeConverter {\n /**\n * Called to convert an attribute value to a property\n * value.\n */\n fromAttribute?(value: string | null, type?: TypeHint): Type;\n\n /**\n * Called to convert a property value to an attribute\n * value.\n *\n * It returns unknown instead of string, to be compatible with\n * https://github.com/WICG/trusted-types (and similar efforts).\n */\n toAttribute?(value: Type, type?: TypeHint): unknown;\n}\n\ntype AttributeConverter =\n | ComplexAttributeConverter\n | ((value: string | null, type?: TypeHint) => Type);\n\n/**\n * Defines options for a property accessor.\n */\nexport interface PropertyDeclaration {\n /**\n * When set to `true`, indicates the property is internal private state. The\n * property should not be set by users. When using TypeScript, this property\n * should be marked as `private` or `protected`, and it is also a common\n * practice to use a leading `_` in the name. The property is not added to\n * `observedAttributes`.\n */\n readonly state?: boolean;\n\n /**\n * Indicates how and whether the property becomes an observed attribute.\n * If the value is `false`, the property is not added to `observedAttributes`.\n * If true or absent, the lowercased property name is observed (e.g. `fooBar`\n * becomes `foobar`). If a string, the string value is observed (e.g\n * `attribute: 'foo-bar'`).\n */\n readonly attribute?: boolean | string;\n\n /**\n * Indicates the type of the property. This is used only as a hint for the\n * `converter` to determine how to convert the attribute\n * to/from a property.\n */\n readonly type?: TypeHint;\n\n /**\n * Indicates how to convert the attribute to/from a property. If this value\n * is a function, it is used to convert the attribute value a the property\n * value. If it's an object, it can have keys for `fromAttribute` and\n * `toAttribute`. If no `toAttribute` function is provided and\n * `reflect` is set to `true`, the property value is set directly to the\n * attribute. A default `converter` is used if none is provided; it supports\n * `Boolean`, `String`, `Number`, `Object`, and `Array`. Note,\n * when a property changes and the converter is used to update the attribute,\n * the property is never updated again as a result of the attribute changing,\n * and vice versa.\n */\n readonly converter?: AttributeConverter;\n\n /**\n * Indicates if the property should reflect to an attribute.\n * If `true`, when the property is set, the attribute is set using the\n * attribute name determined according to the rules for the `attribute`\n * property option and the value of the property converted using the rules\n * from the `converter` property option.\n */\n readonly reflect?: boolean;\n\n /**\n * A function that indicates if a property should be considered changed when\n * it is set. The function should take the `newValue` and `oldValue` and\n * return `true` if an update should be requested.\n */\n hasChanged?(value: Type, oldValue: Type): boolean;\n\n /**\n * Indicates whether an accessor will be created for this property. By\n * default, an accessor will be generated for this property that requests an\n * update when set. If this flag is `true`, no accessor will be created, and\n * it will be the user's responsibility to call\n * `this.requestUpdate(propertyName, oldValue)` to request an update when\n * the property changes.\n */\n readonly noAccessor?: boolean;\n\n /**\n * Whether this property is wrapping accessors. This is set by `@property`\n * to control the initial value change and reflection logic.\n *\n * @internal\n */\n wrapped?: boolean;\n}\n\n/**\n * Map of properties to PropertyDeclaration options. For each property an\n * accessor is made, and the property is processed according to the\n * PropertyDeclaration options.\n */\nexport interface PropertyDeclarations {\n readonly [key: string]: PropertyDeclaration;\n}\n\ntype PropertyDeclarationMap = Map;\n\ntype AttributeMap = Map;\n\n/**\n * A Map of property keys to values.\n *\n * Takes an optional type parameter T, which when specified as a non-any,\n * non-unknown type, will make the Map more strongly-typed, associating the map\n * keys with their corresponding value type on T.\n *\n * Use `PropertyValues` when overriding ReactiveElement.update() and\n * other lifecycle methods in order to get stronger type-checking on keys\n * and values.\n */\n// This type is conditional so that if the parameter T is not specified, or\n// is `any`, the type will include `Map`. Since T is not\n// given in the uses of PropertyValues in this file, all uses here fallback to\n// meaning `Map`, but if a developer uses\n// `PropertyValues` (or any other value for T) they will get a\n// strongly-typed Map type.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type PropertyValues = T extends object\n ? PropertyValueMap\n : Map;\n\n/**\n * Do not use, instead prefer {@linkcode PropertyValues}.\n */\n// This type must be exported such that JavaScript generated by the Google\n// Closure Compiler can import a type reference.\nexport interface PropertyValueMap extends Map {\n get(k: K): T[K] | undefined;\n set(key: K, value: T[K]): this;\n has(k: K): boolean;\n delete(k: K): boolean;\n}\n\nexport const defaultConverter: ComplexAttributeConverter = {\n toAttribute(value: unknown, type?: unknown): unknown {\n switch (type) {\n case Boolean:\n value = value ? emptyStringForBooleanAttribute : null;\n break;\n case Object:\n case Array:\n // if the value is `null` or `undefined` pass this through\n // to allow removing/no change behavior.\n value = value == null ? value : JSON.stringify(value);\n break;\n }\n return value;\n },\n\n fromAttribute(value: string | null, type?: unknown) {\n let fromValue: unknown = value;\n switch (type) {\n case Boolean:\n fromValue = value !== null;\n break;\n case Number:\n fromValue = value === null ? null : Number(value);\n break;\n case Object:\n case Array:\n // Do *not* generate exception when invalid JSON is set as elements\n // don't normally complain on being mis-configured.\n // TODO(sorvell): Do generate exception in *dev mode*.\n try {\n // Assert to adhere to Bazel's \"must type assert JSON parse\" rule.\n fromValue = JSON.parse(value!) as unknown;\n } catch (e) {\n fromValue = null;\n }\n break;\n }\n return fromValue;\n },\n};\n\nexport interface HasChanged {\n (value: unknown, old: unknown): boolean;\n}\n\n/**\n * Change function that returns true if `value` is different from `oldValue`.\n * This method is used as the default for a property's `hasChanged` function.\n */\nexport const notEqual: HasChanged = (value: unknown, old: unknown): boolean =>\n !is(value, old);\n\nconst defaultPropertyDeclaration: PropertyDeclaration = {\n attribute: true,\n type: String,\n converter: defaultConverter,\n reflect: false,\n hasChanged: notEqual,\n};\n\n/**\n * A string representing one of the supported dev mode warning categories.\n */\nexport type WarningKind =\n | 'change-in-update'\n | 'migration'\n | 'async-perform-update';\n\nexport type Initializer = (element: ReactiveElement) => void;\n\n// Temporary, until google3 is on TypeScript 5.2\ndeclare global {\n interface SymbolConstructor {\n readonly metadata: unique symbol;\n }\n}\n\n// Ensure metadata is enabled. TypeScript does not polyfill\n// Symbol.metadata, so we must ensure that it exists.\n(Symbol as {metadata: symbol}).metadata ??= Symbol('metadata');\n\ndeclare global {\n // This is public global API, do not change!\n // eslint-disable-next-line no-var\n var litPropertyMetadata: WeakMap<\n object,\n Map\n >;\n}\n\n// Map from a class's metadata object to property options\n// Note that we must use nullish-coalescing assignment so that we only use one\n// map even if we load multiple version of this module.\nglobal.litPropertyMetadata ??= new WeakMap<\n object,\n Map\n>();\n\n/**\n * Base element class which manages element properties and attributes. When\n * properties change, the `update` method is asynchronously called. This method\n * should be supplied by subclasses to render updates as desired.\n * @noInheritDoc\n */\nexport abstract class ReactiveElement\n // In the Node build, this `extends` clause will be substituted with\n // `(globalThis.HTMLElement ?? HTMLElement)`.\n //\n // This way, we will first prefer any global `HTMLElement` polyfill that the\n // user has assigned, and then fall back to the `HTMLElement` shim which has\n // been imported (see note at the top of this file about how this import is\n // generated by Rollup). Note that the `HTMLElement` variable has been\n // shadowed by this import, so it no longer refers to the global.\n extends HTMLElement\n implements ReactiveControllerHost\n{\n // Note: these are patched in only in DEV_MODE.\n /**\n * Read or set all the enabled warning categories for this class.\n *\n * This property is only used in development builds.\n *\n * @nocollapse\n * @category dev-mode\n */\n static enabledWarnings?: WarningKind[];\n\n /**\n * Enable the given warning category for this class.\n *\n * This method only exists in development builds, so it should be accessed\n * with a guard like:\n *\n * ```ts\n * // Enable for all ReactiveElement subclasses\n * ReactiveElement.enableWarning?.('migration');\n *\n * // Enable for only MyElement and subclasses\n * MyElement.enableWarning?.('migration');\n * ```\n *\n * @nocollapse\n * @category dev-mode\n */\n static enableWarning?: (warningKind: WarningKind) => void;\n\n /**\n * Disable the given warning category for this class.\n *\n * This method only exists in development builds, so it should be accessed\n * with a guard like:\n *\n * ```ts\n * // Disable for all ReactiveElement subclasses\n * ReactiveElement.disableWarning?.('migration');\n *\n * // Disable for only MyElement and subclasses\n * MyElement.disableWarning?.('migration');\n * ```\n *\n * @nocollapse\n * @category dev-mode\n */\n static disableWarning?: (warningKind: WarningKind) => void;\n\n /**\n * Adds an initializer function to the class that is called during instance\n * construction.\n *\n * This is useful for code that runs against a `ReactiveElement`\n * subclass, such as a decorator, that needs to do work for each\n * instance, such as setting up a `ReactiveController`.\n *\n * ```ts\n * const myDecorator = (target: typeof ReactiveElement, key: string) => {\n * target.addInitializer((instance: ReactiveElement) => {\n * // This is run during construction of the element\n * new MyController(instance);\n * });\n * }\n * ```\n *\n * Decorating a field will then cause each instance to run an initializer\n * that adds a controller:\n *\n * ```ts\n * class MyElement extends LitElement {\n * @myDecorator foo;\n * }\n * ```\n *\n * Initializers are stored per-constructor. Adding an initializer to a\n * subclass does not add it to a superclass. Since initializers are run in\n * constructors, initializers will run in order of the class hierarchy,\n * starting with superclasses and progressing to the instance's class.\n *\n * @nocollapse\n */\n static addInitializer(initializer: Initializer) {\n this.__prepare();\n (this._initializers ??= []).push(initializer);\n }\n\n static _initializers?: Initializer[];\n\n /*\n * Due to closure compiler ES6 compilation bugs, @nocollapse is required on\n * all static methods and properties with initializers. Reference:\n * - https://github.com/google/closure-compiler/issues/1776\n */\n\n /**\n * Maps attribute names to properties; for example `foobar` attribute to\n * `fooBar` property. Created lazily on user subclasses when finalizing the\n * class.\n * @nocollapse\n */\n private static __attributeToPropertyMap: AttributeMap;\n\n /**\n * Marks class as having been finalized, which includes creating properties\n * from `static properties`, but does *not* include all properties created\n * from decorators.\n * @nocollapse\n */\n protected static finalized: true | undefined;\n\n /**\n * Memoized list of all element properties, including any superclass\n * properties. Created lazily on user subclasses when finalizing the class.\n *\n * @nocollapse\n * @category properties\n */\n static elementProperties: PropertyDeclarationMap;\n\n /**\n * User-supplied object that maps property names to `PropertyDeclaration`\n * objects containing options for configuring reactive properties. When\n * a reactive property is set the element will update and render.\n *\n * By default properties are public fields, and as such, they should be\n * considered as primarily settable by element users, either via attribute or\n * the property itself.\n *\n * Generally, properties that are changed by the element should be private or\n * protected fields and should use the `state: true` option. Properties\n * marked as `state` do not reflect from the corresponding attribute\n *\n * However, sometimes element code does need to set a public property. This\n * should typically only be done in response to user interaction, and an event\n * should be fired informing the user; for example, a checkbox sets its\n * `checked` property when clicked and fires a `changed` event. Mutating\n * public properties should typically not be done for non-primitive (object or\n * array) properties. In other cases when an element needs to manage state, a\n * private property set with the `state: true` option should be used. When\n * needed, state properties can be initialized via public properties to\n * facilitate complex interactions.\n * @nocollapse\n * @category properties\n */\n static properties: PropertyDeclarations;\n\n /**\n * Memoized list of all element styles.\n * Created lazily on user subclasses when finalizing the class.\n * @nocollapse\n * @category styles\n */\n static elementStyles: Array = [];\n\n /**\n * Array of styles to apply to the element. The styles should be defined\n * using the {@linkcode css} tag function, via constructible stylesheets, or\n * imported from native CSS module scripts.\n *\n * Note on Content Security Policy:\n *\n * Element styles are implemented with ` + +

Create a new identity

+ + +

Import an SSB Identity from 12 BIP39 English Words

+ + + +

Warning !

+ Anybody that has access to your private key can gain total access over your account. +

+ Tilde Friends' contributors will never ask you for your private key ! + +
    + ${this.ids.map( + (id) => + html` +
  • + + + ${id} +
    • ` + )} +
`; + } +} + +customElements.define('tf-identity-manager', TfIdentityManagerElement); diff --git a/apps/user_settings/tf-password-form.js b/apps/user_settings/tf-password-form.js new file mode 100644 index 00000000..c672886e --- /dev/null +++ b/apps/user_settings/tf-password-form.js @@ -0,0 +1,68 @@ +import {LitElement, html} from './lit-all.min.js'; +import * as tfrpc from '/static/tfrpc.js'; + +class TfPasswordFormElement extends LitElement { + static get properties() { + return { + //selected: {type: String}, + }; + } + + constructor() { + super(); + } + + /** + * Checks a password against different requirements + * @param {string} password the password to validate + * @returns + */ + validatePassword(password) { + // TODO(tasiaiso) + return true; + } + + submitPassword() { + const currentPwd = this.shadowRoot.getElementById('current').value; + const newPwd = this.shadowRoot.getElementById('new').value; + const repeatPwd = this.shadowRoot.getElementById('Repeat').value; + + if (!(newPwd === repeatPwd)) { + return; + } + + // TODO + // tfrpc.changePassword() + } + + render() { + return html` + + + + +
+ + + + + + + + +
+ + + + `; + } +} + +customElements.define('tf-password-form', TfPasswordFormElement); \ No newline at end of file diff --git a/apps/user_settings/tf-theme-picker.js b/apps/user_settings/tf-theme-picker.js new file mode 100644 index 00000000..a8160b7a --- /dev/null +++ b/apps/user_settings/tf-theme-picker.js @@ -0,0 +1,40 @@ +import {LitElement, html} from './lit-all.min.js'; +import * as tfrpc from '/static/tfrpc.js'; + +class TfThemePickerElement extends LitElement { + static get properties() { + return { + selected: {type: String}, + themes: {type: Array}, + }; + } + + constructor() { + super(); + this.load(); + } + + async load() { + this.themes = await tfrpc.rpc.getThemes(); + } + + changed(event) { + this.selected = event.srcElement.value; + console.log('selected theme', this.selected); + // TODO + } + + render() { + return html` + + + + + + `; + } +} + +customElements.define('tf-theme-picker', TfThemePickerElement); diff --git a/apps/user_settings/tildefriends.css b/core/tildefriends-v1.css similarity index 89% rename from apps/user_settings/tildefriends.css rename to core/tildefriends-v1.css index 01c0e50e..4074a577 100644 --- a/apps/user_settings/tildefriends.css +++ b/core/tildefriends-v1.css @@ -1,15 +1,14 @@ /* * Tilde Friends core stylesheet - * This is a prototype; things may change based on feedback. * * This Software is an external library that is part of * Tilde Friends and is shared under the MIT license. * * Inject this file in your app at tildefriends.css * and use this tag to import it: - * + * * - * Revision 0 / 2024 M02 19 + * v1.0.0 / 2024 M03 21 */ body { @@ -21,7 +20,7 @@ button, .button, input[type=button], input[type=submit], -input[type=dropdown] { +select { border: none; border-radius: 8px; padding: 8px 12px; diff --git a/src/httpd.js.c b/src/httpd.js.c index c11204d8..3e978f73 100644 --- a/src/httpd.js.c +++ b/src/httpd.js.c @@ -644,6 +644,7 @@ static void _httpd_endpoint_static(tf_http_request_t* request) "style.css", "tfrpc.js", "w3.css", + "tildefriends-v1.css" }; const char* k_map[][2] = { -- 2.39.5 From 2a928dcafc4a43fd66b403cc690caeb0af1054a9 Mon Sep 17 00:00:00 2001 From: Tasia Iso Date: Thu, 21 Mar 2024 20:10:35 +0100 Subject: [PATCH 5/7] feat-user_settings): add ability to import and delete an identity, formatting --- apps/user_settings.json | 5 +- apps/user_settings/app.js | 8 +- apps/user_settings/body.html | 2 +- apps/user_settings/script.js | 1 - apps/user_settings/style.css | 1 - apps/user_settings/tf-delete-account-btn.js | 2 +- apps/user_settings/tf-identity-manager.js | 85 ++++++++++++++++----- apps/user_settings/tf-password-form.js | 26 +++++-- apps/user_settings/tf-theme-picker.js | 12 ++- core/tildefriends-v1.css | 7 +- 10 files changed, 109 insertions(+), 40 deletions(-) delete mode 100644 apps/user_settings/script.js delete mode 100644 apps/user_settings/style.css diff --git a/apps/user_settings.json b/apps/user_settings.json index 94b06629..38c6b2d0 100644 --- a/apps/user_settings.json +++ b/apps/user_settings.json @@ -1,4 +1 @@ -{ - "type": "tildefriends-app", - "emoji": "⚙️" -} \ No newline at end of file +{"type": "tildefriends-app", "emoji": "⚙️"} diff --git a/apps/user_settings/app.js b/apps/user_settings/app.js index 7abde16b..a40ac36d 100644 --- a/apps/user_settings/app.js +++ b/apps/user_settings/app.js @@ -9,13 +9,19 @@ tfrpc.register(async function createID(id) { tfrpc.register(async function getPrivateKey(id) { return bip39Words(await ssb.getPrivateKey(id)); }); +tfrpc.register(async function addID(id) { + return await ssb.addIdentity(bip39Bytes(id)); +}); +tfrpc.register(async function deleteID(id) { + return await ssb.deleteIdentity(id); +}); tfrpc.register(async function getThemes() { // TODO return ['solarized', 'gruvbox', 'light']; }); tfrpc.register(async function setTheme() { // TODO - console.warn("setTheme called - not implemented") + console.warn('setTheme called - not implemented'); return null; }); tfrpc.register(async function reload() { diff --git a/apps/user_settings/body.html b/apps/user_settings/body.html index f4baefe3..54dc3198 100644 --- a/apps/user_settings/body.html +++ b/apps/user_settings/body.html @@ -11,7 +11,7 @@

Manage your identities

- +

Change my password

diff --git a/apps/user_settings/script.js b/apps/user_settings/script.js deleted file mode 100644 index c84ecefc..00000000 --- a/apps/user_settings/script.js +++ /dev/null @@ -1 +0,0 @@ -/* */ \ No newline at end of file diff --git a/apps/user_settings/style.css b/apps/user_settings/style.css deleted file mode 100644 index c84ecefc..00000000 --- a/apps/user_settings/style.css +++ /dev/null @@ -1 +0,0 @@ -/* */ \ No newline at end of file diff --git a/apps/user_settings/tf-delete-account-btn.js b/apps/user_settings/tf-delete-account-btn.js index 154f0202..33e71540 100644 --- a/apps/user_settings/tf-delete-account-btn.js +++ b/apps/user_settings/tf-delete-account-btn.js @@ -22,7 +22,7 @@ class TfDeleteAccountButtonElement extends LitElement { render() { return html` - + This action is irreversible ! diff --git a/apps/user_settings/tf-identity-manager.js b/apps/user_settings/tf-identity-manager.js index f01f5b51..bf501b42 100644 --- a/apps/user_settings/tf-identity-manager.js +++ b/apps/user_settings/tf-identity-manager.js @@ -20,7 +20,7 @@ class TfIdentityManagerElement extends LitElement { async createIdentity() { try { - let id = await tfrpc.rpc.createID(); + const id = await tfrpc.rpc.createID(); alert('Successfully created: ' + id); await tfrpc.rpc.reload(); } catch (err) { @@ -28,13 +28,50 @@ class TfIdentityManagerElement extends LitElement { } } + async importIdentity() { + const words = this.renderRoot?.querySelector('#import-id-textarea').value; + if (!words) return; + + try { + const newID = await tfrpc.rpc.addID(words); + + if (newID) alert('Successfully imported a new identity'); + else alert('This identity already exists or is invalid.'); + await tfrpc.rpc.reload(); + } catch (err) { + alert('Error importing identity: ' + err); + } + } + async exportIdentity(id) { - alert('Your private key is:\n' + (await tfrpc.rpc.getPrivateKey(id))); + alert( + 'Your private key is:\n' + + (await tfrpc.rpc.getPrivateKey(id)) + + '\nDo not share it with anyone!' + ); + } + + async deleteIdentity(id) { + try { + if ( + prompt( + 'Are you sure you want to delete "' + + id + + '"? It cannot be recovered without the exported phrase.\\n\\nEnter the word "DELETE" to confirm you wish to delete it.' + ) === 'DELETE' + ) { + if (await tfrpc.rpc.deleteID(id)) { + alert('Successfully deleted ID: ' + id); + } + await tfrpc.rpc.reload(); + } + } catch (e) { + alert('Error deleting ID: ' + e); + } } render() { - return html` - + return html`

Create a new identity

- +

Import an SSB Identity from 12 BIP39 English Words

- - + +

Warning !

- Anybody that has access to your private key can gain total access over your account. -

+ Anybody that knows your private key can gain total access over your + account. +

Tilde Friends' contributors will never ask you for your private key !
    - ${this.ids.map( - (id) => - html` -
  • - - - ${id} -
    • ` - )} + ${this.ids.map( + (id) => + html`
  • + + + ${id} +
    • ` + )}
`; } } -customElements.define('tf-identity-manager', TfIdentityManagerElement); \ No newline at end of file +customElements.define('tf-identity-manager', TfIdentityManagerElement); diff --git a/apps/user_settings/tf-password-form.js b/apps/user_settings/tf-password-form.js index c672886e..5a0e52cd 100644 --- a/apps/user_settings/tf-password-form.js +++ b/apps/user_settings/tf-password-form.js @@ -37,7 +37,7 @@ class TfPasswordFormElement extends LitElement { render() { return html` - +