@canton-network/core-wallet-ui-components 0.4.0 → 0.6.0

package/dist/internal/BaseElement.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from 'lit';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../../themes/default.css';
+/**
+ * Use this element as the base class for all custom elements to ensure consistent theming
+ */
+export declare class BaseElement extends LitElement {
+    static styles: CSSResultGroup;
+}
+//# sourceMappingURL=BaseElement.d.ts.map

package/dist/internal/BaseElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseElement.d.ts","sourceRoot":"","sources":["../../src/internal/BaseElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAEhE,OAAO,sCAAsC,CAAA;AAC7C,OAAO,0BAA0B,CAAA;AAMjC;;GAEG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,EAqBR,cAAc,CAAA;CACtB"}

package/dist/styles/index.d.ts

@@ -0,0 +1,4 @@
+import { CSSResultGroup } from 'lit';
+declare const _default: CSSResultGroup;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAA;wBAgBhB,cAAc;AAAvC,wBAAuC"}

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import { CSSResultGroup } from 'lit';
+export declare function cssToString(styles: CSSResultGroup): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAE/C,wBAAgB,WAAW,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAQ1D"}

package/dist/windows/popup.d.ts

@@ -6,7 +6,11 @@ interface PopupOptions {
     screenX?: number;
     screenY?: number;
 }
-export declare function popup(component: new () => HTMLElement, options?: PopupOptions): Promise<Window>;
+interface StyledElement {
+    new (): HTMLElement;
+    styles: string;
+}
+export declare function popup(component: StyledElement, options?: PopupOptions): Promise<Window>;
 export declare function popupHref(url: URL | string, options?: PopupOptions): Promise<Window>;
 export {};
 //# sourceMappingURL=popup.d.ts.map

package/dist/windows/popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/windows/popup.ts"],"names":[],"mappings":"AAKA,UAAU,YAAY;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,KAAK,CACjB,SAAS,EAAE,UAAU,WAAW,EAChC,OAAO,CAAC,EAAE,YAAY,GACvB,OAAO,CAAC,MAAM,CAAC,CA6DjB;AAED,wBAAgB,SAAS,CACrB,GAAG,EAAE,GAAG,GAAG,MAAM,EACjB,OAAO,CAAC,EAAE,YAAY,GACvB,OAAO,CAAC,MAAM,CAAC,CAuBjB"}
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/windows/popup.ts"],"names":[],"mappings":"AAGA,UAAU,YAAY;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,UAAU,aAAa;IACnB,QAAQ,WAAW,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,KAAK,CACjB,SAAS,EAAE,aAAa,EACxB,OAAO,CAAC,EAAE,YAAY,GACvB,OAAO,CAAC,MAAM,CAAC,CA6EjB;AAED,wBAAgB,SAAS,CACrB,GAAG,EAAE,GAAG,GAAG,MAAM,EACjB,OAAO,CAAC,EAAE,YAAY,GACvB,OAAO,CAAC,MAAM,CAAC,CAuBjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canton-network/core-wallet-ui-components",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "Reusable UI components for the Splice wallet",
   "repository": "github:hyperledger-labs/splice-wallet-kernel",
