npm - @matter-server/dashboard - Versions diffs - 0.2.0-alpha.0-00000000-000000000 - Mend

@matter-server/dashboard 0.2.0-alpha.0-00000000-000000000

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/dist/web/index.html ADDED Viewed

@@ -0,0 +1,40 @@
+<!doctype html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#03a9f4" />
+  <title>Open Home Foundation Matter Server</title>
+  <script type="module" src="js/main.js"></script>
+  <style>
+  body {
+    --roboto-font: Roboto, system-ui;
+    --text-color: rgba(0, 0, 0, 0.6);
+    --danger-color: #db4437;
+    --md-sys-color-primary: #03a9f4;;
+    --md-sys-color-on-primary: #fff;
+    --md-ref-typeface-brand: var(--roboto-font);
+    --md-ref-typeface-plain: var(--roboto-font);
+    --md-sys-color-background: #f5f5f5;
+    --md-sys-color-surface: #fff;
+    --md-sys-color-surface-container: #fff;
+    --md-sys-color-surface-container-high: #fff;
+    --md-sys-color-surface-container-highest: #f5f5f5;
+    --md-sys-color-secondary-container: #e0e0e0;
+    --md-sys-typescale-headline-font: var(--roboto-font);
+    --md-sys-typescale-title-font: var(--roboto-font);
+    margin: 0;
+    padding: 0;
+    font-family: var(--roboto-font);
+  }
+  a {
+    color: var(--primary-color);
+  }
+  </style>
+</head>
+<body></body>
+</html>

package/dist/web/js/commission-node-dialog-BJsfA4IV.js ADDED Viewed

@@ -0,0 +1,78 @@
+import { r, n, t, i, b } from './matter-dashboard-app-5UjO1Ik8.js';
+import { p as preventDefault } from './prevent_default-BsT53c0u.js';
+import './main.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ComissionNodeDialog = class extends i {
+  render() {
+    return b`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Commission node</div>
+                <div slot="content" @node-commissioned=${this._nodeCommissioned}>
+                    ${!this._mode ? b`<md-list>
+                              <md-list-item
+                                  type="button"
+                                  .disabled=${!this.client.serverInfo.bluetooth_enabled}
+                                  @click=${this._commissionWifi}
+                                  >Commission new WiFi device</md-list-item
+                              >
+                              <md-list-item
+                                  type="button"
+                                  .disabled=${!this.client.serverInfo.bluetooth_enabled}
+                                  @click=${this._commissionThread}
+                                  >Commission new Thread device</md-list-item
+                              >
+                              <md-list-item type="button" @click=${this._commissionExisting}
+                                  >Commission existing device</md-list-item
+                              >
+                          </md-list>` : this._mode === "wifi" ? b`<commission-node-wifi></commission-node-wifi>` : this._mode === "thread" ? b`<commission-node-thread></commission-node-thread>` : b`<commission-node-existing></commission-node-existing>`}
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._close}>Cancel</md-text-button>
+                </div>
+            </md-dialog>
+        `;
+  }
+  _commissionWifi() {
+    if (!this.client.serverInfo.bluetooth_enabled) {
+      return;
+    }
+    import('./commission-node-wifi-C8iGfy7c.js');
+    this._mode = "wifi";
+  }
+  _commissionThread() {
+    if (!this.client.serverInfo.bluetooth_enabled) {
+      return;
+    }
+    import('./commission-node-thread-FcLFz84I.js');
+    this._mode = "thread";
+  }
+  _commissionExisting() {
+    import('./commission-node-existing-CzRtUgBm.js');
+    this._mode = "existing";
+  }
+  _nodeCommissioned(ev) {
+    window.location.href = `#node/${ev.detail.node_id}`;
+    this._close();
+  }
+  _close() {
+    this.shadowRoot.querySelector("md-dialog").close();
+  }
+  _handleClosed() {
+    this.parentNode.removeChild(this);
+  }
+};
+__decorateClass([n({
+  attribute: false
+})], ComissionNodeDialog.prototype, "client", 2);
+__decorateClass([r()], ComissionNodeDialog.prototype, "_mode", 2);
+ComissionNodeDialog = __decorateClass([t("commission-node-dialog")], ComissionNodeDialog);
+export { ComissionNodeDialog };

package/dist/web/js/commission-node-dialog-DEZ3EqYO.js ADDED Viewed

