@api-client/ui 0.5.38 → 0.5.40

package/RELEASE_SETUP.md

@@ -1,235 +0,0 @@
-# Automated Release System Setup
-
-## 🎯 Overview
-
-This project now has a **fully automated release system** that:
-
-1. **Automatically detects release types** from commit messages
-2. **Creates releases on every merge to main** (when there are changes)
-3. **Generates changelogs** from conventional commits
-4. **Publishes to npm** automatically
-5. **Provides manual fallback** for special cases
-
-## 🔄 How It Works
-
-### Automated Flow
-
-```plain
-Push to main → Tests run → Analyze commits → Determine release type → Create release
-```
-
-1. **Trigger**: Any push to the `main` branch (usually PR merges)
-2. **Testing**: Full test suite runs to ensure quality
-3. **Analysis**: System examines commits since last release
-4. **Decision**: Release type determined by commit messages:
-   - `major`: Breaking changes (`!:` or `BREAKING CHANGE:`)
-   - `minor`: New features (`feat:`)
-   - `patch`: Everything else (`fix:`, `docs:`, `chore:`, etc.)
-5. **Release**: If changes exist, creates GitHub release + npm publish
-
-### Manual Fallback
-
-```plain
-Create tag → Manual release workflow → Create release
-```
-
-For hotfixes or special releases, you can still use manual methods.
-
-## 📁 Workflow Files
-
-### `.github/workflows/auto-release.yml`
-
-- **Purpose**: Main automated release workflow
-- **Trigger**: Push to main branch
-- **Jobs**:
-  - `test`: Run tests
-  - `determine-release`: Analyze commits and decide release type
-  - `release`: Create release and publish
-
-### `.github/workflows/release.yml`
-
-- **Purpose**: Manual release fallback
-- **Trigger**: Push of version tags (`v*`)
-- **Use case**: Manual releases, hotfixes
-
-### `.github/workflows/test.yml`
-
-- **Purpose**: Quality assurance
-- **Trigger**: PRs and pushes to main
-- **Jobs**: Run tests and linting
-
-## 🎯 Release Type Detection
-
-The system analyzes commit messages since the last release:
-
-### Major Release (X.0.0)
-
-```bash
-git commit -m "feat!: remove deprecated API"
-git commit -m "feat: new system
-
-BREAKING CHANGE: Old methods no longer work"
-```
-
-### Minor Release (0.X.0)
-
-```bash
-git commit -m "feat: add OAuth2 support"
-git commit -m "feat(auth): implement JWT tokens"
-```
-
-### Patch Release (0.0.X)
-
-```bash
-git commit -m "fix: resolve memory leak"
-git commit -m "docs: update API docs"
-git commit -m "chore: update dependencies"
-```
-
-## 🛠️ Configuration Details
-
-### Commit Analysis Logic
-
-```bash
-# Check for breaking changes first
-if echo "$COMMITS" | grep -q "BREAKING CHANGE\|!:"; then
-  RELEASE_TYPE="major"
-# Then check for new features
-elif echo "$COMMITS" | grep -q "^feat"; then
-  RELEASE_TYPE="minor"
-# Default to patch
-else
-  RELEASE_TYPE="patch"
-fi
-```
-
-### Version Calculation
-
-Uses the `@pawel-up/semver` package for proper semantic versioning:
-
-```javascript
-import SemVer from '@pawel-up/semver/classes/semver.js';
-const ver = new SemVer(currentVersion);
-ver.inc(releaseType);
-return ver.format();
-```
-
-### Changelog Generation
-
-Uses `conventional-changelog-cli` with the `conventionalcommits` preset:
-
-```bash
-npx conventional-changelog-cli@latest release --preset conventionalcommits --release-count 1
-```
-
-## 🔧 Setup Requirements
-
-### GitHub Secrets
-
-- `GITHUB_TOKEN`: Automatically provided
-- `NPM_TOKEN`: Required for npm publishing
-
-### Dependencies
-
-- `conventional-changelog-cli`: For changelog generation
-- `@pawel-up/semver`: For version calculation
-- `@commitlint/config-conventional`: For commit validation
-
-### Permissions
-
-The workflows require these permissions:
-
-- `contents: write` - Create releases and tags
-- `issues: write` - Update issues
-- `pull-requests: write` - Update PRs
-
-## 🚀 Usage Examples
-
-### Normal Development Flow
-
-1. **Create feature branch**
-
-   ```bash
-   git checkout -b feature/new-auth
-   ```
-
-2. **Make changes with proper commits**
-
-   ```bash
-   git commit -m "feat: add OAuth2 authentication"
-   git commit -m "docs: update authentication docs"
-   ```
-
-3. **Create PR and merge to main**
-   - PR triggers test workflow
-   - Merge triggers auto-release workflow
-   - System creates minor release automatically
-
-### Hotfix Flow
-
-1. **Create hotfix branch**
-
-   ```bash
-   git checkout -b hotfix/critical-bug
-   ```
-
-2. **Fix and commit**
-
-   ```bash
-   git commit -m "fix: resolve critical memory leak"
-   ```
-
-3. **Merge to main**
-   - System creates patch release automatically
-
-### Manual Release (if needed)
-
-```bash
-# For immediate release
-npm run release:patch
-
-# Or create tag manually
-git tag v1.2.3
-git push origin v1.2.3
-```
-
-## 🔍 Monitoring and Debugging
-
-### Workflow Logs
-
-Check the GitHub Actions tab to see:
-
-- Which commits were analyzed
-- What release type was determined
-- Why a release was or wasn't created
-
-### Common Issues
-
-1. **No release created**: No new commits since last tag
-2. **Wrong release type**: Check commit message format
-3. **Tests failing**: Release won't proceed
-4. **Permission errors**: Check GitHub token permissions
-
-### Debugging Commands
-
-```bash
-# Check last tag
-git describe --tags --abbrev=0
-
-# See commits since last tag
-git log --pretty=format:"%s" $(git describe --tags --abbrev=0)..HEAD
-
-# Check conventional commit format
-npx commitlint --edit .git/COMMIT_EDITMSG
-```
-
-## 🎉 Benefits
-
-1. **Zero manual intervention** for regular releases
-2. **Consistent release process** with proper semantic versioning
-3. **Automatic changelog generation** from commit history
-4. **Quality gates** with automated testing
-5. **Flexible fallback** for special cases
-6. **Proper audit trail** with conventional commits
-
-This setup provides a modern, automated release system that follows industry best practices and reduces manual work while ensuring quality and consistency.