@@ -13,26 +13,33 @@
     "./themes": "./themes"
   },
   "scripts": {
-    "build": "tsc -b",
-    "build:watch": "tsc -b --watch",
-    "clean": "tsc -b --clean; tsc -b tsconfig.dev.json --clean; rm -rf dist; [ -d public/js ] && rm -rf public/js/* || true",
-    "dev": "vite --port 8000"
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "build:watch": "vite build --watch & tsc --emitDeclarationOnly --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "tsc -b --clean; rm -rf dist",
+    "dev": "storybook dev -p 6006"
   },
   "devDependencies": {
+    "@storybook/web-components-vite": "^9.1.10",
     "@types/bootstrap": "^5",
+    "@types/fs-extra": "^11",
+    "fs-extra": "^11.3.2",
+    "storybook": "^9.1.10",
+    "tsx": "^4.20.4",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
   },
   "packageManager": "yarn@4.9.4",
   "dependencies": {
-    "@canton-network/core-types": "^0.4.0",
-    "@canton-network/core-wallet-store": "^0.4.0",
+    "@canton-network/core-types": "^0.6.0",
+    "@canton-network/core-wallet-store": "^0.6.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.7",
     "lit": "^3.3.0"
   },
   "files": [
-    "dist/**"
+    "dist/**",
+    "themes/**"
   ],
   "publishConfig": {
     "access": "public"

package/themes/default.css

@@ -0,0 +1,6 @@
+:root,
+:host {
+    --wg-theme-background-color: snow;
+    --wg-theme-text-color: rgba(0, 0, 0, 0.65);
+    --wg-theme-font-family: sans-serif;
+}

package/dist/components/AppHeader.js

@@ -1,73 +0,0 @@
-// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let AppHeader = class AppHeader extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.iconSrc = 'images/icon.png';
-    }
-    // Prevent shadow DOM so external CSS applies
-    createRenderRoot() {
-        return this;
-    }
-    render() {
-        return html `
-            <div
-                class="header d-flex justify-content-between align-items-center"
-            >
-                <h2>
-                    <div
-                        class="logo-box"
-                        @click=${() => (window.location.href = '/')}
-                        aria-label="Go to home"
-                    >
-                        <img
-                            src="${this.iconSrc}"
-                            alt="Icon"
-                            width="24"
-                            height="24"
-                        />
-                        Splice Wallet
-                    </div>
-                </h2>
-                <div>
-                    <button
-                        class="btn btn-outline-secondary btn-sm"
-                        id="settingsButton"
-                        @click=${() => (window.location.href = '/networks/')}
-                    >
-                        Settings
-                    </button>
-                    <button
-                        class="btn btn-outline-secondary btn-sm"
-                        @click=${() => {
-            localStorage.clear();
-            window.location.href = '/login';
-        }}
-                        id="logoutButton"
-                    >
-                        Logout
-                    </button>
-                </div>
-            </div>
-        `;
-    }
-};
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], AppHeader.prototype, "iconSrc", void 0);
-AppHeader = __decorate([
-    customElement('app-header')
-], AppHeader);
-export { AppHeader };

package/dist/components/AppLayout.js

@@ -1,87 +0,0 @@
-// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { LitElement, html, css, unsafeCSS } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import bootstrapCss from 'bootstrap/dist/css/bootstrap.min.css?inline';
-import defaultTheme from '../../themes/default.css?inline';
-let AppLayout = class AppLayout extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.iconSrc = '/images/icon.png';
-        this.customThemeCss = null;
-    }
-    static { this.styles = css `
-        ${unsafeCSS(bootstrapCss.replaceAll(/:root/g, ':root,:host'))}
-
-        :host {
-            --bs-body-color: var(--splice-wk-text-color);
-
-            margin: 0;
-            font-family: var(--bs-body-font-family);
-            font-size: var(--bs-body-font-size);
-            font-weight: var(--bs-body-font-weight);
-            line-height: var(--bs-body-line-height);
-            color: var(--bs-body-color);
-            text-align: var(--bs-body-text-align);
-            background-color: var(--bs-body-bg);
-            -webkit-text-size-adjust: 100%;
-            -webkit-tap-highlight-color: transparent;
-        }
-    `; }
-    async updated(changedProps) {
-        if (changedProps.has('themeSrc')) {
-            if (this.themeSrc) {
-                try {
-                    const res = await fetch(this.themeSrc);
-                    if (!res.ok)
-                        throw new Error(`HTTP ${res.status}`);
-                    this.customThemeCss = await res.text();
-                }
-                catch (err) {
-                    console.warn(`[app-layout] Failed to load theme from "${this.themeSrc}":`, err);
-                    this.customThemeCss = null;
-                }
-                this.requestUpdate();
-            }
-            else {
-                this.customThemeCss = null;
-            }
-        }
-    }
-    get effectiveThemeCss() {
-        return this.customThemeCss ?? defaultTheme;
-    }
-    render() {
-        return html `
-            <style>
-                ${unsafeCSS(this.effectiveThemeCss)}
-            </style>
-
-            <app-header .iconSrc=${this.iconSrc}></app-header>
-            <div class="container" id="mainContent">
-                <slot></slot>
-            </div>
-        `;
-    }
-};
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], AppLayout.prototype, "iconSrc", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], AppLayout.prototype, "themeSrc", void 0);
-AppLayout = __decorate([
-    customElement('app-layout')
-], AppLayout);
-export { AppLayout };

package/dist/components/Configuration.d.ts

@@ -1,5 +0,0 @@
-import { LitElement } from 'lit';
-export declare class Configuration extends LitElement {
-    protected render(): import("lit-html").TemplateResult<1>;
-}
-//# sourceMappingURL=Configuration.d.ts.map