@@ -0,0 +1,78 @@
+import { r, n, t, i, b } from './matter-dashboard-app-BazvuIIi.js';
+import { p as preventDefault } from './prevent_default-D4GG_QeD.js';
+import './main.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ComissionNodeDialog = class extends i {
+  render() {
+    return b`
+            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
+                <div slot="headline">Commission node</div>
+                <div slot="content" @node-commissioned=${this._nodeCommissioned}>
+                    ${!this._mode ? b`<md-list>
+                              <md-list-item
+                                  type="button"
+                                  .disabled=${!this.client.serverInfo.bluetooth_enabled}
+                                  @click=${this._commissionWifi}
+                                  >Commission new WiFi device</md-list-item
+                              >
+                              <md-list-item
+                                  type="button"
+                                  .disabled=${!this.client.serverInfo.bluetooth_enabled}
+                                  @click=${this._commissionThread}
+                                  >Commission new Thread device</md-list-item
+                              >
+                              <md-list-item type="button" @click=${this._commissionExisting}
+                                  >Commission existing device</md-list-item
+                              >
+                          </md-list>` : this._mode === "wifi" ? b`<commission-node-wifi></commission-node-wifi>` : this._mode === "thread" ? b`<commission-node-thread></commission-node-thread>` : b`<commission-node-existing></commission-node-existing>`}
+                </div>
+                <div slot="actions">
+                    <md-text-button @click=${this._close}>Cancel</md-text-button>
+                </div>
+            </md-dialog>
+        `;
+  }
+  _commissionWifi() {
+    if (!this.client.serverInfo.bluetooth_enabled) {
+      return;
+    }
+    import('./commission-node-wifi-C8ho-UYb.js');
+    this._mode = "wifi";
+  }
+  _commissionThread() {
+    if (!this.client.serverInfo.bluetooth_enabled) {
+      return;
+    }
+    import('./commission-node-thread-DLmclivF.js');
+    this._mode = "thread";
+  }
+  _commissionExisting() {
+    import('./commission-node-existing-OK1ybPFI.js');
+    this._mode = "existing";
+  }
+  _nodeCommissioned(ev) {
+    window.location.href = `#node/${ev.detail.node_id}`;
+    this._close();
+  }
+  _close() {
+    this.shadowRoot.querySelector("md-dialog").close();
+  }
+  _handleClosed() {
+    this.parentNode.removeChild(this);
+  }
+};
+__decorateClass([n({
+  attribute: false
+})], ComissionNodeDialog.prototype, "client", 2);
+__decorateClass([r()], ComissionNodeDialog.prototype, "_mode", 2);
+ComissionNodeDialog = __decorateClass([t("commission-node-dialog")], ComissionNodeDialog);
+export { ComissionNodeDialog };

package/dist/web/js/commission-node-existing-CzRtUgBm.js ADDED Viewed

