@api-client/ui 0.0.3 → 0.0.4

package/demo/elements/ui/chip/api-chip.html

@@ -5,7 +5,8 @@
   <title>UI chip</title>
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/collapse/ui-collapse.html

@@ -5,7 +5,8 @@
   <title>UI collapse</title>
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/dialog/ui-dialog.html

@@ -5,7 +5,8 @@
   <title>UI dialog</title>
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/inputs/api-checkbox.html

@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>UI checkbox</title>
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/inputs/api-input.html

@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>UI text field</title>
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/inputs/api-radio.html

@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>UI radio</title>
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/inputs/api-switch.html

@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>UI switch</title>
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/list/dropdown-list.html

@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>UI list</title>
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/list/list.html

@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>UI list</title>
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/notification/snack.html

@@ -5,7 +5,8 @@
   <title>UI snackbar</title>
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/progress/ui-progress.html

@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>UI progress</title>
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/demo/elements/ui/tabs/tabs.html

@@ -5,7 +5,8 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <title>UI tabs</title>
   <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="../../../themes/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;

package/dist/pages/demo/DemoPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DemoPage.d.ts","sourceRoot":"","sources":["../../../src/pages/demo/DemoPage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAStD,OAAO,4BAA4B,CAAC;;;;;AAEpC;;GAEG;AACH,8BAAsB,QAAS,SAAQ,aAAwC;IAC7E,MAAM,KAAK,MAAM,IAAI,SAAS,EAAE,CAE/B;IAED;;OAEG;IACS,aAAa,SAAM;IAE/B;;;OAGG;IACM,aAAa,UAAS;IAE/B;;OAEG;IACS,eAAe,UAAS;;IAUpC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IASxB,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,mBAAmB,GAAG,IAAI;IAKxD;;;;;;;OAOG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;IASrC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI;IAerD;;;;;;OAMG;IACH,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAMxC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAOjC;;;OAGG;IACM,YAAY,IAAI,cAAc;IASvC;;;OAGG;IACH,cAAc,IAAI,cAAc;IAQhC,kBAAkB,IAAI,cAAc;IAIpC;;;;;;;;;OASG;IACH,QAAQ,CAAC,eAAe,IAAI,cAAc;CAC3C"}
+{"version":3,"file":"DemoPage.d.ts","sourceRoot":"","sources":["../../../src/pages/demo/DemoPage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAStD,OAAO,4BAA4B,CAAC;;;;;AAEpC;;GAEG;AACH,8BAAsB,QAAS,SAAQ,aAAwC;IAC7E,MAAM,KAAK,MAAM,IAAI,SAAS,EAAE,CAE/B;IAED;;OAEG;IACS,aAAa,SAAM;IAE/B;;;OAGG;IACM,aAAa,UAAS;IAE/B;;OAEG;IACS,eAAe,UAAS;;IAUpC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IASxB,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,mBAAmB,GAAG,IAAI;IAKxD;;;;;;;OAOG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI;IASrC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI;IAgBrD;;;;;;OAMG;IACH,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAMxC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAOjC;;;OAGG;IACM,YAAY,IAAI,cAAc;IASvC;;;OAGG;IACH,cAAc,IAAI,cAAc;IAQhC,kBAAkB,IAAI,cAAc;IAIpC;;;;;;;;;OASG;IACH,QAAQ,CAAC,eAAe,IAAI,cAAc;CAC3C"}

package/dist/pages/demo/DemoPage.js

@@ -67,18 +67,19 @@ export class DemoPage extends RouteMixin(RenderableMixin(EventTarget)) {
         }
     }
     activateTheme(type) {
-        const file = `theme.${type}.css`;
-        const existing = document.head.querySelector('[data-theme]');
-        if (existing) {
-            existing.parentElement?.removeChild(existing);
+        const root = document.querySelector('html');
+        if (!root) {
+            return;
         }
-        const link = document.createElement('link');
-        const url = new URL(`/src/styles/m3/${file}`, window.location.href);
-        link.rel = 'stylesheet';
-        link.type = 'text/css';
-        link.href = url.toString();
-        link.dataset.theme = 'true';
-        document.head.appendChild(link);
+        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.

package/dist/pages/demo/DemoPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DemoPage.js","sourceRoot":"","sources":["../../../src/pages/demo/DemoPage.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, CSSResult } from 'lit';\nimport { RenderableMixin } from '../../mixins/RenderableMixin.js';\nimport { reactive } from '../../lib/decorators.js';\nimport styles from './DemoStyles.js';\nimport { RouteMixin } from '../../mixins/RouteMixin.js';\nimport * as MonacoLoader from \"../../monaco/loader.js\";\nimport CheckboxElement from '../../ui/input/CheckboxElement.js';\nimport typography from \"../../styles/m3/typography.module.js\";\nimport surface from \"../../styles/m3/surface.module.js\";\nimport '../../define/ui/ui-icon.js';\n\n/**\n * A base class for demo pages in the API Client ecosystem.\n */\nexport abstract class DemoPage extends RouteMixin(RenderableMixin(EventTarget)) {\n  static get styles(): CSSResult[] {\n    return [typography, styles, surface];\n  }\n\n  /**\n   * Component name rendered in the header section.\n   */\n  @reactive() componentName = '';\n\n  /**\n   * Determines whether the initial render had run and the `firstRender()`\n   * function was called.\n   */\n  override firstRendered = false;\n\n  /**\n   * Whether or not the dark theme is active\n   */\n  @reactive() darkThemeActive = false;\n\n  constructor() {\n    super();\n    this.handleMediaQuery = this.handleMediaQuery.bind(this);\n    this.initMediaQueries();\n\n    document.body.classList.add('demo');\n  }\n\n  /**\n   * Initializes media queries and observers.\n   */\n  initMediaQueries(): void {\n    const matcher = window.matchMedia('(prefers-color-scheme: dark)');\n    if (matcher.matches) {\n      this.darkThemeActive = true;\n    }\n    this.themeActiveCallback();\n    matcher.addEventListener('change', this.handleMediaQuery);\n  }\n\n  protected handleMediaQuery(e: MediaQueryListEvent): void {\n    this.darkThemeActive = e.matches;\n    this.themeActiveCallback();\n  }\n\n  /**\n   * The callback is called when the `darkThemeActive` property change.\n   * Overwrite this function to change the theme of the demo page.\n   * \n   * Note, this is not called by the `darkThemeActive` setter. This is called during the \n   * initialization and then when the media query event is dispatched.\n   * Call this manually when changing this value in the child page.\n   */\n  protected themeActiveCallback(): void {\n    const { darkThemeActive } = this;\n    if (darkThemeActive) {\n      this.activateTheme('dark');\n    } else {\n      this.activateTheme('light');\n    }\n  }\n\n  protected activateTheme(type: 'light' | 'dark'): void {\n    const file = `theme.${type}.css`;\n    const existing = document.head.querySelector('[data-theme]');\n    if (existing) {\n      existing.parentElement?.removeChild(existing);\n    }\n    const link = document.createElement('link');\n    const url = new URL(`/src/styles/m3/${file}`, window.location.href);\n    link.rel = 'stylesheet';\n    link.type = 'text/css';\n    link.href = url.toString();\n    link.dataset.theme = 'true';\n    document.head.appendChild(link);\n  }\n\n  /**\n   * A handler for the `change` event for an element that has `checked` and `name` properties.\n   * This can be used with `ui-switch`, `ui-checkbox`, and `checkbox` elements.\n   *\n   * The `name` should correspond to a variable name to be set. The set value is the value\n   * of `checked` property read from the event's target.\n   */\n  protected _toggleBooleanOption(e: Event): void {\n    const { name, checked } = e.target as CheckboxElement;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (this as any)[name as string] = checked;\n  }\n\n  async loadMonaco(): Promise<void> {\n    const base = new URL('/node_modules/monaco-editor/', window.location.href).toString();\n    MonacoLoader.createEnvironment(base);\n    await MonacoLoader.loadMonaco(base);\n    await MonacoLoader.monacoReady();\n  }\n\n  /**\n   * The page render function. Usually you don't need to use it.\n   * It renders the header template, main section, and the content.\n   */\n  override pageTemplate(): TemplateResult {\n    return html`\n    ${this.headerTemplate()}\n    ${this.navigationTemplate()}\n    <main>\n      ${this.contentTemplate()}\n    </main>`;\n  }\n\n  /**\n   * Call this on the top of the `render()` method to render demo navigation\n   * @returns HTML template for demo header\n   */\n  headerTemplate(): TemplateResult {\n    const { componentName } = this;\n    return html`\n    <header>\n      ${componentName ? html`<h1 class=\"api-title\">${componentName}</h1>` : ''}\n    </header>`;\n  }\n\n  navigationTemplate(): TemplateResult {\n    return html``;\n  }\n\n  /**\n   * Abstract method. When not overriding `render()` method you can use\n   * this function to render content inside the standard API components layout.\n   *\n   * ```\n   * contentTemplate() {\n   *  return html`<p>Demo content</p>`;\n   * }\n   * ```\n   */\n  abstract contentTemplate(): TemplateResult;\n}\n"]}
+{"version":3,"file":"DemoPage.js","sourceRoot":"","sources":["../../../src/pages/demo/DemoPage.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAA6B,MAAM,KAAK,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,KAAK,YAAY,MAAM,wBAAwB,CAAC;AAEvD,OAAO,UAAU,MAAM,sCAAsC,CAAC;AAC9D,OAAO,OAAO,MAAM,mCAAmC,CAAC;AACxD,OAAO,4BAA4B,CAAC;AAEpC;;GAEG;AACH,MAAM,OAAgB,QAAS,SAAQ,UAAU,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAC7E,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,CAAC;IAED;;OAEG;IACS,aAAa,GAAG,EAAE,CAAC;IAE/B;;;OAGG;IACM,aAAa,GAAG,KAAK,CAAC;IAE/B;;OAEG;IACS,eAAe,GAAG,KAAK,CAAC;IAEpC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;QAClE,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;SAC7B;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC5D,CAAC;IAES,gBAAgB,CAAC,CAAsB;QAC/C,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED;;;;;;;OAOG;IACO,mBAAmB;QAC3B,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;QACjC,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;SAC7B;IACH,CAAC;IAES,aAAa,CAAC,IAAsB;QAC5C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,EAAE;YACT,OAAO;SACR;QACD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3B,mBAAmB;QACnB,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC1B,IAAI,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;gBAC9B,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACzB;QACH,CAAC,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,SAAS,IAAI,EAAE,CAAC;QAC7B,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC;IAED;;;;;;OAMG;IACO,oBAAoB,CAAC,CAAQ;QACrC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAyB,CAAC;QACtD,8DAA8D;QAC7D,IAAY,CAAC,IAAc,CAAC,GAAG,OAAO,CAAC;IAC1C,CAAC;IAED,KAAK,CAAC,UAAU;QACd,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,8BAA8B,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;QACtF,YAAY,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,YAAY,CAAC,WAAW,EAAE,CAAC;IACnC,CAAC;IAED;;;OAGG;IACM,YAAY;QACnB,OAAO,IAAI,CAAA;MACT,IAAI,CAAC,cAAc,EAAE;MACrB,IAAI,CAAC,kBAAkB,EAAE;;QAEvB,IAAI,CAAC,eAAe,EAAE;YAClB,CAAC;IACX,CAAC;IAED;;;OAGG;IACH,cAAc;QACZ,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QAC/B,OAAO,IAAI,CAAA;;QAEP,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,aAAa,OAAO,CAAC,CAAC,CAAC,EAAE;cAChE,CAAC;IACb,CAAC;IAED,kBAAkB;QAChB,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;CAaF;AAnIa;IAAX,QAAQ,EAAE;+CAAoB;AAWnB;IAAX,QAAQ,EAAE;iDAAyB","sourcesContent":["import { html, TemplateResult, CSSResult } from 'lit';\nimport { RenderableMixin } from '../../mixins/RenderableMixin.js';\nimport { reactive } from '../../lib/decorators.js';\nimport styles from './DemoStyles.js';\nimport { RouteMixin } from '../../mixins/RouteMixin.js';\nimport * as MonacoLoader from \"../../monaco/loader.js\";\nimport CheckboxElement from '../../ui/input/CheckboxElement.js';\nimport typography from \"../../styles/m3/typography.module.js\";\nimport surface from \"../../styles/m3/surface.module.js\";\nimport '../../define/ui/ui-icon.js';\n\n/**\n * A base class for demo pages in the API Client ecosystem.\n */\nexport abstract class DemoPage extends RouteMixin(RenderableMixin(EventTarget)) {\n  static get styles(): CSSResult[] {\n    return [typography, styles, surface];\n  }\n\n  /**\n   * Component name rendered in the header section.\n   */\n  @reactive() componentName = '';\n\n  /**\n   * Determines whether the initial render had run and the `firstRender()`\n   * function was called.\n   */\n  override firstRendered = false;\n\n  /**\n   * Whether or not the dark theme is active\n   */\n  @reactive() darkThemeActive = false;\n\n  constructor() {\n    super();\n    this.handleMediaQuery = this.handleMediaQuery.bind(this);\n    this.initMediaQueries();\n\n    document.body.classList.add('demo');\n  }\n\n  /**\n   * Initializes media queries and observers.\n   */\n  initMediaQueries(): void {\n    const matcher = window.matchMedia('(prefers-color-scheme: dark)');\n    if (matcher.matches) {\n      this.darkThemeActive = true;\n    }\n    this.themeActiveCallback();\n    matcher.addEventListener('change', this.handleMediaQuery);\n  }\n\n  protected handleMediaQuery(e: MediaQueryListEvent): void {\n    this.darkThemeActive = e.matches;\n    this.themeActiveCallback();\n  }\n\n  /**\n   * The callback is called when the `darkThemeActive` property change.\n   * Overwrite this function to change the theme of the demo page.\n   * \n   * Note, this is not called by the `darkThemeActive` setter. This is called during the \n   * initialization and then when the media query event is dispatched.\n   * Call this manually when changing this value in the child page.\n   */\n  protected themeActiveCallback(): void {\n    const { darkThemeActive } = this;\n    if (darkThemeActive) {\n      this.activateTheme('dark');\n    } else {\n      this.activateTheme('light');\n    }\n  }\n\n  protected activateTheme(type: 'light' | 'dark'): void {\n    const root = document.querySelector('html');\n    if (!root) {\n      return;\n    }\n    const { classList } = root;\n    // clear all themes\n    classList.forEach((value) => {\n      if (value.startsWith('theme-')) {\n        classList.remove(value);\n      }\n    });\n    const name = `theme-${type}`;\n    classList.add(name);\n  }\n\n  /**\n   * A handler for the `change` event for an element that has `checked` and `name` properties.\n   * This can be used with `ui-switch`, `ui-checkbox`, and `checkbox` elements.\n   *\n   * The `name` should correspond to a variable name to be set. The set value is the value\n   * of `checked` property read from the event's target.\n   */\n  protected _toggleBooleanOption(e: Event): void {\n    const { name, checked } = e.target as CheckboxElement;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (this as any)[name as string] = checked;\n  }\n\n  async loadMonaco(): Promise<void> {\n    const base = new URL('/node_modules/monaco-editor/', window.location.href).toString();\n    MonacoLoader.createEnvironment(base);\n    await MonacoLoader.loadMonaco(base);\n    await MonacoLoader.monacoReady();\n  }\n\n  /**\n   * The page render function. Usually you don't need to use it.\n   * It renders the header template, main section, and the content.\n   */\n  override pageTemplate(): TemplateResult {\n    return html`\n    ${this.headerTemplate()}\n    ${this.navigationTemplate()}\n    <main>\n      ${this.contentTemplate()}\n    </main>`;\n  }\n\n  /**\n   * Call this on the top of the `render()` method to render demo navigation\n   * @returns HTML template for demo header\n   */\n  headerTemplate(): TemplateResult {\n    const { componentName } = this;\n    return html`\n    <header>\n      ${componentName ? html`<h1 class=\"api-title\">${componentName}</h1>` : ''}\n    </header>`;\n  }\n\n  navigationTemplate(): TemplateResult {\n    return html``;\n  }\n\n  /**\n   * Abstract method. When not overriding `render()` method you can use\n   * this function to render content inside the standard API components layout.\n   *\n   * ```\n   * contentTemplate() {\n   *  return html`<p>Demo content</p>`;\n   * }\n   * ```\n   */\n  abstract contentTemplate(): TemplateResult;\n}\n"]}

package/dist/ui/dialog/UiDialog.d.ts

@@ -104,7 +104,7 @@ export default class UiDialog extends UiElement {
      * To be set by a child class when closing the dialog.
      * This is passed to the close event.
      */
-    protected dialogValue?: unknown;
+    dialogValue?: unknown;
     constructor();
     handleClick(e: MouseEvent): void;
     handleKeyDown(e: KeyboardEvent): void;

package/dist/ui/dialog/UiDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiDialog.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/UiDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,8BAA8B,CAAA;AAErC,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS;IAC7C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;OAGG;IAC0B,KAAK,UAAS;IAE3C;;;;OAIG;IAC0B,IAAI,UAAS;IAE1C;;;;OAIG;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAElD;;;;OAIG;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAElD;;OAEG;IACc,QAAQ,CAAC,MAAM,EAAG,iBAAiB,CAAC;IAE5C,SAAS,CAAC,OAAO,UAAS;IAE1B,SAAS,CAAC,QAAQ,UAAS;IAE3B,SAAS,CAAC,SAAS,UAAS;IAEmB,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,WAAW,EAAE,CAAC;IAE3C,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,WAAW,EAAE,CAAC;IAEtC,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAG,WAAW,EAAE,CAAC;IAErG;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;;IASvB,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAYhC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;cAO3B,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOzE,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAgBnC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAMlC,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAiB/D,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAQnC,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B,SAAS,CAAC,aAAa,IAAI,IAAI;IAItB,MAAM,IAAI,cAAc;IAWjC,SAAS,CAAC,UAAU,IAAI,cAAc;IAUtC,SAAS,CAAC,WAAW,IAAI,cAAc;IAUvC,SAAS,CAAC,UAAU,IAAI,cAAc;IAMtC,SAAS,CAAC,aAAa,IAAI,cAAc;IAazC,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;IAUhE,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;CASjE"}
+{"version":3,"file":"UiDialog.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/UiDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,8BAA8B,CAAA;AAErC,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS;IAC7C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;OAGG;IAC0B,KAAK,UAAS;IAE3C;;;;OAIG;IAC0B,IAAI,UAAS;IAE1C;;;;OAIG;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAElD;;;;OAIG;IACyB,YAAY,CAAC,EAAE,MAAM,CAAC;IAElD;;OAEG;IACc,QAAQ,CAAC,MAAM,EAAG,iBAAiB,CAAC;IAE5C,SAAS,CAAC,OAAO,UAAS;IAE1B,SAAS,CAAC,QAAQ,UAAS;IAE3B,SAAS,CAAC,SAAS,UAAS;IAEmB,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,WAAW,EAAE,CAAC;IAE3C,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,WAAW,EAAE,CAAC;IAEtC,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAG,WAAW,EAAE,CAAC;IAErG;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;;IASb,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAYhC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;cAO3B,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOzE,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAgBnC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAOlC,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAiB/D,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAQnC,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B,SAAS,CAAC,aAAa,IAAI,IAAI;IAItB,MAAM,IAAI,cAAc;IAWjC,SAAS,CAAC,UAAU,IAAI,cAAc;IAUtC,SAAS,CAAC,WAAW,IAAI,cAAc;IAUvC,SAAS,CAAC,UAAU,IAAI,cAAc;IAMtC,SAAS,CAAC,aAAa,IAAI,cAAc;IAczC,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;IAUhE,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;CASjE"}

package/dist/ui/dialog/UiDialog.js

@@ -149,9 +149,10 @@ export default class UiDialog extends UiElement {
         }
     }
     handleSlotChange() {
-        this.hasIcon = !!this.icons.length;
-        this.hasTitle = !!this.titles.length;
-        this.hasButton = !!this.buttons.length;
+        const { icons, titles, buttons } = this;
+        this.hasIcon = !!icons && !!icons.length;
+        this.hasTitle = !!titles && !!titles.length;
+        this.hasButton = !!buttons && !!buttons.length;
     }
     handleInteraction(value) {
         if (!['dismiss', 'confirm'].includes(value)) {
@@ -224,6 +225,7 @@ export default class UiDialog extends UiElement {
     <div class="${classMap(classes)}" part="button">
       <slot name="button" @slotchange="${this.handleSlotChange}"></slot>
       ${this.renderDismissButton()}
+      ${this.renderConfirmButton()}
     </div>
     `;
     }

package/dist/ui/dialog/UiDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiDialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/UiDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport UiButton from \"../button/UiButton.js\";\nimport '../../define/ui/ui-button.js'\n\nexport interface UiDialogClosingReason {\n  /**\n   * Whether the dialog was cancelled by either activating the `dismiss` button\n   * or by pressing escape.\n   */\n  cancelled: boolean;\n  /**\n   * This is used in cases when the dialog has more complex purpose.\n   * This is the value expected from the dialog.\n   */\n  value?: unknown;\n}\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary \n * to place the dialog in the `<body>`.\n * \n * ## Using buttons\n * \n * The dialog automatically recognizes buttons with values `confirm` and `dismiss` \n * to close the dialog and dispatch the `close` event. The event has additional \n * closing reason detail.\n * \n * ```javascript\n * <ui-button value=\"dismiss\">Cancel</ui-button> \n * <ui-button value=\"confirm\">Take action</ui-button> \n * ```\n * \n * ```javascript\n * <button value=\"dismiss\">Cancel</button> \n * <button value=\"confirm\">Take action</button> \n * ```\n * \n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n * \n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the \n * dialog won't trigger the close button. \n * \n * ## Full example\n * \n * ```javascript\n * <ui-dialog modal>\n *  <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n * \n *  <span slot=\"title\">Delete photos?</span>\n *  <p>This action will permanently remove the selected pictures from your account.</p>\n * \n *  <ui-button slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n * \n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss` buttons to automatically close the dialog.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement {\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * Opens the dialog as modal when toggling dialog's open state.\n   * @attribute\n   */\n  @property({ type: Boolean }) modal = false;\n\n  /**\n   * Toggles visibility of the dialog.\n   * Note, the dialog is opened asynchronously after the update is performed.\n   * @attribute\n   */\n  @property({ type: Boolean }) open = false;\n\n  /**\n   * Imperative access to create a dismiss button.\n   * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) dismissLabel?: string;\n\n  /**\n   * Imperative access to create a confirm button.\n   * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) confirmLabel?: string;\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') readonly dialog!: HTMLDialogElement;\n\n  @state() protected hasIcon = false;\n\n  @state() protected hasTitle = false;\n\n  @state() protected hasButton = false;\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected readonly icons!: HTMLElement[];\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected readonly titles!: HTMLElement[];\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected readonly buttons!: HTMLElement[];\n\n  /**\n   * To be set by a child class when closing the dialog.\n   * This is passed to the close event.\n   */\n  protected dialogValue?: unknown;\n\n  constructor() {\n    super();\n\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    const path = e.composedPath();\n    const { buttons } = this;\n    const button = path.find(i => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined;\n    if (!button) {\n      return;\n    }\n    const { value ='' } = button;\n    this.handleInteraction(value as 'dismiss' | 'confirm');\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    super.handleKeyDown(e);\n    if (e.key === 'Escape') {\n      this.handleInteraction('dismiss');\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.controlVisibility();\n    }\n    super.updated(changedProperties);\n  }\n\n  protected controlVisibility(): void {\n    const { dialog, modal, open } = this;\n    if (!dialog) {\n      return;\n    }\n    if (open) {\n      if (modal) {\n        dialog.showModal();\n      } else {\n        dialog.show();\n      }\n    } else {\n      dialog.close();\n    }\n  }\n\n  protected handleSlotChange(): void {\n    this.hasIcon = !!this.icons.length;\n    this.hasTitle = !!this.titles.length;\n    this.hasButton = !!this.buttons.length;\n  }\n\n  protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n    if (!['dismiss', 'confirm'].includes(value)) {\n      return;\n    }\n    this.open = false;\n    const detail: UiDialogClosingReason = {\n      cancelled: value === 'dismiss',\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue;\n    }\n    this.dispatchEvent(new CustomEvent<UiDialogClosingReason>('close', {\n      composed: true,\n      detail,\n    }));\n  }\n\n  protected handleDialogClose(): void {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    this.handleInteraction('dismiss');\n  }\n\n  protected handleDismiss(): void {\n    this.handleInteraction('dismiss');\n  }\n\n  protected handleConfirm(): void {\n    this.handleInteraction('confirm');\n  }\n\n  override render(): TemplateResult {\n    return html`\n    <dialog @close=\"${this.handleDialogClose}\">\n      ${this.renderIcon()}\n      ${this.renderTitle()}\n      ${this.renderBody()}\n      ${this.renderButtons()}\n    </dialog>\n    `;\n  }\n\n  protected renderIcon(): TemplateResult {\n    const classes: ClassInfo = {\n      icon: true,\n      'with-icon': this.hasIcon,\n    };\n    return html`\n    <div class=\"${classMap(classes)}\" part=\"icon\"><slot name=\"icon\" @slotchange=\"${this.handleSlotChange}\"></slot></div>\n    `;\n  }\n\n  protected renderTitle(): TemplateResult {\n    const classes: ClassInfo = {\n      title: true,\n      'with-title': this.hasTitle,\n    };\n    return html`\n    <div class=\"${classMap(classes)}\" part=\"title\"><slot name=\"title\" @slotchange=\"${this.handleSlotChange}\"></slot></div>\n    `;\n  }\n\n  protected renderBody(): TemplateResult {\n    return html`\n    <div class=\"content\"><slot></slot></div>\n    `;\n  }\n\n  protected renderButtons(): TemplateResult {\n    const classes: ClassInfo = {\n      buttons: true,\n      'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n    };\n    return html`\n    <div class=\"${classMap(classes)}\" part=\"button\">\n      <slot name=\"button\" @slotchange=\"${this.handleSlotChange}\"></slot>\n      ${this.renderDismissButton()}\n    </div>\n    `;\n  }\n\n  protected renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this;\n    if (!dismissLabel) {\n      return nothing;\n    }\n    return html`\n     <ui-button value=\"dismiss\" type=\"text\" class=\"internal-button\" @click=\"${this.handleDismiss}\">${dismissLabel}</ui-button>\n    `;\n  }\n\n  protected renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel } = this;\n    if (!confirmLabel) {\n      return nothing;\n    }\n    return html`\n     <ui-button value=\"confirm\" type=\"text\" class=\"internal-button\" @click=\"${this.handleConfirm}\">${confirmLabel}</ui-button>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"UiDialog.js","sourceRoot":"","sources":["../../../src/ui/dialog/UiDialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACtG,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,8BAA8B,CAAA;AAerC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS;IAC7C,IAAI,QAAQ;QACV,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED;;;OAGG;IAEH,IAAI,QAAQ,CAAC,KAAc;QACzB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QAC7B,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACtC,CAAC;IAED;;;OAGG;IAC0B,KAAK,GAAG,KAAK,CAAC;IAE3C;;;;OAIG;IAC0B,IAAI,GAAG,KAAK,CAAC;IAE1C;;;;OAIG;IACyB,YAAY,CAAU;IAElD;;;;OAIG;IACyB,YAAY,CAAU;IAElD;;OAEG;IACuB,MAAM,CAAqB;IAElC,OAAO,GAAG,KAAK,CAAC;IAEhB,QAAQ,GAAG,KAAK,CAAC;IAEjB,SAAS,GAAG,KAAK,CAAC;IAEsC,KAAK,CAAiB;IAExB,MAAM,CAAiB;IAEnB,OAAO,CAAiB;IAErG;;;OAGG;IACH,WAAW,CAAW;IAEtB;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACjD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACvD,CAAC;IAEQ,WAAW,CAAC,CAAa;QAChC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACrB,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;QAC9B,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAgB,CAAC,CAA6C,CAAC;QAC9G,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,MAAM,EAAE,KAAK,GAAE,EAAE,EAAE,GAAG,MAAM,CAAC;QAC7B,IAAI,CAAC,iBAAiB,CAAC,KAA8B,CAAC,CAAC;IACzD,CAAC;IAEQ,aAAa,CAAC,CAAgB;QACrC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACvB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;SACnC;IACH,CAAC;IAEkB,OAAO,CAAC,iBAAuC;QAChE,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QACD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACnC,CAAC;IAES,iBAAiB;QACzB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,IAAI,IAAI,EAAE;YACR,IAAI,KAAK,EAAE;gBACT,MAAM,CAAC,SAAS,EAAE,CAAC;aACpB;iBAAM;gBACL,MAAM,CAAC,IAAI,EAAE,CAAC;aACf;SACF;aAAM;YACL,MAAM,CAAC,KAAK,EAAE,CAAC;SAChB;IACH,CAAC;IAES,gBAAgB;QACxB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACxC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;QAC5C,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC;IACjD,CAAC;IAES,iBAAiB,CAAC,KAA4B;QACtD,IAAI,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;YAC3C,OAAO;SACR;QACD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,MAAM,MAAM,GAA0B;YACpC,SAAS,EAAE,KAAK,KAAK,SAAS;SAC/B,CAAA;QACD,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;YAClC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;SACjC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAwB,OAAO,EAAE;YACjE,QAAQ,EAAE,IAAI;YACd,MAAM;SACP,CAAC,CAAC,CAAC;IACN,CAAC;IAES,iBAAiB;QACzB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QACD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC;IAES,aAAa;QACrB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC;IAES,aAAa;QACrB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;sBACO,IAAI,CAAC,iBAAiB;QACpC,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,aAAa,EAAE;;KAEvB,CAAC;IACJ,CAAC;IAES,UAAU;QAClB,MAAM,OAAO,GAAc;YACzB,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,IAAI,CAAC,OAAO;SAC1B,CAAC;QACF,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,OAAO,CAAC,gDAAgD,IAAI,CAAC,gBAAgB;KACnG,CAAC;IACJ,CAAC;IAES,WAAW;QACnB,MAAM,OAAO,GAAc;YACzB,KAAK,EAAE,IAAI;YACX,YAAY,EAAE,IAAI,CAAC,QAAQ;SAC5B,CAAC;QACF,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,OAAO,CAAC,kDAAkD,IAAI,CAAC,gBAAgB;KACrG,CAAC;IACJ,CAAC;IAES,UAAU;QAClB,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,MAAM,OAAO,GAAc;YACzB,OAAO,EAAE,IAAI;YACb,cAAc,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;SAC7E,CAAC;QACF,OAAO,IAAI,CAAA;kBACG,QAAQ,CAAC,OAAO,CAAC;yCACM,IAAI,CAAC,gBAAgB;QACtD,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,mBAAmB,EAAE;;KAE7B,CAAC;IACJ,CAAC;IAES,mBAAmB;QAC3B,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;8EAC+D,IAAI,CAAC,aAAa,KAAK,YAAY;KAC5G,CAAC;IACJ,CAAC;IAES,mBAAmB;QAC3B,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;8EAC+D,IAAI,CAAC,aAAa,KAAK,YAAY;KAC5G,CAAC;IACJ,CAAC;CACF;AAvNC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAK1C;AAM4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAe;AAOd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAc;AAOd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAOtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAKjC;IAAhB,KAAK,CAAC,QAAQ,CAAC;wCAAqC;AAE5C;IAAR,KAAK,EAAE;yCAA2B;AAE1B;IAAR,KAAK,EAAE;0CAA4B;AAE3B;IAAR,KAAK,EAAE;2CAA6B;AAEmB;IAAvD,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAA0C;AAE3C;IAArD,kBAAkB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAA2C;AAEtC;IAAzD,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;yCAA4C","sourcesContent":["import { html, nothing, PropertyValues, TemplateResult } from \"lit\";\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from \"lit/decorators.js\";\nimport { ClassInfo, classMap } from \"lit/directives/class-map.js\";\nimport { UiElement } from \"../UiElement.js\";\nimport { isDisabled, setDisabled } from \"../lib/disabled.js\";\nimport UiButton from \"../button/UiButton.js\";\nimport '../../define/ui/ui-button.js'\n\nexport interface UiDialogClosingReason {\n  /**\n   * Whether the dialog was cancelled by either activating the `dismiss` button\n   * or by pressing escape.\n   */\n  cancelled: boolean;\n  /**\n   * This is used in cases when the dialog has more complex purpose.\n   * This is the value expected from the dialog.\n   */\n  value?: unknown;\n}\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary \n * to place the dialog in the `<body>`.\n * \n * ## Using buttons\n * \n * The dialog automatically recognizes buttons with values `confirm` and `dismiss` \n * to close the dialog and dispatch the `close` event. The event has additional \n * closing reason detail.\n * \n * ```javascript\n * <ui-button value=\"dismiss\">Cancel</ui-button> \n * <ui-button value=\"confirm\">Take action</ui-button> \n * ```\n * \n * ```javascript\n * <button value=\"dismiss\">Cancel</button> \n * <button value=\"confirm\">Take action</button> \n * ```\n * \n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n * \n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the \n * dialog won't trigger the close button. \n * \n * ## Full example\n * \n * ```javascript\n * <ui-dialog modal>\n *  <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n * \n *  <span slot=\"title\">Delete photos?</span>\n *  <p>This action will permanently remove the selected pictures from your account.</p>\n * \n *  <ui-button slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n * \n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss` buttons to automatically close the dialog.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement {\n  get disabled(): boolean {\n    return isDisabled(this);\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this);\n    setDisabled(this, value);\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * Opens the dialog as modal when toggling dialog's open state.\n   * @attribute\n   */\n  @property({ type: Boolean }) modal = false;\n\n  /**\n   * Toggles visibility of the dialog.\n   * Note, the dialog is opened asynchronously after the update is performed.\n   * @attribute\n   */\n  @property({ type: Boolean }) open = false;\n\n  /**\n   * Imperative access to create a dismiss button.\n   * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) dismissLabel?: string;\n\n  /**\n   * Imperative access to create a confirm button.\n   * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) confirmLabel?: string;\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') readonly dialog!: HTMLDialogElement;\n\n  @state() protected hasIcon = false;\n\n  @state() protected hasTitle = false;\n\n  @state() protected hasButton = false;\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected readonly icons!: HTMLElement[];\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected readonly titles!: HTMLElement[];\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected readonly buttons!: HTMLElement[];\n\n  /**\n   * To be set by a child class when closing the dialog.\n   * This is passed to the close event.\n   */\n  dialogValue?: unknown;\n\n  constructor() {\n    super();\n\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e);\n    const path = e.composedPath();\n    const { buttons } = this;\n    const button = path.find(i => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined;\n    if (!button) {\n      return;\n    }\n    const { value ='' } = button;\n    this.handleInteraction(value as 'dismiss' | 'confirm');\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    super.handleKeyDown(e);\n    if (e.key === 'Escape') {\n      this.handleInteraction('dismiss');\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.controlVisibility();\n    }\n    super.updated(changedProperties);\n  }\n\n  protected controlVisibility(): void {\n    const { dialog, modal, open } = this;\n    if (!dialog) {\n      return;\n    }\n    if (open) {\n      if (modal) {\n        dialog.showModal();\n      } else {\n        dialog.show();\n      }\n    } else {\n      dialog.close();\n    }\n  }\n\n  protected handleSlotChange(): void {\n    const { icons, titles, buttons } = this;\n    this.hasIcon = !!icons && !!icons.length;\n    this.hasTitle = !!titles && !!titles.length;\n    this.hasButton = !!buttons && !!buttons.length;\n  }\n\n  protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n    if (!['dismiss', 'confirm'].includes(value)) {\n      return;\n    }\n    this.open = false;\n    const detail: UiDialogClosingReason = {\n      cancelled: value === 'dismiss',\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue;\n    }\n    this.dispatchEvent(new CustomEvent<UiDialogClosingReason>('close', {\n      composed: true,\n      detail,\n    }));\n  }\n\n  protected handleDialogClose(): void {\n    if (!this.open) {\n      return;\n    }\n    this.open = false;\n    this.handleInteraction('dismiss');\n  }\n\n  protected handleDismiss(): void {\n    this.handleInteraction('dismiss');\n  }\n\n  protected handleConfirm(): void {\n    this.handleInteraction('confirm');\n  }\n\n  override render(): TemplateResult {\n    return html`\n    <dialog @close=\"${this.handleDialogClose}\">\n      ${this.renderIcon()}\n      ${this.renderTitle()}\n      ${this.renderBody()}\n      ${this.renderButtons()}\n    </dialog>\n    `;\n  }\n\n  protected renderIcon(): TemplateResult {\n    const classes: ClassInfo = {\n      icon: true,\n      'with-icon': this.hasIcon,\n    };\n    return html`\n    <div class=\"${classMap(classes)}\" part=\"icon\"><slot name=\"icon\" @slotchange=\"${this.handleSlotChange}\"></slot></div>\n    `;\n  }\n\n  protected renderTitle(): TemplateResult {\n    const classes: ClassInfo = {\n      title: true,\n      'with-title': this.hasTitle,\n    };\n    return html`\n    <div class=\"${classMap(classes)}\" part=\"title\"><slot name=\"title\" @slotchange=\"${this.handleSlotChange}\"></slot></div>\n    `;\n  }\n\n  protected renderBody(): TemplateResult {\n    return html`\n    <div class=\"content\"><slot></slot></div>\n    `;\n  }\n\n  protected renderButtons(): TemplateResult {\n    const classes: ClassInfo = {\n      buttons: true,\n      'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n    };\n    return html`\n    <div class=\"${classMap(classes)}\" part=\"button\">\n      <slot name=\"button\" @slotchange=\"${this.handleSlotChange}\"></slot>\n      ${this.renderDismissButton()}\n      ${this.renderConfirmButton()}\n    </div>\n    `;\n  }\n\n  protected renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this;\n    if (!dismissLabel) {\n      return nothing;\n    }\n    return html`\n     <ui-button value=\"dismiss\" type=\"text\" class=\"internal-button\" @click=\"${this.handleDismiss}\">${dismissLabel}</ui-button>\n    `;\n  }\n\n  protected renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel } = this;\n    if (!confirmLabel) {\n      return nothing;\n    }\n    return html`\n     <ui-button value=\"confirm\" type=\"text\" class=\"internal-button\" @click=\"${this.handleConfirm}\">${confirmLabel}</ui-button>\n    `;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "UI for API Client.",
   "license": "CC-BY-2.0",
   "main": "dist/index.js",

package/src/pages/demo/DemoPage.ts

@@ -76,18 +76,19 @@ export abstract class DemoPage extends RouteMixin(RenderableMixin(EventTarget))
   }
 
   protected activateTheme(type: 'light' | 'dark'): void {
-    const file = `theme.${type}.css`;
-    const existing = document.head.querySelector('[data-theme]');
-    if (existing) {
-      existing.parentElement?.removeChild(existing);
+    const root = document.querySelector('html');
+    if (!root) {
+      return;
     }
-    const link = document.createElement('link');
-    const url = new URL(`/src/styles/m3/${file}`, window.location.href);
-    link.rel = 'stylesheet';
-    link.type = 'text/css';
-    link.href = url.toString();
-    link.dataset.theme = 'true';
-    document.head.appendChild(link);
+    const { classList } = root;
+    // clear all themes
+    classList.forEach((value) => {
+      if (value.startsWith('theme-')) {
+        classList.remove(value);
+      }
+    });
+    const name = `theme-${type}`;
+    classList.add(name);
   }
 
   /**

package/src/ui/dialog/UiDialog.ts

@@ -130,7 +130,7 @@ export default class UiDialog extends UiElement {
    * To be set by a child class when closing the dialog.
    * This is passed to the close event.
    */
-  protected dialogValue?: unknown;
+  dialogValue?: unknown;
 
   constructor() {
     super();
@@ -182,9 +182,10 @@ export default class UiDialog extends UiElement {
   }
 
   protected handleSlotChange(): void {
-    this.hasIcon = !!this.icons.length;
-    this.hasTitle = !!this.titles.length;
-    this.hasButton = !!this.buttons.length;
+    const { icons, titles, buttons } = this;
+    this.hasIcon = !!icons && !!icons.length;
+    this.hasTitle = !!titles && !!titles.length;
+    this.hasButton = !!buttons && !!buttons.length;
   }
 
   protected handleInteraction(value: 'dismiss' | 'confirm'): void {
@@ -266,6 +267,7 @@ export default class UiDialog extends UiElement {
     <div class="${classMap(classes)}" part="button">
       <slot name="button" @slotchange="${this.handleSlotChange}"></slot>
       ${this.renderDismissButton()}
+      ${this.renderConfirmButton()}
     </div>
     `;
   }