package/dist/components/Configuration.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../src/components/Configuration.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAA;AAGtC,qBACa,aAAc,SAAQ,UAAU;IACzC,SAAS,CAAC,MAAM;CAQnB"}

package/dist/components/Configuration.js

@@ -1,24 +0,0 @@
-// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-let Configuration = class Configuration extends LitElement {
-    render() {
-        return html `
-            <div>
-                <h1>Configuration</h1>
-                <p>Wallet Kernel configuration page.</p>
-            </div>
-        `;
-    }
-};
-Configuration = __decorate([
-    customElement('swk-configuration')
-], Configuration);
-export { Configuration };

package/dist/components/Discovery.js

@@ -1,148 +0,0 @@
-// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-/**
- * Discovery implements the view of the Wallet Kernel selection window.
- * It is implemented directly as a Web Component without using LitElement, so to avoid having external dependencies.
- */
-export class Discovery extends HTMLElement {
-    static { this.observedAttributes = ['wallet-extension-loaded']; }
-    get walletExtensionLoaded() {
-        return this.hasAttribute('wallet-extension-loaded');
-    }
-    set walletExtensionLoaded(val) {
-        if (val) {
-            this.setAttribute('wallet-extension-loaded', '');
-        }
-        else {
-            this.removeAttribute('wallet-extension-loaded');
-        }
-    }
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        const styles = document.createElement('style');
-        styles.textContent = `
-        * {
-            color: var(--splice-wk-text-color, black);
-            font-family: var(--splice-wk-font-family);
-        }
-
-        h1 {
-            margin: 0px;
-        }
-
-        div {
-            background-color: var(--splice-wk-background-color, none);
-            width: 100%;
-            height: 100%;
-        }
-
-        .kernel {
-            height: auto;
-            margin-bottom: 8px;
-        }
-
-        .kernel button {
-            margin-left: 8px;
-        }
-
-        input {
-            margin-left: 8px;
-        }
-        `;
-        this.root = document.createElement('div');
-        this.root.id = 'discovery-root';
-        if (this.shadowRoot) {
-            this.shadowRoot.appendChild(styles);
-            this.shadowRoot.appendChild(this.root);
-        }
-        if (window.opener) {
-            // uses the string literal instead of the WalletEvent enum to avoid bundling issues
-            window.opener.postMessage({ type: 'SPLICE_WALLET_EXT_READY' }, '*');
-            window.opener.addEventListener('message', (event) => {
-                if (event.data.type === 'SPLICE_WALLET_EXT_ACK') {
-                    this.setAttribute('wallet-extension-loaded', '');
-                }
-            });
-        }
-    }
-    verifiedKernels() {
-        return [{ url: 'http://localhost:3008/rpc', walletType: 'remote' }];
-    }
-    renderKernelOption(kernel) {
-        const div = document.createElement('div');
-        div.setAttribute('class', 'kernel');
-        const span = document.createElement('span');
-        switch (kernel.walletType) {
-            case 'extension':
-                span.innerText = 'Browser Extension';
-                break;
-            case 'remote':
-                span.innerText = `${kernel.walletType} - ${kernel.url}`;
-                break;
-        }
-        const button = document.createElement('button');
-        button.innerText = `Connect`;
-        button.addEventListener('click', () => {
-            this.selectKernel(kernel);
-        });
-        div.appendChild(span);
-        div.appendChild(button);
-        return div;
-    }
-    selectKernel(kernel) {
-        if (window.opener) {
-            window.opener.postMessage(kernel, '*');
-        }
-        else {
-            console.warn('no window opener...');
-        }
-    }
-    render() {
-        const root = document.createElement('div');
-        const header = document.createElement('h1');
-        header.innerText = 'Add Remote Wallet Kernel';
-        const input = document.createElement('input');
-        input.setAttribute('autofocus', '');
-        input.setAttribute('id', 'wkurl');
-        input.setAttribute('type', 'text');
-        input.setAttribute('placeholder', 'RPC URL');
-        const button = document.createElement('button');
-        button.setAttribute('id', 'connect');
-        button.innerText = 'Connect';
-        button.addEventListener('click', () => {
-            const url = input.value;
-            console.log('Connecting to Wallet Kernel...' + url);
-            this.selectKernel({ url, walletType: 'remote' });
-        });
-        root.appendChild(header);
-        if (this.walletExtensionLoaded) {
-            const k = this.renderKernelOption({
-                walletType: 'extension',
-            });
-            root.appendChild(k);
-        }
-        for (const kernel of this.verifiedKernels()) {
-            const k = this.renderKernelOption(kernel);
-            root.appendChild(k);
-        }
-        root.appendChild(input);
-        root.appendChild(button);
-        // Replace the whole root (except styles), don't append
-        if (this.shadowRoot) {
-            Array.from(this.shadowRoot.childNodes).forEach((node) => {
-                if (!(node instanceof HTMLStyleElement)) {
-                    this.shadowRoot.removeChild(node);
-                }
-            });
-            this.shadowRoot.appendChild(root);
-        }
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-}
-customElements.define('swk-discovery', Discovery);

