@api-client/ui 0.5.38 → 0.5.40

package/demo/md/tabs/tabs.ts

@@ -1,214 +0,0 @@
-import { html, svg, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import '../../../src/md/tabs/ui-tab.js'
-import '../../../src/md/tabs/ui-tabs.js'
-import '../../../src/md/icons/ui-icon.js'
-import { iconWrapper } from '../../../src/md/icons/Icons.js'
-import { reactive } from '../../../src/decorators/index.js'
-import { TabSelectionDetail } from '../../../src/md/tabs/internals/Tabs.js'
-
-const travelIcon = iconWrapper(
-  svg`<path d="M8.5 22v-1.5l2-1.5v-5.5L2 16v-2l8.5-5V3.5q0-.625.438-1.062Q11.375 2 12 2t1.062.438q.438.437.438 1.062V9l8.5 5v2l-8.5-2.5V19l2 1.5V22L12 21Z"/>`
-)
-const hotelIcon = iconWrapper(
-  svg`<path d="M1 19V4h2v10h8V6h8q1.65 0 2.825 1.175Q23 8.35 23 10v9h-2v-3H3v3Zm6-6q-1.25 0-2.125-.875T4 10q0-1.25.875-2.125T7 7q1.25 0 2.125.875T10 10q0 1.25-.875 2.125T7 13Zm6 1h8v-4q0-.825-.587-1.413Q19.825 8 19 8h-6Zm-6-3q.425 0 .713-.288Q8 10.425 8 10t-.287-.713Q7.425 9 7 9t-.713.287Q6 9.575 6 10t.287.712Q6.575 11 7 11Zm0-1Zm6-2v6Z"/>`
-)
-const cityIcon = iconWrapper(
-  svg`<path d="M3 21V7h6V5l3-3 3 3v6h6v10Zm2-2h2v-2H5Zm0-4h2v-2H5Zm0-4h2V9H5Zm6 8h2v-2h-2Zm0-4h2v-2h-2Zm0-4h2V9h-2Zm0-4h2V5h-2Zm6 12h2v-2h-2Zm0-4h2v-2h-2Z"/>`
-)
-const taxiIcon = iconWrapper(
-  svg`<path d="M6 19v1q0 .425-.287.712Q5.425 21 5 21H4q-.425 0-.712-.288Q3 20.425 3 20v-8l2.1-6q.15-.45.538-.725Q6.025 5 6.5 5H9V3h6v2h2.5q.475 0 .863.275.387.275.537.725l2.1 6v8q0 .425-.288.712Q20.425 21 20 21h-1q-.425 0-.712-.288Q18 20.425 18 20v-1Zm-.2-9h12.4l-1.05-3H6.85ZM5 12v5Zm2.5 4q.625 0 1.062-.438Q9 15.125 9 14.5t-.438-1.062Q8.125 13 7.5 13t-1.062.438Q6 13.875 6 14.5t.438 1.062Q6.875 16 7.5 16Zm9 0q.625 0 1.062-.438Q18 15.125 18 14.5t-.438-1.062Q17.125 13 16.5 13t-1.062.438Q15 13.875 15 14.5t.438 1.062Q15.875 16 16.5 16ZM5 17h14v-5H5Z"/>`
-)
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI tabs'
-
-  @reactive() accessor selected1 = 'travel1'
-
-  @reactive() accessor selected2 = 'hotel2'
-
-  @reactive() accessor selected3 = 'travelHotel3'
-
-  @reactive() accessor selected4 = 'cars4'
-
-  @reactive() accessor selected5 = 'travel5'
-
-  handleTabsChange(e: CustomEvent): void {
-    const info = e.detail as TabSelectionDetail
-    console.log(info)
-    const property = (e.target as HTMLElement).dataset.property as 'selected1' | undefined
-    if (!property) {
-      return
-    }
-    this[property] = info.item.getAttribute('aria-controls') || ''
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      ${this.renderPrimaryDemo()} ${this.renderSecondaryTabs()} ${this.renderIconTabs()} ${this.renderScrollableDemo()}
-    `
-  }
-
-  renderPrimaryDemo(): TemplateResult {
-    const { selected1 } = this
-    return html`
-      <section class="demo-section">
-        <h2 class="display-large">Primary tabs</h2>
-
-        <div class="frame">
-          <ui-tabs data-property="selected1" @change="${this.handleTabsChange}">
-            <ui-tab aria-controls="travel1">Travel</ui-tab>
-            <ui-tab aria-controls="hotel1">Hotel</ui-tab>
-            <ui-tab aria-controls="travelHotel1">Travel + Hotel</ui-tab>
-            <ui-tab aria-controls="cars1">Cars</ui-tab>
-          </ui-tabs>
-
-          <div class="page">
-            <p id="travel1" ?hidden="${selected1 !== 'travel1'}">Travel page</p>
-            <p id="hotel1" ?hidden="${selected1 !== 'hotel1'}">Hotel page</p>
-            <p id="travelHotel1" ?hidden="${selected1 !== 'travelHotel1'}">Hotel & travel page</p>
-            <p id="cars1" ?hidden="${selected1 !== 'cars1'}">Cars page</p>
-          </div>
-        </div>
-      </section>
-    `
-  }
-
-  renderSecondaryTabs(): TemplateResult {
-    const { selected2 } = this
-    return html`
-      <section class="demo-section">
-        <h2 class="display-large">Secondary tabs</h2>
-
-        <div class="frame">
-          <ui-tabs priority="secondary" data-property="selected2" @change="${this.handleTabsChange}">
-            <ui-tab aria-controls="travel2">Travel</ui-tab>
-            <ui-tab aria-controls="hotel2" selected>Hotel</ui-tab>
-            <ui-tab aria-controls="travelHotel2">Travel + Hotel</ui-tab>
-            <ui-tab aria-controls="cars2">Cars</ui-tab>
-          </ui-tabs>
-
-          <div class="page">
-            <p id="travel2" ?hidden="${selected2 !== 'travel2'}">Travel page</p>
-            <p id="hotel2" ?hidden="${selected2 !== 'hotel2'}">Hotel page</p>
-            <p id="travelHotel2" ?hidden="${selected2 !== 'travelHotel2'}">Hotel & travel page</p>
-            <p id="cars2" ?hidden="${selected2 !== 'cars2'}">Cars page</p>
-          </div>
-        </div>
-      </section>
-    `
-  }
-
-  renderIconTabs(): TemplateResult {
-    const { selected3, selected4 } = this
-    return html`
-      <section class="demo-section">
-        <h2 class="display-large">Primary icon tabs</h2>
-        <div class="frame">
-          <ui-tabs data-property="selected3" @change="${this.handleTabsChange}">
-            <ui-tab aria-controls="travel3">
-              <ui-icon slot="icon">${travelIcon}</ui-icon>
-              Travel
-            </ui-tab>
-            <ui-tab aria-controls="hotel3">
-              <ui-icon slot="icon">${hotelIcon}</ui-icon>
-              Hotel
-            </ui-tab>
-            <ui-tab aria-controls="travelHotel3" selected>
-              <ui-icon slot="icon">${cityIcon}</ui-icon>
-              Travel + Hotel
-            </ui-tab>
-            <ui-tab aria-controls="cars3">
-              <ui-icon slot="icon">${taxiIcon}</ui-icon>
-              Cars
-            </ui-tab>
-          </ui-tabs>
-          <div class="page">
-            <p id="travel3" ?hidden="${selected3 !== 'travel3'}">Travel page</p>
-            <p id="hotel3" ?hidden="${selected3 !== 'hotel3'}">Hotel page</p>
-            <p id="travelHotel3" ?hidden="${selected3 !== 'travelHotel3'}">Hotel & travel page</p>
-            <p id="cars3" ?hidden="${selected3 !== 'cars3'}">Cars page</p>
-          </div>
-        </div>
-      </section>
-      <section class="demo-section">
-        <h2 class="display-large">Secondary icon tabs</h2>
-
-        <div class="frame">
-          <ui-tabs priority="secondary" data-property="selected4" @change="${this.handleTabsChange}">
-            <ui-tab aria-controls="travel4">
-              <ui-icon slot="icon">${travelIcon}</ui-icon>
-              Travel
-            </ui-tab>
-            <ui-tab aria-controls="hotel4">
-              <ui-icon slot="icon">${hotelIcon}</ui-icon>
-              Hotel
-            </ui-tab>
-            <ui-tab aria-controls="travelHotel4">
-              <ui-icon slot="icon">${cityIcon}</ui-icon>
-              Travel + Hotel
-            </ui-tab>
-            <ui-tab aria-controls="cars4" selected>
-              <ui-icon slot="icon">${taxiIcon}</ui-icon>
-              Cars
-            </ui-tab>
-          </ui-tabs>
-          <div class="page">
-            <p id="travel4" ?hidden="${selected4 !== 'travel4'}">Travel page</p>
-            <p id="hotel4" ?hidden="${selected4 !== 'hotel4'}">Hotel page</p>
-            <p id="travelHotel4" ?hidden="${selected4 !== 'travelHotel4'}">Hotel & travel page</p>
-            <p id="cars4" ?hidden="${selected4 !== 'cars4'}">Cars page</p>
-          </div>
-        </div>
-      </section>
-    `
-  }
-
-  renderScrollableDemo(): TemplateResult {
-    const { selected5 } = this
-    return html`
-      <section class="demo-section">
-        <h2 class="display-large">Scrollable tabs</h2>
-        <div class="frame scrollable">
-          <ui-tabs data-property="selected5" @change="${this.handleTabsChange}">
-            <ui-tab aria-controls="travel5" selected>Travel</ui-tab>
-            <ui-tab aria-controls="hotel5">Hotel</ui-tab>
-            <ui-tab aria-controls="travelHotel5">Travel + Hotel</ui-tab>
-            <ui-tab aria-controls="cars5" disabled>Cars</ui-tab>
-
-            <ui-tab aria-controls="travel51">Travel (1)</ui-tab>
-            <ui-tab aria-controls="hotel51">Hotel (1)</ui-tab>
-            <ui-tab aria-controls="travelHotel51">Travel + Hotel (1)</ui-tab>
-            <ui-tab aria-controls="cars51" disabled>Cars (1)</ui-tab>
-
-            <ui-tab aria-controls="travel52">Travel (2)</ui-tab>
-            <ui-tab aria-controls="hotel52">Hotel (2)</ui-tab>
-            <ui-tab aria-controls="travelHotel52">Travel + Hotel (2)</ui-tab>
-            <ui-tab aria-controls="cars52" disabled>Cars (2)</ui-tab>
-          </ui-tabs>
-
-          <div class="page">
-            <p id="travel5" ?hidden="${selected5 !== 'travel5'}">Travel page</p>
-            <p id="hotel5" ?hidden="${selected5 !== 'hotel5'}">Hotel page</p>
-            <p id="travelHotel5" ?hidden="${selected5 !== 'travelHotel5'}">Hotel & travel page</p>
-            <p id="cars5" ?hidden="${selected5 !== 'cars5'}">Cars page</p>
-
-            <p id="travel51" ?hidden="${selected5 !== 'travel51'}">Travel page (1)</p>
-            <p id="hotel51" ?hidden="${selected5 !== 'hotel51'}">Hotel page (1)</p>
-            <p id="travelHotel51" ?hidden="${selected5 !== 'travelHotel51'}">Hotel & travel page (1)</p>
-            <p id="cars51" ?hidden="${selected5 !== 'cars51'}">Cars page (1)</p>
-
-            <p id="travel52" ?hidden="${selected5 !== 'travel52'}">Travel page (2)</p>
-            <p id="hotel52" ?hidden="${selected5 !== 'hotel52'}">Hotel page (2)</p>
-            <p id="travelHotel52" ?hidden="${selected5 !== 'travelHotel52'}">Hotel & travel page (2)</p>
-            <p id="cars52" ?hidden="${selected5 !== 'cars52'}">Cars page (2)</p>
-          </div>
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/oauth-popup.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Oauth2 callback window</title>
-    <style>*[hidden] { display: none; } </style>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-      rel="stylesheet"
-    />
-    <link href="../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-    <link href="../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-    <link href="./page.css" rel="stylesheet" type="text/css" />
-  </head>
-  <body>
-    <h1>Sending the authorization data to the application</h1>
-    <p id="general-error" hidden>
-      The window wasn't opened as a popup and therefore it can't pass the authorization information.<br/>
-      This is an error.
-    </p>
-    <script>
-    const messageTarget = (window.opener || window.parent || window.top);
-    if (!messageTarget || messageTarget === window || !messageTarget.postMessage) {
-      const elm = document.getElementById('general-error');
-      elm.removeAttribute('hidden');
-    } else {
-      const search = window.location.search.substr(1);
-      if (search) {
-        messageTarget.postMessage(search, '*');
-      } else {
-        messageTarget.postMessage(window.location.hash.substr(1), '*');
-      }
-    }
-    </script>
-  </body>
-</html>

package/demo/page.css

@@ -1,8 +0,0 @@
-body {
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', Ubuntu, Cantarell, 'Noto Sans', sans-serif;
-  font-size: 16px;
-}
-
-.demo-row {
-  margin: 12px 0;
-}

package/demo/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../tsconfig",
-  "include": ["../src/**/*", "./**/*"]
-}

package/eslint.config.js

@@ -1,97 +0,0 @@
-import globals from 'globals'
-import pluginJs from '@eslint/js'
-import tseslint from 'typescript-eslint'
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
-import noOnlyTests from 'eslint-plugin-no-only-tests'
-import { includeIgnoreFile } from '@eslint/compat'
-import { fileURLToPath } from 'node:url'
-
-const gitignorePath = fileURLToPath(new URL(".gitignore", import.meta.url));
-
-/**
- * List of files that must be ignored globally
- */
-export const GLOBAL_IGNORE_LIST = [
-  '.github/',
-  '.husky/',
-  '.tmp/**/*',
-  '.vscode/*',
-  '.wireit/*',
-  'build/*',
-  'coverage/*',
-  'node_modules',
-  'scripts/*',
-  'eslint.config.js',
-  '*.min.*',
-  '*.d.ts',
-  'CHANGELOG.md',
-  'LICENSE*',
-  'coverage/**',
-  'package-lock.json',
-  'demo/apis/',
-  'demo/models/'
-]
-
-/** @type {import('eslint').Linter.Config[]} */
-export default [
-  pluginJs.configs.recommended,
-  ...tseslint.configs.strict,
-  ...tseslint.configs.stylistic,
-  // eslintConfigPrettier,
-  eslintPluginPrettierRecommended,
-  includeIgnoreFile(gitignorePath),
-  {
-    files: ['**/*.ts', 'demo/**/*.ts', 'test/**/*.ts'],
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-      },
-      sourceType: 'module',
-    },
-    rules: {
-      'no-restricted-globals': [
-        'error',
-        ...Object.keys(globals.node).filter(
-          // Disallow Node-specific globals (unless they are shared)
-          (g) => !Object.prototype.hasOwnProperty.call(globals.browser, g)
-        ),
-      ],
-      'max-len': [
-        'error',
-        {
-          code: 120,
-          comments: 120,
-          ignoreUrls: true,
-          ignoreTemplateLiterals: true,
-        },
-      ],
-      'no-unreachable': ['error'],
-      'no-multi-spaces': ['error'],
-      'no-console': ['error'],
-      'no-redeclare': ['error'],
-      '@typescript-eslint/prefer-literal-enum-member': ['error', {
-        allowBitwiseExpressions: true,
-      }],
-    },
-  },
-  {
-    files: ['test/**/*.ts'],
-    plugins: {
-      "no-only-tests": noOnlyTests,
-    },
-    rules: {
-      '@typescript-eslint/no-non-null-assertion': 'off',
-      '@typescript-eslint/no-empty-function': 'off',
-      'no-only-tests/no-only-tests': 'error',
-    },
-  },
-  {
-    files: ['demo/**/*.ts'],
-    rules: {
-      'no-console': 'off'
-    }
-  },
-  {
-    ignores: GLOBAL_IGNORE_LIST,
-  },
-]

