# HG changeset patch
# User drewp@bigasterisk.com
# Date 2023-05-30 08:01:40
# Node ID d1858647682725fc4df311ed7a9520f7d7ed61f8
# Parent  4031e511bca94407b96f44b84ea86ffd7d312162

redo resource-display, fixing the rename button

diff --git a/light9/web/ResourceDisplay.ts b/light9/web/ResourceDisplay.ts
--- a/light9/web/ResourceDisplay.ts
+++ b/light9/web/ResourceDisplay.ts
@@ -1,20 +1,19 @@
+import { TextField } from "@material/mwc-textfield";
 import debug from "debug";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { NamedNode } from "n3";
-// import { GraphChangedEvent } from "../../web/RdfdbSyncedGraph";
-// import { runHandler } from "./GraphAwarePage";
-import { Patch } from "./patch";
 import { getTopGraph } from "./RdfdbSyncedGraph";
 import { SyncedGraph } from "./SyncedGraph";
-debug.enable("*");
-const log = debug("device-el");
-const RDFS_LABEL = new NamedNode("http://www.w3.org/2000/01/rdf-schema#label");
+export { Button } from "@material/mwc-button";
+export { Dialog } from "@material/mwc-dialog";
+export { TextField } from "@material/mwc-textfield";
+
+const log = debug("rdisplay");
 
 @customElement("resource-display")
 export class ResourceDisplay extends LitElement {
   graph!: SyncedGraph;
-  private renameTo?: string
   static styles = [
     css`
       :host {
@@ -53,121 +52,109 @@ export class ResourceDisplay extends Lit
   ];
 
   render() {
-    return html` <span class="${this.resClasses()}">
-      <a href="${this.href()}" id="uri"> <!-- type icon goes here -->${this.label}</a>
-    </span>`;
-    // <template is="dom-if" if="{{rename}}">
-    //   <button on-click="onRename">Rename</button>
+    let renameDialog = html``;
+    if (this.renameDialogOpen) {
+      renameDialog = html` <mwc-dialog id="renameDialog" open @closing=${this.onRenameClosing} @closed=${this.onRenameClosed}>
+        <p>
+          New label:
+          <mwc-textfield id="renameField" dialogInitialFocus .value=${this.renameTo}></mwc-textfield>
+        </p>
+        <mwc-button dialogAction="cancel" slot="secondaryAction">Cancel</mwc-button>
+        <mwc-button dialogAction="ok" slot="primaryAction">OK</mwc-button>
+      </mwc-dialog>`;
+    }
 
-    //   <paper-dialog id="renameDialog" modal on-iron-overlay-closed="onRenameClosed">
-    //     <p>
-    //       New label:
-    //       <input id="renameTo" autofocus type="text" value="{{renameTo::input}}" on-keydown="onRenameKey" />
-    //     </p>
-    //     <div class="buttons">
-    //       <paper-button dialog-dismiss>Cancel</paper-button>
-    //       <paper-button dialog-confirm>OK</paper-button>
-    //     </div>
-    //   </paper-dialog>
-    // </template>
-    //    `;
+    return html` <span class="${this.resClasses()}">
+        <a href="${this.href()}" id="uri"> <!-- type icon goes here -->${this.label}</a>
+        ${this.rename ? html`<button @click=${this.onRename}>Rename</button>` : ""} </span
+      >${renameDialog}`;
+    //
   }
   @property() uri?: NamedNode;
 
   @state() label: string = "";
-  
-  @property({type: Boolean}) rename: boolean = false;
-  @property({type: Boolean}) minor: boolean = false;
-  // @state() renameTo: String; notify: true };
+  @state() renameDialogOpen = false;
+  @state() renameTo = "";
+
+  @property({ type: Boolean }) rename: boolean = false;
+  @property({ type: Boolean }) minor: boolean = false;
 
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
-      this.runUriHandler();
+      this.onUri();
     });
   }
 
-  realUri(): NamedNode {
-    if (!this.uri) {
-      return new NamedNode("");
-    }
-    return typeof this.uri === "string" ? new NamedNode(this.uri) : this.uri;
-  }
-
-  href() {
-    if (!this.uri) {
-      return "javascript:;";
-    }
-    return typeof this.uri === "string" ? this.uri : this.uri.value;
-  }
-
   updated(changedProperties: PropertyValues) {
     if (changedProperties.has("uri")) {
-      if (!this.graph) {
-        return; /*too soon*/
-      }
-      this.runUriHandler();
+      this.onUri();
     }
   }
 