package/dist/components/NetworkForm.js

@@ -1,164 +0,0 @@
-// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { styles } from '../themes/styles.js';
-let NetworkForm = class NetworkForm extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.editingNetwork = null;
-        this.authType = 'implicit';
-    }
-    static { this.styles = [styles]; }
-    getAuthField(field) {
-        if (!this.editingNetwork)
-            return '';
-        const auth = this.editingNetwork.auth;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return auth?.[field] ?? '';
-    }
-    onAuthTypeChange(e) {
-        const select = e.target;
-        this.authType = select.value;
-    }
-    handleSubmit(e) {
-        e.preventDefault();
-        const form = e.target;
-        const formData = new FormData(form);
-        this.dispatchEvent(new CustomEvent('form-submit', {
-            detail: formData,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    render() {
-        return html `
-            <form @submit=${this.handleSubmit}>
-                <input
-                    name="name"
-                    placeholder="Name"
-                    .value=${this.editingNetwork?.name ?? ''}
-                    required
-                />
-                <input
-                    name="chainId"
-                    placeholder="Network Id"
-                    .value=${this.editingNetwork?.chainId ?? ''}
-                    required
-                />
-                <input
-                    name="synchronizerId"
-                    placeholder="Synchronizer Id"
-                    .value=${this.editingNetwork?.synchronizerId ?? ''}
-                    required
-                />
-                <input
-                    name="description"
-                    placeholder="Description"
-                    .value=${this.editingNetwork?.description ?? ''}
-                    required
-                />
-                <input
-                    name="ledgerApi.baseurl"
-                    placeholder="Ledger API Base Url"
-                    .value=${this.editingNetwork?.ledgerApi?.baseUrl ?? ''}
-                    required
-                />
-
-                <select
-                    name="authType"
-                    @change=${this.onAuthTypeChange}
-                    .value=${this.authType}
-                >
-                    <option value="password">password</option>
-                    <option value="implicit">implicit</option>
-                </select>
-
-                ${this.authType === 'implicit'
-            ? html `
-                          <input
-                              name="domain"
-                              placeholder="Domain"
-                              .value=${this.getAuthField('domain')}
-                              required
-                          />
-                          <input
-                              name="clientId"
-                              placeholder="ClientId"
-                              .value=${this.getAuthField('clientId')}
-                              required
-                          />
-                          <input
-                              name="scope"
-                              placeholder="Scope"
-                              .value=${this.getAuthField('scope')}
-                              required
-                          />
-                          <input
-                              name="audience"
-                              placeholder="Audience"
-                              .value=${this.getAuthField('audience')}
-                              required
-                          />
-                      `
-            : html `
-                          <input
-                              name="tokenUrl"
-                              placeholder="TokenUrl"
-                              .value=${this.getAuthField('tokenUrl')}
-                              required
-                          />
-                          <input
-                              name="grantType"
-                              placeholder="GrantType"
-                              .value=${this.getAuthField('grantType')}
-                              required
-                          />
-                          <input
-                              name="scope"
-                              placeholder="Scope"
-                              .value=${this.getAuthField('scope')}
-                              required
-                          />
-                          <input
-                              name="audience"
-                              placeholder="Audience"
-                              .value=${this.getAuthField('audience')}
-                              required
-                          />
-                      `}
-
-                <div class="buttons">
-                    <button type="submit">Save</button>
-                    <button
-                        type="button"
-                        @click=${() => this.dispatchEvent(new Event('cancel'))}
-                    >
-                        Cancel
-                    </button>
-                </div>
-            </form>
-        `;
-    }
-};
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], NetworkForm.prototype, "editingNetwork", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], NetworkForm.prototype, "authType", void 0);
-NetworkForm = __decorate([
-    customElement('network-form')
-], NetworkForm);
-export { NetworkForm };