package/scripts/copy-assets.js

@@ -1,21 +0,0 @@
-import { copyFile, mkdir } from 'node:fs/promises';
-import { join } from 'node:path';
-
-async function copyStyles() {
-  const src = join('src', 'styles', 'm3');
-  const dest = join('build', 'src', 'styles', 'm3');
-  const files = [
-    'native.css',
-    'theme.css',
-    'tokens.css',
-  ];
-  await mkdir(dest, { recursive: true });
-  await Promise.all(
-    files.map(async (name) => {
-      const destFile = join(dest, name);
-      await copyFile(join(src, name), destFile);
-    })
-  );
-}
-
-await copyStyles();

package/scripts/release.js

@@ -1,66 +0,0 @@
-#!/usr/bin/env node
-
-import { execSync } from 'child_process'
-import { readFileSync, writeFileSync } from 'fs'
-import { fileURLToPath } from 'url'
-import { dirname, join } from 'path'
-import SemVer from '@pawel-up/semver/classes/semver.js'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-const packageJsonPath = join(__dirname, '..', 'package.json')
-
-function updateVersion(type) {
-  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'))
-  const currentVersion = packageJson.version
-  const ver = new SemVer(currentVersion)
-  ver.inc(type)
-
-  packageJson.version = ver.format()
-  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n')
-
-  return packageJson.version
-}
-
-function main() {
-  const type = process.argv[2] || 'patch'
-
-  if (!['major', 'minor', 'patch'].includes(type)) {
-    console.error('Usage: node scripts/release.js [major|minor|patch]')
-    process.exit(1)
-  }
-
-  try {
-    // Check if working directory is clean
-    const status = execSync('git status --porcelain', { encoding: 'utf8' })
-    if (status.trim()) {
-      console.error('Working directory is not clean. Please commit or stash your changes.')
-      process.exit(1)
-    }
-
-    // Update version
-    const newVersion = updateVersion(type)
-    console.log(`Updated version to ${newVersion}`)
-
-    // Build the project
-    console.log('Building project...')
-    execSync('npm run build', { stdio: 'inherit' })
-
-    // Commit version bump
-    execSync('git add package.json', { stdio: 'inherit' })
-    execSync(`git commit -m "chore: bump version to ${newVersion}"`, { stdio: 'inherit' })
-
-    // Create and push tag
-    execSync(`git tag v${newVersion}`, { stdio: 'inherit' })
-    execSync('git push origin main', { stdio: 'inherit' })
-    execSync(`git push origin v${newVersion}`, { stdio: 'inherit' })
-
-    console.log(`\n🎉 Release ${newVersion} created and pushed!`)
-    console.log('The GitHub Actions workflow will now create a release with changelog.')
-  } catch (error) {
-    console.error('Error during release:', error.message)
-    process.exit(1)
-  }
-}
-
-main()