-  resClasses() {
+  private onUri() {
+    if (!this.graph) {
+      return; /*too soon, but getTopGraph will call us again*/
+    }
+    if (this.uri === undefined) {
+      this.label = "(unset)";
+    } else {
+      this.graph.runHandler(this.compile.bind(this, this.graph), `label for ${this.uri.id}`);
+    }
+  }
+  private compile(graph: SyncedGraph) {
+    if (this.uri === undefined) {
+      return;
+    } else {
+      this.label = this.graph.labelOrTail(this.uri);
+    }
+  }
+
+  private href(): string {
+    if (!this.uri) {
+      return "javascript:;";
+    }
+    return this.uri.value;
+  }
+
+  private resClasses() {
     return this.minor ? "resource minor" : "resource";
   }
 
-  runUriHandler() {
-    this.graph.runHandler(this.onUri.bind(this), `rdisplay ${this.href()}` /*needs uniqueness?*/);
-  }
-
-  onUri(patch?: Patch) {
-    if (patch && !patch.containsAnyPreds([RDFS_LABEL])) {
-      return;
-    }
-
-    if (!this.uri) {
-      this.label = "<no uri>";
-      return;
-    }
-
-    const uri = this.realUri();
-    this.graph.runHandler(this.setLabel.bind(this), `label ${uri.value}`);
-  }
-
-  setLabel(patch?: Patch) {
-    if (patch && !patch.containsAnyPreds([RDFS_LABEL])) {
-      return;
-    }
-    const uri = this.realUri();
-    this.label = this.graph.labelOrTail(uri);
+  private onRename() {
+    this.renameTo = this.label;
+    this.renameDialogOpen = true;
+    setTimeout(() => {
+      // I! 👏 know! 👏 the! 👏 element! 👏 I! 👏 want!
+      const inputEl = this.shadowRoot!.querySelector("#renameField")!.shadowRoot!.querySelector("input")! as HTMLInputElement;
+      inputEl.setSelectionRange(0, -1);
+    }, 100);
   }
 
-  onRename() {
-    this.renameTo = this.label;
-    throw new Error("fixme");
-    // this.shadowRoot.querySelector("#renameDialog").open();
-    // this.shadowRoot.querySelector("#renameTo")!.setSelectionRange(0, -1);
+  // move to SyncedGraph
+  private whatCtxHeldTheObj(subj: NamedNode, pred: NamedNode): NamedNode {
+    var ctxs = this.graph.contextsWithPattern(subj, pred, null);
+    if (ctxs.length != 1) {
+      throw new Error(`${ctxs.length} ${pred.id} stmts for ${subj.id}`);
+    }
+    return ctxs[0];
+  }
+
+  private onRenameClosing(ev: CustomEvent) {
+    this.renameTo = (this.shadowRoot!.querySelector("#renameField")! as TextField).value;
   }
 
-  onRenameKey(ev: KeyboardEvent) {
-    throw new Error("fixme");
-    // if (ev.key == "Enter") {
-    //   this.shadowRoot.querySelector("[dialog-confirm]").click();
-    // }
-    // if (ev.key == "Escape") {
-    //   this.shadowRoot.querySelector("[dialog-dismiss]").click();
-    // }
-  }
-
-  onRenameClosed() {
-    throw new Error("fixme");
-    // var dialog = this.shadowRoot.querySelector("#renameDialog");
-    // if (dialog.closingReason.confirmed) {
-    //   var label = this.graph.Uri("rdfs:label");
-    //   var ctxs = this.graph.contextsWithPattern(this.uri, label, null);
-    //   if (ctxs.length != 1) {
-    //     throw new Error(`${ctxs.length} label stmts for ${this.uri.label}`);
-    //   }
-    //   this.graph.patchObject(typeof this.uri === "string" ? this.graph.Uri(this.uri) : this.uri, label, this.graph.Literal(this.renameTo), ctxs[0]);
-    // }
+  private onRenameClosed(ev: CustomEvent) {
+    this.renameDialogOpen = false;
+    if (ev.detail.action == "ok") {
+      var label = this.graph.Uri("rdfs:label");
+      if (this.uri === undefined) {
+        throw "lost uri";
+      }
+      const ctx = this.whatCtxHeldTheObj(this.uri, label);
+      this.graph.patchObject(this.uri, label, this.graph.Literal(this.renameTo), ctx);
+    }
+    this.renameTo = "";
   }
 }
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -9,7 +9,10 @@
     "test": "test"
   },
   "dependencies": {
+    "@material/mwc-button": "^0.27.0",
+    "@material/mwc-dialog": "^0.27.0",
     "@material/mwc-slider": "^0.27.0",
+    "@material/mwc-textfield": "^0.27.0",
     "@microsoft/fast-components": "^2.30.6",
     "@types/async": "^3.2.20",
     "@types/d3": "^7.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,7 +1,10 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@material/mwc-button': ^0.27.0
+  '@material/mwc-dialog': ^0.27.0
   '@material/mwc-slider': ^0.27.0
+  '@material/mwc-textfield': ^0.27.0
   '@microsoft/fast-components': ^2.30.6
   '@types/async': ^3.2.20
   '@types/d3': ^7.4.0
@@ -31,7 +34,10 @@ specifiers:
   vitest: ^0.31.1
 
 dependencies:
+  '@material/mwc-button': 0.27.0
+  '@material/mwc-dialog': 0.27.0
   '@material/mwc-slider': 0.27.0
+  '@material/mwc-textfield': 0.27.0
   '@microsoft/fast-components': 2.30.6
   '@types/async': 3.2.20
   '@types/d3': 7.4.0
@@ -286,6 +292,50 @@ packages:
       tslib: 2.5.1
     dev: false
 
+  /@material/button/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-IPBAByKpQjrWNVmAWx5VCTCLnOw4ymbLsbHmBkLiDgcLPs1EtwYnKKIwQ+/t3bV02OShUdMiyboL8V/C0gMS1A==}
+    dependencies:
+      '@material/density': 14.0.0-canary.53b3cad2f.0
+      '@material/dom': 14.0.0-canary.53b3cad2f.0
+      '@material/elevation': 14.0.0-canary.53b3cad2f.0
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/focus-ring': 14.0.0-canary.53b3cad2f.0
+      '@material/ripple': 14.0.0-canary.53b3cad2f.0
+      '@material/rtl': 14.0.0-canary.53b3cad2f.0
+      '@material/shape': 14.0.0-canary.53b3cad2f.0
+      '@material/theme': 14.0.0-canary.53b3cad2f.0
+      '@material/tokens': 14.0.0-canary.53b3cad2f.0
+      '@material/touch-target': 14.0.0-canary.53b3cad2f.0
+      '@material/typography': 14.0.0-canary.53b3cad2f.0
+      tslib: 2.5.1
+    dev: false
+
+  /@material/density/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-Eh/vZ3vVyqtpylg5Ci33qlgtToS4H1/ppd450Ib3tcdISIoodgijYY0w4XsRvrnZgbI/h/1STFdLxdzS0UNuFw==}
+    dependencies:
+      tslib: 2.5.1
+    dev: false
+
+  /@material/dialog/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-yiG2nlVKTW0Ro3CF8Z/MVpTwSyG/8Kio3AaTUbeQdbjt5r692s4x5Yhd8m1IjEQKUeulY4CndvIbCUwZ8/G2PA==}
+    dependencies:
+      '@material/animation': 14.0.0-canary.53b3cad2f.0
+      '@material/base': 14.0.0-canary.53b3cad2f.0
+      '@material/button': 14.0.0-canary.53b3cad2f.0
+      '@material/dom': 14.0.0-canary.53b3cad2f.0
+      '@material/elevation': 14.0.0-canary.53b3cad2f.0
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/icon-button': 14.0.0-canary.53b3cad2f.0
+      '@material/ripple': 14.0.0-canary.53b3cad2f.0
+      '@material/rtl': 14.0.0-canary.53b3cad2f.0
+      '@material/shape': 14.0.0-canary.53b3cad2f.0
+      '@material/theme': 14.0.0-canary.53b3cad2f.0
+      '@material/tokens': 14.0.0-canary.53b3cad2f.0
+      '@material/touch-target': 14.0.0-canary.53b3cad2f.0
+      '@material/typography': 14.0.0-canary.53b3cad2f.0
+      tslib: 2.5.1
+    dev: false
+
   /@material/dom/14.0.0-canary.53b3cad2f.0:
     resolution: {integrity: sha512-aR+rfncF6oi2ivdOlKSJI4UXwNzWV5rXM88MLDoSJF1D7lXxhAKhge+tMUBodWGV/q0+FnXLuVAa0WYTrKjo+A==}
     dependencies:
@@ -310,6 +360,53 @@ packages:
       tslib: 2.5.1
     dev: false
 
+  /@material/floating-label/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-gHZUTTVKnP+Zjz4l9IT/G89NPmypn5FlTGLWKKqXbuQphr37rsKFR3Y80SJxULRyMDnAdKSxuZwiXLFKQz9KlA==}
+    dependencies:
+      '@material/animation': 14.0.0-canary.53b3cad2f.0
+      '@material/base': 14.0.0-canary.53b3cad2f.0
+      '@material/dom': 14.0.0-canary.53b3cad2f.0
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/rtl': 14.0.0-canary.53b3cad2f.0
+      '@material/theme': 14.0.0-canary.53b3cad2f.0
+      '@material/typography': 14.0.0-canary.53b3cad2f.0
+      tslib: 2.5.1
+    dev: false
+
+  /@material/focus-ring/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-exPX5VrjQimipBwgcFDGRiEE783sOBgpkFui59A6i6iGvS2UrLHlYY2E65fyyyQnD1f/rv4Po1OOnCesE1kulg==}
+    dependencies:
+      '@material/dom': 14.0.0-canary.53b3cad2f.0
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/rtl': 14.0.0-canary.53b3cad2f.0
+    dev: false
+
+  /@material/icon-button/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-BFdj3CP0JXHC/F2bDmpmzWhum4fkzIDgCCavvnpE/KcCbr0AaoSULRde+LtqvbdLIYW20cXhvjinIOlRhSOshA==}
+    dependencies:
+      '@material/base': 14.0.0-canary.53b3cad2f.0
+      '@material/density': 14.0.0-canary.53b3cad2f.0
+      '@material/dom': 14.0.0-canary.53b3cad2f.0
+      '@material/elevation': 14.0.0-canary.53b3cad2f.0
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/focus-ring': 14.0.0-canary.53b3cad2f.0
+      '@material/ripple': 14.0.0-canary.53b3cad2f.0
+      '@material/rtl': 14.0.0-canary.53b3cad2f.0
+      '@material/theme': 14.0.0-canary.53b3cad2f.0
+      '@material/touch-target': 14.0.0-canary.53b3cad2f.0
+      tslib: 2.5.1
+    dev: false
+
+  /@material/line-ripple/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-k8f8uuDwnSqZZ98CzbYtQVtxlp1ryUup9nd2uobo3kiqQNlQfXdGkVjuCXcla0OPiKFizNn7dS6Kl/j6L09XUA==}
+    dependencies:
+      '@material/animation': 14.0.0-canary.53b3cad2f.0
+      '@material/base': 14.0.0-canary.53b3cad2f.0
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/theme': 14.0.0-canary.53b3cad2f.0
+      tslib: 2.5.1
+    dev: false
+
   /@material/mwc-base/0.27.0:
     resolution: {integrity: sha512-oCWWtjbyQ52AaUbzINLGBKScIPyqhps2Y7c8t6Gu6fcFeDxhKXMV1Cqvtj/OMhtAt53XjHfD2XruWwYv3cYYUA==}
     dependencies:
@@ -319,6 +416,60 @@ packages:
       tslib: 2.5.1
     dev: false
 
+  /@material/mwc-button/0.27.0:
+    resolution: {integrity: sha512-t5m2zfE93RNKHMjdsU67X6csFzuSG08VJKKvXVQ+BriGE3xBgzY5nZdmZXomFpaWjDENPAlyS4ppCFm6o+DILw==}
+    dependencies:
+      '@material/mwc-icon': 0.27.0
+      '@material/mwc-ripple': 0.27.0
+      lit: 2.7.4
+      tslib: 2.5.1
+    dev: false
+
+  /@material/mwc-dialog/0.27.0:
+    resolution: {integrity: sha512-rkOEmCroVs0wBQbj87vH79SvSHHZ61QRCTUYsU2rHGZCvdzlmvHjWdoyKjJER6WwwM3rrT8xthfecmjICI28CA==}
+    dependencies:
+      '@material/dialog': 14.0.0-canary.53b3cad2f.0
+      '@material/dom': 14.0.0-canary.53b3cad2f.0
+      '@material/mwc-base': 0.27.0
+      '@material/mwc-button': 0.27.0
+      blocking-elements: 0.1.1
+      lit: 2.7.4
+      tslib: 2.5.1
+      wicg-inert: 3.1.2
+    dev: false
+
+  /@material/mwc-floating-label/0.27.0:
+    resolution: {integrity: sha512-uLleloTxQ6dDShcZzqgqfC8otQY8DtGMO9HFQbAEncoFAWpAehcEonsuT/IUhMORN+c5un0P5WXwcZsInJb7og==}
+    dependencies:
+      '@material/floating-label': 14.0.0-canary.53b3cad2f.0
+      lit: 2.7.4
+      tslib: 2.5.1
+    dev: false
+
+  /@material/mwc-icon/0.27.0:
+    resolution: {integrity: sha512-Sul44I37M9Ewynn0A9DjkEBrmll2VtNbth6Pxj7I1A/EAwEfaCrPvryyGqfIu1T2hTsRcaojzQx6QjF+B5QW9A==}
+    dependencies:
+      lit: 2.7.4
+      tslib: 2.5.1
+    dev: false
+
+  /@material/mwc-line-ripple/0.27.0:
+    resolution: {integrity: sha512-n9Xpt5g3RJEl9rvk14OP6dUNJUtsJA46beTQiep7ppO7IPVFLC1v/5sPpUzfNPUBsclSPxdBuNlCxsgcIYueUw==}
+    dependencies:
+      '@material/line-ripple': 14.0.0-canary.53b3cad2f.0
+      lit: 2.7.4
+      tslib: 2.5.1
+    dev: false
+
+  /@material/mwc-notched-outline/0.27.0:
+    resolution: {integrity: sha512-IlqfQVaEd1RAHqhOG0Xk5JhTDgBe/P9og0pnACglK6bPE0vUhYKwibJiHcr4ACTPtGWHO9o92aktR+7AIEAKtQ==}
+    dependencies:
+      '@material/mwc-base': 0.27.0
+      '@material/notched-outline': 14.0.0-canary.53b3cad2f.0
+      lit: 2.7.4
+      tslib: 2.5.1
+    dev: false
+
   /@material/mwc-ripple/0.27.0:
     resolution: {integrity: sha512-by0O8d8g3Rd96/sUB8hxy6MrDx1QTstqOsA64vqypWd526hMTBGRik08jTNap5sVIyrN9Vq17jb4NJLWQLnNHQ==}
     dependencies:
@@ -340,6 +491,32 @@ packages:
       tslib: 2.5.1
     dev: false
 
+  /@material/mwc-textfield/0.27.0:
+    resolution: {integrity: sha512-4/OEeEVAWWQ1DzpjeMLYLsa9HMlifOPjAvi0681Yj1g/RYJs5ONZS80HZ8HOT+efAOlZDugshgM4gdNS3I0XFQ==}
+    dependencies:
+      '@material/floating-label': 14.0.0-canary.53b3cad2f.0
+      '@material/line-ripple': 14.0.0-canary.53b3cad2f.0
+      '@material/mwc-base': 0.27.0
+      '@material/mwc-floating-label': 0.27.0
+      '@material/mwc-line-ripple': 0.27.0
+      '@material/mwc-notched-outline': 0.27.0
+      '@material/textfield': 14.0.0-canary.53b3cad2f.0
+      lit: 2.7.4
+      tslib: 2.5.1
+    dev: false
+
+  /@material/notched-outline/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-3ByiPOC/wWQmFKfgJS98kb5/6v92n7uIfJ6v6sryKJlJCJn39qfpGcCM5RpRIws1RET1s1zBJT2JDwYeu/hM5A==}
+    dependencies:
+      '@material/base': 14.0.0-canary.53b3cad2f.0
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/floating-label': 14.0.0-canary.53b3cad2f.0
+      '@material/rtl': 14.0.0-canary.53b3cad2f.0
+      '@material/shape': 14.0.0-canary.53b3cad2f.0
+      '@material/theme': 14.0.0-canary.53b3cad2f.0
+      tslib: 2.5.1
+    dev: false
+
   /@material/ripple/14.0.0-canary.53b3cad2f.0:
     resolution: {integrity: sha512-6g2G62vd8DsMuIUSXlRrzb98qkZ4o8ZREknNwNP2zaLQEOkJ//4j9HaqDt98/3LIjUTY9UIVFTQENiMmlwKHYQ==}
     dependencies:
@@ -359,6 +536,15 @@ packages:
       tslib: 2.5.1
     dev: false
 
+  /@material/shape/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-RyjInLCNe+nI/ulKea0ZLHphXQDiDqYazS25SRn18g8Hoa5qGNaY5oOBncDXUYn3jm5oI5kFc9oif//kulkbjg==}
+    dependencies:
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/rtl': 14.0.0-canary.53b3cad2f.0
+      '@material/theme': 14.0.0-canary.53b3cad2f.0
+      tslib: 2.5.1
+    dev: false
+
   /@material/slider/14.0.0-canary.53b3cad2f.0:
     resolution: {integrity: sha512-vsKgzDrIZh098zy3+zuxZaBvlbfVCbr/4H5a9cPhnUN947+RgqGWnPYgTozVQbFvFfN2pDi1aHOssUaayOUKvw==}
     dependencies:
@@ -374,6 +560,26 @@ packages:
       tslib: 2.5.1
     dev: false
 
+  /@material/textfield/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-Pla9Tr94Is18o97E/mqHKdkR24rPES9atGm3BlXrNzyr5tu6+h++RBbxy7V6IExcfl0MX+v9Gyqz7sPZzFtwMA==}
+    dependencies:
+      '@material/animation': 14.0.0-canary.53b3cad2f.0
+      '@material/base': 14.0.0-canary.53b3cad2f.0
+      '@material/density': 14.0.0-canary.53b3cad2f.0
+      '@material/dom': 14.0.0-canary.53b3cad2f.0
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/floating-label': 14.0.0-canary.53b3cad2f.0
+      '@material/line-ripple': 14.0.0-canary.53b3cad2f.0
+      '@material/notched-outline': 14.0.0-canary.53b3cad2f.0
+      '@material/ripple': 14.0.0-canary.53b3cad2f.0
+      '@material/rtl': 14.0.0-canary.53b3cad2f.0
+      '@material/shape': 14.0.0-canary.53b3cad2f.0
+      '@material/theme': 14.0.0-canary.53b3cad2f.0
+      '@material/tokens': 14.0.0-canary.53b3cad2f.0
+      '@material/typography': 14.0.0-canary.53b3cad2f.0
+      tslib: 2.5.1
+    dev: false
+
   /@material/theme/14.0.0-canary.53b3cad2f.0:
     resolution: {integrity: sha512-S06XAevDCDWMe+GgsEpITMS07imUidzadNaTbJsqssFajBLr53QWVZsG84BpjXKXoYvyEJvb0hX5U0lq6ip9UQ==}
     dependencies:
@@ -381,6 +587,21 @@ packages:
       tslib: 2.5.1
     dev: false
 
+  /@material/tokens/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-myHFB7vac8zErA3qgkqmV+kpE+i9JEwc/6Yf0MOumDSpylJGw28QikpNC6eAVBK2EmPQTaFn20mqUxyud8dGqw==}
+    dependencies:
+      '@material/elevation': 14.0.0-canary.53b3cad2f.0
+    dev: false
+
+  /@material/touch-target/14.0.0-canary.53b3cad2f.0:
+    resolution: {integrity: sha512-d83e5vbqoLyL542yOTTp4TLVltddWiqbI/j1w/D9ipE30YKfe2EDN+CNJc32Zufh5IUfK41DsZdrN8fI9cL99A==}
+    dependencies:
+      '@material/base': 14.0.0-canary.53b3cad2f.0
+      '@material/feature-targeting': 14.0.0-canary.53b3cad2f.0
+      '@material/rtl': 14.0.0-canary.53b3cad2f.0
+      tslib: 2.5.1
+    dev: false
+
   /@material/typography/14.0.0-canary.53b3cad2f.0:
     resolution: {integrity: sha512-9J0k2fq7uyHsRzRqJDJLGmg3YzRpfRPtFDVeUH/xBcYoqpZE7wYw5Mb7s/l8eP626EtR7HhXhSPjvRTLA6NIJg==}
     dependencies:
@@ -741,6 +962,10 @@ packages:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
 
+  /blocking-elements/0.1.1:
+    resolution: {integrity: sha512-/SLWbEzMoVIMZACCyhD/4Ya2M1PWP1qMKuiymowPcI+PdWDARqeARBjhj73kbUBCxEmTZCUu5TAqxtwUO9C1Ig==}
+    dev: false
+
   /blueimp-md5/2.19.0:
     resolution: {integrity: sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==}
     dev: false
@@ -1612,6 +1837,10 @@ packages:
       stackback: 0.0.2
     dev: false
 
+  /wicg-inert/3.1.2:
+    resolution: {integrity: sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang==}
+    dev: false
+
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: false