@@ -0,0 +1,50 @@
+import { r, c, n, d as clientContext, e, t, i, A, b } from './matter-dashboard-app-5UjO1Ik8.js';
+import { f as fireEvent } from './fire_event-BlsbXpOL.js';
+import './outlined-text-field-BMLYwwlc.js';
+import './main.js';
+import './prevent_default-BsT53c0u.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let CommissionNodeExisting = class extends i {
+  constructor() {
+    super(...arguments);
+    this._loading = false;
+  }
+  render() {
+    return b`<md-outlined-text-field label="Share code" .disabled="${this._loading}"> </md-outlined-text-field>
+            <br />
+            <br />
+            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+                >Commission</md-outlined-button
+            >${this._loading ? b`<md-circular-progress indeterminate></md-circular-progress>` : A}`;
+  }
+  async _commissionNode() {
+    this._loading = true;
+    try {
+      const node = await this.client.commissionWithCode(this._pairingCodeField.value, true);
+      fireEvent(this, "node-commissioned", node);
+    } catch (err) {
+      alert(`Error commissioning node: ${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+};
+__decorateClass([c({
+  context: clientContext,
+  subscribe: true
+}), n({
+  attribute: false
+})], CommissionNodeExisting.prototype, "client", 2);
+__decorateClass([r()], CommissionNodeExisting.prototype, "_loading", 2);
+__decorateClass([e("md-outlined-text-field[label='Share code']")], CommissionNodeExisting.prototype, "_pairingCodeField", 2);
+CommissionNodeExisting = __decorateClass([t("commission-node-existing")], CommissionNodeExisting);
+export { CommissionNodeExisting };

package/dist/web/js/commission-node-existing-OK1ybPFI.js ADDED Viewed

@@ -0,0 +1,50 @@
+import { r, c, n, d as clientContext, e, t, i, A, b } from './matter-dashboard-app-BazvuIIi.js';
+import { f as fireEvent } from './fire_event-BERTqZpV.js';
+import './outlined-text-field-Sqd4JHxo.js';
+import './main.js';
+import './prevent_default-D4GG_QeD.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let CommissionNodeExisting = class extends i {
+  constructor() {
+    super(...arguments);
+    this._loading = false;
+  }
+  render() {
+    return b`<md-outlined-text-field label="Share code" .disabled="${this._loading}"> </md-outlined-text-field>
+            <br />
+            <br />
+            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+                >Commission</md-outlined-button
+            >${this._loading ? b`<md-circular-progress indeterminate></md-circular-progress>` : A}`;
+  }
+  async _commissionNode() {
+    this._loading = true;
+    try {
+      const node = await this.client.commissionWithCode(this._pairingCodeField.value, true);
+      fireEvent(this, "node-commissioned", node);
+    } catch (err) {
+      alert(`Error commissioning node: ${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+};
+__decorateClass([c({
+  context: clientContext,
+  subscribe: true
+}), n({
+  attribute: false
+})], CommissionNodeExisting.prototype, "client", 2);
+__decorateClass([r()], CommissionNodeExisting.prototype, "_loading", 2);
+__decorateClass([e("md-outlined-text-field[label='Share code']")], CommissionNodeExisting.prototype, "_pairingCodeField", 2);
+CommissionNodeExisting = __decorateClass([t("commission-node-existing")], CommissionNodeExisting);
+export { CommissionNodeExisting };

package/dist/web/js/commission-node-thread-DLmclivF.js ADDED Viewed

@@ -0,0 +1,75 @@
+import { r, c, n, d as clientContext, e, t, i, A, b } from './matter-dashboard-app-BazvuIIi.js';
+import { f as fireEvent } from './fire_event-BERTqZpV.js';
+import './outlined-text-field-Sqd4JHxo.js';
+import './main.js';
+import './prevent_default-D4GG_QeD.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let CommissionNodeThread = class extends i {
+  constructor() {
+    super(...arguments);
+    this._loading = false;
+  }
+  render() {
+    if (!this.client.serverInfo.thread_credentials_set) {
+      return b`<md-outlined-text-field label="Thread dataset" .disabled="${this._loading}">
+                </md-outlined-text-field>
+                <br />
+                <br />
+                <md-outlined-button @click=${this._setThreadDataset} .disabled="${this._loading}"
+                    >Set Thread Dataset</md-outlined-button
+                >${this._loading ? b`<md-circular-progress indeterminate></md-circular-progress>` : A}`;
+    }
+    return b`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
+            <br />
+            <br />
+            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+                >Commission</md-outlined-button
+            >${this._loading ? b`<md-circular-progress indeterminate></md-circular-progress>` : A}`;
+  }
+  async _setThreadDataset() {
+    const dataset = this._datasetField.value;
+    if (!dataset) {
+      alert("Dataset is required");
+      return;
+    }
+    this._loading = true;
+    try {
+      await this.client.setThreadOperationalDataset(dataset);
+    } catch (err) {
+      alert(`Error setting Thread dataset: ${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+  async _commissionNode() {
+    this._loading = true;
+    try {
+      const node = await this.client.commissionWithCode(this._pairingCodeField.value, false);
+      fireEvent(this, "node-commissioned", node);
+    } catch (err) {
+      alert(`Error commissioning node: ${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+};
+__decorateClass([c({
+  context: clientContext,
+  subscribe: true
+}), n({
+  attribute: false
+})], CommissionNodeThread.prototype, "client", 2);
+__decorateClass([r()], CommissionNodeThread.prototype, "_loading", 2);
+__decorateClass([e("md-outlined-text-field[label='Thread dataset']")], CommissionNodeThread.prototype, "_datasetField", 2);
+__decorateClass([e("md-outlined-text-field[label='Pairing code']")], CommissionNodeThread.prototype, "_pairingCodeField", 2);
+CommissionNodeThread = __decorateClass([t("commission-node-thread")], CommissionNodeThread);
+export { CommissionNodeThread };

package/dist/web/js/commission-node-thread-FcLFz84I.js ADDED Viewed

@@ -0,0 +1,75 @@
+import { r, c, n, d as clientContext, e, t, i, A, b } from './matter-dashboard-app-5UjO1Ik8.js';
+import { f as fireEvent } from './fire_event-BlsbXpOL.js';
+import './outlined-text-field-BMLYwwlc.js';
+import './main.js';
+import './prevent_default-BsT53c0u.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let CommissionNodeThread = class extends i {
+  constructor() {
+    super(...arguments);
+    this._loading = false;
+  }
+  render() {
+    if (!this.client.serverInfo.thread_credentials_set) {
+      return b`<md-outlined-text-field label="Thread dataset" .disabled="${this._loading}">
+                </md-outlined-text-field>
+                <br />
+                <br />
+                <md-outlined-button @click=${this._setThreadDataset} .disabled="${this._loading}"
+                    >Set Thread Dataset</md-outlined-button
+                >${this._loading ? b`<md-circular-progress indeterminate></md-circular-progress>` : A}`;
+    }
+    return b`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
+            <br />
+            <br />
+            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+                >Commission</md-outlined-button
+            >${this._loading ? b`<md-circular-progress indeterminate></md-circular-progress>` : A}`;
+  }
+  async _setThreadDataset() {
+    const dataset = this._datasetField.value;
+    if (!dataset) {
+      alert("Dataset is required");
+      return;
+    }
+    this._loading = true;
+    try {
+      await this.client.setThreadOperationalDataset(dataset);
+    } catch (err) {
+      alert(`Error setting Thread dataset: ${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+  async _commissionNode() {
+    this._loading = true;
+    try {
+      const node = await this.client.commissionWithCode(this._pairingCodeField.value, false);
+      fireEvent(this, "node-commissioned", node);
+    } catch (err) {
+      alert(`Error commissioning node: ${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+};
+__decorateClass([c({
+  context: clientContext,
+  subscribe: true
+}), n({
+  attribute: false
+})], CommissionNodeThread.prototype, "client", 2);
+__decorateClass([r()], CommissionNodeThread.prototype, "_loading", 2);
+__decorateClass([e("md-outlined-text-field[label='Thread dataset']")], CommissionNodeThread.prototype, "_datasetField", 2);
+__decorateClass([e("md-outlined-text-field[label='Pairing code']")], CommissionNodeThread.prototype, "_pairingCodeField", 2);
+CommissionNodeThread = __decorateClass([t("commission-node-thread")], CommissionNodeThread);
+export { CommissionNodeThread };

package/dist/web/js/commission-node-wifi-C8ho-UYb.js ADDED Viewed

@@ -0,0 +1,88 @@
+import { r, c, n, d as clientContext, e, t, i, A, b } from './matter-dashboard-app-BazvuIIi.js';
+import { f as fireEvent } from './fire_event-BERTqZpV.js';
+import './outlined-text-field-Sqd4JHxo.js';
+import './main.js';
+import './prevent_default-D4GG_QeD.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let CommissionNodeWifi = class extends i {
+  constructor() {
+    super(...arguments);
+    this._loading = false;
+  }
+  render() {
+    if (!this.client.serverInfo.wifi_credentials_set) {
+      return b`<md-outlined-text-field label="SSID" .disabled="${this._loading}"> </md-outlined-text-field>
+                <md-outlined-text-field label="Password" type="password" .disabled="${this._loading}">
+                </md-outlined-text-field>
+                <br />
+                <br />
+                <md-outlined-button @click=${this._setWifiCredentials} .disabled="${this._loading}"
+                    >Set WiFi Credentials</md-outlined-button
+                >${this._loading ? b`<md-circular-progress indeterminate .visible="${this._loading}"></md-circular-progress>` : A}`;
+    }
+    return b`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
+            <br />
+            <br />
+            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+                >Commission</md-outlined-button
+            >${this._loading ? b`<md-circular-progress indeterminate></md-circular-progress>` : A}`;
+  }
+  _setWifiCredentials() {
+    const ssid = this._ssidField.value;
+    if (!ssid) {
+      alert("SSID is required");
+      return;
+    }
+    const password = this._passwordField.value;
+    if (!password) {
+      alert("Password is required");
+      return;
+    }
+    this._loading = true;
+    try {
+      this.client.setWifiCredentials(ssid, password);
+    } catch (err) {
+      alert(`Error setting WiFi credentials:
+${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+  async _commissionNode() {
+    try {
+      if (!this._pairingCodeField.value) {
+        alert("Pairing code is required");
+        return;
+      }
+      this._loading = true;
+      const node = await this.client.commissionWithCode(this._pairingCodeField.value, false);
+      fireEvent(this, "node-commissioned", node);
+    } catch (err) {
+      alert(`Error commissioning node:
+${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+};
+__decorateClass([c({
+  context: clientContext,
+  subscribe: true
+}), n({
+  attribute: false
+})], CommissionNodeWifi.prototype, "client", 2);
+__decorateClass([r()], CommissionNodeWifi.prototype, "_loading", 2);
+__decorateClass([e("md-outlined-text-field[label='SSID']")], CommissionNodeWifi.prototype, "_ssidField", 2);
+__decorateClass([e("md-outlined-text-field[label='Password']")], CommissionNodeWifi.prototype, "_passwordField", 2);
+__decorateClass([e("md-outlined-text-field[label='Pairing code']")], CommissionNodeWifi.prototype, "_pairingCodeField", 2);
+CommissionNodeWifi = __decorateClass([t("commission-node-wifi")], CommissionNodeWifi);
+export { CommissionNodeWifi };

package/dist/web/js/commission-node-wifi-C8iGfy7c.js ADDED Viewed

@@ -0,0 +1,88 @@
+import { r, c, n, d as clientContext, e, t, i, A, b } from './matter-dashboard-app-5UjO1Ik8.js';
+import { f as fireEvent } from './fire_event-BlsbXpOL.js';
+import './outlined-text-field-BMLYwwlc.js';
+import './main.js';
+import './prevent_default-BsT53c0u.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let CommissionNodeWifi = class extends i {
+  constructor() {
+    super(...arguments);
+    this._loading = false;
+  }
+  render() {
+    if (!this.client.serverInfo.wifi_credentials_set) {
+      return b`<md-outlined-text-field label="SSID" .disabled="${this._loading}"> </md-outlined-text-field>
+                <md-outlined-text-field label="Password" type="password" .disabled="${this._loading}">
+                </md-outlined-text-field>
+                <br />
+                <br />
+                <md-outlined-button @click=${this._setWifiCredentials} .disabled="${this._loading}"
+                    >Set WiFi Credentials</md-outlined-button
+                >${this._loading ? b`<md-circular-progress indeterminate .visible="${this._loading}"></md-circular-progress>` : A}`;
+    }
+    return b`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
+            <br />
+            <br />
+            <md-outlined-button @click=${this._commissionNode} .disabled="${this._loading}"
+                >Commission</md-outlined-button
+            >${this._loading ? b`<md-circular-progress indeterminate></md-circular-progress>` : A}`;
+  }
+  _setWifiCredentials() {
+    const ssid = this._ssidField.value;
+    if (!ssid) {
+      alert("SSID is required");
+      return;
+    }
+    const password = this._passwordField.value;
+    if (!password) {
+      alert("Password is required");
+      return;
+    }
+    this._loading = true;
+    try {
+      this.client.setWifiCredentials(ssid, password);
+    } catch (err) {
+      alert(`Error setting WiFi credentials:
+${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+  async _commissionNode() {
+    try {
+      if (!this._pairingCodeField.value) {
+        alert("Pairing code is required");
+        return;
+      }
+      this._loading = true;
+      const node = await this.client.commissionWithCode(this._pairingCodeField.value, false);
+      fireEvent(this, "node-commissioned", node);
+    } catch (err) {
+      alert(`Error commissioning node:
+${err.message}`);
+    } finally {
+      this._loading = false;
+    }
+  }
+};
+__decorateClass([c({
+  context: clientContext,
+  subscribe: true
+}), n({
+  attribute: false
+})], CommissionNodeWifi.prototype, "client", 2);
+__decorateClass([r()], CommissionNodeWifi.prototype, "_loading", 2);
+__decorateClass([e("md-outlined-text-field[label='SSID']")], CommissionNodeWifi.prototype, "_ssidField", 2);
+__decorateClass([e("md-outlined-text-field[label='Password']")], CommissionNodeWifi.prototype, "_passwordField", 2);
+__decorateClass([e("md-outlined-text-field[label='Pairing code']")], CommissionNodeWifi.prototype, "_pairingCodeField", 2);
+CommissionNodeWifi = __decorateClass([t("commission-node-wifi")], CommissionNodeWifi);
+export { CommissionNodeWifi };