package/src/demo/DemoPage.ts

@@ -1,169 +0,0 @@
-import { html, TemplateResult, CSSResult } from 'lit'
-import { RenderableMixin } from '../mixins/RenderableMixin.js'
-import reactive from '../decorators/reactive.js'
-import styles from './DemoStyles.js'
-import { RouteMixin } from '../mixins/RouteMixin.js'
-import * as MonacoLoader from '../monaco/loader.js'
-import typography from '../styles/m3/typography.module.js'
-import surface from '../styles/m3/surface.module.js'
-import type CheckboxElement from '../md/checkbox/internals/CheckboxElement.js'
-import { adaptStatic } from '../decorators/styles.js'
-
-import '../md/icons/ui-icon.js'
-import '../md/button/ui-button.js'
-
-const Base = RenderableMixin(RouteMixin(EventTarget))
-
-/**
- * A base class for demo pages in the API Client ecosystem.
- */
-export abstract class DemoPage extends Base {
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [typography, styles, surface]
-  }
-
-  /**
-   * Component name rendered in the header section.
-   */
-  @reactive() accessor componentName = ''
-
-  /**
-   * Determines whether the initial render had run and the `firstRender()`
-   * function was called.
-   */
-  override accessor firstRendered = false
-
-  /**
-   * Whether or not the dark theme is active
-   */
-  @reactive() accessor darkThemeActive = false
-
-  /**
-   * For some demo pages, whether the user is authenticated in the store.
-   */
-  authenticated = false
-
-  constructor() {
-    super()
-    this.handleMediaQuery = this.handleMediaQuery.bind(this)
-    this.initMediaQueries()
-
-    document.body.classList.add('demo')
-  }
-
-  /**
-   * Initializes media queries and observers.
-   */
-  initMediaQueries(): void {
-    const matcher = window.matchMedia('(prefers-color-scheme: dark)')
-    if (matcher.matches) {
-      this.darkThemeActive = true
-    }
-    this.themeActiveCallback()
-    matcher.addEventListener('change', this.handleMediaQuery)
-  }
-
-  protected handleMediaQuery(e: MediaQueryListEvent): void {
-    this.darkThemeActive = e.matches
-    this.themeActiveCallback()
-  }
-
-  /**
-   * The callback is called when the `darkThemeActive` property change.
-   * Overwrite this function to change the theme of the demo page.
-   *
-   * Note, this is not called by the `darkThemeActive` setter. This is called during the
-   * initialization and then when the media query event is dispatched.
-   * Call this manually when changing this value in the child page.
-   */
-  protected themeActiveCallback(): void {
-    const { darkThemeActive } = this
-    if (darkThemeActive) {
-      this.activateTheme('dark')
-    } else {
-      this.activateTheme('light')
-    }
-  }
-
-  protected activateTheme(type: 'light' | 'dark'): void {
-    const root = document.querySelector('html')
-    if (!root) {
-      return
-    }
-    const { classList } = root
-    // clear all themes
-    classList.forEach((value) => {
-      if (value.startsWith('theme-')) {
-        classList.remove(value)
-      }
-    })
-    const name = `theme-${type}`
-    classList.add(name)
-  }
-
-  /**
-   * A handler for the `change` event for an element that has `checked` and `name` properties.
-   * This can be used with `ui-switch`, `ui-checkbox`, and `checkbox` elements.
-   *
-   * The `name` should correspond to a variable name to be set. The set value is the value
-   * of `checked` property read from the event's target.
-   */
-  protected _toggleBooleanOption(e: Event): void {
-    const { name, checked } = e.target as CheckboxElement
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(this as any)[name as string] = checked
-  }
-
-  async loadMonaco(): Promise<void> {
-    const base = new URL('/node_modules/monaco-editor/', window.location.href).toString()
-    MonacoLoader.createEnvironment(base)
-    await MonacoLoader.loadMonaco(base)
-    await MonacoLoader.monacoReady()
-  }
-
-  /**
-   * The page render function. Usually you don't need to use it.
-   * It renders the header template, main section, and the content.
-   */
-  override pageTemplate(): TemplateResult {
-    return html` ${this.headerTemplate()} ${this.navigationTemplate()}
-      <main>${this.contentTemplate()}</main>`
-  }
-
-  /**
-   * Call this on the top of the `render()` method to render demo navigation
-   * @returns HTML template for demo header
-   */
-  headerTemplate(): TemplateResult {
-    const { componentName } = this
-    return html` <header>${componentName ? html`<h1 class="api-title">${componentName}</h1>` : ''}</header>`
-  }
-
-  navigationTemplate(): TemplateResult {
-    return html``
-  }
-
-  /**
-   * Abstract method. When not overriding `render()` method you can use
-   * this function to render content inside the standard API components layout.
-   *
-   * ```
-   * contentTemplate() {
-   *  return html`<p>Demo content</p>`;
-   * }
-   * ```
-   */
-  abstract contentTemplate(): TemplateResult
-
-  handleAuthenticate(): void {
-    // ...
-  }
-
-  authenticateTemplate(): TemplateResult {
-    return html`
-      <p>Store authorization required.</p>
-      <ui-button color="filled" @click="${this.handleAuthenticate}">Authenticate</ui-button>
-    `
-  }
-}