package/build/src/demo/DemoPage.d.ts

@@ -1,81 +0,0 @@
-import { TemplateResult, CSSResult } from 'lit';
-import '../md/icons/ui-icon.js';
-import '../md/button/ui-button.js';
-declare const Base: (new (...args: any[]) => import("../mixins/RenderableMixin.js").RenderableMixinInterface) & (new (...args: any[]) => import("../mixins/RouteMixin.js").RouteMixinInterface) & {
-    new (): EventTarget;
-    prototype: EventTarget;
-};
-/**
- * A base class for demo pages in the API Client ecosystem.
- */
-export declare abstract class DemoPage extends Base {
-    static get styles(): CSSResult[];
-    /**
-     * Component name rendered in the header section.
-     */
-    accessor componentName: string;
-    /**
-     * Determines whether the initial render had run and the `firstRender()`
-     * function was called.
-     */
-    accessor firstRendered: boolean;
-    /**
-     * Whether or not the dark theme is active
-     */
-    accessor darkThemeActive: boolean;
-    /**
-     * For some demo pages, whether the user is authenticated in the store.
-     */
-    authenticated: boolean;
-    constructor();
-    /**
-     * Initializes media queries and observers.
-     */
-    initMediaQueries(): void;
-    protected handleMediaQuery(e: MediaQueryListEvent): void;
-    /**
-     * 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;
-    protected activateTheme(type: 'light' | 'dark'): void;
-    /**
-     * 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;
-    loadMonaco(): Promise<void>;
-    /**
-     * The page render function. Usually you don't need to use it.
-     * It renders the header template, main section, and the content.
-     */
-    pageTemplate(): TemplateResult;
-    /**
-     * Call this on the top of the `render()` method to render demo navigation
-     * @returns HTML template for demo header
-     */
-    headerTemplate(): TemplateResult;
-    navigationTemplate(): TemplateResult;
-    /**
-     * 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;
-}
-export {};
-//# sourceMappingURL=DemoPage.d.ts.map

package/build/src/demo/DemoPage.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DemoPage.d.ts","sourceRoot":"","sources":["../../../src/demo/DemoPage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAWrD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,2BAA2B,CAAA;AAElC,QAAA,MAAM,IAAI;;;CAA2C,CAAA;AAErD;;GAEG;AACH,8BAAsB,QAAS,SAAQ,IAAI;IAEzC,MAAM,KAAK,MAAM,IAAI,SAAS,EAAE,CAE/B;IAED;;OAEG;IACS,QAAQ,CAAC,aAAa,SAAK;IAEvC;;;OAGG;IACH,SAAkB,aAAa,UAAQ;IAEvC;;OAEG;IACS,QAAQ,CAAC,eAAe,UAAQ;IAE5C;;OAEG;IACH,aAAa,UAAQ;;IAUrB;;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;IAKvC;;;OAGG;IACH,cAAc,IAAI,cAAc;IAKhC,kBAAkB,IAAI,cAAc;IAIpC;;;;;;;;;OASG;IACH,QAAQ,CAAC,eAAe,IAAI,cAAc;IAE1C,kBAAkB,IAAI,IAAI;IAI1B,oBAAoB,IAAI,cAAc;CAMvC"}

package/build/src/demo/DemoPage.js

@@ -1,175 +0,0 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { html } 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 { 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.
- */
-let DemoPage = (() => {
-    let _classSuper = Base;
-    let _staticExtraInitializers = [];
-    let _static_get_styles_decorators;
-    let _componentName_decorators;
-    let _componentName_initializers = [];
-    let _componentName_extraInitializers = [];
-    let _darkThemeActive_decorators;
-    let _darkThemeActive_initializers = [];
-    let _darkThemeActive_extraInitializers = [];
-    return class DemoPage extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _static_get_styles_decorators = [adaptStatic];
-            _componentName_decorators = [reactive()];
-            _darkThemeActive_decorators = [reactive()];
-            __esDecorate(this, null, _static_get_styles_decorators, { kind: "getter", name: "styles", static: true, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _staticExtraInitializers);
-            __esDecorate(this, null, _componentName_decorators, { kind: "accessor", name: "componentName", static: false, private: false, access: { has: obj => "componentName" in obj, get: obj => obj.componentName, set: (obj, value) => { obj.componentName = value; } }, metadata: _metadata }, _componentName_initializers, _componentName_extraInitializers);
-            __esDecorate(this, null, _darkThemeActive_decorators, { kind: "accessor", name: "darkThemeActive", static: false, private: false, access: { has: obj => "darkThemeActive" in obj, get: obj => obj.darkThemeActive, set: (obj, value) => { obj.darkThemeActive = value; } }, metadata: _metadata }, _darkThemeActive_initializers, _darkThemeActive_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(this, _staticExtraInitializers);
-        }
-        static get styles() {
-            return [typography, styles, surface];
-        }
-        #componentName_accessor_storage = __runInitializers(this, _componentName_initializers, ''
-        /**
-         * Determines whether the initial render had run and the `firstRender()`
-         * function was called.
-         */
-        );
-        /**
-         * Component name rendered in the header section.
-         */
-        get componentName() { return this.#componentName_accessor_storage; }
-        set componentName(value) { this.#componentName_accessor_storage = value; }
-        #firstRendered_accessor_storage = (__runInitializers(this, _componentName_extraInitializers), false);
-        /**
-         * Determines whether the initial render had run and the `firstRender()`
-         * function was called.
-         */
-        get firstRendered() { return this.#firstRendered_accessor_storage; }
-        set firstRendered(value) { this.#firstRendered_accessor_storage = value; }
-        #darkThemeActive_accessor_storage = __runInitializers(this, _darkThemeActive_initializers, false
-        /**
-         * For some demo pages, whether the user is authenticated in the store.
-         */
-        );
-        /**
-         * Whether or not the dark theme is active
-         */
-        get darkThemeActive() { return this.#darkThemeActive_accessor_storage; }
-        set darkThemeActive(value) { this.#darkThemeActive_accessor_storage = value; }
-        /**
-         * For some demo pages, whether the user is authenticated in the store.
-         */
-        authenticated = (__runInitializers(this, _darkThemeActive_extraInitializers), false);
-        constructor() {
-            super();
-            this.handleMediaQuery = this.handleMediaQuery.bind(this);
-            this.initMediaQueries();
-            document.body.classList.add('demo');
-        }
-        /**
-         * Initializes media queries and observers.
-         */
-        initMediaQueries() {
-            const matcher = window.matchMedia('(prefers-color-scheme: dark)');
-            if (matcher.matches) {
-                this.darkThemeActive = true;
-            }
-            this.themeActiveCallback();
-            matcher.addEventListener('change', this.handleMediaQuery);
-        }
-        handleMediaQuery(e) {
-            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.
-         */
-        themeActiveCallback() {
-            const { darkThemeActive } = this;
-            if (darkThemeActive) {
-                this.activateTheme('dark');
-            }
-            else {
-                this.activateTheme('light');
-            }
-        }
-        activateTheme(type) {
-            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.
-         */
-        _toggleBooleanOption(e) {
-            const { name, checked } = e.target;
-            this[name] = checked;
-        }
-        async loadMonaco() {
-            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.
-         */
-        pageTemplate() {
-            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() {
-            const { componentName } = this;
-            return html ` <header>${componentName ? html `<h1 class="api-title">${componentName}</h1>` : ''}</header>`;
-        }
-        navigationTemplate() {
-            return html ``;
-        }
-        handleAuthenticate() {
-            // ...
-        }
-        authenticateTemplate() {
-            return html `
-      <p>Store authorization required.</p>
-      <ui-button color="filled" @click="${this.handleAuthenticate}">Authenticate</ui-button>
-    `;
-        }
-    };
-})();
-export { DemoPage };
-//# sourceMappingURL=DemoPage.js.map

package/build/src/demo/DemoPage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DemoPage.js","sourceRoot":"","sources":["../../../src/demo/DemoPage.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAA6B,MAAM,KAAK,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAC9D,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,KAAK,YAAY,MAAM,qBAAqB,CAAA;AACnD,OAAO,UAAU,MAAM,mCAAmC,CAAA;AAC1D,OAAO,OAAO,MAAM,gCAAgC,CAAA;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,2BAA2B,CAAA;AAElC,MAAM,IAAI,GAAG,eAAe,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAA;AAErD;;GAEG;IACmB,QAAQ;sBAAS,IAAI;;;;;;;;;iBAArB,QAAS,SAAQ,WAAI;;;6CACxC,WAAW;yCAQX,QAAQ,EAAE;2CAWV,QAAQ,EAAE;YAlBX,+KAAW,MAAM,2DAEhB;YAKW,4LAAS,aAAa,6BAAb,aAAa,qGAAK;YAW3B,kMAAS,eAAe,6BAAf,eAAe,yGAAQ;;YApBxB,iDAAQ,CAAA;;QAE5B,MAAM,KAAK,MAAM;YACf,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC,CAAA;QACtC,CAAC;QAKW,uFAAyB,EAAE;QAEvC;;;WAGG;UALoC;QAHvC;;WAEG;QACS,IAAS,aAAa,mDAAK;QAA3B,IAAS,aAAa,yDAAK;QAMvC,8FAAkC,KAAK,EAAA;QAJvC;;;WAGG;QACH,IAAkB,aAAa,mDAAQ;QAAvC,IAAkB,aAAa,yDAAQ;QAK3B,2FAA2B,KAAK;QAE5C;;WAEG;UAJyC;QAH5C;;WAEG;QACS,IAAS,eAAe,qDAAQ;QAAhC,IAAS,eAAe,2DAAQ;QAE5C;;WAEG;QACH,aAAa,iEAAG,KAAK,EAAA;QAErB;YACE,KAAK,EAAE,CAAA;YACP,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACxD,IAAI,CAAC,gBAAgB,EAAE,CAAA;YAEvB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QACrC,CAAC;QAED;;WAEG;QACH,gBAAgB;YACd,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAA;YACjE,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAA;YAC7B,CAAC;YACD,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1B,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC3D,CAAC;QAES,gBAAgB,CAAC,CAAsB;YAC/C,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,mBAAmB,EAAE,CAAA;QAC5B,CAAC;QAED;;;;;;;WAOG;QACO,mBAAmB;YAC3B,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAA;YAChC,IAAI,eAAe,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YAC5B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YAC7B,CAAC;QACH,CAAC;QAES,aAAa,CAAC,IAAsB;YAC5C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YAC3C,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAM;YACR,CAAC;YACD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;YAC1B,mBAAmB;YACnB,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC1B,IAAI,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC/B,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;gBACzB,CAAC;YACH,CAAC,CAAC,CAAA;YACF,MAAM,IAAI,GAAG,SAAS,IAAI,EAAE,CAAA;YAC5B,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QACrB,CAAC;QAED;;;;;;WAMG;QACO,oBAAoB,CAAC,CAAQ;YACrC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAyB,CAEpD;YAAC,IAAY,CAAC,IAAc,CAAC,GAAG,OAAO,CAAA;QAC1C,CAAC;QAED,KAAK,CAAC,UAAU;YACd,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,8BAA8B,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAA;YACrF,YAAY,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;YACpC,MAAM,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;YACnC,MAAM,YAAY,CAAC,WAAW,EAAE,CAAA;QAClC,CAAC;QAED;;;WAGG;QACM,YAAY;YACnB,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE;cACvD,IAAI,CAAC,eAAe,EAAE,SAAS,CAAA;QAC3C,CAAC;QAED;;;WAGG;QACH,cAAc;YACZ,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAA;YAC9B,OAAO,IAAI,CAAA,YAAY,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,aAAa,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,CAAA;QAC1G,CAAC;QAED,kBAAkB;YAChB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAcD,kBAAkB;YAChB,MAAM;QACR,CAAC;QAED,oBAAoB;YAClB,OAAO,IAAI,CAAA;;0CAE2B,IAAI,CAAC,kBAAkB;KAC5D,CAAA;QACH,CAAC;;;SApJmB,QAAQ","sourcesContent":["import { html, TemplateResult, CSSResult } from 'lit'\nimport { RenderableMixin } from '../mixins/RenderableMixin.js'\nimport reactive from '../decorators/reactive.js'\nimport styles from './DemoStyles.js'\nimport { RouteMixin } from '../mixins/RouteMixin.js'\nimport * as MonacoLoader from '../monaco/loader.js'\nimport typography from '../styles/m3/typography.module.js'\nimport surface from '../styles/m3/surface.module.js'\nimport type CheckboxElement from '../md/checkbox/internals/CheckboxElement.js'\nimport { adaptStatic } from '../decorators/styles.js'\n\nimport '../md/icons/ui-icon.js'\nimport '../md/button/ui-button.js'\n\nconst Base = RenderableMixin(RouteMixin(EventTarget))\n\n/**\n * A base class for demo pages in the API Client ecosystem.\n */\nexport abstract class DemoPage extends Base {\n  @adaptStatic\n  static get styles(): CSSResult[] {\n    return [typography, styles, surface]\n  }\n\n  /**\n   * Component name rendered in the header section.\n   */\n  @reactive() accessor componentName = ''\n\n  /**\n   * Determines whether the initial render had run and the `firstRender()`\n   * function was called.\n   */\n  override accessor firstRendered = false\n\n  /**\n   * Whether or not the dark theme is active\n   */\n  @reactive() accessor darkThemeActive = false\n\n  /**\n   * For some demo pages, whether the user is authenticated in the store.\n   */\n  authenticated = 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` ${this.headerTemplate()} ${this.navigationTemplate()}\n      <main>${this.contentTemplate()}</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` <header>${componentName ? html`<h1 class=\"api-title\">${componentName}</h1>` : ''}</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  handleAuthenticate(): void {\n    // ...\n  }\n\n  authenticateTemplate(): TemplateResult {\n    return html`\n      <p>Store authorization required.</p>\n      <ui-button color=\"filled\" @click=\"${this.handleAuthenticate}\">Authenticate</ui-button>\n    `\n  }\n}\n"]}

package/build/src/demo/DemoStyles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
-//# sourceMappingURL=DemoStyles.d.ts.map

package/build/src/demo/DemoStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DemoStyles.d.ts","sourceRoot":"","sources":["../../../src/demo/DemoStyles.ts"],"names":[],"mappings":";AAEA,wBAyDC"}

package/build/src/demo/DemoStyles.js

@@ -1,60 +0,0 @@
-import { css } from 'lit';
-export default css `
-  :root {
-    --dot-size: 1px;
-    --dot-space: 7px;
-  }
-
-  html,
-  body {
-    margin: 0;
-    font-family: 'Roboto', 'Noto', sans-serif;
-    background-color: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface);
-    background-image: radial-gradient(var(--md-sys-color-inverse-on-surface) 1px, transparent 0);
-    background-size: var(--dot-space) var(--dot-space);
-  }
-
-  .demo {
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
-  }
-
-  header {
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-    display: flex;
-    align-items: center;
-
-    max-width: 1440px;
-    margin: 20px 40px;
-    padding: 0 24px;
-    border-radius: 40px;
-
-    font-family: var(--md-sys-typescale-title-large-font);
-    font-weight: var(--md-sys-typescale-title-large-weight);
-    font-size: var(--md-sys-typescale-title-large-size);
-    letter-spacing: var(--md-sys-typescale-title-large-tracking);
-    line-height: var(--md-sys-typescale-title-large-height);
-  }
-
-  #app {
-    height: 100%;
-  }
-
-  main {
-    /* max-width: 900px;
-  margin: 40px auto; */
-    border-radius: 40px;
-    padding: 24px;
-
-    /* background-color: var(--md-sys-color-primary-container);
-  color: var(--md-sys-color-on-primary-container); */
-  }
-
-  .demo-section {
-    margin: 60px 0;
-  }
-`;
-//# sourceMappingURL=DemoStyles.js.map

package/build/src/demo/DemoStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DemoStyles.js","sourceRoot":"","sources":["../../../src/demo/DemoStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :root {\n    --dot-size: 1px;\n    --dot-space: 7px;\n  }\n\n  html,\n  body {\n    margin: 0;\n    font-family: 'Roboto', 'Noto', sans-serif;\n    background-color: var(--md-sys-color-surface);\n    color: var(--md-sys-color-on-surface);\n    background-image: radial-gradient(var(--md-sys-color-inverse-on-surface) 1px, transparent 0);\n    background-size: var(--dot-space) var(--dot-space);\n  }\n\n  .demo {\n    margin: 0;\n    padding: 0;\n    min-height: 100vh;\n  }\n\n  header {\n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n    display: flex;\n    align-items: center;\n\n    max-width: 1440px;\n    margin: 20px 40px;\n    padding: 0 24px;\n    border-radius: 40px;\n\n    font-family: var(--md-sys-typescale-title-large-font);\n    font-weight: var(--md-sys-typescale-title-large-weight);\n    font-size: var(--md-sys-typescale-title-large-size);\n    letter-spacing: var(--md-sys-typescale-title-large-tracking);\n    line-height: var(--md-sys-typescale-title-large-height);\n  }\n\n  #app {\n    height: 100%;\n  }\n\n  main {\n    /* max-width: 900px;\n  margin: 40px auto; */\n    border-radius: 40px;\n    padding: 24px;\n\n    /* background-color: var(--md-sys-color-primary-container);\n  color: var(--md-sys-color-on-primary-container); */\n  }\n\n  .demo-section {\n    margin: 60px 0;\n  }\n`\n"]}

package/build/test/elements/navigation/Navigation.test.d.ts

@@ -1,3 +0,0 @@
-import '../../../src/elements/navigation/ui-navigation.js';
-import '../../../src/elements/navigation/ui-navigation-item.js';
-//# sourceMappingURL=Navigation.test.d.ts.map

package/build/test/elements/navigation/Navigation.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Navigation.test.d.ts","sourceRoot":"","sources":["../../../../test/elements/navigation/Navigation.test.ts"],"names":[],"mappings":"AAEA,OAAO,mDAAmD,CAAA;AAC1D,OAAO,wDAAwD,CAAA"}